This is a presentation I gave at conferences in late 2012 and early 2013. In this screencast I give it one last time to you, o’ CSS-Tricks subscriber.

It talks about many aspects of what it’s like to be a designer and front end developer these days. What it takes to start designing and the tools in use there. Why working locally is important. How hiring might happen if you need to do that. Using version control and preprocessors. Caring about performance and making that a part of your workflow. Cross browser testing. All that, and more!
CSS-Tricks

Chris Coyier of CSS-tricks.com talks about best practices for modern web designers and developers. Below are my thoughts and comments on his presentation, but I encourage you to check it out in its entirety. Chris shares a lot of good stuff here.

Designing in Photoshop vs. the browser

00:01:30 into the video: Like Chris says, it’s a good idea to get out of Photoshop and into the browser as quickly as possible. The browser is simply better for certain things, like working with font-sizes and typographical rhythm, because it’s faster to mess around with those things in the web inspector than it is changing 30 little text boxes in Photoshop. It’s also much easier to get an understanding of how your typography flows when your text lines get longer or more narrow, because the browser is resizable, whereas Photoshop is just fixed width. On top of that text just renders different in the browser than it does in Photoshop, so what you’re seeing in Photoshop isn’t what you’re getting at the end of the day.

However, for general design work, like shapes colors etc. I, like Chris, find Photoshop much better and easier to work with than CSS. I find myself spending time on silly floating issues etc. when I design purely in the browser/CSS.

Wireframes

00:07:22 into the video: Chris talks about how he doesn’t use wireframes because that exploratory “Moving stuff around” phase is happening in Photoshop for him.

I can’t imagine working this way. I did wireframes before I knew what they were … Back then I was just doing very basic, very quick sketches on paper. This process of laying out everything you need – and establishing a clear hierarchy – before you start to take things like colors, fonts and aesthetic style (Flat vs. 3d, rounded corners vs. square, illustrated vs. clean) into consideration, makes the whole process so much easier for me.

I find, that in Photoshop, it’s very easy to get caught up in picking the exact right font, nudging things around 1 pixel at a time or some other nitty gritty detail.

There’s certainly a time for that, but it’s important to make sure everything you need is one the page first and that there’s a clear call to action for your users. Wireframing takes care of that.

I also find it much easier, when working with clients, to stay on track if we have a wireframe to look back at, when we’re going over the final designs from Photoshop.

Working with a team

00:32:15 into the video: For me, project management is tricky and can easily consume a massive amount of (Often unbillable) time. Emails especially, because they are prone to a lot of back and forth, that take you out of your productive flow every time you have to take 5 or ten minutes to compose a reply.

Productivity books, like The 4 Hour Work Week, teaches you to shut down your mail app and focus on your work, then check your mail at the beginning and the end of the day (or week) instead.

This does help, but I find that when working with a team, I can’t just ignore my email throughout the day.

When Chris talks about the Scrum-like approach they use at Codepen, that workflow makes a lot of sense to me. It’s something I’d like to try on my next project, because it looks like the right balance between focused, productive work time, and planning / catching up / making sure we’re on the right track.

Sublime Text

00:35:10 into the video: Just a quick note to web design/dev folks out there: Like Chris, I (and the majority of people I know) use Sublime Text as the editor of Choice. I’ve been through most editors out there: Coda, NetBeans, Espresso, TextMate and VIM in the OS X Terminal … If you haven’t tried Sublime Text, definitely give it a chance to win you over. A good starting point would be this series on NetTuts+

Preprocessors

00:40:56 into the video: They are a huge time saver. If you aren’t using them, start today – And it doesn’t matter if you’re part of a team or working alone.

I recommend SASS with Compass over LESS and CoffeScript over TypeScript.

… And if you just want to “try before you buy” (In this case buy means install stuff), Chris shows you how you can work with preprocessors directly on Codepen.io at 00:58:12 into the video.

Performance

01:03:05 into the video: On top of what Chris says about HTTP requests, compression and caching I’d recommend getting familiar with the developer tools in Chrome (Not just the CSS editor and inspector). When it comes to optimizing, they’re your most powerful tool. And that’s both in terms of server-side performance (Load time, caching, etc.) and client-side performance (CSS and JavaScript).

This free course on Code School will teach you all you need to know: http://www.codeschool.com/courses/discover-devtools

A note on concatenating JavaScript

