Blog of Andreas Norman

Compress and cache your CSS with PHP

admin — Tue, 14 May 2013 15:46:42 +0000

I’ve tried some different plugins for WordPress that supposibly should compress all my CSS and JavaScript, but I never got them to work at all. So I decided to make my own PHP script for css compression. I called it PHP CSS Compressor and it’s available on GitHub. It’s not very advanced, but does what it should. Feel free to fork it.

It works by removing all spaces and line breaks and moves everything into one row. It loops through each file in order, so be sure to add them in the correct order if you have some rules that override other rules.

Every time the PHP file is called, it looks for the cached file and compares the date between that and the newest css file in your list. If the cached file is newer, it simply delivers the cached file, but if you recently changed some rules, it will re-compress all files into the cached target file and deliver it.

Once configured, you’ll never have to worry about it!

It’s fairly easy to configure. All you need to do is to feed it with the paths to your different CSS files and then remove all references to CSS files in your header.php and point instead to the php-file. The PHP-file will deliver a compressed cached file with all your CSS.

1	<link href="/css/csscompressor.php" rel="stylesheet">

Also, if you have compression available on your Apache web server you can add the following to your .htaccess to enable compression of all text files like CSS, HTML and JavaScript .

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

ExpiresActive On
############################################
## Add default Expires header
## http://developer.yahoo.com/performance/rules.html#expires

ExpiresDefault "access plus 1 year"

Download PHP CSS Compressor at GitHub

4 excellent JavaScripts for almost every website

admin — Tue, 09 Apr 2013 13:25:18 +0000

Lazy Load (jquery_lazyload)

Lazy Load delays loading of images in long web pages. Images outside of viewport wont be loaded before user scrolls to them. This is opposite of image preloading. I really like the idea of reducing load time on web pages. Especially if you think about the mobile visitors. This script is fairly easy to setup and use. I use this script on my blog, as you might have noticed.

Find jquery_lazyload on GitHub

Retina JS (retina.js)

JavaScript and LESS helpers for rendering high-resolution image variants. I use this as well, for my little a-in-a-box-image. You’ll notice the change when visiting from a newer iPad or iPhone.

Find retina.js on GitHub

Sharrre

Make your sharing widget! Sharrre is a jQuery plugin that allows you to create nice widgets sharing for Facebook, Twitter, Google Plus (with PHP script) and more. This is what I always wanted. An option to create my own, prettier share buttons, as the original ones all differ in size and color and they kind of ruin the overall web design because of it. But thanks to Sharrre I can do what I want!

Find Sharrre on GitHub

Respond.js

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more). This fixes responsive issues for older versions of Internet Explorer, like if your website has a wide-mode for wider screens.

Find Respond.js on GitHub

What are your favorite scripts?

Twitter isn’t what it used to be…

admin — Thu, 21 Mar 2013 19:14:57 +0000

I still use Twitter, and I still think it’s a great tool for sharing knowledge, ideas and communicating, but I don’t like how it has evolved, and I’m not talking about the API, Twitter clients or #hashtags. I’m talking about it not being for just us web geeks anymore.

Just as the term “geek” has been dumbed down to literally everyone who follows a TV-series for longer than two seasons, Twitter is now used by politicians, athletes, celebritets, tv hosts, all sorts of teenagers (oh my god these teenagers!) and almost everyone with a smart phone.

This has changed Twitter, or more what I read on Twitter. It has changed the contents of my feed. It used to be more about web development, design, social media (yuks) and web related tech news and information. Now, when I get my Twitter digest with what’s trending, it’s ALL about swedish politics, and it seems contagious. My fellow tweeps, that I started to follow because of their specific knowledge in a web-related area, are tweeting about politics. Even the comedians I follow tweet more about immigration politics than funny observations. Come on, I don’t watch your shows because of your insight into swedish politics, I watch your shows for the very same reason I started to follow you on Twitter. Because you say funny shit. Just like Bob Saget does.

Words matter. Especially if you’re kicking someone’s ass in words with friends.

