The Ides of March were yesterday, which if you believe some folks on twitter means we should be all getting together in groups to stab people. :P I’d rather get together in groups to learn about awesome frontend tooling!

This week’s Friday Frontend has quite a range of items, including humor, case studies, and some truly awesome resources. I particularly loved the animation tips and the CSS Grid Template builder, but there’s goodies from CSS techniques for knockout text to some fascinating developer survey results to a framework for building native applications using Vue.js

Enjoy!

Best,
KBall from ZenDev

CSS & SCSS

What’s the Deal with Margin Collapse?

Margin Collapse is a perennial issue for folks new to CSS, and it isn’t always easy to understand. This article does a great job of visually laying out the different ways in which margins can collapse, so if you are a visual learner definitely check this out.


CSS Techniques and Effects for Knockout Text

I haven’t seen Knockout Text used very much on websites - it’s much more of a magazine style I think, but part of the reason behind this might have been that it has been historically a challenge to implement. The web just keeps getting more powerful… check out how simple it is to do now with modern CSS! If you’re building a media site, this might be just what you need.


CSS in React - How We Traded the Cascade for Consistency

While I tend to be in favor of the CSS Cascade and opposed to CSS in JS solutions, I also believe firmly that you should do what is right for your team. With teams as large as you see in megacorporations, I understand why you would chose to be much more conservative and enforce consistency in code. This is a case study from Yelp in how they solved their consistency problems by using CSS Modules in React.


CSS Grid Template Builder

Super cool interactive CSS Grid template builder, built using React, and it’s done on codepen so you can dive into the nitty gritty and see exactly how it works. Awesome!


CSS Puns

Okay, so there’s not much of value for your learning in this, but it made me giggle, and I bet it will make you laugh as well.


JavaScript

🔥 JavaScript Modules Worth Using 🔥

A set of recommended JavaScript packages with brief descriptions of what they are and the problem they solve. Many of these I’d heard of, but even with just a few of them new to me this was tremendously valuable. I particularly like the section of modules for working with promises.


Build a Reusable Pagination Component with Vue.js

A step by step walkthrough building a reusable component. At each step of the way they explain the thinking and show the code, and at the end you have a complete functioning codepen to look at as an example. Nice!


Getting Started with NativeScript-Vue 1.0

One of the big reasons I’ve heard from folks about deciding to learn React before Vue is the existence of React Native - a framework that allows you to code up purely native applications using React just as you would for the web. Well, that reason may no longer be valid - a team has just released the 1.0 version of NativeScript-Vue, which allows the exact same thing with Vue. For those who aren’t familiar, NativeScript is an open source project that comes out of Telerik and the Progress Software Company - not exactly the name brand of Facebook and React, but with similarly deep pockets - that allows you to, yes you guessed it, build native applications directly with JavaScript.


Ultimate React Component Patterns with Typescript 2.8

I still haven’t made the jump to Typescript, but it continues to gain momentum and usage, with now not only Angular developers but a growing number of React developers using it. This article is a roundup of how to apply a set of popular React component patterns in Typescript. Worth reading just for the summary of patterns, and if you’re using Typescript so much the better.


The 4 Layers of Single Page Applications You Need to Know

We spend a lot of time talking about techniques for building applications with frameworks, but understanding architecture is equally if not more important, especially as you transition into more and more experienced roles. This is a great walk through of an architecture for a single page application, using React as a case study, but the lessons are applicable to any SPA framework.


Other Awesomeness

Good to great UI animation tips

This is awesome. Talks through what makes for good and great animations, with lots of animated (of course) visual examples. I loved this, you should check it out, nothing more to say.


Almost (Standards) Doesn’t Count

With all the noise recently about TC39, “smoosh”, and the development of JavaScript standards it’s worth taking a look at some of the history of standards and the web. A fascinating story of the push and pull that went into IE’s old “quirks mode” and doctype-based rendering.


Choosing Between Progressive Web Apps, React Native & NativeScript in 2018

If you just learned about NativeScript for the first time in the link above about NativeScript-Vue, you may be curious about its benefits. This is a decent breakdown of similarities and differences between NativeScript and what may be more familiar, PWAs. Do take it with a slight grain of salt - the author is from the company behind NativeScript - but they do a reasonable job of breaking things down without too much bias.


Developer Survey Results

A fascinating look at the industry published by Stack Overflow. Stand out info to me - a full third of professional developers learned to code in the last 5 years, and the average years of experience for front-end developers is lower than almost any other type of developer. So if you ever feel like you don’t know what you’re doing, don’t worry, you’re not alone!


Owning the Role of the Front-End Developer

A number of you have commented to me that you sometimes feel alone in your organizations, as the lone front-end developer or designer. In all situations, but especially in situations like that, it is important to learn how you can have a seat at the table for decision making, to make sure that your opinions and knowledge are properly taken into account. This article does a nice job of talking through some of the things you can do to make that happen.