pixelflush_ | Cloud Expertise

Using Tailwind CSS

Sun, 09 Feb 2020 16:30:00 +0100

For a new project I finally got a chance to explore Tailwind CSS. A utility-first CSS framework you’ve most likely heard of before.

Tailwind is build on top of the vast JavaScript tooling that is flourishing around Node.js. We are lucky to have support for that in Rails since the introduction of webpack in Rails 5.1.

I tried to find the smallest amount of steps needed to get Tailwind working in a fresh, yet deployable Rails 6 application. Tailwind generates a bazillion CSS classes, so clearing out all the unused ones is a must-do for production deployments and therefore included in the following steps via PurgeCSS.

Installing the needed tools

The following creates a new rails application with webpack included by default. I’m choosing PostgreSQL as database to allow deployments to Heroku right away. But feel free to pick something else.

$ rails new freshwind -d postgresql
$ cd freshwind
$ yarn add tailwindcss --dev
$ yarn add @fullhuman/postcss-purgecss --dev

I’m providing a Git patch at the end of this article you can apply right after rails new ....

PostCSS Configuration

From here on I’m basically following the official installation guide adjusted to Rails. PurgeCSS is only run on production builds. I’m still using regular Rails views in ./app/views/**/*.html.erb. Extend the content array with more paths for React, Vue, etc.

// postcss.config.js
const purgecss = require('@fullhuman/postcss-purgecss')({
  // Specify the paths to all of the template files in your project
  content: [
    './app/views/**/*.html.erb'
  ],

  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})

module.exports = {
  plugins: [
    require('postcss-import'),
    require('postcss-flexbugs-fixes'),
    require('tailwindcss')('./app/javascript/css/tailwind.js'),
    require('autoprefixer'),
    require('postcss-preset-env')({
      autoprefixer: {
        flexbox: 'no-2009'
      },
      stage: 3
    }),
    ...process.env.NODE_ENV === 'production'
      ? [purgecss]
      : []
  ]
}

Starting to use TailwindCSS

At this point TailwindCSS is installed. Let’s adjust the default Rails layout to start making use of it. In development stylesheet_pack_tag will return nil while all your CSS is delivered through the JS pack. You can control this with extract_css in webpacker.yml.

<!-- app/views/layouts/application.html.erb -->
<!-- ... -->
<%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<!-- ... -->

/* app/javascript/css/application.css */
/* purgecss start ignore */
@tailwind base;
@tailwind components;
/* purgecss end ignore */

@tailwind utilities;

// app/javascript/packs/application.js
// ...
import '../css/application.css'

Deployment to Heroku

Allow Heroku to make use of modules in devDependencies:

$ heroku config:set NPM_CONFIG_PRODUCTION=false

Git Patch

Apply everything mentioned here via patch file.

Download Git Patch

Upgrading PostgreSQL 9.5 to 9.6

Wed, 21 Jun 2017 18:00:00 +0200

There are plenty of guides to upgrade from 9.5 to 9.6, or any other minor version. Here is the short story:

$ initdb /usr/local/var/postgres9.6 -E utf8
$ pg_upgrade \
  -d /usr/local/var/postgres -D /usr/local/var/postgres9.6 \
  -b /usr/local/Cellar/postgresql/9.5.5/bin -B /usr/local/Cellar/postgresql/9.6.3/bin
$ mv /usr/local/var/postgres /usr/local/var/postgres9.5
$ mv /usr/local/var/postgres9.6 /usr/local/var/postgres

However, I never had much luck with this. There was always some extension conflict or some other not-easy-to-fix issue.

Something along the lines of:

FATAL:  incompatible library "/usr/local/lib/postgresql/hstore.so": version mismatch
DETAIL:  Server is version 9.6, library is version 9.5.

So this is the more manual bare-bone approach through backup and restore.

Status quo

macOS with PostgreSQL 9.6 installed through homebrew
PostgreSQL 9.5 is also still installed
PostgreSQL is not running

Get 9.5 to run again

Start PostgreSQL with old binaries, libraries and data.

$ mv /usr/local/lib/postgresql /usr/local/lib/postgresql9.6
$ ln -s /usr/local/Cellar/postgresql/9.5.5/lib/postgresql postgresql
$ /usr/local/Cellar/postgresql/9.5.5/bin/pg_ctl -D /usr/local/var/postgres start

Dump the whole database

$ /usr/local/Cellar/postgresql/9.5.5/bin/pg_dumpall > ~/dump.sql

Prepare 9.6

Restore everything to regular 9.6 status.

$ /usr/local/Cellar/postgresql/9.5.5/bin/pg_ctl -D /usr/local/var/postgres stop
$ rm /usr/local/lib/postgresql
$ mv /usr/local/lib/postgresql9.6 /usr/local/lib/postgresql
$ mv /usr/local/var/postgres /usr/local/var/postgres9.5
$ initdb /usr/local/var/postgres -E utf8
$ pg_ctl -D /usr/local/var/postgres start

Restore from dump

$ psql -f ~/dump.sql postgres

Cleanup

Make sure everything is there and works as expected. Then feel free to clean up after yourself.

