Christofer Sandin — Texts https://christofersandin.com/texts Texts by Christofer Sandin — essays, mini-essays and terminal treats about working in the digital world. en Statamic Fri, 15 May 2026 22:00:00 +0000 The Invisible Art of Typography https://christofersandin.com/texts/the-invisible-art-of-typography https://christofersandin.com/texts/the-invisible-art-of-typography Fri, 15 May 2026 22:00:00 +0000 Christofer Sandin Article There are many books and articles on typography, but I think many still fail to take full advantage of all the features available to create great type on the web. To illustrate how much difference good typography makes, I’ve put together a little demo site where you can toggle the crafted…

There are many books and articles on typography, but I think many still fail to take full advantage of all the features available to create great type on the web.

To illustrate how much difference good typography makes, I’ve put together a little demo site where you can toggle the crafted typography on and off, along with the OpenType features that control how typefaces display specific things like lining numbers, small caps, and stylistic effects.

You can also simulate slow loading and ensure that the fallback fonts are as close as possible to the final experience to minimize cumulative layout shifts (CLS) and content jumping during load.

Take a look at christofersandin.com/typography – toggle things on and off and see if you can both see and feel the difference.

Please note, the article itself is quite informative and includes a few great resources. But it’s not written by me — rather, it’s generated from the typography articles I’ve collected over many years, since the main point of this exercise was to display great typography, not the article content itself.

Resources

Craft and OpenType features

Font loading and fallbacks

]]> Terminal: npm https://christofersandin.com/texts/npm https://christofersandin.com/texts/npm Mon, 11 May 2026 22:00:00 +0000 Christofer Sandin Terminal Treats Working in the terminal with web development, you’ll likely be running into Node and the Node Package Manager (npm) sooner or later. It's a standardized way to install and use JavaScript-based software — here's a summary of some useful commands. Packages can be installed globally or per project.…

Working in the terminal with web development, you’ll likely be running into Node and the Node Package Manager (npm) sooner or later. It’s a standardized way to install and use JavaScript-based software — here’s a summary of some useful commands.

Packages can be installed globally or per project.

Global packages

  • List all globally installed packages
    npm list -g --depth=0

  • You can check for a particular module installed globally. This is particularly useful when checking what version of a module you are using globally (remove the -g flag if checking a local module):
    npm list -g --depth=0 | grep <module_name>

Packages

  • If you’d like to see all available (remote) versions for a particular module, then do:
    npm view <module_name> versions.
    Note that versions is in the plural. This will give you a complete listing of versions to choose from.

  • For the latest remote version:
    npm view <module_name> version  
    Note that the version is singular.

  • To find out which packages need to be updated, you can use
    npm outdated -g --depth=0

  • To update global packages, you can use
    npm install -g <package>

  • To update all global packages, you can use:
    npm update -g

Another way would be to use npm-check-updates (or ncu for short).

References

]]> Embrace a Little Boredom https://christofersandin.com/texts/embrace-a-little-boredom https://christofersandin.com/texts/embrace-a-little-boredom Mon, 11 May 2026 22:00:00 +0000 Christofer Sandin Article When people in Sweden wait for the bus or tram, I'd guess 95% of them pick up their phone and start looking at it if there's more than 30 seconds of waiting time. I don't think that is healthy. This has really caught my attention over the past few years. It may be because I can't look at my phone…

When people in Sweden wait for the bus or tram, I’d guess 95% of them pick up their phone and start looking at it if there’s more than 30 seconds of waiting time. I don’t think that is healthy.

This has really caught my attention over the past few years. It may be because I can’t look at my phone or read while traveling by bus or train due to motion sickness, or it may be something else, but it’s almost comical looking at a bus stop in Sweden today. Twenty-three grown-ups are waiting, and everybody is staring down at a small screen, not talking to each other, not aware of what’s happening around them. Twenty-three little isolated islands are being "socially connected" without any social connection.

These constant stimuli and dopamine injections have sent us down a very slippery slope, and I’m not sure we’ll get to the bottom without falling.

How we got here

I remember watching videos from Asia 10-15 years ago of people riding the subway, where everybody was looking at their phones. We laughed and said, "What a weird way to spend your day. It’s unsociable and lonely despite being among hundreds of others in a small space. How could anybody want to travel like that for hours in a commute back and forth every day?"

Now, 15 years later, we’re there—probably even worse.

The value of boredom

I’ve recently read several books and listened to talks about the value of embracing boredom and resisting the urge for that quick fix of information or dopamine hit whenever we have to wait — in line, for the bus, for our food to be prepared.

But is there value in actually being bored from time to time, or is it just a matter of maximizing your time every day and trying to squeeze in as much information or entertainment as possible?

I’m uneasy about how we use our phones, especially the countless hours people spend on social media, browsing 5-10 second clips one after the other—constant stimulus for our brains.

I have two kids, and I try to keep them away from that kind of exposure as much as I can. But I’m actually worried that in a few years a significant portion of the country’s population will struggle to focus for more than 15 seconds.

Ignoring the research

Despite the overwhelming evidence from schools, classroom situations, research, and literature that we are heading in the wrong direction, we do little to address the issue.

My wife is a teacher, and she sees a dramatic difference today compared with 15 years ago.

This fixation on constant updates and stimuli in our nervous system makes us more anxious, unhappy, and unable to concentrate. It also introduces a strange fear of any boredom that lasts more than a few seconds. How did we end up here, and why aren’t we doing anything about it?

Let’s get back to giving the brain a little cognitive pause every now and then. I’ve also heard it suggested that it is in these pauses that we tend to process and sort information. So, let’s embrace a little boredom now and again. Just like you need to pause between runs when doing interval training — you need that part to make the runs better and to improve the result of the session.

A major problem

While we’re on the subject of running: this constant stimulus, combined with a severe lack of physical activity, results in a major problem. Strangely, we don’t prioritize this more, and I’m afraid we will see severe consequences in a few years.

When I see mothers and fathers sticking screens in front of their one-year-olds instead of talking to them or interacting with them — so they can be on their own phones while walking in the park — I’m appalled, and I lose a little bit of faith in humanity.

We are supposed to be educated and enlightened and should be able to do better! So, the next time you’re waiting for the bus, try keeping your hands in your pockets for two minutes and embrace the boredom.

Resources

]]> Connecting Figma, Fractal and Craft CMS with Claude Code https://christofersandin.com/texts/connecting-figma-fractal-and-craft-cms-with-claude-code https://christofersandin.com/texts/connecting-figma-fractal-and-craft-cms-with-claude-code Tue, 17 Feb 2026 23:00:00 +0000 Christofer Sandin Work Yesterday, an updated version of the Figma MCP server for Claude Code was released. The big news was that you could now go from code to Figma, as well as the other way around. While watching the Winter Olympics on TV, I set up a little project to try this out. I was curious if this was just another…

Yesterday, an updated version of the Figma MCP server for Claude Code was released. The big news was that you could now go from code to Figma, as well as the other way around.

While watching the Winter Olympics on TV, I set up a little project to try this out. I was curious if this was just another toy, or actually something useful for professional work. Going back and forth between Figma and code has been a real pain — until now?

To put this to the test I came up with the following idea in the first power break:

  1. Use Claude Code to fetch a website.
  2. When captured, push the designs into a Figma document (both desktop and mobile versions of each page).
  3. Use Claude Code to analyze the Figma document and designs and create the different content blocks in Fractal with HTML, CSS, and JavaScript according to my specifications.
  4. Install Craft CMS.
  5. Let Claude Code implement the static blocks in Fractal into dynamic versions in Craft and add the necessary fields and settings.
  6. Then have Claude Code create all the relevant pages and build the content with the created blocks.

For the test I used:

And the following three MCP servers:

I’m on the Claude Code Max plan running Opus 4.6 when writing this and the Figma document, consisting of about 20 page designs, took about two hours to fetch. The blocks and elements took about another 45 minutes. And after getting the Craft MCP server to play nice, the complete build took another hour or so.

The results are not perfect, but still fantastic. The build quality is absolutely good enough that letting the AI produce a starting point is worth a lot.

During the process I did have to go in and "project manage" Claude to do the right things, so it was not a case of just telling the agent to "build this site" right away. Reading the proposed plans, writing up and specifying the setup took another hour or two but, all in all, the process was way better than I had imagined.