I used to do like Chris and use Codekit to concatenate my JavaScript. If you’re just one designer/developer this is okay I guess, but once you start working with other people, this requires that they use CodeKit as well, and since CodeKit is mac-only, this excludes everybody on Windows.

Instead I like to use Require.js. It’s a little trickier to learn because it’s not just for concatenation, but rather a full blown script loader. Require.js is cross platform and really forces you into the best-practise way of doing things.

While Require.js is best known as a script loader (Which means it’s a tool that loads JavaScript files on the fly as they’re needed), but it also has a build function that let’s you concatenate your JavaScript and CSS with lots and lots of options on how it should go about that optimization.

To get started with Require.js, I recommend this course

Final Thoughts

Chris points out a lot of good tips and best practices throughout this video, and I highly recommend you take the time to watch it in its entirety.

A few months back, Chris put up a huge video series documenting his redesign of css-tricks.com. css-tricks.com is a WordPress-based website, so if you’re wanting to learn WordPress this will not only teach you a bunch of front-end stuff, but also how you make a complete WordPress site from scratch.

Check out the course here: http://css-tricks.com/lodge/v10/table-of-contents/

Brackets.io

Brackets is an open source editor that Adobe is working on. It’s still early in it’s development process, but it has some very cool and innovative features. See a overview of it in this video:

http://youtu.be/HZkrlX7jJcg

New, personal magazines

Flipboard 2.0 to the rescue (Maybe.. I’ll have to play around with this a little longer before I fully switch back) with personal magazines. The idea is, that users put together magazines, based on content from all the sources they read. Magazines can be public so I could subscribe to magazines from web developers, designers, chefs, psychologists, architects and have most of my interests covered.

The next time I open Flipboard I’ll have all new content, from not only my own news feed, but the news feeds of those I follow. Wrapped in a design almost as rich as that in real art directed magazines like Wired … Completely free of charge.

Man, I love The Internet!

The perfect mixin for SASS Media Queries

SASS has made working with Media Queries much easier on us, but it took me a while to come up with the optimal breakpoint mixin. I think I’ve finally got it, so allow me to explain how it works.

Basically it gives you 3 options for applying width-specific styles.

Option 1: Device oriented styles

This is the most popular use for media queries; changing the layout based on your users device. It’s really easy to do:

div {
	width: 95%;
	margin: 2em auto;

	@include breakpoint(tablet) {
		width: 80%;
	}
}

My mixin is built on the mobile first approach, which means your base styles are targeted at mobile devices and you add conditional styling as the screen size grows.

There are numerous reasons why mobile first is the best way to go. To learn more about it check out Jeremy Keith’s talk on Responsive Design.

Option 2: The Ninja method

Sometimes you need to do something at a very specific screen size. One example of this is how Github rotates the Public/Private badge when you reach a certain browser size to make sure it fits nicely on your screen. Very neat trick.

Github rotates the Public/Private badge on small screens

To achieve this using my mixin pass along min-width or max-width and the pixel/em value you want the styles applied at

div {
	background: blue;

	@include breakpoint(min-width, 1192px) {
		background: red;
	}
}

Option 3: Do stuff between breakpoints

Another common task is styling applied only between two breakpoints. For instance, you might want to enlarge some UI components for mobile and tablet devices only, making them easier to use with a finger. Here’s how you could do that.

.btn {
	font-size: 1em;
	background: #a9a9a9;
	border-radius: .15em;

	@include between-breakpoints(0, 1024px) {
		font-size: 1.3em;
	}
}

My SASS mixin code

It’s all really basic stuff, but I find myself relying more and more on this throughout my projects. If you want to go desktop first, just change all the min-width’s to max-width.

@mixin breakpoint($point, $value: 0) {
	@if $point == mobile {
		@media (min-width: 320px) { @content; }
	}

	@else if $point == mobile-horizontal {
		@media (min-width: 480px) { @content; }
	}

	@else if $point == tablet {
		@media (min-width: 768px) { @content; }
	}

	@else if $point == tablet-horizontal {
		@media (min-width: 1024px) { @content; }
	}
	
	@else if $point == desktop {
		@media (min-width: 1280px) { @content; }
	}

	@else if $point == desktop-wide {
		@media (min-width: 1500px) { @content; }
	}

	@else {
		@media ($point: $value) { @content; }
	}
}

@mixin between-breakpoints($min, $max) {
	@media (min-width: $min) and (max-width: $max) {
		@content;
	}
}

