To run commands at launch on Raspberry Pi, you can add them to ~/.config/lxsession/LXDE-pi/autostart

Just append commands to the file.

# Turn screensaver and energy saving options off,  
# so display remains on at all times.
@xset s off
@xset -dpms
@xset s noblank

#Run caddy server that hosts the site.
@caddy -conf /home/pi/Desktop/x1kiosk.caddyfile

#Open Chromium with the site
@chromium-browser --kiosk --app=http://localhost:8021

#Hide the mouse cursor
@unclutter -idle 1

This was my configuration to test a kiosk app.

Enabling dark mode on websites is really easy. It’s also not that much more difficult to change image assets to play along; for example, to show dark mode screenshots of your app instead of the bright version on your landing page.

<picture>
    <source srcset="/images/appScreen_tilted_dark.png"
            media="(prefers-color-scheme: dark)">
    <img src="/images/appScreen_tilted.png" alt="always alt">
</picture>

This allows the browser to only download the dark-mode image if it’s enabled. If not, it defaults to the image in <img> tag.

In the wild, I’ve seen pages that hide images in CSS, based on color scheme preference, which makes the page load assets twice. This method prevents that.

If you prefer to make the dark-mode default and load another image when light mode is enabled, changing the media attribute to "(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" would also work.

For dark mode in Tailwind, extend tailwind.config.js first:

module.exports = {
    theme: {
      extend: {
        screens: {
          'dark': {'raw': '(prefers-color-scheme: dark)'},
        },
      },
    },
    variants: {},
    plugins: [],
};

Then use as a prefix when defining classes:

<div class="bg-gray-200 text-gray-900 
            dark:bg-gray-900 dark:text-gray-200">
Some text
</div>

To use custom fonts in a Tailwind-ish way, add them to tailwind.css:

@tailwind base;