To be fair, I had extensive instructions on how to build both the blocks and the elements in Fractal as well as thorough instructions on how I wanted the CSS to be written. This way I can guide the agent to write this the same way that I would have done it on my own - just way faster.

Since we’re not using React or Tailwind CSS at Republic, it was very important that the code generated from Figma was written according to our specs and not in the standard "Tailwind and React way", which AI seems to have been trained on for the most part.

I was also very clear about the fact that I wanted Claude Code to use the Craft MCP server for creating things instead of creating YAML files. The YAML files are the files representing the database schema in Craft but should be generated by the system, not by an error-prone LLM. Generating YAML files directly might be another way to go, but a single error in one of them makes the whole process choke, so I liked the approach where Craft generates those files after the MCP commands are executed instead.

The best thing is that I had my colleague go into Figma, tweak the design there, and then tell Claude to update the current block in Fractal according to the new design in Figma. That worked like a charm and it was rather nice to see his actual design and the decisions he made show up in code without me having to implement it.

This is the first time we have an actual setup that lets us go back and forth between code and Figma, without major hassle. For a first try, I think this went really well.

Getting a lot of the grunt work done by AI frees up valuable time. This means that we can focus more time on the things we humans are best equipped to do: solving the clients’ problems and doing the creative work needed for a really good user experience. The fun and interesting things.

Resources

]]> Using AI Based on Your Curated Sources Is an Excellent Use of Technology https://christofersandin.com/texts/using-ai-based-on-your-curated-sources https://christofersandin.com/texts/using-ai-based-on-your-curated-sources Sat, 09 Aug 2025 00:00:00 +0000 Christofer Sandin Article There are so many mentions of AI in technology and software today that you can hardly do anything without having to opt out or opt in to some AI feature in every application you open, no matter what the purpose of the application is. I'm one of the people who have a hard time with AI being slapped…

There are so many mentions of AI in technology and software today that you can hardly do anything without having to opt out or opt in to some AI feature in every application you open, no matter what the purpose of the application is.

I’m one of the people who have a hard time with AI being slapped onto everything, as if that automatically made the application better than before. In certain situations, AI can be of excellent service, especially in doing mundane tasks that are easily described, but there are a lot of places where AI does not add anything substantial at all, except marketing jargon.

At the same time, the Large Language Models (LLMs) are continuously improving, and can be a great help in processing information and helping us organize it.

During the summer, I spent some time trying out AI-powered services to educate myself and explore cutting-edge technology. But using AI for research and to help you build things is not as easy as you might think. If you want to develop good-quality solutions, the hallucination effects (when AI presents false information confidently) of AI agents can be devastating to your research, and the "good enough" outdated technical answers can also bite you if you’re not careful and good at assessing the responses.

It’s a thin rope to walk.

Since AI today more or less makes up things and presents them as facts without being the least bit embarrassed, we need to start checking the source material and not just assume that AI always knows. Going down this route made me take a look at NotebookLM from Google since it is one of the services that give you references to the data it confidently presents.

NotebookLM

NotebookLM is a service where you can add multiple sources in the form of PDFs, Markdown, and text. But also links and YouTube videos, as well as Google Docs and Sheets.

When done adding sources, you let Google’s Gemini 2.5 AI process the material, and then you can chat and ask questions, create an audio podcast where two AI hosts discuss your preferred topic, create a presentation, and get access to a mind-map-like outline of the subject, as well as FAQs and Study questions.

You can also get the results in 50 different languages, so even a small language like Swedish is supported. I understand that it’s easier than before thanks to AI, but it’s still nice to see Google include minor languages like that.

The option to interrupt and ask questions while listening to the audio playback is an elegant feature. Like calling into a discussion on the radio and having the hosts target the discussion around your question.

Since it’s a "free" Google product, you can’t be sure it will be around in a year or two, but trying it out right now is fun. Give it a bunch of source material that you know is good and that you like to work with, sit back, and then enjoy the audio discussion based on this.

An Obsidian MCP server

Another thing that piqued my interest was the ability to install local MCP servers. The Model Context Protocol, or MCP for short, is a way to connect AI agents to sources other than the LLM they already use.

This made it possible to hook up an AI application like Claude Desktop to Obsidian. Obsidian is the app where I do and store most of my writing today, and the content is saved in Markdown format.

With the MCP server in place, I was able to add my texts written about various subjects, book recommendations, and research to Claude Desktop and have that material accessible in the AI-based chat context.

That made it possible to ask questions like:

  • "Based on all the books listed in the ‘Books’ folder, could you recommend five other titles that you think I’d like to read?"
  • "Look up the ISBNs and the official websites (if they exist) and add them as properties to the books in Obsidian."
  • "Create a reading list by finding all book mentions across my notes and organizing them by topic."

GitHub Copilot in Zed and Neovim

At work, we use PhpStorm from JetBrains. Even though I’m not writing code every day anymore due to other responsibilities, I still do from time to time. Therefore, I’m not as heavily invested in the IDEs and editors as ten years ago, but I think the AI Assistant in PhpStorm is rather good, and I’ve used it in a few situations. (They also have a new, updated AI coding agent called Junie, which I haven’t tried yet.)

But I wanted to explore using AI in an editor like Neovim, where I had to dig a little deeper before getting it to work. I installed the Neovim copilot.lua and Copilot Chat plugins and gave them a try. I have to admit that while it worked well enough, the experience was not up to par with the one in PhpStorm (probably because of my somewhat moderate Neovim skills), but that made me try the same thing in Zed.

And I’ve got to say, Zed might be a sweet spot when it comes to being able to use the Vim motions that I’m starting to be accustomed to when editing code, as well as giving me a high-speed editor and a GUI for the things where this makes sense.

(Vim motions refer to keyboard shortcuts that let you move around and edit text efficiently without reaching for the mouse.)

So, what would you have AI help you out with when you have it in the editor?

If you exclude the option to have the AI generate actual code for you from scratch, which, in my experience, seldom ends up exactly the way you want it, you can use the AI as a colleague.

  • Ask Copilot to explain complex code patterns you encounter.
  • Request refactoring suggestions for improving code maintainability.
  • Ask for performance optimization suggestions and reviews.

And a final one I haven’t used yet but see potential in: having it write commit messages that accurately describe changes.

The main thing is to make sure that the AI agent has access to the whole project and your code base so that it can provide appropriate advice. Context, again, is significant for making the AI helpful rather than adding confusion and complexity.

Resources

]]> Terminal: Lazygit https://christofersandin.com/texts/terminal-lazygit https://christofersandin.com/texts/terminal-lazygit Fri, 25 Jul 2025 00:00:00 +0000 Christofer Sandin Terminal Treats Lazygit is a Git TUI for the text-based world and a solid alternative to the Git Tower application for macOS I've been using for years. It takes a little while to get around in Lazygit, but all in all, the shortcuts make sense after some time. The trickiest thing to get used to, in my opinion, is…

Lazygit is a Git TUI for the text-based world and a solid alternative to the Git Tower application for macOS I’ve been using for years.

It takes a little while to get around in Lazygit, but all in all, the shortcuts make sense after some time. The trickiest thing to get used to, in my opinion, is that you move left and right to go from section to section, but visually, they are placed underneath each other.

You use up and down to navigate each section, so in that regard, it makes sense to use left and right to move between them, but it feels weird pressing right and seeing the section under the current section light up.

Otherwise, you use

  • Space to stage and unstage files,
  • c to commit,
  • d to discard,
  • s to stash, etc.,

so many of the other shortcuts are pretty intuitive.

P for push and p for pull also take some time to commit to muscle memory.

You always have a few of the most common shortcuts for the current situation in the bottom row on the screen, and you can always press the ? to get a list of all the commands.

Combined with Delta and a side-by-side config, diffs look good too.

Resources

]]> The Non-Algorithmic Internet https://christofersandin.com/texts/the-non-algorithmic-internet https://christofersandin.com/texts/the-non-algorithmic-internet Sun, 08 Jun 2025 00:00:00 +0000 Christofer Sandin Personal I listened to Cal Newport's podcast the other day. His producer, Jessie, and he discussed "the algorithm," which encourages us to use sites whose sole purpose is to keep us spending as much time as possible on them. The biggest problem is algorithm-based social media. Its purpose is to…

