DEV Community: Jack H. Peterson

Secretly Tailwindcss

Jack H. Peterson — Fri, 05 Feb 2021 01:06:44 +0000

Overview

I love tailwind, but using it at work is an idea I've been unable to sell. There are a bunch of reasons to love utility css which I won't cover here.

Here I'm just showing how to USE tailwind and converting it into more familiar css pretty easily.

Today, I'll just cover what our system is at work, and how to I use tailwind within it, without conflicting with a non-tailwind codebase.

Constraints at work

ZERO command line build steps.

We only use sass compiled with codekit. Many devs don't have node on their PATH.

$ node -v
> node: command not found

SASS Nested CSS Codebase.

We build components which are namespaced via SASS nesting.

.component {
    .card {...}
    .title {...}
    .button {...}
}
/* Which compiles to: */
.component .card {...}
.component .title {...}
.component .button {...}

The Stack

Server rendered html via twig and jQuery. Bringing in anything like react, vue, lit-html, simply isn't done. Most pages should work without any javascript or a build step.

ie11 compat matters.

Several things in tailwindcss v2 won't work in ie. So I gotta test in ie11, and patch as needed. Tailwind doesn't support ie11, so this would be a constraint regardless.

Tools

Twind

Twind is a JS module which is an in browser compiler for tailwind. Write tailwind classes like you normally would, and Twind will only generate the needed styles.

Your Browser Inspector and Code Editor of Choice

I'm using Firefox and vsCode, but this should work with any decent browser and editor.

The Process

This works best if you work one section/component at a time.

1) Split tailwind classes from normal classes.

Move tailwind classes from the class attribute to the tw attribute. (You could name it whatever you want, I'm just using tw here.)

2) Generate the CSS.

Drop this script into your html.

<script type="module">
  // Import the needed Modules
  import { tw, apply } from "https://unpkg.com/twind?module";
  import { domSheet } from "https://cdn.jsdelivr.net/npm/twind@0.14.6/sheets/sheets.js";

  // find all of the classes with the tw classes.
  [...document.querySelectorAll("[tw]")].forEach((el) => {

    // get the string of tailwind classes
    const listOfClasses = el.getAttribute("tw");

    // @apply the tailwind utils on 1 class, 
    // rather than into several util classes.
    const bundledClass = apply`${listOfClasses}`;

    // this will append the class to the <head>
    const generatedClass = tw`${bundledClass}`;

    // this will add the class to the element
    // which will apply the expected styles
    // the styles were initally removed when 
    // you moved the tw classes to the tw attribute 
    el.classList.add(generatedClass);
  });
</script>

3) Move the Generated HTML into your Code.

Copy the outerHTML from your component and generated style tag (at the bottom of your <head>) from your browser and into your template. The class names are random characters. Don't worry about this, we'll fix it later.

4) Add the Generated classes to your Code.

This is the most confusing part to explain, but vscode and other editors have nice find and replace features. Essentially you want to find all of the new classes AND their order in the HTML and paste them into your template HTML elements in the same order. If you know the right shortcuts this can be pretty painless. If your component template isn't using if/for/etc, you can do this in about 10 seconds with a combination of CMD + D, Shift, Alt, and your arrow keys. I'll make a video of this if someone is interested.

5) Remove the Browser HTML.

You can delete the component HTML you pulled from the browser, we just needed that to have all of the generated classes in order for step 4.

6) Rename Your Classes.

Technically, your template code works right now! But folks will think you're a bit wacky if your CSS class names are .tw-dgt4fd. So we'll find and replace all instances of those wacky class names with more sensible class names. My process for doing that: Highlight a generated class in your html Cmd + Shift + L (It'll select all instances of that text.) From there, I'll rename the class while I'm looking at the HTML structure.

7) Clean up the CSS.

At this point, I'll drop a component namespace class in the HTML and then namespace the CSS with nesting. Some media queries can be redundant across the generated classes, but merging them is simple enough.

7) Set up Templates for Production. (optional)

I have a variable I can reference in twig to see if the site is being rendered for Production or Development. I'll just slip the tw classes into something like:

<a
    href="//example.com"    
    class="component button"
    {{ dev ? 'tw="w-32 h-10"' }} 
>

That won't render the tw attribute unless you're on dev. Which means your code won't have excess attributes. I also apply the same principle for the script I included above. No no need to include it in prod.
Super optionally, I have a component level variable which can prevent the tw attributes from rendering for that component.

You're Done!

That's basically it. A little more testing on ie, maybe you need to move the style tag into a SASS partital, but all of those steps will vary from task to task.

Conclusion

Your tailwind classes are preserved which means you can easily go back to using tailwind when you're back on the project. Meanwhile, tailwind isn't being used on the site publicly at all! The only traces of tailwind are the tw attributes, and a script tag that will only appear on dev.

Summary

This post outlined a good compromise between being highly effective using tailwind and working in a code-base that isn't friendly with tailwind. DM me on twitter if you need any help getting this set up or have any questions.

curl Multiple Files

Jack H. Peterson — Tue, 02 Feb 2021 20:58:02 +0000

Downloading resources at multiple URLs.

