Nothing matches your search.

Christopher Murphy - Blog

Exploring front-end development and design.

10 Essential Extensions for Visual Studio Code preview image

10 Essential Extensions for Visual Studio Code

A collection of useful extensions for front-end development in Microsoft Visual Studio Code

VS Code is a powerful editor right out of the box, but there are a slew extensions available that add some great functionality and flavor. What follows is my top-10 list of the most useful extensions for front-end development in VSCode. Read more...

Publishing npm Packages preview image

Publishing npm Packages

Publishing npm packages and sharing code between projects is ridiculously simple.

The Node Package Manager (npm) is a ubiquitous system used in front-end development for sharing and managing useful bits of code between developers and projects. Node packages are published on a central and public directory maintained by npm. Read more...

Expand & Collapse Navigation Menu on Scroll preview image

Expand & Collapse Navigation Menu on Scroll

Creating an expanding/collapsing nav-bar with scroll events and vanilla JavaScript

What we’ll be making Screen real estate is a precious commodity, especially on small displays such as mobile devices. One strategy to maximize content display is to dynamically control the display of the primary navigation depending on whether or not the user is scrolling up or scrolling down. It’s quite simple: scroll down on the page and the navigation recedes; scroll up on the page and the navigation reappears. Read more...

Up & Running Quickly with webpack preview image

Up & Running Quickly with webpack

Bundle project assets and easily manage dependencies with webpack.

Module bundlers, like webpack and Browserify, have become a ubiquitous part of the front-end development workflows. Module bundlers allow us separate program functionality into distinct parts to be recombined into a single unit at production time. Separating programs into distinct, functional chunks greatly increases the maintainability of code, as it forms a clear delineation between the various working components within a project. Read more...

Making a Glowing Button preview image

Making a Glowing Button

A simple snippet for a radioactive button.

I got a wild hair the other day to make a glowing button. The basic idea was simple and straightforward: create a button that has a glowing look, as it were phosphorescent or radioactive, and that glows even more fervently when hovered. So, let's make it! Read more...

Build a Flexible & Lightweight Drop-down Menu preview image

Build a Flexible & Lightweight Drop-down Menu

Create a simple drop-down menu with a little bit of Vue.js

In this tutorial we're going to make a flexible and lightweight drop-down menu using a little bit of Vue.js. In the end, we'll have a simple drop-down menu that can be adapted to a wide variety of layouts and styles, and can easily be customized with your own animations and transitions. Read more...

Create Element Transitions with Vue.js preview image

Create Element Transitions with Vue.js

Easily toggle animations with Vue.js.

Vue.js (Vue) offers a simple way to transition between elements on the page, allowing for either simple transitions between CSS properties or complex animations (or both!). In this example I'll demonstrate the basics of Vue transitions by creating a menu-expand toggle button. You can see a demonstration in the preview animation above. Read more...