$ rm -r /usr/local/var/postgres9.5
$ brew cleanup

Sofa for Kodi

Fri, 24 Apr 2015 14:00:00 +0200

Just in time for the release of Apple Watch I’ve finished my first watch app Sofa for Kodi. A remote control for Kodi/XBMC. Something I wanted for myself.

It has one purpose and that’s starting movies and tv shows on the big screen right from your wrist. If your Kodi setup is anything like mine, a touch on the watch will start the movie, boot your AV-Receiver, fire up your TV and change all channels accordingly to present you the flick.

Features

Of course there is a little more to it than just starting movies and tv shows:

see which movies or episodes you’ve seen already
play, pause, stop and seek
update Kodi library (through force touch)
use multiple Kodi installations in parallel (through force touch)

The last one is for people who have Kodi in multiple rooms (e.g. living room and bedroom). With Sofa for Kodi you can control them all.

Download

Sofa for Kodi is available for download on the App Store.

Icons

Apple Watch Icon Template

Thu, 02 Apr 2015 21:00:00 +0200

With the Apple Watch around the corner many of you may have started development of Apple Watch Apps. Apple is allowing Apple Watch App submissions to the App Store now and it’s time to generate the necessary assets.

Icon Template for Sketch

I’ve created a Sketch preset with all the needed icons for 38mm and 42mm watches. The shown circle on each icon is just for guidance while you design your icons. You should not include the circles in your export. As with icons for iOS apps the icon mask will be applied automatically so your exported assets should fill the available rectangular space.

Download

The template is provided as is and free of charge. Do whatever you like with it but don’t hold me responsible for anything.

Download sketch preset

Exports

The preset includes predefined exports for all icons.

Simplifying server logins with SSH keys

Fri, 16 Jan 2015 17:00:00 +0100

Developing applications means dealing with remote servers at some point. And dealing with remote servers means coming across SSH sooner or later. And using SSH often means remembering logins and passwords. But not only is a password something you need to remember, it’s also something not as secure as it should be. Well most of the time at least. I’m talking about choosing simple passwords to make them easier to remember or using the same all over the place. Or both.

I’ve come to a point where I need to handle quite a lot of servers and all of them use SSH. Regardless of the amount of servers you have to deal with you should use SSH keys instead of passwords as means of authorization.

SSH keys

SSH keys are pairs of keys always consisting of a private key as well as a public key. You could compare the private one to a physical key and the public one to a physical lock. It’s possible to install the same kind of lock all over the place but you have to keep the matching key well protected to yourself.

It’s easy to generate a key pair with OpenSSL:

$ ssh-keygen -t rsa -C "your_email@example.com"
// you'll find the generated keys here:
~/.ssh/id_rsa
~/.ssh/id_rsa.pub

Now you can install the public key on all your servers while keeping the private one on your machine.

To install the public key on a server you have to copy the key into ~/.ssh/authorized_keys on the remote machine. It’s possible to do this by hand for every server & user you’d like to use but I’d recommend using ssh-copy-id.

ssh-copy-id

ssh-copy-id is a small tool that takes care of transferring your public key from your local machine to the server of designation.

Just run the tool and you are all good to go:

$ ssh-copy-id username@server.example.com

Remember to repeat this for every user account you’d like to access through SSH.

In case you receive an error about ssh-copy-id not being found just install it with your trusted package manager. It’s available for all kinds of systems. For Mac OS X with Homebrew the command to install ssh-copy-id would look like this:

$ brew install ssh-copy-id

Disabling password authentication

Once your keys are installed you should disable password authorization for SSH on your remote machines. If this is not an option you could change your password to something long and complex.

To disable SSH password login edit /etc/ssh/sshd_config and add or change the following settings:

ChallengeResponseAuthentication no
PasswordAuthentication no
UsePAM no

Once you have SSH key authorization set up you won’t go back.

Updating Samsung 840 EVO SSDs

Mon, 12 Jan 2015 02:00:00 +0100

Samsung found an issue with their SSD 840 EVO Series that dramatically reduces the I/O Performance for old files. They created a new firmware to fix the problem. Unfortunatelly there is no easy-to-run-updater for Mac OS X. Instead they provide the Performance Restoration Software as an ISO file which also rewrites all data after applying the update to get things back to speed.

The new firmware EXT0CB6Q is not listed as such and only available through the Performance Restoration Software. So even while fresh SSD wouldn’t need the restoration process this is the only way to update them on OS X (or Linux btw.).

I couldn’t get the software to boot from a USB stick at first but with a little help from a small Windows tool I got around this. But then I had to learn that the tool doesn’t work while FileVault is enabled. So I disabled it, waited a few hours for the decryption process to finish and tried again. Just to learn the tool doesn’t work when there is a second disk connected. So I had to disconnect the 2nd drive.

Prerequisites

Make sure your time machine backup is up to date. Just in case.
If used, disable FileVault and wait for the decryption process to finish.
Unplug all other disks but the one you’d like to update.
Get access to Windows somehow (Virtual Windows works fine).
Download the Performance Restoration Software ISO.
Download Rufus from rufus.akeo.ie.
Use Rufus with default settings to put the downloaded ISO on a USB stick.

