Friday Frontend: Friday the 13th Edition
According to Wikipedia, some 17 to 21 million people in the United States are affected by fear of Friday the 13th, with some people so paralyzed by fear that they won’t even get out of bed. That seems crazy to me, but then again I do some things that other people think are pretty crazy (like disliking tomatoes and bananas), so who am I to judge?
Whether you’re afraid of Friday the 13th or not, there’s some great stuff in this issue of the Friday Frontend for you to dig through. Enjoy!
KBall from ZenDev
CSS & SCSS
Nice short video introduction to CSS transitions and animations.
Smashing Magazine last month held a CSS Grid challenge, trying to get people excited and exploring the potential of new layouts with CSS Grid. They’ve just announced the winners, and boy is there some neat stuff in there. Check it out!
Nice walkthrough of Bootstrap 4’s new fork of normalize. Not only talks through both the history of CSS resets but also some of the pieces that make one up and what they do.
The title may be overselling it a bit, but this is an excellent article for folks looking to transition from beginning to intermediate in their CSS/SCSS skills.
Should you be implementing a slider with just HTML and CSS? Probably not, but that’s not the point - the point is highlighting some really cool techniques available to you in CSS, and pointing out that you can get a heck of a lot in place before you add JS.
An interesting argument that with the rise of ES6+ codebases as the new norm, we should shift conventions to using template literals everywhere we use strings. The author definitely has some valid points…
I found this quite compelling - I’ve been using prettier.js on a project recently, and it definitely is nice to have 100% consistency without argument or debate over how code should be formatted. Took a little getting used to, but now there’s a whole class of problem I’m not worried about.
this and the various ways context and binding work. This is a nice, humorous, and relatable walkthrough.
Pretty slick looking approach for seamlessly doing server-side static page rendering that transitions invisibly into a SPA - everything built in React from the ground up.
I have mixed feelings about AMP, but with Google’s weight behind it, it continues to increase in adoption and is definitely worth taking a look at. Check out some of their newest features!
Another one bites the dust… sad to have the mobile ecosystem be so dominated by the two big players, though to be honest, as a web developer having 1 fewer set of device/browser combos to test is a big win!
Another great example of the ways the web is catching up to native for mobile devices - you can now trigger native sharing functionality from Chrome on Android (and I’m sure Apple will follow soon, right? 😭)
A quick, to the point guide through using custom web fonts with
@font-face and font families.
A neat tutorial that not only talks through how to create an SVG-based progress ring, but walks through not only a native implementation but also as a Web Component, Vue Component, and React Component. Nice example to see the similarities and differences across all these approaches.