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.

First, in the CSS category we start off with some longform learning, move into some quick hits on specific properties, and then close with a wishlist for 2019. In JavaScript we’ve got a couple pure “fundamentals” learning opportunities, a look at TypeScript vs Flow, a Vue quick hit, and a very whimsical final post. Finally down in Other Awesome we cover some of the debates going on in our community, take a look at standards, and share some cross-hitting articles.

Hope you enjoy!

Best,

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

The Complete Guide To SCSS/SASS

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.

How Well Do You Know CSS Layout?

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!

Use the :lang pseudo-class over the lang attribute selector for language-specific styles

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.

Animating CSS Grid

Woah… this is cool. CSS Grid properties grid-template-columns and 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.

2019 CSS Wishlist

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).

JavaScript

How to Remove Array Duplicates in ES6

For those looking to improve their “vanilla” JavaScript skills, this is a nice and compact look through three distinct ways to implement the functionality of removing array duplicates. Nothing particularly deep but a great learning exercise.

Why I've stopped exporting defaults from my JavaScript modules

A window into the pros and cons of different module designs using ES6 modules. You are using ES6 modules right? :) But seriously, I’m really glad to see articles like this out there - modules are still a source of confusion for a lot of folks in JavaScript land and it’s hard to know what the right architecture is. The more we can get people exploring options and their consequences publicly, the better we’ll all be.

Porting 30K lines of code from Flow to TypeScript

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.

What the Tick is Vue.nextTick?

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.

Animating URLs with Javascript and Emojis

On the whimsical side rather than practical, but this article just made me giggle with joy so I wanted to share it. The author takes note of the two facts that URLs can contain emojis and that one can update the hash of a URL very rapidly based on a javascript timer, and uses this to create a set of URL animations. Fun! No practical implication as far as I can see, but super cool.

Promoted Link

Udemy: Start the year strong sale!

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!

Other Awesome

The Great Divide

A well articulated summary of the growing divide between folks who are involved with HTML and CSS on the front-end and those who are all JavaScript all the time. My sense is this divide is real, though I don’t know how new it is - there have always been divides between folks more focused on application logic and those focused on the interface layer, it’s just we call both of them frontend now. :P That said, it’s one of the important challenges in our field right now, so it’s important to pay attention to.

HTML5 Input Types: Where Are They Now?

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.

Web Standards: The What, The Why, And The How

The evolution and improvement of standards is one of the key “public goods” that, along with the rise of open source software, have facilitated the incredibly productive and fruitful environment we have now for web development. But unlike open source, standards often operate “in the background”, without visibility into what they are or how they are developed. Personally, I think understanding them and the process by which they come about is key for leveling up your skills and also helping move our industry forward. This is a great explainer article… as a bonus if you’re interested in this topic (and the TC39 committee for JavaScript standards in particular) you might enjoy this recent JSParty podcast.

Introducing Ionic 4: Ionic for Everyone

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.

New to JAMstack? Everything You Need to Know to Get Started

Solid introduction to the concept of a ‘JAMstack’ (JavaScript, APIs, and Markup). I think this concept of pushing more and more things out to be statically generated ahead of time and precomputed to be close to the user is very much one of the trends of our time and will be showing up in more and more projects. If you’re not already watching, definitely read this to get a sense of what’s going on here.

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