Posts Tagged: web development

Localtunnel

A common problem we have as web developers is sharing a web site or app we’re running off localhost to others. Yes, you can always have a quick deployment strategy, but Localtunnel provides something a bit slicker and easier. Just install the Ruby gem, run a command and you’ve got a subdomain on localtunnel.com to share to your coworkers and clients. Granted, it’s no substitute for a full deployment environment, especially in the context of formalized QA testing, but especially for quick shares and checkins with coworkers, it’s a nice idea.

My media query mixin

Web designer Stuart Robson has comparatively more hands on experience with SASS than I do, which makes this pretty in depth SASS mixin a really useful read. At the very least, I’m struck by the importance of writing your media queries in ems, not pixels, a trend that’s really taken hold in the web development community over the past few months.

Chardin.js

Chardin is a smartly thought out jQuery plugin that draws overlays on existing web elements, accompanied by optional instructions. It looks especially useful for interactive help within web apps.

Dropbox is a Git remote

I’ve seen hints at this over at other posts, but developer Rob Stinogle gives the best explanation I’ve seen of how to use Dropbox as an effective Git remote repository. It’s no GitHub, but for a private project where you’re the sole contributor, it’s pretty slick, not to mention free (assuming you have the Dropbox space) and secure.

Discover DevTools

If you’re a web developer you’re invariably spending a lot of time in browser development tools, be it Chrome’s DevTools, Safari’s web inspector or Firefox’s Firebug. I find that Chrome really leads the pack with its DevTools, and this awesome, free interactive online course by Code School and Google can take you from newbie to expert. I considered myself pretty solid with DevTools knowledge, but with a quick review through the lessons I learned a lot of little tricks as well.

Developing a responsive, retina-friendly site (part 2)

An excellent deep dive by developer/designer Paul Stamatiou regarding his approach to handle images that looks great on both normal and HDPI (a.k.a. ‘retina’) devices. Pay special attention to his work on how to effectively cut 1x and 2x sprites, he includes useful screenshots.

Using SVG

As usual, Chris Coyier over at CSS Tricks writes a fairly comprehensive post on the pros and cons of using SVGs. I’m generally a fan of the format – for my day job we tend to use a mixture of both 1x + 2x pngs and svgs to serve up retina-friendly images.

Modular CSS with media queries and Sass

Louis Lazaris offers a fairly novel approach for trying to write more modular, SMACSS like CSS code with media queries. Louis pushes for a lot of small, repetitive media queries that can be paired visually close to the original non-media declaration. I see what he’s after, though I still think in the end I favor the more traditional move to keep all the media queries shoved at the bottom. The article is still worth a read and may click with your workflow better than mine.

Improving UX through front-end performance

Engineer Lara Swanson writes an excellent article for A List Apart on how overall UX design can be greatly improved with some performance optimization. It’s true some of her suggestions should be obvious (e.g. sprites, cutting down on HTTP requests), but there’s still real insight here. It’s an especially important read for designers: I’ve seen way too many beautiful designs that have way too many requests and inefficiently load imagery.

The gradient chart

Designer Cennydd Bowles poses a really interesting and shrewd method to determine whether when drafting up a game plan for a web site, if it makes sense to go with a responsive or separate mobile and desktop design route. A key takeaway is both responsive web design and a separate mobile site approach can’t be labeled as the exclusive best choice for all web platforms. Instead you have to step back and ask what your site’s feature set is along with the focus of your different audiences and how they overlap.