HTML/CSS Web Design

The easiest way to optimize .png files for improving page speed

If you have a lot of .png images on the website compressing them can save many bytes of data.
I will show how to do it really fast and easy.

1. We will use Pngcrush. It is an optimizer for PNG (Portable Network Graphics) files. It can be run from a commandline in an MSDOS window, or from a UNIX or LINUX commandline.

To install (Ubuntu/Debian) use command:

apt-get install pngcrush

If you need loselessly optimize one file use command:

pngcrush -rem alla -rem text -reduce -brute in.png out.png

File in.png will be optimized and the result saved in the file out.png

If you need optimize all .png files in the folder use command:

for file in *.png ; do pngcrush -reduce -brute -rem alla -rem gAMA -rem cHRM -rem iCCP -rem sRGB "$file" "${file%.png}-crushed.png" && mv "${file%.png}-crushed.png" "$file" ; done

Optimizing .png images will take no more than couple of minutes but result should be significant:
Before:
1

After:
2

jQuery

Vibr jQuery plugin

Small jQuery plugin for creating vibration effect. You can use it for animation of any html elements.
For using Vibr you need jQuery (>= 1.5.x) and the plugin loaded on your page:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.vibr.js"></script>

At the bottom of the page attach vibr() function to the target html element:

$('div.class').vibr();

Vibr accepts options like that:

$('div.class').vibr({
    h_spread: 5,
    v_spread: 2,
    speed: 50,
    delay: 3000
  });

h_spread Horisontal spread
integer (default: 3)

v_spread Vertical spread
integer (default: 1)

speed Speed of vibration
integer (default: 50)

delay Delay between vibrations
integer (default: 2000)

GitHub

HTML/CSS

CSS Selectors

For sure, everyone can select DOM elements using ID, CLASS and type of the element, but not many know about enormous potential of CSS selectors. In this post I’m going to show all major approaches to select DOM elements.
Please keep in mind that not all of them work in the old browsers.

* – select all elements

X –  select element by its type

#X – select element by its ID

.X – select all elements by its CLASS

.X .Y – select ALL children elements with the class .Y based on the parent element with the class .X

X  Y – select ALL children elements with the type Y based on the parent element  X

X > Y  - select  DIRECT CHILDREN elements with the type Y based on the parent element  X

X + Y – select  the ONE neighbor element Y following right after the element  X

X ~ Y – select  ALL  neighbor elements Y following  after the element  X

X[ATTR] – select all elements that have attribute ATTR

X[ATTR = “VALUE”] – select all elements that have attribute ATTR with value is equal to VALUE

X[ATTR ^= “VAL”] – select all elements that have attribute ATTR with value starts with letters VAL

X[ATTR $= “LUE”] – select all elements that have attribute ATTR with value ends with letters LUE

X[ATTR *= “ALU”] – select all elements that have attribute ATTR with value contains letters ALU

X[ATTR ~= “VALUE”] – select all elements that have attribute ATTR with values separated by space  and one of the value is equal to VALUE.

X[ATTR |= “VALUE”] – select all elements that have attribute ATTR with values separated by space  and one of the value is equal to VALUE. read more »

JavaScript

Very small and lightweight vanilla JS script for creating spoilers

Sometimes it is required to add spoiler into the content of the page.
It can be done easily with pure JavaScript and CSS3 transition property.
The whole code is only 17 lines, so it is very lightweight spoiler. You can use it without any additional libraries like jQuery and etc.

JavaScript code

window.addEventListener('DOMContentLoaded', function() {
            var spoiler = document.getElementsByClassName('spoiler'),
                spoilerContents = document.getElementsByClassName('spoiler-content'),
                spoilerTitles = document.getElementsByClassName('spoiler-title');

            for(var i = 0, len = spoiler.length; i< len; i++) {
                var spoilerContentStyle = spoilerContents[i].style;
                spoilerContentStyle.overflow = "hidden";
                spoilerContentStyle.height = "0px";
                spoilerContentStyle.transition = "height 0.2s linear 0s";
                spoilerTitles[i].style.cursor = "pointer";
                spoilerTitles[i].addEventListener('click', showHideSpoilerContent);
            }
        });
        function showHideSpoilerContent() {
            var spoilerContent = this.nextElementSibling;
            var innerHeight = spoilerContent.children[0].offsetHeight;
            spoilerContent.style.height = (spoilerContent.style.height == '0px')?innerHeight + 'px':'0px';
        }

Your HTML code where you are going to use spoiler

<div class="spoiler">
    <div class="spoiler-title">Hidden content</div>
    <div class="spoiler-content">
        <div>
            <!-- Put your hidden content here -->
            <p>Paragraph 1</p>
            <p>Paragraph 2</p>
            <p>Paragraph 3</p>
            <p>Paragraph 4</p>
            <p>Paragraph 5</p>
            <!-- End of hidden content here -->
        </div>
    </div>
</div>

Demo

jQuery

Simple One Page site with jQuery

Today I’m going to tell how to create a simple one page website.
Even though our solution requires jQuery it will work perfectly without JavaScript as well. Besides that for Search Engine Optimization we leave physical links, so search spiders can easily index the whole website.

Demo

read more »

jQuery

Visual differentiation between different types of links

Hi everyone, today I’m going to describe, how to visually separate different types of links on the website and how to add list of them at the bottom of the page when page is printed.
Recently I got the task form one of my clients to visually separate all links on his existing website that has more than 20 000 pages.

Demo

read more »