DEV Community: Jon Haddow

Tailwind CSS - my favourite way to style a site

Jon Haddow — Sun, 06 Jun 2021 00:00:00 +0000

I've recently stumbled across Tailwind CSS.

Initially I thought this was a similar framework to Bootstrap which I found to be centred around component based classes (btn and btn-warning) and not helpful in making a site look unique.

Tailwind instead is a utility-based framework which makes it highly flexible for any site. Each class they provide maps to a specific CSS style.

For example flex becomes display: flex; and text-left becomes text-align: left;

These classes can be applied to any component on your site.

Tailwind can cover every style you can think of, giving you little reason to have CSS directly in your code anymore.

My favourite reasons to use Tailwind:

There are no magic numbers, everything is part of a design system. You don't need to remember that the header had a font size of 18px, but rather that all components with text-lg will have the same size. Having a predefined design system makes it a lot easier to build visually consistant UIs.
Never needing to come up with class names. No more header-btn or header-nav-dropdown. Simply think up the styles you want and add the Tailwind classes directly. The context switch between the markup and the CSS file is enough of a pain point for me.
The CSS styles are tied to each component. If you remove a component, the styles go with it. Not only does that remove dead code, but could also reduce the bundle size as Tailwind purges unused utility classes.

I think Tailwind is worth trying out. It's pretty fun to use even if it looks a little ugly at first. Here are a couple tips to help you get going:

If you find yourself repeating classes across multiple parts of your site, you likely need to build smaller components - a good practice in general.
Use the Tailwind VS Code extension to have an auto suggestion feature for Tailwind classes.

Building a React application with webpack

Jon Haddow — Tue, 13 Oct 2020 00:00:00 +0000

React is currently the most popular, modern UI framework for the web.

It's well known for its functional, declarative style and I would argue it's really easy pick up as a new developer.

The structure of an React application (especially with its JSX syntax) feels close to HTML, so it's easy to follow logic.

It's well worth trying React if you are a developer or are interested in learning front-end development.

When first building a React application you have a few options available.

You can add a couple script tags to the HTML and then React should work. However this isn't the recommended approach for a production site.
You can also run npx create-react-app my-app to have Create React App automatically setup a project for you with all the tools you need under the hood.
You can build the tooling yourself and learn more about how the tools work.

I tend to recommend the last option as knowing your tools enhances your ability as a developer.

The rest of this post will cover how to setup a React application with the build tool, webpack.

As part of this tutorial, I've put together an example app you can follow.

I have covered how to build JavaScript, HTML, and CSS using webpack in a previous post, so that is worth reading first if unfamiliar.

Prerequisites

Install Node.js to allow you to install and run JavaScript packages.

Steps

The two React dependencies we'll need to install is react and react-dom. So setup a new repository, run npm init to setup the package.json, then run npm install react react-dom.

Next, we'll create a file /src/index.js (this will be the application's entry point) with the following content:

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.jsx";

ReactDOM.render(<App />, document.getElementById("root"));

then we'll create our App component in /src/App.jsx which prints a joyful message to brighten your day:

import React from "react";

const App = () => {
  return <h1>🎵 I can see clearly now the rain has gone! 🎵</h1>;
};

export default App;

Lets create a HTML template in /src/assets/index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>My app</title>
  </head>

  <body>
    <div id="root"></div>
  </body>
</html>

We'll setup webpack to use this HTML template and inject the JavaScript bundle once built.

React uses the latest Javascript syntax which needs compilation to make it friendly for all browsers. We'll also need to configure this within webpack.

Lets start by installing webpack and webpack-cli to bring in the basic webpack tooling for running a local development server.

Note: For this tutorial, I'm using webpack v5.x and webpack-cli v4.x.

We'll also need to install html-webpack-plugin for embeding the bundled javascript into our html template.

We can then add a file to the root of the project called webpack.config.js with the following configuration:

var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/assets/index.html",
        }),
    ],
};

Add a script to the package.json:

{
    ...
    "scripts": {
        "start": "webpack serve"
    }
    ...
}

then run npm start. This will give us a lovely... error 😞

We need a loader to handle the funky JSX syntax from React. We'll use Babel for this.

Install the following packages:

