What is new in 2022

December 31, 2022 4:20 pm | by Craig Webb | Posted in Technology

2022 has introduced some earth-moving developments in web production. It is hard to keep it linear. There is lots going on. This is only my own partial list. But I will start with a list.

There are many other things that belong on the 2022 list. This is only my little world. People are moving toward Next.js from React for instance.

Three sea-change movements are:
The plethora of new CSS declarations, Figma, and Github.

Github has come into its own. Now owned by Microsoft, Github is well integrated with VS Code. It is now possible to work within Github. Github has become the crossroads between development platforms.

Last summer I watched a portion of the ViteConf Keynote Presentations on YouTube. This Keynote Presentation by StackBlitz CodeFlow (video Start time 2:15:17) blew me away. Stop reading this and watch this video now.

I signed up with StackBlitz right away. Using StackBlitz CodeFlow I am able to launch any public Github repo in my browser and make edits. I save my edits as a push into my Github repo. I can then merge changes and pull changes to my local build. With StackBlitz CodeFlow I am able to edit client repos without needing to install an entire development build on my local server.

Github is also offering its own services to work within a browser environment. WordPress is rolling out a similar capability to work on WordPress themes. Figma is an exploding community. The holy grail of being able to draw pictures of websites and export it as code (across Github) has arrived.

StackBlitz Codeflow uses Vite. The same developer who builds Vue builds Vite. Vite 4.0 is now released. It utilizes Rollup.js 3.0, also a new upgrade.

Jumping over to CSS:
There are lots of new CSS syntax and declarations available. These new declarations will influence how developers organize and write the cascade. There are many end-of-year lists about new CSS out now. One design package that I found this summer is Open-Props.style, by Adam Argyle. Adam Argyle is a presenter at CSS conferences. Find his videos on YouTube. He also has a Discord that I follow.

OpenProps uses CSS custom properties and new CSS declarations, such as the where() property, to set basic styles and organize the cascade.

I worked on updating my Gulp build system that I use for my WordPress. Many NPM modules were out of date. Node has depreciated the code format known as CommonJS. Not all NPM modules use the new ES module syntax. Also, Dart SASS has now surpassed and replaced LibSass in Node NPM.

SASS cannot keep pace with all of the new CSS.

I found that in order to use the newest CSS declarations it is necessary to implement PostCSS. PostCSS has been available for years, mostly used to add custom browser prefixes. PostCSS has hundreds of plugins. The PostCSS-cli adds new CSS via third-party apps called Browserslist and Can-I-Use.

Digging into all this, I have built many build systems. I built a Gulp revision; a NPM/PostCSS build system; a PostCSS with Rollup system; and a system that compiles SASS directly from Node NPM. While wading through tutorials, I found a build system by Adam Argyle called “ShortStack”. I had trouble installing it until I updated Rollup from version 2.0 to the brand-new Rollup 3.0.

Adam Argyle has published a page featuring a variety of development builds using Vite and StackBlitz Codeflow. (He added ShortStack to the page after I wrote to him). It includes a basic build for Vue and OpenProps, for example. See it here: https://stackblitz.com/@argyleink/collections/open-props;

Definitely look at this page. Each card features a Stackblitz link to a full working repo. You can edit, clone to Github, or install to your local server. Look at this list:

Even if you are not interested in using Open-Props.style, all these repos are ready to clone and go.

Earlier this year I began an implementation of Eleventy.js. Eleventy, also referred to as 11ty, is a JAMstack build tool similar to Jekyll except that it is JavaScript instead of Ruby. I also compare it to my experience with Gulp and Handlebars. Eleventy has a growing community. It is possible to publish an Eleventy blog housed on Github to Netlify for free.

I found this video by Kevin Powell, Turn static HTML/CSS into a blog with CMS using the JAMStack, which helped. I have a simple Eleventy blog published to Netlify.

My personal design system consists of many SASS partials that I have used to build many websites. I am updating my design system to use new CSS declarations, patterns, and syntax. I will refer to Open-Props and other systems. I will even look at Bootstrap.

I enjoy building in code. I have a library of components that I built. I can easily modify their theme elements to customize for branding.

However, Figma is much in demand. Figma has exploded in popularity and has a huge community and also a community of open source and premium plugins. Figma was eating Adobe’s lunch so bad that this summer Adobe bought Figma for $20 Billion dollars.

The ability to transfer design systems from Figma across Github to development code is huge. Sometimes it will be smarter to design in Figma and export code from Figma and modify it. I am also working to understand and use Storybook. Now Storybook has released version 7.0. It plays well with Vite.

Artificial Intelligence (AI) is blowing through the industry like a hurricane. There are apps to make illustrations from text prompts now. Another app can produce fairly average content on almost any subject “in the style of” so-and-so. Github is rolling out a co-pilot system. It acts as a pair-programmer, offering debugging tips as you work. I am bookmarking new new things to study everyday.

Currently I am working on many projects.
One project is a front-end design using parallax and animation.
The second is a color app. I need to export color data from an API as JSON and import it into a templating system. I want to show the colors and display various codes as text. I may build it in CSS/HTML or in SVG
A third is my revised build system, ready to use when I get my next client.