I listened to Cal Newport’s podcast the other day. His producer, Jessie, and he discussed "the algorithm," which encourages us to use sites whose sole purpose is to keep us spending as much time as possible on them.

The biggest problem is algorithm-based social media. Its purpose is to narrow our chain of thought, show us content from people who say what we like to hear, and indoctrinate us more and more, making us waste time looking at ads.

Nothing more, nothing less.

What to do? The answer is to spend time curating your resources, reading what interesting people have to say, listening to good music, listening to podcasts that interest you, and interacting with the personal web.

*

Along the same lines, Dan Sinker argues that we should not lean into mediocre AI-generated content in his well-researched and thoughtful article "The Who Cares Era".

In a moment where machines churn out mediocrity, make something yourself. Make it imperfect. Make it rough. Just make it.

That resonates with me. If the art of creating and thinking is reduced to writing a prompt that asks an AI to summarize the most common thoughts about a subject, we will struggle to invent new ideas and think creative thoughts.

AI can help us, but thinking and originality are not criteria we can put on these large language models. They are a large set of data — texts and ideas other people have already thought of — and they are unable to think on their own.

Dan’s conclusion: as "the culture of the Who Cares Era grinds towards the lowest common denominator," we should "support those that are making real things." And he continues, "Listen to something with your full attention. Watch something with your phone in the other room. Read an actual paper magazine or a book."

*

For me, that was purchasing and reading the book Grid Systems in Graphic Design, written by Josef Müller-Brockmann, last week. This book made me rethink the way I create grids in CSS, which I can use in my profession, and induced creativity that I wouldn’t have had otherwise.

I understand that a book about grid systems from 1981 may not be something for everyone, but find your own subject and delve into it.

The Internet can be a lovely place, made by humans for other humans.

Resources

]]> Writing a Mini-Essay https://christofersandin.com/texts/writing-a-mini-essay https://christofersandin.com/texts/writing-a-mini-essay Sun, 18 May 2025 00:00:00 +0000 Christofer Sandin Mini-essay I like to write. Research, writing, and editing help me understand a new subject. In my line of work — technology — you need to keep learning. For the last month, I have been using mini-essays, short essays about a single topic: one idea, one page. Let's see how they work in practice. In short,…

I like to write. Research, writing, and editing help me understand a new subject. In my line of work — technology — you need to keep learning. For the last month, I have been using mini-essays, short essays about a single topic: one idea, one page. Let’s see how they work in practice.

In short, when you find something interesting, you do the research and then write a mini-essay about the subject. Aim for 100-300 words.

A mini-essay — a format that has gained popularity lately — is one way to learn more about a specific subject. The format reminds me of the essay structure taught to us in school, and should follow the same three-part shape:

  • Intro
  • Body
  • Conclusion

The intro should be clear and tell the reader about the subject. But you must also be interesting and make the reader want to continue. It could be a bold statement, three sentences that inspire emotion, or a question.

Using the mini-essay format when exploring a subject has benefits.

Writing about something makes you understand it. Writing down your thoughts and ideas demands a greater understanding of the subject than talking about it. This is referred to as the Generation effect.

There is also the Feynman technique – teaching something to learn it – a tried and tested method for understanding things. It’s named after the Nobel Prize-winning physicist Richard Feynman, and the main idea is that if you can explain it to others, you usually have a good understanding of the subject.

A mini-essay will also force you to be precise since you only have 100-300 words to play with.

I find the mini-essay format inspiring. I see two significant benefits: I’m forced to keep it short, and since it’s not an in-depth article, the barrier to publishing is lower.

References

]]> Learn New Things and Make Them Stick https://christofersandin.com/texts/learn-new-things-and-make-them-stick https://christofersandin.com/texts/learn-new-things-and-make-them-stick Sun, 18 May 2025 00:00:00 +0000 Christofer Sandin Mini-essay In my line of work, you need to be able to learn new things. But, how should you go about learning? I tend to write, and that works well for me, but according to Huberman Lab, testing yourself right after reading the material the first time makes an impact. Why? Because doing so offsets the brain's…

In my line of work, you need to be able to learn new things. But, how should you go about learning? I tend to write, and that works well for me, but according to Huberman Lab, testing yourself right after reading the material the first time makes an impact.

Why? Because doing so offsets the brain’s barrier to forgetting new information.

The key is doing this actively, compared to reading and listening. Even if you don’t get the test right, looking at the correct answer after you come up with an answer yourself helps the learning process.

This might be why writing a mini-essay, like this one, is a way of studying that works well for me. While writing it, I’m constantly checking my interpretation and validating it with the source material, making it a self-testing process.

According to research in this field, taking a self-test after reading new material helps you remember 50% more than if you don’t.

How to test yourself, then? Open-ended short-answer questions give the best results according to studies on the subject.

To help you even further, research points out the following essential prerequisites to set you up for learning:

  • good (and enough) sleep
  • mindfulness (5-10 min/day makes a big difference)
  • focus and alertness
  • caffeine (minor gains)

The studies also show that you get the best results by spending time studying in isolation. (Teaching others is a great way to deepen your knowledge after learning.)

Changes in the neuroplasticity in the brain make us learn and forget, and this process benefits from the advice above, according to Huberman. For me, I’ll continue to write, but adding small practical examples along the way or quizzing myself while writing might be worth the effort!

Resources

]]> Email — How Hard Can It Be? https://christofersandin.com/texts/email-how-hard-can-it-be https://christofersandin.com/texts/email-how-hard-can-it-be Sun, 18 May 2025 00:00:00 +0000 Christofer Sandin Article The first email was sent in 1971, and things haven't changed much since. So, how hard can it be? It's pretty hard. It's too easy to spoof and send fake emails, and many people have been tricked in one way or another. What can we do to stop people from using our email addresses for spam, spoofs, and…

The first email was sent in 1971, and things haven’t changed much since. So, how hard can it be?

It’s pretty hard. It’s too easy to spoof and send fake emails, and many people have been tricked in one way or another. What can we do to stop people from using our email addresses for spam, spoofs, and the phishing emails that are ever so popular?

Well, a few things. So let’s get started.

DNS

To fix email, or at least a small part of it, we need to dive deep into the DNS (short for the Domain Name System) and add a few records.

All devices on the Internet have an IP address, which looks something like 142.250.74.142. But that is hard for humans to remember, so we need a way to make it more memorable, and that’s where DNS comes in. A DNS server translates between a human-readable address and the IP address used by machines. As I write this, the address above is the translated version of google.com.

To send reliable emails, you need the following records in your DNS:

  • Sender Policy Framework (SPF)
  • DomainKeys Identified Mail (DKIM)
  • Domain-based Message Authentication, Reporting & Conformance (DMARC)

Let’s look at them one by one and how they are related.

SPF

This is a TXT record in the DNS stating which servers are allowed to send emails for the domain name. The receiver can then verify that the domain in the email’s Return-Path is included in the record.

The TXT record looks like this:

v=spf1 a mx include:mydomain.com ~all

Note that you can only have one SPF record in the DNS, so include all domains that send emails on your behalf. These are often services like MailChimp, Postmark, or Klaviyo, and you might also have a CMS that sends emails, so make sure to include those.

If you need to have multiple domains, the record will look like this:

v=spf1 a mx include:mydomain.com include:spf.mtasv.net ~all

Above are our mydomain.com and Postmark’s spf.mtasv.net added to the SPF record.

DKIM

The DKIM authentication method uses a classic private and public key pair setup. A public DKIM key is (also) a TXT record and looks something like this:

v=DKIM1;t=s;p=MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQDBzXkunA  
132Pf3SwHF7UKTODjFW8JKXUFWCHcNLvRHPCFDzJDPuAuoZq0XAIoOStu+Qq+/  
ggm1zDYbgsaIkOmkBWV9m/NPQ3BbXNEnCqjsyVxWlrQs0R01W4ihsHM8BkbE7  
dGRot1DdDM1HBMxrMDEOPuEZaNjtpgcJVRqswz7YwIDAQAB

 The Email Service Provider (ESP) uses the private key to cryptographically sign the sent email with a unique hash based on the private key and the message content. This hash is then placed in the message header.
 
 The public key, saved in the DNS, can be used by the receiver to verify that the message body and attachments were not altered in transit and are sent from a valid domain.

DMARC

