What's your teams' strategy for updating dependencies?

Ibrahim — Tue, 07 Jul 2020 12:18:29 +0000

I'm known to be quite OCD about using the latest software available.
And, recently transitioning into web development, I find my OCD fires up a lot with all the tons of npm packages that our apps depend on.

In the teams I've worked at, I haven't seen any solid strategy for updating packages, I find that the vast majority of devs are super afraid of updating dependencies, and they all look at me like I'm crazy if/when I suggest to do something about it.
The result is that we end up with a (functioning) app, that is basically stuck with dependencies on the versions that they were installed with possible vulnerabilities and bugs, outdated ways of doing things.

Am I just super weird, or is there some sort of strategy you all follow with your team's?

A simpler way to add TailwindCSS to your Svelte project

Ibrahim — Fri, 08 May 2020 11:44:34 +0000

So currently, from what I found, there are only about 3 or 4 articles that show you how to add TailwindCSS to a Svelte app. And I'm pretty sure they all work great, but they're kinda outdated now and include unnecessary things.

On 29th April 2020, Tailwind was updated to v1.4 and added built-in PurgeCSS support. This is great and means that we no longer have to install PurgeCSS ourselves nor set up a config for it.

Okay so, let's get started with the guide!

Step 1: Install dependencies

These 3 dependencies are the only ones we're going to need:

npm i --save-dev tailwindcss postcss-cli npm-run-all

Step 2: Create and configure Tailwind config file

Run the command:

npx tailwind init

Open the newly created tailwind.config.js and add "./src/**/*.svelte" inside the purge options array.
This will ensure that all the thousands of unused CSS rules that Tailwind creates will be purged at build.
Your config should now look like this:

module.exports = {
  purge: ["./src/**/*.svelte"],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
};

Step 3: Configure PostCSS

Create postcss.config.js in the root folder and add these lines:

const tailwindcss = require("tailwindcss");

module.exports = {
  plugins: [tailwindcss("./tailwind.config.js")],
};

Step 4: Add Tailwind to your CSS

Create tailwind.css under your public folder, and add these lines:

@tailwind base;
@tailwind components;
@tailwind utilities;

Step 5: Link to CSS in your HTML

Open index.html and link the index.css that will contain the CSS rules that Tailwind will produce for your app. Yes, it doesn't exist yet, but it'll be created by our scripts.

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

You can also delete global.css and the link to it in index.html as Tailwind already comes with CSS normalize and resets.

Step 6: Add scripts

In the package.json file, ensure your scripts look like this:

"scripts": {
    "watch:tailwind": "postcss public/tailwind.css -o public/index.css -w",
    "build:tailwind": "NODE_ENV=production postcss public/tailwind.css -o public/index.css",
    "dev": "run-p start:dev autobuild watch:tailwind",
    "build": "npm run build:tailwind && rollup -c",
    "start": "sirv public --single",
    "start:dev": "sirv public --single --dev",
    "autobuild": "rollup -c -w"
  },

That's it! You can start your app with the usual npm run dev command.

DEV Community: Ibrahim