CSS3 Animations

Do you remember the hell to do something like this just few years ago? :) - http://jsfiddle.net/ondrejd/22Lczf3d/

1 2 3

<div class="snackbar"> <p>New URL saved</p> </div>

1 2 3 4 5 6 7 8 9 10 11 12 13 14

div.snackbar { animation-duration: 0.5s; animation-name: snackbarSlideIn; background-color: #323232; border-radius: 2px 2px 2px 2px; bottom: 10px; color: #FFFFFF; height: 48px; min-width: 288px; max-width: 568px; padding: 0 24px 0 24px; position: fixed; right: 10px; }

GitBook

I don't know if you hear about GitBook - web solution for digital writing and publishing. I already heard about it but never got time to explore it and that was definitively a mistake.

See for yourself - here is some links to books you can find there:

• Node, Express and libsass: project from scratch workshop
• WordPress The Right Way
• Famous Mobile Apps
• Pro GIT (in four language mutations!)
• Build Web Application with Golang
• Building Web Apps with Go
• go-best-practices
• Rust for C++ Programmers

If you're interested in writing your own book there is also pretty application that helps you with it: GitBook Editor.

DOM Insertion Test

While I worked on some task that includes inserting of many HTML elements into the document I was wandering what the fastest method is. I tried (basically) three methods:

• simple one by one element inserting using document.createElement followed by element.appendChild
• using document.createDocumentFragment – all created elements are appended to the document fragment and than inserted into the HTML document at once
• using element.innerHTML – create all new elements as a string and than insert it into the document at once

The fastest method is the last and the slowest is the first method. But sometimes is better use safe DOM approach so in this cases is the best using of the second method.

Some advices

1. Make HTML you are inserting as simple as is possible - each attribute counts!
2. If you create many elements and want event handlers attached to them don`t do it for each one element but attach one event handler to the parent element and then inside the handler self determine what the target element is.
3. Insert large amount of new elements in portions not in once. The advantage is that user always see that something is happening, the disadvantage is that it is little slower than do it at once.

Below is jsFiddle with the testing document (http://jsfiddle.net/ondrejd/kLw52/):

Mozilla Brick - UI Components for Modern Web Apps

I just discovered Mozilla Brick - a bundle of reusable UI components for rapid development of cross-browser and mobile-friendly HTML5 applications. What is interesting is made using X-Tag which JavaScript library that provide the same as old and powerful XBL.
Hopefully I will get opportunity to try it on same real project soon.

Simple Carousel

I was working on one web when I needed simple carousel - I have simple requirements:

• based on jQuery (since I'm using it on that site)
• really, really small footprint
• allow multiple carousels on one page

I spent some time with searching but I found nothing what I like so I made mine. The code is really simple and works just fine - you can see for yourself on jsFiddle.

If you want you can download it:

• normal version (2.3 kB)
• minified version (1.2 kB)