Slim VS Liquid

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.

I use something very similar on https://lunar.fyi and https://lowtechguys.com but I wouldn’t call this “simple” anymore.

They use Jinja templating, I prefer Slim (https://github.com/slim-template/slim#syntax-example) which has a more Pythonic syntax (there is plim [0] in Python for that)

I use Tailwind as well for terse styling and fast experimentation (allows me to write a darkMode-aware and responsive 100 line CSS in a single line with about 10 classes)

For interaction I can write CoffeeScript directly in the page [1] and have it compiled by plim.

I run a Caddy static server [2] and use Syncthing [3] to have every file save deployed instantly to my Hetzner server.

I use entr [4] and livereloadx [5] to rebuild the pages and do hot reload on file save. All the commands are managed in a simple Makefile [6]

———

You can already see how the footnotes take up a large chunk of this comment, this is not my idea of simple. Sure, the end result is readable static HTML and I never have to fight obscure React errors, but it’s a high effort setup for starters.

Simple for me would be: write markdown files for pages, a simple CSS for general styling (should be optional), click to deploy on my domain. Images should automatically be resized to multiple sizes and optimized, videos re-encoded for smaller filesize etc.

I have mostly implemented that for myself (https://notes.alinpanaitiu.com/How%20I%20write%20this%20blog...) but it feels fragile. I’d rather pay for a professional solution.

[0] https://plim.readthedocs.io/en/latest/

[1] https://github.com/FuzzyIdeas/lowtechguys/blob/main/src/rcmd...

[2] https://caddyserver.com/docs/command-line#caddy-file-server

[3] https://syncthing.net

[4] https://github.com/eradman/entr

[5] https://nitoyon.github.io/livereloadx/

[6] https://github.com/FuzzyIdeas/lowtechguys/blob/main/Makefile

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.

This config sets a ”medium“ font weight for our form labels by default. Now, suppose we want a specific input’s label to be bold instead, we might want to try the following naive approach (we’re using the Slim template notation here):

Liquid is a template language created by shopify. In my use case I use it for generate html that is almost similar looking but differs in data. So when iterating over my HTML, I need to preview the changes I made combined with my data.

Inside the blog directory, create an index.liquid file. This will be our blog’s homepage. Eleventy provides a number of options when selecting a template engine. For this project, we’ll use Liquid.

Templating engine: SSGs rely on templating engines to define the structure of web pages. These engines enable developers to create reusable templates and incorporate dynamic content. Popular templating engines include Liquid, Handlebars, Mustache, EJS, ERB, HAML, and Slim.

Assuming I understand the ask, I think my approach would be to have a trigger fire when a ticket's custom field is set to "add user to the application." That trigger would notify a webhook. That webhook would be set to the Organization API endpoint with a payload that uses liquid markup to add 1 to the existing Organization's value.

For example, their theme templates use Liquid, which is a html templating system for Ruby. Activemerchant also was released by Shopify, and it provides a interface to major payment providers like PayPal.

In the meantime, Liquid v4.0.4 has been released, and allows building a Jekyll site with the latest Ruby.

Liquid docs - https://shopify.github.io/liquid/

Then, let’s create the simplest template for our static Eleventy page. We’ll write it using Liquid, but since it’s so simple, it won’t take advantage of any useful templating tags for now. Let’s call it index.liquid:

Previously I have used Jekyll for blogging and it has served me well for simple blogs and static websites. Jekyll is a static site generator that relies on Markdown, Liquid, HTML, and CSS. Which means no JavaScript -- a Jamstack without the J. With GitHub Pages you can even host Jekyll sites directly from your repository.2