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.

Best,

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.

JavaScript

Diving Deeper in JavaScripts Objects

In the “mastering the fundamentals” category, this is a really deep look at many of the nuance of objects in JavaScript. Those things that you might never notice until you run into some strange unexpected behavior or want to do something well off the beaten path.

Future JavaScript: what is still missing?

A very thoughtful look at what features and functionality the JavaScript language is still missing, from one of the premier writers/teachers about the language itself, Dr Axel Rauschmayer. And what’s even more exciting to me… the features he’s highlighting are already under development, or at least investigation by TC39. The future of JavaScript is bright indeed.

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

A fascinating look into how the Hook pattern implemented in React applies in another JavaScript framework. This is particularly interesting because Vues have the concept of a mixin which allows for some of the same types of code reuse as a hook, but as this article shows the composability of hooks leads to some major advantages.

Mastering Computed Properties in VueJS

Vue’s reactivity model, of which computed properties are a key component, is probably the concept that is most unique to Vue of the major JavaScript frameworks. I’ve found that as I’ve used Vue more, the more I get comfortable with reactivity the more declarative, readable, and reusable my code.

Promoted Link

(Note: I’m putting this under promoted because it’s not our standard content, and it is an affiliate link so if you buy something from him later I will benefit, but this particular content is 100% free and I highly recommend it if you’re at all interested in online business or marketing)

Jeff Walker’s Launch Workshop

If I had to pick one thing that helped me to go beyond just freelance development and start building a scalable business, it would be Jeff Walker’s Product Launch Formula. And just started his once-a-year free “Launch Workshop”... It’s a game changer for your business (whether you’vestarted it or not), and the best part: it’s completely free. He’s been doing this every year since 2005, and he’s had almost a million people go through the workshop. The success stories are legendary. The only catch is that it’s only available for a few days… so go check it out right now: https://productlaunchformula.com/go?p=kball&w=alum_sideways

Other Awesome

Hydra - Live Coding Networked Visuals

I learned about this from a talk here at JSConf Hawai’i that completely blew my mind. This lets you essentially “remix” visuals from all sorts of things - geometric shapes, your own camera, live feeds - using a few simple lines of JavaScript. You can just jump in and start playing, or check out this twitter feed of examples people have shared!

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.

Happy Friday!

That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably follow me on Twitter or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html