Category: Tutorials

Tutorials showing you how to do things – my way!

How To: Setup React client-side routing with Apache and sub-directories

Before I get started (or yelled at) I have to point out that this topic is already covered in the Create React App docs. This post is meant to cover a very specific use case – serving a react app that uses client-side routing (like react-router) on an Apache driven shared host from within a sub-directory on the server. I’m also assuming you’ve bootstrapped your project with the Create React App tool, since we’ll be relying on it’s build script.

[continue reading]
Tutorials , ,

How To: Setting up Compass with SCSS in PhpStorm

PhpStorm includes a very useful feature called File Watchers which if you’re already working with Compass should sound very familiar. From the documentation, File Watchers is defined as “..a PhpStorm system that tracks changes to your files and runs a third-party standalone application.” So basically whenever a watcher is running it will execute a program when there are changes made. This makes using Compass more straight forward since you no longer need to open a terminal/command prompt, navigate to your project, and run Compass. Or in case you forget to compile and can’t figure out why your changes aren’t appearing (we’ve all done it, I won’t judge.

[continue reading]
Tutorials , , , ,

How To: Installing Node.js and npm on a Raspberry Pi 3

In this post we will review how to install Node.js and npm on a Rasbperry Pi 3 running a fresh installation of Raspbian Stretch Lite. The version of node I’ll be installing is 8, however if you need to install a different version you can still use these instructions. Let’s get started!

[continue reading]
Tutorials , , , ,

Footer Reveal on Scroll

I recently came across this neat way to present footers while browsing around and decided to try and replicate it. It works by setting position: fixed; and z-index: -1; on our <footer> tag, and on our last article we add a large margin-bottom to reveal the content beneath. It’s very easy to implement if your footer has a static height, and of course works for multiple breakpoints via @media queries.

Here is a quick codepen, and you can pull the source code here.

Design, Development, Tutorials

CSS Sprites

What is a Sprite Sheet?

Put simply, a sprite sheet is an image file composed of smaller individual graphics. These graphics can be various states of a UI element, individual frames of an animation, or even various design elements that appear commonly throughout a site’s design.

[continue reading]
Development, Tutorials , ,