Weekly Recap

This week the links are all on very different topics. Hope you like it.

  • A simple guide to responsive design.
    You are just getting started with responsive design and want an easy to understand introduction to some basic coding principles? Here you go, this is for you.

  • InstantClick
    This Javascript library preloads links you are about to click, more precisely when you hover over a link. There are even options for only preloading on mouse down so you don’t have to waste requests and still get a small performance boost. This is a pretty clever idea which will makes your site feel faster even if it isn’t.

  • Sublime Text Setup
    A simple starting guide to Sublime Text by Dave Rupert. Also lots of recommendations and tips in the comments.

  • Mediocre ideas, showing up, and persistence.
    Although this article by Chris Coyier is from last year, it’s good to revisit it once in a while. Now is this time.

  • Protecting Against Link Rot While Embracing the Future
    Making sure embedded content will always be accessible even if a service closes is a pretty good idea. Here is how you can do it with embedded CodePens. Even though we all hope we will never be without CodePen.

  • Parent selector: On has() and ^
    Hugo Giraudel explains the two possible syntax options for the upcoming CSS parent selector. I’m with him, by the way.

  • Multiple Simultaneous Ajax Requests (with one callback) in jQuery
    I’m still relatively new to Javascript, or jQuery, compared to HTML and CSS and am learning so much with every article I read on the topic. If you read this one, make also sure to read the comments, they provide an even simpler solution for the explained problem.

  • Harry Roberts on big CSS, working for Sky, and being a home bird
    Nice, short interview with Harry Roberts. Worth a read.

New dorothee-schumacher.com

The last project I was part of at superReal was the new dorothee-schumacher.com for which I helped build the responsive Frontend. The site is now online and you can have a look at it. I really like the end result and overall the whole project run very smooth.

Screenshot 2014-02-14 09.50.02 Screenshot 2014-02-14 09.50.10

Weekly Recap

Hey there, it’s time for some awesome web development links. This week is very heavy on CSS and performance. Enjoy!

Fluid Apple.com Homepage for iPhone 5

Apple made a subtle vertical responsive Design for the iPhone 5 homepage on apple.com. Nice.

Using jQuery Cycle in a Responsive Layout

markj:

Slideshows. Who doesn’t love a good slideshow? jQuery Cycle is a plugin that makes creating these popular site elements incredibly simple. However, you may have attempted to use Cycle in a responsive layout recently and discovered that the slideshow does not resize as your container changes size.

Today I finalized the new welcome page of QUOTE.fm for tomorrow. A problem I encountered was making the jQuery Cycle slideshow responsive. I found a nice tutorial that helped me with that. It was not the exact solution because I have div’s with images and text which cycle instead of just images but it was a big help.

Responsive-Retrofitting

Ben Callahan:

This repo is an experiment in responsive retrofitting. It’s a positive response to more negative (but still much needed) critiques of the mobile web like Brad Frost’s WTF Mobile Web.

This is fun. So what this little bookmarklet does is, it injects a meta tag in the head of website and applies a css file if one exists for the current page which makes the site responsive. At the moment there are only a few stylesheets but anybody can contribute to the project.

Some time ago I started making daringfireball.net responsive because I couldn’t and still can’t understand why John hasn’t done it yet. This isn’t necessary anymore, Ben did it.

Yeah, this project won’t make the web responsive and you always have to click the bookmarklet in order to make the site you are looking at behave bette, but it’s a nice way to practice your responsive development skills and after you did it you could tell the site owner about it and mybe he’ll implement the CSS.

Responsive Websites are the future and it’s good to raise attention for that.

Responsive Line Breaks by Dan Mall

Daniel Mall:

I often come across the problem of widows and orphans when using fully fluid grids, so here are 2 techniques I use to avoid them as much as possible.

Daniel Mall presents two techniques for responsive line breaks. I definitely run into problems with line breaks in my responsive design workflow, so I think I might use his first approach some day.
He points out that he uses the second technique but I don’t see the advantage there. The first one looks far simpler to me – with the same result.
What do you think?

Mobile second

Marcel on the QUOTE.fm Blog:

We’re happy and kind of proud to announce that starting now, most of QUOTE.fm is responsive and with that easy usable on your smartphone. We even found a way to let you recommend stories from your smartphone

The last few days I began to make QUOTE.fm responsive. I started with the main features like the Following Timeline and Discover which are fully responsive now. You are even able to send recommendations right from your smartphone. We think that’s really a great step forward.

Please keep in mind that not every page is responsive yet and that retina graphics for all icons are coming in the near future.
Hope you enjoy reading QUOTE.fm on your mobile device of choice as much as we do.

Fluid Type

Trent Walton:

That’s my approach to fluid type today, but this is completely malleable. It was a little different a week ago and will hopefully evolve with the web and all the devices we’re to accommodate in the future. Here are some of the key things I find myself waffling on, especially when it comes to wide views.

Trend Walton talks about Fluid Type – his current approach and the future. Very interesting.

Responsive mode in Firefox 15

At 1:57 Chris Heilmann shows the upcoming responsive mode for Firefox 15. It looks really good and will really help developing responsive layouts. At the moment it’s often really a pain in the a** debugging a responsive layout because the whole browser and therefore the developer tools get very small while resizing. I hope this feature will also make it’s way to Safari and Chrome.