Friday Frontend: React and Gutenberg Edition
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:
KBall from ZenDev
CSS & SCSS
Good overview of the tools & approaches needed to write maintainable CSS. Talks about SCSS, approaches, naming systems, and filesystem architecture. A very good read.
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!
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.
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.
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.
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.
(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.
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.
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.
Ok file this under bizarre but cool. Simply by using a combination of setting
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!
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.
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.
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.