Battlefield 4 teaser

This is such a simple but powerful visual effect — Great idea and very well executed. I decided to capture a video of it, because it probably won’t be up after March 27th, but if you read this before that date, swing by http://www.battlefield.com/battlefield-4 and check it out.

“User Experience Designer”. I’ve had a bit of trouble wrapping my head around what it is a UX Designer actually does for some time now, and I keep coming back to the same conclusion; a User Experience Designer doesn’t do anything special. They’re just a designer.

Before I begin insulting those of you who bear this title, let’s think about design. You see, a great designer is perfectly comfortable in any medium. A great designer can design a spoon with as much ease as they can a website, or a poster. It’s the measure by which I test my own abilities, and I think it’s an accurate one. I see designers such as Dieter Rams, Bruno Munari, and Josef Müller-Brockmann as perfectly capable beyond their specialism. Their principles and practices go way beyond any one medium, and extend to all areas of design.
Daniel Eden

User Experience design is just … design

This morning Daniel Eden posted a great article on the term User Experience design. The web industry has a funny tendency to make up a gazillion titles for all possible roles someone could have in the creation of a website and Daniel hits the nail right on it’s head with this one.

Here’s my comment on his post

That’s spot on, Daniel!

Same goes for usability and information architects — It’s all designer jobs.

It’s great that some people wan to specialize in a certain area and call themselves UX or IA people. I could see myself doing that, but in the end we are still designers. And a designer cannot ignore either UX, IA or usability. As you say, it’s woven together as part of the same fabric.

Great post!

GitHub was intended to be an open software collaboration platform, but it’s become a platform for much, much more than code. It’s now being used by artists, builders, home owners, everyone in between, entire companies … and cities.
Wired.com

Mikael Rogers talks about the concept of Open Source, and how it’s changing radically with the introduction of Github. He compares the new standards with what happened to the publishing industry after The Internet became main stream.

Someone even published all of the laws in Germany on GitHub last year. (Perhaps not so surprisingly, he has about 17 open “pull” requests for changes.)

Open source is becoming accessible to regular people

Where open source used to mean operating systems and other overwhelming software projects, people are starting to think more and more of small jQuery plugins or Kickstarter projects like window farms.

The change is primarily happening at the sub conscious level. Open Source used to be for the top 0.5% in fields like software engineering or science. Today it’s much more accessible, because regular people are getting more connected and have much better tools for collaborating. GitHub being the most popular yet.

It seems obvious that crowd sourcing of funding goes hand in hand with the open source mindset. You come up with an idea that you need some help to realise financially. Then you invite those same people to collaborate with you, reshaping the idea into something even better than square one.

The best projects are run this way. People, from all over the world, with vastly different backgrounds and skill sets, passionate about solving the same problem, work together to make it happen.

I’m extremely excited to live in this era where ideas are truly democratized. It’s something no one before us has been able to do at this level.

The problem with image-based shadows

I cannot tell you how many times I’ve had to, manually, extract bits and pieces of shadows from a Photoshop file, save them as transparent .png’s and hook up :before and :after pseudo elements to create that rich depth and flavor they can add to a design. It’s such a boring, repetitive task where the result can’t even be reused because the shadows always change a tiny bit from project to project.

Say Hello to rich (pure CSS) shadows!

Inspired by, and based on, this post by Nicholas Gallagher I’ve created a bunch of SASS mixins that couldn’t make this annoying and painful process any easier. Let’s say you have a good old div: <div></div> All you need to do is:

div {
	@include shadow();
}

and you will get:

To create any of the 10 other shadow variations, like this curved one, simply add the shadow name as a parameter to the mixin.

div {
	@include shadow('curved-bottom');
}

will render:

If you don’t use SASS yet (Then start doing it), you can just add the provided CSS classes to your elements, which will give you the exact same thing:

	<div class="shadow curved"></div>

Download and examples

Examples (10 different shadow types):

http://ahrengot.github.com/sass-dropshadows/

Download the project at Github:

https://github.com/Ahrengot/sass-dropshadows

Feel free to send me a pull request with more shadow types added.

The talk is an attempt to deprogram our approach to Web design for the last 15 years by taking a look at the history of graphic design (type, grids, etc) and how it has shaped our thinking (positively & negatively). The presentation discusses new approaches to designing responsively and what we can learn from the past.
Smashing Conference