— bob saget (@bobsaget) January 6, 2013

Don’t get me wrong, politics is important and people should discuss it. But it wasn’t what I signed up for when I registered my Twitter account over 4 years ago.

Twitter has become too accessible. Each and every event on this planet has its own hashtag. Everything from tv-shows to births and conference events discussing the ROI measurement of hashtags on Twitter.

I’ve started to unfollow people, people not tweeting about web or design related stuff. So if you are one of those I used to follow, and now I’m not, its nothing personal. I just don’t think your tweets and hashtags are worthy my timeline.

I also signed up for APP.NET, wich is a service like Twitter, but it costs money. A merely $5 a month. Only problem is, that its too quiet, but maybe that’s a good thing? When I started Twitter almost 5 years ago, I also had like zero followers, so yeah. I believe in APP.NET. I just need to find an app that I like.

Oh, and don’t forget to follow me on Twitter

A look into the evolution of cell phone design

admin — Tue, 19 Mar 2013 12:43:44 +0000

An interesting look into the evolution of cell phone design by William S. Hammack.

WordPress: Add an extra image property to your page template

admin — Mon, 18 Mar 2013 11:14:46 +0000

This is a simple hack, or proof of concept on how to add extra image properties to your page template. It shouldn’t be used as-is but as a starting point.

What it does is that it creates a new meta box, just below the current box “Featured Image” and it mimics its behaviors and looks. You’ll get a another “Featured Image” property so to speak, and you can use it for whatever your want.

Simply copy the code below and add it to your functions.php. This code has been tested to work with WordPress 3.5.1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72

add_action( 'add_meta_boxes', 'custom_meta_boxes' );
add_action( 'save_post', 'ExtraImageProperty_save' );

function custom_meta_boxes() {
add_meta_box('ExtraImageProperty', 'Extra Image Property', 'ExtraImageProperty', 'page');
}

function ExtraImageProperty() {
global $post;
$extra_image_url = get_post_meta($post->ID, 'extra_image_url', true);
wp_nonce_field( plugin_basename( __FILE__ ), 'ExtraImageProperty_wpnonce_name' );
?>

?>
echo $extra_image_url?>" />
if (empty($extra_image_url)) echo 'style="display:none"' ?> id="image_display" src=" echo $extra_image_url?>" width="266" alt="" />

if (!empty($extra_image_url)) echo 'style="display:none"' ?> title="Set extra image" id="upload_image_button" href="#" />Set extra image

if (empty($extra_image_url)) echo 'style="display:none"' ?> title="Remove extra image" id="remove_image_button" href="#" />Remove extra image

}

function ExtraImageProperty_save( $post_id ) {
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return;
if ( !wp_verify_nonce( $_POST['ExtraImageProperty_wpnonce_name'], plugin_basename( __FILE__ ) ) )
return;
if ( 'page' == $_POST['post_type'] ) {
if ( !current_user_can( 'edit_page', $post_id ) )
return;
} else {
if ( !current_user_can( 'edit_post', $post_id ) )
return;
}
update_custom_meta($post_id, $_POST['extra_image_url'], 'extra_image_url');
}

function update_custom_meta($postID, $newvalue, $field_name) {
if (!get_post_meta($postID, $field_name)) {
add_post_meta($postID, $field_name, $newvalue);
} else {
update_post_meta($postID, $field_name, $newvalue);
}
}
?>

How to use this new property

You’ll need to get the the new property from the meta data. As the property holds the url to the image simply echo it in a image source attribute.

1 2	$extra_image_url = get_post_meta($post->ID, 'extra_image_url', true); echo '.$extra_image_url.'" />';

Create better gradients in Photoshop

admin — Tue, 04 Sep 2012 13:59:37 +0000

There are few things in photoshop that get me pissed off more that the banding problems gradients produce. It doesn’t matter if you use 72 or 300 Dpi, or if you use 8bit/Channel or 32 bit. It will eventually come to haunt you and will be based on the color combination you are using in your gradient and the opacity of the gradient itself. Let’s try and smooth things over.

