Author:

Sergey Chikuyonok is a Russian front-end web-developer and writer with a big passion on optimization: from images and JavaScript effects to working process and time-savings on coding.

Twitter: Follow Sergey Chikuyonok on Twitter

Introducing LiveStyle: Better, Stronger And Smarter CSS Live Reload

In the past, we featured some exciting tools and libraries: PrefixFree, Foundation, Sisyphus.js, GuideGuide, Gridpak, JS Bin and CSSComb. All of them have been developed and released by active members of the Web design community as open-source projects. Today, we present LiveStyle, a plugin for live bi-directional (editor ↔ browser) CSS editing of the new generation! — Ed.

Tools for live CSS editing aren't new these days. You may already be familiar with tools like LiveReload, CodeKit and Brackets. So, why would someone ever need to create yet another tool and even call it a "live CSS editor of the new generation"?

Introducing LiveStyle: Better, Stronger And Smarter CSS Live Reload

The tool I'd like to introduce to you today is Emmet LiveStyle. This plugin takes a completely different approach on updating CSS. Unlike other live editors, it doesn't simply replace a whole CSS file in a browser or an editor, but rather maps changes from one CSS file to the other.

Read more...

Optimize Images With HTML5 Canvas

Images have always been the heaviest component of websites. Even if high-speed Internet access gets cheaper and more widely available, websites will get heavier more quickly. If you really care about your visitors, then spend some time deciding between good-quality images that are bigger in size and poorer-quality images that download more quickly. And keep in mind that modern Web browsers have enough power to enhance images right on the user’s computer. In this article, I’ll demonstrate one possible solution.

Let’s refer to an image that I came across recently in my job. As you can see, this image is of stage curtains and has some (intentional) light noise:

Optimizing an image like this would be a real pain because it contains a lot of red (which causes more artifacts in JPEG) and noise (which creates awful artifacts in JPEG and is bad for PNG packing). The best optimization I could get for this image was 330 KB JPEG, which is quite much for a single image. So, I decided to do some experiments with image enhancement right in the user’s browser.

Read more...

Zen Coding: A Speedy Way To Write HTML/CSS Code

In this post we present a new speedy way of writing HTML code using CSS-like selector syntax — a handy set of tools for high-speed HTML and CSS coding. It was developed by our author Sergey Chikuyonok and released for Smashing Magazine and its readers.

How much time do you spend writing HTML code: all of those tags, attributes, quotes, braces, etc. You have it easier if your editor of choice has code-completion capabilities, but you still do a lot of typing.

Screenshot

We had the same problem in JavaScript world when we wanted to access a specific element on a Web page. We had to write a lot of code, which became really hard to support and reuse. And then JavaScript frameworks came along, which introduced CSS selector engines. Now, you can use simple CSS expressions to access DOM elements, which is pretty cool.

Read more...

PNG Optimization Guide: More Clever Techniques

This post is a second part of the article Clever PNG Optimization Techniques that we posted last week. As a web designer you might be already familiar with the PNG image format which offers a full-featured transparency. It’s a lossless, robust, very good replacement of the elder GIF image format. As a Photoshop (or any other image editor) user you might think that there is not that many options for PNG optimization, especially for truecolor PNG’s (PNG-24 in Photoshop), which doesn’t have any. Some of you may even think that this format is “unoptimizable”. Well, in this post we’ll try to debunk this myth.

Screenshot

This post describes some techniques that may help you optimize your PNG-images. These techniques are derived from laborious hours spent on studying how exactly the PNG encoder saves data. We'll talk about grayscale, how to use fewer colors for optimization and also about reducing detail to minmize the file size.

You may want to take a look at the following related articles:

Read more...

Clever PNG Optimization Techniques

As a web designer you might be already familiar with the PNG image format which offers a full-featured transparency. It's a lossless, robust, very good replacement of the elder GIF image format. As a Photoshop (or any other image editor) user you might think that there is not that many options for PNG optimization, especially for truecolor PNG's (PNG-24 in Photoshop), which doesn't have any. Some of you may even think that this format is "unoptimizable". Well, in this post we'll try to debunk this myth.

Screenshot

This post describes some techniques that may help you optimize your PNG-images. These techniques are derived from laborious hours spent on studying how exactly the PNG encoder saves data. We'll start with some essentials about the PNG format and will then move to advanced optimization techniques.

You may want to take a look at the following related articles:

Read more...

Clever JPEG Optimization Techniques

When people talk about image optimization, they consider only the limited parameters offered by popular image editors, like the "Quality" slider, the number of colors in the palette, dithering and so on. Also, a few utilities, such as OptiPNG and jpegtran, manage to squeeze extra bytes out of image files. All of these are pretty well-known tools that provide Web developers and designers with straightforward techniques of image optimization.

In this article, we'll show you a different approach to image optimization, based on how image data is stored in different formats. Let's start with the JPEG format and a simple technique called the eight-pixel grid.

Read more...
1

↑ Back to top