Web Design Weekly #103

Headlines

WDW Store is “Open”!

So it’s been a long time coming but I have just opened up the WDW Store. Just t-shirts and stickers at the moment but if you enjoy this newsletter, why not take the next step and get your hands on some of the goodies to help support it! (web-design-weekly.com)

CSSconf.eu – September 13th 2013, Berlin, Germany

At CSSconf.eu, 200 of the best frontend developers and designers will gather in Berlin for a one day conference that will showcase the future of CSS development. Check out the line-up and unlock your discount with the code “WDW<3CSS” at cssconf.eu. (cssconf.eu)

Tridiv — CSS 3D Editor (tridiv.com)

Articles

WebKit Has Implemented srcset, And It’s A Good Thing

The implementation of srcset doesn’t address all the responsive images use cases, but it does represent a major step towards a long overdue solution. Mat Marquis gives us a run down on what we need to know as developers. (smashingmagazine.com)

Comparing and contrasting ins, del, and s

Since the days of HTML 2 we’ve been able to semantically indicate added or removed information using the elements <ins> and <del>. These elements seem simple on the surface but they have hidden depths. Oli Studholme dives in and exlpores. (html5doctor.com)

How to Work with Designers

For all the engineers and PMs out there wondering how to crack the strange, retina-sharp, helvetica-typed world of design: this is for you. (medium.com)

Spacing The Top of Modules

Chris Coyier blogged about spacing the bottom of modules a few weeks ago. This week Josh Nederveld blogged about why he prefers spacing the top. What is your method of madness? (clarknikdelpowell.com)

Detecting Critical CSS For Above-the-Fold Content

In this video, Addy Osmani and Paul Kinlan demo a new experimental bookmarklet for detecting critical CSS for above the fold content. (addyosmani.com)

The perfect technical interview from a former Amazon VP (firstround.com)

A detailed look at re-architecting Twitter (blog.twitter.com)

New UI Pattern: Website Loading Bars (usabilitypost.com)

Layout Boundaries (wilsonpage.tumblr.com)

Tools / Resources

Bootstrap 3 released

The team behind Bootstrap have been working extremely hard and managed to release version 3 on their two year anniversary. The big change with this version is that it is now Mobile-First! (getbootstrap.com)

SVG Fallbacks

Chris digs into Alexey Ten’s popular SVG fallback technique and finds some pretty interesting stuff including some unexpected behavior that is a bit of a pain in the backside. (css-tricks.com)

Git: The tree of possibilities for the curious designer (medium.com)

Setup a headless Chrome via WebDriver & Vagran (chrisle.me)

New WordPress podcast – Applyfilters (applyfilters.fm)

Slim progress bars in JavaScript (ricostacruz.com)

Random User Generator (randomuser.me)

Inspiration

Stop reinventing the scrollbar

We don’t need page numbers on the web, you can scroll your way through a piece of text at the flick of a finger. But how do you know how far through an article you are? (bbrks.me)

Type Hunting — Great collection of vintage type (typehunting.com)

A Brand New SitePoint (sitepoint.com)

Just MyType (justmytype.co)

Last But Not Least…

Offscreen Magazine — Issue 6!

The sixth issue has just gone on sale. Do yourself a favour, head over and click “buy”. This issue is once again packed with awesomeness. It includes articles on Daniel Burka, Jeff Veen, Joshua Topolsky, Matt Wigham, Jenna Brinning, Jon Lax and many more. (offscreenmag.com)

Internet.org — bringing the internet to those who don’t have it (internet.org)

Q1 and Q2 browser stats (quirksmode.org)

1 Comment

  1. Hi!

    I created a new CSS grid (called “PocketGrid“) that I think is quite innovative and interesting:
    – < 1kb
    – Innovative: use “blocks” and “block groups” instead of “rows” and “columns” for more flexibility
    – Unlimited number of breakpoints
    – Unlimited columns (percentage based)
    – Semantic: columns are defined in CSS and can be changed with media queries
    – Automatic rows (you don’t have to put a row for each row)
    – Can swap columns, put offsets, gutters…
    – Most browsers supported (even IE6!)

    Website: http://arnaudleray.github.io/pocketgrid/
    Github project: https://github.com/arnaudleray/pocketgrid

    Hope this can help someone!

This post currently has one response. What do you think?

You can use basic HTML when posting code, please turn all < characters into &lt; or > into &gt;
If the code is multi-line, use <pre><code></code></pre>

Leave a Reply

Your email address will not be published. Required fields are marked *