Friday Frontend: Thanksgiving 2018 Edition
Happy Thanksgiving to US readers, and happy Friday to all of you! I’m grateful for all of you, the time you invest in reading these newsletters, and those of you who take the time to write me back and give feedback. I’m also grateful for the rain that arrived Wednesday and *finally* cleared our air of smoke after 12 days of unhealthy conditions outside.
This week’s newsletter has a great mix of practical examples and more forward-facing exploratory articles. I particularly loved the ‘YouMightNotNeedJS’ gallery of HTML + CSS examples, and the bite-sized React Hooks example.
If you are celebrating Thanksgiving, I hope you had a low-stress and enjoyable holiday with family or friends. Regardless, have a great weekend and we’ll see you next week!
KBall from ZenDev
CSS & SCSS
Exclusions will hopefully be like more powerful grid-friendly floats
Related to this article featured last week on something CSS Grid does not do well, this goes into the concept of CSS exclusions, currently available only in Microsoft browsers. I love how simple this makes it to put block elements into an inline context with text flowing around it. I also can imagine this playing in a really interesting way with the shape-outside property.
Why can’t we use Functional CSS and regular CSS at the same time?
Functional CSS (things like tachyons, or classes like
.margin-bottom-20px) tends to spark strong reactions - many folks either love it or hate it, which leads to it feeling like an all or nothing type of decision. This article takes a look at what it can look like to mix and match, using functional CSS classes for a few uses while still using more traditional CSS through much of your project.
Hardcore CSS calc( )
Another example of the trend towards responsiveness that is not media-query driven. What I like about this article is that it takes you through the process, starting from the layout problem, moving through deriving the mathematics required, all the way to the CSS.
Braces to Pixels
Very cool step-by-step walkthrough of the process the browser takes to map from the CSS rules you write as a developer, through computed rules, the cascade, the CSS object model, layout, and painting.
Building An Interactive Infographic With Vue.js
Very cool case study building an interactive, SVG-based infographic using Vue.js and Greensock. I love it!
Simple Code Reuse with React Hooks
One of the claimed benefits of React Hooks is a simpler way to reuse stateful code in React. This post takes a look at how that would work by building a very simple custom hook. Gotta say, the more I see this as an approach, the more I like it. And it looks like it’s easy to use in Vue as well.
The Virtual DOM is slow. Meet the Memoized DOM.
An Overview of Render Props in React
Render Props has be come one of the go-to patterns in React development. If you haven’t yet encountered or mastered this design pattern, this is a good primer to give you an overview of the approach and an example of its use.
Implications Of Thinking In Blocks Instead Of Blobs
Now that Gutenberg is about to hit production (correction from last week, it’s actually due to ship November 27 - thanks Amy for pointing me at the update!), we’re starting to see a lot more thinking about how this is going to change the world of Wordpress. This is a good one, and seriously - if you’re not in the Wordpress world but you have some React ability, you really should be taking a look here because there is about to be a major gold rush.
Highlights from Chrome Dev Summit 2018
Chrome Dev Summit was last week, and we’re seeing highlights and videos emerge. This does a nice summary of some of the big announcements. Or, if you’ve got a lot of time at your hands, check out this Youtube playlist of ALL the sessions.
Why using `tabindex` values greater than “0” is bad
Interesting article from an accessibility consultant on how the well-meaning use of tabindex to improve accessibility actually results in less accessible and less maintainable websites.
Progressive Web Apps: A Convincing Case for Native-like Apps on the Web
Run down of the value proposition of PWAs. Looks at the drawbacks of each of pure Web and pure Native applications, then dives into how PWAs can gain you a lot of the benefits of each while mitigating those drawbacks. Also includes a simple tutorial to get you started with your first PWA.