Forem: Ben Sinclair

Component-based CSS

Ben Sinclair — Tue, 07 Apr 2026 16:20:38 +0000

There are a lot of CSS "solutions" out there. They generally act to solve a broad range of problems, none of which actually exist outside their authors' bubble.

Let me take you by the mitten and show you how I like to style components.

Here's "semantic-component-name.html":

<section class="semantic-component-name-here">
    <form>
        <fieldset>
            <legend>Robin Hood</legend>
            <!-- etc... -->
        </fieldset>

        <fieldset>
            <legend>King Arthur</legend>
            <!-- etc... -->
        </fieldset>
        <input type="submit" value="Update history">
    </form>

    <p class="disclaimer">
        None of these people are what you think they are.
    </p>
</section>

and "semantic-component-name.css":


.semantic-component-name-here {

/* Put everything in here... */

  legend {
    color: var(--heading-color);
    font-size: 1.5rem;
  }

  .disclaimer {
    color: var(--ethically-dubious-color, #ccc);
  }

  /* that's it. You're done. */
}

Your component, which has a distinct container class name, uses a semantic container tag, and inherits style variables from the parent theme... will just work.

You can update your look and feel from your global theme. You can use container queries to your heart's content. You can use tag selectors. They're all nested under the component's class, so they're not going to clash with anything.

You don't need to do anything special. You don't need to give every single element a generated random ID. You don't need to hard-code each component's padding inline with the tag, or define it in JavaScript. So put away that smelly CSS-in-JS. Stop importing stylesheets into React. Uninstall your preprocessors. You don't need any of that stuff.

Okay, you can aggregate and minimise the CSS. Don't purge anything though.

Don't remove unused CSS classes at build time. That's another solution to a problem that doesn't exist unless you literally design your code to BE the problem. And you don't do that, do you?

As a side-note, Svelte partially does this for you if you want to do React- or Vue-like things without having to run that sort of obsolete bloatware. It does give every component a random ID, but it's the closest to proper CSS handling I've seen outside of just doing it yourself in the first place.

Any questions?

Printable layouts and accessibility

Ben Sinclair — Wed, 25 Mar 2026 11:47:49 +0000

Arguments against my whole post

You shouldn't be printing anything anyway, it's bad for the environment!

Yes. Fine. Noted.

That's what PDFs are for!

No, it's really not, and if you have a site somewhere with a button labelled "print" which exports something as a PDF then we probably have bigger problems.

Nobody prints web pages, what are you worried about?

Uh-huh.

People print web pages. Some people will print off a copy of your CV, a receipt for a product, the confirmation page for a booking, some quick troubleshooting tips for their washing machine, a recipe...

My partner has reduced vision and uses larger-than-usual text sizes on screen, and often prints articles out to read them at her leisure in a more comfortable way. Paper is still easier for a lot of people to read than a backlit screen. It's the big reason kindles are so popular.

Let's have a nice clear button that says "print"

No, let's not. Browsers have that built in. You wouldn't reinvent the wheel, would you? You wouldn't recreate the browser's "back" button on ever... wait, you did that, didn't you?

What about "reader mode"?

Reader mode is good. It's where the browser tries to remove as much of the formatting and unnecessary cruft it can and gives you a single column of clear text, in good contrasting colours.

It's better than good, in fact: it's great. But it solves a different problem than printing does. You'll lose the layout for an invoice, for example.

So... what should we keep, then?

Navigation

Odds are, you don't need to show the menu structure when printing something out. Ditch it.

Advertising

You don't need to display ads in a print-out. It's not like anyone can click them, and it's not like anyone wanted to see them when they were on the screen in the first place. Ditch them from the print stylesheet.

That big honkin' footer/sidebar/whatever

No.

The newsletter signup nag/subscription begging modal/plea for social media "likes"

You didn't expect this to show up, did you? Because it's hidden by javascript until the user is least expecting it? And you're surprised it's mangled its way into a paper copy?

Pay attention now: no.

Cover photo from Printer Leaf by zion at Morguefile.com

How to talk to people

Ben Sinclair — Wed, 25 Mar 2026 10:52:07 +0000

Have you ever wondered why some products use different language for what appears to be identical functionality? Why is it that we have so many ways of saying the same thing? Is it an artefact of English being the Internet's lingua franca¹? Does it matter?

Bookmarks vs. Favourites² and the power of language to shape your experience

There's more behind this than you might think. In prehistoric times, Netscape Navigator used bookmarks and Internet Explorer used favorites.

Bookmarks are a familiar concept to many older people. You know, people who read dead-tree books when they were growing up, and know why the "save" icon is a floppy. It's a word that's partially lost its meaning nowadays, apart from as a semi-synonym for favourite.

At its simplest, a bookmark is something you use to mark your place in a book. It doesn't infer any sense of approval. You can go through a terrible textbook and bookmark all the worst bits.

Bookmarks show interest, but are fundamentally impartial.

Favourite, however, comes with baggage. If you favourite something - he says, verbing the noun with near-Millenial abandon - you imply that you like it, that you approve of its content.

If your favourites are public, then you might hesitate to press the button, cautious of what other people might make of it.

If your favourites are private, then you still might worry that someone will see them one day.

I deliberately didn't use the word "like" earlier, but we all feel its presence. The little star reaction on site A is a heart emoji on site B. They are not the same.

tl;dr: You can influence how people behave by using leading language.

Followers vs. Friends and social pressure

"Don't think 'cause I understand, I care. Don't think 'cause I'm talking, we're friends."

-- Sneaker Pimps

In a similar vein, there's the "buddy" problem.

If I'm on a site or app where I am interested in a particular topic - a political issue, or a fandom, say - I might follow accounts around that topic. It doesn't mean I endorse them, but if your site calls that mechanism, "friends" then there's yet more baggage.

As a side-note, if your site calls it "buddies" then it flags your service as US-centric as this term isn't widely used elsewhere. That may or may not be what you want.

Follow-back culture.

I probably don't need to mention this, but there's a "follow-back" culture online, especially amongst younger people wanting to up their numbers.

It's a whole mess, and feeds into these parasocial relationships we keep hearing about, and probably contributes a lot to vulnerable people feeling even more inadequate. It's not something that's as controlled by language as my other points, but there are a variety of things you can do in terms of UX when presenting people with notifications or "follow" actions.

Use your imagination: if it feels like it's leading someone down an unnecessary path or pushing a certain behaviour, maybe don't make that component in the first place.

TODO: insert picture of give-a-shit-ometer³

Likes and favourites and peer pressure

Again, we all feel the presence of the like button.

Sometimes this is what we want. Calls-to-action can help users navigate an unfamiliar interface. The "like" is familiar in all of its forms. But they're not interchangeable.

Gamification

We know gamification pushes users in one direction or another. But gamification is the last resort of a system that doesn't have a real reason to exist.

If there's no benefit to the end users to have awards, for example... don't have them. It's not rock surgery.

Relevance to DEV

Sometimes I try to bring the context of this platform back into my posts. I think DEV does it pretty well: there's a variety of different reactions you can add to a post as well as leaving comments, including:

neutral iconography (exploding head)
a bookmarking feature neutrally labelled, "save"
a discrete "boost" option to separate promotion from reaction

Stats, follower counts and social influence

Some sites lean heavily on stats. They show people's follower count in little tooltips or next to the person's name. It's placed as more important than the person's bio, because it's seen more frequently.

Imagine that: it's more important to show you that 800 people follow Alice and 5,000 people follow Bob than it is to mention that Alice shares similar interests with you, while Bob mostly rants about sportsball.

I could write a lot about numbers. I have, in other places, but it's a little off-topic for here, so I'll try to stick with the context.

I said it's more important to show you the stats, but what I mean is that they fit into a conveniently small area, are quick enough to generate and, well, big numbers generally impress people. They make you feel inadequate and get you all gamified. There's no real reason that a user should care what they are, but by including them, you're telling visitors that popularity is rewarded on the site - and probably popularity for its own sake.

In my opinion, this might not be a smart move.

Ultracrepidarianism

The title of this post is a little in-joke because I'm not very good at talking to people. Whatever.

Cover photo by Brett Jordan from Pexels

Why is this phrase not in the lingua franca? ↩
I'm not American. In code or when talking about a specific American instance, I'll call it a "favorite" because I code in American, but in posts and conversation I'll spell it the way nature intended. Suck it up. ↩
Meh, can't be bothered. ↩

Maybe there's a little time left

Ben Sinclair — Mon, 16 Mar 2026 10:29:12 +0000

I wonder how long until people stop tagging things with #ai... because everything's AI?

Maybe there's a little time left.

Remember when everything was listicles? I'm almost nostalgic for those days. At least you could identify them at a glance. Now it often takes a paragraph or two before you click that it's slop.

But it's not the slop I'm trying to stop. At least, not directly. It's the fact that everything on my feed is about how to AI harder.

Now, DEV supports hiding tags. I think I did find this out a while ago, but forgot. Last thing I remember, you could only weight tags, from somewhere hidden in your profile. Setting something to a negative weight theoretically made it show up less (but still show up). I never found it that helpful.

I'd not really bothered before because the site used to be a reasonable balance of articles, if skewed a little towards web development. That's not the case in 2026.

But it turns out there is still content left that's about development, and you can get to it by blocking everything AI.

Since noticing (or re-noticing) that you can "hide" tags, I've hidden every combination of AI¹ I found, and my feed is now... about development again?

And since I started this, and because I'm on a mission at this point, I've also used my Adblock superpowers to get rid of all the little robot icons and "agent" CTAs encouraging me to not author my own post.

I had all but abandoned this place.

But maybe, maybe there's a little time left.

while I'm at it, everything not about development or about how to get rich quick: #ai, #blockchain, #crypto, #gemini, #geminicode, #openclaw, #opencode, #mcp, #seo, ... ↩

(My first time) Running an Azure Function

Ben Sinclair — Mon, 03 Mar 2025 19:06:13 +0000

Other people have done this before, of course. I'm not breaking new ground here.

Background picture

I know how to make a Lambda function in AWS. Amazon are wildly unfriendly with their TLAs but the first time I used it the whole thing took about an hour, and I wrote something that uses a webhook to forward some information to a different API. It was straightforward so far as I remember.

So why did I do this?

Microsoft stack for a different client. Needed to learn the ropes.

Let's do Azure!

$ign me up (tldr; issues: multiple, confidence: suspicious)

Step one is to get a free Azure account.

Well, I say free. You have to provide your credit/debit card details even if you want to use the free tier, which does not fill me with confidence.

Microsoft let me sign up with a GitHub account - a service they own - but apparently that's not enough to identify me, so I have to use my phone. Honestly, this tells me more about how much they trust their own other products than it does about Azure.

However, the process went without any technical glitches.

And you know something? I quite like their retro theme. Looks straight out of the early 2000s, like cPanel or sommat:

Installing prerequisites (tldr; issues: multiple, confidence: are we learning yet?)

There aren't any real prerequisites so far as the official documentation goes, except needing to install whatever language you choose. I'm going to go with TypeScript.

I'm also using VSCodium¹ because I want to follow the tutorials and their VSCode examples seem the best documented. Full disclosure, I'm not a big GUI person; the only thing I have installed so far is the VSCode neovim extension and the Gruvbox theme so I feel comfortable.

I install the "Azure Functions" extension, and open their "http trigger" example function. I want something simple, like a "hello world" effort where I can visit a particular URL and get a canned response.

Looks good so far, syntax highlighting all works, tooltips show me Azure-related guff.

Apparently I can run this function locally. I hit "Run" to see what it does...

Oh. Ok, let's learn more, shall we?

I get taken to a web page telling me to install Azurite. Cool. Would have been nice if this was a hard dependency of the AzureFunctions extension, or at least listed in the documentation before this point, but ok. We're here now. I'll do what you say, Microsoft Help Page, I'll install it as a VSCode extension.

Except that extension doesn't exist in the VSCode extensions search.

Hmm. Maybe VSCode isn't getting an up-to-date list of add-ons? I'll fall back to a web search.

Bingo!

So let's do that.

Boo.

Is it something I said?

Maybe it's because I told Microsoft's telemetry to get in the sea, and run VSCodium instead of VSCode? Perhaps a pre-requirement of running an Azure function is that they leech more of my personal data?

I'll install the Bad Place version of the IDE and see what difference that makes...

...it was something I said.

Hello, world? (tldr; issues: oodles, confidence: I don't know the meaning of the word)

It prompts me to sign in, so I do. Twice. Once for the Azure functions and then for the Azure functions, but on a page with a slightly different colourscheme.

I run "debug". It fails, and I read the documentation again. Ah, the Azurite extension doesn't start automatically, I have to run it manually every time. No biggie².

It can't find the function in Azure. Tells me it doesn't exist.

Reading the issues tells me this is because I left it idle too long. Apparently an hour of debugging and getting more coffee is enough for this to silently log you out and prepare a misleading error message for when you return.

I log in again. In order to do that I have to quit and restart VSCode. Maybe there's a way to do it in the IDE, but I couldn't find it.

Hello Node my old friend, I've come to speak with you again.

Let's go!

[error] Incompatible Node.js version (v23.9.0). Refer to our documentation to see the Node.js versions supported by each version of Azure Functions: https://aka.ms/functions-node-versions

It seems Azure Functions currently max out at node version 20. That's not unusual for these sort of platform-specific things, Vercel, Netlify, AWS, etc., all have similar restrictions.

However.

I cannot find out how to get VSCode to use a different version of node. Various articles online tell me to set a runtimeVersion in my launch.json. This does nothing whatsoever, and as an added indicator of its relevance, the keyword "runtimeVersion" has that little yellow squiggle that means, as the Australians might say, "yeah, yeah, no."

If you're adventurous enough to follow that link, you might notice that it takes you to a page which says absolutely nothing about node versions.

If I navigate to their node troubleshooting page, the only relevant part I see is this:

Make sure you're using Node.js v18 or higher.

Maybe the problem is that 23 < 18 in Microsoft Units.

Other articles tell me to set the default in nvm to 20 - nvm alias default 20. This does not help.

200mph solution incoming...

I "fix" this by closing VSCode and launching it from an environment where 20 is already the current version:

nvm use 20 && code

I don't particularly like this because if I launch the IDE from my desktop it'll fail and I might not remember why. Still, it's a way forward!

Conclusion

I made it? I think.

I can debug a local copy of an Azure function and instantly deploy it when I'm happy with my work. Now it's running, it's pretty smooth.

Cover image by Bing, based on artwork stolen from real humans.

VSCodium is the open-source project that Microsoft make before they add their telemetry and bundle it up as an app. ↩
Stupid, but no biggie. ↩

I made my DEV articles into a blog using the Forem API

Ben Sinclair — Wed, 12 Feb 2025 16:02:43 +0000

Other people have done this before, of course. I'm not breaking new ground here.

It's a couple of API calls and a styling exercise. All the actual work is done by DEV.

It lives at moopet.net/blog.

So why did I do this?

I lost my job a few weeks ago¹ and decided it was time to make my personal website, which was pretty much a one-shot joke at the time, into something I could show recruiters. A links page, a CV, a portfolio, and... a blog. You know, something to show I was an "active member of society" or whatever.

The obvious choice was to use DEV, since I've made quite a few posts here over the years, and everything I've posted elsewhere is, let's say, "not representative of the opinion of my employers".

I also decided to do it with Svelte, because I'm getting into that, too. So birds, stones, etc., you know the drill.

What did I want it to look like?

I love gruvbox as a colour scheme, and I wanted something kind of retro. Something that wasn't another swish corporate-looking effort full of stock images but that also didn't look too playful.

Technical details

Dark mode

I wanted to support dark- and light-modes based on the system setting followed by the user's preference:

import { browser } from '$app/environment';

const defaultColorMode: string = 'light';

const getBrowserColorMode: string = () => {
  if (!browser) {
    return defaultColorMode;
  }

  if (window.localStorage) {
    const userSavedMode = window.localStorage.getItem('dark-mode');

    if (userSavedMode) {
      return userSavedMode;
    }
  }

  if (window.matchMedia) {
    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
      return 'dark';
    }
  }

  return defaultColorMode;
};

let isDarkMode = $state(getBrowserColorMode() === 'dark');

$effect(() => {
  if (isDarkMode) {
    document.body.classList.add('dark-mode');
    window.localStorage.setItem('dark-mode', 'dark');
  }
  else {
    document.body.classList.remove('dark-mode');
    window.localStorage.setItem('dark-mode', 'light');
  }
});

<div>
  <img src="/images/icons/dark-mode.png" alt="" />
  <input id="dark-mode-toggle" type="checkbox" bind:checked={isDarkMode} />
  <label for="dark-mode-toggle">Dark mode</label>
</div>

Code blocks

For the code blocks, I decided to not change the style when switching between dark- and light-mode, because I think the dark block looks good against either background.

But while I was styling it, I noticed the syntax highlighter used on DEV handily includes the language in the wrapping element's class.

And I can do something cool with that!

.highlight {
    background-color: var(--color-gruvbox-black);
    color: var(--syntax-text-color);
    border-radius: 6px;
    padding-inline-start: 1rem;
    padding-inline-end: 1rem;
    padding-block-start: 1rem;
    padding-block-end: 1rem;
    margin-block-end: 0;

    & + .highlight {
      margin-block-start: 1.5rem;
    }

    &:has(pre) {
      position: relative;

      &:after {
        position: absolute;
        top: -0.75em;
        font-weight: bold;
        text-transform: uppercase;
        font-family: monospace;
        right: 1rem;
        padding-inline-start: 0.5rem;
        padding-inline-end: 0.5rem;
        padding-block-start: 0.25rem;
        padding-block-end: 0.25rem;
        border-width: 1px;
        border-inline-start-width: 1px;
        border-inline-end-width: 1px;
        border-block-start-width: 1px;
        border-block-end-width: 1px;
        border-color: var(--color-gruvbox-white);
        border-style: solid;
        background-color: var(--color-gruvbox-brown);
        border-radius: var(--border-radius);
        content: "source";
      }
    }

    &:has(pre.plaintext):after {
      content: none;
    }

    &:has(pre.html):after {
      content: "html";
    }

    &:has(pre.javascript):after {
      content: "js";
    }

    &:has(pre.shell):after {
      content: "shell";
    }

    &:has(pre.sql):after {
      content: "sql";
    }

    &:has(pre.yaml):after {
      content: "yaml";
    }
  }

Inline code with backticks

I decided to style inline code the opposite way, with a light background. Dark didn't look good when the site was in dark mode and I wanted to do more than just use a monospace font.

What problems did I find?

Honestly, very few. Most were because I was a Svelte beginner - barely using anything beyond the router - and I've either fixed them since or decided they're fine as-is.

I couldn't figure out how to get pagination to work in Svelte without loading all my posts and slicing the array. Doesn't matter since there aren't enough posts to make it an issue. The API payload is small enough.

I realised too late that some posts had generic DEV-themed cover images (well, social_image really) because I hadn't uploaded one².
I decided to make the text full-width if there was no cover_image set instead:

... and I kinda like it. It's big and bold and goes with the big links and colours I've used elsewhere.

When faced with posts containing code blocks, I could have rendered the markdown myself and styled it (the API provides posts both as markdown and HTML) but then I'd have needed to handle liquid tags and all sorts of other content. So I took the HTML version and styled it up myself.

Similarly, links were something I needed to fudge, since they were often relative. I could add routes in Svelte to match the post slugs and show my articles, but I'd need to do that just for my own articles. Anyone else's and I'd need to redirect to dev.to.

Some elements in DEV's HTML (from liquid tags, mostly) don't always contain what I'd guess. For example, an {% embed ... %} tag for another user's post will render with an image and a description, which I styled up fine. It wasn't until I went through all the posts to double-check that I discovered that under some circumstances there can be more than one image. I had to style pretty defensively.

So am I pleased with the result?

Yeah. Yeah, I am. I have a website which doesn't look too modern, and uses proper HTML (it doesn't rely on any weird utility classes).

