Задание ширины квадратных элементов без указания ширины и высоты («плиточка»)

Без указания высоты, ширины, но и без дергания после загрузки картинок и контента. И без таблиц. Эдакая «плиточка» элементов разных ширин и высот.

<style>
.main {
width: 500px;
}

.structure {
width: 25%;
float: left;
}

.wrapper {
position: relative;
padding: 100% 0 0;
}

.img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #ccc;
border: 1px solid #000;
}
</style>
<div class="main">
<div class="structure">
<div class="wrapper">
<div class="img"></div>
</div>
</div>
<div class="structure">
<div class="wrapper">
<div class="img"></div>
</div>
</div>
<div class="structure">
<div class="wrapper">
<div class="img"></div>
</div>
</div>
<div class="structure">
<div class="wrapper">
<div class="img"></div>
</div>
</div>
<div class="structure">
<div class="wrapper">
<div class="img"></div>
</div>
</div>
<div class="structure">
<div class="wrapper">
<div class="img"></div>
</div>
</div>
<div class="structure">
<div class="wrapper">
<div class="img"></div>
</div>
</div>
</div>

<style>

.main {

width: 500px;

}

.structure {

width: 25%;

float: left;

}

.wrapper {

position: relative;

padding: 100% 0 0;

}

.img {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background-color: #ccc;

border: 1px solid #000;

}

</style>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

.structure отвечают за взаимное расположение элементов на странице, а во вложенных элементах скрыта магия (всё дело в волшебной теме с тем, что паддинг считается от ширины родительского элемента). JS Bin В …

Сервис для удаления фона в фотографиях (clipping)

Очень неплохо и удобно кропает. Даже с пушистой шубой справился. Пока в бете. Потом может стать платным. http://clippingmagic.com/

Скачивание онлайн-видео

Программа для скачивания разнообразного видео с разнообразных сайтов для PC — http://www.freemake.com/how_to/how_to_download_video_free. Бесплатна, но при этом сама устанавливает кучу левого софта без предупреждения (например, Яндекс-браузер). Поэтому имеет смысл устанавливать на виртуалку. Простая как пень. Достаточно просто нажать кнопку «вставить», и ссылка из буфера будет исследована на предмет наличия видео. После этого будет предложено скачивание файлов …

Отладка мобильных сайтов через Google Chrome

Отличное видео от Paul Irish. Рассказывает, как отлаживать сайты на мобильных устройствах без плагинов. Как поменялась эмуляция. Ну и немного про workspaces (теперь поддерживается и less) http://youtu.be/gZH1d2Co1X0

Ускорение скролла страниц

http://habrahabr.ru/post/204238/ Предлагают сделать

.disable-hover,
.disable-hover * {
  pointer-events: none !important;
}

.disable-hover,

.disable-hover * {

pointer-events: none !important;

}

и вешать класс при старте скролла.

Очередная библотека валидации форм

http://omarshammas.github.io/formancejs

О push-нотификациях в safari

Доступны только в Mac OS Mavericks https://developer.apple.com/notifications/safari-push-notifications/

Библиотека для удобочитаемого представления json

Удобно показывает json-объекты. Чем сложнее json, тем удобнее смотреть. http://marianoguerra.github.io/json.human.js/

Анимаированные favicon

http://lab.ejci.net/favico.js/

Подборка полезностей про favicon

https://github.com/audreyr/favicon-cheat-sheet