Forem: Estevan Maito

Have only 30 seconds and want to create a Tailwind CSS project? I got you.

Estevan Maito — Sat, 23 May 2020 16:45:57 +0000

Create a CSS file inside your project and paste this (I'll call mine styles.css):

@tailwind base;

@tailwind components;

@tailwind utilities;

Now run in your terminal:

npx tailwindcss build styles.css -o output.css

Your Tailwind CSS styles are waiting for you at output.css. Just place it inside your HTML and you're done.

<link rel="stylesheet" href="output.css" />

DONE.

Now, if you have a little more time, let me give you some tips that will save you more than 30 seconds.

I need to extend it

The above setup will create a CSS file with all Tailwind CSS standards, which weights around 2MB, that's ok for development. When you finish your layout, or find that you need to extend some utilities, change fonts, etc, you'll need a configuration file. Oh, and there's a command for that:

npx tailwindcss init

This will create tailwind.config.js for you:

module.exports = {
  theme: {},
  variants: {},
  plugins: [],
}

You'll probably be fine without it for some time, and if you need to extend it, there are tons of examples in the official docs.

I want to remove unused styles

It's a great idea. All you gotta do is tell Tailwind where are you using it's styles. It's as simple as adding a purge option to tailwind.config.js with the path to your files. Say you are working with html, jsx and vue files somewhere inside src, it would look like this:

module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.vue',
    './src/**/*.jsx',
  ],
  theme: {},
  variants: {},
  plugins: [],
}

It will remove unused styles whenever your NODE_ENV is set to production.

BUT! You're busy, you just have 15 seconds more and cannot create a build environment! Just pass purge an object, put your paths inside the content property and add an enabled flag:

module.exports = {
  purge: {
    enabled: true,
    content: [
      './src/**/*.html',
      './src/**/*.vue',
      './src/**/*.jsx',
    ],
  },
  theme: {},
  variants: {},
  plugins: [],
}

Now, you can run npx tailwindcss build styles.css -o output.css and your CSS will only contain used styles! Note that we don't even have a proper npm project yet, there's no package.json, no npm install...

What about minification and prefixes?

So, if you're thinking about minified CSS, you're probably worried about production CSS, then you probably already have a more robust project, with some other packages around. In this case, you'll need 4 more:

# npm install --save-dev does the same as npm i -D
npm i -D postcss-cli tailwindcss autoprefixer cssnano

PostCSS is a preprocessor and will run Tailwind (with the config you made earlier), prefix everything with Autoprefixer and minify with CSSNano.

For all of this to work together, you'll need a file called postcss.config.js:

module.exports = {
  plugins: [
    require('tailwindcss'),
    require('autoprefixer'),
    require('cssnano')({
      preset: 'default',
    }),
  ],
}

This will give you just the CSS you need, browser prefixes and minification. In your package.json you can create a build script that will run PostCSS:

"build:css": "postcss tailwind.css -o output.css"

You can use Tailwind with other preprocessors and find other setups in the docs

But if you really read until here, you would find so much more value watching the official screencasts.

Accessibility (or the lack of) broke my code

Estevan Maito — Tue, 12 May 2020 20:08:34 +0000

A year ago, I came across this image on Twitter. It was a demo developers at Facebook were designing to solve accessibility issues, and was expected to later be open sourced.

This feature never saw the open source days, but later that week in May/19, I created a similar project just to prove the concept (repo) and created a demo for it.

As you can see, the library works by drawing clickable, colored rectangles over violations. It works!

So today (yes, 1 year later), I've decided to make it a Chrome extension, so everybody could use it to analyze their pages, and it was at this moment that I knew my extension couldn't handle the current web accessibility state.

StackOverflow

Dev.to

Medium

I didn't expect this level of violations, so the extension is completely useless, because it starts drawing from the root and goes down the DOM tree. As almost every website above had problems starting at html or body, you can't even click on the other errors. And where you can, it's almost certain that a parent element already has some problem too.

The solution, you may think, is to just reverse the order violations are drawn, or place icons instead of drawing a giant box, but the point here is that this extension should've not be catching so many errors. I can fix my code, but it won't fix yours!

A bonus, the Web Accessibility Initiative page:

How could we avoid this (the state of a11y currently)? Do you think adopting something during the development workflow would work?

If you're interested in testing the extension, it's here.

How to setup Algolia's DocSearch in NextJS app

Estevan Maito — Mon, 11 May 2020 19:44:22 +0000

I've spent some time figuring out why my search wasn't working, just to realize that Algolia's documentation was meant to be used in a common HTML approach. In the end, the app was loading before the script was initilized.

TL;DR: If you're not using Next JS, just ignore the first step and add the script and the styles to your root html (usually index.html) and initialize it like the last snippet inside the component.

With NextJS, you need to create a file named _document.js inside pages (the minimum setup can be found in Next's documentation), and add the CSS and Docsearch script to the Head. This way the search will be accessible through all the pages.

import Document, { Html, Head, Main, NextScript } from 'next/document'

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx)
    return { ...initialProps }
  }

  render() {
    return (
      <Html>
        <Head>
          <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"
          />
          <script
            type="text/javascript"
            src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}

export default MyDocument

Then, in your component (in my case Navbar.jsx), initialize the script that you've received, inside componentDidMount or useEffect.

...
useEffect(() => {
  if (window.docsearch) {
    window.docsearch({
      apiKey: 'your api',
      indexName: 'your id',
      inputSelector: '#algolia-search', // the selector of my search input
    })
  } else {
    console.warn('Search has failed to load')
    // do something here
  }
}, [])
...

I hope that this save people some time when implementing Docsearch.