babel-loader (for hooking up babel compilation into webpack),
@babel/core (the core babel package),
@babel/preset-env and @babel/preset-react (Babel presets for next generation JavaScript and for React).

Next we'll update the webpack config to look like this:

var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.jsx?/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
          },
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/assets/index.html",
    }),
  ],
};

Here we are giving webpack a set of rules on how to handle .jsx and .js files. We want webpack to use the babel-loader to compile our JS files and we've specified to use the 2 presets we've installed to do it.

When you run npm start now, it should show up nicely in the browser: http://localhost:8080

There you go, you're setup and ready to build a react app.

You'll likely want to import CSS (or SASS). For that, check out my other tutorial, or have a browse at some webpack loaders on their site.

Benefits of CSS-in-JS

Jon Haddow — Wed, 29 Jul 2020 00:00:00 +0000

Tradionally CSS is constructed in separate files to JavaScript. There are good reasons for keeping those separate but I want to list some benefits to consider when building CSS inline with your code.

Before looking at those benefits, if you haven't come across CSS-in-JS before, it looks something like this:

const title = () => (
    <h1
        css={{
            paddingTop: 16,
            fontSize: "2rem",
            fontWeight: 400,
            color: "red",
        }}
    >
        Oooo look at me!
    </h1>
);

I spent some time trying out a CSS-in-JS library called Emotion. In fact I wrote all the styling on this page with it (You can check it out on GitHub). I wanted to highlight a few things I think improve the development of a application, when using CSS-in-JS.

1. No dead code

With CSS-in-JS, when you delete a component (or just part of a component), the css is removed along with it. I've worked in many projects where hundreds of lines of legacy CSS has been left around long after a feature has been removed. CSS in isolation is often so loosely coupled from its original intent, that it becomes difficult to remove in case there are unexpected side effects (see the issue of append only stylesheets!). Dead code not only adds to technical debt within your project, but will also increase the size of the CSS files your users are downloading.

2. No class names

If there is a way to avoid having to think up variable names, I'm all for it! CSS by design is globally scoped and therefore class names need careful consideration to ensure they are not duplicated elsewhere. However with CSS-in-JS, there isn't a need to come up with class names. They will be generated for you during the compilation process.

3. Greater confidence

If I spot an issue with a component's styling, I can simply go to that component and confidently modify, add or remove styles without worrying about side effects on other components. It also makes the experience much faster to debug and resolve styling bugs. I don't need to track various class names and span through css files to find the styles which apply.

4. Easy refactoring

With CSS-in-JS, if I need to split out a large component I directly move the components between files and the styling comes along with it. With separate CSS files, I may need to add new CSS files and move parts of the styling around to match the JavaScript file structure.

5. Better tooling

There is arguablely better tooling available with CSS-in-JS as JavaScript (or TypeScript) is used to enforce best practices and spot issues early in development. For example, you'll often find that these libraries (like Emotion) will have type definitions to allow VSCode to auto-complete css properties. If you're using TypeScript you may even get compilation errors highlighting mispelt css properties or invalid values.

CSS is, for me, the least exciting part of building an application. So if you take anything from this article, I hope CSS-in-JS is considered as a fun, easier, and more interesting approach to try on your next project.

Form building with React Hook Form

Jon Haddow — Tue, 30 Jun 2020 00:00:00 +0000

Within a React application, you may come across a scenario where you want to capture user input. This could be a "Contact Us" form for a blog, a questionnaire, or perhaps an authoring environment for an Event you want to share.

To handle this in React, one approach is to set up a state object, construct inputs, and attach onClick listeners for each field. The form data can be collected from the components state and processed on form submission. This starts off simple, but can lead of complications when handling validation.

This is where a library like React Hook Form comes into play. It relies heavily on uncontrolled inputs which tend to perform better than controlled. It also handles validation well.

React Hook Form has a simple, but powerful API. This article explores that by setting up a form for an Event. We'll cover registering inputs, using Controllers (for custom/third-party inputs) and form validation.

This Event form will include:

a title - a plain text input
a description- a multiline text area, and
a start/end date and time - a 3rd party date picker

First lets setup a new React application (use Create React App to speed up this process), then install react-hook-form and react-datepicker for the date picker.

We'll start by building out the JSX for our form.

