Categories
Links of Interest

Article Roundup for 04.03.2015

  1. Starting a Refactor with CSS Dig
  2. Accessibility Wins
  3. the origin of the <blink> tag
  4. HTML Special Symbols
    There are lotsa advanced enities out there…
  5. Introducing the IE Diagnostics Adapter for third party developer tools
    Wait, you can use Chrome Dev Tools on IE??? Mind blown.
  6. BEM 101
  7. Browser representatives on CSS [selector] performance
    In case you were still concerned, no, css selectors are rarely a performance issue.
  8. Should designers learn to code?
    Good question. “Yes!” (says the developer). Seriously though, there are good arguments for both sides.
  9. 7 Ways to Optimize Jenkins
    For those CI folks…
  10. What is the WebP Image Format (And Why Does It Matter)?
  11. WordPress to be bundled in Jetpack with mission to power 50% of the web
  12. Loading CSS without blocking render
    criticalCSS has been my solution. Check out the articles I wrote in the last week about it.
  13. FOUT, FOIT, FOFT
    Argh, FOUT. So annoying to deal with.
  14. Using CDNs, Compression, and Minification to Speed Up WordPress
    Speed.
  15. ARIA Bones: Simplifying WAI-ARIA
  16. Tips & Resources for Enhanced Checkout Forms
  17. How to Test for Internet Explorer on Android, iOS, and Mac OS X
  18. iPhone Killer: The Secret History of the Apple Watch | WIRED
  19. Command Line Power User
    zsh is awesome and really useful if you are in the command line at all.
  20. WordPress Functionality Plugins
    Yes. Yes! Everybody should be doing this.
  21. Theming Form Elements with Sass
  22. Let Links Be Links
  23. Using HHVM With WordPress
    At WordCamp Atlanta this last weekend, Nic Rosental talked about different stack configurations. a few of his stacks used HHVM and it seems to really blow other php options out of the water. Worth looking into.
  24. DevTools: State Of The Union 2015
    Addy Osmani talks DevTools.
  25. A closer look at Project Spartan, Microsoft’s Internet Explorer killer
  26. “Project Spartan” in the Windows Technical Preview build 10049
    We can start to use Spartan (if you have a preview installed).
  27. Server Side Mustard Cut
    Clever way of speeding up Mustard Cutting.
  28. How to Separate the Good WordPress Hosts from the Bad
  29. A Picture is Worth a Thousand Bytes
  30. Loaders.css
    Some great loading animations.
  31. Primer by GitHub
    GitHub’s little Bootstrap.
  32. Building Better Interfaces with SVG by Sara Soueidan
    Great slides on why you should use SVG’s over other technologies.
  33. Die PNG. Die! How to use vector icons in your apps.
    I’m all-in on SVG when possible. No repsonsive images and generally lighter-weight.
  34. JavaScript World Domination
  35. Microsoft Q&A on the SitePoint Forums
  36. NHL GameCenter Live is Steadily Getting Worse – Winging It In Motown
    Normal users complaining about the UX of a web app known as NHL GameCenter Live. As an nhl fan, I can understand these complaints.
  37. Use the Right Web Performance Tools for the Job
Categories
Scripts

Using criticalCSS with Gulp.js

I have a site that is using Gulp.js as its task runner. I wanted to use criticalCSS on the site and because there isn’t a Gulp plugin quite yet, I had to roll it myself.

I’m going to try and tackle writing the plugin myself, but for the time being, here is a quick script to get it running:

gulp.task('critical', function() {
  var request = require('request');
  var path = require( 'path' );
  var criticalcss = require("criticalcss");
  var fs = require('fs');
  var tmpDir = require('os').tmpdir();

  var cssUrl = 'http://localsite.dev/wp-content/themes/theme_name/style.css';
  var cssPath = path.join( tmpDir, 'style.css' );
  var includePath = path.join( __dirname, 'inc/critical.css.php' );
  request(cssUrl).pipe(fs.createWriteStream(cssPath)).on('close', function() {
    criticalcss.getRules(cssPath, function(err, output) {
      if (err) {
        throw new Error(err);
      } else {
        criticalcss.findCritical("http://localsite.dev/", { rules: JSON.parse(output) }, function(err, output) {
          if (err) {
            throw new Error(err);
          } else {

            fs.writeFile(includePath, output, function(err) {
              if(err) {
                return console.log(err);
              }
              console.log("Critical written to include!");
            });

          }
        });
      }
    });
  });

});

