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!
Best,
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.
YouMightNotNeedJS
This is great! A gallery of UI patterns that you might commonly use JavaScript to create, implemented purely with HTML and SCSS. Some are not accessible enough to use in production, but a tremendous number are, and each example includes usage notes highlighting if they are production ready or not, as well as caniuse links to let you know if there are any browser support issues.
JavaScript
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!
2018 State of JavaScript survey
The 2018 State of JavaScript survey results are out, and there’s a lot of very interesting data here. One of the big and interesting items that folks glommed on to was that Angular’s popularity is falling way behind React and Vue. That said, don’t take these results as gospel - they are reported raw with no normalization, and there don’t appear to have been any efforts made to get a super representative sample.
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 Vueas well.
The Virtual DOM is slow. Meet the Memoized DOM.
This is pretty interesting; someone who wrote a new JavaScript library has a new approach that they claim to have the ergonomic benefits of a Virtual DOM while being ~30X faster. Clearly the author isn’t unbiased, but if this proves out and they’re able to achieve this level of benefit without sacrificing a number of the other niceties of modern frameworks, I expect that much as the Virtual DOM approach has been embraced across the board, this will follow.
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.
Other Awesomeness
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.
TensorSpace.js
A 3d visualization framework for understanding neural networks. Built in JavaScript on top of Tensorflow. Continuing the trend of JavaScript based machine learning tools making it more easy and accessible to learn and understand ML. Has some interesting examples in the playground.
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.
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)