export const Form = () => {
    const [startDate, setStartDate] = React.useState(null);
    const [endDate, setEndDate] = React.useState(null);

    return (
        <div className="layout">
            <h1>My Event Form</h1>
            <form>
                <div className="form-section">
                    <label htmlFor="title" className="form-label">
                        Title
                    </label>
                    <input id="title" name="title" type="text" />
                </div>
                <div className="form-section">
                    <label htmlFor="description" className="form-label">
                        Description
                    </label>
                    <textarea id="description" name="description" />
                </div>
                <div className="form-section">
                    <label htmlFor="startDate" className="form-label">
                        Start Date
                    </label>
                    <DatePicker
                        id="startDate"
                        name="startDate"
                        selected={startDate}
                        onChange={(date) => setStartDate(date)}
                        minDate={new Date()}
                        showTimeSelect
                        dateFormat="Pp"
                        selectsStart
                        startDate={startDate}
                        endDate={endDate}
                    />
                </div>
                <div className="form-section">
                    <label htmlFor="endDate" className="form-label">
                        End Date
                    </label>
                    <DatePicker
                        id="endDate"
                        name="endDate"
                        selected={endDate}
                        onChange={(date) => setEndDate(date)}
                        minDate={startDate || new Date()}
                        showTimeSelect
                        dateFormat="Pp"
                        selectsEnd
                        startDate={startDate}
                        endDate={endDate}
                    />
                </div>
                <button type="submit">Submit</button>
            </form>
        </div>
    );
};

Now we'll need to add React Hook Form's useForm hook and deconstruct the handleSubmit and register functions from it.

We'll pass register to each form input ref prop. Let's just cover the title and description for now, and we'll leave the date picker to be handled separately.

We'll setup an onSubmit function to print the data returned from handleSubmit. Here's how our code will look now:

export const Form = () => {
    const [startDate, setStartDate] = React.useState(null);
    const [endDate, setEndDate] = React.useState(null);
    const [submittedData, setSubmittedData] = React.useState({});

    const { handleSubmit, register } = useForm();

    const onSubmit = (data) => {
        setSubmittedData(data);
    };

    return (
        <div className="layout">
            <h1>My Event Form</h1>
            <form onSubmit={handleSubmit(onSubmit)}>
                <div className="form-section">
                    <label htmlFor="title" className="form-label">
                        Title
                    </label>
                    <input id="title" name="title" type="text" ref={register} />
                </div>
                <div className="form-section">
                    <label htmlFor="description" className="form-label">
                        Description
                    </label>
                    <textarea id="description" name="description" ref={register} />
                </div>
                <div className="form-section">
                    <label htmlFor="startDate" className="form-label">
                        Start Date
                    </label>
                    <DatePicker
                        id="startDate"
                        name="startDate"
                        selected={startDate}
                        onChange={(date) => setStartDate(date)}
                        minDate={new Date()}
                        showTimeSelect
                        dateFormat="Pp"
                        selectsStart
                        startDate={startDate}
                        endDate={endDate}
                    />
                </div>
                <div className="form-section">
                    <label htmlFor="endDate" className="form-label">
                        End Date
                    </label>
                    <DatePicker
                        id="endDate"
                        name="endDate"
                        selected={endDate}
                        onChange={(date) => setEndDate(date)}
                        minDate={startDate || new Date()}
                        showTimeSelect
                        dateFormat="Pp"
                        selectsEnd
                        startDate={startDate}
                        endDate={endDate}
                    />
                </div>
                <button type="submit">Submit</button>
            </form>
            <p>Submitted data:</p>
            <pre>{JSON.stringify(submittedData, null, 2)}</pre>
        </div>
    );
};

Give that form a try in the browser. You'll notice the title and description values are printed when the form is submitted, however the start and end dates haven't yet been handled.

Controlled inputs

The 3rd party library used to render these date pickers, aren't using native html form inputs. This means that React Hook Form wouldn't know how to capture the data. These are controlled inputs. To handle them, React Hook Form provides a Controller wrapper component.

Let's try to wrap our start date picker in a Controller:

<Controller
    as={
        <DatePicker
            id="startDate"
            onChange={(date) => setStartDate(date)}
            minDate={new Date()}
            showTimeSelect
            dateFormat="Pp"
            selectsStart
            startDate={startDate}
            endDate={endDate}
        />
    }
    name="startDate"
    control={control}
    valueName="selected"