I wanted to make a blog that felt like it fit in without having to rethink all the design decisions I'd made for the rest of the site. Or maybe it was the other way around. Whatever, I wanted it to go nicely together.

I wanted it to be as simple and extendable as I could make it, with bold, accessible colours and spacing, yet still cram in all the different things you can do in a DEV post.

I learnt a buttload about Svelte. Most significantly I learnt that the things I don't like about React are suddenly not a problem with Svelte. I'm not an expert with either so there's room to change my mind.

So what's a good example post?

Try moopet.net/blog/98475. It's an older post, but it checks out.

It doesn't particularly matter what the it's about; it showcases blockquotes, code blocks, inline code, different heading levels, images and tags, so it covers most of the things I've styled.

Is there anything left to do?

There's always something to improve, right?

~~make the router work with slugs instead of/as well as article IDs~~. Done!
read the highlighter source code to find what other languages it supports and add them in.
make it update without having to push to the repo :)
probably fix a million silly little styling bugs on different devices.

Final notes and engagement ploy

There are a couple of posts here on DEV where people have shown how they integrated posts in their own website, most of which go into a lot more detail than I have.

But I'd love to see some comments about your own examples, showing off how you made it look!

It's ok, I got a new one. ↩
In fact, this post you're reading now doesn't have a cover image, and it's because I couldn't think of something that would work and wouldn't be a recursive image of the blog itself! ↩

