Modern Web Development Tools

-

Photo by Scott Webb on Unsplash

Tooling is important, try digging with bare hands, then use a shovel and then run a modern digging machine. Notice the difference? Tooling in web development is key and some tools have become industry standard.

Playgrounds

Codepen.io is a developer-friendly playground where I experiment with HTML and CSS quickly and at ease. Without it, I'd need to create a new HTML file, copy paste some HTML boilerplate, manually import some stylesheets and so on. I'd need to manually save files and reload the browser each time. Codepen handles this out of the box and lets me jump straight into "edit and watch".

Codesandbox.io is a powerful playground that supports React and other frameworks. It's the best way to experiment with React. I skip the create-react-app step and the manual npm-installs. I get a React app that runs and is ready to be edited and tinkered with. Adding a npm package is easier thanks to a package browser and one-click installation. Here's a SHA-256 hasher that I bootstrapped in less than 20 minutes.

React Tools

Storybook lets you visualize and showcase your React components outside of the app. It's a dynamic showcase as you can change properties on the go and visualize any state you want. You can easily display a state that would be otherwise hard to reach by the app. As your component collection grows, it becomes a design system. A design system needs a way to be visualized outside of any app, as a library of components with the accompanying documentation.

Design systems

Atlassian design system looks modern and sleek. It is offered as a set of React components and comes with extensive documentation. It's easy to onboard and fun to experiment with. Some components are a bit playful and may not fit a more serious or sober context. The system is very thorough and includes colors and typography, as well as complex navigation components. There's a lot to it.

Resources

Javascript Evolution Proposals: the potential future features of Javascript. As of writing, there are a dozen of stage 2 and stage 3 proposals, which might ship in ES2022 or later. The finished proposals have already been shipped or are set to be shipped in ES2021.

Latests developments of CSS page aggregates posts from various blogs that talk about the development of Cascading Style Sheets (CSS).

HTML: The Living Standard: The official reference documentation of HTML, developer version. Up-to-date, a lot to learn and review.