/>

The key changes that have been made are:

the name has been moved up to the Controller. This is so that React Hook Form can track the name of the property and it's value.
a control function (which comes from the useForm hook) has been passed into the Controller's control prop.
the selected prop on the DatePicker (which was set to the currently selected date/time) has been removed, and the valueName prop on the Controller is set to "selected". This is telling React Hook Form that the name of the property that is anticipating the current form value, is not "value" but rather "selected". In a similar way, if DatePicker had an onEdit method instead of an onChange method, then we'd have to specific that change with the onChangeName prop on the Controller. By default React Hook Form expects the controlled input to have a value prop and a onChange prop. If that's not the case, we need to specify.

These are the main parts needed to hook an external component into our form. Once the end date picker is also wrapped in a Controller, we'll be able to see the data submitted along with the title and description.

Validation

Before the user submits our form, let's add some basic validation checks. Here's our criteria:

The title must be provided, and less than 30 characters
The description must be less than 100 characters
The start date must not be on the 13th 👻 (sorry, just wanted a interesting example...)

React Hook Form provides a simple way to define these rules through the register function. Here's how we'd define the title validation:

<input
    id="title"
    name="title"
    type="text"
    ref={register({
        required: { message: "The title is required", value: true },
        maxLength: {
            message: "The title must be less than 30 characters",
            value: 30,
        },
    })}
/>

When the user submits the form and one of the fields is invalid, the handleSubmit function (on the form onSubmit prop) doesn't trigger the method passed in, but rather updates the errors object that's returned from the useForm hook.

So we want to use this errors object to give visual feedback to the user on what needs to be fixed. Something like this does the job:

<div className="form-section">
    <label htmlFor="title" className="form-label">
        Title
    </label>
    <input
        id="title"
        name="title"
        type="text"
        ref={register({
            required: { message: "The title is required", value: true },
            maxLength: {
                message: "The title must be less than 30 characters",
                value: 30,
            },
        })}
    />
    {errors.title && (
        <span className="error">{errors.title.message}</span>
    )}
</div>

To cover the description, we'd have a similar rule set to the title:

register({
    maxLength: {
        message: "The description must have less than 100 characters",
        value: 100,
    },
})

For the start date, we'll need to use React Hook Form's custom validate function to check that the value isn't on the 13th. We'll need to pass these rules into the Controller's rules prop

<div className="form-section">
    <label htmlFor="startDate" className="form-label">
        Start Date
    </label>
    <Controller
        as={
            <DatePicker
                id="startDate"
                onChange={(date) => setStartDate(date)}
                minDate={new Date()}
                showTimeSelect
                dateFormat="Pp"
                selectsStart
                startDate={startDate}
                endDate={endDate}
            />
        }
        name="startDate"
        control={control}
        valueName="selected"
        rules={{
            validate: (data) => {
                const date = new Date(data);
                return date.getDate() !== 13;
            },
        }}
    />
    {errors.startDate && (
        <span className="error">
            The start date must not be on the 13th!
        </span>
    )}
</div>

You can read more about the rules available in React Hook Form's documentation.

I hope this article gets you more familar with how you can put together a simple form in React. I'll be covering some more tips and tricks with React Hook Form in a future post.

Basic setup for a web application

Jon Haddow — Wed, 03 Jun 2020 00:00:00 +0000

Build tools help make developers' lives easier.

They minimise steps and remove distractions to help you to focus and achieve your goal: to write code and build a good product.

Despite this, it's common to see developers ignore build tools and brush over the configuration of their environment, to write code. There is certainly value in that, however part of the skill of a developer is knowing their tools and how they fit together.

In this tutorial, I will go through the process of building an environment to develop a web application.

The primary tool we'll be using is webpack. This tool generates a dependency graph during the build process, pulls together all the assets (JavaScript, CSS, e.t.c.), processes them (combines, minifies, chunks e.t.c.) and produces a set of files ready to be served by the browser.

Other tools are available (like Parcel and Rollup), and may be explored in future posts.

Throughout this tutorial, we'll cover bundling JavaScript, injecting scripts and styles into HTML, and styling with CSS.

Prerequisites