Following up on my other post, Jeremy Keith on Responsive Design, this is a talk from Smashing conference. Here Josh Brewer goes into detail about the scaling and reflowing content so it’s optimized for the reader, no matter his screen resolution.

Contrary to Jeremy Keith, Josh goes into the actual how of putting a design like that together. Finally he shares a sort of secret formula for creating responsive measures.

A free Basecamp-like project management tool for WordPress

WP Project Manager is a free Basecamp-inspired project management tool that lives inside your WordPress admin. It’s a very well put-together plugin that relies on the UI from Twitter Bootstrap which is instantly recognizable and highly usable.

Between Basecamp’s $20/month price tag and the fact that WP Project Manager lives inside your pre-existing admin interface, leaving you with one login and one consistent UI, it’s easily worth the effort of at least trying it out.

Screenshots

Project Dashboard

Activity log

Creating To-Do’s

Message threads

WP Project Manager features

Projects

• Create a new project
• Set title and details of that project
• Assign users for that project

Messages

• Messages are used for discussing about the project with co-workers of that project
• You can add attachments on messages
• Comments can be made for discussion

To-do List

• Add as many to-do list as you want with title and description
• Add tasks, assign users, assign due date
• See progressbar on the list
• Add comments on individual to-do lists and to-do’s
• Mark to-do as complete/incomplete

Milestone

• Create milestone
• Assign messages and to-do list on milestone
• 3 types of milestones are there, a) upcoming, b) completed and c) late mi
  lstone

Files

• See all the uploaded files on messages and comments in one place and navigate to invidual attached threads.

You can download WP Project Manager here: http://wordpress.org/extend/plugins/wedevs-project-manager/

And one of the things, and this is going to be kind of hard to accept, is learning to give up this idea, this illusions, of control … And it was an illusion. It’s not like we had control for the last 10 years and are now giving it up. We agreed that there was a set size. A set bandwidth. A set of capabilities in the browser, but it was never there … What we’re doing now, is accepting that we have no control.
Jeremy Keith

This video won’t teach you how to do media queries in CSS3 or how to feature detect using Modernizr.

This video is about the why of responsive design. How the web is inherently responsive, accessible and fast and how we as designers, and developers, break it by forcing it to fit in fixed width containers and taking on presumptions about the user and their device capabilities.

Jeremy suggest we design for mobile first and then add content and reflow the layout as more pixels become available. Rather than starting with a desktop-sized website and try to rework it for a 3.5″ phone.

There is a lot of talk about responsive design these years, but this video is one of the best ones I’ve seen on the topic thus far.

I find myself using template engines in JavaScript more and more these days, so I built this extremely light weight controller for adding, caching and retrieving JavaScript templates inside my applications.

/**
 * TEMPLATE CONTROLLER
 * Eases the use of templates by storing the cached HTML templates on a single object.
 */
 var TemplateController = function() {
	this.templates = {};

	this.addTemplate = function(id) {
		this.templates[id] = $('#template-' + id).html();
	};

	this.getTemplate = function(id) {
		return this.templates[id];
	};
 };

Example usage

	<script type="text/template" id="template-example">
		<div>Hello, <%= name %>!</div>
	</script>

	// Create new instance of TemplateController and add templates
	app.templates = new TemplateController();
	app.templates.addTemplate('example');

	// Example Backbone.js code
	var MyView = Backbone.View.extend({
		initialize: function() {
			this.template = _.template(app.templates.getTemplate('example'));
		},
		render: function() {
			this.$el.html(this.template({name: 'Jens'}));
			return this;
		}
	});

	var view = new MyView();
	$('body').append(view.render().el);

Result

	<div>Hello, Jens!</div>

Though this example is based on _.js and Backbone, it works just as well for other template engines like Handlebars or Mustache

– Click on the microphone icon. Chrome might say that your microphone isn’t working. Clicking try again usually fixes that.

Download this project on Github

You can download a stand-alone version of this demo on github and play with the code.

How does it work?

By setting one simple boolean value you can turn on speech recognition for any regular old input. It’s currently only supported in Google Chrome, but, as that’s the most widely used browser on the planet, you will be targeting a large percentage of your users.

Code

<input type="search" x-webkit-speech placeholder="Say something">

the ‘x-webkit-speech‘ part is where the magic happens.

Feature detecting speech recognition

If you need to test whether your users have this feature, then go ahead and use the following snippet:

