Neueste Tweets

New Blog/Website EpicApps.com

If you are interested in my articles and my projects please visit Epic Apps, my new site where I will blog about my projects, talk about tactics and share graphic assets for your own projects (like the social media login buttons or these royalty free photoshop buttons for your web or mobile app).

I will focus my attention on EpicApps.com to share my thoughts instead of spreading it out to multiple blogs. I will try to post updates frequently and give you more insights into how I work, what things I try and what tactics worked for me and which ones failed. If you have questions or things you would like to know about me, please send me an email at: chris@epicapps.com

Thank you! :)

Veröffentlicht unter Allgemein | Hinterlasse einen Kommentar

Node.js and Speedtest in 2012

I’m currently learning node.js, I’m planning a multiplayer version of the speedtest and this seems to be the way to go. Node.js might come in handy later on as well.

And here are my plans for the Speedtest in 2012:

  • Implement more typing achievements
  • develop the practice mode to improve your typing speed
  • (create a beginner tutorial to learn touch typing) <= not sure yet
  • create a multiplayer version of the typing test. I will probably steal a lot from Starcraft for this one, but we’ll see :)
Veröffentlicht unter Allgemein, Speedtest | Verschlagwortet mit , , | Hinterlasse einen Kommentar

Speedtest Page Optimization

In the last weeks I optimized the page load speed for the new typing test version and wanted to record my steps.

Using Google Page Speed Addon

I first installed the Google “Page Speed” Addon which analyzes the page and suggests optimizations. Without any optimizations I receive 86 points out of 100, pretty good :)

Using Yahoo’s “Best practices for speeding up your website” article

I’ll also use the Best Practices for Speeding Up Your Web Site article from Yahoo to optimize the Typing Test.

Step 1: Creating a sprite

Before creating the sprite its a good advice to replace your current images with the optimized versions the “Google Page Speed Addon” offers you.

The first thing I will do is create a sprite of all the graphic files (1 sprite contains all the images of the website), therefore reducing the http-hits to a minimum. I will use photoshop to create the sprite, but there are also a few tools out there, which can help you create the sprite (search for “Sprite generator”).

One thing you have to keep in mind while creating your sprite is, that you can’t group “repeatable”-images into the same file with “non-repeatable” images. If you are using “background-repeat” in your CSS you have to create an extra file for every “repeat-direction”, e.g.:

  • one image-sprite for all non repeatable images (like the “logo”, “icons” and “User Interface Elements”)
  • one for “repeat-x” images (these are probably the ones you will use as well for your backgrounds etc.)
  • one for “repeat-y” (sometimes you want to repeat a background vertically, for a specific box which has a fixed width but a dynamical height)

I used the non-repeatable and the repeat-x sprites for the speedtest. But I had a “repeat-x and repeat-y” image as well. Sadly those can’t be combined with the other sprites and have to be loaded separately (one http-hit for every “repeat-all” image).

Step 2: Caching

10-fast-fingers.com has around 58% new visitors and 42% repeating visitors. Caching can therefore reduce the server load significantly. I’m not really familiar about the best approaches to cache static files. I just added this code to my .htaccess and hoped for the best:


# CONFIGURE media caching

ExpiresActive on
ExpiresDefault "access plus 1 year"

seems to do the trick…

One thing you have to keep in mind, using this approach: If you change one of your static files, don’t forget to add a “random parameter” to enforce the client to load the updated file e.g.:
You change your style.css. Some clients won’t load the updated file (because the file hasn’t reached the expiration date). By adding a random parameter like “style.css?version=23423797″ the browser is forced to reload the style.css file.

Step 3: combining and minimizing files

To further reduce the number of http-hits, I need to combine as many static files as possible. I could create a big minimized JS-File which would contain all the Javascript-Code and a big minimized CSS-File which would contain all the CSS-Code, but it would be hard to maintain. Everytime I would change something, I would have to recreate these files (and when humans repeat things, errors occur).
Instead I will use a PHP Script which merges and minimizes all the necessary files, and then gzip’s it. If the file already exists (and no files have been changed) it will use the cached one, otherwise it will recreate the file (on the fly).

The whole process is described here: Make your pages load faster by combining and compressing javascript and css files

This method is especially useful if you have a lot of stylesheets and scripts and it even gives you the possibility to split your stylesheets into logical parts. But keep in mind that you probably won’t be able to merge all of your scripts and styles. Especially if you use komplex Jquery Plugins (those with there own file-structure) or IE-fallback-stylesheets it might be tricky to integrate those (but you can still load them the way you used to do it).

