Slim VS tachyons

I spent a few days of my spare time building a VS Code extension that would bring better syntax highlighting for the Slim template language to the editor. I quite enjoyed most of the process so I’d like to share what I learned.

I think they mean Server Side Rendering (normal rails controllers/views), and Slim is just the name of the templating engine. It's a little nicer than the default ERB. https://github.com/slim-template/slim

There's also SSR with react and other js frameworks, but I don't think that's what they meant.

Checkout slim https://github.com/slim-template/slim it's a templating language

And this is what the HTML looks like (I'm using slim):

The template renders the tag and inside it the link and the counter itself (the Slim template language and Tailwind styling are used here, hopefully the notation is sufficiently self-explaining):

In this part of the series, let's explore another popular templating language, Slim.

Templating languages are widely used in Web development and two of the most popular ones are Pug and Slim. In this series, we're going to learn the basics of these two and hopefully they would help improve your workflow further.

You may want to checkout slim I'v tried ERB, SLIM, and HAML and absolutely sware by slim it's very easy to use and saves a ton of typing compared to ERB.

But in this example we will take a preset with Tachyons, a once popular library. But here the naming is even more deplorable:

I chose Tachyons over Tailwind because Tachyons is an atomic CSS framework, similar to Tailwind, however it's much lighter weight. Tailwind tends to be a bit heavier without using post CSS processing so I wanted to stick with something smaller.

The CSS framework we will use in this project is Tachyons CSS, which we will install by running the command below in the terminal.

> (https://github.com/tachyons-css/tachyons)

What makes this 'functional'? Is it related to functional programming? Or is it used as a synonym for 'usable'?

Tachyons is a similar utility class framework, and a lot smaller at somewhere under 20kb, IIRC.

https://tachyons.io/

I like using a functional CSS library (tachyons.io, tailwindcss, or SLDS) and setup components separately. The CSS has my colors and units declared (and the aim is to not have 40 different gray colors, it's to limit yourself with a definition list). Then the actual components are setup via a component library. Plenty to choose from: React, VueJS, LWC, AngularJS, or just native web components.

Therefore, I totally got to buy in for the utility-first approach. In that world, the only thing is worth mentioning is Tachyons. However, although it came way earlier than Tailwind, it is said to be feature-complete, and one cannot expect new features to be added or problems discussed. The latest release is almost five years old, which definitely violates the principle “Bleed Responsibly”. You can also see that from the star trend:

The CSS framework to be used in this project is Tachyons CSS. Install it by running the command below in the terminal.