Friday Frontend: JSConf.US Edition
This week's Friday Frontend Inspiration is Johnny-Five, Nodebots, and the AMAZING community event that is JSConf.US.
JSConf.US is unique in a number of ways, but one of them is they include an activity day in the middle of the conference. The day included workshops (I spent the day doing hardware hacking with a Tessel-2 and Johnny-Five), but other activities included Nodecopters (drones!), Nodeboats, and alternatives like golfing, surfing lessons, and sea-kayaking (into a cave, no less).
KBall from ZenDev
CSS & SCSS
Advanced effects with CSS background blend modes
Very interesting walk through of the effects you can create with backgrounds on images using the
background-blend-mode property. I particularly like the night vision effect.
On Switching from HEX & RGB to HSL
Did you know that you don’t have to use RGB coloring for your CSS, and that in fact for many purposes using HSL is easier to understand? The reason is simple: HSL stands for ‘Hue, Saturation, Lightness’, which are far more intuitive factors to manipulate if you’re trying to increase contrast or do some darkening based on user interaction than seemingly arbitrary hexcodes.
Creating the “Perfect” CSS System
Less about CSS details and more about the high level considerations that go into creating a scalable, robust CSS architecture. If you’re in a position where you want to improve your company’s CSS practices but you’re not sure where to begin or what to think about, I think this will be helpful for you.
Time-saving CSS techniques to create responsive images
Great breakdown of a number of different ways to create responsive images in the page, along with their pros and cons and when you’d want to use which.
Building Battleship in CSS
Definitely in the “holy shit you can do that?” category rather than “this is something I want to learn to do”, but it’s amazing the extent you can take interactivity using just HTML and CSS.
Level up your .filter game
Simple internationalization of React apps
This is really cool! Utilizing both the new Context API and a babel plugin for precompilation to create a super clean and elegant way to implement internationalization in a React application.
Cross-tab Synchronization with the Web Locks API
This is interesting for a couple reasons. First off, it’s a way to create some really interesting interactions across multiple tabs open on the same website, with native support in Chrome and a polyfill for any browser that supports SharedWorkers (which basically just adds Firefox and the UC browser to the mix). But secondly, it’s interesting because it is coming out of the Web Incubator Community Group, which I hadn’t seen before but appears to be intended as a super-lightweight way to foster innovations and experimentations in the web platform without the overhead of W3C working groups, but with connections to W3C to facilitate adoption of successful experiments.
Creating good analogies
Not specific about any particular piece of code, but rather a discussion about how we talk about code, how we can teach each other, or better communicate concepts and ideas. Definitely worth a read through, especially if you struggle to explain concepts to folks.
7 Ways To Make Your Web Application More Accessible
In a recent JSParty episode we talked a lot about accessibility, and one of the big takeaways for me was that we need to make accessibility feel less intimidating. This article does exactly that, walking through a set of simple steps you can take, one step at a time.
The Complete Anatomy Of The Gutenberg WordPress Editor
Creating a Chrome extension in 2018: The good, the bad and the meh