Clock Blog
The Very Best of Clock's Bookmarks
At Clock, we like to keep up to date with what's happening in the industry. One of our key three aims is to be "bleeding edge". Since I stared my placement at Clock back in July 2010, we've been sharing useful and interesting links via email and Delicious. This post contains what I believe are the very best of these links, with a small explanation of what it contains and why it's earnt it's place in this list.
Because of the number of links, they are split into sections as follows
- Creative
- Tech
- Just for Fun
Set aside some time, prepare yourself. This is one pretty good list!
Creative
The Future of Web Design 404 page
Best viewed in a webkit browser, this 404 page contains a rotating red earth, created using CSS3.
http://futureofwebdesign.com/404
Footnote: Clock is a partner at FOWD this year! Come by our stand, have a chat, leave us a Gawk!
Email Template Guidelines
Creating an email template? There are many ways your design could be flagged as spam. Here are some guidelines to avoid that, and some best practice advice too.
http://www.campaignmonitor.com/design-guidelines
CSS in Depth: Floats and Positions
Personally I still haven't got all the css rules in my head. Although I have made progress in understanding css, reference, overviews and explanations are always helpful. Check over this article where you will learn how to put your HTML in order!
http://spyrestudios.com/css-in-depth-floats-positions
Creative Lab @ Google - 106 Things
Google make some pretty amazing things, and they also find some pretty amazing things too. The Labs team at Google have put together a list of things they find interesting. If you don't open many of these links, you MUST look at this one. It contains videos, images, web applications, pages using new technology to make exciting and interesting things. Stop, now, go, link.
http://bit.ly/creativeinternet
HTML5 Canvas Cheat Sheet
If you've done work with HTML5 Canvas, you will appreciate this Canvas cheat sheet. If you haven't worked with Canvas (yet), you will find this a good tool to get you going, and give you a quick overview of some of the features you will be using. Simply put, there is no reason not to enjoy this link, unless you don't do any form of web development. For bonus points, the page even has a playable version of Super Mario as it's background! Save the princess!
http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html
Forward Thinking Form Validation
Going from design to CSS can be difficult, especially when you want forms to be dead simple, yet elegant and give helpful feedback. CSS3 pseudo-classes based on a fields state is possibly one of the lesser known CSS3 tricks. This article explains the problem these pseudo-classes solve, with an explanation and demo. AND, get ready for this, although they only work in new browsers, someone has got busy making some script goodness, allowing you to use them on older browsers such as IE6!
http://www.alistapart.com/articles/forward-thinking-form-validation
Project Harmony (Sketchy Canvas)
[caption id="" align="alignright" width="489" caption="Sketchy Canvas"]
[/caption]
Although there is no title on the page, I'm calling this one Sketchy Canvas. Once you give it a try, I think you'll see where I'm coming from. I'm sure many of you remember this as one of the early canvas demo's, showcasing some of the awesome effects you can apply on canvas. Realistically, I could spend ages explaining what it looks like, but here is something I created in about 2 minutes!
http://mrdoob.com/projects/harmony
BigImg.It
Got a big image that needs fitting in a small place and getting bored of those fancy lightbox things that take over your page? BigImg.it offers a javascript based solution, allowing for you to click on the image, and then scroll the image using your mouse and NOT scroll bars. It's a different idea and a real alternative to having a nasty shrunk now pixelated image which grows when clicked on. This one is sort of Tech, but because of how easy it is to implement I've classed it as creative.
Hakim El Hattab's Experiments
I have yet to find a part of this website which doesn't blow my mind. Hakim shows off (and rightly so) a few of his award winning HTML5 experiments. Some of it is simple stuff used in a creative way, while other bits are pretty damn complicated and look so pretty! Oh, and this is one of those sites which resizes dynamically based on your browser's window size. I keep clicking on links in the navigation bar JUST to see the pages fall away revealing the next page. *click... click... clickclickclick* Don't be surprised if you find yourself doing the same, following him on twitter, subscribing to his blog, and having a peak at his code! This site sure IS creative, but it also DOES give you a few tech things to look at too!
The Zen of HTML5: London Web meetup Presentation
Some of us may slightly forget about Opera sometimes, but let's be fair; Opera is helping and have contributed to the HTML5 (in the umbrella sense) spec. This link contains a video and resources from a presentation at the HTML5 London Web meetup about the Zen of HTML5. Actually being at this event and watching this presentation, I was shown some things about HTML5 that I hadn't yet been introduced to, for example the dynamic ways you could interact with the video element. Go watch / at least bookmark for later.
http://my.opera.com/ODIN/blog/2011/01/26/the-zen-of-html5-london-web-presentation
Minimalistic Designs of Consumer Products
I'm not a designer, I'm a programmer who occasionally dabbles with design tools when others neglect the "Keep out of reach of programmers" label you find on those Adobe boxes. This link contains 10 fairly well known consumer products in three stages of stripped down minimalistic design phases. Maybe I just like minimalism, maybe by making a simpler looking product, it looks like less of a complicated decision; but I know for most of those, I'd pick the one on the right (most minimalistic), EVEN if the content was the same. Makes you think.
http://www.fuelyourcreativity.com/minimalistic-designs-of-consumer-products
The Photoshop Etiquette Manifesto for Web Designers
On the subject of being a programmer and not a designer, "Us programmers keep to defined formats and layouts, how about you designer folk?" Turns out someone has put together a manifesto to that effect with regards to Photoshop files. If you work with a reasonable sized creative team, and need a good well thought out set of rules for creative files, this is your list. I'm not sure how often you need someone else to go back and edit, update or review a design or graphic creation, but if a member of the team is out on holiday for a week, and you urgently need to send the client a new updated version... Well, getting everyone to follow the same rules might save you a fair amount of time, and possibly your bacon too.
Ajax Load(er graphic)
One of those pesky programmer types pestering you, a designer, for a spinner / progress bar / spiral / loading pacman? Tell them to make it themselves... OR, you could make it the quick way, and take all the credit. Ajax Load makes that dream a reality. You can choose to copy the Apple or Facebook style, or choose from the 37 other loader animations, and then select your foreground and background colour. Click generate. You have a downloadable animated gif exactly as you wanted. The site has a footnote which reads, "Generated gifs are totally free for use". Fantastic. I've used this on the current project I'm tasked to, and expect I will be using it again. Now you have no excuse NOT to have a shiny spinner.
Holmes.css - The CSS Markup Detective
Your CSS may pass validity checking, but wouldn't it be nice to give it just that extra final check and polish? Holmes makes that easy by putting borders on any element it sees an issue with, and when you hover, it displays a message explaining itself. Errors, warnings and deprecated CSS beware! One of the nicest features is the ability to run it from a bookmarklet. Give it a go.
http://www.red-root.com/sandbox/holmes
Tech
Eloquent Javascript
Javascript reminds me of Java, a lot. My learning language was Java, but if you have the choice of something else, like Javascript, that you will probably end up using more, then here is a free ebook for you. Don't go thinking that because it's free, it's not as good quality as a bought book, because you can actually buy this book in physical form on Amazon, if you're that way inclined.
jQuery Templates Plugin
If you're build something big (or wrong), you can end up with a fair amount of Javascript and HTML muddled in together. Templates, a jQuery plugin aims to separate the HTML DOM from the JS logic, something I'm pretty sure sounds like a good idea. "A template contains markup with binding expressions. The template is applied to data objects or arrays, and rendered into the HTML DOM." Something we are looking into, but it's still in Beta, so possibly not ready for production.
http://api.jquery.com/category/plugins/templates
PHP Golf
Ever wondered what happens when you mix PHP and Golf? PHP Golf of course! There are a number of set challenges you are given, and the idea is to complete them with the least number of characters. Clock primarily provides PHP, and PHP Golf made us work harder and learn more PHP functions. We actually had an internal competition to try and beat the score of our CTO for three challenges: PHPGolf, Rot 13 and Triangular Numbers. If you check the high scores for those three challenges, you can still see some of ours pretty near the top! Try to beat them, I dare you.
PHP Simple HTML DOM Parser
You may have edited the DOM with Javascript and jQuery, but how about editing the DOM in PHP? Although this probably isn't as common a task, if you find yourself needing to do so, there is a PHP class for that. With some good example code, it was easy to whip up a page scraper to dynamically grab content from a randomly selected page.
http://simplehtmldom.sourceforge.net
SyntaxHilighter
Unbeknown to many, Wordpess already includes syntax highlighting out of the box! No need for another plugin, unless you have a less common language to show off. Here is an example...
[php]
<?php
echo "Hello Syntax Highlighter";
?>
[/php]
If you're interested in how to go about putting this sort of feature in your own CMS, more details can be found at the link below.
http://alexgorbatchev.com/SyntaxHighlighter
Lesser Known Unix Commands
Depending on your level of tech, and even some levels of creative, you might spend some time (or your whole day) in a Unix terminal. Someone on Quora asked for some lesser known commands, just to see what they have been missing out on. Here were peoples answers...
http://www.quora.com/What-are-some-lesser-known-but-useful-Unix-commands
Generate Data
Entering manual data for testing is OK, but when you're creating a big systems, your testing needs to be a little more thorough. While white box testing is fantastic for systems you are fully in control of, if you need some randomly generated data to test with systems where you don't have full access, black box testing with randomly generated data sets can help. I haven't seen another web app which generates data with as many settings as this.
Live.js
There are a number of ".js" titled things coming out, especially with the rise of node.js. Live.js allows you to load in changes to a page without actually refreshing it. For example you can make changes to the css of a page, save, and watch it change dynamically right in front of your eyes. I haven't implemented this myself yet, but I sure plan to. The example on the site is pretty neat, opening the CSS editor in a new tab/window, edit, save, and see the other page update itself accordingly. I dug around a bit on the site, and there is a tool called backfire which enables you to save any CSS changes you make in Firebug back to your CSS files, although with CSS aggregation, not much help for us. If you do try either of these, let me know how you got on.
Git Cheat Sheet - Visual Version
Git is starting to become the new source control application of choice, which in turn leads to a rise in cheat sheets. This one is slightly different though, as it gives a bit more context to the commands, and only shows those relevant to what you want to achieve. Clicking on "Workspace" as you can see in the image to the left, it displays all the commands relating to the workspace, and where they interact with. I haven't touched Git much myself, but I can see this will allow you to quickly work out what that command is if it's just on the tip of your fingers.
http://ndpsoftware.com/git-cheatsheet.html
PHP Mess Detector
No matter how long you've been programming, you will never produce perfect code first time round. PHPMD gives you a helping hand with your PHP code, giving it the once over and checking for things that could cause problems or lead to less maintainable code. It can pick up possible bugs, suboptimal code, overcomplicated expressions and unused parameters, methods and properties. If you take your PHP work seriously, this is something to add to your build script, or at least run now and then to make sure your code isn't getting out of hand. If you're working with legacy code, it can flag up things that you simply can't deal with (within budget), but at least it makes you aware of potential problems.
Apigee
Working with a RESTful API? This may become your new best friend. Facebook have had an API console for a while now, and anyone who has worked with the Facbook API will tell you it has been damn handy. I heard about Apigee after some people tweeted about a twitter API console, which turns out was made by them. They also have a number of other API consoles including Forsquare, Github, Groupon, Linkedin, Paypal, and Soundcloud. The most exciting thing however is the ability to create your own custom API consoles. I wish I had found this when I started working with the TopTable API!
Just For Fun
This is the Web Right Now (Winter 2010)
Facebook, Google, Apple and a few other names you might know of too. The web has changed quite a bit over the last few years. This amusing infographic come comic gives an overview of some of the things that have change (and that haven't). The "Tumblr beasts" have actually been adopted by Tumblr as their version of the fail whale, which marks this posts importance.
http://theoatmeal.com/comics/state_web_winter
Working with the Chaos Monkey
The cloud has some buzz surrounding it, cloud this, cloud that. If you understand anything about cloud solutions, you understand there are instances or nodes, and you must build your system to allow any instance to fail without heavily effecting your system. Netflix, the streaming video rental website, moved to AWS a while back. One of the first systems they had built was "The Chaos Monkey" which would randomly pick and take an instance offline. They explain why this system is so important, and why anyone considering running a service on a could computing platform should have one.
http://www.codinghorror.com/blog/2011/04/working-with-the-chaos-monkey.html
Rawkets - An Experimental Multiplayer Space Shooter
While I spent a fair chunk of my placement year at Hijack Media, Clocks sister company in London. When an American intern joined the team, Rawkets soon became the non-smokers smoke break. In the first iteration of Rawkets, you would have to sign in via twitter, but now it's open to anyone. If you've ever played asteroids, the game mechanics are a lot like that, except rather than asteroids, its other people you are trying to take out. Rawkets has had a few upgrades in the last few weeks, so the UI has had a face life, you now see who killed you, keep a tally of your kills, and even chat in game now too. It's fun, fast pace, and while it seems quite simple, it can provide so much fun! The guy who made this, Rob Hawkes, is quite an authority on HTML5 canvas now. He speaks at events, has a book, and even works for Mozilla as a Technical Evangelist now. What are you waiting for? Go play some Rawkets.
Like what you've read?