if (document.createElement("input").webkitSpeech === undefined) {
	// x-webkit-speech isn't supported
}

Netflix, a leading online subscription service for watching movies and TV programs, grew their streaming video business to millions of users globally. By using AWS, Netflix can quickly deploy thousands of servers and terabytes of storage within minutes.

AWS – Amazon Web Services

The webpage you’re looking at lives in Ireland. It is hosted on an Amazon cloud server which I mange through my terminal in OS X. I have no graphical user interface, no buttons — nothing but text commands. For instance, here’s how I move a file:
$ sudo mv my-file.txt folder/my-file.txt

As tedious this might seem, it actually gives me control over every aspect of the server. That leads to many more options than you get with a normal web server from, say, GoDaddy or Dreamhost. I can install things like Nginx and APC to speed up the websites running on the server or Git to handle deployment and synchronizing my local development version with the live site running accessible to the public and client. I can also, easily, fire up more instances to handle an increase in traffic. This is all based on a beautiful pay-for-what-you-use model.

I used to hate working with servers

Not too long ago I was the guy that couldn’t care less about the servers. I felt that, if I was handling the visual aspects, the user experience and making sure people clicked the right buttons, I was doing my job just fine. I had this conviction that the server wasn’t my domain and that I should just stay clear of it. However, as focus on load speed and performance grew (Thanks, mobile devices), over the last couple of years, I had to start digging in.

Media Temple are great, but…

I started with Media Temple, and while their customer service and user interface was great, their VPS servers were too expensive for most of the mid to low-traffic (Less than 150,000 visits per month) websites I was working on. After trying various similar services I finally signed up with Amazon Web Services and booted up my first micro instance.

Why I love working with Amazon

I’m not a fan of Linux, but because Amazon’s Web Services are so widely used, it’s very easy to find help with pretty much any aspect of server maintenance. Every time I’ve run into trouble since switching to EC2, help has been, literally, a two-minute google search away. A couple of quick examples of what I’ve needed:

Easy stuff

• Here’s how you set up WordPress in 5 minutes.
• Here’s how you set up a FTP server.
• Here’s how you set up subdomains.
• Here’s how you make sure the server doesn’t run out of memory.
• Here’s how you import your database to your new EC2 instance

A bit harder

• Here’s how you set up a bitchin’ server with Nginx and varnish
• Here’s how you set up Git-based deployment on your EC2 instace

The verdict

I’m very pleased with my new AWS setup. The pricing is extremely fair and I’ve got incredible flexibility. Just today I had to test a client site for beta testers when I began to run low on memory. creating an image of my old instance and booting up a new one with 3,500 MB ram instead of 600 MB took me less than 20 minutes. And the process was almost fully automatic.

CSS attr() function

The attr() function is a cool little thing to have in your toolbox. It allows you to retrive any html attribute via CSS and use it as the content property on :before/:after elements. Here’s the code to reproduce the example above

<a href="#" data-hover="Go on, do it!">Click me!</a>

a { font: bold 18px/1.2 sans-serif; }

/* Hide original text */
a:hover { font-size: 0; }

/* Replace original text with value in data-hover */
a:hover:before {
	font-size: 18px;
	content: attr(data-hover);
}

Browser support

Chrome, Safari, Firefox and IE8+

Use cases

Obviously this can be used for switching text like the coordinates in “Location” on my contact page, but you could also use it to add meta-information to links. For instance Chris Coyier shows you how to do CSS-only tool tips using this method.

For an interactive version of the example above, go here: http://dabblet.com/gist/4286801

I LOVE Sublime Text 2. It’s by far the best editor I’ve ever used, so when I learned that I could use it for my daily to do lists, I was very happy. Watching Perfect Workflow in Sublime Text 2 I learned about PlainTasks.

How it works

PlainTasks adds a new file type called todo, so you could have things.todo for instance. todo files use a custom color theme, turning Sublime Text 2 into a to do app just like Things, Wunderlist etc.

Create a new todo-list

Via the command palette (⌘+shift+p), search for Tasks: New Document or simply save a new file with the .todo extension.

Create a new headline

Turn any line into a heading by ending it with a colon.
For instance My headline:

Create new tasks

Create news tasks with ⌘+enter or ⌘+i. Mark any task done with ⌘+d.

For a full list of keyboard shortcuts, or if you don’t have package control, head over to the Github Repo for PlainTasks