As you’ll probably notice, this is a WordPress site, but you can tweak some of the parameters in here to meet your needs. I have the inlined css outputting into an include called critical.css.php. You can reference my post on Using criticalCSS in WordPress on how to output this include in your <head>.

Categories
Links of Interest

Link: Know These Web Dev Building Blocks

I often think about the technologies I’ve learned over the past 8 years as a Front-End Developer and wonder what it must be like for someone coming into this field. I think the best answer is to take it one tool at a time.

This article is a great comprehensive list of what should be learned as a web developer.

Know These Web Dev Building Blocks

One part I had a little issue with was the section on Development Frameworks (i.e. Bootstrap). He isn’t wrong in saying that you should know how to use these, but I would add a caveat that these frameworks aren’t the silver bullet for every project. Just because you need, say a grid system, doesn’t mean you have to start with all of Bootstrap.

Overall, a great read!

Categories
Scripts

Using criticalCSS in WordPress

I’ve been obsessed with optimizing websites for awhile, and one big hurdle to a faster website is “render-blocking” JavaScript and CSS. This came up as I was trying to get a high score on Google PageSpeed Insights.

Screenshot of Render Blocking Error in PageSpeed Insights | "83/100 Speed. Consider Fixing: Eliminate render-blocking JavaScript and CSS in above-the-fold content"

Google recommends you move these scripts and css files to the bottom of the DOM (just before the </body>). With CSS, it’s a little more complicated because you have to figure out the “above the fold” (ugh hate that term) styles and inline them in the <head>. More on that in the criticalCSS section.

Assumed knowledge of enqueuing

This post assumes knowledge of enqueuing scripts/styles in WordPress. If you haven’t used these functions in WordPress, I’d highly recommend brushing up on them. Regardless of if you want to use criticalCSS or not, this is a much better way to insert styles/scripts into a theme. Here are some good resources:

Moving JavaScript to bottom of the DOM

Luckily, WordPress has built-in mechanisms to put your script at the bottom of the DOM. The 5th parameter of the wp_enqueue_script() function is a boolean $in_footer. which tells WordPress whether or not to put it in the footer. Here’s a quick example inside your functions.php:

wp_enqueue_script( 'mysite_main', get_template_directory_uri() . '/js/main.min.js', array('jquery'), '4.0', true );

“jQuery is still in the <head>”

By default, jQuery is enqueued in the <head>. We can change this pretty easily in functions.php:

wp_deregister_script('jquery');
wp_register_script('jquery', "//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js", false, null, true);
wp_enqueue_script('jquery');

In this example, I also chose for the Google CDN version of jQuery. Notice again the last param set to true, just like our enqueues above.

“jQuery is STILL in the <head>!”

Now you should see jQuery at the bottom of the DOM, right? Maybe not actually.

If you have a plugin that is dependent on jQuery and puts their script in the <head>, WordPress will keep jQuery in the head (as it should, otherwise, you’d get a “$ is not defined” error). You have a few options:

  1. Edit that plugin to make sure that nothing breaks if you set $in_footer to true in all of the enqueues. Assuming it works, contact the plugin author so they can change it.
  2. Use a plugin that moves all scripts to the footer (hit or miss).
  3. Deregister then reregister the plugin’s scripts. This is a little more risky because if the plugin changes the name of their script, you could get some broken JavaScript.

I’m partial to option 1, as it nips the problem in the bud, assuming the plugin author is responsive on the support forum. 🙂

At this point, you may run into a brick wall. Sometimes plugins do crazy things and it’s almost impossible to get the script/style where you want it. Luckily, the more well-known plugins (i.e. Contact Form 7) do these things correctly.

Get CSS to bottom of DOM

Getting CSS in the footer in WordPress is a little more tricky. The wp_enqueue_style() function doesn’t support $in_footer (maybe they’ll add it someday), so we’ll have to get our hands dirty. Instead of using the wp_enqueue_style() function, we are going to manually echo the <link> tag in the functions.php (I know, I know. Just after I lectured you on how great enqueuing is):

function styles_in_wp_foot() {
	echo '<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Ubuntu:400,700,400italic,700italic|Bitter" type="text/css" media="all" />';
	echo '<link rel="stylesheet" href="' . get_stylesheet_uri() .'" type="text/css" media="all" />';
}

add_action( 'wp_footer', 'styles_in_wp_foot' );

If you reload your site, you’ll see a flash of unstyled html until the css is loaded. We don’t want this. Enter criticalCSS.

criticalCSS

Now, we have to generate the inlined styles for the <head>. You can use a task runner like Grunt of Gulp to do this. Below is a Grunt configuration block. Please see the grunt-criticalcss docs for full implementation.