How to get into your CMS when you've locked the keys in your car.

Ben Sinclair — Thu, 19 Dec 2024 14:23:36 +0000

Sometimes, you have shell access to a server, or a database dump, but you don't know how to log in as an admin. Maybe you've been given a copy of the latest database from production and are trying to replicate some bug locally. Maybe you're just forgetful.

How to get around this isn't going to be the same between frameworks, so here're a few of the popular ones I've had to use. Sometimes it's a way to reset a user's password without having access to their email, sometimes it's a way to log in as a user without needing to know the password at all.

This isn't a way to hack into servers. It's a way to get better access to something you already have access to.

This is currently very much a "PHP" cheatsheet. I might add more later. Throw me a comment if you have one to add?

Craft

Tip: the default login form for a Craft site uses the path /admin.

Using the craft command-line client

craft users/impersonate admin

Using the database

Generate a new password hash using the tool at craftcmspwgen.

UPDATE users SET password="<password_hash>" WHERE username="admin";

Drupal (up to version 7), Backdrop, etc.

Tip: the default login form for a Drupal site uses the path /user.

drush user-password admin --password="<password>";

Drupal (version 8+)

Tip: the default login form for a Drupal site uses the path /user.

drush user:password admin "<password>";

WordPress

Tip: the default login form for a WordPress site uses the path /wp-login.php. There are numerous redirects, but out the box that one should work.

