Urban Sandén

I Built an Art Frame Powered by Raspberry Pi

Wed, 07 Jan 2026 00:00:00 GMT

I wanted to have a nice digital frame on the wall in my office to display art and family pictures. I had an old Raspberry PI laying around and decided to put it to good use.

Stuff

A Raspberry Pi. I had an Raspberry Pi 2 laying around, works perfectly for this. (~$25)
A TV or a monitor. I bought a 32" JVC TV from a local thrift store. (~$20)
I built a simple wooden frame to make it look nice. (~$10) (Nice to have)

All together under $60.

View images

I'm using feh. It's a powerful, fast, and lightweight imlib2-based X11 image viewer that can be run from command-line arguments.

sudo apt-get install feh

My Art frame feh script

I created a simple art.sh bash script to control my art frame.

DISPLAY=:0.0 XAUTHORITY=/home/pi/.Xauthority /usr/bin/feh -q -p -Z -F -R 60 -Y -D 10.0 -r /home/pi/Pictures/art

This script runs the feh image viewer with specific options. Here's a breakdown of what each part does:

DISPLAY=:0.0 tells the system to run the command on the primary display (:0.0). This is useful when running graphical applications from a script or remotely.

Sets the X Authority File: XAUTHORITY=/home/pi/.Xauthority ensures the script has permission to access the X server (the graphical interface). This is needed when running the script as a different user or from a startup process. Runs feh (a lightweight image viewer) with specific options:

/usr/bin/feh specifies the path to the feh executable.
-q (quiet mode) suppresses unnecessary output.
-p (preload images) loads images into memory for faster transitions.
-Z (zoom to fill) ensures images fit the screen while maintaining their aspect ratio.
-F (fullscreen) runs the slideshow in fullscreen mode.
-R 60 (reload interval) refreshes the image list every 60 seconds, useful if new images are added to the directory.
-Y (hide cursor) hides the mouse cursor when the slideshow is running.
-D 10.0 (display time) sets each image to be shown for 10 seconds before transitioning.
-r (recursive mode) includes images from subdirectories. Specifies the Image Directory:

/home/pi/Pictures/art is the directory where feh looks for images to display in the slideshow.

To start i just run ssh username@192.168.XX.XX 'nohup bash art.sh > /dev/null 2>&1 &'

Rotate the screen

Since my frame is in portrait mode, I needed to rotate the screen.

sudo nano /boot/config.txt
display_rotate=1 (90 deg)
sudo reboot

Controlling the art frame with Raycast script commands or iOS Shortcuts

I created a few simple scripts to control the art frame remotely. You can use iOS Shortcuts or Raycast to run these commands over SSH.

I keep a simple folder on my ~/Desktop called art-frame where I put images to be transferred to the art frame.

Raycast script command example

I created a Raycast extension to control the art frame.

Image optimization tips

A few scripts to help you optimize your images for the art frame.

Make all images in 9:16 ratio using Imagemagick

Resize and crop all jpg images in the current directory to fit a 9:16 aspect ratio (1080x1920 pixels) using ImageMagick:

mogrify -path . -resize 1080x1920^ -gravity center -extent 1080x1920 *.jpg

Script to make a single image 9:16 with background color

This script extends the outer edges of an image to fit a 9:16 ratio using the color of the top-left pixel as the background color.

#!/usr/bin/env bash

# Usage: ./make_9_16.sh input.jpg
# Requires: ImageMagick

input="$1"

if [ -z "$input" ]; then
    echo "Usage: $0 input_image"
    exit 1
fi

# Extract base name and extension
filename="${input%.*}"
extension="${input##*.}"
output="${filename}-output.${extension}"

# Detect background color from the top-left pixel
bgcolor=$(magick "$input" -format "%[pixel:p{0,0}]" info:-)

# Target size (change as needed)
target_width=1080
target_height=1920

# Resize proportionally and pad to 9:16
magick "$input" \
    -resize "${target_width}x${target_height}" \
    -gravity center \
    -background "$bgcolor" \
    -extent "${target_width}x${target_height}" \
    "$output"

echo "Saved: $output (background color: $bgcolor)"

Edit Videos With FFmpeg

Tue, 23 Sep 2025 00:00:00 GMT

FFmpeg is a powerful command-line tool for working with video, audio, and images. It can do it all. It has support for literally everything and it powers everything from Netflix to YouTube. You can find it under the hood of a lot of video tools.

FFmpeg can speed up your workflow dramatically. Here are some of the tools I use often:

1. Add text on top of a video

This is a nice command just to add a title or caption to a video. You can customize the font, size, color, position, and duration of the text.

ffmpeg -hide_banner -stats -y \
  -i input.mp4 \
  -vf "drawtext=fontfile='/System/Library/Fonts/Helvetica.ttc':text='My Custom Title':fontcolor=white:fontsize=256:x=(w-text_w)/2:y=200:line_spacing=40:enable='lte(t,5)'" \
  -c:v h264_videotoolbox -b:v 8M \
  -c:a aac -b:a 192k \
  -movflags +faststart \
  output.mp4

ffmpeg → runs the ffmpeg program
-hide_banner → suppress startup banner (build/config info)
-stats → show encoding progress (fps, size, bitrate, time)
-y → overwrite output file without asking
-i input.mp4 → input video file
-vf → apply a video filter
drawtext= → overlay text filter
text='My Custom Title' → hardcoded text string
fontfile='/System/Library/Fonts/Helvetica.ttc → Use Helvetica
fontcolor=white → set text color to white
fontsize=256 → text size in pixels
x=(w-text_w)/2 → center text horizontally
y=200 → place text 200px from top
line_spacing=40 → vertical spacing between lines
enable='lte(t,5)' → show text only for first 5 seconds
-c:v h264_videotoolbox → use Apple’s hardware H.264 encoder
-b:v 8M → set video bitrate to 8 Mbps
-c:a aac → use AAC audio codec
-b:a 192k → set audio bitrate to 192 kbps
-movflags +faststart → optimize MP4 for web playback
output.mp4 → output file name

2. Merge multiple videos into one

Just create a new file with all the videos stitched together.

ffmpeg -f concat -safe 0 -i <(for f in *.mp4; do echo "file '$PWD/$f'"; done) -c copy output.mp4

3. Create a Instagram Story Video from Images

If you want to stitch multiple images into a 9x16 vertical video (perfect for Instagram Stories), you can do this:

ffmpeg -framerate 1/1.5 -i %d.jpg -vf "scale=1080:1920,format=yuv420p" -c:v libx264 -crf 23 -preset fast output.mp4

This command:

-framerate 1/1.5 → Each image shows for 1.5 seconds
scale=1080:1920 → Sets the video to portrait size (9:16 ratio)
libx264 → High-quality compression for MP4

4. Convert MP4 to GIF

Need to make lightweight GIFs? This works even on low-power devices like the Raspberry Pi:

ffmpeg -i input.mp4 -vf "fps=15,scale=1280:-1:flags=lanczos" output.gif

Key parameters:

fps=15 → Keeps the file size reasonable
scale=1280:-1 → Resizes while preserving aspect ratio

5. Adjust a GIF to Fullscreen Size

This is a small trick I use on my Raspberry Pi powered art frame.

If your GIF doesn`t fill the screen, you can extend it with a background color. Use a color picker to grab a matching background:

First check the resolution on your display:

On macOS:

system_profiler SPDisplaysDataType | grep Resolution

On Linux

xrandr | grep '*'

Then use ImageMagick to resize and add a background color:

magick square.gif -coalesce -background "#333333" -gravity center -extent 656x1216 -layers optimize output.gif

6. Convert GIF to MP4

Converting GIFs to MP4 makes them smaller and more web-friendly:

ffmpeg -i input.gif -c:v libx264 -preset slow -crf 23 -pix_fmt yuv420p output.mp4

7. Create a GIF from MP4

A smaller optimized for web

ffmpeg -i input.mp4 -vf "fps=10,scale=320:-1:flags=lanczos" -c:v pam -f image2pipe - | convert -delay 10 - -loop 0 -layers optimize output.gif

A higher-quality GIF:

ffmpeg -i input.mp4 -vf "fps=10,scale=320:-1:flags=lanczos" -c:v pam -f image2pipe - | convert -delay 10 - -loop 0 -layers optimize output.gif

8. Convert Video to a Sequence of Images

This is great for making thumbnails or analyzing video frames:

ffmpeg -i "input.mp4" "frames/%04d.jpg"

9. Lower Audio Volume

Quickly adjust audio levels:

ffmpeg -i ac.mp4 -af volume=7 -vcodec copy ac2.mp4

10. Speed Up a Video

Perfect for timelapse-style edits:

ffmpeg -i mp4.mp4 -filter:v "setpts=PTS/6" output.mp4

filter:v "setpts=PTS/6": Applies a video filter that modifies the presentation timestamp (PTS) of each frame
setpts is the filter that controls the speed of video playback
PTS/6 means each frame will be displayed for 1/6th of its original duration, resulting in 6x faster playback

11. Add Audio to a Video Recording

Add background music:

ffmpeg -i 1.mp4 -i audio.mp3 -map 0 -map 1:a -c:v copy -shortest output.mp4

12. Convert from MOV to MP4

Fast rewrapping without re-encoding:

ffmpeg -i movie.mov -vcodec copy -acodec copy out.mp4

13. Change Video Resolution

Resize videos easily:

ffmpeg -i input.avi -s 720x480 -c:a copy output.mkv

14. Remove Audio from a Video

Mute a video while keeping the visuals intact:

ffmpeg -i input.mp4 -an output.mp4

15. Extract Images from a Video

Grab one image per second:

ffmpeg -i input.mp4 -r 1 -f image2 image-%2d.png

Final Thoughts

FFmpeg can look intimidating at first, but once you get comfortable, it becomes one of the fastest ways to manipulate media.

Darken or Lighten the Background Color in CSS Using Color-Mix() and Oklch()

Sun, 15 Dec 2024 00:00:00 GMT

One of the last pieces when moving a Sass codebase to vanilla CSS was to replace the darken() and lighten() color functions in Sass. Now it's easier than before. There are good browser support for both color-mix() and the oklch() color space. A quick example:

/* Darken background color in CSS, two options
Instead of using Sass lighten() and darken()
Urban Sanden 2024
*/

@layer demo;

@layer demo {
  :root {
    --first-color: hotpink;
    --second-color: brown;
    --third-color: dodgerblue;
    --fourth-color: purple;
  }

  .buttons {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }

  .first {
    background-color: var(--first-color);
  }

  .second {
    background-color: var(--second-color);
  }

  .third {
    background-color: var(--third-color);
  }

  .fourth {
    background-color: var(--fourth-color);
  }

  .first:hover {
    /*
  The color-mix() functional notation takes two <color> values and returns the result of mixing them in a given colorspace by a given amount.
  https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix
  */
    background-color: color-mix(in srgb, var(--first-color), #000 20%);
  }

  .second:hover {
    /*
  The oklch() expresses a given color in the Oklab color space. oklch() is the cylindrical form of oklab(), using the same L axis, but with polar Chroma (C) and Hue (h) coordinates.
  https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch
  */
    background-color: oklch(from var(--second-color) calc(l - 0.2) c h);
  }

  .third:hover {
    /*
Lighten
  */
    background-color: color-mix(in srgb, var(--third-color) 60%, white);
  }

  .fourth:hover {
    /*
Lighten
  */
    background-color: oklch(from var(--fourth-color) calc(l + 0.2) c h);
  }
}

How to Import and Show All the Components From a Npm Package

Tue, 15 Oct 2024 00:00:00 GMT

I was working on an npm package with React Components, and this is just a short note to self on how to import all the components from the package and list them.



export const IconDisplay = () => (
  <ul>
    {Object.entries(Icons).map(([iconName, IconComponent]) => (
      
    ))}
  </ul>
);

interface IconItemProps {
  name: string;
  Component: React.ComponentType;
}

const IconItem = ({ name, Component }: IconItemProps) => (
  <li>
    
    <p>{name}</p>
  </li>
);

Now, use it like this

How to Create a Spotify Playlist From a List of Tracks

Mon, 22 Apr 2024 00:00:00 GMT

Very often you come across a plain list of tracks of good songs, but with no playlist on Spotify, Apple Music or TIDAL etc is linked. For example I often see it on YouTube in the video description field. Often I like the songs so much I want to add it to a real playlist. I create a little script for this using the Spotify Web API.

Lets get started!

Create a Spotify application

Head over to Spotify for Developers
Create an App, give it a name and set a redirect URI for example http://localhost:8080/callback
Select “Web API” on the question "Which API/SDKs are you planning to use"?
Click Save and copy your Client ID and Client Secret, you will need these in your a secrets file .env shortly.

Setup a project

Initialize a new project using npm init -y
Install dependencies npm i dotenv express spotify-web-api-node
Create a tracks.txt with a song on each line for example:

Four Walls - Constellations
Randee Jean - You Got It
Cengiz - On On On
Don Pascal - Cape Verdean Bruk (Haze City Remix)
Future Disco - Future Disco Poolside 4 (DJ Mix)
28 Nathan Haines - Right Now (feat. Marlena Shaw)

Create an .env file and enter your client ID and secret like this

SPOTIFY_CLIENT_ID=XXX
SPOTIFY_CLIENT_SECRET=XXX

Create a .index.js. First define a few variables, port and playlist name

const PORT = 8080;
let playlistName = "";

Then instantiate the wrapper

const spotifyApi = new SpotifyWebApi({
  clientId: process.env.SPOTIFY_CLIENT_ID,
  clientSecret: process.env.SPOTIFY_CLIENT_SECRET,
  redirectUri: "http://localhost:8080/callback",
});

Define the request to the /login endpoint. The URL is used to initiate the authorization flow. We need to specify the scopes needed to define the access permissions the application requests from the user. We then redirect the user's browser to the generated authorization URL. In my example I'm using three different scopes to be able to do what I want. Read more about Spotify Scopes here.

app.get("/login", (req, res) => {
  const authorizeURL = spotifyApi.createAuthorizeURL(
    ["playlist-modify-public", "playlist-modify-private"],
    "state"
  );
  res.redirect(authorizeURL);
});

Define the request to the /callback endpoint. When the user will visit/login it redirects to the http://localhost:8080/callback?code=AQDD61QPdOo)XXXXX where XXXXX is the access token we need to use the Spotify Web API. If we are successful we proceed with the the createPlaylistAndAddTracks.

app.get("/callback", async (req, res) => {
  const { code } = req.query;
  try {
    const data = await spotifyApi.authorizationCodeGrant(code);
    const { access_token, refresh_token } = data.body;
    spotifyApi.setAccessToken(access_token);
    spotifyApi.setRefreshToken(refresh_token);
    console.log("✅ Successfully obtained access token: ", access_token);
    res.send("✅ Authorization successful! You can now close this window.");
    await createPlaylistAndAddTracks();
  } catch (err) {
    console.log("Error during authorization:", err);
    res.send("Authorization failed. Please try again.");
  }
});

Define the createPlaylistAndAddTracks method. We read the contents of the tracks.txt file and for each track we run searchAndAddTrack.

async function createPlaylistAndAddTracks() {
  try {
    const data = await spotifyApi.createPlaylist(playlistName, {
      description: "A nice playlist",
      public: false,
    });
    const playlistId = data.body.id;
    const cleanedLines = await processTracksFile("tracks.txt");
    await Promise.all(
      cleanedLines.map((trackInfo) => searchAndAddTrack(trackInfo, playlistId))
    );
    console.log("All tracks added to playlist!");
    process.exit();
  } catch (err) {
    console.log("Error creating playlist or adding tracks:", err);
  }
}

Now we define the searchAndAddTrack method which does a search on Spotify, if a result was found it adds it to the playlist using the addTracksToPlaylist method.

async function searchAndAddTrack(trackInfo, playlistId) {
  try {
    const [artist, song] = trackInfo.split(" - ");
    const data = await spotifyApi.searchTracks(
      `artist:${artist} track:${song}`,
      { limit: 1 }
    );
    const track = data.body.tracks.items[0];
    if (track) {
      const trackId = track.id;
      console.log(`✅ Added track for song ${artist} - ${song}`);
      await spotifyApi.addTracksToPlaylist(playlistId, [
        `spotify:track:${trackId}`,
      ]);
    } else {
      console.log(`🚫 Track not found for ${artist} - ${song}`);
    }
  } catch (err) {
    console.log("Error searching and adding track:", err);
  }
}

Start the Express application on port 8080 using node index.js

app.listen(PORT, () => {
  process.stdout.write('\x1B[2J\x1B[0f'); // Just clear the shell
  console.log(`Server is listening on port ${PORT}.`);
  process.stdout.write(
    "This tool will convert tracks from a text file to a Spotify playlist."
  );
  process.stdout.write("Give the playlist a name: ");
  process.stdin.once("data", (data) => {
    playlistName = data.toString().trim();
    console.log(
      "✅ Will create and add tracks to this playlist: ",
      playlistName
    );
    console.log(
      "\n\nNow Please open your browser and navigate to `http://localhost:8080/login` to authorize the application"
    );
  });
});

Now the app is running

Server is listening on port 8080.
This tool will convert tracks in text file to a Spotify playlist
Give the playlist a name: Soulful House, Rare Grooves
✅ Will create and add tracks to this playlist:  Soulful House, Rare Grooves