There is more to optimizing a website for performance than what I did here. Still, these steps make out at least 50% of the performance gain, if not more. If you have any additional (and easy to implement) suggestions, let me know in the comments :)

Veröffentlicht unter Speedtest | Verschlagwortet mit , | Hinterlasse einen Kommentar

1-Click-Login Buttons (Twitter, Facebook, Google) + PSD

I needed bigger 1-click-login Buttons for 10-fast-fingers.com but couldn’t find any I liked. So I created them myself:

Here is the PSD: (Social Media) Login Buttons PSD

Every Button has three states: normal, hover and active (click). You can create additional Buttons quite easily. If you want to resize the Buttons, keep in mind to use the “Direct Selection Tool” in Photoshop as it is explained here: Resizing rounded rectangles in Photoshop. Sadly this alone want do it, you will have to manually resize a few of the other layers. If you have any questions about that, just post a comment (others will probably have a similiar question).

You can use these buttons for whatever you like (private, commercial, you name it) no attribution is required (but of course encouraged, if you have some spare room for a link, want to follow me on Twitter or have a sweet sweet Dribbble Invite). Just do with them what you like, modify, implement, share!

Credit:

The Buttons are inspired by these: Social Sign in Buttons – Friday Freebie

The Google Icon is from here: Free Google Plus Icon Vector (maybe you can add a PSD-Version of the icons? Nevertheless, awesome work!!)

Want more?

If you want additional buttons (for example, OpenID, Yahoo, LinkedIn, etc.) just write me a comment.

Veröffentlicht unter Allgemein | Verschlagwortet mit , , , , , , | 11 Kommentare

New Typing Test: Azerbaijani

10-fast-fingers.com has just added a new typing test: Azerbaijan

Veröffentlicht unter Speedtest | Hinterlasse einen Kommentar

Scary, Sad and True

“who killed videogames?” (a ghost story)

Veröffentlicht unter random thoughts | Hinterlasse einen Kommentar

New Typing Test: Hindi

10-fast-fingers.com has just added a new typing test: Hindi :)

Veröffentlicht unter Speedtest | Hinterlasse einen Kommentar

Lean startup: MVP/Prototyping restrictions

Creating an early version of a webapp is highly important if you use the lean startup methodology (to get early feedback from your potential customers). For a developer/designer like me its really hard to create something that doesn’t look nice and/or has not all the features I intended to create.

Nevertheless it has to be done, thats why I inflict on myself these restrictions in the future:

  • no colors – black and white have to cut it
  • basic html – no CSS tinkering or at least a bare minimum only
  • only the front page + one additional page – reducing the amount of pages will reduce the time till the MVP can be launched

I know that this will be really hard and that I’ll probably make a few exceptions but I spend a lot of time tinkering around with small, unnecessary details (especially when it comes to CSS). These restrictions shall remind me that this doesn’t matter (at least not in the first few iterations) and hopefully I’ll stick with it..

Veröffentlicht unter Allgemein, Projekte | Verschlagwortet mit , , , , | Hinterlasse einen Kommentar

New vs old books

“It’s better to reread great books than waste his time on new but average ones”

I’m not talking about fiction here (at least not entirely) but about books on design, development, business, etc.
I have a few which are really, really amazing, like Getting Real, Rework and Building Social Web Applications.

Most books I read, even though they are highly recommend on amazon, are usually not worth my time and I can be glad if I get 1 useful idea out of it.
Totally opposite with these 3 books. I’m not sure how they are doing that but I would be happy to have a few more of these. How do I find those? By reading tons and tons of average ones first :(

Veröffentlicht unter Allgemein, Bücher | Hinterlasse einen Kommentar

Speedtest Redesign: Overview

If you want to read all Speedtest Redesign related articles, check out this list:

Here are a few screenshots from the previous speedtest which was live from around 2007-2011 and which got replaced by the new Typing Speed Test.


The functionality of the previous version was quiet simple:

  • you could type for one minute using the 100-200 most frequent used words of your language
  • at the end you got your result, if you wanted to save it you had to take a screenshot (which a lot of people did and even posting there screenshot on forums etc.)
  • you also got a badge with your WPM count (which wasn’t accurate because I didn’t use the correct WPM-calculation back then)
  • the ranking list was reseted at the start of the month
  • cheating was quiet easy
  • lots of other stuff which got improved by now

A Google Analytics screenshot which shows the growth and reach of the Speedtest:

Screenshots from the new Speedtest

Veröffentlicht unter Speedtest | 11 Kommentare