DMARC ensures that you pass either SPF or DKIM and that your DNS records are set up correctly. If not, the email will not be delivered. That is a little scary, but you can set up DMARC without quarantining or rejecting emails initially.

Why would you do this, then? I’ll tell you. The ESPs that support DMARC will send a DMARC report to the rua email address stated in the record.

This report is in XML format, but many (free) tools will help you parse and summarize it. If you’d like to get started, I recommend Postmark’s free DMARC reporting tool. Then, monitor it for a while, and when you’re happy with the results, move to the stricter quarantine or reject policy.

Ok, that sounds good, then. But how do we implement DMARC?

Yes, you’re right. We will implement it in the DNS with a TXT record. Who would have guessed…

And that one will look something like this:

v=DMARC1; p=none; sp=none; pct=100; rua=mailto:example@yourdomain.com;

The domain owner publishes a DMARC policy in their DNS with recommendations on how they would like receivers to process their mail based on SPF and DKIM authentication results.

This policy applies to all mail using that domain in the From header of the email. For DMARC to pass, either SPF or DKIM must pass and align with the DMARC domain.

If you send a lot of emails, more than 5000 emails a day, you need to read up on the "Yahoo and Google DMARC requirement" that came into force on February 1, 2024. To continue to have reliable delivery, the messages must pass DMARC Alignment, or they will not be delivered.

One more thing — BIMI

Another nice-to-have is adding a Brand Indicators for Message Identification (BIMI) TXT record to visualize your logo next to the emails you send. To add BIMI, you need to have:

  • SPF and/or DKIM authentication alignment
  • DMARC enforcement (either p=quarantine or p=reject)

So, after getting your DMARC set up and verifying that you don’t send emails from sources other than those you have included in your policy, you can force the emails to be quarantined or rejected.

This is a prerequisite for a BIMI implementation, so ensure your DMARC policy is set to enforcement mode (p=quarantine or p=reject) before implementing BIMI.

You can also verify your logo with a Verified Mark Certificate (VMC), even if it’s not a hard requirement.

When ready, you can, for instance, use the BIMI Record Generator by EasyDMARC to put everything in place.

References

Cloudflare has a set of good articles explaining DNS and the different records used to implement SPF, DKIM, and DMARC.

As do Postmark

Articles

Other related resources

Tools

Standards

]]> Terminal: Exploring Vim after 20 Years of Writing Code https://christofersandin.com/texts/terminal-exploring-vim-after-20-years-of-writing-code https://christofersandin.com/texts/terminal-exploring-vim-after-20-years-of-writing-code Sun, 27 Apr 2025 00:00:00 +0000 Christofer Sandin Terminal Treats As a middle-aged CEO and developer, I've found myself increasingly occupied with running the company and maintaining a general project overview lately. I needed something new to explore. Therefore, after more than 20 years of coding in regular text editors and IDEs, I decided to explore Vim. Why?…

As a middle-aged CEO and developer, I’ve found myself increasingly occupied with running the company and maintaining a general project overview lately. I needed something new to explore. Therefore, after more than 20 years of coding in regular text editors and IDEs, I decided to explore Vim.

Why? There was no particular reason; I was just a little curious and needed a challenge. I did like the idea that you spend more time editing than writing, so there should be a specific mode for that.

This text is not a general introduction to Vim — there are many available on the Internet — but I have written down a few notes from that endeavor.

The whole thing did not start with Vim. At first, I took a look at Helix. Helix is an editor that functions similarly to Vim and Neovim. It’s fast, written in Rust, and requires almost zero configuration. I liked it a lot and spent some time in it. It took a bit of getting used to working in different modes, but I could see the appeal.

Helix is still a very niche product, and after reading and reviewing tutorials, I switched to Neovim mainly because of the extensive amount of material and plugins available. Neovim is an extension of Vim, so learning this provides a solid foundation for Vim motions as well. I also liked learning Lua, the programming language used to configure Neovim.

Many people suggest starting nvim, pressing the <ESC> key, typing :Tutor, and then <ENTER> if you need help with the basics.

Another great place to start is to go all-in on the kickstart.nvim project. You can also read the project’s config file, which is full of comments and ideas, directly on GitHub and pick and choose the things you like.

Both approaches are good options and might suit you, but I needed to see what was doable, so I started watching some "set up Neovim from scratch" videos on YouTube to get into it.

Have I switched to Neovim exclusively? No, I have not. Have I gained insights into what’s out there? Yes, I have. Currently, I’m in the middle, but I can see myself using an editor with Vim key bindings soon.

Key bindings

The most interesting aspect of Vim and Vim-based editors is learning how to work in different modes.

Normal mode

You start in normal mode, which is your base, and all interactions begin here. Move around files and select what to edit.

Navigation

  • Left, down, up, right h j k l

  • Start of line 0 / End of line $

  • f @- move cursor to next occurrence of @, i.e., f _ move to next _

  • t @ - move cursor to character before next @.

  • Next word w / WORD W

  • Previous word b / WORD B

  • End of next word e / WORD E

  • Previous blank line { / Next blank line }

  • Previous sentence ( / Next sentence )

  • Move cursor to first line of document gg

  • Move cursor to last line of document G

  • Move cursor to last insert point gi

  • Move cursor to line # - #G

  • Go # lines down - #j / Go # lines up - #k

  • Move up a screen Ctrl u

  • Move down a screen Ctrl d

  • Substitute line (delete line, enter insert mode) S

Editing text

Edit

  • a - add
  • i - insert

  • A - start editing at the end of the line

  • I - start editing at the beginning of the line

  • D - delete to end of line

  • C - change text to end of line

  • . - repeat the last change

  • ciw - Change Inner Word

Folding code

  • zR - Open all
  • zM - Collapse all
  • zo - Open
  • zO - Open all from the current location
  • zc - Close
  • zC - Close all from the current location
  • za - Toggle current fold
  • zi - Toggle code folding

Quit vim

  • ZZ

Auto-complete

  • Ctrl P/N

Selection

  • Select current word - *

Spelling

  • Go to previous and next spelling mistake - [s and ]s
  • Spell check current word - z=
  • Add current word to spell check - zg
  • Remove current word from spell checker - zG

Files and buffers

An open file lives in a buffer. You can display multiple buffers at the same time, and you can have the same file open in many buffers.

Buffers

  • :ls - List buffers
  • :bn - Next buffer
  • :bp - Previous buffer
  • :bw - Close buffer
  • :bd# - Close buffer #

Splits

  • :sp - split horizontally
  • :vs - split vertically
  • ZQ - quit without saving (same as :q!)
  • Go between split windows with Ctrl w and the Vim keys (hor l for left and right, j and k for up and down)

Macros

Record interactions and reuse them with macros.

Recordings

  1. Record: q a (keystrokes) q
  2. Play: @ a
  3. Play multiple (15) times: 15@a

Visual mode

Working in visual mode allows you to select text and view a visual representation of what you have selected.

Select a paragraph

  • Vap - select around the current paragraph
  • Vip - select inside the current paragraph

Select block

  • v% - select from the current position to the next matching character

Select until next instance

  • v/foo - select from your current position to the next instance of foo, and n expands to the next instance.

Select Word

  • viw and viW

Copy a word and replace another word

  • To copy a word under the cursor, press bvey
  • To replace the word under the cursor, press bvep

Insert mode

  • Ctrl o - temporarily enter Normal mode.
  • Ctrl w - delete the word to the left of the cursor.
  • Ctrl u - delete from the cursor to the beginning of the line.

Third-party plugins

Before committing to third-party plugins and extensions, it is wise to explore the basic commands in your applications. It is also always a good idea to keep dependencies to a minimum.

That said, there are a few plugins that significantly enhance the user experience in Neovim, and if they have a good reputation and solid support, I’m not opposed to using them.

The foundation

From what I gathered during my research, it appears that lazy.nvim is a reliable way to manage plugins.

Here is a list of the ones that function as a foundation for my setup:

File pickers

telescope.nvim

Telescope is an extendable fuzzy finder over lists for Neovim. It is "built on the latest awesome features from Neovim core," which I guess must be good. It is centered around modularity, allowing for easy customization.

vim.keymap.set("n", "<leader><leader>", builtin.oldfiles, {})
vim.keymap.set("n", "<leader>ff", builtin.find_files, {})
vim.keymap.set("n", "<leader>fg", builtin.live_grep, {})
vim.keymap.set("n", "<leader>fb", builtin.buffers, {})
vim.keymap.set("n", "<leader>fr", builtin.registers, {})

