Friday Frontend: Ides of March Edition
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
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!
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.
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
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.
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
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.