Mozilla WebMaker Tools (Popcorn and XRay)

Posted by & filed under Software.

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.

CRUNCH LESS into CSS the easy way

Posted by & filed under Web Development.

Everyone loves LESS. After all, who isn’t tired of typing all the browser prefixes to make some kick-ass CSS3? But don’t you wish you could organize your LESS/CSS styles into some well-organized libraries, and then just serve a single file to the browser? Or render your page without relying on JavaScript or command-line geekery? Wouldn’t it be great if you could just edit LESS, and then save CSS?

CSS Sprites

Posted by & filed under Javascript, Programming, Uncategorized, Web Development.

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.


Posted by & filed under Programming, Web Development.

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.

Are some elements in your style sheet proportional to other elements? Operations let you add, subtract, divide and multiply property values and colors, giving you the power to create complex relationships between properties. Functions map one-to-one with JavaScript code, allowing you to manipulate values however you want.