Load CSS asynchronously with loadCSS

The problem with CSS is that we can’t load it asynchronous natively. In contrast to the script tag there is no async attribute for the link tag.

<link rel="stylesheet" href="dist/css/style.min.css"/>
<script src="dist/js/picturefill.min.js" async></script>

You might think why on earth do I want to load CSS asynchronously, this would complete mess up the rendering of the site. You are right. But what if you want to load your webfonts CSS so you don’t block rendering only because of some custom fonts like I described in my latest article. Or what if you load the critical CSS which is needed to display the above the fold content synchronously and then load the rest of the pages CSS async so it doesn’t block rendering and your site is usable faster. There is no native way to doing that. You coudl put the CSS at the end of your page but this would still not make it load async, it just would get loaded later in the process.

Read Article …

CSSconf EU 2014 Mood Film

In September 2014, over 300 people from around the world gathered in Berlin for CSSconf EU. CSSconf EU gave the CSS community a home for one weekend, brought curious and open-minded people together, and helped to spark inspiration, advance knowledge, and create new connections.

Very nice film about CSSconf EU 2014. They just announced, that CSSconf EU will be back in 2015 on Saturday, September 26. I really hope to be part of it next year!

Researching the Performance costs of JavaScript MVC Frameworks

Filament Group:

But cell network latency (and Florida jokes) aside, mobile devices tend to be very slow at parsing and executing JavaScript as well. Google even suggests our sites should render within one second: can popular MVC frameworks deliver?

Interesting research by the Filament Group. Looks like if you want your initial page load to be fast you either don’t use a JavaScript MVC or at least pick Backbone. For more details make sure to read the whole post.

Web designers: consider using a bad monitor

Andy Lobban:

More than that though, I very quickly learned it was a great way to test designs. This monitor is small, low resolution by today’s standards, has never been colour corrected, isn’t nearly as bright as it once was, and has a couple of dead pixels. It’s crap. But if I can put designs (created on my lovely iMac screen) onto that crap screen and they still work, then maybe they have a good chance of working for a lot of the users, too.

He certainly has a point.

Why FOUT isn’t so bad after all

FOUT is an abbreviation of Flash Of Unstyled Text. All over the web you will read how bad it is and how to prevent it from happening. But today I will tell you that I’m happily living it and also explain why.

Here is a gif showcasing FOUT:

Read Article …

SEO in 2015 (and Why You Should Care)

Dave Collins:

Rest assured that real SEO has nothing to do with keyword stuffing, keyword density, hacks, tricks or cunning techniques. If you hear any of these terms from your SEO advisor, run away from them as quickly as you can.

Learn how to do real SEO. A topic I’m not very familiar with and need to catch up on. If this applies to you too, go on and read the article for a good starting point.

A new article every Monday and Thursday

Hello,

I have an announcement to make.

I like writing this blog and sharing with you what I learn while I’m developing sites for clients. I’ve always thought that it’s a great way of giving back and contributing to the awesome developer community we have. While in the past I’m more or less randomly posted articles whenever I had time or just learned something new, I want to bring this into a more sorted order now and increase my effort to bring you awesome blog posts and help you become a better web developer.

From now on I will post a new article every Monday and Thursday.

In the days between I will continue to post links to great articles, videos, talks, etc that I come across while reading other blogs and browsing Twitter.
I hope you like this change and you can learn a thing or two from the articles I write. Thank you for reading!

Happy Coding,
Martin

Adding and removing classes from svg elements with jQuery

A few days ago I wanted to toggle a class on an svg element. Not sure anymore, but I think I wanted to show/hide it. jQuery was already loaded and used in the project so I added the class with $('#js_svg-element').addClass('my-class');

Nothing happened.

I inspected my code over and over again and couldn’t find anything that’s wrong, so I asked my dear friend Google and found out that you can’t add/remove classes to/from svg elements with jQuery. Bummer.

Luckily, there are two solutions:

Read Article …

Creating a type style guide

Susan Robertson:

It was my goal to dig in and inventory the styles, then work with the design and development team to create styles that could be used across the site. While figuring out which type styles would be best for accommodating change and growth on the site, I would put together some mixins that could easily be used for future designs.

Susan Robertson explains on The Typekit Blog all the steps she took to create a type style guide for the FiftyThree Website.

SublimeText Origami

Origami is a new way of thinking about panes in Sublime Text 2 and 3: you tell Sublime Text where you want a new pane, and it makes one for you. It works seamlessly alongside the built-in layout commands.

You need more flexibility for your Sublime Text pane management than the built in tool can give you? Than this plugin is for you.

How to load a part of a page via ajax

I’m currently working on a small portfolio project where we want to have cool page transitions when the users goes from the homepage to a project single page without the classic reload which you normally get if you click on a link.

I tried to use smoothState.js which loads the content of the target page via ajax, keeps your sites urls intact and you don’t have much to do except load the script and add a few lines of Javascript.

It works fine but it’s not flexible enough for what we want to do so I set out to write the whole thing myself. I’m not especially experienced with Ajax but there’s always something you don’t know even if you work on stuff you know a lot about, so I just gave it a try.

var projectContainer = $('#js_project-container');

$('.js_load-project').on('click', function(ev) {
    var href = $(this).attr('href');

    /**
     * Prevent default link behaviour
     */
    ev.preventDefault();

    /**
     * Load the project, then initiate the slides
     */
    projectContainer.load(href, doTheSlides);
});

If the user clicks a link on the homepage I load the content of the target url with jQuery’s .load() method. I prevent the browser from following the link and atfer the load event has finished I call the doTheSlides function, which handles the animations.
After a few tests I was happy with the result besides that I loaded in the whole DOM including the complete <head> section.

After a few Google searches I found out that you can target a specific id on the target page you want to load and only grab the content of that specific element. Perfect.

The updated code:

var projectContainer = $('#js_project-container');

$('.js_load-project').on('click', function(ev) {
    var href = $(this).attr('href')+' #project';

    /**
     * Prevent default link behaviour
     */
    ev.preventDefault();

    /**
     * Load the project, then initiate the slides
     */
    projectContainer.load(href, doTheSlides);
});

This will only load the contents from <div id="project"></div> from the project single page and inject them into the <div id="js_project-container"></div> on the homepage.

Make sure to add a space between the url you want to load and the target id. Otherwise it won’t work.
And remember, the .load method only works with requests to the same domain, not cross-domain.

Of course this is only a small portion of the complete solution I need for the project I’m working on but I thought it’s worth sharing. I hope somebody can make use of it.