It's incredibly common for WordPress site administrators to change the login path to something obscure, so this might not work. This is a solution to the wrong problem, but let's not get into that here.

Using the wp-cli command-line client

Use wp user list to find the user name you want to log in as (in this example, it’s “admin”) and then run:

wp user update admin --user-pass=<password>

See wp user update – WP-CLI Command for more information.

Alternatively if this doesn’t work (sometimes it just… doesn’t), use
wp user list to find the user ID you want to log in as (in this example, it’s 1) and then run:

wp user reset-password 1 --show-password --skip-email

Using the database

Generate a new password hash using the tool at craftcmspwgen (yes, it says Craft, but it works on WordPress as well).

UPDATE wp_users SET user_pass="<password_hash>" WHERE user_login="admin";

Cover photo by Claudio Schwarz on Unsplash

(My first time) Installing Laravel

Ben Sinclair — Sun, 24 Nov 2024 15:22:45 +0000

Sometimes, especially when you're at the beginning of your career, it can seem that you're following the instructions and getting nowhere - while everyone else seems to find it terribly easy.

It can be pretty disheartening, and I want to describe a couple of ways I experience exactly the same thing even after, well, decades. So here I am, trying to detail the stumbles and bumbles I make trying to get things to work. This is my first post on the subject, but I hope to make more.

Let's learn Laravel.

Laravel strives to provide an amazing developer experience [...]
Whether you are new to PHP web frameworks or have years of experience [...]

