Friday Frontend: January 25 Edition
Hope you had a great week! I’ve got a wide ranging list of topics for you today, with no clear theme emerging this week but a lot of great content.
Hope you enjoy!
KBall from ZenDev
P.S. I’m experimenting with including a promoted link in the newsletter. Feel free to ignore it, but if the promoted links are of interest to you then following them is a great way to support me in continuing to publish this newsletter. I’ll try to only ever include things that are relevant to front-end developers, and please let me know if anything ever feels off.
CSS & SCSS
Solid all-in-one walkthrough of the Sass language. Starts from an assumption of a basic CSS understanding, and shows you all the things that Sass gives you on top of it. If you’re not comfortable using Sass now, definitely worth looking through. If you’re already in the Sass world you may not get too much out of it; it’s more a feature list than about best practices.
A series of CSS Layout concepts and implementations, each with an example, a description, and some links off to articles to learn about it. Great!
This is a little niche, but very cool. I didn’t even realize the
:lang pseudo-class existed (it’s pretty old too; and has universal browser support) but this article gives a great explanation of why if you’re styling by language, it is definitively the way to go.
Woah… this is cool. CSS Grid properties
grid-template-rows are now animatable in Firefox nightly. Of course if you’re not using nightly, you won’t be able to play with the demo… but there is a nice video showing the effect as well.
Fascinating look through what folks are hoping will come to CSS in the near future. Better form styling definitely is top of list for me, but that’s very much in the pragmatic dimension. Also interesting to look back at what folks were looking for in 2013 (and how few of those things have been implemented… though what we have gotten is phenomenal).
Very interesting look into some of the difference between working with Flow and with TypeScript. If you’re deep in one or the other of these tools you will greatly enjoy this… if you’re considering which to start with, the big takeaway I had from this article is that the two are pretty close to equivalent, each slightly better in some areas and slightly worse in others, but the TypeScript community (and associated typings for opensource libraries) is much larger and more comprehensive.
If you’re oldschool like me you may be familiar with using
setTimeout with a timeout of 0 or 1 just to “bump the queue” and defer something until after the UI thread has finished it’s next batch of work. Vue.js actually ships with functionality specifically for this purpose, in a way that is more semantic and framework-aware than just using setTimeout. This article explains, and shows some of the reasons you might want to use it.
Through January 26th (tomorrow!) Udemy is running a special sale with top courses discounted down to just $11.99. All of the courses I recommended in my recent post on frontend topics to learn in 2019 are in that ‘for sale’ list, along with thousands of others. If you’ve got something you’ve been meaning to learn about, take advantage now and get it on the cheap!
HTML5 introduced a set of new input types, things like “email” and “tel” to let browsers do smart things like validation and prefilling. But browser support has been mixed. This article takes a look through what the current state of support is and gives recommendations for when to use these new input types and when not.
This is pretty interesting. Ionic was one of the first “Mobile app from web frameworks” tools, and probably one of the better ones given breadth of available components and ease of integration, with one problem: they’ve always been Angular focused. If you were in the Angular world great… but if not, kinda out of luck. No longer. They’re launching a new release that is built using entirely native web components, and then a set of framework specific bindings to make those web components feel “built in” to whatever framework you might use. Still want Angular? Not an issue. Using React of Vue? Plug in their React or Vue adapter and you’re good to go.