This week I got super excited about React coming to WordPress with Gutenberg!

Wordpress is used by millions of people world-wide, and with the new Gutenberg editor it is suddenly embracing modern web technologies, particularly React.

This creates a phenomenal opportunity for front-end developers. Learn more in this week’s Friday Frontend Inspiration Video:

Enjoy!
KBall from ZenDev

CSS & SCSS

How to get better at writing CSS

Good overview of the tools & approaches needed to write maintainable CSS. Talks about SCSS, approaches, naming systems, and filesystem architecture. A very good read.


How to Animate a Bouncing SVG Icon With CSS

Straightforward tutorial with example code. Takes good advantage of the properties of inline SVGs to style an icon directly, and also breaks down keyframe animations in great detail. Nice!


Should I try to use the IE version of Grid Layout? Revisited for 2018

I recently linked to a series on using CSS Grid in IE - here is a counterargument about when it makes sense to do that at all. Rachel Andrew (one of the world’s experts on Grid) highlights that the Grid implementation in IE is enough different that there are only a few specific cases where it’s going to make sense to use.


Stuff you can do with CSS pointer events

Ok, this is kind of blowing my mind, and I definitely had to read through the code 3 or 4 times to figure out what was going on. Apparently by turning off pointer events on a container but then explicitly enabling them on a child element, you can write pure-CSS components that change on hover or click of child element. This is seriously crazy stuff.


Solved with CSS! Logical Styling Based on the Number of Given Elements

Excellent walkthrough of some of the capabilities enabled by pseudo-selectors to make your pages react stylistically to user input, state in the page, and how they are laid out relative to other sibling elements.


JavaScript

Redux or ES6

(Bias alert - this a guest post by me) One of the wonderful and yet also often frustrating things about the React ecosystem is how much it has embraced modern JavaScript. While this has been great for improving the power and expressivity of our code, it also often makes it very frustrating to learn! This post takes a set of examples from Redux documentation and tutorials, breaking down which concepts come from Redux and which are ES6. For each example it gives enough information to understand what is going on while also linking out to fuller resources for those who are interested.


JavaScript fundamentals before learning React

Similar to the above post, this is a walk through a number of JavaScript fundamental concepts (particularly modern JS) using React-based examples. Very well done.


Redux vs. The React Context API

Very nice explanation of the various ways of handling state in React. Starts with bare React components, highlights prop drilling and the problem it creates, shows one way to work around it with children props, and then dives into explanations of Redux and the context API. This isn’t going to deep dive you on any one subject, but it sure does give a great overview of the problem domain and the different types of solutions.


Understanding Higher-Order Components in React and Gutenberg

(Bias alert - I also wrote this post) With WordPress embracing React in the new Gutenberg editor, millions of developers are suddenly being introduced to this world, and scrambling to catch up. In this post I break down one of those architectural patterns that is extremely common in React - higher-order components.


Vue UI: A First Look

Even in an edition mostly focused in React, this was too interesting to let slip. The next version of the Vue CLI is shipping with a built-in GUI project management system. Lets you do project creation, configuration both before & after creation, and even add some plugins, all using a GUI in a browser. I’m an old-school terminal guy so this doesn’t really seem like my thing, but I have a suspicion this will be a hit among folks of a more visual background, extending Vue’s dominance in the “easy to learn” and “good for designers learning to code” domains.


Other Awesomeness

The future of WebAssembly - A look at upcoming features and proposals

For those excited about WebAssembly (me me me!) this is a great post because it gives you a vision into where it is going. An excellent dive through the various features and proposals in progress for WebAssembly, including updates on where they stand in the process.


Did you know that style and script tags can be set to display: block?

Ok file this under bizarre but cool. Simply by using a combination of setting style and script tags to being display: block and the contenteditable attribute, you can create an in-line editor for styles and scripts on the page. Other than educational not sure if I see a purpose, but for just playing around it’s really nifty!


Converting Images To WebP

Webp is a new image format that supports an alpha channel, allows for either lossy or nonlossy versions, enables some pretty massive size savings over PNG and JPEG, and even supports animation (GIF replacement anyone?) It doesn’t work on all browsers yet, but there are various ways you can set up your servers or pages to use it when it exists. This article isn’t about that, but instead goes into all the myriad of ways you can convert images to WebP, including both exporting directly from tools or during a build step.


On Designing and Building Toggle Switches

Fascinating step by step walkthrough of all of the thought process, research, and work that goes into designing and coding an accessible and beautiful toggle switch. This is one of the reasons so many of us love frameworks and component libraries - building something right is a LOT of work! But so cool to see someone document the entire process.


Is WebAssembly the return of Java Applets & Flash?

A look into how WebAssembly really is different than previous attempts to take the web into more native-esque programming. What really stands out to me is how much we’ve learned about standards and the standardization process over the years. As an industry it seems like we’re getting better and better at creating web technologies and technology platforms.