Christopher Murphy - Blog

Exploring front-end development and design.

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...

Independently Styling Underline Color preview image

Independently Styling Underline Color

A CSS snippet for independently styling text and underline color.

If you've ever wanted to set the color of the underline for underlined text separately from the text color, you may have come across the CSS property `text-decoration-color`. Unfortunately, this property is not yet fully supported by all browser vendors. Read more...

Learn Vue.js - a quick and friendly tutorial preview image

Learn Vue.js - a quick and friendly tutorial

Making a NATO phonetic alphabet converter with Vue.js.

Vue.js is a progressive and reactive JavaScript framework for building front-end interfaces. It's dead-simple and allows for lightning-fast DOM manipulation through a virtual DOM. It's flexible enough to use in simple, static pages, and powerful enough to use in complex applications as well. Read more...

Lightweight Hamburger Navicons preview image

Lightweight Hamburger Navicons

Tasty little hamburgers.

The ubiquitous hamburger menu button. Whether you love it or hate it, the hamburger button is a well-worn convention for toggling menus or options. This article explores alternative, lightweight methods of generating hamburgers using HTML and CSS. Read more...