File explorers

oil.nvim

If you like to step away from the file tree view on the left-hand side of the code and use a more native-feeling solution, you want to try oil.nvim.

Hitting the - key displays a list of the current directory, and you can use your Vim skills to add, delete, and rename files.

Using g will display other options if you have Which Key installed.

Currently, this is my preferred method for quickly and easily performing file-related tasks within Neovim.

Code formatting and auto-complete

  • Formatting code (conform.nvim)
  • Linting code (nvim-lint)
  • Syntax highlighting and code completion with LSPs

nvim-surround

Surround text with a character or a tag.

  • add with ys{motion}{char}
  • delete with ds{char}
  • change with cs{target}{replacement}

ysiw) – add "(" and ")" around word
ys$t - adds a tag around the text from the cursor position to the end of the line

ds" - delete " around text
dst - delete tag around text

cs'" - change quotes from ' to "

// Comment.nvim

Comment your code in style.

  • NORMAL mode

    • gcc - Toggles the current line using a line-wise comment
    • gbc - Toggles the current line using a block-wise comment

  • VISUAL mode

    • gc - Toggles the region using a line-wise comment
    • gb - Toggles the region using a block-wise comment

LSP

nvim-lspconfig

Nvim supports the Language Server Protocol (LSP), which means it acts as a client to LSP servers. LSP is a standard that lets different editors understand how programming languages work; it originated at Microsoft. This is the official plugin used to make Neovim use LSPs.

LSP facilitates features like go-to-definition, find references, hover, completion, rename, format, refactor, etc., using semantic whole-project analysis

trouble.nvim

This is a way to look at the diagnostics that the LSP server provides, both for individual files and for the whole project.

A pretty list for showing diagnostics, references, telescope results, quickfix and location lists to help you solve all the trouble your code is causing.

trouble.nvim on GitHub

Putting a smile on your face

These are the others I use at the moment:

Links

References and videos

Official links to repo and plugins

Themes

Guides

  • Learn Vim (the Smart Way) – a free book bridging the gap between :Tutor and :help
  • Intermediate Vim by Dennis Hotson
  • LazyVim – a popular preconfigured Neovim distribution, if you’d rather not build the stack yourself
  • Dotfyle – discover Neovim plugins and browse real-world configs
]]> Terminal: The Konami Code for Your Terminal https://christofersandin.com/texts/terminal-the-konami-code-for-your-terminal https://christofersandin.com/texts/terminal-the-konami-code-for-your-terminal Sun, 27 Apr 2025 00:00:00 +0000 Christofer Sandin Terminal Treats To make the terminal on macOS a bit nicer, I thought we could use the famous Konami Code to give our friend some extra functions that improve everyday life. These are entirely subjective opinions from someone who uses the terminal more often now than before. Many things are much faster to do there…

To make the terminal on macOS a bit nicer, I thought we could use the famous Konami Code to give our friend some extra functions that improve everyday life.

These are entirely subjective opinions from someone who uses the terminal more often now than before. Many things are much faster to do there compared to doing the same thing in other programs and interfaces, so once you get used to it, it’s hard to stop.

It’s also time for me to change computers, and it would be nice to have a guide to follow, since I always start every new computer with a completely fresh installation. This approach provides a fresh start and is a strategy that has worked well for me for nearly twenty years.

However, in addition to mentally pressing the classic code ⬆️ ⬆️ ⬇️ ⬇️ ⬅️ ➡️ ⬅️ ➡️ 🅱️ 🅰️, you need to take a couple more steps.

Stay tuned!

⬆️ ⬆️ – Install the basics

A few things are essential, and if you’re going to work with some form of development on a Mac, these are some of the first things you need to install to have a functioning environment.

  • Xcode
  • Node.js
  • Homebrew
  • iTerm2 (or other terminal application)

Install the CLI Tools for Xcode

You can certainly install the full Xcode via the App Store, but isn’t it convenient to get the Command Line Tools through the terminal instead?

xcode-select --install

Install Node.js and npm

Start by following the instructions at https://nodejs.org/en/.

Then, one more thing makes everyday life smoother: install all global packages in your home directory instead of the system directory (the default). We do this to avoid permission issues and having to type sudo before all npm installations for all eternity…

mkdir ~/.npm-global 
npm config set prefix '~/.npm-global'

We also need to add the path in .zshrc so that we can use the packages from anywhere:

# Node.js global folder in ~/.npm-global
export PATH=~/.npm-global/bin:$PATH

Homebrew

Homebrew is a package manager for macOS. Let’s install it and then use that to install the other packages.

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Install a new terminal emulator

I use iTerm2 instead of the built-in terminal. Several little things are quite a lot nicer, and I’ve gotten used to them.

There are other options today, and I’m currently testing both Ghostty and WezTerm, but "if it ain’t broke, don’t fix it" works for me in this case.

brew install --cask iterm2

To make adjustments, you modify the file .zshrc:

vim ~/.zshrc

⬇️ ⬇️ – Install "Oh My Zsh"

Nowadays, macOS comes with Zsh as the shell instead of Bash.

I have been using Zsh for many years, so this is something I appreciate, but to make Zsh even better, an easy win is to install Oh My Zsh:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Plugins

I use a few external plugins that need to be installed and some that come included but need to be activated in .zshrc.

  • zsh-autosuggestions
  • k

With the two installed above, my .zshrc looks like this:

plugins=(git npm extract k)
source $ZSH/oh-my-zsh.sh
source ~/.zsh/zsh-autosuggestions/zsh-autosuggestions.zsh

Themes

There are also a number of different themes, and right now, I’m using af-magic, which I’m pretty happy with.

⬅️ – Fonts with superpowers

To get a bit more out of the terminal, you can install some Nerd Fonts. Here, we install it together with the Hack typeface.

brew tap homebrew/cask-fonts
brew install --cask font-hack-nerd-font

➡️ – Nicer colors

To improve the colors in the terminal, I like vivid, which I came across recently. We use Homebrew again to install:

brew install vivid

One little "gotcha" is that you also need to install the GNU version of ls instead of the BSD version included with macOS to be able to use the colors:

brew install coreutils

Then you can set the colors you want to use along with a little alias in .zshrc to make everything look tidy:

# Vivid colors
export LS_COLORS="$(vivid generate molokai)"
alias ls="gls --color"

Here with the molokai colors.

Note: Another approach is to skip this step and let the various tools inherit the color scheme you have defined for your terminal.

⬅️ – More superpowers

I use about a dozen commands in the terminal most of the time, but there are a few commands that I benefit from every day, and the most used is z, which this list starts with. The others are good, too, but they’re used much less frequently.

z / zoxide

If there’s one command you should install, it’s z. With z, you can jump around among the directories you use the most using fuzzy shortcuts.

brew install z

Add to .zshrc:

# z
. $(brew --prefix)/etc/profile.d/z.sh

This means you can type z site instead of cd ~/Sites, for a simple example. It is invaluable if you work in the terminal.

Zoxide is a more modern version of z above. It’s a little faster and has support for fzf, which makes it a bit more versatile. Works more or less in the same way:

 brew install zoxide

Add to .zshrc:

# zoxide
eval "$(zoxide init zsh)"

This will give you access to another z command, as well as the zi command, which shows an interactive display of matches.

Use z OR zoxide.

lsd

With Nerd Fonts in place, we can also install LSD, which stands for LSDeluxe and nothing else, using Homebrew:

brew install lsd

I’m not the biggest fan, but it might suit you.

htop / btop

It’s not something I use daily, but htop is an updated version of top that shows active processes and memory usage in the terminal. It can be installed with:

brew install htop

Or, if you would rather, go with the even better-looking one called btop

brew install btop

tldr

You can use man to get help with syntax and other things, but these summaries are often very long and quite complicated to read. To make things easier, you can use tldr, which stands for "too long, didn’t read", by installing it with npm:

npm install -g tldr

This means we can now run tldr ln instead:

 ln

  Creates links to files and directories.
  More information: https://www.gnu.org/software/coreutils/ln.

  - Create a symbolic link to a file or directory:
	ln -s /path/to/file_or_directory path/to/symlink

  - Overwrite an existing symbolic link to point to a different file:
	ln -sf /path/to/new_file path/to/symlink

  - Create a hard link to a file:
	ln /path/to/file path/to/hardlink

