April 2012
3 posts
3 tags
Make CSS fun again with SASS!
CSS is powerful, with few changes you can make your website look completely different. You can easily separate design from markup and create amazing designs. Although CSS is simple I used to have a hard time structuring my documents and I often ended up with lots of duplicated rules. That ended when I found SASS, which in my opinion is the biggest revolution of web development ever.
So, what is...
1 tag
Better Inputs with HTML5
Form elements are the backbone of all web applications. It’s through these that we’re able to collect input from our users. Up until recently we’ve had to live with a pretty limited set of form elements and it’s quite remarkable what we’ve been able to do with them.
We’ve essentialy been stuck with 4 types of elements:
Input
Textarea
Select
Button
Of...
1 tag
How to keep yourself and your customer happy
The phone rings and an excited voice is heard on the other side of the line. I’ve got this amazing idea! It’s a totally untapped market and I already have the investors lined up waiting to pay up. Can you build this service and I’ll pay you later or maybe you rather have some of the stocks?
$elling your time
There are three different types of projects that I often stumble...
March 2012
6 posts
3 tags
Make Click Areas Comfortably Large
Have you ever been browsing a web site on your smart phone or tablet and found that on some sites, the links are so tiny and so tightly packed, that it’s near impossible to click the right one?
I have definitely been there and it’s equally frustrating each time. As the use of smart phones and tablets increases, so does the importance of having big enough target areas to interact...
“It is far better to adapt the technology to the user than to force the user to...”
– Larry Marine
1 tag
What to do when all else fails?
So your brand new project is finally live. It’s looking great, your customer is happy and users are starting to pour in. Just when you’re about to start up the next project your customer calls you and says that something might be wrong, it’s no biggie but check when you can. You put it on your todo list and continue to work on the other project.
When your about to go home the...
1 tag
Make Clickable Things Look Clickable
This is really a no-brainer but nevertheless important, and actually something a lot of sites get wrong.
Imagine that you have an affiliate site for the travel industry. You write beautiful articles which vividly describes exotic places where people could spend their holidays. Sprinkled in the text you have affiliate links to traveling agencies, which in case you didn’t know, have pretty...
2 tags
Why Still Sooo Slow? An Introduction to Database...
So you’ve already implemented these frontend performance tricks, right? I hope it made a huge difference, but what to do if your site still feels sluggish and slow? How about buying a new expensive dedicated server and add hardware every year or so? That might be necessary but there is a lot you can do on the data layer and this article will give you an introduction to database...
2 tags
The Proper Way to Include CSS
You already know that the CSS should be separated from the HTML not to violate the separation of concerns. You probably also know that it should be inserted in the <head> part of the page. But what is the best way to include it? There is after all two ways of doing it.
Via <link>
Via @import
At first glance it might seem that it wouldn’t matter, but as it turns out it does....
February 2012
5 posts
2 tags
OpenSearch
Have you seen the little Google icon next to the search field in Safari and Firefox? With a few simple tricks you can have your own site listed as a dedicated search engine within these browsers. So let’s get to it.
Create a new file named opensearchdescription.xml and put in the root of your website.
<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription...
2 tags
Put scripts at the bottom
You’ve added your favorite JavaScript Libraries: jQuery, jQueryUI, a couple of plugins a few shims and on top of that your own js-files plus Google Analytic. When you load the page you’re surprised to see that it takes a while for something to render. In fact you realize that you’ve got the famous blank white screen.
What’s going on here you say to yourself. Duh, you’ve put all...
2 tags
Speed is of the essence!
Every asset on a webpage needs to be downloaded by the browser and that takes time. The browser is also limited to between two and six concurrent transfers, depending on which browser is used. That means that if your web page has 18 assets (images, stylesheets or javascript files), the browser starts with the first two assets and enqueues the rest. When asset number one is downloaded it opens a...
1 tag
Know Your Doctype
The doctype is the piece of code that should sit at the top of all other markup in an HTML-document. It doesn’t do a whole lot, but it does one important thing. It tells the browser which flavor of HTML you’ve choosen to use on your web page.
The doctype might look something like this…
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0...
“Good design is all about making other designers feel like idiots because that...”
– Frank Chimero
January 2012
5 posts
2 tags
.htaccess Tricks
This article will show you my most common .htaccess tricks. A .htaccess is a file that is placed in the root of your website and allows to override the Apache configuration.
No duplicated content
You should make your site respond to both yoursite.com and www.yoursite.com because some people still writes those wwws into the browser. This leaves one problem though. All the content is duplicated,...
2 tags
CSS in the Head
When optimizing a page you’re obviously thinking about where to add different assets on it. Stuff that is needed up front is placed at the top and stuff that is needed later can be placed further down. After all, we want the page to show something as fast as possible!
The percieved performance in this case is the most important factor. We therefore want the page to load progressively,...
“Learn the rules so you know how to break them properly.”
– Dalai Lama
1 tag
Never Allow Access to Destructive Actions Through...
You’ve worked hard for a long time but finally your web application is ready and you’re eager to roll it out. Your site has an administration area where you can handle all the data your site contains.
The user section of the administraion area contains links like this: <a href="http://yoursite.com/delete_user?id=123">Delete user</a>.
If an authenticated administrator...
3 tags
Separation of Concerns
Have you ever found yourself in a situation where you have a site where the HTML, the CSS and the JavaScript are all tangled together and it becomes a nightmare to make even the tiniest site-wide change?
What you’ve experienced is what is commonly referred to as Spaghetti code. To avoid falling into this trap you should follow one simple rule:
Always separate HTML, CSS and JavaScript...