Popcorn Maker makes it easy to enhance, remix and share web video. Use your web browser to combine video and audio with content from the rest of the web — from text, links and maps to pictures and live feeds.
The X-Ray Goggles make it easy to see and mess around with the building blocks that make up the web. Activate the Goggles to inspect the code behind any web page, from the New York Times to your own blog. Then remix elements with a single click, swapping in your own text, images and more.
It’s like editing a site’s markup with the developer tools, but it works better and is easier to use. I’m planning on trying this out for prototyping new changes.
Prefixr helps you crank out cross browser CSS quickly. Between this and Less.js Mixins, there’s no more forgetting what browser needs what element.
I found a few handy resources for generating CSS sprites. Using sprites and sliding CSS “windows” it is possible to consolidate images into one single image, and then only display the portion of the main image that contains the image to display.
Why would you do all of this? HTTP Requests. Each time your browser has to make a request to the server for a resource, there are multiple steps occurring. Each of these requests is guaranteed to take a minimum about of time to happen plus the time it takes to transfer the actual data payload (in this case a image).
So in our example scenario, let’s say we have 35 images on our page and one CSS file linked in for styling the site. When a user visits the website, their browser makes one request for the actual web page, one request for the CSS file, and 35 separate requests for each image. So by creating a single CSS sprite out of the 35 images, we are effectively reducing the number of requests by 34. This will help page load time quite a bit. Also, similar techniques can be applied to other web resources like js files, and CSS files.
It’s not so much that these tools are required to do CSS sprites, but they do make creating them much easier.
Compass uses SASS (Syntactically Awesome StyleSheets), so all the handy features that come with that are apart of Compass. This includes nested rules, variables, mixins, selector inheritance, and more.
It inclused CSS3 support, sprite support, and a whole bunch more. Cool!
LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.
Variables allow you to specify widely used values in a single place, and then re-use them throughout the style sheet, making global changes as easy as changing one line of code.
Mixins allow you to embed all the properties of a class into another class by simply including the class name as one of its properties. It’s just like variables, but for whole classes. Mixins can also behave like functions, and take arguments, as seen in the example bellow.
Rather than constructing long selector names to specify inheritance, in Less you can simply nest selectors inside other selectors. This makes inheritance clear and style sheets shorter.
Bootstrap is a toolkit from Twitter designed to kickstart development of webapps and sites.
It includes base CSS and HTML for typography, forms, buttons, tables, grids, navigation, and more.
www.stripemania.com/ <— Stripes!
www.cssmenubuilder.com/ <– excellent CSS menus
qbrushes.net/ <– photoshop brushes. Whut whut.
Been playing with jquery lately. Pretty hawt.