Compare that to man ln if you can handle it…

trash

Sometimes, it’s nice for files that you delete to go to the trash first.

In the terminal, rm deletes files permanently right away. Not great if it’s a mistake… Add the command trash to send files to the trash instead.

brew install trash

neofetch

Then everyone benefits from a bit of nice ASCII graphics in their terminal, so remember to install neofetch with:

brew install neofetch

➡️ – Restart after changes

Every time you make a change in .zshrc, you need to restart the session for the change to take effect.

You can, of course, just close iTerm and start it again, but it’s easier to do exec zsh or source ~/.zshrc.

🅱️ 🅰️ – In summary

Now, finish by pressing 🅱️ and then 🅰️ to complete the Konami code, and the terminal will be significantly nicer the next time you sit down at the computer to get something done.

Epic win! ✌🏻

Resources

]]> Terminal: Yazi https://christofersandin.com/texts/terminal-yazi https://christofersandin.com/texts/terminal-yazi Sun, 27 Apr 2025 00:00:00 +0000 Christofer Sandin Terminal Treats Yazi is a Terminal-based file manager. It also has a few Vim-related key maps so it kind of fits into my little mini-series of articles around the Term. It has a column of files and folders on the left, a list of the files and folders in the current path in the middle, and a preview of the file on…

Yazi is a Terminal-based file manager. It also has a few Vim-related key maps so it kind of fits into my little mini-series of articles around the Term.

It has a column of files and folders on the left, a list of the files and folders in the current path in the middle, and a preview of the file on the right-hand side.

It also has support for Vim key bindings, which makes it quite intuitive to navigate if you have spent some time in Vim or Neovim. You use y to yank (copy) a file, you use p to paste, etc.

Install

Install all dependencies and Yazi with Homebrew:

brew install yazi ffmpeg sevenzip jq poppler fd ripgrep fzf zoxide imagemagick font-symbols-only-nerd-font

Or, if you want to run the latest development build instead:

brew install yazi --HEAD

Default configuration files

Copy and paste these files to your own configuration and change the things you like.

Plugins

  • The mactag.yazi plugin enables the Mac’s tagging feature in Yazi
  • The jump-to-char.yazi plugin enables an ‘f’ command to jump to the next file that starts with a specific character.

Use Yazi as a Tmux popup

When using Tmux, you can use Yazi in a "popup". This means we can bind a shortcut (I have Tmux <Prefix> + Ctrl + y for Yazi), which gives me an easy-to-reach file explorer in all situations.

You can do this in your .tmux.conf file.

bind C-y display-popup \
  -d "#{pane_current_path}" \
  -w 75% \
  -h 75% \
  -E "yazi"

Resources

]]> Terminal: Manage Dotfiles with Stow https://christofersandin.com/texts/terminal-stow https://christofersandin.com/texts/terminal-stow Sun, 27 Apr 2025 00:00:00 +0000 Christofer Sandin Terminal Treats If you have started reading this introduction, I assume you have a repository with your config files somewhere. Otherwise, I can't figure out what piqued your interest. Since people spend years tweaking, personalizing, and modifying them to adapt to their preferred way of working, you might as well…

If you have started reading this introduction, I assume you have a repository with your config files somewhere. Otherwise, I can’t figure out what piqued your interest. Since people spend years tweaking, personalizing, and modifying them to adapt to their preferred way of working, you might as well manage them with the same skill. Meet Stow.

Install Stow via brew install stow and then clone that repo into ~/dotfiles. The main idea is to use Stow to create symbolic links from these files into your home directory. You could create the symlinks by hand, but Stow automates it.

Here is my current setup:

~/dotfiles (main*) » tree
.
├── aerospace
├── btop
├── editorconfig
├── eslint
├── eza
├── glow
├── helix
├── ideavim
├── neofetch
├── npm
├── nvim
├── prettier
├── README.md
├── stylelint
├── tmux
├── vim
├── wezterm
├── wtf
├── yazi
└── zsh

Here’s how my directory setup looks for ~/dotfiles/nvim and how I organized the folder structure under that folder to mimic where I want the files to end up in my home directory.

(You can imagine that the first folder ~/dotfiles/nvim, which represents the application’s name, also symbolizes the ~ directory when placing files.)

~/dotfiles (main*) » tree -a nvim
nvim
└── .config
    └── nvim
        ├── init.lua
        ├── lazy-lock.json
        └── lua
            ├── .luarc.json
            ├── keymaps.lua
            ├── options.lua
            ├── plugins
            │   ├── alpha.lua
            │   ├── auto-indent.lua
            │   ├── colors.lua
            │   ├── comments.lua
            │   ├── completions.lua
            │   ├── formatting.lua
            │   ├── git.lua
            │   ├── linting.lua
            │   ├── lsp-config.lua
            │   ├── lualine.lua
            │   ├── markdown.lua
            │   ├── neo-tree.lua.NOT-IN-USE
            │   ├── noice.lua
            │   ├── none-ls.lua.NOT-IN-USE
            │   ├── nvim-tmux-navigation.lua
            │   ├── oil.lua
            │   ├── telescope.lua
            │   ├── theme.lua
            │   ├── treesitter-textobjects.lua
            │   ├── treesitter.lua
            │   └── which-key.lua
            └── plugins.lua

Then, use stow to symlink files into ~ with stow nvim

To verify, let’s look at how the file system looks after this. Running tree -a .config/nvim gives us the tree structure of the directory:

~ » tree -a .config/nvim
.config/nvim
├── init.lua
├── lazy-lock.json
└── lua
    ├── .luarc.json
    ├── keymaps.lua
    ├── options.lua
    ├── plugins
    │   ├── alpha.lua
    │   ├── auto-indent.lua
    │   ├── colors.lua
    │   ├── comments.lua
    │   ├── completions.lua
    │   ├── formatting.lua
    │   ├── git.lua
    │   ├── linting.lua
    │   ├── lsp-config.lua
    │   ├── lualine.lua
    │   ├── markdown.lua
    │   ├── neo-tree.lua.NOT-IN-USE
    │   ├── noice.lua
    │   ├── none-ls.lua.NOT-IN-USE
    │   ├── nvim-tmux-navigation.lua
    │   ├── oil.lua
    │   ├── telescope.lua
    │   ├── theme.lua
    │   ├── treesitter-textobjects.lua
    │   ├── treesitter.lua
    │   └── which-key.lua
    └── plugins.lua

Then, pick and choose which ones you like. Stow uses the same name as the folders you have in your repository:

  • stow zsh
  • stow nvim
  • stow wezterm
  • …

This works well for me, and I do not have any more requirements for a solution like this. However, there are other, more complex solutions to the same problem, so feel free to explore other options if this seems a bit rudimentary for your taste.

References

]]> Terminal: Tmux https://christofersandin.com/texts/terminal-tmux https://christofersandin.com/texts/terminal-tmux Thu, 17 Apr 2025 00:00:00 +0000 Christofer Sandin Terminal Treats A way to standardize the window and session management inside the terminal. tmux is a terminal multiplexer. It lets you switch easily between several programs in one terminal, detach them (they keep running in the background) and reattach them to a different terminal. I'm relatively new to using…

A way to standardize the window and session management inside the terminal.

tmux is a terminal multiplexer. It lets you switch easily between several programs in one terminal, detach them (they
keep running in the background) and reattach them to a different terminal.

I’m relatively new to using Tmux in my terminal sessions, since the main argument
used to be that you can reconnect to all of the servers you work on from different machines. That was a use case that
didn’t resonate with me since I spend most of my time on my machine.

However, when digging into Neovim, I came across a few Tmux tutorials too, and started to see another point. With the
help of a little program like Tmuxifier, I can configure the layouts I need for work
once and then attach to them whenever I switch contexts. This makes the startup time close to zero and has made my
life easier.

I also like that I can jump around between terminal emulators like iTerm2,
Ghostty, and Wezterm and have the same setup in all of them.

After a brew install tmux we can:

  • tmux - start
  • tmux ls - show sessions
  • tmux attach - attach to old session
  • tmux attach -t name - attach to name session

The default prefix in tmux is Ctrl + B. To see all commands, hit the prefix and : and use the command list-keys.
Another option is to list all commands with the list-commands command.