Now Please open your browser and navigate to http://localhost:8080/login to authorize the application

The user visits http://localhost:8080/login and then the tracks are starting to add to the new playlist. Keep in mind, not all music is available on streaming platforms, so there's a chance that some tracks may not be found.

✅ Successfully obtained access token:  XXXXX
🚫 Track not found for Future Disco - Future Disco Poolside  (DJ Mix
✅ Added track for song Nathan Haines - Right Now (feat. Marlena Shaw
✅ Added track for song Cengiz - On On On
✅ Added track for song Four Walls - Constellations
✅ Added track for song Randee Jean - You Got It
✅ Added track for song Don Pascal - Cape Verdean Bruk (Haze City Remix

🎷 Enjoy the music!

Add Jira Ticket Numbers to Git Commits Using Git Hooks

Wed, 10 Apr 2024 00:00:00 GMT

Why

At work we use JIRA and usually use a consistent branch naming system where all branches and commits should include the ticket name.

For example branches looks like this:

feature/dev/PROJ-1234-branch-name-example

and commits:

PROJ-1234 Fix tests

Setting up the Git Hook

Go to the git hooks directory inside your repo.

cd .git/hooks/

Create a file called prepare-commit-msg

touch .git/hooks/prepare-commit-msg

Make it executable.

chmod +x .git/hooks/prepare-commit-msg

Add the script

Open prepare-commit-msg in your editor and paste the following script:

#!/bin/bash

# Create .git/hooks/prepare-commit-msg
# Run before using: chmod +x prepare-commit-msg

# Example: If the branch is called ex feature/dev/PROJ-1234-branch-name-example or
# feature/PROJ-6789/PROJ-1234-another-branch-name-example
# then the commit will be "PROJ-1234 Your commit message"

FILE=$1
MESSAGE=$(cat "$FILE")
BRANCH_NAME=$(git rev-parse --abbrev-ref HEAD)
SEPARATOR=" "

# Extract ticket (handles feature/PROJ-1234, PROJ-1234, etc)
TICKET=$(echo "$BRANCH_NAME" | grep -Eo '[A-Za-z]+-[0-9]+' | head -n 1 | tr '[:lower:]' '[:upper:]')

# Only modify if a ticket was found and it's not already in the commit message
if [[ -n "$TICKET" && "$MESSAGE" != "$TICKET"* ]]; then
  echo "$TICKET$SEPARATOR$MESSAGE" > "$FILE"
fi

This shell script extracts the JIRA ticket number from your branch name and appends it to your commit message.

Enjoy!

Update Transitive Dependencies in Npm

Thu, 07 Sep 2023 00:00:00 GMT

Let's say you are working with a project that has transitive dependencies that have vulnabilities. Updating the main library might not be enough. The use case for this is when there is a security vulnerability and you have to update a nested dependency otherwise your project would be vulnerable.

Check the dependency tree

The ls command is used to list the dependency tree of a specific package in your Node.js project.

npm ls packagename

Example output:

npm ls third-package-name
myproject@0.1.0 /Users/username/path/to/myproject
├─┬ package-name@3.12.0
│ └─┬ another-package-name@4.12.0
│   └── third-package-name@9.17.0
├─┬ ...

When you perform security scans and audits with Snyk or Fossa or a similar tool, you may discover that for example third-package-name@9.17.0 has a vulnability. Updating the library or package using this transitive package is the best, but if this is not possible your could pin it like this.

Use npm overrides

Since npm 8.3, npm has built-in support for overriding transitive dependencies through the overrides field in package.json. This is the native equivalent of yarn's selective dependency resolutions — no extra packages or preinstall scripts needed.

Add an overrides key to package.json

  "overrides": {
    "third-package-name": "^12.0.0"
  }

Where as an example 12.0.0 is the updated version that doesn't have vulnabilities.

If you only want to override the version when it's nested under a specific parent, you can scope it:

  "overrides": {
    "package-name": {
      "third-package-name": "^12.0.0"
    }
  }

Install and update the transitive dependency

Install again

npm i

Now, when you check the dependency tree agin, you can see it has been fixed:

npm ls third-package-name
myproject@0.1.0 /Users/username/path/to/myproject
├─┬ package-name@3.12.0
│ └─┬ another-package-name@4.12.0
│   └── third-package-name@12.0.0
├─┬ ...

Test Local Npm Packages With Ease

Mon, 19 Jun 2023 00:00:00 GMT

When working with npm packages, it is good to be able to test it locally without the necessity of publishing it to npm. Here are some ways you can achieve that.

Use npm link

You can create a symlink like this.

In the package:

npm link

In the project that uses the package:

npm link my-package

Now the packages are linked.

To unlink:

npm unlink my-package

Install locally

Install by just referencing the local path inside package.json

{
  "name": "my-project",
  "dependencies": {
    "@myuser/my-package": "file:../lib"
  }
}

And then just install

npm i

Install locally by using npm pack

If you want, you can package the local package and use it locally. Here you are using the same artifact that gets uploaded to npm.

npm pack

This command is generating this file my-package-X-X-X.tgz. Where X.X.X is the semver version.

You can now reference this tarball directly in your main project inside package.json

"dependencies": {
  "@myuser/my-package": "file:../lib/my-package-X-X-X.tgz"
}

Use the package

Just one example of importing a file from the package.

Bonus: Pre-install a local package with the main project install

Maybe you are developing a package and making a Documentation website for it, or another project that is using lib.

.
├── docs
├── lib

Then you can install the package's dependencies upon installation in the docs project. Using the preinstall built in npm script, it will install this first upon npm i in he docs project.

"scripts": {
    "preinstall": "npm install ../lib/"
}

MDX and Inline Images in Gatsby

Fri, 02 Jun 2023 00:00:00 GMT

1. Plain old images, no processing

This is the simplest option. When you do this, images won't be processed in any way by Gatsby.

Place images in static/images
Reference like this ![A blue bicycle](/static/images/bicycle.jpg)

2. Images processed by Sharp and gatsby-plugin-image

This is easy to miss in the Docs. If you do this, the images will be processed by sharp and appear as if you placed them in a gatsby-plugin-image component. So you benefit from allt he goodies in, responsive images/placeholders/modern image formats and more.

Place images in src/images
Install npm install gatsby-plugin-image gatsby-plugin-sharp gatsby-source-filesystem gatsby-transformer-sharp
Configure gatsby-config.js or if you use Gatsby 5+ and ESM you edit gatsby-config.mjs

plugins: [
  "gatsby-plugin-image",
  {
    resolve: `gatsby-plugin-mdx`,
    options: {
      gatsbyRemarkPlugins: [
        {
          resolve: `gatsby-remark-images`,
          options: {
            maxWidth: 1200,
          },
        },
      ],
    },
  },
  "gatsby-plugin-sharp",
  "gatsby-transformer-sharp",
  {
    resolve: "gatsby-source-filesystem",
    options: {
      name: "images",
      path: "./src/images/",
    },
    __key: "images",
  }
]

Reference like this ![A blue bicycle](../images/bicycle.jpg)

3. Use a separate React component that uses Gatsby Image

The two image components and is meant to be used in JSX, not in MDX. You can however, if you want; create a separate Image component.





export const Image = ({ src, alt }) => {
  const data = useStaticQuery(graphql`
    query {
      allFile {
        nodes {
          relativePath
          childImageSharp {
            gatsbyImageData(
              placeholder: BLURRED
              formats: [AUTO, WEBP, AVIF]
            )
          }
        }
      }
    }
  `);

  const imageNode = data.allFile.nodes.find(
    (node) => node.relativePath === src
  );

  if (!imageNode || !imageNode.childImageSharp) {
    return <div>Image not found</div>;
  }

  const image = getImage(imageNode.childImageSharp);

  return (
    <div>
      
    </div>
  );
};

And then use like this:

Conclusion

Option 1) – Don't process my images. I'll do it myself
Option 2) – I want to let Gatsby process my images and benefit from the goodies in gatsby-plugin-images. Will peform best regarding SEO, Web Core Vitals etc.
Option 3) – Just to show an alternative way using a custom React component. But i recommend using 2).

Getting Jsconfig and VS Code to Work Together for Your Gatsby Site

Thu, 20 Apr 2023 00:00:00 GMT

What is jsconfig.json?

The presence of jsconfig.json file in a directory indicates that the directory is the root of a JavaScript Project. The jsconfig.json file specifies the root files and the options for the features provided by the JavaScript language service.

Tip: jsconfig.json is a descendant of tsconfig.json, which is a configuration file for TypeScript. jsconfig.json is tsconfig.json with "allowJs" attribute set to true.

VSCode uses a jsconfig.json file to aid your JavaScript language service and significantly improve your development experience.

Learn more about jsconfig

Create a file in the root of your project jsconfig.json

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "jsx": "react",
    "checkJs": true,
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "resolveJsonModule": true,
    "moduleResolution":"node",
    "baseUrl": "src",
    "paths": {
      "*": ["*", "src/*"]
    }
  },
  "paths": {
    "components/*": ["./src/components/*"],
    "utils/*": ["./src/utils/*"]
  },
  "typeAcquisition": {
    "enable": true
  },
  "typingOptions": {
    "enableAutoDiscovery": true
  },
  "compileOnSave": true,
  "allowJS": true,
  "include": ["src/**/*"]
}

Webpack aliases

If you have set up Webpack aliases in gatsby-node.js, to make your imports nicer. Ex like import { Stuff } from "components/stuff" you can specify this in paths: {}

JSON data

If you import JSON data you can use json"resolveJsonModule": true. With that being done, you should be able to import a JSON file as a JavaScript module.

VS Code settings

To make your configuration smooth and play nice with VS Code I recommend these settings.

{
	...
  "[javascript]": {
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true
  },
  "js/ts.implicitProjectConfig.checkJs": true,
  "javascript.validate.enable": false,
  "[scss]": {
    "editor.formatOnSave": true,
    "editor.formatOnPaste": true
  },
  "editor.codeActionsOnSave": {
    "source.organizeImports": true,
    "source.addMissingImports": true
  },
  "emmet.includeLanguages": { "javascript": "javascriptreact" }
	...
}

Notes:

You can use javascript.validate turns off all error reporting for JS files. But it doesn't change how TypeScript operates. You need to set javascript.implicitProjectConfig.checkJs to specify the settings for an implicit jsconfig project. This is the equivalent of having a jsconfig.json with the contents { "compilerOptions": { "checkJs": true}}

Emmet

Emmet is always handy to have. You can include "emmet.includeLanguages": { "javascript": "javascriptreact" } to enable Emmet support for JSX. The makes typoing HTML in React (.js) so much easier. And faster.

Now you can get full auto-complete and file browsing support in your IDE!

Explore Discogs From the Currently Playing Album Using Raycast and Lastfm

Fri, 17 Feb 2023 00:00:00 GMT

If you're looking for a fast and highly extensible launcher, Raycast is an excellent choice. As someone who has used Alfred for a long time, I recently made the switch and have been impressed with the features and functionality of Raycast. One of the things I often do when listening to music is browse Discogs to explore new albums and records. With this script command, I can open Discogs and automatically search for the current album I'm listening to, which I find very handy. To fetch the music I'm currently listening to, I use LastFM to scrobble tracks from TIDAL. Many music services and apps supports LastFM natively, or as plugins. Even though some apps supports getting the currently playing track/artist/album via Apple Script, it's not possible for all apps. That's why I like the option of using LastFM, since I already scrobble all my music.

Raycast scripts

Raycast executes your local scripts and enables you to perform frequent and useful commands without having to open a terminal window. Getting started with Raycast Scripts

Under Raycast Preferences you can go to "Extensions → Scripts and find your scripts. Manage them, set aliases, record a hotkey and more.

Creating the script

When you launch Raycast, type "script" and key down to "Create Script Command". Select template, mode, title, description and more.

All scripts have parameters to instruct Raycast on how to process and output your request. You can read more about them here. In the example, we have set the @raycast.mode parameter to silent, which means that the script will run instantly and silently, allowing you to access the newly opened page when you are ready.

#!/usr/bin/env bash

# Required parameters:
# @raycast.schemaVersion 1
# @raycast.title Discogs Now Playing
# @raycast.mode silent
#
# Optional parameters:
# @raycast.icon icon.png
# @raycast.iconDark icon.png
#
# Documentation:
# @raycast.description Open Discogs and explore the currently playing album
# @raycast.author Urban Sanden
# @raycast.authorURL https://urre.me

# Read secrets from the .env file
source "./.env"

# Specify LastFM API and specify JSON as the format
URL="http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=${DISCOGS_USER}&api_key=${DISCOGS_API_KEY}&format=json"

# Query the LastFM API with cURL
result=`curl -s ${URL}`

# Get currently playing track using jq, Artist and Album name, flatten and remove whitespace
nowplaying=`echo ${result} | jq -r '[.recenttracks.track[0].artist["#text"], .recenttracks.track[0].album["#text"]] | flatten[]' | xargs`

# Now open Discogs in the browser
open "https://discogs.com/search?q=${nowplaying}"

I'm using jq. It's a lightweight and flexible command-line JSON processor. You can install it with brew install jq

LastFM credentials

Create an .env file with your credentials

DISCOGS_API_KEY="XXX"
DISCOGS_USER="XXX"

How to use it

Play some music, open Raycast and start typing Disc...

<a class="btn" href="https://github.com/urre/raycast-discogs-lastfm">Get it on GitHub</a>

<video id="video" muted controls loop autoPlay playsInline class="lazy" poster="https://res.cloudinary.com/urre/image/upload/v1676616640/khi9ss3vbavnaxod3qyr.jpg" title="How to use the Raycast script command"

<source
	data-src="https://res.cloudinary.com/urre/video/upload/v1676618875/tt9wyiayww0useyzz1ne.mp4"
	type="video/mp4"
/>
Your browser does not support HTML5 video.

</video>

Upload a File From Finder to Cloudinary Using Automator

Fri, 15 Jul 2022 00:00:00 GMT

Cloudinary is awesome. It's cheap, fast, stores a lot of images even in the free tier and doesn't take up data space in your apps and projects. You images loads fast everyhere with the CDN and you can also create transformations programmatically and on the fly without the need for graphic designers and fancy editing tools. Change formats, resize, crop and more.

Wouldn't it be nice to upload images from your computer, ex blog images, screenshots etc directly to the Cloudinary Media Library and then be able to get back and paste a CDN link anywhere?

Install the Cloudinary CLI

Prerequisite: To use the Cloudinary CLI, you need Python 3.6 or later.

To use it in scripts or in Automator, first install the CLoudinary CLI

pip3 install cloudinary-cli

To make all your cld commands point to your Cloudinary account, set up your CLOUDINARY_URL environment variable.

export CLOUDINARY_URL=cloudinary://XXX:XXX@yourname

Check your configuration by running:

cld config

Create the Automator Workflow

Open Automator
Create a new Quick Action, give it a name ex. "Cloudinary"
Set Workflow Recieves
Select folders and files, and Finder
Add a Run Shell Script and drag it over to the main window:

for f in "$@"
do
	/opt/homebrew/bin/cld uploader upload "$f" | /opt/homebrew/bin/jq -r '.secure_url' | /usr/bin/pbcopy
done

I've added a pipe command here to copy the URL to the uploaded image into your clipboard. You'll need jq to parse the JSON and extract the HTTPS link.

This screenshot is in Swedish, but you get the idea.

How to use it

Right click on a file in Finder
Select "Cloudinary" under the Quick Action list
Just cmd + v in your project! The CDN URL is already in your clipboard.

Create a Moodboard From an Instagram Collection

Tue, 26 Apr 2022 00:00:00 GMT

You are probably like me, you tap and save items on Instagram to collections. When you save a post, it's visible to you from a private section of your profile.

But, what if you need to create a little collage or moodboard from the images. Well, there are a number of services that can download Instagram posts, but I wanted to use something else. Just some JavaScript in the browser developer tools, cURL to download the images, and ImageMagick to stich together a collage. Let's go!

Note: this is meant to be used for personal use only.

Prerequisites

The things you need to do this is ImageMagick, a web browser of choice and a terminal.

ImageMagick is free software that you can use to create, edit, compose, or convert digital images. It runs everywhere, on Linux, Windows, macOS, iOS, Android OS, and more. It is distributed under a derived Apache 2.0 license.

It's easy to install, you can install ImageMagick using Homebrew

brew install imagemagick

Visit one of your saved Instagram collections

https://www.instagram.com/USERNAME/saved/example-name/XXXXXX

<figure class="img-wide"> <img src="https://res.cloudinary.com/urre/image/upload/v1650904801/screenshots/gwpcxyritf1tph01odqy.webp" class="img-wide img-border" loading="lazy" alt="Collection"/> <figcaption class="figcaption figcaption-arrow">I used one I've got called "Tables".</figcaption> </figure>

Open Developer Tools

The devtools live inside your browser in a subwindow. To open in Chrome, press Ctrl Shift J (on Windows) or Ctrl Option J (on Mac).

Click on the Console tab and paste this code:

imgs = document.querySelectorAll('article img')
downloadCommands = []

imgs.forEach((item, i) => {
	downloadCommands += `curl ${item.currentSrc} --output ./images/${i+1}.jpg\n`
})

// Copy the list of download commands to your clipboard
copy(downloadCommands)

Download the images using cURL

