This week’s newsletter starts out with a couple interesting takes on the question: When should you use Flexbox vs CSS Grid? One takes a look at the big picture differences, while the other gives you a straightforward set of questions to ask yourself.
There’s also some quick hits with CSS techniques, a great resource list, some JavaScript ecosystem announcements and tutorials, and we wrap up with a new survey, focused on the #StateOfCSS! Enjoy!
Best,
KBall from ZenDev
P.S. Sorry to web viewers this is getting republished a few days after the email went out this week because I got very sick Thursday night and am only now getting back to normal.
CSS & SCSS
Quick! What’s the Difference Between Flexbox and Grid?
Flexbox and CSS Grid are both incredibly powerful layout tools, but if you’re still learning it can be sometimes tricky to know which you should pull in and focus on. This article does a great job of tackling that a high level - not so much detailing exactly what is good for what tool, but what the conceptual and big picture differences are in the way these tools approach problems.
To Grid or to Flex?
Another take on the exact same question - in fact, it seems to have been inspired by the same thread on twitter. :) A look at some of the questions you should be asking yourself when deciding which of Grid or Flexbox to attempt to apply to a layout problem.
Where Do You Learn HTML & CSS in 2019?
With so much emphasis industry-wide on JavaScript, JavaScript, and more JavaScript it’s good to see someone put together a resource like this on places to learn HTML and CSS. And I pretty much agree on the resources they recommend. Minor self plug - if you’re looking for a thorough list of CSS resources by topic area you might also check out the guide I published last year.
Quick Tip: CSS Triangles
Four distinct ways to create triangles with just HTML and CSS when you need them. I use almost exclusively #1, the borders trick, today but am curious to try some of the others.
Text Wrapping & Inline Pseudo Elements
Very cool look at the challenge of automatically inserting an icon at the end of links. Walks through a few different possible approaches and their downsides before arriving on a (mostly) globally working solution. I enjoyed how this not only showed the technique, but really worked through the process of arriving at it.
JavaScript
JavaScript: The Fun Parts
Punning on the classic “JavaScript: The Good Parts” (a bit dated but still one of the best books I’ve ever read on JavaScript), this is a very fun look at some of the new features in JavaScript and how you can apply them.
Vue 2.6 released
Last week we had a post about the new React release; looks like Vue also just did a new release with some cool features. Nothing quite as ground-breaking as hooks, but I’m excited about the new async error handling, and if anyone is doing server side rendering and not using Nuxt (which already handles this), the serverPrefetch hook is going to be very helpful.
JavaScript Regular Expressions for Regular People
Regular expressions are one of those tools that seem completely opaque from the outside, but once you spend a little bit of time are incredibly powerful. So powerful in fact, that they end up getting used for all sorts of things they probably shouldn’t be. 😉 But that doesn’t mean you shouldn’t learn them - you definitely should. And this is a great step by step introduction; it won’t get you all the way to master, but it does introduce you to a whole bunch of regular expression concepts in an easy to grok way.
useContext(): a React hook that's an obvious win
I have to agree with the author, this is a very clear win for hooks from a clarity and readability standpoint. The deeply nested JSX component approach when using multiple contexts was definitely a pain, and hooks give you a clear way out. Given the composability of hooks, I think it also will lend itself to the ease of helpers that collect sets of contexts commonly used together. Very cool!
A plan for version 8.0 and Ivy
Longtime readers know that I don’t keep as quite a tight a watch on Angular as I do on frameworks like React and Vue, but this is very interesting. In particular I like that Angular is baking in the ability to generate differential bundles that are loaded based on what a browser supports. I think this is something many frameworks are going to want to adopt; we have the ability to automatically code split and load things as needed without developers having to think about it much, we should do the same thing for smaller modern JS bundles vs backwards-compatible transpiled bundles.
Promoted Link
(Note: I’m putting this under promoted because it’s not our standard content, and it is an affiliate link so if you buy something from him later I will benefit, but this particular content is 100% free and I highly recommend it if you’re at all interested in online business or marketing)
Jeff Walker’s Product Launch Blueprint
I recommended the first part of this last week, but it’s worth doing again, especially because the whole set of Jeff’s free training videos is now available including his “Product Launch Blueprint”: it's a downloadable, 18-page PDF, plus a full-length training video that walks you through each step of the Blueprint. If I had to pick one thing that helped me to go beyond just freelance development and start building a scalable business, it would be Jeff Walker’s Product Launch Formula. It won’t be available for long, but for now these trainings are up and free: https://productlaunchformula.com/go?p=kball&w=alum_blueprint
Other Awesome
Firefox 66 to block automatically playing audible video and audio
Thank goodness!!! There’s nothing I dislike more than a website that starts making noise without asking permission. Particularly since I spend most of my day with headphones on and music running, unauthorized audio is probably my biggest pet peeve. This alone might get me to switch back over to Firefox (though gotta be honest, I’m loving Brave)
Upcoming Conferences related to Front-End Design & Development
I recently noted how much I appreciate going to conferences, and how it helps keeps me excited and learning about front-end development. If you ever are wondering what’s available to go to, check out this new site put up by CSS Tricks. SO MANY CONFERENCES! I wish I had more time and energy to go to more. There’s also a cool article on how they built it as a static application that updates every day.
Interface Copy Impacts Decision Making
We don’t often talk about copy when doing front-end development or design… we just plug Lorem Ipsum in and move on with our work, right? That said, if we care about what our interfaces are encouraging users to do… copy is actually a key piece of that. This article lays out some of the ways copy can nudge people, for good or for bad.
Announcing the #StateOfCSS 2019 Survey
Published by the same folks who published the State of JavaScript survey, I’m happy to see interest enough in the CSS part of the frontend dev community to be running a survey like this… I encourage you all to participate in it.
Happy Friday!
That's it for this week's Friday Frontend newsletter. If you enjoyed this, you should probably follow me on Twitter or join my mailing list. Sign up to get these newsletters straight to your inbox every Friday! Sign up here: https://zendev.com/friday-frontend.html
Top comments (0)