curl "example.com/path/{bravo, alpha, charlie}.html" -o "example/#1.html"

Will result in:

example/bravo.html
example/alpha.html
example/charlie.html

Easy way to get all of the links on a particular page (ie: directory)

Hop in the dev console on the page and paste:

copy(document.links)

This will copy an array of all of the links on the page into clipboard.

Batch Convert SVG to PNG.

Jack H. Peterson — Fri, 15 Jan 2021 21:15:30 +0000

If you need to batch convert a bunch of SVG files into PNG files, look no further.
This script should do the trick.

Fast Solution

Modify the Script to suit your needs.
npm i svgexport
node thisScript.js
You're done!

Overview

I'll explain how this script works, so you'll have an easier time adjusting it to suit your needs. The full script is at the bottom for easier copypasta.

Imports

const svgexport = require("svgexport");
const fs = require("fs");
const path = require("path");

Settings

Set up what files, sizes, and colors you want to use.

I'm importing files from the /svg directory this script is located in.
I'm setting sizes to 32, 64, 128, 256, 512; Set it to whatever you want.
I'm setting colors to white, black, and a custom hex. (This is put in color css property, which is then used by the fill="currentColor" to set the color.

const inputs = fs.readdirSync("./svg");
const allColors = ["white", "black", "#357dcc"];
const allSizes = [32, 64, 128, 256, 512];

Convert

This is the function which builds an object for the svgexport datafile array.
There's more info at the Docs for svgexport.
svgexport can take an input file path, some optional transforms for the svg (color, size, etc), and will output the desired file to a given path. Our output path will resolve like this: png/COLOR/SIZE/INPUT.png. You can change this by changing the file const. ie: png/INPUT_COLOR_SIZE.png is valid too! You'll just have all of your PNGs in the same folder with very detailed names.

const convert = (i, color, size) => {
  const file = `./png/${String(color).replace(/\W/g, '')}/${String(size).replace(/\W/g, '')}/${i.replace(".svg", ".png")}`;
  const dir = file.substring(0, file.lastIndexOf("/"));
  //   Creates directory if the directory does NOT exist
  !fs.existsSync(dir) && fs.mkdirSync(dir, { recursive: true });

  return {
    input: [
      path.resolve(__dirname, `./svg/${i}`),
      `${size}:`,
      `svg{width:100%;color:${color};}`,
    ],
    output: [path.resolve(__dirname, file)],
  };
};

Combine

Now we take all of our defined variations — inputs, sizes, colors — and flatMap them into an array. This array is the datafile we will give to svgexport.

const datafile = inputs.flatMap((input) =>
  allColors.flatMap((color) => allSizes.flatMap((size) => convert(input, color, size)))
);

Transform SVGs into PNGs!

That's it! We just feed our datafile to svgexport and viola! We got our batch of PNGs.

svgexport.render(datafile, console.log("complete"));

AFAIK svgexport uses puppeteer under the hood to render and export the PNG. So this isn't a severless friendly solution. But it'll work great locally, and will likely work nicely in something like Netlify.

Full Script

const svgexport = require("svgexport");
const fs = require("fs");
const path = require("path");

const inputs = fs.readdirSync("./svg");
const allColors = ["white", "black", "#357dcc"];
const allSizes = [32, 64, 128, 256, 512];

const convert = (i, color, size) => {
  const file = `./png/${String(color).replace(/\W/g, '')}/${String(size).replace(/\W/g, '')}/${i.replace(".svg", ".png")}`;
  const dir = file.substring(0, file.lastIndexOf("/"));
  //   Creates directory if the directory does NOT exist
  !fs.existsSync(dir) && fs.mkdirSync(dir, { recursive: true });

  return {
    input: [
      path.resolve(__dirname, `./svg/${i}`),
      `${size}:`,
      `svg{width:100%;color:${color};}`,
    ],
    output: [path.resolve(__dirname, file)],
  };
};

const datafile = inputs.flatMap((input) =>
  allColors.flatMap((color) => allSizes.flatMap((size) => convert(input, color, size)))
);

svgexport.render(datafile, console.log("complete"));

Using matches & regex in Twig!

Jack H. Peterson — Thu, 07 Jan 2021 21:58:11 +0000

Problem

You may be having trouble with using regex and links in twig/php!

Typical Solution

Generally, You'd want to escape a slash!
Example:
/path/to/resouces/
would look something like this in js:
/\/path\/to\/resources\//
/ === delimiter
\/ === escaped slash

This doesn't play nicely with twig!
I figure twig is trying to be smart and escape things for you.
but I'm not really sure whats going on.

Real Solution

(Thankfully, php provides a way to work around this issue.)[https://www.php.net/manual/en/regexp.reference.delimiters.php]

Alternate delimiters:
/foo/ | #foo# | +foo+ | %foo% | <foo> | (foo) | {foo} | [foo]
All of the above delimiters are valid!

Applied Solution

This means, if we take our URL:
/path/to/resouces/
We just need to wrap it with a delimiter which isn't used in the string.
Example:
{/path/to/resouces/}
That's it! The regex should work how you'd like it to.

Wrap Up

Regex is weird.
Twigs undocumented behavior is weird.
together they're an afternoon of frustration.