Posts Tagged: web

8 guidelines and 1 rule for responsive images

It’s a year old, but Jason Grigsby’s post on recommended guidelines still (remarkably) holds up very well with regard to best practices and responsive imagery. The most important takeaway:

The one thing we can be certain about is that we’re going to need to replace what we implement now when standards catch up with responsive images.

So whatever you build, make sure it is flexible and can be changed easily when the ultimate solution for responsive images becomes apparent.

A look behind the curtain: how Netflix redesigned and rebuilt its television experience

A lot of design and development insights in this Gigaom post by Janko Roettgers. Fascinating to see the Netflix team debate image weight so heavily:

However, the team ran into a significant issue when it began to build out the final UI for consumers in the third quarter of 2013, just months before it was scheduled to launch. It discovered that lower-end Blu-ray players and streaming boxes couldn’t handle WebP decoding on the fly, or at least not as smoothly as Netflix would like them to. That’s why the team decided to still serve JPEGs to cheap consumer electronics devices by default, but send WebP images to game consoles and other more powerful machines…

…The goal was to find that sweet spot where images look great but still load quickly, and transitions are smooth — something Netflix internally calls a “recipe” for image encoding. It was a time of constant fine-tuning, a time when even something as minuscule as a 150ms delay during an image transition warranted further tweaks. “You will feel that,” insisted McCarthy.

Chasing down page weight and experimenting with multiple platforms? There’s a lot in common here with web development workflows.

Angular, Ember, and Backbone: which JavaScript framework is right for you?

It feels like it’s rare to wait more than a few weeks before another JavaScript-powered open source MVC framework comes along. That’s exactly why Lauren Orsini’s article on ReadWrite is so helpful. She goes over the strengths and weakness of the three most popular frameworks. For me, especially coming into a Ember.js completely fresh, it’s an excellent starting point.

Shoptalk – with John Resig

jQuery creator and Khan Academy dean John Resig was a recent guest on the Shop Talk web design/development show. It’s a solid, smart listen. Pay special attention around the 46 minute mark, where John and usual hosts Chris and Dave discuss the lack of women in the web development community.

Fullscreen overlay effects

I’m finding fullscreen overlays increasingly common as websites tackle a universal look that’s applicable to a wide range of browser viewports. But there’s a lot more than a simple opacity fade to give the overlay effect uniqueness. Mary Lou’s examples over at Codrops flesh out a few examples.

sole/tween.js

Very simple, smart Javascript based tweening engine. Looks useful for extremely details animations where traditional CSS3 won’t cut it.

When to use target=”_blank”

CSS Tricks’ Chris Coyier writes the definitive guide on when it is ok to add the “target=_blank” attribute to links. It’s a controversial subject with a wide range of opinion, but I agree almost entirely with his stance: when in doubt, *don’t use target*. Especially don’t use it as a sneaky way to keep users from leaving your page.

On interviewing front-end engineers

Front end developer and author Nicholas Zakas:

The things I look for in a front-end engineer have little to do with traditional computer science concepts. I’ve written before about what makes a good front-end engineer and how to interview front-end engineers, and generally I still agree with everything I wrote in those articles. I want enthusiasm and passion for the web, and understanding of HTML, CSS, and JavaScript, and more importantly, how to use them together to create a solution to a problem.

Imager.js

Responsive image solutions are still clearly a work in progress. The BBC News throws out their suggestion. Not fully crazy about their syntax given how different it is from srcset and src-n but I’m curious to see how it works in action.

Grunt-uncss

We’ve all been there: you’ve been adding to your CSS but iterations later there’s plenty of unused selectors junking up your files. You need grunt-uncss, a Grunt task to strip unused CSS from your projects. It’s arguably best for smaller projects, because if you’re not careful with keeping your Gruntfile with proper source html files you could have a mess on your hands.