Friday Frontend: JSConf Hawai'i Edition
Hello from beautiful Honolulu Hawai’i where I had a last minute opportunity to represent JSParty and join another 300 or so developers for the inaugural JSConf Hawai’i. There have been some absolutely amazing talks - going to conferences like this really helps energize me and keep me excited about the world that is frontend development, I highly recommend going if you get the chance.
I’ve got a solid set of articles for you this week, but the big announcement is that React Hooks are now released in a production release! Very exciting, with the potential to change a lot of how not only React applications are developed, but applications across other frameworks as well.
KBall from ZenDev
CSS & SCSS
Applying Styles Based on the User Scroll Position with Smart CSS
This is an interesting start, but I think once you understand the concept you can take it much further. This example essentially handles 2 cases in the CSS based on a data attribute… a class could work just as well. But what if you used this same idea to set up some CSS custom properties? You could handle all sorts of scroll variations. The possibilities are endless.
Pure CSS lettering, a bad and fun idea
From a practical standpoint, this is a terrible idea, as the author freely admits. As an artistic exploration, a learning project, or the use of code as a form of creative expression, this is a really cool project.
Custom Cursor Effects
This is kind of in the middle between impractical and useful. For most purposes, you won’t need to create a custom cursor effect. But there are situations in which you could use this technique to create a nice subtle attention-directing animation as someone gets close to a particular UI element, so it may well be a good tool to add to your toolkit.
A Guide To CSS Support In Browsers
Compared to the old days of web development, back when IE 6 and 7 were still commonly used, the cross-browser support issues of today seem small. But that doesn’t make them any less frustrating when you run into one that’s blocking what you want to do. However, one of the really cool things is that not only are browsers getting better at staying up to date (evergreen FTW!) but the CSS language itself is also gaining better and better mechanisms for handling fallback around lack of support. This article gives you the breakdown.
CSS Grid: Excel Spreadsheet
In the “example of amazing things you could do” category, check out this codepen! Really shows off the power of CSS grid by implementing an imitation of Excel in 500 lines of SCSS, most of which go into the toolbar and icons.
React v16.8: The One With Hooks
It’s official! Hooks are live and production ready! Now, it does sound like there were some changes between the early prototypes and the final release, so don’t be surprised if something you wrote with an early version of hooks needs a little work to be updated, but with this release the React team is declaring them ready for production use.
What Hooks Mean for Vue
Mastering Computed Properties in VueJS
Hydra - Live Coding Networked Visuals
Google Play Store now open for Progressive Web Apps 😱
This is a huge deal, letting PWAs into the play store closes a big gap in discoverability & ease of installability, as well as opening the door to having PWAs that can access some native capabilities (right now it looks like entirely through intents) beyond what a vanilla web app would, but without having to pull in something like Cordova. Very very cool!
Best of 2018: UX Design Case Studies
For those more on the design end of frontend development, this is a phenomenal roundup of UX design case studies that happened this last year. Software focused but some pretty interesting process case studies as well.
Launching SpaceX GraphQL API 🚀
This is both an amazing walkthrough of GraphQL and some of the thinking behind setting up a GraphQL server, but also just an amazingly fun and enjoyable blog post to read. The author’s enthusiasm just bubbles over, and the data they give you to explore is fascinating.