Open your terminal app
Paste what's in your clipboard ⌘ + v
Press Enter

All the images from the Saved collection will now download into a folder called "images", relative the current path. If you are on your desktop the path will be ~/Desktop/images.

<figure class="img-wide"> <img src="https://res.cloudinary.com/urre/image/upload/v1650904919/screenshots/u60ushmqtfrgixdylukg.webp" class="img-wide img-border" loading="lazy" alt="Download images"/> <figcaption class="figcaption figcaption-arrow">Now all the images from the collection are downloaded.</figcaption> </figure>

Create color palettes images

Create color palettes from the images. Use this command to exctract unique colors from the images. I just used one dominant color from each image, but you can customize how you want.

convert ./images/*.jpg -colors 1 -unique-colors -scale 20000% -resize 1280x1280! ./images/color-scheme.jpg

Create a color collage

This creates a color scheme collage from all the color palettes. Grab all the color palette images and add them to a single collage.

convert ./images/color-scheme*.jpg -gravity center -background none -extent 512x512 miff:- | montage - +repage -background white -tile 4x3 -border 80 -bordercolor white -geometry +5+5 collage-color-scheme.jpg

<figure class="img-wide"> <img src="https://res.cloudinary.com/urre/image/upload/v1650905288/screenshots/tyzaqqbvigitv6krequa.webp" class="img-wide img-border" loading="lazy" alt="The color scheme collage"/> <figcaption class="figcaption figcaption-arrow">The color scheme collage</figcaption> </figure>

Create the moodboard

This command creates the moodboard, with all the images and the color palettes. I used a grid with 4 columns and 3 rows.

convert ./images/*.jpg -gravity center -background none -extent 512x512 miff:- | montage - +repage -gravity center -background white -tile 4x3 -border 80 -bordercolor white -geometry +3+4 collage.jpg

<figure class="img-wide"> <img src="https://res.cloudinary.com/urre/image/upload/v1650905626/screenshots/wgwzhmhmigc4za3ndnv5.webp" class="img-wide img-border" loading="lazy" alt="The finished moodboard"/> <figcaption class="figcaption figcaption-arrow">The finished moodboard. Note: The screenshot only shows the first file. </figcaption> </figure>

Need to print? – make a pdf

If you want to make PDF to be more printer friendly, you can specify page size as A4 or Letter.

convert collage*.jpg -background white -compress JPEG -quality 65 -page a4 moodboard.pdf

Create a web based moodboard

A simple example on how to create a little web based responsive moodboard using CSS Grid.

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Moodboard</title>
	<style>
		.grid {
			--auto-grid-min-size: 200px;
			--gap: 4vmin;
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(var(--auto-grid-min-size), 1fr));
			grid-gap: var(--gap);
			margin: var(--gap);
		}
	</style>
</head>

<body>
	<div class="grid">
		<img loading="lazy" src="images/1.jpg" alt="Image description" width="200" height="200"/>
		<img loading="lazy" src="images/2.jpg" alt="Image description" width="200" height="200"/>
		<img loading="lazy" src="images/3.jpg" alt="Image description" width="200" height="200"/>
		<img loading="lazy" src="images/4.jpg" alt="Image description" width="200" height="200"/>
		<img loading="lazy" src="images/5.jpg" alt="Image description" width="200" height="200"/>
		<img loading="lazy" src="images/6.jpg" alt="Image description" width="200" height="200"/>
		<img loading="lazy" src="images/7.jpg" alt="Image description" width="200" height="200"/>
		<img loading="lazy" src="images/8.jpg" alt="Image description" width="200" height="200"/>
		<img loading="lazy" src="images/9.jpg" alt="Image description" width="200" height="200"/>
		<img loading="lazy" src="images/10.jpg" alt="Image description" width="200" height="200"/>
	</div>
</body>

</html>

A/B Testing React Components With Mixpanel

Thu, 11 Nov 2021 00:00:00 GMT

Note: I've been using Gatsby, but this example can be applied in any React site.

Building a good UI is hard and it both involves technical, copywriting, UX and design skills to do well. This won't be a long post on the why and what A/B Testing is. There is a lot to read in this topic though. How to do a statistically significant experimentation and so on. However, it's very important to research and think about why you want to test something.

You might have Google Analyics tracking. You can see the number of visits, dropoffs, maybe also track conversions. But what do you do when you want try variants of the UI. A/B testing to the resque! You can test things individually in a variant like colors, UX copy, position, layout, Call to Action messages, buttons and more.

Identity the problem – Could a lower conversion or low degree of signups be because of something else?
Research. Check all Analytics reports and the behaviour of your users
Sketch out variants that could take care of the issues and improve the user experience
Implement variants
Track data for a time period
Make your decisions based on these reports

There are a number of different types of A/B testing techniques you can implement. In this example I work with a Gatsby site. It's a static site, and I can choose from:

Traditional A/B Testing
Branch based. As an example Netlify has this option
Edge-based page splitting. Some JAMStack vendors like Outsmartly and Uniform have edge CDN integrations that allow them to serve multiple versions of a page.

Other great tools are Splitbee and Optimizely.

I'll be working with Traditional A/B Testing in this example. I wanted to use libraries with a small footprint, so these where good options.

Install

npm packages

react-ab-test. A/B testing React components and debug tools. Isomorphic with a simple, universal interface. Well documented and lightweight. Tested in popular browsers and Node.js. Includes helpers for Mixpanel and Segment.
mixpanel-browser. The official Mixpanel JavaScript Library is a set of methods attached to a global mixpanel object intended to be used by websites wishing to send data to Mixpanel projects.

npm install react-ab-test mixpanel-browser

Import components


  Experiment,
  Variant,
  emitter,
  experimentDebugger,
} from "@marvelapp/react-ab-test"

Import utils

This is just some internal utils I have. You will have to replace mixPanelProjectID with your ID.

Initialize Mixpanel

mixpanel.init(mixPanelProjectID);

Enable the debugger and define variants

experimentDebugger.enable()

This is the Debugging tool. Attaches a panel to the bottom of the <body> element that displays mounted experiments and enables the user to change active variants in real-time.

This panel is hidden on production builds.

Create and define Variants

emitter.defineVariants("navigationCTAExperiment", [
  "white",
  "magenta",
  "primary",
])

Wrap components in `

</Experiment>


## Emit a win event

```javascript
emitter.emitWin("navigationCTAExperiment")

Called when a 'win' is emitted.

Report to your analytics provider using the emitter.

emitter.addWinListener(function(experimentName, variantName) {
  console.log(
    `Variant ${variantName} of experiment ${experimentName} was clicked`
  )

  /* Track in Mixpanel */
  mixpanel.track(experimentName + " " + variantName, {
    name: experimentName,
    variant: variantName,
  })

  /* Track in Google Analytics */
  logGAEvent(
    `Experiment ${experimentName}`,
    "click",
    `Variant ${variantName} was clicked`
  )
})

Experiment

The localStorage item is saved like this.

Mixpanel

Once setup is done you can follow the tests in your reporting provider of choice.

Serve Json From a Gatsby Site Using Contentful

Mon, 08 Nov 2021 00:00:00 GMT

We recently had the need to serve a JSON file from the website to be consumed by another project. Very simple, but it needed to be possible to create the content from our CMS Contentful and also automatically be served from the website when the site has been built.

Let's get started!

What’s involved?

The content type on Contentful
The content
Fetching of the data
Creating a JSON file
Building the site

Create a content model on Contentful

Not covered in this post. But a standard Content type with relevant fields.

Fetch the data from Contentful

In gatsby-node.js we add the code to fetch the data from Contentful, and then create the JSON file.

