8

Show DN: malette.io color picker

almost 7 years ago from , Frontend at CS50

Back in November 2016 I took some time off work to visit my girlfriend in Vietnam. On the way I stopped off in San Francisco to attend the Chrome Dev Summit (which was awesome). All the talk about progressive web apps, got me itching to build something. I met and got chatting @mustafa_x a design advocate for Google, who inspired me to take one of my old (Google Material Design inspired) projects and overhaul it as a shiny new PWA for 2017.

TLDR; You can find the project repository here and web app here

I certainly learnt a lot building this app. It took me about a week to get everything setup and built. Here are a few things I did differently this time:

  • The app is built on no particular framework. I did this to a. remind myself that I can still write JavaScript and make use of appropriate patterns b. to try and reduce the overall footprint of the application, utilise the platform as much as possible and keep dependencies to a minimum.
  • Uses rollup as the bundler instead of browserify. Tree shaking has always seemed logical and although I was unlikely to see huge gains here (as I was trying to use as few libraries as possible) it was a good opportunity to learn the ropes and resulted in a config that I could use on future projects.
  • Incorporates a service worker and web manifest. In the vein of everything that was being said at the summit, I tried to incorporate as much progressiveness-ness as possible to maximise the Lighthouse score which is now up at a reasonably respectable 88/100.
  • Hosted entirely on github as a static app. I didn't want to maintain a server at all and I knew that this was going to be implemented as static app. Github pages is an excellent free service and with a little hacking works plays just fine with single page apps.
  • Continuous integration to gh-pages with Travis. I have used gh-pages for really simple projects before but always found that deploying built artifacts to the pages branch a bit cumbersome. I found a tutorial that demonstrates how to get Travis to do all this hard work, it makes for a great workflow!

It was a fun project to work on and all-in-all I discovered it was not too hard to make an app PWA compliant. The hardest part was trying to make the app and all its features work nicely cross platform. On that note, I would love some feedback especially on the UI/UX! Any improvements you would make or features you would add?

2 comments

  • Rick LanceeRick Lancee, almost 7 years ago

    Great work as a PWA. Am also currently working on some of my own PWAs and they're quite the challenge sometimes, but once it works it's glorious.

    On mobile it's not clear you have to swipe the sidebar, maybe there's something you could work on. Maybe a bar in the bottom or top that displays the colours? Icon Etc?

    Accessibility wise, maybe try to get it to work with keyboard, could be fun to explore.

    Without javascript it's just a blank screen, of course it's an web app but maybe statically render the colours, so users without JS or when it fails to load can still see the pretty colors.

    Progressive web apps are all about progressively enhancing an app, so it would be logical that it would work for the lowest common denominator. No javascript, no connection, no mouse, no keyboard Etc.

    1 point
    • Luke Jackson, almost 7 years ago

      Thanks man, great feedback, I agree with all those points..

      • Mobile sidebar: maybe a visual "swipe to open" prompt on page load would suffice? The idea was that you can still see the colors go into the swatch after selecting them, and that would be enough to encourage the user to try get at them by swiping.
      • Keyboard Interactions: a bit of tabindex trickery and key bindings shouldn't be too hard to implement, is anyone experienced with this enough to point me in the right direction, best practices etc?
      • No JS content: I considered just rendering the color list but then wondered if that was just as useless as a blank page (but you are right it would be much prettier). This is would also improve Lighthouse score.

      Progressive enhancement ftw, will try address these issue when I get a free moment. Pull requests are happily received!

      1 point