Skip to main content

Posts

Showing posts with the label webdevelopment

Martha Graham's Google doodle is not a video, is an image (a CSS sprite)

Today's Google doodle is featuring Martha Graham, an American modern dancer. The new doodle looks like a movie, but in fact it is only a CSS sprite. The sprite is this one:  You may be wondering how is the animation/movie appearance achieved if it only uses this static image?  The technique involves CSS sprites. A sprite is a composition of several images grouped together in order to reduce the number of required HTTP request to the server. This way a website with 50 images requires only one request for the large image composition. The entire doodle involves only one sprite, which speeds up loading a lot (compared to loading each frame separately). Google has used this technique to leverage data transfer from the servers and consequently make the animation load faster than a traditional video clip.  So how is this sprite converted to an animation? Pretend you are looking through pierced piece of paper, so that you can only look through th...

Weekend project: Book's I've read

It's been months since I wanted to learn databases and create a dynamic website, but it's only this weekend that I acted. In two day I learned how to use MySQL with PHP in websites and created a small project that I call "Books I've read" that stores a list of books I read (obviously). I am an avid reader and I've been storing the list of books I read (and want to read) in a text document for about a year. Finally, my project moved this list to the cloud and allows me to add, edit and update entries. The app has user authentication, so no one except me can alter my book list. The design was made in a hurry, but is good enough for my needs. Instead of using normal CSS for styling I've used LESS CSS, a dynamic stylesheet language that extends CSS with dynamic behavior, nested rules, mixins and logical operators. LESS CSS has made styling faster, but unfortunately it relies on Javascript. Without Javascript activated the website breaks. And t...