Laravel is touted as being the "developers' framework, at least in PHP circles, because it's more bare-bones than the others and it takes simple yet strict architecture decisions. I've done a few other PHP frameworks - Drupal 7, Drupal 8+, Symfony, WordPress, Concrete5, PrestaShop, CodeIgniter off the top of my head - so I'm not going into this unprepared.

I'll start from a barebones laptop and see how far I get.

Installing prerequisites (tldr; issues: zero, confidence: supreme)

Before creating your first Laravel application, make sure that your local machine has PHP, Composer, and the Laravel installer installed. In addition, you should install either Node and NPM or Bun so that you can compile your application's frontend assets.

OK. Not a problem. I'll apt install myself some of that PHP, get composer from... getcomposer.org, and figure out how to install the "Laravel installer" next. Aparently my distro has Node 22 out the box, or it installed when I set something else up earlier, so that should be covered.

$ composer global require laravel/installer

Boom. Done. No problems yet, we're off to a good start and confidence is at an all-time high.

Setting up a new Laravel project (tldr; issues: some, confidence: high)

$ laravel new example-app
zsh: command not found: laravel

Oh. Maybe I have to revisit that supreme confidence thing.

So it seems that composer doesn't install anything into regular binary paths and the composer installer doesn't do anything to add itself to the system path either. I've never really had to face that before, since I've directly run composer-installed binaries from whatever path they appear in. For example, with Drupal, there's vendor/drush/drush/drush or vendor/bin/drush depending on which version you're running. Do I need to add myself a symlink or alias or find the laravel binary wherever composer added it, "globally"?

I don't know, so I have to search for this.

I find some clues on a Stack Overflow answer: you can find the composer binary directory with composer global config bin-dir --absolute, and apparently in modern versions of composer everything with an executable command gets it put into that directory rather than losing itself to the hierarchy.

Good. I can add something to my startup script to put that in my path... except that command produces more than just the path...

$ composer global config bin-dir --absolute
Changed current directory to /home/moopet/.config/composer
/home/moopet/.config/composer/vendor/bin

... and I can't use that whole string as a directory. Maybe I'll need to use tail to get the last line, or something. Wait, no there's another comment on this SO answer which includes the --quiet flag. What does that do? I'll try composer --help:

Usage:
list [options] [--] [<namespace>]

Well, uh, turns out that running --help on a bare composer command actually gives help for the list subcommand rather than composer itself. That had me stumped for a minute.

-q --quiet Do not output any message

Hmm, that doesn't sound useful! We want some output. What else is there?

--raw To output raw command list
--format=FORMAT The output format (txt, xml, json, or md) [default: "txt"]

Maybe it's one of these?

The "--raw" option does not exist.
The "--format" option does not exist.

Nope. Like I thought, these are options to list and not general use flags.

Let's run it with --quiet anyway, just for poops and funsies:

$ composer global config bin-dir --absolute --quiet
/home/moopet/.config/composer/vendor/bin

Well, what do you know, it worked. It's just badly documented.

I'll pop that into my shell startup script with a little guard code and we can continue:

if command -v composer >/dev/null; then
  export PATH=$(composer global config bin-dir --absolute --quiet):$PATH
fi

Setting up a new Laravel project, take 2 (tldr; issues: some, confidence: wavering)

This time laravel new example-app launches, and prompts me for a few things. I accept the defaults, since I haven't read far enough in the documentation to know the difference, except for the starter kit. I choose, "Breeze" because that's how it is in the documentation.

It starts the installation process and all looks good until:

- Root composer.json requires laravel/pint ^1.0 -> satisfiable by laravel/pint[v1.0.0, v1.1.0, v1.1.1].
- laravel/pint[v1.0.0, ..., v1.1.1] require ext-xml * -> it is missing from your system. Install or enable PHP's xml extension.

Wait, PHP needs the XML extension? That was never listed as a requirement! OK, I'll do a quick apt install php-xml.

Good, all installed. I'll run the setup again.

laravel new example-app
In NewCommand.php line 789:
Application already exists!

Oh.

So the installer got part way through, failed because it hadn't verified its dependencies, and has left the app in a broken state. That's not a good sign. Laravel's on, what, version 11?

Surely they'd have basic up-front requirements checking by now? Oh well. I'll just rm -r example-app and start again, nothing lost because I haven't really started yet.

Long story short¹ the next missing dependency was the the DOM extension, or maybe the XML extension. Or maybe the cURL extension.

- phpunit/phpunit[11.0.1, ..., 11.4.3] require ext-dom * -> it is missing from your system. Install or enable PHP's dom extension.
- Root composer.json requires phpunit/phpunit ^11.0.1 -> satisfiable by phpunit/phpunit[11.0.1, ..., 11.4.3].

So I need to install php-dom? No. Try some others. Stack Overflow again. Turns out I need to install php-curl. Riiiight.

Onward. rm -r the directory and run through the setup wizard again.

Setting up a new Laravel project, take 3 (tldr; issues: hngg, confidence: still wavering but bolstered by recent problem-solving success)

It prompts me for which database server to use. All of them say, "Missing PDO extension" next to them.

Sigh.

I break out of the installer, delete the whole directory again, apt install php8.3-mysql because there's no direct php-pdo package and no alias for php-mysql that works either, so I've done some tiresome apt searching.

Illuminate\Database\QueryException
SQLSTATE[HY000] [2002] Connection refused (Connection: mysql, SQL: select exists (select 1 from information_schema.tables where table_schema = 'laravel_example_app' and table_name = 'migrations' and table_type in ('BASE TABLE', 'SYSTEM VERSIONED')) as 'exists')

What the what now? At no point has this installer asked me for connection details for a database. And it's trying to run SQL commands against... something. Who knows?