As you can see from the image above, the left side is heavily banded while the right side is much smoother. Let’s produce the steps taken to produce first a banded gradient and then smooth it over.

Step 1 – Creating the gradient

Start off with a blue background and add a new layer where you create the white to transparent circular gradient. I set the gradient layer opacity to 80%.

Step 2 – Smart Filters

Smart Filters are awesome. They let you apply filters to a set of layers without damaging the layers themselves. Select the two layers and go to Filter and select Convert for Smart Filters. This will make one Smart Layer from your selected layer. Double-clicking that layer will open up a new document containing the layers you just converted.

Step 3 – Gaussian Blur

Select the Smart Layer and go to the Filter menu again and select Blur – Gaussian Blur.

Tweak the radius until its smooth enough without ruining the gradient. Too large radius and the gradient will almost disappear.

You’re done! You can tweak the radius up and down as you see fit, and since it’s a Smart Filter it has done nothing to your actual gradient and background!

PageLines – Professional framework for WordPress

admin — Wed, 27 Jun 2012 09:13:28 +0000

A Responsive, Drag & Drop Framework for Beautiful Websites. Built for WordPress with Bootstrap, CSS3 & HTML5

PageLines is commercial framework for WordPress. For $97 you get the complete professionell edition. If you are a developer you might prefer the developer edition for $197. For a web professional this is a very small price compared to what you get and what it can do for your client.

I haven’t tried it yet myself, but from what I can see from their demo and feature sections it looks pretty cool. I will most likely try it in the near future.

CSS Media Queries for Mobile Devices

admin — Fri, 15 Jun 2012 14:44:43 +0000

This can help you pin point a specific mobile device from within your CSS. Copy the code and paste it into you CSS file and get crackin’!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* The New iPad (iPad 3) ----------- */
@media only screen
and (min-device-width: 1536px)
and (max-device-width: 2048px)
and (-webkit-min-device-pixel-ratio: 2) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Twitter gets a new logo, kind of

admin — Thu, 07 Jun 2012 11:35:47 +0000

Twitter announced today that they have a new icon. It’s basically the same blue bird but somewhat different. The tassel on the head is gone and it’s pointing slightly upward, like taking off into the air.

Starting today you’ll begin to notice a simplified Twitter bird. From now on, this bird will be the universally recognizable symbol of Twitter. (Twitter is the bird, the bird is Twitter.) There’s no longer a need for text, bubbled typefaces, or a lowercase “t” to represent Twitter.

Most of you won’t take notice of this and you probably wouldn’t care either. Since it’s basically the same bloody bird. Just slightly tilted. Without the tassel.

For me as a designer it means that I have to re-design the custom tweet buttons and all other implementations of Twitter. So yay for that!

But never mind that now.

Instead, take a look on this video that Twitter produced explaining their slightly new logo

For more information about the new logo and how you can get it in different formats and resolutions you can go to Twitter Trademark and Content Display Policy and be enlightened!

IKEA the first designer to redesign the TV-remote?

admin — Fri, 01 Jun 2012 14:32:36 +0000

I’ve always been the one to hate TV remotes. They are always cluttered with buttons that makes no sense att all. And you always end up having way too many remotes on the coffe table.

As an example. My Motorola DigitalBox remote has five different ways of changing channel.

Using the numbered buttons
Instant Next and Previous channel buttons
Preview Next and Previous buttons that demands a press on the OK button if I wish to switch channel
A small guide menu where I can scroll through the channels in a list
A full screen guide menu where I can scroll through the channels

I hate this. It’s idiotic and a slap in the face from the product designer on the consumer. Because of this remote I loath Motorola and their product designers. Sorry, but you suck.

I’ve always thought that Apple would be the first company to take the TV to the next level with a minimal remote. Maybe just like the one we have for the Apple TV today together with some simple menus and integrated WiFi etc. But I was wrong.

The first company to change the way we use a TV and what we expect from a TV (and its accessories) is IKEA with their new product UPPLEVA. Check out their promo video from Milan.