Friday Frontend: Future Facing February Edition
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!
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!
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.
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
Functional Programming Fundamentals
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
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.
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.
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.