Update Process

Make sure your Mac is plugged into the wall if it’s a laptop.
Start your Mac with the USB stick plugged in and hold down the alt key while it boots.
Select the yellow USB icon called Windows.
Select your target disk (most likely 0) and say yes to the warnings.
Wait. Wait. Wait. This takes quite a long time depending on the amount of data you have stored on your disk.
Don’t forget to re-enable FileVault.

Now enjoy your fast-again SSD. I know it’s a little annoying to use Windows to prepare the USB stick but hey at least it’s not nessecary to put the SSD in a Windows machine just to update the firmware!

The Pixelflush Blog

Sun, 11 Jan 2015 22:00:00 +0100

Hello. Everyone should write a blog, right? We’ll see. I’ve tried before on m-schmidt.eu but the old Wordpress installation caused more headache than anything. So most of the time when I felt like blogging I got turned off by some Wordpress problem or chore - like needing to update the system.

Also while my old blog started out as a personal one, it inevitably turned into something technical. So let’s define this one better.

This new blog will mainly be about technical know-how I’ll (hopefully) gain throughout my work under the pixelflush flag.

For those who don’t know yet, pixelflush is building and running scalable APIs for mobile apps. So basically making sure apps get all the data they need and deserve from well performing server infrastructure and reliable, well-tested code.

A lot of future content may come in form of notes to myself. Frequently I find myself doing something I’ve done before but forgot how I ended up doing it. So whenever I solve a problem I feel like coming across again I’ll publish my solution here. And maybe this will help someone like-minded later on.

So let’s get started!

Fix locale setting on Ubuntu EC2 instances

Fri, 29 Mar 2013 17:00:00 +0100

After booting a fresh EC2 instance with Ubuntu 12.10 this showed up right after login:

WARNING! Your environment specifies an invalid locale.
This can affect your user experience significantly, including the
ability to manage packages.

And when running some apt-get commands I got this:

perl: warning: Setting locale failed.
perl: warning: Please check that your locale settings:
    LANGUAGE = (unset),
    LC_ALL = (unset),
    LC_CTYPE = "de_DE.UTF-8",
    LANG = "en_US.UTF-8"
    are supported and installed on your system.
perl: warning: Falling back to the standard locale ("C").
locale: Cannot set LC_CTYPE to default locale: No such file or directory
locale: Cannot set LC_ALL to default locale: No such file or directory

There are plenty of supposed solutions out there but none worked for me but this one:

# add this line to /etc/environment; then reboot

LC_ALL="en_US.UTF-8"

There are some alternative commands you could try:

$ sudo locale-gen de_DE.UTF-8 en_US.UTF-8
$ sudo apt-get install language-pack-en

Develop memcached web apps with XAMPP under Mac OS X

Tue, 30 Mar 2010 18:00:00 +0200

While developing scalable web applications you will come across memcached at some point. Memcached is a free & open source, high-performance, distributed memory object caching system.

XAMPP is great for development in a local environment but does not come with a php memcached extension preinstalled. Since there are 2 good memcached php extensions in the PECL repository (memcached and memcache) it could be as easy as installing them through XAMPPs PECL installer. Unfortunately XAMPP for Mac (1.7.3) is still compiled for 32bit and the PECL installer would create a 64bit snow leopard extension. So let’s do it manually by setting some 32bit flags…

Install memcache PHP extension (2.2.5) for XAMPP (1.7.3) under Mac OS X 10.6 Snow Leopard (10.6.2).

Prerequisites

make sure Apple Developer Tools (Xcode) are installed
make sure XAMPP Developer Package is installed

Installation Process

$ cd /tmp
$ pecl download memcache
$ tar xzf memcache-2.2.5.tgz
$ cd memcache-2.2.5
$ /Applications/XAMPP/xamppfiles/bin/phpize-5.3.1

The next line looks just a bit complicated because it tries to deal with architecture problems between XAMPP (compiled for 32bit) and Snow Leopard (compiles everything by default to 64bit):

$ MACOSX_DEPLOYMENT_TARGET=10.6 CFLAGS='-O3 -fno-common -arch i386 -arch x86_64' LDFLAGS='-O3 -arch i386 -arch x86_64' CXXFLAGS='-O3 -fno-common -arch i386 -arch x86_64' ./configure --with-php-config=/Applications/XAMPP/xamppfiles/bin/php-config-5.3.1

$ make
$ sudo make install

Change XAMPPs php.ini to load the extension:

# below [Dynamic Extensions]

extension=memcache.so

Those steps enable you to use memcached in your PHP Code. But to actually test the application and caching in your local development environment you have to start the memcached daemon. Fortunately memcached got already installed by the Mac OS X Developer Tools (Xcode).

Just go ahead and start the memcached daemon:

$ memcached -m 8 -l 127.0.0.1 -p 11211 -d

-m 8 limits memcached to use a maximum of 8MB RAM to operate -l 127.0.0.1 -p 11211 is the ip and port to listen on -d tells it to start as a daemon

(instead of -l and -p you can also use -s to use an unix domain socket)