Happy February! This week we’ve got an extra helping of forward-looking articles. From the future of JavaScript to new CSS properties, new versions of Yarn to WebVR, the future looks bright indeed.

We’ve also got our standard mix of tutorials, think pieces, and opinionated takes to help you catch up and keep up with everything in the Frontend world. Enjoy!

Best,

KBall from ZenDev

CSS & SCSS

Slide an Image to Reveal Text with CSS Animations

CSS animations let you do some incredibly powerful things to do transitions and add flare and interactivity to your site. But it’s one thing to know that, and another to feel comfortable starting from an idea or a design and implementing an animation. This is a great step by step tutorial of how to think about and create one such animation.

Table Design Patterns On The Web

If you work on anything even remotely enterprisey, or focused on businesses, chances are there is some part of your application that displays tables of data. And if so, you’ll be familiar with this age-old question: How do you style your tables? Do you even use table elements, given all the power available to us now in CSS? The accessibility and semantics geek in me says yes: If it’s tabular data, you should really use a table. And if you’re following that advice, you’re really going to want to look through this to learn your options for styling it.

Gradians and Turns: the quiet heroes of CSS angles

I don’t do too many things that have me mucking about with CSS angles, but when I have I’ve pretty much always dealt with things in degrees or radians. The former when I’m doing it intuitively, and the latter when I’m doing match related to size or what have you. I was never even aware that other options existed for these units, but apparently they do, they’re well supported, and they make a lot of common tasks easier to think about. Who knew?

CSS Position Sticky - How It Really Works!

Having mucked around with a number of JavaScript implementations of sticky, I can’t tell you how excited I am to have a native CSS property for it. I hadn’t realized quite how widespread browser support has gotten, but the answer seems to be that if you don’t need to support IE and can do a little autoprefixing, you’re golden.

A look at CSS hyphenation in 2019

I don’t know if I’ve ever seen a CSS property before that “works in chrome except on windows”, but that’s what the browser support looks like for CSS auto-hyphenation. However, there’s a decent fallback (using word-wrap: break-word) so you can probably start using this right now. This article gives a nice intro into what the property is, how it works, and what some of the limitations & future uses are.

JavaScript

What's New in JavaScript for 2019

A look at all of the stage 3 candidates for new features or changes in the JavaScript language. Not all of these will make it into this year’s specification, but a fair number probably will. I think I’m most excited about the standard for globalThis, which would give us a cross-environment alternative to the window / global / this headache that is today’s reality when writing JavaScript for the browser and node simultaneously. But there’s a lot more good stuff in the pipe… go check it out!

Functional Programming Fundamentals

A solid introduction to functional programing using JavaScript. I’ve said it before, but it bears reiteration - I don’t think anything has had a bigger impact on my development skills than learning functional programming. If you haven’t read into this yet, do.

Why Isn’t X a Hook?

I am absolutely loving the writing coming from Dan Abramov on this new blog of his, and this article is no exception. A great look at the thinking behind what is and is not a hook in the new React hooks API. If you’re just looking for recipes, this isn’t it, but if you’re interested in API design and architecture you’ll soak up a lot from reading this and most of the other pieces Dan has been putting out.

The TypeScript Tax

With all of the pro-typescript articles we’ve been seeing lately, it’s interesting to read someone do a well thought out, comprehensive look at the pros and cons of TypeScript and come out against it (if mildly so). This article looks at a number of the different ways TypeScript is helpful, as well as some of the places it held the author’s teams back. Whether you’re on the fence about TypeScript or even pretty strongly in favor, worth looking through just to think about how you’re analyzing your project and language choices.

Yarn's Future - v2 and beyond

This is pretty interesting looking at progress in the package manager space. Back when yarn first was created as an alternative to npm, it was filling two major gaps: performance, and lockfiles that actually worked. This resulted in npm making a lot of much needed improvements, the ecosystem moved forward, and most folks who had used yarn went back to npm. Now the team is back announcing a big refactor with a number of new interesting things... two of particular interest to me are shifting to a plugin & api focused approach, and enabling the ability to specify other (non-javascript) install targets. If I’m reading this right, they’re aiming to end the constant “how do I do package management in this new language” treadmill and create something that can work in every ecosystem. Very very interesting.

Promoted Link

Freshbooks For Freelancers

If you’re not a freelancer/consultant, feel free to skip right by this, but if you or are considering getting into it, this might be of interest. Freshbooks makes it super easy to manage a freelance development business; lets you track hours, expenses, invoice clients and everything you might need. It’s what I use, it’s what most of my friends who freelance use, and I definitely recommend it. I will say I ran into one instance of finickiness with their payments integration when billing internationally, but their support got me through it and otherwise it has been smooth sailing. I wouldn’t want to run my business without it.

Other Awesome

HTML, CSS and our vanishing industry entry points

Another take on the ‘frontend divide’ topic we covered last week, this time looking at the question of how folks with nontraditional backgrounds get into the industry. One of the beauties of HTML and CSS is how quickly one can pick it up and get something interesting to happen with it. If we keep raising the barrier to entry for web development higher and higher, we’re going to scare off a lot of folks from our industry at the same time as we’re bemoaning the lack of developers.

How to make VR with the web, a new video series

I gotta be honest… VR is not on my to learn list any time soon. It feels like one of those things that is going to keep being in the “it’s gonna be HUGE!” for a number of years yet, with most of the current uses being very niche. But it sure is cool. And WebVR has the benefits of being made with web technologies, and being very progressive-enhancement-like, where folks without advanced headsets can still get some value. So if you are interested in learning it some time soon, this looks like a perfect place to start.

Eradicating Memory Leaks In JavaScript

It used to be that memory leaks in JavaScript weren’t much of a concern. After all, every time the user loads a new page everything gets torn down, so leaks won’t last long or bloat things too much. But with the rise of single page applications, that no longer happens. A user might use your web app for hours, days, or even weeks without ever clearing out the javascript context by loading a new page from the server. Suddenly leaks start to matter a lot more, potentially bogging down your user’s entire computer. This article dives into leaks from the bottom up - what they are, how they occur, and what tools are available for you to debug them.

Creating APIs for the human developer

Not actual code in this article, but a great exercise thinking about code. Particularly what factors go into designing a good API (starting from what does API even mean?). This article doesn’t have all the answers, but it raises a lot of the questions you should be thinking about as you go from junior to mid-level to advanced as a developer.

How do you figure?

A deep dive into the figure element, looking at the ways it can be used, and then the ways that all sorts of different assistive technologies approach the element. As someone not deep in the A11Y world it was fascinating for me to read through the myriad of ways those devices could interact with this element, and especially to close with a set of best practices for cross-device accessibility.

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