Skip to main content

Differences in mobile and desktop performance

Yesterday, I wrote a post on how to build wicked fast RWD sites. In it, I documented about a dozen performance tests using various combinations of CSS, JS, and icon implementations.

There’s one thing I didn’t discuss in yesterday’s post that I want to explore in more detail: Performance variations between desktop and mobile devices.

Read More…


How to build wicked fast RWD sites

This site is pretty fast already, but over the weekend, I made some adjustments to further improve it’s performance.

This article was supposed to be about the changes I made and how they made my site even faster. Instead, they actually slowed my site down. Today, I want to share with you what I tried, how it impacted my performance, and how I ultimately set things up to keep this site high-performing.

Read More…


The Decent Web

Here’s something I can definitely get behind: The Decent Web

The decent web is for everyone…
The decent web is not limited to certain devices or browsers…
The decent web is the web


#rebeccapurple

If you’ve only ever worked as a maker of things for the web, you may not realize how amazingly wonderful and rare our profession is. For all of the snark, trolls, and “there is only one right way to do things and if you don’t agree with me you’re a moron” bullshit, the community of web professionals is the most kind, generous, and supportive group of people I’ve ever had the privilege of calling myself a part of.

On June 9, Eric Meyer’s daughter lost her year long battle with cancer. She was 6 years and 12 hours old.

For those of you unfamiliar with Eric, he’s a Godfather to the modern internet. He created what came to be known as Meyer’s CSS reset, a foundation for countless stylesheets. He’s a champion of web standards. He’s the co-founder of An Event Apart, one of the most influential conferences in our industry. And his articles and blog posts have provided a free education to web workers for years.

Eric had been writing about his daughter’s battle with cancer since the beginning, and as a tribute to her, many web professionals tweeted the hashtag #beccapurple or #663399, as purple was her favorite color.

About a week later, it was proposed that the #663399 color value be officially assigned to beccapurple by the Web Consortium. Eric’s only request was that it be named rebeccapurple. Within days, all major browser vendors had agreed, and the WC Colors group officially recognized it as well.

I’m deeply moved by our community, which rallied so strongly around Eric and his family, and worked so quickly to create this moving tribute to someone who’s spent his life making the web a better place.

Eric, my thoughts continue to be with your family.


GitHub, Travis CI, and Continuous Integration

As part of my move over to Gulp for web development, I added Travis CI and unit testing with Jasmine.

Jasmine (and unit testing in general) lets you set up a variety of tests to check that each method and component in a script does what it’s supposed to. Travis CI runs your Node.js build process, including those tests, each time you submit a push to GitHub and makes sure there are no errors.

This helps me catch errors I might otherwise not notice, but it really shines when working with open source projects. Whenever I get a pull request, it now includes a status from Travis CI telling me if the build passes or not. This makes it a lot easier for me to test and verify the work that others submit.

A screenshot of the Travis CI status message on a GitHub pull request

Read More…


The Fermi Paradox

Wait But Why takes an interesting look at the Fermi Paradox—why we haven’t found any signs of other life in the universe despite the high mathematical odds that it exists.

We have no answer to the Fermi Paradox—the best we can do is “possible explanations.” And if you ask ten different scientists what their hunch is about the correct one, you’ll get ten different answers. You know when you hear about humans of the past debating whether the Earth was round or if the sun revolved around the Earth or thinking that lightning happened because of Zeus, and they seem so primitive and in the dark? That’s about where we are with this topic.

The whole post is well worth a read.


Revisiting the data-options data attribute

Yesterday, I posted about a technique I use to set multiple JavaScript plugin options with a single data attribute.

Todd Motto identified a few issues with the implementation I recommended:

Todd recommended the use of JSON instead.

Markup

<a 
class="example" 
href="#" 
data-options='{
                "speed": 500,
                "easing": "easeInOutCubic",
                "offset": 0,
                "updateURL": false
              }'
>
    link
</a>

JavaScript

var getDataOptions = function ( options ) {
    return !options || !(typeof JSON === 'object' && typeof JSON.parse === 'function') ? {} : JSON.parse( options );
};

var item = document.querySelector('.example');
var options = getDataOptions( item ? item.getAttribute('data-options') : null );

console.log(options);
// Returns: Object{speed: 500, easing: "easeInOutCubic", offset: 0, updateURL: false}

This approach requires that the data-options attribute is valid JSON, which is not inherently a bad thing but does make it a bit easier to work with for developers not familiar with that format.

Regardless, I’m converted my plugins that use the data-options approach over to this implementation.