Working with Sessions, Windows, and Panes inside tmux

Here is an overview of how you can think of sessions, windows, and panes in Tmux.

┌────────────────────────────────────────────────────┐   ┌────────────────────────────────────────────────────┐   ┌────────────────────────────────────────────────────┐
│                     Session #1                     │   │                     Session #2                     │   │                     Session #3                     │
│ ┌────────────────────────────────────────────────┐ │   │ ┌────────────────────────────────────────────────┐ │   │ ┌────────────────────────────────────────────────┐ │
│ │                   Window #1                    │ │   │ │                   Window #1                    │ │   │ │                   Window #1                    │ │
│ │ ┌─────────────────────┐┌─────────────────────┐ │ │   │ │                                                │ │   │ │                                                │ │
│ │ │                     ││                     │ │ │   │ │                                                │ │   │ │                                                │ │
│ │ │                     ││                     │ │ │   │ │                                                │ │   │ │                                                │ │
│ │ │       Pane #1       ││       Pane #2       │ │ │   │ │                                                │ │   │ │                                                │ │
│ │ │                     ││                     │ │ │   │ │                                                │ │   │ │                                                │ │
│ │ │                     ││                     │ │ │   │ │                                                │ │   │ │                                                │ │
│ │ └─────────────────────┘└─────────────────────┘ │ │   │ │                                                │ │   │ │                                                │ │
│ └────────────────────────────────────────────────┘ │   │ └────────────────────────────────────────────────┘ │   │ └────────────────────────────────────────────────┘ │
│ ┌────────────────────────────────────────────────┐ │   └────────────────────────────────────────────────────┘   │ ┌────────────────────────────────────────────────┐ │
│ │                   Window #2                    │ │                                                            │ │                   Window #2                    │ │
│ │                                                │ │                                                            │ │ ┌────────────────────────────────────────────┐ │ │
│ │                                                │ │                                                            │ │ │                  Pane #1                   │ │ │
│ │                                                │ │                                                            │ │ │                                            │ │ │
│ │                                                │ │                                                            │ │ └────────────────────────────────────────────┘ │ │
│ │                                                │ │                                                            │ │ ┌────────────────────────────────────────────┐ │ │
│ │                                                │ │                                                            │ │ │                  Pane #2                   │ │ │
│ │                                                │ │                                                            │ │ └────────────────────────────────────────────┘ │ │
│ └────────────────────────────────────────────────┘ │                                                            │ └────────────────────────────────────────────────┘ │
└────────────────────────────────────────────────────┘                                                            └────────────────────────────────────────────────────┘

Sessions

  • List sessions: <Prefix> s
  • Rename session: <Prefix> $
  • Destroy a session: <Prefix> :kill-session

Windows

  • List windows: <Prefix> w
  • Create window: <Prefix> c
  • Next window: <Prefix> n
  • Previous window: <Prefix> p
  • Rename current window: <Prefix> ,
  • Select window by number: <Prefix> 0-9

Panes

  • Navigate panes: <Option> <Left>/<Right>/<Up>/<Down>
  • Split horizontal: <Prefix> -
  • Split vertical: <Prefix> |

Config file

Located in ~/.tmux.conf

# ---- Options ---------------------------------------------------------------

# Set color mode
set-option -g default-terminal "tmux-256color"
set-option -ag terminal-overrides ",xterm-256color:RGB"
set-option -g allow-passthrough on
set-option -ga update-environment TERM
set-option -ga update-environment TERM_PROGRAM

# Add mouse support (and do not exit copy mode when dragging with the mouse)
set-option -g mouse on
unbind -T copy-mode-vi MouseDragEnd1Pane

# Display the status bar at the top of the screen
set-option -g status-position top

# Remove delay for exiting insert mode with ESC in Neovim
set-option -sg escape-time 0

# Start windows and panes at 1, not 0
set-option -g base-index 1
set-option -g pane-base-index 1
set-window-option -g pane-base-index 1
set-option -g renumber-windows on

# Set vi mode
set-window-option -g mode-keys vi


# ---- Key maps --------------------------------------------------------------

# Reload config
unbind r
bind r source-file ~/.tmux.conf

# Set prefix to Ctrl-Space
unbind C-b
set-option -g prefix C-Space
bind C-Space send-prefix

# Kill sessions with Ctrl-q
bind -n C-q kill-session

# Split windows open pane in same path as current window
unbind %
bind | split-window -h -c "#{pane_current_path}"
unbind '"'
bind - split-window -v -c "#{pane_current_path}"

# Resize panes
bind j resize-pane -D 5
bind k resize-pane -U 5
bind l resize-pane -R 10
bind h resize-pane -L 10

# Use prefix + m to maximize pane
bind -r m resize-pane -Z

# Use Alt + Arrow keys without prefix key to switch panes
bind -n M-Left select-pane -L
bind -n M-Right select-pane -R
bind -n M-Up select-pane -U
bind -n M-Down select-pane -D

# Shift arrow to switch windows
bind -n S-Left  previous-window
bind -n S-Right next-window

# Keybindings for vi
bind-key -T copy-mode-vi v send-keys -X begin-selection
bind-key -T copy-mode-vi C-v send-keys -X rectangle-toggle
bind-key -T copy-mode-vi y send-keys -X copy-selection-and-cancel
bind-key -T copy-mode-vi 'v' send -X begin-selection # start selecting text with "v"
bind-key -T copy-mode-vi 'y' send -X copy-selection # copy text with "y"


# ---- Styling ---------------------------------------------------------------

# Basic colors of the Statusbar
set-option -g status-style bg=default,fg=black

# Show the window list centered between the left and the right section
set-option -g status-justify absolute-centre

# Style and set contents on the left section
set-option -g status-left "\
#[bg=default,fg=darkgrey]// \
#[bg=default,fg=brightblue]#S \
#[bg=default,fg=darkgrey]// \
"

# Style and set contents on the right section
set-option -g status-right "\
#[bg=default,fg=darkgrey] // \
#[bg=default,fg=brightblue]tmux\
#[bg=default,fg=darkgrey] // \
"
#
# Set max length of left and right section
set-option -g status-left-length 100
set-option -g status-right-length 100

# Style and set content for the inactive windows
set-option -g window-status-format "  \
#I\
#[fg=black]:\
#[fg=darkgrey]#W  \
"

# Style and set content for the active windows
set-option -g window-status-current-format "\
#[bg=default, fg=brightblue]░ #I\
#[fg=brightblue]:\
#[fg=brightblue]#W \
#[fg=default] \
"

# Panes
set-option -g pane-border-style 'fg=black'
set-option -g pane-active-border-style 'fg=brightyellow'


# ---- Load Tmux Plugin Manager and the plugins ------------------------------

# Plugin manager
set-option -g @plugin 'tmux-plugins/tpm'

# List of tmux plugins
set-option -g @plugin 'christoomey/vim-tmux-navigator'

# Initialize Tmux Plugin Manager (keep this at the very bottom of tmux.conf)
run '~/.tmux/plugins/tpm/tpm'

References

Config files

YouTube

Lists

Guides

]]> A Certain Size of Companies https://christofersandin.com/texts/a-certain-size-of-companies https://christofersandin.com/texts/a-certain-size-of-companies Sun, 09 Feb 2025 00:00:00 +0000 Christofer Sandin Work Working with smaller companies instead of the big ones always interests me. As my day job is running a small design and technology company, I believe that most smaller companies have a little bit more heart in the game, and that is something I like. I’m not talking about the random one-person…

Working with smaller companies instead of the big ones always interests me. As my day job is running a small design and technology company, I believe that most smaller companies have a little bit more heart in the game, and that is something I like.

I’m not talking about the random one-person company that has been active for a week or two, but solid smaller companies with a handful of people with a respectable history of being around for a while.

We also use services from large companies at work. The full disclosure is that we are currently using Slack. Slack is no longer a small company (but it was way smaller when we started using it), and we use Google’s paid service for email and calendars.

Tools

Fathom Analytics is a privacy-focused alternative to Google Analytics. It was created by a team of two developers in Canada (but I’m pretty sure one is British). Their main goal is to provide website owners with accurate and actionable data about their visitors without compromising privacy.

Postmark is a delivery service for transactional and broadcast emails, such as password resets, account notifications, and purchase confirmations. It strongly emphasizes reliability, speed, and security. (Postmark was recently acquired by ActiveCampaign but has managed to maintain its quality so far.)

