Jonkman Microblog
  • Login
Show Navigation
  • Public

    • Public
    • Network
    • Groups
    • Popular
    • People

Notices by Nolan (nolan@toot.cafe), page 4

  1. Nolan (nolan@toot.cafe)'s status on Wednesday, 25-Sep-2019 12:15:28 EDT Nolan Nolan

    "Leaked video shows Google’s vision for Android-based feature phones and apps" by Kyle Bradshaw https://9to5google.com/2019/09/20/analysis-leaked-video-android-feature-phone-nokia/

    Who wants to bet that the apps will be web-based?

    - Doesn't run Google Play Store
    - Google Maps Go is a PWA
    - Proxx is a PWA
    - KaiOS is web-based

    In conversation Wednesday, 25-Sep-2019 12:15:28 EDT from toot.cafe permalink
  2. Nolan (nolan@toot.cafe)'s status on Wednesday, 25-Sep-2019 00:58:39 EDT Nolan Nolan

    Welp, it's fixed now: https://github.com/nolanlawson/pinafore/pull/1537

    I'm not keeping score anymore, but I think there are probably twice as many workarounds in Pinafore for Safari than for any other browser. EdgeHTML is probably the runner-up.

    In conversation Wednesday, 25-Sep-2019 00:58:39 EDT from toot.cafe permalink
  3. Nolan (nolan@toot.cafe)'s status on Wednesday, 25-Sep-2019 00:54:18 EDT Nolan Nolan

    "<video> tag doesn't play in iOS Safari unless you add type="*" for some reason" is a good example of where web development is still not fun https://stackoverflow.com/a/28361053

    In conversation Wednesday, 25-Sep-2019 00:54:18 EDT from toot.cafe permalink
  4. Nolan (nolan@toot.cafe)'s status on Wednesday, 25-Sep-2019 00:51:29 EDT Nolan Nolan
    in reply to
    • Christine Lemmer-Webber

    @cwebber @apconf Great talk! I really love the focus on thinking about fun, and about learning from game design. I used to play a lot of board games, and your points are all well-taken. Instead of thinking "find the bad things and ban them," it might be more productive to think "find the design tweaks that tend toward better outcomes."

    In conversation Wednesday, 25-Sep-2019 00:51:29 EDT from toot.cafe permalink
  5. Nolan (nolan@toot.cafe)'s status on Tuesday, 24-Sep-2019 12:51:58 EDT Nolan Nolan
    • LienRag

    @LienRag A web client works just like a mobile app. You type in your instance name (miaou.drycat.fr in your case), log in, and then use it. :)

    For instance for Pinafore, you go to https://pinafore.social/settings/instances/add , type in your instance, log in, and now you're using Pinafore! You don't actually need to use the Pinafore version hosted by your instance (although you can!).

    In conversation Tuesday, 24-Sep-2019 12:51:58 EDT from toot.cafe permalink
  6. Nolan (nolan@toot.cafe)'s status on Tuesday, 24-Sep-2019 10:56:58 EDT Nolan Nolan
    • Nick

    @nick Maybe if enough of us buy it, then Colonel Sanders will finally be confirmed for Smash

    In conversation Tuesday, 24-Sep-2019 10:56:58 EDT from toot.cafe permalink
  7. Baldur Bjarnason (baldur@toot.cafe)'s status on Tuesday, 24-Sep-2019 07:25:58 EDT Baldur Bjarnason Baldur Bjarnason

    Have I mentioned lately how much of a fan I am of Svelte and sapper? It's the only frontend framework I found that fits my mental model of web development perfectly.

    Which is a feat since I have some pretty firm preconceived notions on how these things should work.

    The tutorial is pretty great too.

    https://svelte.dev

    In conversation Tuesday, 24-Sep-2019 07:25:58 EDT from toot.cafe permalink Repeated by nolan
  8. Nolan (nolan@toot.cafe)'s status on Tuesday, 24-Sep-2019 10:50:59 EDT Nolan Nolan
    • Nick

    @nick Hey, you're the one who put it on your wishlist 😜

    In conversation Tuesday, 24-Sep-2019 10:50:59 EDT from toot.cafe permalink
  9. Nolan (nolan@toot.cafe)'s status on Tuesday, 24-Sep-2019 10:43:08 EDT Nolan Nolan
    • sebsauvage
    • notabénuche
    • Booteille

    @booteille @notabene @sebsauvage Push notifications can be enabled under Settings -> Instances -> (Instance name) -> Push notifications. I believe that should enable desktop notifications, but it probably depends on the browser+OS.

    In conversation Tuesday, 24-Sep-2019 10:43:08 EDT from toot.cafe permalink
  10. Nolan (nolan@toot.cafe)'s status on Tuesday, 24-Sep-2019 10:41:45 EDT Nolan Nolan
    • sebsauvage
    • notabénuche
    • Booteille

    @sebsauvage @booteille @notabene Oui en effet Pinafore c'est statique et tout se fait en XHR. :) Récemment je l'ai testé sur un Nokia 8110 4G (https://nolanlawson.com/2019/09/22/the-joy-and-challenge-of-developing-for-kaios/) et on m'a dit que ça marche sur le Pi aussi.

    In conversation Tuesday, 24-Sep-2019 10:41:45 EDT from toot.cafe permalink

    Attachments

    1. The joy and challenge of developing for KaiOS
      By Nolan Lawson from Read the Tea Leaves

      Recently I spent some time getting Pinafore to run on a KaiOS device. Overall, I found it to be challenging but enjoyable. In this post, I’ll talk about some of the tricks that helped me to work with this curious little feature phone.

      Why KaiOS? Well, I guess I’ve always been a bit of a gadget geek. I’ve been developing for Android since the early days of the HTC Dream, I managed to get my Nexus 5 to triple-boot into Android, Firefox OS, and Ubuntu Touch, and I’ve also played around with the Amazon Fire Phone, Windows Phone, iPod Touch… You get the idea.

      Recently though, I’ve found the mobile landscape a bit boring. Android and iOS are the two big players, and it’s been that way for nearly a decade. Firefox OS, Blackberry OS, Windows Phone, and other would-be contenders have long since bitten the dust.

      That’s why I’m excited about KaiOS. It’s a platform that’s growing surprisingly fast and is actually based on Firefox OS (may it rest in peace). It’s especially popular in India, where it’s already the second-most popular OS after Android.

      KaiOS can run regular websites, but it can also run “packaged” apps, ala Firefox OS. So how can an aspiring KaiOS developer get started?

      Step one: buying a development phone

      I like to test on real devices, because I want to experience my app with real-world hardware and performance constraints, as an actual user would. I decided to get the Nokia 8110 4G because it was available on Amazon for $70.

      Note that this phone only supports AT&T in the U.S., so if you plan on using it as your actual personal phone, you may be out of luck.

      When you first unbox the phone, you’ll have about 5 minutes’ worth of setup screens, after which you’re ready to go. I’d also recommend going into the settings and upgrading the OS, since mine needed an upgrade right away.

      Next steps: development environment

      The best resources I’ve found for KaiOS development are the official developer guide and Paul Kinlan’s quick start guide. Paul’s guide is the best place to start, since it’s short and will get you up and running quickly.

      Paul says that he could only get WebIDE to work in Firefox 48, but I found that Firefox 59 also worked (per the KaiOS developer guide). So let’s use that.

      First you’ll want to download Firefox 59 for your OS (in my case, Ubuntu) via Mozilla’s download site. Sadly I could not get Firefox 59 to run alongside the latest Firefox (which is my go-to browser), and I also found that Firefox 59 tried to aggressively update itself, so every time I reopened it, it would be running the latest version. To work around that, you can run this script:

      rm -fr firefox profile
      mkdir profile
      tar -xjf firefox-59.0.3.tar.bz2
      ./firefox/firefox-bin -profile profile
      

      This will delete Firefox’s stored data and restart it with a fresh profile every time. It’s handy for quickly restarting Firefox!

      After you input the “secret” code that Paul mentions (*#*#33284#*#*), you should see a little bug icon in the corner:

      At this point you should be able to run:

      adb devices
      

      …and see your device in the list of devices:

      List of devices attached
      4939400 device
      

      If adb isn’t running, you can run adb kill-server && adb start-server to restart it.

      This didn’t work for me out of the box – I got an error saying it couldn’t connect to my device due to faulty udev rules. Luckily the KaiOS developer guide has a “Setting USB access” script that will fix that.

      After running that script, I used Paul’s trick of setting up adb forwarding:

      adb forward tcp:6000 localfilesystem:/data/local/debugger-socket
      

      After this, you should be able to connect in Firefox WebIDE by clicking “Remote Runtime.”

      One thing I noticed is that occasionally my device would get disconnected from WebIDE. In that case, you can just forward to another port:

      adb forward tcp:6001 localfilesystem:/data/local/debugger-socket
      

      …and then reconnect WebIDE to the new port, and it should work.

      Next steps: actually writing code

      As far as I can tell, KaiOS is based on Firefox 48. You can tell by the user agent string:

      Mozilla/5.0 (Mobile; Nokia_8110_4G; rv:48.0) Gecko/48.0 Firefox/48.0 KAIOS/2.5.1
      

      This means that you won’t necessarily have all the latest-and-greatest JavaScript or Web API features. Here’s a brief list of what I found didn’t work:

      • async functions
      • ServiceWorker
      • Intl

      As a quick gut-check of whether your app will run on KaiOS, you can try downloading Firefox 48, loading your website, and seeing if it works. (I found this easier than trying to debug on KaiOS right out of the gate.) You can use the same script above to run Firefox 48 with a fresh profile.

      Once your code is sufficiently backwards-compatible (I found that @babel/preset-env with the default settings plus an Intl polyfill was good enough for me as a starting point), you have two options for testing your app:

      • as a packaged app
      • as a hosted app

      (If you’ve done Firefox OS development before, you’ll find these options familiar.)

      I tried both techniques, but found that the hosted app was easier for quick testing. If your development machine and phone are on the same WiFi network, then you can create a manifest.webapp file per KaiOS’s documentation and then load a URL like so:

      http://192.168.1.2:4002/manifest.webapp
      

      (If you’re not sure what IP address, to use, run ifconfig -a | grep inet.)

      Then you should see your app listed, and you can run it on the device by clicking the “play” button:

      You can also try the packaged-app route, but I found that it didn’t play well with the routing library in my framework of choice (Sapper) due to the extra /index.html. Plus, if I ever actually submit this app to the KaiStore, I’ll probably go with the hosted route since it’s less maintenance work.

      Optimizing for KaiOS

      In terms of web development, there are a few good things to be aware of when developing for KaiOS, and in particular for the Nokia 8110 4G.

      First off, the available screen size is 240×294 pixels, which you can check by using window.innerWidth in JavaScript, @media (max-width: 240px) in CSS, etc. If you set "fullscreen": true to hide the status bar, you can get slightly more breathing room: 240×320.

      I had already optimized my app for the iPhone 4’s screen size (which is 320×480), but I found I had to do extra work to make things show up correctly on an even tinier screen.

      The iPhone 4 is already pretty small, but it’s a giant compared to the Nokia 8110 4G.

      Next, the input methods are quite limited. If you’ve actually taken the time to make your webapp keyboard-accessible, then you should be most of the way there. But there are still some extra optimizations you may have to make for KaiOS.

      By default, the ↑ and ↓ arrows will typically scroll the page up or down. I decided to use the ← and → arrows to change the focus – i.e. to act as proxies for the Tab and Shift + Tab keys. I wrote some fairly simple logic to navigate through the focusable elements on the page, taking special care to allow the arrow keys to work properly inside of text inputs and modal dialogs.

      I also found that the focus outlines were a bit hard to see on the small screen, so I scaled them up for KaiOS and added some extra styling to make the focus more obvious.

      Some apps may opt to display an onscreen cursor (this seems to be the default behavior of the web browser), but I found that to be a bit of a clumsy experience. So I think managing the focus is better.

       

      Other KaiOS web developer hurdles

      The next most difficult thing about KaiOS is still the lack of modern browser standards. For instance, I couldn’t get SVG <use> tags to work properly, so I fell back to inlining each SVG as a workaround.

      CSS Grid is (mercifully) supported, so I didn’t have to backport my Grid logic. Since Grid is not supported in Firefox 48, this hints to me that KaiOS must have tweaked the Firefox OS code beyond what Firefox 48 can support. But I haven’t done the full rundown of all the supported features. (And I still find it helpful to use Firefox 48 as a minimum bar for a quick test target.)

      As with all web development, this is the area where you’ll probably have to roll up your sleeves and test for what’s supported and what’s not. But overall I find KaiOS to be much easier to develop for than, say, IE11. It’s much further along on the standards track than a truly legacy browser.

      Once you’ve gotten past those hurdles, though, the result can be surprisingly good! I was impressed at how well this tiny feature phone could run Pinafore:

       
      (Much of the credit, I’m sure, is due to the excellent SvelteJS framework.)

      Conclusion

      Building for KaiOS is fun! The device is quirky and lightweight, and it makes me excited about mobile development in a way that I haven’t felt in a while. In terms of development, it feels like a nice compromise between a feature phone with limited hardware (small screen, no touch, limited key input) and a smartphone OS with cutting-edge web technologies (it has CSS Grid! And String.prototype.padStart()! It’s not so bad!).

      However, I’m not a huge fan of app stores – I don’t like having to agree to the ToS, going through a review process, and ultimately subjecting myself to the whims of a private corporation. But KaiOS is neat, it’s cute, and it’s growing in developing markets, so I think it’s a worthy venue for development.

      And unlike fully proprietary development platforms, you’re not writing throwaway code if KaiOS ever goes away. Since it’s ultimately just a webapp, improvements I’ve made to Pinafore for keyboard accessibility and small screens will accrue to any other device that can browse the web. Other than the manifest.webapp file, there’s nothing truly specific to KaiOS that I had to do to support it.

      Overall, I find it fun and refreshing to build for something like KaiOS. It helps me see the web platform from a new perspective, and if nothing else, I’ve got a new gadget to play with.

  11. Nolan (nolan@toot.cafe)'s status on Tuesday, 24-Sep-2019 10:27:59 EDT Nolan Nolan
    • J Davis

    @supergoose toot.cafe doesn't use any of these; these are all independent third-party clients. :)

    In conversation Tuesday, 24-Sep-2019 10:27:59 EDT from toot.cafe permalink
  12. St�phanie Walter (stephaniewalter@mastodon.design)'s status on Tuesday, 24-Sep-2019 03:11:09 EDT St�phanie Walter St�phanie Walter

    #FrontEnd #Browser
    "Initial thoughts on standardizing form controls" an interesting article on browser consistency when it comes to form elements and the impacts on engineer and user experience https://www.gwhitworth.com/blog/2019/07/form-controls-components/

    In conversation Tuesday, 24-Sep-2019 03:11:09 EDT from mastodon.design permalink Repeated by nolan

    Attachments

    1. File without filename could not get a thumbnail source.
      Initial thoughts on standardizing form controls
      While the move to Chromium is bitter sweet for me, one of the things that has me excited is being able to take some of the time that the team has spent…
  13. Nolan (nolan@toot.cafe)'s status on Tuesday, 24-Sep-2019 02:51:49 EDT Nolan Nolan
    • Fabrice Desré

    @fabricedesre Wow, TIL. Thank you!

    In conversation Tuesday, 24-Sep-2019 02:51:49 EDT from toot.cafe permalink
  14. Nolan (nolan@toot.cafe)'s status on Tuesday, 24-Sep-2019 01:59:12 EDT Nolan Nolan

    All we're missing now is a Mastodon web client that does… I dunno, WebVR? Maybe I want to wave my hands around and compose a toot that way

    In conversation Tuesday, 24-Sep-2019 01:59:12 EDT from toot.cafe permalink
  15. Nolan (nolan@toot.cafe)'s status on Tuesday, 24-Sep-2019 01:57:09 EDT Nolan Nolan

    Seems there are multiple Mastodon web clients now, each with a different focus:

    - #Halcyon: Twitter-like
    - #Brutaldon: Web 1.0
    - #Pinafore: speed, simplicity
    - #Sengi: multi-instance

    Really happy to see so many different Mastodon web clients out there!

    In conversation Tuesday, 24-Sep-2019 01:57:09 EDT from toot.cafe permalink
  16. Nolan (nolan@toot.cafe)'s status on Tuesday, 24-Sep-2019 01:52:11 EDT Nolan Nolan
    • Sengi

    Just discovered a new Mastodon web client: #Sengi https://nicolasconstant.github.io/sengi/ @sengi_app

    I like that it seems to be optimized for fast instance switching, and that it can show different timelines from more than one instance simultaneously. Really neat!

    In conversation Tuesday, 24-Sep-2019 01:52:11 EDT from toot.cafe permalink
  17. Eiji Kitamura (agektmr@toot.cafe)'s status on Monday, 23-Sep-2019 21:54:21 EDT Eiji Kitamura Eiji Kitamura

    Intelligent Tracking Prevention 2.3 | WebKit
    https://webkit.org/blog/9521/intelligent-tracking-prevention-2-3/

    In conversation Monday, 23-Sep-2019 21:54:21 EDT from toot.cafe permalink Repeated by nolan

    Attachments

    1. File without filename could not get a thumbnail source.
      Intelligent Tracking Prevention 2.3
      By John Wilander from WebKit
      Note: Read about past updates to this technology in other blog posts about Intelligent Tracking Prevention, the Storage Access API, and ITP Debug Mode.
  18. Thomas, Computer Wrangler (thomasfuchs@mastodon.social)'s status on Friday, 20-Sep-2019 22:48:34 EDT Thomas, Computer Wrangler Thomas, Computer Wrangler

    Big paws are big

    In conversation Friday, 20-Sep-2019 22:48:34 EDT from mastodon.social permalink Repeated by nolan
  19. Thomas Steiner (tomayac@toot.cafe)'s status on Monday, 23-Sep-2019 06:04:25 EDT Thomas Steiner Thomas Steiner

    The joy and challenge of developing for KaiOS: https://nolanlawson.com/2019/09/22/the-joy-and-challenge-of-developing-for-kaios/
    "I’m not a huge fan of app stores—I don’t like having to agree to the ToS, going through a review process, and ultimately subjecting myself to the whims of a private corporation. […]"—Nolan Lawson

    In conversation Monday, 23-Sep-2019 06:04:25 EDT from toot.cafe permalink Repeated by nolan

    Attachments

    1. The joy and challenge of developing for KaiOS
      By Nolan Lawson from Read the Tea Leaves

      Recently I spent some time getting Pinafore to run on a KaiOS device. Overall, I found it to be challenging but enjoyable. In this post, I’ll talk about some of the tricks that helped me to work with this curious little feature phone.

      Why KaiOS? Well, I guess I’ve always been a bit of a gadget geek. I’ve been developing for Android since the early days of the HTC Dream, I managed to get my Nexus 5 to triple-boot into Android, Firefox OS, and Ubuntu Touch, and I’ve also played around with the Amazon Fire Phone, Windows Phone, iPod Touch… You get the idea.

      Recently though, I’ve found the mobile landscape a bit boring. Android and iOS are the two big players, and it’s been that way for nearly a decade. Firefox OS, Blackberry OS, Windows Phone, and other would-be contenders have long since bitten the dust.

      That’s why I’m excited about KaiOS. It’s a platform that’s growing surprisingly fast and is actually based on Firefox OS (may it rest in peace). It’s especially popular in India, where it’s already the second-most popular OS after Android.

      KaiOS can run regular websites, but it can also run “packaged” apps, ala Firefox OS. So how can an aspiring KaiOS developer get started?

      Step one: buying a development phone

      I like to test on real devices, because I want to experience my app with real-world hardware and performance constraints, as an actual user would. I decided to get the Nokia 8110 4G because it was available on Amazon for $70.

      Note that this phone only supports AT&T in the U.S., so if you plan on using it as your actual personal phone, you may be out of luck.

      When you first unbox the phone, you’ll have about 5 minutes’ worth of setup screens, after which you’re ready to go. I’d also recommend going into the settings and upgrading the OS, since mine needed an upgrade right away.

      Next steps: development environment

      The best resources I’ve found for KaiOS development are the official developer guide and Paul Kinlan’s quick start guide. Paul’s guide is the best place to start, since it’s short and will get you up and running quickly.

      Paul says that he could only get WebIDE to work in Firefox 48, but I found that Firefox 59 also worked (per the KaiOS developer guide). So let’s use that.

      First you’ll want to download Firefox 59 for your OS (in my case, Ubuntu) via Mozilla’s download site. Sadly I could not get Firefox 59 to run alongside the latest Firefox (which is my go-to browser), and I also found that Firefox 59 tried to aggressively update itself, so every time I reopened it, it would be running the latest version. To work around that, you can run this script:

      rm -fr firefox profile
      mkdir profile
      tar -xjf firefox-59.0.3.tar.bz2
      ./firefox/firefox-bin -profile profile
      

      This will delete Firefox’s stored data and restart it with a fresh profile every time. It’s handy for quickly restarting Firefox!

      After you input the “secret” code that Paul mentions (*#*#33284#*#*), you should see a little bug icon in the corner:

      At this point you should be able to run:

      adb devices
      

      …and see your device in the list of devices:

      List of devices attached
      4939400 device
      

      If adb isn’t running, you can run adb kill-server && adb start-server to restart it.

      This didn’t work for me out of the box – I got an error saying it couldn’t connect to my device due to faulty udev rules. Luckily the KaiOS developer guide has a “Setting USB access” script that will fix that.

      After running that script, I used Paul’s trick of setting up adb forwarding:

      adb forward tcp:6000 localfilesystem:/data/local/debugger-socket
      

      After this, you should be able to connect in Firefox WebIDE by clicking “Remote Runtime.”

      One thing I noticed is that occasionally my device would get disconnected from WebIDE. In that case, you can just forward to another port:

      adb forward tcp:6001 localfilesystem:/data/local/debugger-socket
      

      …and then reconnect WebIDE to the new port, and it should work.

      Next steps: actually writing code

      As far as I can tell, KaiOS is based on Firefox 48. You can tell by the user agent string:

      Mozilla/5.0 (Mobile; Nokia_8110_4G; rv:48.0) Gecko/48.0 Firefox/48.0 KAIOS/2.5.1
      

      This means that you won’t necessarily have all the latest-and-greatest JavaScript or Web API features. Here’s a brief list of what I found didn’t work:

      • async functions
      • ServiceWorker
      • Intl

      As a quick gut-check of whether your app will run on KaiOS, you can try downloading Firefox 48, loading your website, and seeing if it works. (I found this easier than trying to debug on KaiOS right out of the gate.) You can use the same script above to run Firefox 48 with a fresh profile.

      Once your code is sufficiently backwards-compatible (I found that @babel/preset-env with the default settings plus an Intl polyfill was good enough for me as a starting point), you have two options for testing your app:

      • as a packaged app
      • as a hosted app

      (If you’ve done Firefox OS development before, you’ll find these options familiar.)

      I tried both techniques, but found that the hosted app was easier for quick testing. If your development machine and phone are on the same WiFi network, then you can create a manifest.webapp file per KaiOS’s documentation and then load a URL like so:

      http://192.168.1.2:4002/manifest.webapp
      

      (If you’re not sure what IP address, to use, run ifconfig -a | grep inet.)

      Then you should see your app listed, and you can run it on the device by clicking the “play” button:

      You can also try the packaged-app route, but I found that it didn’t play well with the routing library in my framework of choice (Sapper) due to the extra /index.html. Plus, if I ever actually submit this app to the KaiStore, I’ll probably go with the hosted route since it’s less maintenance work.

      Optimizing for KaiOS

      In terms of web development, there are a few good things to be aware of when developing for KaiOS, and in particular for the Nokia 8110 4G.

      First off, the available screen size is 240×294 pixels, which you can check by using window.innerWidth in JavaScript, @media (max-width: 240px) in CSS, etc. If you set "fullscreen": true to hide the status bar, you can get slightly more breathing room: 240×320.

      I had already optimized my app for the iPhone 4’s screen size (which is 320×480), but I found I had to do extra work to make things show up correctly on an even tinier screen.

      The iPhone 4 is already pretty small, but it’s a giant compared to the Nokia 8110 4G.

      Next, the input methods are quite limited. If you’ve actually taken the time to make your webapp keyboard-accessible, then you should be most of the way there. But there are still some extra optimizations you may have to make for KaiOS.

      By default, the ↑ and ↓ arrows will typically scroll the page up or down. I decided to use the ← and → arrows to change the focus – i.e. to act as proxies for the Tab and Shift + Tab keys. I wrote some fairly simple logic to navigate through the focusable elements on the page, taking special care to allow the arrow keys to work properly inside of text inputs and modal dialogs.

      I also found that the focus outlines were a bit hard to see on the small screen, so I scaled them up for KaiOS and added some extra styling to make the focus more obvious.

      Some apps may opt to display an onscreen cursor (this seems to be the default behavior of the web browser), but I found that to be a bit of a clumsy experience. So I think managing the focus is better.

       

      Other KaiOS web developer hurdles

      The next most difficult thing about KaiOS is still the lack of modern browser standards. For instance, I couldn’t get SVG <use> tags to work properly, so I fell back to inlining each SVG as a workaround.

      CSS Grid is (mercifully) supported, so I didn’t have to backport my Grid logic. Since Grid is not supported in Firefox 48, this hints to me that KaiOS must have tweaked the Firefox OS code beyond what Firefox 48 can support. But I haven’t done the full rundown of all the supported features. (And I still find it helpful to use Firefox 48 as a minimum bar for a quick test target.)

      As with all web development, this is the area where you’ll probably have to roll up your sleeves and test for what’s supported and what’s not. But overall I find KaiOS to be much easier to develop for than, say, IE11. It’s much further along on the standards track than a truly legacy browser.

      Once you’ve gotten past those hurdles, though, the result can be surprisingly good! I was impressed at how well this tiny feature phone could run Pinafore:

       
      (Much of the credit, I’m sure, is due to the excellent SvelteJS framework.)

      Conclusion

      Building for KaiOS is fun! The device is quirky and lightweight, and it makes me excited about mobile development in a way that I haven’t felt in a while. In terms of development, it feels like a nice compromise between a feature phone with limited hardware (small screen, no touch, limited key input) and a smartphone OS with cutting-edge web technologies (it has CSS Grid! And String.prototype.padStart()! It’s not so bad!).

      However, I’m not a huge fan of app stores – I don’t like having to agree to the ToS, going through a review process, and ultimately subjecting myself to the whims of a private corporation. But KaiOS is neat, it’s cute, and it’s growing in developing markets, so I think it’s a worthy venue for development.

      And unlike fully proprietary development platforms, you’re not writing throwaway code if KaiOS ever goes away. Since it’s ultimately just a webapp, improvements I’ve made to Pinafore for keyboard accessibility and small screens will accrue to any other device that can browse the web. Other than the manifest.webapp file, there’s nothing truly specific to KaiOS that I had to do to support it.

      Overall, I find it fun and refreshing to build for something like KaiOS. It helps me see the web platform from a new perspective, and if nothing else, I’ve got a new gadget to play with.

  20. Nolan (nolan@toot.cafe)'s status on Monday, 23-Sep-2019 11:06:37 EDT Nolan Nolan
    • Marco Zehe
    • Thomas Wilburn

    @thomaswilburn @marcozehe Thanks for the suggestion! I probably should, since a lot of these things are non-obvious, and Marco has been a huge help. Maybe the autosuggest would be a good starting point.

    In conversation Monday, 23-Sep-2019 11:06:37 EDT from toot.cafe permalink
  • After
  • Before
  • Help
  • About
  • FAQ
  • TOS
  • Privacy
  • Source
  • Version
  • Contact

Jonkman Microblog is a social network, courtesy of SOBAC Microcomputer Services. It runs on GNU social, version 1.2.0-beta5, available under the GNU Affero General Public License.

Creative Commons Attribution 3.0 All Jonkman Microblog content and data are available under the Creative Commons Attribution 3.0 license.

Switch to desktop site layout.