exports.onPostBuild = async ({ graphql, reporter }) => {

The onPostBuild Node API runs after the build has been completed. It is the last extension point called after all other parts of the build process are complete. So this is what we want to use

To get the data we use a graphql query.

await graphql(`
    {
      notifications: allNotifications {
        edges {
          node {
            id
            title
            description
            link
          }
        }
      }
    }
  `).then(result => {
    const notifications = result.data.notifications.edges.map(
      ({ node }) => node
    )
    const data = []

    notifications.map(notification => {
        const notificationData = {
          id: notification.id,
          title: notification.title,
          description: notification.description,
          link: notification.link
        }

        data.push(notificationData)
        reporter.info(
          `Creating a notification: ${notification.title} in notifications.json`
        )
      }
    })
		...

Code in the file gatsby-node.js is run once in the process of building your site. You can use its APIs to create pages dynamically, add data into GraphQL, or respond to events during the build lifecycle.

Create the JSON File

fs.writeFileSync(`public/notifications.json`, JSON.stringify(data))
...

Note: We need to use the fs module in gatsby-node.js to create a JSON file.

Then we save the file in the public folder.

[
  {
    id: "ce36f966-1588-5b30-9cb3-58ed43bca553",
    title: "Lorem ipsum dolor sit",
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis eros elit. ",
    link: "https://example.com/cool-page/"
  },
  {
    id: "ee45ca7a-3216-5fe5-853b-1d0918dad0b4",
    title: "Lorem ipsum dolor sit",
    description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis eros elit. ",
    link: "https://example.com/cool-page/"
  }
]

The JSON file will look like this.

Update the site when new content has been added

We have an automated process with webhooks that will be triggered when we publish or unpublish content in our Contentful space. The webhook triggers an automatic Pull Requst in our CI that builds and publish the site.

How to access the data?

Simple, the file will be served from example.com/notifications.json so just start making requests.

That’s all there is to it!

Dynamic Open Graph Images

Tue, 22 Dec 2020 00:00:00 GMT

You make awesome content. For that content to reach its desired effect of attracting readers or customers, it needs to be shared. A great way to display your content is to use Open Graph Protocol. Open graph tags are very useful and if you use them right, it can optimize your content for social sharing.

What are Open Graphic Meta Tags?

Open Graph meta tags allow you to control what content shows up when a webpage is shared across major social networks such as Facebook, Twitter, and LinkedIn. Aside from social media, hundreds of other content sharing tools (e.g., messenger tools such as Slack) use these tags. You can control how the title, site name, image, and descriptions are displayed. Think of it as a short intro to your content. It needs to be captivating enough for a viewer to like it or click into it.

You can put a <meta> tag in the <head> of a webpage to define this data. It looks like this:

<head>
<!-- Facebook Open Graph Image -->
<meta property="og:image" content="example.jpg"/>
<meta property="og:image:height" content="600"/>
<meta property="og:image:width" content="1200"/>

<!-- Twitter Card Image -->
<meta property="twitter:image" content="example.jpg"/>
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image:alt" content="Example"/>
</head>

Note: You must use JPG or PNG for Open Graph images. SVG doesn't work.

An example

I run a small music blog called Jazztips. All content is written in Markdown and then compiled to a static site and deployed to Netlify. The posts are then published on Twitter and Facebook automatically via IFTTT.

<figure class="img-wide"> <img src="https://res.cloudinary.com/urre/image/upload/v1608554435/screenshots/ajypxf035pgcb8zi3ugz.jpg" class="img-wide img-border" alt=""/> <figcaption class="figcaption figcaption-arrow">The <a href="https://jazztips.se/for-jimmy-wes-and-oliver/">start page</a></figcaption> </figure>

<figure class="img-wide"> <img src="https://res.cloudinary.com/urre/image/upload/v1608554492/screenshots/xhvj1aepxyvw8eab1sgw.jpg" class="img-wide img-border" alt=""/> <figcaption class="figcaption figcaption-arrow">Single posts <a href="https://jazztips.se/for-jimmy-wes-and-oliver/">pages</a></figcaption> </figure>

The default card style

This is what the default sharing card looks like, with the record cover as the Open Graph image. It definitely works, but let's make it better.

How to generate a great card image with text

It takes a long time and a lot of manual work to create unique images for every post. And different posts would require different imags and different text. Otherwise it wouldn't stand out very much when it was shared.

Using Canvas to create an image

The HTML <canvas> element can be used to draw graphics on a web page. With a Node.js script we can read the frontmatter (artist, title etc) and then generate an image. The example below are a bit simplified.

Select file Read front matter (YML)

The Markdown frontmatter looks like this:

title: For Jimmy, Wes and Oliver
artist: Christian McBride Big Band
image:  https://res.cloudinary.com/urre/image/upload/w_600,h_600/v1606915632/screenshots/fghrcq1z1j4pk3sgyp2l.png

Below is a shortened version of the script ogimage.js

const fileFrontmatter = fs.readFileSync(`../_posts/my-example-post.md`, 'utf8')
const fileData = fm(fileFrontmatter)

The front-matter package is used here to extract all the YML data.

Create a canvas and load the image

// Now load image into the canvas and add text
loadImage(fileData.attributes.image).then((image) => {

// Just some settings
const width = 1200
const height = 630
let fontSize = 64
let lineHeight = fontSize * 1.3975
let textArtistY = 120
let textTitleY = textArtistY + 220

// Init the HTML Canvas
const canvas = createCanvas(width, height)
const context = canvas.getContext('2d')

// Fill with a light green background color
context.fillStyle = '#bdfbd5'
context.fillRect(0, 0, canvas.width, canvas.height)

// Add the image to the Canvas
context.drawImage(image, 40, 50, 600, 600)
...

Create a JPG image

Let's do a test to see what the output is.

const buffer = canvas.toBuffer('image/jpeg')
fs.writeFileSync('./temp.jpg', buffer)

If we open up this image we can see the result.

<figure class="img-wide"> <img src="https://res.cloudinary.com/urre/image/upload/v1608548988/u2uqj3znyc61jk81htcb.jpg" alt=""/> <figcaption class="figcaption figcaption-arrow">Ok, that looks good. Now lets add the text.</figcaption> </figure>

Add text

Use a custom font

Since I use Spectral (designed by Production Type) I'd like to use this font to follow the design of the website.

registerFont('./spectral/Spectral-Light.ttf', {
  family: 'Spectral',
})

Draw the white background behind the text

context.fillStyle = '#fff'
context.fillRect(550, 90, 700, 500)

Add the text

// Font settings
context.font = `normal ${fontSize}pt Spectral`
context.textAlign = 'left'
context.textBaseline = 'top'

To add the text to the Canvas, the syntax is context.fillText("Our title here", 10, 50);. However, our text can vary in length and we will need to wrap it nicely to fit our canvas boundaries. I'm using a simple helper method to wrap long titles. Also, controlling the line height is not as easy as you would expect compared to CSS.

const wrapText = (context, text, x, y, maxWidth, lineHeight) => {
	var words = text.split(' ')
	var line = ''

	for (var n = 0; n < words.length; n++) {
		var testLine = line + words[n] + ' '
		var metrics = context.measureText(testLine)
		var testWidth = metrics.width
		if (testWidth > maxWidth && n > 0) {
			context.fillText(line, x, y)
			line = words[n] + ' '
			y += lineHeight
		} else {
			line = testLine
		}
	}
	context.fillText(line, x, y)
}

Now I can add Artist and Title next to the record cover:

context.fillStyle = '#000'
wrapText(context,`${fileData.attributes.artist}`,640, textArtistY, 510, lineHeight)
wrapText(context,`”${fileData.attributes.title}”`,640, textTitleY, 510, lineHeight)

<figure class="img-wide"> <img src="https://res.cloudinary.com/urre/image/upload/v1608551416/ordjaos4h7wylkpypqua.jpg" alt=""/> <figcaption class="figcaption figcaption-arrow">Nice! Let's do some more art direction</figcaption> </figure>

Add the green logo circle

Just for some more art direction.

context.fillStyle = '#68d391'
context.beginPath()
context.arc(1080, 100, 50, 0, 2 * Math.PI)
context.fill()

<figure class="img-wide"> <img src="https://res.cloudinary.com/urre/image/upload/v1608541949/lpmwqw4wh7xvhm7i5dvf.jpg" alt=""/> <figcaption class="figcaption figcaption-arrow">Perfect!</figcaption> </figure>

Upload to Cloudinary

I store and deliver all my media assets using Cloudinary. So lets do the following:

Upload the image to Cloudinary
Write the HTTPS image link back to the Markdown file as frontmatter.

title: For Jimmy, Wes and Oliver
artist: Christian McBride Big Band
image:  https://res.cloudinary.com/urre/image/upload/w_600,h_600/v1606915632/screenshots/fghrcq1z1j4pk3sgyp2l.png
ogimage:  NEW IMAGE URL HERE


// Load .env file
require('dotenv').config()

// Setup Cloudinary uploader
cloudinary.config({
	cloud_name: process.env.CLOUDNAME,
	api_key: process.env.APIKEY,
	api_secret: process.env.APISECRET,
})

const newImage = cloudinary.v2.uploader.upload(
	'./temp.jpg',
	function (error, result) {
		insertLine(`../_posts/${filename.file}`)
			.content(`ogimage: ${result.secure_url}`) // Create YML variable
			.at(9) // At line 9 in my case
			.then(function (err) {
				log(`${chalk.green(`✔️ Inserted ogimage front matter`)}`)
			})
	}
)

Some npm packages used here are: chalk, insertLine and cloudinary.

Testing

If you want to see what your posts will look like on Twitter without actually tweeting it, you can test it using Twitter's Card Validator. iframely and Facebook Debugger are also great tools I recommend.

<figure class="img-wide"> <img src="https://res.cloudinary.com/urre/image/upload/v1608555930/screenshots/egswbncykut4rpssheok.jpg" class="img-wide img-border" alt=""/> <figcaption class="figcaption figcaption-arrow">Always check how the content looks before sharing.</figcaption> </figure>

Automation

There are a lot of possibilities here. You can:

Use it in a standalone script and go through all your posts and bulk create dynamic images.
Run as a script in your CI/CD pipelines, check for missing OG images in posts.
Use it like a CLI, passing path to a markdown file.

It's up to you. I currently have a script that checks the latest modified post. If that doesn't have an OG image, I create one.

Done!

Now our sharing image looks way better!

<figure class="img-wide"> <img src="https://res.cloudinary.com/urre/image/upload/v1608555464/screenshots/nitfkjmcmjgkuhjj4pm5.jpg" class="img-wide img-border" alt=""/> <figcaption class="figcaption figcaption-arrow">On Twitter</figcaption> </figure>

<figure class="img-wide"> <img src="https://res.cloudinary.com/urre/image/upload/v1608561814/screenshots/dkrhv0jaxfpn6tokn2r4.jpg" class="img-wide img-border" alt=""/> <figcaption class="figcaption figcaption-arrow">On Slack</figcaption> </figure>

I hope this post will help you make better sharing images. It is a really nice addition to help content stand out from the crowd!

20 Useful Npm Tips and Tricks

Mon, 23 Nov 2020 00:00:00 GMT

Shortcuts

Save time typing

npm i - is a shortcut for npm install
npm t - is a shortcut for npm test
-g - to save a global dependency
-D- to save as development dependency:npm install packagename --save-dev

Info

npm info webpack dist-tags

{
  latest: '5.6.0',
  legacy: '1.15.0',
  'webpack-2': '2.7.0',
  next: '5.0.0-rc.6',
  'webpack-3': '3.12.0',
  'webpack-4': '4.44.2'
}

What version of a package is the latest.

npm ci

npm ci bypasses a package’s package.json to install modules from a package’s lockfile. This ensures reproducible builds - you are getting exactly what you expect on every install. Providing a consistent and fast experience for developers using CI/CD in their workflow.

npm ci

Tagged version

npm install some-package@next

To install not the "latest" version, but the version tagged by "next"

Version shortcuts

// 1.0.0
npm version patch
// 1.0.1
npm version minor
// 1.1.0
npm version major
// 2.0.0

To increase the version.

pre- and post- hooks

Special lifecycle scripts which can be used to run scripts automatically in sequence.

{
  "scripts": {
    "pretest": "eslint .",
    "test": "jest"
  },
}

npm docs → scripts

List installed packages

npm list

List packages

npm list -g

List packages installed globally

Check outdated packages

npm outdated

Package                             Current  Wanted  Latest  Location
@babel/core                           7.4.0  7.12.8  7.12.8  projectname
@babel/preset-env                     7.4.2  7.12.7  7.12.7  projectname

Test your own packages locally

npm link ...

Develop node modules locally using npm link. It enables us to develop our modules and test them in our projects seamlessly.

Silent

The –silent option reduces the output in the Terminal.

{
	"scripts": {
		"something": "npm run something --silent"
	}
}

nls

Missing inspector for npm packages.

nls                     List available npm scripts
nls deps                List dependencies table (d for short)
nls view <prop-path>    Extract info from package.json (v for short)
nls read <package-name> Print readme file from a dependency (r for short)
nls why <package-name>  Identify why a package has been installed (w for short)

Example:

npx nls why @babel/core
Who required @babel/core: tools > @babel/core@7.12.3

nls

Node Task List

Interactive CLI tool that lists and run package.json scripts.

ntl

Run all

Instead of:

npm run clean && npm run build:css && npm run build:js && npm run build:html

Do:

npm-run-all clean build:*

npm-run-all

Initialize package

npm init

npm init -y

Use -y to to automatically generate your package.

npm config set init-license MIT

Tip: Set config to change for example the default license generated by npm init -y

Scan for vulnerabilities

npm audit

Scan your app for vulnerabilities:

npm audit fix

Scan your project for vulnerabilities and automatically install any compatible updates to vulnerable dependencies:

npm-audit

npx

Since npm 5.2.0, npm comes with a tool called npx. It executes a script from your dependencies as node executable.

npm - the package manager
npx - the package runner

npm vs npx — What’s the Difference?

The prefix flag

npm start --prefix path/to/your/folder

Use the --prefix flag to specify the path:

npm doctor

Check your environments

npm doctor

npm-pack

npm pack --dry-run

Shows which files would be packed when publishing your package to npm.

npm-pack

How to write npm

TL;DR; don't put it in all caps ever. npm is never capitalized officially.

Scheduled Posts Using GitHub Actions and Netlify

Tue, 17 Nov 2020 00:00:00 GMT

A traditional CMS handles scheduling posts easily. Static site builders may not have the same features built in, but be able to schedule a post is still important.

There are plenty of ways of doing it of course. We have all the modern tools to achieve it. I use Vercel for most of my side projects (Read about Vercel Deploy Hooks), but for a recent use case I needed to schedule music tips on my site Jazztips which is hosted on Netlify

Let's jump right into it.

Setup a build hook in Netlify

Visit Site settings → Build & deploy → Build hooks

Setup a webhook on GitHub

Select which events that should trigger the hook

Store the build hook as a GitHub secret

Create a GitHub Workflow

Create a folder .GitHub/workflows
Inside, create a file netlify.yml

name: Netlify Deploy

on:
  schedule:
  - cron: "0 13 * * *"

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - name: Trigger Netlify Hook
      run: curl -X POST ${{ secrets.NETLIFY_BUILD_URL }}

Select desired time interval e.g. "Every day at 1pm" (or similar). In the cURL command we use the NETLIFY_BUILD_URL secret created earlier.

Gatsby, Jekyll or [insert static site builder/CMS of choice here]

For Jazztips I use Jekyll. Set future: false in config.yml. Posts with future dates in the front matter date: 2020-XX-XX will only publish when the time is right 👍.

👉 Worth noting here is that some modern headless CMS has this built in their UIs.

Using Merge Schedule GitHub Action

Another option is this handy GitHub Action called Merge Schedule. It allows for mergeing pull requests on a scheduled day.

Create this YML file

We can now schedule a merge by creating a pull request description with just one line:

/schedule YYYY-MM-DD

This will now schedule the pull request merge at YYY-MM-DD

Done!

Now you can see the "Daily cron job" beeing triggered the hook in your deploy logs. Make sure to setup Deploy Notifiations also to get notified when a deploy request is accepted/rejected/pending.

More great options

The post scheduler is a serverless project that gives static site owners the ability to schedule posts (or other site content). It works with any static site setup (Jekyll, Hugo, Phenomic, Gatsby etc.)
Vercel Serverless Functions
Zapier: Schedule Zaps to run at specific intervals

Docker Compose and Jekyll

Mon, 27 Apr 2020 00:00:00 GMT

But, my plan is to migrate to Gatsby and MDX pretty soon. But in the meantime, it does the job. Recently i switched to a new computer, and this time I didn't want to install Ruby since I don't use it for anything else nowadays. In the past I've used Rbenv for managing a local Ruby installation which is great, but i wanted to use Docker Compose this time. I am fine installing Ruby if it’s isolated in a container.

So, lets use Docker Compose to handle the container.

Option 1: Simple and easy

The following docker-compose.yml file will do the job.

version: '3'
services:
  jekyll:
      image: jekyll/jekyll:3.8
      environment:
        - JEKYLL_ENV=development
      command: bundle exec jekyll serve --watch --incremental --config _config-dev.yml --host 0.0.0.0
      ports:
          - 4000:4000
      volumes:
          - .:/srv/jekyll:cached
          - ./vendor/bundle:/usr/local/bundle:cached

The notes

Using the default Jekyll Docker image
Using Bundler to start Jekyll.
Specify a separate config file for development
Use cached volumes for performance
To make Jekyll available outside localhost, use --host=0.0.0.0

✅ Now all we have to do is run docker-compose up -d and head over to http://localhost:4000

Option 2: Custom nginx service and HTTPS

The notes

The docker-compose.yml

version: '3'

services:
  jekyllbuild:
    build:
      context: .
      args:
        build_command: "bundle exec jekyll serve --watch --drafts --incremental --config _config-dev.yml"
    volumes:
      - ".:/srv/jekyll"
    ports:
      - 4000:4000
  nginx:
    image: nginx
    volumes:
      - ".:/var/www/public"
      - "./nginx/nginx.conf:/etc/nginx/nginx.conf"
      - "./nginx/html/404.html:/usr/share/nginx/html/404.html"
      - ./certs:/etc/certs
    ports:
      - 80:80
      - 443:443

In this example I use a separate nginx service and exposing ports 80 and 443. As a bonus we can now use HTTPS by creating a cert for localhost:

brew install mkcert
mkcert -install
mkcert localhost --ca-key --ca-cert (generates SSL certs, move them to ./certs)

The Dockerfile

FROM jekyll/jekyll:latest

ARG build_command
ENV BUILD_COMMAND ${build_command}

RUN bundle install

CMD ${BUILD_COMMAND}

✅ Again, just run docker-compose up -d and head over to https://localhost

Reusable Components in a Private Npm Registry

Sat, 25 Apr 2020 00:00:00 GMT

So you need to create private npm packages? It's great when you don't want to rely on git submodules for example, or just want to standardize and/or reutilize some pieces of code. It can be UI plugins, css utilities or other reusable components, used in multiple projects across different projects.

There is a number of different options, you can of course get yourself a private npm organization — which costs US$ 7 per user per month. Another option is to use Verdaccio.

At work we have a private npm registry on Nexus. Since we alread have other private repos up there, we keep the private npm modules in the same place. I won't go into the details on how to setup the registry, but more on how to use it and to publish packages.

We also have a proxy repository pointing to the official npm registry in our Nexus account.

Setup

Authenticate with the private npm registry

npm login --registry https://nexus.coolcompanyio.net/repository/coolcompany-npm-registry/

Authenticate with the proxied npm registry

npm login --registry https://nexus.coolcompanyio.net/repository/npm-registry/

This will update your ~/.npmrc with the authTokens. For example:

//registry.npmjs.org/:_authToken=XXXXXX
//nexus.coolcompanyio.net/repository/coolcompany-npm-registry/:_authToken=NpmToken.XXXXX
//nexus.coolcompanyio.net/repository/npm-registry/:_authToken=NpmToken.XXXXX

In your project

Create a local .npmrc in the project root

@coolcompany:registry=https://nexus.coolcompanyio.net/repository/coolcompany-npm-registry/
registry=https://nexus.coolcompanyio.net/repository/npm-registry/

Install package

Install package as a dependency

npm install @coolcompany/coolcompany-coolplugin

Install package (here as a devDependency)

npm install -D @coolcompany/coolcompany-coolplugin

Of course, you can also add an entry directly in package.json like this:

  "devDependencies": {
    "@coolcompany/coolcompany-coolplugin": "^0.1.0"
  },
	...

And then do npm install

Publish a package

Configure your repo

Create a `.npmrc` in the project root

@coolcompany:registry=https://nexus.coolcompanyio.net/repository/coolcompany-npm-registry/
registry=https://nexus.coolcompanyio.net/repository/npm-registry/

Scoped Packages is a way to group related npm packages together, much like namespaces.

Create a package.json

In your repo, create a package.json if you already didn't have one.

npm init

Set a name

"name": "@coolcompany/coolcompany-coolplugin",

Set the registry URL

...
"publishConfig": {
    "registry": "https://nexus.coolcompanyio.net/repository/coolcompany-npm-registry/"
},

We need to specify this URL to publish the package.

Publish

npm publish

Now the package is now uploaded in Nexus

Update a package

npm version 0.2.0
npm publish

Run this in a package directory to bump the version and write the new data back to package.json and package-lock.json

Great! the package is published and can now be installed using:

npm install @coolcompany/coolcompany-coolplugin

Merge Images Side by Side

Tue, 03 Sep 2019 00:00:00 GMT

I share a lot of screenshots for example in Slack. Pretty often I need to show before/after iterations, with or without annotations.

I recently made a little bash function that resides in my dotfiles to merge two images together, side by side.

Function

#!/usr/bin/env bash

# Merge two images side by side, then open in Preview
function mont() {
  montage -background '#336699' -geometry 100% ~/desktop/"$1" ~/desktop/"$2" ~/desktop/merged.png;
  open -a Preview ~/desktop/merged.png
}

Montage is a part of ImageMagick. Install it using brew install imagemagick

Usage

Example images

image.png

image2.png

mont image.png image2.png

I do this from ~/desktop

Result

A new image merged.png is created and opened in Preview. Convenient for adding annotations.

<source src="https://res.cloudinary.com/urre/video/upload/v1567573475/montnew_cctnqn.mp4"
        type="video/mp4" />

Sorry, your browser doesn't support embedded videos.

</video>

Optimize Images

Sun, 28 Jul 2019 00:00:00 GMT

We recently made some optimizations in our resources library. There were a lot of unoptimized images, adding extra weight. After a while this piles up and adds upp to quite a few megabytes of images files. In addition to optimizations, it is important to carefully choose which format to use. Use SVG for vector based graphics, and JPG for (nearly) everything else. The use of a CDN is of course also very good to speed up delivery in different regions.

This is a quick post about some tools and commands for optimizing images.

File and folder sizes

Some commands to quickly locate and collect info about image sizes.

Find all svg images in the current folder

find . -type f | grep '.svg'

Get total size of all .svg images in the current folder

find . -type f -name '*.svg' -exec du -ch {} + | grep total$
1,7M    total

If you want to check the size of a folder:

du -sh  images/
(6.3 M)

Optimize SVG images

I'm using SVG Optimizer, a Nodej.s-based tool for optimizing SVG vector graphics files.

Install SVGO

npm install -g svgo

svgo *.svg

Output:

logo.svg:
Done in 28 ms!
17.751 KiB - 40.4% = 10.58 KiB

illustration.svg:
Done in 42 ms!
17.136 KiB - 5.6% = 16.168 KiB

badge.svg:
Done in 36 ms!
38.621 KiB - 56.8% = 16.702 KiB

Optimize jpg images

Install imageoptim-cli

npm i -g imageoptim-cli

I'm using imageoptim together with jpgmini (jpgmini or jpgmini light has to be installed)

imageoptim --jpegmini --quality 50-75 '**/*.jpg'

Output:

✓ house.jpg was: 9.78kB now: 7.46kB saving: 2.32kB (23.73%)
✓ cat.jpg was: 437kB now: 397kB saving: 40kB (9.16%)
...
✓ TOTAL was: 12.97MB now: 5.83MB saving: 7.14MB (44.94%)
✓ Finished

Optimize png images

Image Optim automates ImageOptim, ImageAlpha, and JPEGmini for Mac to make batch optimisation of images part of your automated build process.

Install imageoptim-cli

npm i -g imageoptim-cli

Optimize png images in our current folder

imageoptim --imagealpha '**/*.png'

Output:

->  imageoptim --imagealpha 'diamonds.png'
i Running ImageAlpha...
i Running ImageOptim...
✓ diamonds.png was: 45.2kB now: 19.9kB saving: 25.3kB (55.94%)
✓ TOTAL was: 45.2kB now: 19.9kB saving: 25.3kB (55.94%)
✓ Finished

Resize

If you have large png images that need to be resized to a smaller size or ratio, we can batch resize them.

Use Mogrify from ImageMagick to resize all png images in the current folder (and subfolders) to 1280px. This also preserves the aspect ratio.

find . -name '*.png' -execdir mogrify -format png -resize 1280\> {} \;

WebP

WebP?

WebP is a modern image format developed by Google, that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

Let's use the official cwebp encoder.

brew install webp

cwebp -q 75 diamonds.png -o output.webp

This command takes a PNG and outputs it to lossy WebP by way of the -o parameter. By default, the encoder outputs lossy WebP images, and the quality of the output can be set from 0 to 100 via the -q parameter. The default lossy quality setting is 75.

Output:

Saving file 'output.webp'
File:      diamonds.png
Dimension: 1200 x 1200
Output:    4520 bytes Y-U-V-All-PSNR 55.80 99.00 99.00   57.57 dB
           (0.03 bpp)
block count:  intra4:        461  (8.20%)
              intra16:      5164  (91.80%)
              skipped:      4450  (79.11%)
bytes used:  header:             57  (1.3%)
             mode-partition:   2806  (62.1%)
 Residuals bytes  |segment 1|segment 2|segment 3|segment 4|  total
    macroblocks:  |       0%|       0%|       0%|      100%|    5625
      quantizer:  |      36 |      36 |      33 |      26 |
   filter level:  |      11 |       8 |       6 |       4 |

We can also use alpha transparency using the -alpha_q option:

cwebp -q 75 -alpha_q 10 source.png -o output.webp

Update 8 May 2024

These are more great tools you should check out:

Happy optimizations!

Local WordPress Development With Docker and Docker Compose Part 3

Fri, 12 Jul 2019 00:00:00 GMT

In this series: Part 1, Part 2

In my previous post i went through tips and tricks to help you run a smooth WordPress app using Docker-compose.

For this part I'll show you how you can use your own Dockerfile with an existing or own

Dockerfile

Docker can build images automatically by reading the instructions from a Dockerfile. A Dockerfile is a text document that contains all the commands a user could call on the command line to assemble an image. Using docker build users can create an automated build that executes several command-line instructions in succession.

With a Dockerfile you can extend an existing Docker image, for example like in Part 1. You can also install extra packages of your choice, and of course much more.

Let's create our own Dockerfile:

FROM urre/wordpress-nginx-docker-compose-image

# Install WP-CLI
RUN curl -o /bin/wp-cli.phar https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
RUN chmod +x /bin/wp-cli.phar
RUN cd /bin && mv wp-cli.phar wp

I'm using my own docker image urre/wordpress-nginx-docker-compose-image image. A slightly modified wordpress:php7.2-fpm with the only difference that it doesn't download WordPress core files. We do that with Composer ourself.

If we want to build the image we can simply use: docker build .

Let Compose build from Dockerfile

Update docker-compose.yml to build from our Dockerfile

  wordpress:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: myapp-wordpress
    ...

Update our wordpress service with the build section above.

Start

Start things up like before

docker-compose up -d

When making changes to the Dockerfile : Use docker-compose up -d --force-recreate --build

💥 Done!

Extra: Set up Automated Builds using GitHub and Docker Hub

Docker Hub can automatically build images from source code in an external repository and automatically push the built image to your Docker repositories.

Create a DockerHub repository. Again, I use the public, but in production, you should only do private ones.
Under the Builds tab, ceate Automated Builds and select the code repository service (GitHub ) where the image’s source code is stored.
Configure the Automated Build to your needs

Overview page

Recent builds

Let me know if you have any questions!

Example repo

Local WordPress Development With Docker and Docker Compose Part 2

Fri, 25 Jan 2019 00:00:00 GMT

In my previous post i went through some basics on how to get started with WordPress and Docker Compose This time I'll continue with some tooling and tips and tricks that will make your setup work better.

Use extra tools and packages

Often you would want to use additional packages not installed in the base docker image.

Create Dockerfile, extend the base image and install our needed tools, for example WP-CLI

FROM wordpress:php7.2-fpm

# Install wp-cli
RUN curl -o /bin/wp-cli.phar https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
RUN chmod +x /bin/wp-cli.phar
RUN cd /bin && mv wp-cli.phar wp

# Install sockets for PHP
RUN docker-php-ext-install sockets

Modify our docker-compose.yml to build or container.

  wordpress:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: myapp-wordpress

Use docker-compose up -d --force-recreate --build when you make changes to the Dockerfile

php.ini

Often you want change the defaults for some php.ini directives you can set to configure your PHP setup. for example upload_max_filesize to allow larger uploads in wp-admin.

Create config/php.ini and add:

file_uploads = On
memory_limit = 512M
upload_max_filesize = 128M
post_max_size = 128M
max_execution_time = 600
client_max_body_size =  128M

In our WordPress service in docker-compose.yml mount a volume

    volumes:
      - ./config/php.ini:/usr/local/etc/php/conf.d/php.ini

Cache volumes

To improve the file performance, you can add :cached flags to your volumes. I’m only using them on larger mounts. Don’t put them on databases, because you want realtime data.

    volumes:
      - ./src:/var/www/html:rw,cached

Serve missing media from the production server

This is a nice little nginx tip.

When working on a website locally, it can become quite tedious to pull down all media from a production environment. Often I'd like to have a copy of the production database locally, but just an empty or tiny uploads folder. At all depends on what kind if site you're working on of course.

Using this nginx location directives we can display live site images in our development site.

Edit our nginx/wordpress_ssl.conf

    location ~* \.(png|jpe?g)$ {
        expires 24h;
        log_not_found off;
        try_files $uri $uri/ @production;
    }

    location @production {
        resolver 8.8.8.8;
        proxy_pass https://mydomain.com/$uri;

    }

Let me know if you have any questions! Also checkout Part 1 and my example repo

The Self-Updating Website

Thu, 10 Jan 2019 00:00:00 GMT

I have this website called Chockpress, a silly project that scrapes and picks out chocking headlines from Swedish evening news. The scraper is built using Node.js, the website itself is built using React and is hosted on Now.

I already had a pretty good workflow for deploying the site, but wanted to automate more things.

🤖 Automate all the things

Desired result:

Get fresh new content
Build the website
Deploy the website
Add data to a Google Sheet
Schedule this to run every day

Circle CI

Circle is my platform of choice for continuous integration and delivery.

Configuring our build and deployment

First we create.circleci/config.yml and start adding the configuration. We want to use a prebuild docker container for Node.js. Read more about Configuring CircleCI

version: 2
jobs:
  build:
    docker:
      - image: circleci/node:10

Install dependencies

We use dependency caching to make jobs faster on CircleCI by reusing the data from previous jobs. Using restore_cache and save_cache we can specify a key to find a cache corresponding to a specific package-lock.json checksum. More about caching

working_directory: ~/repo

steps:
    - checkout

    - restore_cache:
        keys:
        - dependency-cache-{{ checksum "package.json" }}
        - dependency-cache-
    - run:
        name: Install dependencies
        command: npm install

    - save_cache:
        key: dependency-cache-{{ checksum "package.json" }}
        paths:
        - node_modules

Get new data

A couple of npm scripts handle the data scraping. See the full CircleCI config for more info.

Deploy

First setup our NOW_TOKEN as a environment variable on Circle CI. Then we run npx for executing the now cli. Using the -t option we can specify our token.

now.json

We can also define options to the now client by keeping a now.json file in our root project. Among other things we can cale our deployment in a region, in my case using bru, (Brussels, Belgium). We can also define what files should be deployed.

{
	"name": "chockpress",
	"alias": "chockpress",
	"version": 2,
	"regions": ["bru"],
	"files": ["build"]
}

in our CircleCI config:

- run:
    name: Deploy on Zeit now
    command: npx now -t ${NOW_TOKEN} ./build -A ../now.json

Alias our deployment

Every time we run now the app is deployed to a unique url. Now has this concept of immutability that has many advantages, including the option of testing multiple releases at the same time, multiple developers working on different parts of an app, rollbacks, and more. These URLs are ideal for development and staging, but not ideal for end users.

Now aliases have two purposes: Giving your deployment a friendly and memorable name and Updating deployments with zero downtime.

- run:
    name: Alias domain chockpress.now.sh
    command: npx now -t ${NOW_TOKEN} alias chockpress

To remove old deployments we can use now rm chockpress --safe --yes. To list all instances of our app use: now ls chockpress. Read more about using Now

Save data to a Google Sheet

I'm keeping all the scraped headings in a Google Sheet using the Google Drive API. For authentication we can either download the credentials.json or use ENV variables like this:

GOOGLE_SHEET_ID="XXX"
GOOGLE_PRIVATE_KEY="XXX"
GOOGLE_CLIENT_EMAIL="XXX"

We also must share our Sheet with the Google IAM project email address. Click Share, add the email and grant access.

We can now start populate our sheet. A simplified example:


const doc = new GoogleSpreadsheet(process.env.GOOGLE_SHEET_ID)

var creds_json = {
    client_email: process.env.GOOGLE_CLIENT_EMAIL,
    private_key: process.env.GOOGLE_PRIVATE_KEY
}

doc.useServiceAccountAuth(creds_json, step)
...

/* Loop our data and add new rows using the doc.addRow method */

doc.addRow( 1,
    {
        heading: data[key].title.trim(),
        source: source,
        url: data[key]['url']
    },

    ...

Success!

Setup as a npm script and add to our job:

- run:
    name: Save data to Google Sheet
    command: npm run save

Scheduling builds using workflows

A workflow is a set of rules for defining a collection of jobs and their run order. You can do all sorts of things, in my case i wanted two strategies, a regular commit workflow for pushing changes, and a daily workflow updating the website every day at 14.00.

workflows:
  version: 2
  commit-workflow:
    jobs:
      - build
  daily-workflow:
    triggers:
      - schedule:
          cron: '0 14 * * *'
          filters:
            branches:
              only:
                - dev
    jobs:
      - build

📄 See my complete Circle CI config here

Kick things off

After checking in changes, the CircleCI build should kick off nicely.

Slack notice

Using the CircleCI build notifications in Slack helps stay up-to-date with the latest build status.

Summary

🚀 Success! We have a self updating website with a fully automated process.

Local WordPress Development With Docker and Docker Compose

Fri, 07 Dec 2018 00:00:00 GMT

Setting up a local environment for working with WordPress, or any development project can be time consuming. That typically means setting up a web server, a database, and support for all the languages/tools you’ll need. The problem is that installing this can get tricky, and they may not play nice with each other.

During the years i've been using everything from just running built in web server on my Mac, then switched over to using MAMP and then virtual machines using Vagrant. VVV, an open source Vagrant configuration for developing with WordPress is a good tool that we still use for some projects. Also, Trellis from Roots is another great tool for keeping development environments in sync between development, staging and producion servers.

But now it is 2018. I wanted something lighter and fast. Docker was the right choice.

Why Docker?

Create containers with isolated development environments.
Use fewer resources than with VMs.
Share your containers to make collaborations easier.

Once you get your head around this idea of having “containers” and how to “link” those containers, you’ll find out how easy is to build your own developing (or production) environment with docker.

Docker and WordPress

To run WordPress locally we need this to get started:

PHP
MySql
Nginx
Composer for dependency management (when using Bedrock)

Additional tools such as WP-CLI is also convenient to have. More about that later.

Setup a local domain and create a self signed certificate

We want to use a local domain ex mywebsite.local and also use a self signed cert for use https in our application. I often have a little cli folder in the project root with some scripts to get started.

If you like, use my scripts in my starter repo

Use the scripts like this:

Create a SSL cert in ./certs using cd cli && ./create-cert.sh
Trust the cert in macOS Keychain using cd cli && ./trust-cert.sh
Setup vhost in /etc/hosts using cd cli && ./setup-hosts-file.sh

Docker Compose

I'm going to use a tool called Docker Compose which enables you to configure the services you want your container to have and set them up all at once.

Create a file called docker-compose.yml in your project root.

There is a bunch of things to cover here, so let's break it down:

Nginx

Nginx (NGiИX) is our web server of choice.

  nginx:
    image: nginx:latest
    container_name: mywebsite-nginx
    ports:
      - '80:80'
      - '443:443'
    volumes:
      - ./nginx:/etc/nginx/conf.d
      - ./src:/var/www/html:rw,cached
      - ./certs:/etc/certs
    depends_on:
      - wordpress
    restart: always

Notes:

Use the nginx image from Docker Hub.
We are listening on both port 80 for http and 443 for https. More about setting up a local ssl cert later.
Use three volumes. 1. Load a custom nginx configuration. 2. Mount our src folder in /var/www/html and 3. Use local ssl-certs from ./certs

I'm using caching for our volumes to increase the performance

Nginx configuration

In ./nginx we also want to add our configuration. Very much just standard, and pointing to our certs.

Create the file wordpress_ssl.conf and add this config

Note: Since we use Bedrock, the web root is /var/www/html/web

Database

The database service is simple, just using the standard mariadb image and set some environment variables for password and database name.

  mysql:
    image: mariadb
    container_name: mywebsite-mysql
    environment:
      - MYSQL_ROOT_PASSWORD=password
      - MYSQL_DATABASE=mywebsite
    restart: always
    ports:
      - '3306:3306'

WordPress

Our WordPress service configuration in this example is using the wordpress-php7.2-fpm.

  wordpress:
    image: wordpress:php7.2-fpm
    container_name: mywebsite-wordpress
    volumes:
      - ./src:/var/www/html:rw,cached
    environment:
      - WORDPRESS_DB_NAME=mywebsite
      - WORDPRESS_TABLE_PREFIX=wp_
      - WORDPRESS_DB_HOST=mysql
      - WORDPRESS_DB_PASSWORD=password
    depends_on:
      - mysql
    restart: always

Note: Although the default WordPress files will be downloaded in ./src when running docker-compose up, I'm ignoring them in git and will be using the Bedrock structure. If you are not using Bedrock, just use the defaults.

Composer

I use Bedrock for all WordPress projects, it's a modern WordPress structure/setup using development tools, easier configuration, and an improved folder structure. Bedrock also offers enhanced security with isolated web root to limit access to non-web files and more secure passwords through wp-password-bcrypt.

Since we use Bedrock we need Composer to manage our WordPress installation and plugins with Composer, a PHP dependency manager. Composer will make development more reliable, help with team collaboration, and it helps maintain a better Git repository.

We set working_dir to /var/www/html where our WordPress installation is located.

  composer:
    image: composer/composer
    container_name: mywebsite-composer
    working_dir: /var/www/html
    restart: 'no'
    volumes:
      - ./src:/var/www/html:rw,cached

Full compose file

Here is the full docker-compose.yml file:

version: '3.6'
services:
  nginx:
    image: nginx:latest
    container_name: mywebsite-nginx
    ports:
      - '80:80'
      - '443:443'
    volumes:
      - ./nginx:/etc/nginx/conf.d
      - ./src:/var/www/html:rw,cached
      - ./certs:/etc/certs
    depends_on:
      - wordpress
    restart: always

  mysql:
    image: mariadb
    container_name: mywebsite-mysql
    environment:
      - MYSQL_ROOT_PASSWORD=password
      - MYSQL_DATABASE=mywebsite
    restart: always
    ports:
      - '3306:3306'

  wordpress:
    image: wordpress:php7.2-fpm
    container_name: mywebsite-wordpress
    volumes:
      - ./src:/var/www/html:rw,cached
    environment:
      - WORDPRESS_DB_NAME=mywebsite
      - WORDPRESS_TABLE_PREFIX=wp_
      - WORDPRESS_DB_HOST=mysql
      - WORDPRESS_DB_PASSWORD=password
    depends_on:
      - mysql
    restart: always

  composer:
    image: composer/composer
    container_name: mywebsite-composer
    working_dir: /var/www/html
    restart: 'no'
    volumes:
      - ./src:/var/www/html:rw,cached

WordPress configuration

All our source code should be placed inside src folder. Add an existing project or initialize a new Bedrock project.

Environment configuration

Edit .env file and setup our credentials

DB_NAME=mywebsite
DB_USER=root
DB_HOST=mysql:3306
WP_HOME=https://mywebsite.local
DB_PASSWORD=password
WP_SITEURL=${WP_HOME}/wp
WP_ENV=development
...

Install extra packages and tools

Sometimes we need to use tools not installed in the standard Docker images. We can create our own Dockerfile, build it and use in Docker Compose.

Create a Dockerfile in our project root. Extend the base image and add your own tools.

Example:

FROM wordpress:php7.2-fpm

# Install sockets for PHP
RUN docker-php-ext-install sockets

# Install wp-cli
RUN curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
RUN chmod +x wp-cli.phar
RUN mv wp-cli.phar /usr/local/bin/wp

In our docker-compose.yml, modify the WordPress service a bit:

  wordpress:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: mywebsite-wordpress

    ...

When we make changes in our Dockerfile we can use docker-compose up -d --force-recreate --build to build our container again if we change something.

Install WordPress and plugins

Install new plugins with Composer, like this:

cd src
composer install

docker-compose run composer require wpackagist-plugin/wordpress-seo

Update WordPress and plugins

cd src
composer update

docker-compose run composer update

Create a new Bedrock project

If don't have an existing composer.json file you can initialize a Bedrock project like this:

docker-compose run composer create-project roots/bedrock .

Start

docker-compose up -d

You can now browse to https://mywebsite.local and see your WordPress installation dialog!

Useful Docker and Docker Compose Commands

List Docker containers

docker ps

List Docker images

docker image ls

List compose containers

docker-compose ps

Stop

docker-compose stop

Down (stop and remove)

docker-compose down

Cleanup

docker-compose rm -v

Summary

There you go 😊

We have created a modern local WordPress development environment with Docker Compose. Checkout my demo repo on Github.

Let me know if you have any questions!

WordPress Coding Standards as Part of Your CI Strategy

Tue, 09 Jan 2018 00:00:00 GMT

It is always a good thing to follow a certain coding style when writing code. WordPress is unfortunately ripe for spaghetti coding, aka doing whatever you want. It doesn't follow any strict object oriented approach and doesn’t use an MVC pattern. But you can still write good code if you stick to certain rules and conventions.

Why you need to apply WordPress coding standards to your codebase

Avoid your codebase becoming a big mess. If there are no standards applied to your code, then it can quickly become a big mess. Especially when there is more developers working on the same code. If they’re not kept in check, things escalate fast.
Best practices. It is beneficial to the community when everyone is adopting the same practices when writing code.
Security. Code standards should include checks to make sure that the code is securely written. It’s easy to forget a nonce on a form or to output a variable that is not escaped. WordPress coding standards define how to write secure code and should be strictly enforced.
Documented code is much easier to read and understand. Your code standards should enforce documentation of classes, methods, variables etc. Having documented code is again a win for everyone as the code becomes much clearer when trying to add to it or refactor it.

There are coding standards for PHP, Html, JavaScript and Accessibility. Read all about it in the code handbook.

PHPCS and WPCS

The WordPress Coding Standards project is a whole set of PHPCS (PHP_CodeSniffer) rules to make sure your code written for WordPress follows the outlined conventions.

Install and setup

Since we're using the excellent Bedrock that uses Composer for dependency management, let's install phpcs and wpcs like this:

PHPCS

Bedrock already comes with phpcs, so your composer file should look like this.

"require-dev": {
    "squizlabs/php_codesniffer": "^3.0.2"
}

WPCS

Install the Standards using:

composer require wp-coding-standards/wpcs

This will add wpcs to your composer.json file

"require": {
    "wp-coding-standards/wpcs": "^0.14.0",
}

Set paths to the standards using composer scripts:

This will set paths when doing both composer install and composer update

"scripts": {
    "post-install-cmd": "./vendor/bin/phpcs --config-set installed_paths vendor/wp-coding-standards/wpcs",
    "post-update-cmd" : "./vendor/bin/phpcs --config-set installed_paths vendor/wp-coding-standards/wpcs",
}

Make sure your setup is correct by running phpcs -i from your project root

The installed coding standards are PEAR, PHPCS, Zend, PSR2, MySource, Squiz, PSR1, WordPress-VIP, WordPress, WordPress-Extra, WordPress-Docs and WordPress-Core

If everything went well, the WordPress coding standards should be listed (WordPress, WordPress-Extra, WordPress-Docs and WordPress-Core)

Test

Now that we have the Standards installed, lets setup a test command. Add this to your Composer scripts:

"scripts": {
    "post-install-cmd": "./vendor/bin/phpcs --config-set installed_paths vendor/wp-coding-standards/wpcs",
    "post-update-cmd" : "./vendor/bin/phpcs --config-set installed_paths vendor/wp-coding-standards/wpcs",
    "test": [
        "phpcs --report=full --colors -p --standard=web/app/themes/mytheme/codesniffer-ruleset.xml --ignore=*/vendor/*,*/node_modules/* web/app/themes/mytheme/ --extensions=php"
    ]
}

Note 1: You can also just use --standard=WordPress. I'm using a custom ruleset that extends the WordPress standard. Red more here: Annotated ruleset
Note 2: I'm only testing the theme in this example.
Note 3: The --colors will display the logs in a nice colorful way, the -p will show progress

Running

composer test

Example output:

FILE: ...rojects/myproject/myfile.php
----------------------------------------------------------------------
FOUND 4 ERRORS AFFECTING 4 LINES
----------------------------------------------------------------------
34 | ERROR | [x] Expected 1 spaces before closing bracket; 0 found
36 | ERROR | All output should be run through an escaping function
    |      | (see the Security sections in the WordPress Developer
    |      | Handbooks), found '$image_src'.
90 | ERROR | [x] String "Create a Configuration File" does not require
    |        double quotes; use single quotes instead
63 | ERROR | [ ] Missing wp_unslash() before sanitization.
----------------------------------------------------------------------

From within your editor

I use VS Code and have the phpcs extension installed. Errors and warning show up in the problems tab. Simple as that. There is packages for most editors and IDs

Example output:

Note: When using a composer based workflow VS Code will pick up settings from the root. If your setup is different you can fine tune some configuration options

As part of your CI strategy

When using Continuous Integration we can automatically check if the code you are writing follows the coding standards for every commit that get pushed to the repo.

Codeship is our main workhorse when it comes to Contious Integration and Deployment, in some projects we also use Bitbucket Pipelines and Travis.

Codeship setup

Switch to the tests tab https://app.codeship.com/projects/XXXXX/tests/edit.

Setup Commands

phpenv local 7.2
composer install --prefer-source --no-interaction

Test commands

composer test

If you code doesn't meet the standards you will see the full report in the Codeship test log, and well...Codeship tests will fail 😞

Conclusion

Consistency is key. Our Editors of course help us a lot, we have linters, formatters and other tools that help us keeping the code style consistent. I recommend taking this a step further and get this in your CI workflow to make sure of that and let you focus on writing your best code.

Happy Coding!

Use Data From Google Drive in Static Websites

Fri, 21 Apr 2017 00:00:00 GMT

Sometimes you work with a client that just have some simple content that needs to be updated; like a news feed/some list/table-data, maybe already created in a Google Spreadsheet. What if you could use that data on a Jekyll website? Well, of course you can. Let's do this.

The Google Drive API

First, head over to The IAM-admin in Google Developers API Console. The API Console lets you discover and use Google APIs, such as Google Drive, Maps and YouTube...

Create a new project

Enable the Google Drive API

Create credentials

Click "Create credentials" to get started.

Select what kind of kind of credentials you need, we need to select the Google Drive API from node.js.

Create a service account

Select an account name, with the Owner role.
Select a name, whatever you like.
Choose the JSON Key Type, we will be using this in your Jekyll site.

The JSON file will be downloaded to your computer. Place this in the root of your Jekyll project.

Remember to not version control this file.

The service account ID

Important Note: Your project now has a service account. It also has an unique email address. Write this down, we will use it later.

The email address looks like this:

XXXXXX@ascendant-hub-YYYYYYY.iam.gserviceaccount.com

Create a Google Spreedsheet

Go to Google Drive and create a new Spreedsheet. Or if you already have a spreadsheet with some content, open that up.

Add content

Share the spreadsheet with your IAM user.

Remember the email address you wrote down before? Yep, now is time to use it. Share the spreadsheet with this email address.

Also, of course share the spreadsheet to everyone else that is going to manage the content. 👨‍ 👩‍

Go get that data in to our website

Next up, we will create our script to fetch the data from our Spreadsheet.

I am using Jekyll in this example, but you can use any static site generator of choice, or together with a JavaScript framework like React, Vue.js etc. Just save data as JSON instead of YAML.

Setup

We are going to write a Node.js script for connecting to your spreadsheet, and saving data as markdown. First things first we need to install the google spreadsheet module, and some helpers.

npm i -D google-spreadsheet async babel-cli babel-preset-es2015 babel-preset-stage-0

Create a .babelrc file

{
  "presets": ["es2015", "stage-0"]
}

Create the script

First, import libraries

First, create a reference to our document and our sheet.

const doc = new GoogleSpreadsheet(
	// Using our example spreadsheet: https://docs.google.com/spreadsheets/d/1o_NWrDsVNSVU1jViexKQi08aI6h76fXrMIcvbT9faoM/edit#gid=0
  "1o_NWrDsVNSVU1jViexKQi08aI6h76fXrMIcvbT9faoM"
);
let sheet;

Then we want to do this:

Connect to our spreadsheet
Get data
Save as YAML in a Jekyll data file (you could also save as regular posts)

async.series([function setAuth(step) {
  const creds = require("./newproject-20015697d7f6.json");
  doc.useServiceAccountAuth(creds, step);
}, function getInfoAndWorksheets(step) {
  doc.getInfo((err, info) => {
    console.log(
      "Loaded spreadsheet: " + info.title + " by " + info.author.email
    );
    // Using the first sheet
    sheet = info.worksheets[0];
    console.log(
      "sheet 1: " + sheet.title + " " + sheet.rowCount + "x" + sheet.colCount
    );
    step();
  });
}, function getStuff(step) {
  sheet.getRows(
    {
      offset: 1,
      limit: 20,
      orderby: "col1"
    }, function(err, rows) {
      console.log("Read " + rows.length + " rows");
      // Clean posts.yml
      fs.truncate("./_data/posts.yml", 0, () => {
      });
      // Save rows as items in the YAML file
      for (let row of rows) {
        fs.appendFile(
          "./_data/posts.yml",
          "- date: " +
          row.date +
          "\n\x20\x20" +
          "title: " +
          row.title +
          "\n\x20\x20" +
          "content: " +
          row.content +
          "\n\n",
          err => {
          }
        );
      }
    }
  );
}
]);

Create a NPM script for running our script

"scripts": {
  "getdata": "babel-node getdata.js"
},

And then:

npm run getdata

Render data in a template

Now we have a file with all our data in _data/posts.yml.

We can now render the posts in a template:

<ul>
    {% for post in site.data.posts %}
    <li>
        <h2>{{ post.title }}</h2>
        <time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date: "%B %d, %Y" }}</time>
        <p>{{ post.content }}</p>
    </li>
    {% endfor %}
</ul>

Note: Of course if you need custom urls, just save in _posts instead and add the corresponding YAML variables, like permalink, date etc.

Great success!

Instant Jekyll Search

Fri, 24 Feb 2017 00:00:00 GMT

Adding search functionality to Jekyll (or whatever static site generator you are using) is not hard or complicated. In this walkthrough I will show you how to make an simple but fast and instant search for your website. I will be using just Vanilla JavaScript with some ES6.

I have been using the excellent lunr.js lately, a blazing-fast simple full text search engine for client side applications. It is designed to be small, yet full featured, enabling you to provide a great search experience without the need for external, server side, search services. Think Solr but way simpler.

Also, an important part: lunr.js has no external dependencies.

Checkout a live demo

The search template

First, let's make a simple search template:

<div class="container">
	<div class="columns">
		<div class="column col-6">
			<form class="searchform" action="/sok" method="get">
				<input type="text" class="form-input searchfield" placeholder="Sök album, musiker, skivbolag, taggar..." autofocus>
				<input type="submit" class="invisible">
			</form>
		</div>
		<div class="column col-6">
			<p class="searchcount text-right"></p>
		</div>
	</div>
</div>

JSON data

Now, we need to create a data store that contains basic information about each post. We can output everything we want to be able to search for, in this case; all the details for records on Jazztips. Using the jsonify filter we can safely convert data to JSON format.

I am doing this on a custom Jekyll layout, that the search template uses.

<script>
{% raw %}
window.store = [
	{% for post in site.posts %} {
		"title": {{post.title | jsonify}},
		"artist": {{post.artist | jsonify}},
		"link": {{ post.url | jsonify }},
		"label": {{ post.label | jsonify }},
		"image": {{ post.image | jsonify }},
		"date": {{ post.date | date: '%B %-d, %Y' | jsonify }},
		"excerpt": {{ post.content | strip_html | truncatewords: 20 | jsonify }}
	}
	{% unless forloop.last %}, {% endunless %}
	{% endfor %}
]
{% endraw %}
</script>

Build the index

First import Lunr and store references to our DOM elements



const searchform = document.querySelector('.searchform')
const searchfield = document.querySelector('.searchfield')
const resultdiv = document.querySelector('.searchcontainer')
const searchcount = document.querySelector('.searchcount')

Next, give Lunr all the data so it can help us find posts. A boost tells Lunr that it should favor this field.

let index = lunr(function() {
  this.ref('id')
  this.field('title', {boost: 10})
  this.field('artist')
  this.field('link')
  this.field('image')
  this.field('content')
  this.field('label')
  this.field('tags')
})

for (let key in window.store) {
  index.add({
    'id': key,
    'title': window.store[key].title,
    'artist': window.store[key].artist,
    'link': window.store[key].link,
    'image': window.store[key].image,
    'content': window.store[key].content,
    'label': window.store[key].label,
    'tags': window.store[key].tags,
  })
}

JavaScript search

Ok, so we have the JSON-file containing data about all our posts, and we have created the index for Lunr. What's next?

Well, we need to query Lunr, match results and present this to the user.

First, we listen for when the user types in the search form.

const getTerm = function() {
  searchfield.addEventListener('keyup', function(event) {
    event.preventDefault()
    const query = this.value
    doSearch(query)
  })
}

Then, we want to do the following:

Do the actual search in the index.
Show the number of results.
Update the browser url with a query parameter and display the results.

1. Do the search and show number of results

const doSearch = query => {
  const result = index.search(query)
  resultdiv.innerHTML = ''
  searchcount.innerHTML = `Found ${result.length} records`
  updateUrlParameter(query)
  showResults(result)

}

2. Show the results

const showResults = (result) => {

    for (let item of result) {
      const ref = item.ref
      const searchitem = document.createElement('div')
      searchitem.className = 'searchitem'
      searchitem.innerHTML = `<div class='card'><a class='card-link' href='${window.store[ref].link}'><div class='card-image'><div class='loading'><img class='b-lazy img-responsive' src='${window.store[ref].image}' data-src='${window.store[ref].image}' alt='${window.store[ref].title}'/></div></div><div class='card-header'><h4 class='card-title'>${window.store[ref].artist} - ${window.store[ref].title}</h4><h6 class='card-meta'>${window.store[ref].label}</h6></div></a></div>`

      resultdiv.appendChild(searchitem)

      setTimeout(() => {
        bLazy.revalidate()
      }, 300)
}

Note: I am using bLazy for lazy loading my images, so I update blazy when results is added to the dom.

3. Update browser url with query parameter

Add the search query to the browser url using HTML5 pushState()

const updateUrlParameter = (value) => {
  window.history.pushState('', '', `?s=${encodeURIComponent(value)}`)
}

Sharable link to search results

Also we want to be able to send a link ex: https://jazztips.se/sok/?s=wayne with a search query, just grab the url query string and do a search.

const getQuery = () => {
  const parser = document.createElement('a')
  parser.href = window.location.href

  if(parser.href.includes('=')) {
    const searchquery = decodeURIComponent(parser.href.substring(parser.href.indexOf('=') + 1))
      searchfield.setAttribute('value', searchquery)

      doSearch(searchquery)
  }

}

Notes

This is a basic example, a bit simplified. You could use a template engine to avoid html in JS when you show the results. Also taking care of the the keyup event smarter using debouncing to make it more performant.

Another great option is to use Algolia, they have great documentation about this on their blog

Checkout a live demo

The Stripe Bot

Fri, 13 Jan 2017 00:00:00 GMT

Recently we launched a tiny side project called WordPress Plugin UI template, a simple resource with the simple goal of empowering WordPress developers making beautiful banners and icons for their plugins.

In this post, I will walk through the steps for building the website, accepting payments via Stripe using Checkout, the best payment flow, on web and mobile.

We're also going to automate some things using Zapier and the Multi-Steps Zaps which they launched in 2016.

Core idea

The idea behind this little project, was to make it a bit easier for developers when submitting their plugins to the official WordPress plugin repo. Having made a bunch of plugins myself in the past, I wanted to save you from the hassle of dealing with sizes and formats.

For $3 you'll get a nice vector based template file for both Sketch and Photoshop. Stop worring about pixel sizes and file formats and be productive developing your plugin instead.

Accepting payments width Stripe

Before you do anything, you will need a Stripe account. The process is fairly painless, but requires a some information, including your company details, address, and account number and IBAN for transfers to your bank account. Under account settings you will find everything you need.

API Keys

Next you need to collect your API keys.

Create an .env file and store your keys. Never version control API keys.

SECRET_KEY="sk_test_XXXXXXXXXX"
PUBLISHABLE_KEY="pk_test_YYYYYYYYYYYY"

Stripe offers both test and live keys. Remember to switch out the correct ones when your going live!

Embedding Stripe Checkout

Stripe has an embeddable checkout process called Stripe Checkout. It has a beautiful look and feel for desktop, tablet, and mobile devices. A great payment flow, on web and mobile. It works within your site—customers can pay instantly, without being redirected away to complete the transaction.

To get started, here is some some boilerplate to get you started. Making sure that the form submits to your own server-side code within the action attribute.

  <form action="/charge.php" method="POST">
    <script
    src="https://checkout.stripe.com/checkout.js" class="stripe-button"
    data-key="<?php echo $stripe['publishable_key']; ?>"
    data-amount="300"
    data-name="Urban Sanden"
    data-description="Download the Wordpress Plugin UI template."
    data-image="/dist/images/logo.png"
    data-locale="auto"
    data-label="Download template files ($3)"
    data-currency="usd">
  </script>
</form>

Completing the charge server-side

I used the Stripe PHP library via Composer for this simple website, but use whatever you like. Express, Rails, Flask etc.

1.config.php. Just loading the environtment variables (API-keys.)

<?php
require('./vendor/autoload.php');

$dotenv = new Dotenv\Dotenv(__DIR__);
$dotenv->load();

$stripe = array(
  "secret_key"      => getenv('SECRET_KEY'),
  "publishable_key" => getenv('PUBLISHABLE_KEY')
);

\Stripe\Stripe::setApiKey($stripe['secret_key']);

2.charge.php

<?php
require_once('./config.php');

$email = $_POST['stripeEmail'];
$token  = $_POST['stripeToken'];

$charge = \Stripe\Charge::create(array(
    'source' => $token,
    'amount'   => 300,
    'currency' => 'usd',
    'metadata' => ['email' => $email, 'sku' => 'banner-1'],
    'description' => 'Download the Wordpress Plugin UI template.'
));

The code above, plus the client side form is pretty much all you need to complete the charging process.

When charge is successful you can display a Thank you message or redirecting to a special Thank You-page.

Zapier - automate all the things!

Now that we have the payment workflow going, why don't we look in to some automation.

Zapier is a great service that allows hundreds of different apps to be connected, in new and interesting ways. Using a system of triggers and actions, you can build powerful custom recipes - called Zaps. The Stripe Zapier trigger workflows is based on common activities in Stripe like getting new customers, receiving a new payment, and more.

Nowadays Zaps don't just stop at two steps. They can expand to as many steps that you like. Multi-Steps Zaps to the rescue!

As always, automating workflows is more fun!

The Zap

This is our current Zap:

Look for a new charge from Stripe
Find the charge via its ID
Send out an email using Sparkpost
Send a Slack notification

Email

Sparkpost is a great service for sending transactional emails. I used Sparkpost for delivering the template files. Via the Stripe Action you can also select a predesigned template for your Sparkpost account. For this I used the Really Simple Responsive HTML Email Template.

Slack

The friendly Slack notification.

Website domain and hosting

Domain wp-plugin.design bought from Namecheap
Served on HTTP2/HTTPS via Cloudflare
Hosted on a Digital Ocean droplet. Running on ServerPilot.

Final notes

Hopefully you’re now equipped with the essential steps to start accepting payments on the web using Stripe.

Get the template now!

Writing Beautiful Markdown in Sublime Text

Mon, 12 Sep 2016 00:00:00 GMT

From time to time i like to try new ways of keeping notes. New Mac apps, web apps and other tools for writing and keeping notes/writings/blog posts in sync. There are some great apps out there, like iA Writer, Typora, Mou, Macdown.

I've tried a shear number of great tools for this, but on my Mac I always came back to the same thing: I want to use features from my text editor. After spending a fair amount of hours in a text editor on a daily basis (I use Sublime Text) you miss all those power tools I have learned to master. If you work in a text editor all the time, why not write your blog posts, articles and notes in there aswell? It will not only speed things up, you'll write more often and enjoy it more!

Packages

To begin with, I use two packages for my Markdown Setup.

Markdown Editing

Support for writing GFM Markdown, Multi markdown and more.

Sublime Text Markdown Preview

Some like apps that display the preview in a split window. For me i like writing in one place and previewing in the browser. This plugin enables that, and the GFM Github preview is really neat!

Look and feel

In Sublime Text you can have different settings and look-and-feel for different languages and syntaxes.

Preferences -> Settings more -> Syntax specific - User

Here you can change a lot of stuff like settings for caret, color scheme, font settings, indendation, margin etc. This is my current setup.

{
    "auto_indent": false,
    "caret_style": "smooth",
    "color_scheme": "Packages/kermit.tmTheme",
    "detect_indentation": false,
    "draw_centered": true,
    "extensions":
    [
        "hidden"
    ],
    "fade_fold_buttons": false,
    "fold_buttons": false,
    "font_face": "Nitti WM2 Light",
    "font_options":
    [
        "subpixel_antialias"
    ],
    "font_size": 20,
    "gutter": true,
    "highlight_line": false,
    "indent_subsequent_lines": true,
    "indent_to_bracket": false,
    "line_numbers": false,
    "line_padding_bottom": 2,
    "line_padding_top": 3,
    "margin": 100,
    "overlay_scroll_bars": "system",
    "smart_indent": false,
    "spell_check": false,
    "tab_size": 4,
    "translate_tabs_to_spaces": true,
    "trim_automatic_white_space": false,
    "use_tab_stops": false,
    "wide_caret": true,
    "word_separators": "./\\()\"'-:,.;<>~!@#$%^&*|+=[]{}`~?",
    "word_wrap": "true",
    "wrap_width": 70,
    "show_minimap": false
}

Kermit - A Markdown theme

As you can see above, I'm using a theme called Kermit. I've created that myself and it's heavily inspired from iA Writer. It has great typography (Using Nitti), acentered column and a nice smooth cursor.

Get it here for free!

Writing

Command Palette goodies

Markdown Editing comes with some handy command palette shortcuts, like inserting image, Save to html, Markdown lint, Markdown cheat sheet and more.

And of course, you have all the benefits of having all of Sublimes tooling at your finger tips!

Syncing

I'm using Dropbox. Create a project file writings.sublime-project in the same folder as you keep your markdown files. Mine looks like this.

{
    "folders":
    [
        {
            "path": "/Users/urbansanden/Dropbox/Writing"
        }
    ]
}

On my phone

I use the iA Writer iOS app. A no-brainer.

Jekyll on Amazon S3 Part 2

Thu, 04 Jun 2015 00:00:00 GMT

Back in march I wrote a post about setting up a Jekyll site on Amazon S3. I covered:

Setting up a Amazon S3 bucket for static hosting on Amazon Web Services
Setting up permissions and connect Bucket and IAM
Setting up permissions and to handle API keys
Use Jekyll-assets for fingerprinted assets
Use s3_website for deploying to Amazon S3

In this post I'm going to continue with

Use Amazon CloudFront as a CDN
Use your custom domain with Route 53

Amazon S3 is already fast as it is, but while S3 is mainly a storage service you can use CloudFront to serve on top of your bucket and deliver contents at a much higher speed with lower latency.

Custom domain

In this example i will use Route 53, Amazons DNS service. You don't need to, but if you want to use a naked domain (Apex), using example.com without www, you will have to.

Setup a Hosted Zone

Click Hosted Zones and Create Hosted Zone:

Enter your domain name

Make a note of the NS servers for your domain. You will need them later.

Point your domain to Route 53

In my example i change the name servers and use Route 53 for all my records. You don't have to, if your have records for other things, like email.

Change the name servers. This is what it look like at Loopia DNS:

Configure Cloudfront

Create distribution

Under Origin Domain name, paste your S3 endpoint:

<pre><code> example.com.s3-website-us-east-1.amazonaws.com </code></pre>

For everything else just keep it like AWS suggests, with the exception of "Forward Query String". If you like to invalidate assets with a query string: screen.css?version=2. I recommend using Jekyll Assets that creates versioned assets like: app-908e25fa5b62f54.css.

Settings

Type your domain under CNAMEs and use index.html as Default Root Object.

Copy your Cloudfront address, it looks like this: bvtbnxdmn65sio.cloudfront.net

If everything works, you should now see the same thing on your domain example.com as on your Cloudfront address. Only now it will load much faster!

Connect your Cloudfront distribution with your domain name

Click "Create Record Set"
Leave the “Name” field blank. "Type" should be "A - IPv4 address".
Choose "Yes" for Alias
Choose your CloudFront distribution as "Alias target".
Leave "Routing Policy" as "Simple"

Grab a coffee. When the DNS cache has fully refreshed and you haven't made any misstakes you now have your Jekyll-sajt on Amazon S3, using Cloudfront as CDN and with your custom domain.

Congratulations!

You now have a website that costs almost nothing to host and loads faster than most websites!

The s3_website gem don't support the latest version of the Amazon API (is i write this). So you can't use the Frankfurt eu-central-1 region just yet. As i wrote in the beginning, there are other tools aswell. Whatever floats your boat!

Next step?

Read Part 2

Jekyll on Amazon S3 Part 3

Thu, 04 Jun 2015 00:00:00 GMT

Earlier i wrote posts about deploying a Jekyll site on Amazon S3. post 1 and post 2. I covered:

Setting up a Amazon S3 bucket for static hosting on Amazon Web Services
Setting up permissions and connect Bucket and IAM
Setting up permissions and to handle API keys
Use Jekyll-assets for fingerprinted assets
Use s3_website for deploying to Amazon S3
Use Amazon CloudFront as a CDN
Use your custom domain with Route 53

SSL

This time i am going to walk through some steps for getting your AWS powered Jekyll site use SSL. In this example i'm using CloudFlare free SSL together with a S3 bucket.

Cloudflare now supports SSL in the free plans. This makes it very easy to activate https. You don't need to buy a certificate the regular way.

Why SSL?

There are many reasons. Here are some good reasons you should switch to HTTPS for your static site today:

Security: the traffic is encrypted between your users and your website
Protect your users
Protect your content
Trust. You show the users that your website is secure using https.
Better Analytics. Read this
Better SEO. https-as-ranking-signal.

Create a Amazon S3 bucket

Read my guide if you like. Your bucket must have the same name as your domain (mywebsite.com in this example). Copy your S3 endpoint, ex. mywebsite.com.s3-website-us-west-2.amazonaws.com.

Deploy

Deploy your site to S3:

s3_website push

Setup Cloudflare

Get an account on Cloudflare. Add your website by clicking "Add site".

Change nameservers

Change the name servers on your domain, if you have your domain on another registrar. Wait for the changes to propagate. You'll find Cloudflares nameservers in your dashboard. They look like this:

dan.ns.cloudflare.com

and

kara.ns.cloudflare.com

Add CNAME

Add a CNAME record that points to your S3 Bucket. Add your domain mywebsite.com as Name and S3-endpoint as Value. Turn on Cloudflare by making sure the status icon is orange.

Redirect http to https

Under Page Rules, add the following URL pattern: http://*mywebsite.com/*. Then turn on "Always use https".

If the DNS has refreshed its cache and you've succeded in deploying your Jekyll-sajt to Amazon S3, using Cloudflare SSL.

How do i invalidate the cache?

Head over to the Cloudflare dashboard and the tab Caching -> Purge. Or use a cli tool like cloudflare-cli

Cache Expiration?

Look under Cache -> Browser Cache Expiration. Your can Determine the length of time CloudFlare instructs a visitor's browser to cache files. During this period, the browser loads the files from its local cache, speeding up page loads.

Jekyll for Company Websites

Tue, 12 May 2015 00:00:00 GMT

Recently we made two small company websites for Blendow Group – blendow.se and bgpublishing.se. We decided to build them using Jekyll and host them on GitHub Pages. Since our client is pretty tech-savvy and knows their way around Markdown and HTML we could choose this solution knowing they could update and edit their sites easily themselves. Both sites also require very little change as they're basically just promoting the digital products that Blendow offers (like BG Play and Legal Career that we've previously built for them).

GitHub pages

GitHub Pages are public web pages hosted for free through GitHub. In add-on to supporting regular HTML pages, GitHub pages also supports Jekyll - the simple static site generator.

The good stuff

Free - Hosting a website on GitHub Pages costs nothing.
Uptime - GitHub is very seldom down
Speed - fast response time
Backup - source code always safe in git
Private repos - private repos is now supported.
Fast and easy deployment

Any downsides?

Not all Jekyll plugins are supported. Such as our favorite plugin Jekyll Assets.
SSL is not fully supported. You can use https on project pages with the *.github.io domain. But you can't use a custom domain name with a fully secured HTTPS connection. At least not yet.

gh-pages branch

For serving content via GitHub Pages you need to create a branch called gh-pages and set this as default.

This branch will hold all of your website files.

Gulp

Of course you can just use the built-in Sass-compiler in Jekyll, but Gulp is our weapon of choice when it comes to compiling assets (using for example gulp-sass, running tasks and make builds so we decided to run Jekyll as a child process in Gulp, together with BrowserSync. Which will give us file watching, CSS injecting, browser synchronization, and auto-rebuild the Jekyll site.

There are two ways of running child processes in Node, spawn and exec. Here we are using spawn.

This is the Gulp task that builds the site using the config.yml file given. (We can use separate config.yml here for dealing with dev/staging/production builds, or other things we want to be different specified as YAML front matter.

gulp.task("jekyll-build", function (done) {
	gulp.task("jekyll- browserSync.notify(messages.jekyllBuild);
		return cp.spawn("jekyll", ["build", "--config", "_config.yml"], {stdio: "inherit"})
	.on("close", done);
});

An example of what the jekyll-rebuild, watch and default tasks could look like:

gulp.task("jekyll-rebuild", ["jekyll-build"], function () {
    browserSync.reload();
});

gulp.task("watch", function () {
    gulp.watch("_scss/**/*.scss", ["sass"]);
    gulp.watch(["js/app.js"], ["js"], ["bs-reload"]);
    gulp.watch(["index.html", "_layouts/*.html", "_includes/*.html", "_posts/*"], ["jekyll-rebuild"]);
});

gulp.task("default", ["browser-sync", "watch"]);

This workflow is inspired from shakyShane.

Development mode

We just run $ gulp and fire up a browser at http://localhost:3000 and/or the external ip address provided by BrowserSync (if using the xip.io setting that is).

Using a custom domain

First you will need to create a new file in your GitHub repo called CNAME that contains the domain name (or subdomain) that you wish to use. This file should be placed in the gh-pages branch, which we created earlier.

If you want to use a root domain (such as mywebsite.se) for your website you will need to setup a new A record that points to the IP address 192.30.252.153.

Deploy to GitHub pages

git push origin gh-pages

Easy as pie!

Edit content on GitHub or Prose

For editing content Markdown and HTML files, we just edit the files in our text editor and push to GitHub. But what about our client?

GitHub has a good editor for this, making this easy. Clicking the pencil icon takes us to the editor.

When finished, clicking the "commit changes" will commit directly to the gh-pages branch.

Prose is another alternative – a content editor for GitHub. Prose provides a beatifully simple content authoring environment for CMS-free websites Prose has advanced support for Jekyll sites and Markdown content. Prose detects Markdown posts in Jekyll sites and provides syntax highlighting, a formatting toolbar, and draft previews in the site's full layout.

Overall we're very happy with what we get by using Jekyll directly on GitHub Pages. This is not the last time we'll be using it as we're big fans of static site generators like Jekyll and Middleman.

Last but not least: check out our Jekyll boilerplate and Middleman boilerplate on GitHub.

Jekyll on Amazon S3 Part 1

Thu, 05 Mar 2015 00:00:00 GMT

A little post about deploying a Jekyll site to Amazon S3. Assumes that you already have a Jekyll site working.

You will need:

A Amazon Web Services account
Jekyll
Jekyll-assets (ej obligatoriskt)
s3_website

Install Jekyll Assets

Jekyll Assets is great, it lets you do this:

Write Sass, Coffescript, Erb...
Create dependancies between assets
Concatinate, minify with your tools of choice (Uglify for example)
Asset fingerprinting
Gzipped versions of your assets
Native support for custom vendors
Autoprefixer support
And moore...

In this example i'm going to use finger printing, which means that app.css will use app-908e25f4bf641868d8683022a5b62f54.css. For all other things i will use Gulp instead.

Use RubyGems and Bundler

Create a Gemfile in your root folder, and add:

source 'https://rubygems.org'
gem 'jekyll-assets'

Links

RubyGems Bundler

Install gems

Install by running bundle install

To use jekyll-assets, create a new file called _plugins/ext.rb. Add the following:

require 'jekyll-assets'

Configure Jekyll Assets

In your config file, add this YAML and don't forget to match your own paths.

assets:
debug: false
sources:
  - _assets/js
  - _assets/scss

Now when you include your assets, use this tags instead:

{% raw %}
    {% stylesheet app %}
    {% javascript app %}
{% endraw %}

Build

Nothing special here, just the ordinary Jekyll buid process

jekyll build

or, for watching changes:

jekyll serve --watch

Setup deploy settings for Amazon S3

S3 is perfect for storing static assets and static websites. There are a couple of command line tools available out there, in this example i'm going to use s3_website.

Add gem 's3_website' to your Gemfile and install by running bundle install.

API keys

You will find your AWS API Keys in IAM - Identity and Access Management. Look under Users -> Security Credentials.

Never version control your API Keys. Create a .env file in your repo and update your ignore patterns in .gitignore. Add:

AWS_ACCESS_KEY_ID=AKFKSKSDK8DSDSMFJA
AWS_SECRET_ACCESS_KEY=0fsd0fdsf0sd9f0fs0dBKmG6BfOVPYoHs
S3_BUCKET_NAME=example-website

Create s3_website.yml in the root folder. This file is going to grab the keys from .env.

s3_id: <%= ENV['AWS_ACCESS_KEY_ID'] %>
s3_secret: <%= ENV['AWS_SECRET_ACCESS_KEY'] %>
s3_bucket: <%= ENV['S3_BUCKET_NAME'] %>

Create AWS user

Go to AWS console -> IAM - Identity and Access Management
Create a user with permissions to S3 and Cloudfront.

Create bucket and turn on static hosting

Create a new bucket in your region of choice
Turn on static hosting. Open up Static website hosting under Permissions and check "Enable Website Hosting". Add index.html as Index Document

Configure Bucket permissions

Give the user/users access to your bucket by clicking the Permissions tab and "Add more permissions". Choose "Authenticated Users" and check "List" and "Upload/Delete".
Click "Add Bucket Policy" on the "Permissions tab again

Paste this:

{
  "Version": "2008-10-17",
  "Statement": [
    {
      "Sid": "Allow Public Access to All Objects",
      "Effect": "Allow",
      "Principal": {
        "AWS": "*"
      },
      "Action": "s3:GetObject",
      "Resource": "arn:aws:s3:::BUCKET_NAME/*"
    }
  ]
}

Remember to replace BUCKET_NAME with your bucket

Deploy

Test your configuration by running:

s3_website push --dry-run

If everything works:

s3_website push

Success!

Your Jekyll powered website is now live on your bucket endpoint. Ex: http://bucketname.s3-website-us-east-1.amazonaws.com/

Next steps

Cloudfront...
Custom domain

Next step?

Read Part 2

Nicer Facebook Sharing

Sat, 18 May 2013 00:00:00 GMT

Share on Facebook using Feed Dialog

Facebooks regular like and share buttons works well, but sometimes you want to make it easier for your users to share something more specific or dynamic to their timeline. Maybe a customized message and an image that the users selects or generates themselves. Nothing new under the sun, the Feed Dialog has been around quite sometime. But the old sharer.php is still used frequently, but is has some limitations. This post is focused around non-logged in shares. When you're logged in you can use other api-calls through the Graph API.

Good ol' sharer.php

You can create your own links or custom buttons using parameters to sharer.php, this is has been possible for ages.

Limitations

Even if you use the Open Graph-tas tags correctly, you're still limited in some ways. Yes, you can generate different content dynamically server side, but it might not solve your needs. If you just use sharer.php you have to settle with the standard text "Has shared a link" next to your shared post.

Only three sharing images

You can yse multiple og tags for images, but the number of images is limited to 3. So it doesn't matter if you provide more tags.

<meta property="og:image" content="http://sjoosandstrom.se/wp-content/uploads/2014/01/90.png"/>
<meta property="og:image" content="http://sjoosandstrom.se/wp-content/uploads/2014/01/60.png"/>
<meta property="og:image" content="http://sjoosandstrom.se/wp-content/uploads/2014/01/51.png"/>

Hello Feed dialog!

By using Feed dialog you can customize and personalize the shared content on the timeline. You don't need any extended permissions form the API to do this. Read more about Feed dialog

Feed dialog can be implementended with the Javascript SDK, iOS, Android but also using URL redirection. You're application can alsp publish directly to a users timeline without asking the user, by using this Graph API call

Create a new app on Facebook developer

För att jobba med Feed dialog behöver du en Facebook App. Om du mot förmodan inte redan har en app, så skapa en på Facebook Developers. Antecka ditt app-id.

URL redirection. Create a link with your content

För att kunna göra en delning med Feed dialog och URL redirection behöver du skapa en länk likt:

https://www.facebook.com/dialog/feed?app_id=XXXXXXXXX&display=popup&caption=An%20example%20caption&link=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fdialogs%2F&redirect_uri=https://developers.facebook.com/tools/explorer

Under Feed Dialog - Params you will the correct parameters.

Here's an example with a link created with Javscript, some strings need to be url encoded:

var url = 'http://www.facebook.com/dialog/feed?app_id=' + fbAppId +
'&link=' + fbShareUrl +
'&picture=' + fbShareImg +
'&name=' + encodeURIComponent(fbShareName) +
'&caption=' + encodeURIComponent(fbShareCaption) +
'&description=' + encodeURIComponent(fbShareDescription) +
'&redirect_uri=' + redirectURL +
'&display=popup';

You can then open this link in a regular window, like:

window.open(url, 'feedDialog', 'toolbar=0,status=0,width=626,height=436');

Redirect uri

After the content has been shared to the users timeline, you will be redirected back to a specified link. This can be a simple html page that closes itself and redirect the user back to the page, or another url in the scope for the FB app.

Look ma, nicer shares!

Your shared content now looks better than ever. This is also more clear and professional. You can also upload a app icon that shows next to the shares.

Here is some examples from the Sjöö Sandström website. A website i made while working at Grand Public. Here you can share watches by using the Facebook icon to the lower right.

Activity log

Feed

Checklist

Use images with the correct size and ratio

Use Open Graph tags

Use the debug tool, useful for debugging your open graph tags

Use Insights for checking analytics

Implement JavaScript event tracking to track your shares.

Sublime Text

Mon, 21 Jan 2013 00:00:00 GMT

Sublime Text is fantastic editor. A few tips and tricks:

Plugins
Themes
Icons
Snippets
Completions
Settings
Kortkommandon
Tools
Workflow
CLI

<a name="plugins"></a>Plugins

Github Tools

A set of handy tools to use Sublime Text 2+ with Github

Unsplash

Unsplash for Sublime Text brings beautiful images from Unsplash to Sublime Text, your favorite code editor

SelectUntil

A sublime package that lets you expand your current selection until a specific character, regex, or char-count is encountered.

Syntax Highlighting for Sass

Perfect syntax highlighting for both SCSS and Sass.

Modific

Highlight lines changed since the last commit (supports Git, SVN, Bazaar, Mercurial and TFS) / ST2(3) plugin

Reindent on Save

Reindent on save

Expand Region

Like Expand Selection to Scope. But better!

Sound

Sublime-Text plugin to play event sounds

ToggleQuotes

ST2 Plugin for toggling quote marks

WP Seek

A bundle built with the sole purpose of reducing the amount of time spent digging around the WordPress core to look up the little things that we work with every day.**

Fold Comments

Folding comments

Sublime Data Converter

A package for Sublime Text 2 for converting CSV data to other formats

Origami

Split the window however you like! Create new panes, delete panes, move and clone views from pane to pane.

Gutter Color

Gutter Color is a Sublime Text plugin which displays a colored icon for all lines which contain a color

Hayaku

Sublime CSS3

Better CSS3 syntax highlight for Sublime Text

AllAutocomplete

Autocomplete in all open files

Advanced New File

Quick way of creating new files ana folders

AlignTab

An alignment plugin using regular expression

Alignment

Indentering deluxe

Sidebar Enhancements

Add more actions to the sidebar, like duplicate

Package Control

First plugin to install. Essential.

Emmet (Zen Coding)

Zen Coding ftw

Gist

Integration of Github Gist

Terminal

Open the terminalen i current folder

Sublime Linter

Good code linter

WordPress

Autocomplete for the WordPress API

SublimeCodeIntel

Full-featured code intelligence and smart autocomplete engine

Delete Blank Lines

As it sounds

Syntax-highlighting-for-Sass

Sas/Scss for Sublime

Sass-Autocomplete/highlighting

SublimeFileDiffs

Diff files

DocBlockr

Simplifies writing DocBlock comments in Javascript, PHP, CoffeeScript, Actionscript, C & C++

Sublime-Placehold.it

Placehold.it in Sublime text

TrailingSpaces

Remove trailing whitespace

GitGutter

Show git status in the gutter

AutoFileName

Autocomplete filnames in your project.

Search WordPress Codex

Search Wordpress Codex

Sublime Text 2 Stack Overflow Plugin

Search Stack Overflow

MacTerminal

Alternative to Terminal.

<a name="snippets"></a>Snippets

HTML5 Boilerplate

A Sublime Text 2/3 snippet to generate the HTML5 Boilerplate template

HTML Snippets

Some html snippets

Laravel Snippets

Snippets for Laravel

Javascript patterns

Some js snippets

Sublime-2-Handy-Snippets

Handy snippets

WordPress snippets

Meta boxes, custom logo login, custom admin and some other stuff

<a name="themes"></a>Themes

Material Theme ⤴

Afterglow ⤴

Brackets ⤴

Inspirerad av Adobes editor, Brackets

Spacegrey ⤴

A Hyperminimal UI Theme for Sublime Text

Watson ⤴

Custom UI theme for Sublime Text 3

Phoenix ⤴

Nice themes, also styling for tabs and sidebar

Solarized ⤴

Precision colors for machines and people

Soda ⤴

UI-theme with Retina support

TMThemeEditor ⤴

Build themes in the browser (Chrome).

Great collection

Great collection

Flat ui theme

<a name="icons"></a>Icons

Some great replacement icons for Sublime Text:

Afterglow dock icon

Sublime Text Yosemite icon av Andreas Eldh

Sublime Text Replacement Icon av Jannik Sieberg

Sublime Text.app icon av Russ

Sublime Text Icon, for Yosemite av Rafael Conde

Sublime Text av David Öhlin

Sublime Text 2 icon av Bryce Thompson

Unofficial Sublime Text 2 Icon Replacement Final av Adam Kiss

Sublime Text Replacement Icon av Tony Gines

Sublime-Text-Icon-Redux av Ronan Flynn

Sublime Text 2 av Dmitry Svetlichny

Sublime Text 2 Replacement Icon av Elliot Jackson

Sublime Text 2 Icon av Daniel Matarazzo

<a name="completions"></a>Completions

Sublime CSS Completions

Sublime-Better-Completion

HTML5-sublime-completions

A more complete library of CSS autocompletion for Sublime Text.

<a name="settings"></a>Settings

Preferences -> Settings -> User

Folder exclude patterns in a project

"folder_exclude_patterns":
[
	".svn",
	".git",
	".hg",
	"CVS",
	"_build",
	"dist",
	"build",
	"site",
	".sass-cache",
	".phptidy-cache",
	"node_modules"
],

Trimm whitespace on save

"trim_automatic_white_space": true,
"trim_trailing_white_space_on_save": true,

Scroll past end. Useful when editing code far down in a long document

"scroll_past_end": true

Markera aktuell rad

"highlight_line": true

Copy selected text to the search/replace panel

"find_selected_text": true

Show indentation helpers

"draw_indent_guides": true

Bracket settings

"match_brackets": true,
"match_brackets_angle": true,
"match_brackets_braces": true,
"match_brackets_content": true,
"match_brackets_square": true,

Caret style. Choose between "smooth", "phase", "blink", "wide" och "solid".

"caret_style": "phase"

Line padding

"line_padding_bottom": 1,
"line_padding_top": 1

Typography settings

"font_face": "Source Code Pro",
"font_size": 14,
"font_options":
[
	"subpixel_antialias"
],

More settings tips

Links

Official Docs: Keyboard Shortcuts OSX Official Docs: Keyboard Shortcuts Win Kortkommandon för OSX, Windows och Linux Useful Shortcuts

<a name="tools"></a>Tools

Free Sublime Text tips

Delivered straight to your inbox

Sublimerge

The professional diff and merge tool for Sublime Text 2 and 3

Can I Switch To Sublime Text 3?

Sublimall

Sync the Sublime settings

<a name="workflow"></a>Workflow

Sublime Text

The usefuless of this setup guide will vary based on your personal preferences for how your text editor should function, but it should help with the initial setup of Sublime Text. Let’s get started.

Setting up Sublime Text

Tips from Alex MacCaw

Customizing your Workflow

Become a Sublime Text Power User

Canadian sized hot tips. Av @wesbos

ST2-Setup

Setup tips from @cbracco

<a name="cli"></a>CLI

ln -s "/Applications/Sublime Text 3.app/Contents/SharedSupport/bin/subl" /bin/subl

Open files from the terminal

Use Sublime as the default editor for Git

git config --global core.editor "open -a 'Sublime Text 2'"

WordPress, Nginx and PHP-FPM

Wed, 31 Oct 2012 00:00:00 GMT

This is my notes for setting up a VPS optimized for WordPress, with Nginx and PHP5-FPM. I'm setting up MySQL, W3 Total Cache, Git and a few other things. I assume that you already have a VPS with has an allocated a ip adress. Also, you must have a domain.

Nginx?

NGINX is the world’s most popular open source web server for high traffic sites, powering over 100 million properties. Nginx works differently than Apache, mainly with regard to how it handles threads. Nginx has grown in popularity since its release due to its light-weight resource utilization and its ability to scale easily on minimal hardware. Nginx excels at serving static content quickly and is designed to pass dynamic requests off to other software that is better suited for those purposes.

sudo apt-get install python-software-properties
sudo apt-get update
sudo apt-get upgrade

Install the Nano editor (or just use Vim)

sudo apt-get install nano

Configure hostname

nano /etc/hosts

127.0.0.1 localhost.localdomain localhost
127.0.0.1 myserver

hostname = the name on your VPS

Install Nginx, PHP and PHP5-FPM

sudo apt-get install nginx
sudo apt-get install php5-cli php5-common php5-mysql php5-imagick php5-gd php5-dev
sudo apt-get install php5-fpm php5-cgi php-pear php5-memcache php-apc

Start PHP-FPM

sudo service php5-fpm start

Create a sym link to the default site settings file

cd /etc/nginx/sites-enabled
sudo ln -s ../sites-available/default default

Start Nginx

sudo service nginx start

You can now visit your domain mywebsite.com and see "Welcome to Nginx"

sudo rm default
sudo service nginx stop
sudo service php5-fpm stop

Remove the symlink igen and stop Nginx

Configure Nginx

cd /etc/nginx

Edit nginx.conf

nano nginx.conf

Add this (gist)

Change worker_processes and worker_connections to match your server. If your VPS has got 6 CPU cores, adjust worker_processes to 6. worker_connections till 6 * 1024 = 6144. Find out how many CPU cores by running cat /proc/cpuinfo

Go to /sites-avaliable

cd sites-available

Create a file called mywebsite.com

touch mywebsite.com
nano mywebsite.com

Add this (gist)

Create the folder `global` inside the `nginx` folder

cd /etc/nginx
sudo mkdir global
cd global

Create the file `restrictions.conf`

touch restrictions.conf
nano restrictions.conf

Add this: (gist)

Create the file `php5-fpm.conf` inside the global directory

touch php5-fpm.conf
nano php5-fpm.conf

Add this (gist)

Set up your site

Activate the server configuration with a symlink

cd /etc/nginx/sites-enabled
sudo ln -s ../sites-available/mywebsite.com.se mywebsite.com

Go to the www folder

cd /var/www

Create a group

sudo groupadd web

Add admin rights

sudo usermod -a -G web YOURUSER

Add the group

sudo chgrp web /var/www

Make the www directory writable

sudo chmod -R 775 /var/www

Assign all files to the group

sudo chmod g+s /var/www

Create a folder for your website

mkdir mywebsite.com
cd mywebsite.com

Create a index.php and try out the configuration

touch index.php
nano index.php

Add phpinfo(); and check so everything works

Start Nginx

sudo service nginx start

Start PHP-FPM

sudo service php5-fpm start

Great success!

Secure SSH

Create a user

adduser --home /home/name name

Add user as sudoer

visudo

Add

name ALL=(ALL) ALL

Turn off root login

nano /etc/ssh/sshd_config

Add

PermitRootLogin no
PasswordAuthentication no

Install MySQL

sudo apt-get install mysql-server
sudo apt-get install php5-mysql

Create database

mysqladmin -u root -p create databasnamn

Secure MySQL

mysql_secure_installation

Log in

mysql -u root -p

Create user

CREATE USER 'anvnamn'@'localhost' IDENTIFIED BY 'c0MpLiCaTeDp@55w0rd';

Grant access

GRANT ALL ON *.* TO 'anvnamn'@'localhost';

Logout from the MySQL shell

exit

Manage the database

I prefer to use Sequel Pro . It is a fast, easy-to-use Mac database management application for working with MySQL databases. Simple and looks great.

Install WordPress

This is outdated. You should use WP-CLI instead.

Istall wget

sudo bash
apt-get update
apt-get -f install
apt-get install wget

Download WordPress

wget http://sv.wordpress.org/wordpress-4.2.2-sv_SE.tar.gz
tar xfz wordpress-4.1-sv_SE.tar.gz
mv wordpress/* ./
rmdir ./wordpress/
rm -f wordpress-3.9.1-sv_SE.tar.gz
mv wp-config-sample.php wp-config.php

Edit wp-config add your credentials and settings

nano wp-config.php

Or use my little bash script wp-installer

Install cURL

sudo apt-get install curl

Install WP-CLI

WP-CLI is a set of command-line tools for managing WordPress installations. You can update plugins, set up multisite installs and much more, without using a web browser.

First, download wp-cli.phar using wget or curl. For example

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar

Then, check if it works:

php wp-cli.phar --info

To be able to type just wp, instead of php wp-cli.phar, you need to make the file executable and move it to somewhere in your PATH. For example:

chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp

No try wp --info

Bonus: Add Tab completions.

Setup SSH-keys

We need to connect to the server without using password every time:

mkdir ~/.ssh
chmod 700 ~/.ssh
ssh-keygen -t rsa

Own your .ssh folder (for user with rootaccess)

cd ~
sudo chown name .ssh

Copy keys to the server:

cat ~/.ssh/id_rsa.pub | ssh user@dindoman.se 'cat - >> ~/.ssh/authorized_keys'

Set correct access

chmod 600 ~/.ssh/authorized_keys && chmod 700 ~/.ssh/

Install Git

apt-get install git-core

Add the git user

adduser git
su git
cd /home/git
mkdir .ssh
chmod 700 .ssh
cd .ssh
touch authorized_keys

Test

ssh git@mywebsite.com

Add remote git repo

git remote add origin git@mywebsite.com.se/var/www/mywebsite.com

Solve the git objects access rights

cd repository.git
sudo chmod -R g+ws *
sudo chgrp -R mygroup *
git config core.sharedRepository true
sudo chown -R git:git .git/

Set git user as sudoer

visudo
git ALL=(ALL) ALL

W3 Total Cache

touch /etc/nginx/sites-available/mywebsite.com

Add

include global/wordpress-w3-total-cache.conf;

Create the w3 settings file

touch /etc/nginx/global/wordpress-w3-total-cache.conf

nano /etc/nginx/global/wordpress-w3-total-cache.conf

Add this (gist)

Also create nginx.conf inside /var/ww/mywebsite.com

touch nginx.conf
nano nginx.conf

Add: (gist)

Change allowed maximum file size

nano /etc/nginx/sites-available/default

Add for example:

client_max_body_size 30M;

Edit php.ini

nano /etc/php5/fpm/php.ini

Under File Uploads, change to:

upload_max_filesize = 30M;

Reload PHP-FPM and Nginx

service php5-fpm reload
service nginx reload

Add correct MIME-type for SVG (.svg)

Edit /etc/nginx/mime.types

nano/etc/nginx/mime.types
image/svg+xml svg svgz;

Add correct mime-types for webfonts

if you use webfonts, Nginx can need a helping hand serving the correct mime-types, instead of just the default application/octet-stream. Edit /etc/nginx/mime.types

application/vnd.ms-fontobject eot;
application/x-font-ttfttf;
font/opentype ott;
application/font-woff woff;

Support more file formats

Allow .eps files to be uploaded in wp-admin

add_filter('upload_mimes', 'website_upload_mimes');

function website_upload_mimes ( $existing_mimes=array() ) {

// Add *.EPS files to Media upload
$existing_mimes['eps'] = 'application/postscript';

return $existing_mimes;
}

Some links

First 5 minutes on a server

Update. If you use Ubuntu 12 och PHP 5.4+, check out:

Fix locale issues

locale-gen en_US en_US.UTF-8 hu_HU hu_HU.UTF-8
dpkg-reconfigure locales