criticalcss: {
  custom: {
    options: {
      url: "http://localurl.vvv",
      // arbitrary width and height for critical to use when looking at "above the fold" styles.
      width: 1000,
      height: 800,
      outputfile: "inc/critical.css.php",
      filename: "style.css",
      buffer: 800*1024
    }
  }
},
Alternative to a task runner

Update: For those out there that are using a pre-built theme and don’t have a task runner, it might be easier to manually run a critcalCSS generator. Take the resulting css the tool gives you and dump it into the inc/critical.css.php file. Every time you update your css, you’ll want to run this tool again.

Now that we have that CSS in a file, we just need to echo the php include into the <head>. Add this to functions.php:

function criticalCSS_wp_head() {
	echo '<style>';
	include get_stylesheet_directory() . '/inc/critical.css.php';
	echo '</style>';
}

add_action( 'wp_head', 'criticalCSS_wp_head' );

Wrapping up

Screenshot of PageSpeed score of 96/100 for SuperiorCampers.comAs you see, the more scripts, styles and plugins you have installed, the more complex this can get. So keep those to a minimum, folks. 🙂

After this, you should see a huge uptick in your PageSpeed score if you are doing all the other (easier) things on the list. One of our clients’ sites has a 96/100.

Categories
Links of Interest

Article Roundup for 03.27.2015

More great links for this week. I’m off to WordCamp Atlanta 2015 today! If you happen to be going, let’s meet up! Hit me up on Twitter.

  1. Top skills for front-end web developer
    This is a really great plan to learn Front-End Development. And all these courses are free!
  2. Should Our Agile Team Use Scrum or Kanban?
    Gotta be honest, I didn’t know what Kanban was until this article.
  3. First Click: the great Mac vs. PC touchscreen debate
    This still hasn’t really played out. Touch/mouse devices are a pain for us to design for, but its the world we live in.
  4. How to stand (at your desk)
    I’ve been thinking of a standing desk as I’ll be in the market for a new desk.
  5. 4 simple ways to design killer call to action buttons
  6. ▶ Made By: Chris Coyier (CodePen) – YouTube
    Another great video from Envato on Chris Coyier
  7. ▶ Made By: Dan Cederholm (Dribbble) – YouTube
    Dan talks Dribbble
  8. » Common Patterns in Styleguides, Boilerplates and Pattern Libraries Cloud Four Blog
  9. Building a Custom Right-Click (Context) Menu with JavaScript
  10. danielguillan/bem-constructor
    A way to keep your BEM naming conventions in check.
  11. Google Chrome Reverses Course- Will Implement Pointer Events
  12. Numeric Inputs – A Comparison of Browser Defaults
    A bit of an inconsistent mess.
  13. jonathantneal/sanitize.css · GitHub
    Interesting CSS reset. Doesn’t seem to touch margin/padding stuff, just weird browser buggy-type stuff.
  14. 14 Top Calendar and Date Picker jQuery Plugins
    The days of loading all of JqueryUI are over.
  15. Microsoft relegates Internet Explorer to a “legacy engine” to make way for new browser
  16. How to replace remote files with local files when debugging
    I’ve used this before and it works pretty well if you aren’t compiling anything like scss/js. There are some pitfalls with files getting overwritten but overall making css tweaking a lot easier.
  17. HTTP/2 for a Faster Web | Cascading Media
    More on HTTP/2
  18. The Noun Project for Mac
    Whoa! Pretty cool.
  19. Microsoft is learning from its mistakes for its Internet Explorer successor | The Verge
  20. People Are Already Downloading Project Spartan
  21. WordPress Migrations Made Easy
    I us WPMigrateDB Pro for WordPress to WordPress, but there are some good tools in here for other CMS’s to WordPress.
  22. Treat Web Performance Issues Like Software Bugs
  23. Introduction to WordPress Front End Security: Escaping the Things
  24. Introducing Flexbox Fridays by Lincoln Loop on CodePen
  25. Chromium Blog: New JavaScript techniques for rapid page loads
  26. Power Chrome
    Some shortcuts for Chrome users.
  27. Nginx Guide: Introduction
    I’m all in on nginx because it’s fast, but it takes a little more care to setup initially.
  28. Announcing Enterprise Site Discovery support on IE8, IE9, IE10 and new privacy enhancements
    More info on IE retirement (or lack thereof)
  29. Infographic: Sketch vs Photoshop
    Sketch seems to be getting more and more popular.
Tvenge Design