As it happens, I have a MySQL server running on another host in my LAN and was prepared to use that (even though I'll note that bringing your own database was not listed as a requirement for Laravel). I guess I should have installed SQLite, maybe that would have worked, since it won't need any credentials.

sudo apt install php8.3-sqlite

Try again.

rm -r example-app
laravel new example-app
...

Great success. Hacker voice "I'm in". For the win. Success kid.

Conclusion

I made it? I think.

But if someone had asked me how long this might take, then based off the enthusiastic documentation and reputation, I'd have said 20 minutes. If I was doing it for work, my project manager would have doubled or quadrupled that based on experience of developer estimates.

How long did it really take me? An hour or so one evening and an hour or so the next day. I wasn't rushing, but it wasn't straightforward.

And you know what? I'm not happy with it. It's not using MySQL, because that part of the installer appears to be completely broken. I'm using SQLite and that's one step further from what would be going on in a real production environment. So there're definitely some things left on the TODO list before I can get going with the actual tutorials.

But it runs. The build steps claim they went without a hitch.

I'm ready for the next phase: fixing the JsonException, Syntax error and ProcessTimedOutException that appear in the console as soon as I open the demo page in my browser.

Uh-oh.

If only things worked out the box, eh.

EDIT:
I'd like to remind anyone that while I'm grateful for any comments, I'm not looking for solutions to the problems I found in this post. It's about the journey, and how it's difficult for everyone sometimes. I plan on making more posts with the same general aim. There are a lot of good tutorials and questions where people are asking for help already on DEV, and they might be a better place to help out!

Chorus: too late ↩

It's not just you. Some things are always a pain.

Ben Sinclair — Sun, 24 Nov 2024 15:22:35 +0000

Sometimes, especially when you're at the beginning of your career, it can seem that you're following the instructions and getting nowhere - while everyone else seems to find it terribly easy.

So if you're ever feeling like your last technical test was abord the Kobayashi Maru, I get it.

Sometimes it's something you haven't been taught yet. Sometimes you've been shown it, but it hasn't clicked. Sometimes you do everything right, and you grok the problem, but the documentation is missing a vital step.

And you fail anyway.

And it can be pretty disheartening.

And you're still probably not an impostor.

Do you remember a while back, some people started posting (tweeting, when that was still a thing) confessions like, "I've been a dev 20 years and I don't know how dependency injection works". Or like, "I took down production in my first week at my new job"? They were strangely comforting. It was nice to see how other people screwed up.

I want to describe some of the times I experience exactly the same thing even after, well, decades. So here I am, trying something new. A series¹ of posts.

Series: n. A number of objects or events arranged or coming one after the other in succession. I know there's only one post so far. One is a number! ↩

Fuzzy business: shadowing ssh

Ben Sinclair — Wed, 16 Oct 2024 09:09:41 +0000

Shadowing commands

I'm going to show you how to shadow a "real" application so you can bolt things on after the fact.

I'm going to use shell functions to do it.

Functions in the command line are like more powerful aliases.

bUt YoU dOnT lIke aLiAsEs

Yeah. I posted about that. I know.

Ben Sinclair

Sep 3 '18

The case against aliases

#shell #productivity #git

Comments 20

3 min read

Everything I said there stands.

We're not adding a subcommand here this time, or forcing default flags. We're going to be overriding one specific scenario, which is when the user types ssh on its own. Normally ssh would give you its usage message, and we don't care about that too much. ssh will never be run without arguments in a script, so there's no worry we'll mess up between environments, and the user can still see the usage information if they mess up, or explicitly by running command ssh.

This is basically monkey patching as used by such peers as Ruby On Rails, and 1990s virus authors.

By your command

So how can you tell if a command is shadowed? Can you run the "real" command?

You can use the command -v <command> command on the command to see what your command is. And you can command your shell to use the "real" command by prefixing it with command, like, command <command>.¹

For example, command -v ssh will show you what's going to run when you type ssh into the shell. I'll use it in a minute to stop my script in its tracks in the case where fzf isn't available on the system.

Ok, I'm sold, what are we going to add?

A fuzzy host matcher² that gets a friendly description of the host from comments in your SSH config file.

So you'll need fzf installed for this example to do anything interesting.

Important bits of the function

It's not massively important how this thing works, except for checking whether any arguments have been passed and falling back to the "real" command if we don't need to call our code.

# If any arguments were provided, use the original ssh command instead.
if [ $# -ne 0 ]; then
    command ssh "$@"
    return
fi

return on its own will return the last exit code, so for example, if someone runs ssh -plop, it will return 255 because lop isn't a port number.

Note that we're using return rather than exit here, because otherwise we'd immediately log the user out and that's probably not what they're expecting!

If you're confused by exit vs. return, check my "sourcery" post mentioned later.

The full function

ssh() {
    # Path to your SSH config file in case it's different.
    local SSH_CONFIG="$HOME/.ssh/config"

    local RESET=$(tput sgr0)
    local BOLD=$(tput bold)
    local CYAN=$(tput setaf 6)

    # If any arguments were provided, use the original ssh command instead.
    if [ $# -ne 0 ]; then
        command ssh "$@"

        # "return" on its own will pass the last exit code.
        return
    fi

    if ! command -v fzf > /dev/null; then
        printf "Shadowed ssh command will not run without fzf installed.\n" >&2
        return 1
    fi

    if [ ! -f "$SSH_CONFIG" ]; then
        printf "SSH config file not found at %s\n" "$SSH_CONFIG" >&2
        return 1
    fi

    local hosts_with_descriptions=$(awk -v bold="$BOLD" -v cyan="$CYAN" -v reset="$RESET" '
        BEGIN { max_host_length = 0 }
        /^#/ {
            desc = substr($0, 2)  # Remove the # from the comment
            gsub(/^[[:space:]]+|[[:space:]]+$/, "", desc)  # Trim whitespace
        }
        /^Host / {
            host = $2
            if (length(host) > max_host_length) max_host_length = length(host)
            if (desc == "") desc = "No description"
            hosts[host] = desc
            desc = ""
        }
        END {
            for (host in hosts) {
                printf "%s%-*s%s  │  %s%s%s\n", bold, max_host_length, host, reset, cyan, hosts[host], reset
            }
        }
    ' "$SSH_CONFIG" | sort)

    local selected_line=$(echo "$hosts_with_descriptions" | fzf --height 40% --reverse --prompt="Select SSH host: " --ansi)
    local selected_host=$(echo "$selected_line" | awk '{print $1}' | sed "s/\x1B\[[0-9;]*[mK]//g")

    if [ -n "$selected_host" ]; then
        echo "Connecting to $selected_host..."
        command ssh -F "$SSH_CONFIG" "$selected_host"
    else
        echo "No host selected."
        return 0
    fi
}

Whoa, you say. What's that crazy awk script in the middle doing there? Well I'll tell you what it's doing there. I cba to do that bit myself so I got AI to do it for me. I know, I know, I'm a bad person. It's not relevant to this blog post though.

And why am I explicitly passing a config file path to ssh? Because you might not keep it in ~/.ssh/config. I don't, and as for why, well, I'll probably write a post about that later.

Hook me up

You'll need to load this function before you can use it. That's typically when you start your shell, so you could paste it into your .zshrc or .bashrc, or whatever. You can't run it as a standalone script by adding a shebang, though. I wrote about that, too:

Ben Sinclair

Jun 14 '20

What sourcery is this?

#cli #beginners #shell

Comments 2

4 min read

(Hacker voice) I'm in

Yeah, you are!

Cover image by Photo by Marco Bianchetti on Unsplash

COMMAAAAAAAAND. ↩
Yes, I'm aware you can use some kind of autocomplete in zsh with a combination of asterisks and tabs and bears. ↩

Did you come to development from a different career?

Ben Sinclair — Sat, 24 Aug 2024 12:09:34 +0000

If you weren't always a developer as a profession, what did you used to do?

Why did you change?

Looking back, do you have regrets, or do you wish you'd changed earlier in your career?

I've always worked with computers, though I went through IT support / network admin / hardware engineer roles before settling on software development. Sometimes I wish I'd done dev work from the get-go - I was a hobbyist programmer - but other times I'm grateful for having a bit more wide-ranging experience as I get older.

And I'm curious about you!

My work setup for PHP development

Ben Sinclair — Wed, 10 Jul 2024 11:04:37 +0000

These days the majority of my (programming) work is (in order of SLOC): PHP, Javascript (including Node), CSS, HTML, and shell scripts. I do sometimes dip into other languages, but the instances are tiny compared to these main ones.

And this is my story.

Hardware

I'm writing this on my main me-facing machine. It's running Windows 11, but that's almost entirely for Important Gaming Reasons.

Work provides me with a MacBook Pro, which I need to use for Important Corporate Reasons such as VPN access, and because it has a nicer video meeting experience. But really, I just shell into it and use it as a docker host and network proxy. I don't get along with the Apple keyboard, which is a broken mix of UK ISO and US ANSI and feels like typing on a child's toy. I appreciate the touchpad and screen, which are both impressive - but I much prefer using a mouse. So the Mac is relegated to being a third screen on the corner of my desk.

It's a mixed bag.

I have a laptop I use if I'm working at the kitchen table, which I occasionally do. It's running ChromeOS though I'll probably swap that out for Linux at some point. "Developer" mode in ChromeOS gives me a command line and shell access, so my workflow with browser/cli is pretty much the same.

Operating system

Everything I do for work is through Ubuntu under WSL on the Windows 11 desktop, SSH on the ChromeOS laptop or Barrier'd into the MacBook Pro.

I know this sounds impractical. There are weird issues, such as Apple's bug where you can't use an IPv4 address in /etc/hosts for external connections because the firewall blocks it but you can if use IPv6, even if you're not connecting via IPv6. Oh, there were fun times figuring that hack out.

But though decade-ago me would have never thought it, nowadays Windows Subsystem for Linux - specifically WSL2 - is actually pretty decent. You can even run X applications if you install an X server, and there are a bunch of those available.

I don't use X for anything though. If it's not in a browser, I don't tend to care about it, and there's no good reason to use a Linux browser via X compared to a native one.

I can't help feeling a little bit dirty for using Windows, but I cram that feeling way down inside and try to ignore it.

Desktop - Barrier

I don't use this too much any more, but Barrier is a fork of Synergy from before Synergy went closed-source. It bills itself as a kind-of-software-KVM, but what it boils down to is that I can move my mouse between different computers exactly the same as I can between the pair of monitors on my PC. If I move the mouse off the right side of my desktop monitor, it appears on my Macbook, and all mouse and keyboard input are seamlessly transferred there, just as if it was all one glorious whole.

Hashtag #gamechanger.

Terminal - WezTerm

I have only recently started using WezTerm. "Recently" in terminal-speak means in the last year or two, because things move slowly in this world. I don't tend to change unless there's a good reason.

So what was my good reason? What was wrong with Windows Terminal/iTerm 2? Well, WezTerm is cross-platform, and I can share the same configuration - in Lua! - between hosts. It doesn't make weird restrictions (like the way Suckless will never support tabs), and it's very customisable.

As far as customisation goes, it's mostly font, background image and colourscheme. I usually use Gruvbox¹ Dark for most things, though I override a couple of bits depending on the context.

But wait. Background image, you ask? On a terminal? Why? Well, it so happens I have a post about that:

Ben Sinclair

Nov 16 '20

My one and only terminal tip

#terminal #commandline #beginners

Comments 1

1 min read

Shell - zsh

I settled on zsh because it's the default on Macs. I know, I know: I don't really use the Mac much. But it's almost entirely compatible with bash for all the things I care about, and it's available on all the systems I use.

I try to make every script I write POSIX-compliant, and if I use something that's different between BSD and GNU (like sed -i) I'll wrap it in a condition.

It's fair to say that the choice of shell doesn't really matter much.

So before you say anything, no, I don't use oh-my-zsh. It doesn't offer me anything I care about that I can't do out-the-box with zsh (or bash for that matter).

Oh, and I almost never use aliases, either.

Editor - Neovim

I've been a Vi/Vim user for a long time, but I switched to neovim a year or two ago. I didn't originally see the point in switching, because all the features people went on about in neovim (and they did oh so go on about them! - async, LSPs, embedded terminals, etc.), well, they were either also available in recent versions of Vim or were stuff I really wasn't interested in. Stuff I didn't think belonged in an editor. Stuff that was trying to make Vim into Emacs.

Well, I still think those same grumpy thoughts, but I decided to try out a few of the neovim "distros" just to see what was out there and have ended up sticking with it. When loaded with plugins, it's certainly buggier than Vim, but it's still also a nice and comfortable editor for me - and it has more of a future, especially now Bram is gone (RIP).

Productivity

Tmux

Tmux is, as it's always introduced, a "terminal multiplexer", like GNU screen. It lets you close a terminal session and reopen it without losing your work, and it lets you run multiple terminal sessions at the same time.

The upshot of this is that I can leave my work running on the MacBook and connect from other machines via ssh and, by running tmux attach I am right back in the thick of things. I don't need to open a bunch of sessions each time, or remember what directory I was in or what services were running, it's all just there.

Tmuxinator

The tmuxinator project is a wrapper for tmux, which lets you manage multiple separate tmux sessions.

As an example, here's the list of projects I currently have running on my macbook:

❯ tmuxinator ls
tmuxinator projects:
bc           biascan      ec           fabric       gce          ifpma
leith        leith-2023   msgan        chickenland  ngs          ngs-new
ods          ren          renaissance  scramble     sf           sf-cms
sf-forms     sf-myplans   sgh          srn

What's in these projects? Well... they have a lot of specifics in them, but what they mostly boil down to is similar to this random project I picked as an example:

windows:
  - cms:
    - ddev start
  - storybook:
      panes:
        - watcher:
          - cd web/storybook
          - yarn watch
  - middleware:
    - workon mw8
  - logs:
      panes:
        - cms:
          - workon ngs
          - docker exec -it ngs-cms-php drush -y --uri=ngs-cms.shore.signal.sh -r /shore_site/web ws --tail --full --extended --count=1
        - new-cms:
          - workon ngs-cms-2022
          - docker exec -it ngs-cms-2022-app vendor/drush/drush/drush ws --extended
        - middleware:
          - workon mw8
          - docker exec -it ngs-middleware-app vendor/drush/drush/drush ws --extended
  - build-services:
      panes:
        - new-cms:
          - workon ngs-cms-2022
          - cd web/storybook
          - yarn storybook

In this example, I have tmux windows for a Drupal 7 project, its Drupal 10 rebuild, some shared middleware, the front-end build services, a storybook server and a metric ton of logging.

I can spin this all up with tmuxinator <project name>, and switch between its collection of windows with Ctrl-A <number> and to any number of completely different projects with a pop-up menu I get by hitting Ctrl-A S.

Ddev

Ddev is something that lets you create containerised (docker) environments for projects. It works with PHP and Node and (experimentally) Python.

The thing that manages the stack, basically.

My company used to use a home-grown docker-compose wrapper for this, back when there weren't many options. Ddev is really solid, though, and every time I have to work on a legacy or inherited project I'll convert it to Ddev as soon as I check it out. It doesn't usually take very long, and it means we have a consistent way of working. It makes it incredibly quick and easy to switch between PHP or Node versions, for instance.

Some of its main selling points for me are:

Uses Mutagen for the file system, so it's fast even on MacOS (where Docker mounts are notoriously slo-o-ow)
Easily lets you reconfigure PHP and Node versions
Knows about a bunch of third-party apps - for instance, if you have a database GUI app like TablePlus or DBeaver you can launch it from the command line
Supports community-maintained add-ons

and so on. It's good.

Image credits:
"Man Carrrying Groceries" - DodgertonSkillhause
"The Ridiculous Switcherama of the Concorde Cockpit" - Me.
"Statue" - lauramusikanski
"Scene from Terminator 2" - Sorry, I can't hear you I'm going through a tunnel

I pronounce it the way it's spelt. ↩

Forem: Ben Sinclair

Component-based CSS

Printable layouts and accessibility

Arguments against my whole post

Let's have a nice clear button that says "print"

What about "reader mode"?

So... what should we keep, then?

Navigation

Advertising

That big honkin' footer/sidebar/whatever

The newsletter signup nag/subscription begging modal/plea for social media "likes"

How to talk to people

Bookmarks vs. Favourites2 and the power of language to shape your experience

Followers vs. Friends and social pressure

Follow-back culture.

Likes and favourites and peer pressure

Gamification

Relevance to DEV

Stats, follower counts and social influence

Ultracrepidarianism

Maybe there's a little time left

(My first time) Running an Azure Function

Background picture

So why did I do this?

Let's do Azure!

$ign me up (tldr; issues: multiple, confidence: suspicious)

Installing prerequisites (tldr; issues: multiple, confidence: are we learning yet?)

Is it something I said?

Hello, world? (tldr; issues: oodles, confidence: I don't know the meaning of the word)

Hello Node my old friend, I've come to speak with you again.

200mph solution incoming...

Conclusion

I made my DEV articles into a blog using the Forem API

So why did I do this?

What did I want it to look like?

Technical details

Dark mode

Code blocks

Inline code with backticks

What problems did I find?

So am I pleased with the result?

So what's a good example post?

Is there anything left to do?

Final notes and engagement ploy

How to get into your CMS when you've locked the keys in your car.

Craft

Using the craft command-line client

Using the database

Drupal (up to version 7), Backdrop, etc.

Drupal (version 8+)

WordPress

Using the wp-cli command-line client

Using the database

(My first time) Installing Laravel

Let's learn Laravel.

Installing prerequisites (tldr; issues: zero, confidence: supreme)

Setting up a new Laravel project (tldr; issues: some, confidence: high)

Setting up a new Laravel project, take 2 (tldr; issues: some, confidence: wavering)

Setting up a new Laravel project, take 3 (tldr; issues: hngg, confidence: still wavering but bolstered by recent problem-solving success)

Conclusion

It's not just you. Some things are always a pain.

Fuzzy business: shadowing ssh

Shadowing commands

bUt YoU dOnT lIke aLiAsEs

The case against aliases

By your command

Ok, I'm sold, what are we going to add?

Important bits of the function

The full function

Hook me up

What sourcery is this?

(Hacker voice) I'm in

Did you come to development from a different career?

My work setup for PHP development

Hardware

Operating system

Desktop - Barrier

Terminal - WezTerm

My one and only terminal tip

Shell - zsh

Bookmarks vs. Favourites² and the power of language to shape your experience