Multiple Output files with cssbundling-rails and Tailwind

Nik Wakelin — Tue, 14 Dec 2021 22:20:19 +0000

The default build:css for cssbundling-rails using Tailwind will take app/stylesheets/application.tailwind.css and output it to app/assets/builds/application.css ready for inclusion using the asset pipeline.

However, often you’ll want multiple entry points or output files - say, one for your application and one for your public site that’s a bit smaller.

You could change the command in package.json to use && and join two calls to the Tailwind CLI, but this approach has a couple of issues - cssbundling-rails is expecting to be able to append --watch to commands that are run in development so that rebuilds happen as you change files, AND use the command to prep your css once before running a deploy or integration test.

Enter npm-run-all, which will let you run commands with a glob-style syntax, in parallel, and passing through arguments. Just change the "scripts" section of your package.json to include tasks like this:

"scripts": {
  "build:css": "npm-run-all --parallel \"build:css:* {@}\" --",
  "build:css:application": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css",
  "build:css:static": "tailwindcss -i ./app/assets/stylesheets/static-pages.tailwind.css -o ./app/assets/builds/static-pages.css"
}

Now when you run yarn build:css you’ll end up with two output files in your build (in this case, "application.css" and "static-pages.css") and when you want to run it in watch mode, yarn build:css --watch will pass that argument down to each individual build and run them in parallel.

It’s the build:css command that's doing the magic:

"npm-run-all --parallel \"build:css:* {@}\" --"

Essentially this is saying "run anything matching build:css:*, in parallel, and passing all arguments through from the original invocation" (that's the {@} syntax from npm-run-all)

Enjoy!

You should be keeping a list of everything you’ve shipped

Nik Wakelin — Mon, 19 Apr 2021 22:51:06 +0000

Here’s a tiny habit that will take you less than a minute every week but could change your life (yes, maybe even more than finally starting to meditate!)

On Friday, at 4.30pm, write down everything you shipped that week

As this ✨ magic list ✨ grows, it’ll become one of your strongest career tools.

Remember what you did last summer

The dreaded “self review”. Easily the worst part of any performance review cycle. Do you go full used-car-sales and breathlessly extol your virtues, or go middle-of-the-road and risk missing out on that promotion you’ve earned?

Here’s where your magic “Done” list is crucial. You can rely on it for a dispassionate record of the impact you’ve delivered, combat your recency bias (was it last quarter I launched that new service or this one?), and cross-reference with the progression framework for your next level to show off how well you’re nailing it - all backed up by some cold, hard facts.

Share the love

Kudos is infinitely concentrated - that is, it doesn’t matter how often you share it, it never gets diluted. It pays to share widely, and guess what, your list can help! All it takes is a quick note every time you get an assist - perhaps Sally mentioned an article on JSONB performance, or Jimmy threw together a really detailed PR review.

This also works no matter what stage of your career you’re at. If you’re early on, acknowledging the help you receive is a great way to get more in the future.

Conversely, as a senior or staff engineer, you’re expected to have an area of effect, levelling up everyone around you. When you keep tabs of where you assisted and where you got assistance, you start to lead the team in that behaviour, and show that help is useful no matter how many years you’ve been doing this!

Where do you want to grow today?

There’s nothing more satisfying than a completely crossed-off To-Do list…. except perhaps a months- or years- long record of doing that!

But there’s benefit over and above basking in the glow of tasks well completed, and that’s getting a birds-eye view of your career and the opportunity to map out where you’re going (which, incidentally is why you keep getting asked to do that dang self-review - it’s explicit permission to do a little navel-gazing!)

Take a good look at where you had impact. Which code flowed from your fingers like you had extenda-robot-coding-hands?

Which code… took a little longer?

Perhaps you’ve been meaning to learn React, or wanting to dive deep into some tricky networking issues… your 10,000 foot view will only serve to highlight the paths you can take.

Alright, I’m convinced - how do I make my Finished List great?

It’s one thing to make the list, it’s a whole other thing to make a valuable list. For instance, you’ve got all your Github commits right?

Here’s the problem: not only do they not capture everything you did (did you write a design document? Paired with someone on their laptop?) they also don’t tell a very good story because your commits are about what you did, not why.

Focus on the value you delivered - less “Removed n+1 query on checkout page” more “Made checkout 25% faster (P99 < 1s)”.

If you have it, you can even add proof for that extra cherry (or come by later once the experiments are done) : “This led to a 3bp increase in sales”.

You can also add emphasis with images or videos demonstrating your change in action (Kap or Cleanshot X for macOS are useful tools for this). If a picture is 1,000 words then a video is 30,000 words per second, right!?

Highlighting your changes with illustrations can make your notes much more digestible for folks in other teams who might not be as familiar with your areas - and it’s much more generally readable for people outside the Product/Tech sphere. Always a good idea to involve those people since often they’ll be the ones on the sharp end of a change.

Set your reminder now!

Remember, this is most effective when you do it regularly - so set a reminder for Friday afternoon to write it all down and close out your week. And send me a note in a few months (I’m @nikz on Twitter) - it’ll be great to see what you’ve done!