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!

Happy Friday!
KBall from ZenDev

CSS & SCSS

Animating with CSS: CSS Transitions

Nice short video introduction to CSS transitions and animations.


CSS Grid Challenge: Winners and Templates

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!


A Look at Bootstrap 4's New Reset: Reboot.css

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.


S)CSS Best Practices That You Have Not Yet Known

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.


You can get pretty far in making a slider with just HTML and CSS

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.


JavaScript

The Road to Ember 3.0

One of the things I love about the Ember JavaScript framework is the deliberate approach they have to working with the community and managing their release schedule and API changes. Here’s a look at what they have planned for version 3.0!


Template Literals are Strictly Better Strings

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…


Why robots should format our code for us

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.


The many faces of `this` in javascript

I’ve said it before and I’ll say it again - to really master JavaScript, you must have a deep understanding of this and the various ways context and binding work. This is a nice, humorous, and relatable walkthrough.


⚛️ 🚀 Introducing React-Static — A progressive static-site framework for React!

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.


Other Awesomeness

New in AMP: Position observers, fluid ads and improved analytics for video & beyond

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!


Windows Phone is now officially dead: A sad tale of what might have been

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!


The Web Share API Is Here :)

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? 😭)


Using Webfonts

A quick, to the point guide through using custom web fonts with @font-face and font families.


Building a Progress Ring, Quickly

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.


Happy Friday!