Blog

UnCSS – Slim Down Your CSS

UnCSS is a tool that removes unused CSS from your stylesheets. It works across multiple files and supports Javascript-injected CSS.

Looking for big optimization gains on your site? There’s nothing better than removing stuff you don’t need! Whether it’s code, images or dependencies, getting rid of the stale code is like the first beer after a long stressful day. When it comes to CSS, there’s no better tool for optimazation than UnCSS. It’s a powerful NodeJS powered utility that removes unused CSS from your stylesheets. Continue reading “UnCSS – Slim Down Your CSS”

My Frontend Build Process

I’ve been a developer for some time now with a focus on the frontend. For a majority of the projects I’ve worked on, the initial “base” setup is always the same:

  1. NPM to handle my dependencies
  2. Gulp to automate repetitive tasks (linting, optimizing, transpiling, etc.)
  3. Sass to preprocess CSS
  4. Component & Modular based CSS and JS folder structure

And most importantly… sticking to established standards. My two biggest compliant’s were creating this same “base” setup for every new project and new developer ramp-up time. Both of which would eat into actual development time costing the client more money in the end. My solution was Frontend Build and with it, I’ve saved on average 3 – 8 hours depending on the project! Continue reading “My Frontend Build Process”

Attaching JavaScript Handlers to Scroll Events = BAD!

It’s a very, very, bad idea to attach JavaScript handlers to the window scroll event. Instead, use this technique Twitter uses.

Check out John Resig’s most excellent article, Learning from Twitter for an in-depth explanation why is is a bad idea and why the alternative below works better.

It’s a very, very, bad idea to attach handlers to the window scroll event.

The Wrong Way

Depending upon the browser the scroll event can fire a lot and putting code in the scroll callback will slow down any attempts to scroll the page (not a good idea). Any performance degradation in the scroll handler(s) as a result will only compound the performance of scrolling overall.

$( window ).scroll( function() {
  // Do your thang!
});

The Correct Way

It’s much better to use some form of a timer to check every X milliseconds OR to attach a scroll event and only run your code after a delay (or even after a given number of executions – and then a delay).

var scrolling = false;

$( window ).scroll( function() {
  scrolling = true;
});

setInterval( function() {
  if ( scrolling ) {
    scrolling = false;
    // Do your thang!
  }
}, 250 );

Hope this helps to clear things up and provides some good advice for future infinitely-scrolling-page developers!

Add WordPress Plugin Template Files

Creating a WordPress plugin where you need to create templates that can be overridden by the theme? Learn how to build a template loading system similar to WooCommerce allowing you to do just that!

If you’ve ever worked with WooCommerce theming, you’ve probably had to copy some of their templates files to your own theme in order to override the HTML. It’s a great system that allows frontenders the ability to change the output to match designs. In this article, I’ll walk you through how to do just that — easily add WordPress plugin template files.

Just wanna get straight to the code? Click here. Continue reading “Add WordPress Plugin Template Files”

jQuery Slider Menu

Tired of those standard click ‘n drop menus? Need something with a little more pazazz? Yes & yes! Here’s the answer to your prayers, the jQuery Slider Menu.

Tired of those standard click ‘n drop menus? Need something with a little more pazazz? Yes and yes! Here’s the answer to your prayers, the jQuery Slider Menu based of off the Agile WordPress theme.

See Demo | Fork on GitHub Continue reading “jQuery Slider Menu”

What Are Webfonts? — for Clients

The concept of webfonts, their different versions and how they render differently across different browsers, versions, devices and operating systems can be hard to explain to client. This will make it easy!

“Webfont… what’s that and why do I need them?” Trying to explain to a non-technical client the what, why and which webfonts are needed can be like having a conversation with a 2 year old in the ‘but why?’ stage.

What are webfonts?

Here’s a quick break down of the 3 W’s to help keep clients from doing a @font-face-palm! Continue reading “What Are Webfonts? — for Clients”