Install Node.js to allow you to install and run JavaScript packages.

Project setup

Lets start by creating a new project and running npm init in your command line. This will guide you in generating a package.json file which holds information about your project including dependencies and scripts.

Next, run npm install --save-dev webpack webpack-cli to install 2 packages required for webpack. We'll also need to add a build script to package.json:

{
    ...
    "scripts": {
        "build": "webpack"
    }
    ...
}

This gets us to the first, and central technology for your project...

JavaScript

Start by adding a src directory and a single index.js file.

alert("Hello!");

Now run npm run-script build and if all goes well, you should see a new /dist/main.js file generated with your compiled code. 🎉

If you add another file helpers.js and export a function greet:

export const greet = (name) => {
    return `Hello ${name}!`;
};

Within index.js you can now import this function and use it:

import { greet } from "./helpers";

alert(greet("Jon"));

When you run the build script, webpack will produce a single JavaScript bundle. This is great, but completely useless until run in a browser. This script will need to be loaded within a HTML file. This is where the first plugin comes into play...

HTML

The next step is to get a single HTML file to open up in the browser with your JavaScript injected into the page.

For that, lets npm install --save-dev html-webpack-plugin. We'll need to add this plugin to our webpack config. So far we've benefited from a zero-config setup, but now we'll need to create a configuration file for webpack - webpack.config.js - in the root of our project with the following contents:

var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    plugins: [new HtmlWebpackPlugin()]
};

When we run our build script you should now see a dist/index.html file. If you open this file in a browser, you'll have your alert box open (running the code from /dist/index.js).

Now it would be a pain to have to run the build script every time a code change was made, so lets install another package to have a webpack server run in the console and listen to changes. Install webpack-dev-server and add the following script to package.json:

{
    ...
    "scripts": {
        "start": "webpack-dev-server",
        "build": "webpack"
    }
    ...
}

Now, when running npm start and opening your browser to http://localhost:8080/ you'll see the code running in the browser and auto-updating. Nice one!

You can configure any of the plugins mentioned in this article, by reading the webpack plugin documentation.

Some popular and helpful configurations include:

Setting a HTML template for html-webpack-plugin

Having your application open automatically in your default browser webpack-dev-server

CSS

To include CSS in your project, you import a stylesheet in your src/index.js or any JS file in your project.

Firstly, add a stylesheet to src/styles.css:

p {
    background: red;
    color: white;
    font-size: 2rem;
}

Then update your src/index.js to import the styles and add a paragraph to the HTML:

import "./styles.css";
import { greet } from "./helpers";

/**
 * Create new paragraph and add to the dom.
 */
const newElement = document.createElement("p");
newElement.innerHTML = greet("Jon");
document.body.appendChild(newElement);

When running npm start you'll see an error like:

You may need an appropriate loader to handle this file type, 
currently no loaders are configured to process this file.

We'll need to install a plugin to handle this new type of file. css-loader is a plugin which allows you to import CSS files into JavaScript. Add this loader to the set of module rules in your webpack.config.js:

var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    module: {
        rules: [
            {
                test: /\.css$/i,
                use: ["css-loader"],
            },
        ],
    },
    plugins: [new HtmlWebpackPlugin()],
};

When you run your application, all errors should disappear. However, your CSS styling isn't being imported to your HTML. This is because the styling has been processed in the build, but nothing has been done with it. There are 2 ways to resolve this. You can either:

install the style-loader which will dynamically add all styles to the DOM in a <style> tag at runtime, or,
install mini-css-extract-plugin which generates a separate CSS file output which will be injected into the HTML as a link tag.

mini-css-extract-plugin is ideal in production as the CSS output can be externally cached, however it's a slower compilation process. style-loader is better suited for development, so lets install and add style-loader to our webpack.config.js:

use: ["style-loader", "css-loader"]

Note that loader order is applied right to left. So in this case, the styles are firstly imported into the JavaScript bundle (through css-loader), and then injected into the DOM (through style-loader).

Now run up you're application, and you should see your styles being applied to the paragraph.

I hope this articles helps you to setup a basic environment for web development and understand the tools that are needed for a basic web application.

Over time you'll likely want more plugins and greater configurations to support all the various tools and frameworks seen in most modern web applications.

Let's leave those for a future article.