I spent the second half of this week at O’Reilly’s Fluent Conference in San Jose, interviewing speakers for the Changelog and JSParty podcasts. As often happens when I go to conferences, I’m coming away simultaneously exhausted and incredibly energized.
There is SO MUCH cool stuff happening in our industry right now, we’re really in an incredible period of progress.
That progress is not just technical - this was the second major conference I’ve been to in the last year that has had an entire track dedicated to human and diversity questions, and that has put ethical questions front and center in keynotes. We as technologists have incredible power to influence the world, and with that power comes responsibility to do things in a way that will empower others, not manipulate and exploit them. I’m thrilled to see this become more and more front and center in our industry.
Anyways, we’ve got a bunch of great articles and resources in this week’s newsletter. My FAVORITE is a resource I learned about at the conference: http://houdini.glitch.me/. This is a site put together to demonstrate the power of CSS Houdini. Still only really usable if you are using Chrome Canary with some experimental flags enabled, but WOW is this stuff cool and exciting.
Happy Friday! Enjoy!
KBall from ZenDev
CSS & SCSS
The new (and old) CSS units you've never heard about
Okay, I thought vh and vw were pretty cool, but how about lh, lrh, vi, and vb? Sure, no browser support yet but the future of CSS is bright! Or even with stuff that has support, I had no idea turn was a CSS unit or that you could use aspect ratio in media queries. Super neat stuff!
CSS Media Queries: Quick Reference & Guide
Nothing mindblowing, but a great quick reference on media queries, as well as a look through at some of the new up and coming media queries defined by the Media Queries Level 4 spec.
Practical tips for working with CSS variables
Similar to with CSS Grid, CSS custom properties have been around long enough that we’re starting to see some real best practices emerging. Definitely appreciate the points about scoping; I look forward to seeing this approach used more and more in component frameworks and UI toolkits.
Creating a Bar Graph with CSS Grid
Sure for super complex graphics and charts JavaScript tooling that lets you create custom svgs is the way to go, but I love creating simple charts with pure CSS. I did a number of these for a ‘dashboard’ kit back when I was working on Foundation building blocks, but that was before CSS grid was well supported. This article does a very nice job of using grid and CSS custom properties to make a super cool bar graph, and brings you along with the thinking the whole way.
Resilient, Declarative, Contextual
One of the things that makes CSS hard for a lot of developers is that it is solving a conceptually different set of problems than most logical programming languages. To me one of the big differences is the visual nature of it - visual problems are very different from logical problems, and thus the approach you’re going to take to solve them will be different. This author highlights different points, but does a very good job of communicating some of the unique ‘mindset’ pieces that set CSS apart.
JavaScript
Presentational and Container Components
Making the rounds all over, this is an excellent blog post by Dan Abramov (co-author of Redux & Create React App) on React component architecture and a pattern he’s found to be useful. Even if you’re not using React, it’s worth reading as it highlights a great way of decomposing your frontend applications.
When (and why) you should use ES6 arrow functions — and when you shouldn’t
A breakdown of all the different syntactical quirks of arrow functions, followed by a brief discussion of when you would and wouldn’t want to use them. Worth a quick review even if you’re pretty comfortable with arrow functions - you may well learn something (for example I hadn’t realized that you could return object literals in a single line arrow function by wrapping it with parenthesis).
Replacing jQuery with Vue
One of the compelling things to me about Vue as compared to frameworks like React and Angular is that it is light-weight, usable without a build step, and easy to use incrementally without diving whole-hog into a full single page application. That means that we can start using it in places we might traditionally have used jQuery, just to add incremental interactivity to a page. And then if you end up wanting to extend and do something a little more than is easy to do with jQuery, you’re already in a framework that gives you that flexibility and power.
11 Javascript Animation Libraries For 2018
Everything from Velocity, a high performance library that is API compatible with jQuery animate (remember that? So simple, but so slow and janky!) to 3d animations with three.js, to whole-hog finegrained animation control with Greensock. It’s all there -- even a pure CSS animation library - so you can pick your level of complexity and power based on your needs. Sweet!
Architecture in Angular projects
I don’t tend to include as many Angular links because of the big 3 frameworks (Angular, React, and Vue) it is the one I know the least about, but this one is too good to pass up. One of the knocks against Angular is the learning curve and complexity of the ecosystem, but this article does a great job of simply laying out a high level architecture and understanding of how NgModules can be used to organize an Angular application.
Other Awesomeness
Houdini.glitch.me
This is a site put together to demonstrate the power of CSS Houdini. Still only really usable if you are using Chrome Canary with some experimental flags enabled, but WOW is this stuff cool and exciting. Definitely check it out.
Yarn import now uses package-lock.json
File this under the “good to know” categories - when porting a project to yarn, you can now import from package-lock.json and not just package.json. More progress in compatibility across package managers in the JavaScript ecosystem.
15+ Experts Share Their Web Performance Advice for 2018
Web performance is a fascinating and multifaceted topic. One area I hadn’t thought about recently but came up in a conversation at Fluent conf was the literal CPU usage of our complex JavaScript frameworks. We’re so used to thinking of web performance in terms of size and network speed, but for users not on high end computers pure CPU usage can seriously bog down a user interface. Anyway, this article has a ton of different perspectives and advice from the super simple to the wickedly complex. Pick and choose what you like from it.
Image Inconsistencies: How and When Browsers Download Images
A fascinating look through at the variations in how browsers handle image downloading. For those building image-heavy sites, this is well worth reading to make sure you’re not accidentally downloading tons of images when you aren’t expecting to and swamping mobile users.
Your Brain on Front-End Development
Wonderful almost stream-of-consciousness style walkthrough of what goes on in Chris Coyier’s head when he looks at a design. Super helpful for those still learning how to best translate designs into implementation, and I bet even codgers like me will learn a little something. I did!
Happy Friday!
That's it for this week's Friday Frontend newsletter. If you enjoyed this, be sure to sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html
Oldest comments (0)