Content Management Systems

Craft is a Content Management System (CMS) known for its flexibility and ease of use. It is a tool that helps designers and developers create custom websites quickly and efficiently. Many small- to medium-sized businesses use Craft to manage their online content, but quite a few large brands also use Craft.

Another CMS we like is Statamic, which is made by a small team and built upon Laravel. It has a great Control Panel for clients who work in it, and we use it for sites where we don’t need a database since it allows us to store everything as files.

Project and time management

We have tracked time with Harvest since 2008. It’s easy to use, summarizes all hours spent on projects at the end of the month, and keeps us informed about where we spend our time. It does this well and gets out of your way.

Project management software comes and goes, but we’ve stuck with Basecamp over the years.

  • Is it the perfect solution? Nope.
  • Is it the best alternative for software development? Nope.
  • Is it the most beautifully designed software? Nope.
  • Does it solve most problems for us and our clients? Yes.

It’s software made for most people, meaning it can be used by clients, partners, CEOs, designers, support staff, project managers, developers, and almost anyone else.

E-mail

Missive is an email application made for teams. We utilize the Google Workspace email setup within Missive. Some of our favorite features include having separate and shared accounts in the same app, assigning emails, and discussing them in the app before replying and sending them.

Resources

]]> Meet Raycast, My Digital Sidekick https://christofersandin.com/texts/meet-raycast-my-digital-sidekick https://christofersandin.com/texts/meet-raycast-my-digital-sidekick Sun, 26 Jan 2025 00:00:00 +0000 Christofer Sandin Tips For me, it started with an app called Quicksilver. After a while, Apple took that idea and made Spotlight, but Spotlight worked differently. Then I found Alfred – it did the same thing as Quicksilver but also so much more. Alfred is great, but my new sidekick is Raycast. Speed is the most…

For me, it started with an app called Quicksilver. After a while, Apple took that idea and made Spotlight, but Spotlight worked differently.

Then I found Alfred – it did the same thing as Quicksilver but also so much more.

Alfred is great, but my new sidekick is Raycast. Speed is the most significant difference, or at least perceived speed. I don’t have any numbers to go by.

Raycast makes routine tasks quicker. A tool like this is a must for someone who gets a minor panic attack when watching people move their windows around with the mouse and then drag them into misaligned windows on top of each other.

With no further explanation, the plugins I use every day:

Plugins I use once in a while:

There, use your keyboard.

Resources

]]> Starting in Our Field https://christofersandin.com/texts/starting-in-our-field https://christofersandin.com/texts/starting-in-our-field Thu, 01 Aug 2024 00:00:00 +0000 Christofer Sandin Work I’m getting older, but at the same time, I’m starting to pick up quite a bit of experience from running a business for almost 20 years. I started with my firm, freelancing, and taking on small projects while at university. Over the last 15 years, I’ve been running a small development and design…

I’m getting older, but at the same time, I’m starting to pick up quite a bit of experience from running a business for almost 20 years. I started with my firm, freelancing, and taking on small projects while at university. Over the last 15 years, I’ve been running a small development and design company, working with clients of all sizes.

One of the most common questions when meeting students looking for internships or people starting in our line of work is, “What should I learn?” That is a good question, of course, but I think many people give bad advice.

Whether you are a talented developer or an aspiring designer, I recommend starting with the basics.

By that, I mean the technologies that may seem a little too simple to you, but still dominate the internet to a large extent. I’m talking about HTML, CSS, and JavaScript. One step up from protocols and requests, these are the three fundamental elements that enable every web page, every web app, and all custom-designed systems on the internet to function.

Make sure you understand the basics unique to the web, such as how content flows on different screen sizes, zooming in and out, and other related concepts, before jumping in and trying to learn React.

Long live HTML

All server-side programming languages ultimately result in HTML that the user can view, browse, and interact with.

Even if you are going to spend most of your time in PHP, Python, or Microsoft’s .net, you still need to understand the result you produce. I’ve met far too many developers with five or more years of experience working with the web who are still not clear about how to write simple markup or CSS rules. Don’t be that person.

There are countless HTML frameworks, even more CSS frameworks, and a million JavaScript frameworks to look at. Add a task runner like Gulp, or a tool like Vite, and you start complicating it even more for your first project. And I won’t even mention Webpack…

The foundation

However, after spending time looking at and understanding the basics, it doesn’t matter if the site uses Bootstrap or Foundation since you know CSS.

  • Take some time to understand semantic HTML and how to mark up content.
  • Take the time to examine CSS and understand both the selectors and the cascade.
  • Experiment with native JavaScript to gain a deeper understanding of the language.

After that, you’ll be much more efficient and employable, and can pick up Bootstrap, Vue, or React in a few hours if needed.

To be clear, I’m not saying “don’t use frameworks”; I’m just saying start by learning the basics before you do, and then make an educated choice when choosing the one(s) to use.

By the way, learning to write good HTML and utilize styles and scripts effectively also helps you create more accessible content, making it easier for search engines to index your content.

Customers pay for that, which is a good start if you want to make a living working in this field.

And have fun. Learning new things is great, but you don’t have to know all the new things all the time. That is another common misconception about how the web works.

Resources

]]> The Forgiving Nature of the Web https://christofersandin.com/texts/the-forgiving-nature-of-the-web https://christofersandin.com/texts/the-forgiving-nature-of-the-web Wed, 24 Jul 2024 00:00:00 +0000 Christofer Sandin Work HTML and CSS are both extraordinarily relaxed and forgiving. If you forget to close a tag or enter incorrect values in a CSS property, it's not a big deal, as the parsers continue while ignoring the error. However, that does not mean you have to use these traits intentionally because you are lazy.…

HTML and CSS are both extraordinarily relaxed and forgiving. If you forget to close a tag or enter incorrect values in a CSS property, it’s not a big deal, as the parsers continue while ignoring the error. However, that does not mean you have to use these traits intentionally because you are lazy.

When you add JavaScript, it becomes a lot harder. A typo in that code stops execution — nothing after the error runs. But JavaScript is a loosely typed language, so it’s still way more forgiving than the Ada language I was taught at university.

HTML and CSS are both extraordinarily relaxed and forgiving.

This does not mean you have to be sloppy and lazy. Fault-tolerant systems are a backup with robustness built in. That is not an excuse to “don’t bother.”

Sooner or later, you will run into unexpected issues when you try to cut corners. From working in this field for a long time and working with many developers, I can confidently say that if you concern yourself with the details and get it right from the start, you can spend a lot of hours doing something valuable instead of fixing bugs. Trust me, you’ll have enough of those anyway…

Think of it this way. It’s nice to know that you can walk with your shoelaces untied. It’s great that it works, and occasionally, when you forget to tie your shoes, you benefit from that. Still, it’s a good idea to tie your shoes when you put them on.

Therefore, write strict HTML, lint your CSS, and compile your JavaScript to up your game. Don’t rely on fault tolerance to fix your code. You win in the long run.

Resources

]]> Minimalism https://christofersandin.com/texts/minimalism https://christofersandin.com/texts/minimalism Mon, 15 Jul 2024 00:00:00 +0000 Christofer Sandin Mini-essay Something about minimalism as a theme appeals to me. We have too many things, and striving for the next one all the time hurts us more than we might think. These are not unique ideas, but they resonate with me. I've always preferred to buy a few quality items rather than a lot of cheap ones. In…

Something about minimalism as a theme appeals to me. We have too many things, and striving for the next one all the time hurts us more than we might think.

These are not unique ideas, but they resonate with me. I’ve always preferred to buy a few quality items rather than a lot of cheap ones. In this day and age, that mindset is becoming increasingly important, and more people are getting on board.

I’m not a minimalist yet, but there are some interesting ideas in the articles below. These ideas apply to both my physical space, where I live, and the digital space where I work. The word associated with this is "uncluttering," and I think it makes sense.

The first thing I did years ago, without striving for a more minimalistic approach, was to eliminate most of the alerts and notifications on my phone. I felt more disturbed and unfocused each day when something beeped and blinked for attention every 40 seconds—getting rid of those made my days calmer.

Start the journey by disabling notifications on your phone and computer, and start making informed purchase decisions. That’s where I am at the moment, and baby steps are better than no steps at all.

Explore minimalism on your own

]]>