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).
Overall it’s been an amazing experience, and I’m coming back incredibly jazzed up and inspired about JavaScript and the JS community. Learn more about what all went down in this week’s Friday Frontend Inspiration Video:
Enjoy!
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.
JavaScript
Level up your .filter game
Using filter is one of the very common fundamental operations in functional javascript. I use it day in and day out. This is an excellent tutorial on using them, and even goes into function composition for predicates. A+.
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.
10 Things You Will Eventually Learn About JavaScript Projects
An excellent set of guidelines for writing good JavaScript (or non-JavaScript, for that matter) projects. Does a great job at addressing a lot of the high level questions and issues you’ll run into as you build more and more projects.
Recovering from JavaScript errors
Once upon a time, we talked about ‘progressive enhancement’, where we started with applications that worked without any client-side scripting, and layered on optional interactivity with JavaScript. These days, often we invert this approach, starting with JavaScript and work backwards. That doesn’t necessarily mean we can’t handle JS approaches - this article highlights a “graceful degradation” approach as an alternative.
Other Awesomeness
Johnny-Five 1.0
A little outside of my typical front-end beat, but while I was at JSConf.US this week I got the opportunity to take a workshop on nodebots and Johnny Five. WOW this stuff is cool. Create interactive robots where all of the logic is written in JavaScript - the Tessel 2 even ships with a native Node runtime, but even for boards like the Arduino that don’t, Johnny-Five gives you a super clean and intuitive node-based API for programming them.
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
I’ve previously talked about how excited I am about Gutenberg - this is going to bring modern JavaScript practices to the MASSIVE audience of WordPress developers, and open up a huge new opportunity for frontend developers everywhere. Well, if you’re excited but haven’t spent a bunch of time digging into what Gutenberg is or how it works, here is an excellent big picture overview of what it is, how it works, and how to get started.
Creating a Chrome extension in 2018: The good, the bad and the meh
One of the beautiful things about modern browser extensions is that you can create super powerful extensions to the browser, entirely using web development techniques and tools. Extensions are simply HTML, CSS, and JavaScript, but arranged in a particular way and utilizing specific APIs. This article does a great overview of what the various pieces are, what some of those APIs are, and where you’re likely to run into challenges.
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
Top comments (0)