@font-face {
    font-family: 'Trenda';
    font-weight: 400;
    src: url('/css/fonts/Trenda/Regular/Trenda-Regular.eot'); /* IE9 Compat Modes */
    src: url('/css/fonts/Trenda/Regular/Trenda-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  
         url('/css/fonts/Trenda/Regular/Trenda-Regular.woff') format('woff'), /* Pretty Modern Browsers */
         url('/css/fonts/Trenda/Regular/Trenda-Regular.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('/css/fonts/Trenda/Regular/Trenda-Regular.svg#svgFontName') format('svg'); /* Legacy iOS */
}
  
@tailwind components;
@tailwind utilities;

Then add them to tailwind.config.js

module.exports = {
    theme: {
      extend: {
        fontFamily: {
          'trenda': ['Trenda', 'sans-serif'],
        },
      },
    },
    variants: {},
    plugins: [],
    
  };

To use, add font-trenda class to any component.

Step 1: Create a new folder and go into it¹.

take project

Step 2: Install Tailwind and stuff:

npm init -y
npm install tailwindcss postcss-cli autoprefixer
npm install @fullhuman/postcss-purgecss
npx tailwind init

Step 3: Create new file postcss.config.js and paste in:

const purgecss = require('@fullhuman/postcss-purgecss')({
    content: [
      './public/*.html',
    ],
    defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
  })

module.exports = {
    plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
        ...process.env.NODE_ENV === 'production'
            ? [purgecss]
            : []
    ]
}

Step 4: Create css/tailwind.css file and paste in:

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

Step 5: Open package.json and under scripts, add two new scripts:

"build": "postcss css/tailwind.css -o public/build/tailwind.css",
"production": "postcss --env 'production' css/tailwind.css -o public/build/tailwind.css"

Step 6: Build Tailwind.

npm run build

This will create the public folder and compile the build/tailwind.css file under it.

Step 7: Create index.html file in the public folder, and include the compiles CSS file:

<link rel="stylesheet" href="/build/tailwind.css">

The resulting tailwind.css file is HUGE. Before publishing, run npm run production, which will use PurgeCSS to remove unnecessary classes.

Just before Dark Mode came to iOS, I switched my personal blog and my fixed.some.design blog to automatically switch to dark mode.

Step 1: Learn How
Apparently, media queries are the way to go.
@media (prefers-color-scheme: dark) allows the browser to pick colors based on the OS preference.

Step 2: Gather your colors
Not the best way to do so, but allowed me to get it out the door in under 10 minutes.

This is my SCSS folder that I use to code my theme:

~/Desktop/hugo/blog.cemkesemen.com/themes/simpleblog/dev/scss
❯ tree
.
├── _content.scss
├── _grid.scss
├── _header.scss
├── _homepage.scss
├── _responsive.scss
├── _trenda.scss
├── _ttsmalls.scss
└── style.scss

I dove into each file, and found every item I inserted color into. Then I copied them into a _dark.scss file, and started playing around with the colors in there.

Step 3: Wonder why it doesn’t work
Okay, for this media query to take affect, apparently it has to be at the end of the CSS file. So I moved @import "dark"; to the end of style.scss.

Step 4: Sigh of relief
Double check that everything looks good in both dark and light mode, republish your site, and be happy that you won’t scorch anyones retinas in the dark.

Next Steps
As this was a theme I used in both sites, I just git pushed this and pulled it back from the other site, and it was good to go.

However, a sane developer should definitely use variables for colors and make sure light and dark mode lives side by side in the same file.

I’m currently developing two themes (three including this) with Hugo.
When developing Kirby themes, I could just use CodeKit’s Browser Refreshing feature by setting External Server to my development address, mostly a .dev URL provided by Valet.

However, with Hugo, thing are a little different. Even though my Hugo sites are one-off and do not require a theme, I develop them as themes so I can seperate templates and content.

├── content
├── public
│   ├── css // style.css is copied here, from themes/static/css
└── themes
    └── minimalblog
        ├── dev
        │   └── scss // style.scss is here
        └── static
            └── css // style.css is compiled here

Basically, this is what happens: I write my SCSS code in themes/minimalblog/dev/scss/style.scss file, and it CodeKit compiles it into themes/minimalblog/static/css/style.css. When Hugo is run, it copies that file to public/css/style.css.

Hugo has a “server” and feature, that also watches for changes in the directory and automatically refreshes them. When combined with hugo server, it allows you to make changes and watch the changes in browser instantly. However, with CodeKit syncing, Hugo gets a little confused and the result you see is not optimal:

Syncing /css/style.css to /

This is because Hugo renders to and serves from memory, but CodeKit compiles to disk. Fortunately, a simple addition of --renderToDisk makes Hugo write changes to the disk and serve from there instead.

Syncing /css/style.css to /Users/cemk/Sites/hugo/devlog/public/

Make it Global

The server feature binds to 127.0.0.1, making the site only reachable from that machine. To reach it from your phones and tablets and other devices is also a simple fix:-bind 0.0.0.0

The final command becomes this:

$ hugo server --renderToDisk --bind 0.0.0.0

Two things about CSS:
1. Apparently, you cannot style a:visited with anything other than color.

2. When you cut a URL with overflow properties in CSS, iOS does not show the highlight affordances.

I’m hosting this mini-blog on GitLab Pages, but using my own domain, so I need Let’s Encrypt for a secure page. I needed certbot for creating a certificate, and an Ubuntu virtual machine since certbot throws compatibility warnings on mac OS.

I created an Ubuntu 16.04 virtual machine, did git clone https://github.com/certbot/certbot and then ran the ./certbot-auto certonly --manual -d devlog.cemkesemen.com command.

At one point, certbot warned me that my IP would be publicly logged, so I wanted to use one of my web hosts IP for the request. I installed sshuttle to quickly ssh/proxy from one of my web servers on RamNode^{(affiliate link)}.

git clone https://github.com/sshuttle/sshuttle.git
sudo apt-get install python3-setuptools
cd sshuttle
sudo python3 ./setup.py install

Then I tmux’ed a new session, sshuttle‘ed from one window, and ran certbot again from another.

At one point, Let’s Encrypt asks to see a key at a certain page. Since I’m using Hugo, I created the directory and page in the static directory, pushed the page and told certbot to continue.

Once done, certbot gives a location for the keys.

sudo su
cd /etc/letsencrypt/live/devlog.cemkesemen.com

There are two files that are needed for GitLab; fullchain.pem goes to the Certificate (PEM) area, and privkey.pem goes to Key (PEM) are on New Pages Domain page.

After this, run the latest pipeline again, and you should have your page secured. Or, if you are running Hugo, change your baseURL to your new domain and do a git push.

iTerm2 and tmux -CC is great, but the snazzy colors did not work with tmux in ssh’ed sessions.
Adding set -g default-terminal "screen-256color" to .tmux.conf fixes this.

I needed zsh 5.2 for Pure prompt on my 16.04 Xenial installation, which only offers zsh 5.1. 16.10 Yakkety has zsh 5.2, though.

Added

deb http://us.archive.ubuntu.com/ubuntu/ yakkety main restricted

to /etc/apt/sources.list, but an apt-get upgrade wanted to update everything.

The solution was to add

APT::Default-Release "xenial";

to /etc/apt/apt.conf. Now apt-get upgrade didn’t want to update every package to yakkety, and I can get newer packages by doing apt-get install -t yakkety zsh.