Category: Tutorials

Tutorials showing you how to do things – my way!

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!

This is essentially a three part process. First we remove any installation or packages that may have come preinstalled with Raspbian. Next, we’ll run a bash script provided by NodeSource which updates our repository so we can do a simple apt install. And lastly we’ll use apt to install Node.js. [continue reading]


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.


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. This practice is definitely not new – it’s been done since the early days of video games, however since being introduced to the world of web design they’ve generally been considered as good practice. There’s a lot of debate about whether or not using sprites are actually beneficial, but as with most techniques there is always a time and a place to use them. Before we get into the pros & cons let’s first review how to implement a sprite.

Adding Sprites To Your Site

Sprites are fairly straight forward to implement, it just takes a little time creating your sprite sheet and defining the CSS rules that will best suit your needs. They can be applied to various HTML elements such as lists (both ordered & unordered), divs, spans, anchor tags, and so on. As I mentioned above one way they can be used are for hover states, which is the example we’ll be exploring. Here we have a version of the sprite map used on this site which includes two states – default and hover.

social media sprite from battlehillmedia.com

Various elements of a sprite sheet

Organization is very important when creating a sprite sheet. If you use a systematic grid approach to laying out your elements it will make calculating your background-position values a bit easier later on, especially if all your elements are the same exact size as with the example above.

CSS
.sprite {
    background-image:url('social.png');
    background-repeat: no-repeat;
    display:block;
    width:64px;
    height:64px;
}

.facebook { background-position: 0px 0px; }
.facebook:hover, .facebook:active { background-position: -64px 0px; }

.twitter { background-position: 0px -64px; }
.twitter:hover, .twitter:active { background-position: -64px -64px; }

.instagram { background-position: 0px -128px; }
.instagram:hover, .instagram:active { background-position: -64px -128px; }

[continue reading]