50 of Our Favorite CSS Libraries, Frameworks and Tools from 2017

CSS Flexbox Tools & Libraries

Waffle Grid

Waffle Grid – An easy to use flexbox grid system.

Waffle Grid


RAGrid – A flexbox grid that uses recognizable attributes instead of classes.


Taffy Framework

Taffy – An open source, lightweight, modern CSS framework built with Flexbox.



Griddd – A dead simple, customisable, flexbox-based grid.


Flexbox Cheatsheet

Flexbox Cheatsheet – An interactive guide for CSS Flexbox properties, with plenty of examples.

Flexbox Cheatsheet

For more Flexbox resources, take a look at this post.

CSS Grid Tools & Libraries


Griddy – An online tool for learning the CSS Grid.



Graaf – A collection of pure CSS grid overlays for designing.


CSS Grid Cheat Sheet

CSS Grid Cheat Sheet – A CSS grid visual guide.

CSS Grid Cheat Sheet

For an introduction to CSS Grid, take a look at this post.

CSS Button Libraries


Bttn.css – Awesome buttons for awesome projects!


Hover Buttons Library

Hover Buttons Library – A collection of animated CSS/SCSS buttons.

Hover Buttons


Buttons – A collection of CSS buttons.


Social Share Kit

Social Share Kit – A library of decent and good looking CSS/JavaScript social sharing tools like social network icons, share buttons, share count, floating/sticky button bar and popups.

Social Share Kit

CSS Components

Foundation Building Blocks

Foundation Building Blocks – Collection of over 100 components to jump start your projects.

Foundation Building Blocks


Balloon.css – Simple tooltips made of pure CSS.


Fontisto – The iconic font and CSS toolkit.


Pretty Checkbox

Pretty Checkbox – A pure CSS library to beautify checkbox and radio buttons.

Pretty Checkbox

CSS Checkbox Library

CSS Checkbox Library – A huge library of CSS Checkboxes for every taste.

CSS Checkbox Library


explodal – An “explosive” modal window that consists of over 97% CSS, 1 line of JavaScript and a small GIF.


SCSS Only Slider

SCSS Only Slider – This tutorial will teach you how to create a SCSS only responsive slider.

SCSS Only Slider

CSS Loader

CSS Loader – Simple loaders for your web applications using only one div and pure CSS.

CSS Loader

CSS Animation Tools & Libraries


Animatelo – Just-add-water Web Animations.


Vivify Library

Vivify – A free CSS animation library.



Animista – A place where you can play with a collection of pre-made CSS animations, tweak them and get only those you will actually use.



Obnoxious.CSS – Animations for the strong of heart, and weak of mind.


For even more CSS animation tools and resources, take a look at this round-up.

CSS References, Guides & Checklists

CSS Cheatsheets

50 Cheatsheets, References and Guides for CSS – A huge collection of CSS-related cheatsheets and guides that span a variety of subjects.

50 Cheatsheets, References and Guides for CSS

CSS Database

CSS Database – A comprehensive list of CSS features and their positions in the process of becoming implemented web standards.

CSS Database

CSS Triggers

CSS Triggers – An interactive resource that lets you see how CSS properties utilize browser resources.

CSS Triggers

Flawless Typography Checklist

Flawless Typography Checklist – A complete typography master course in the form of an interactive visual checklist.

Flawless Typography Checklist


Sassmagic – An extensive Sass reference guide.



Boilrplate – A curated directory of boilerplates to help you start your projects.


Atomic CSS Frameworks


Fractures– A Baseline atomic CSS toolkit that helps you bootstrap design-systems and prototypes by providing a set of non-blocking, atomic, utility classes.


Biomatic UI

Biomatic UI – A flexible atomic-focused CSS framework.

Biomatic UI

CSS Web Frameworks

Tailwind CSS

Tailwind CSS – A utility-first CSS framework for rapid UI development.

Tailwind CSS


PaperCSS – The less formal CSS framework.



Shoelace.css – A back to the basics CSS starter kit, for when you don’t need the whole boot.


Turret CSS

Turret CSS – A styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites.



Trowel – A Sass toolkit that allows you to create and use CSS frameworks.



Unnamed – A colorful CSS framework made by a human not an Ai.



awsm.css – A CSS library for beautify semantic HTML markup without classes, attributes, etc.


Brutalist Framework

Brutalist Framework – An open source framework for the brutalist web design trend.

Brutalist Framework

BBC Grandstand

BBC Grandstand – A collection of common CSS abstractions and utility helper classes.

BBC Grandstand


iotaCSS – A smart open source SASS based OOCSS framework built for scale.


Semantic UI

Semantic UI – A development framework that helps create beautiful, responsive layouts using human-friendly HTML.

Semantic UI

CSS Frameworks


Luxbar – Featherweight, responsive, CSS only navigation bar.



mini.css – Aims to provide as much functionality as possible in about 5KB gzipped.


Wireframe CSS

Wireframe CSS – A minimal CSS framework for wireframing.


Less Grid Boilerplate

Less Grid Boilerplate – A lightweight 12-column CSS grid system built with CSS Grid and LESS.

Less Grid Boilerplate


kernel.css – An unintrusive, lightweight and semantic CSS and JavaScript framework inspired by the Material Design spec.



Petal – A modern, light CSS UI framework. Based on LESS.


Tent CSS

Tent CSS – Pulling inspiration from outdoor survival, Tent CSS is unglamorously simple and robust. The framework is designed to be used as a foundation for building websites.

Tent CSS


Spectre.css – A lightweight, responsive and modern CSS framework for faster and extensible development.


We recently published a collection of new, lightweight CSS frameworks.

Miscellanous CSS Tools


Gradientify – A collection of top gradients with copy and paste CSS code.


Critical Path CSS Generator

Critical Path CSS Generator – Speed up your page render time in no time.

Critical Path CSS Generator


Grabient – An online tool for creating all sorts of gradients that can be exported as CSS or to Sketch.



CSSRooster – A bot that writes CSS classes for HTML with deep learning.



WebGradients – A free collection of 180 linear gradients that you can use as content backdrops in any part of your website.


Angled Edges

Angled Edges – A Sass mixin for creating angled edges on sections by dynamically encoding SVGs.

Angled Edges


Plumber – Create better looking documents and speed up CSS development by adding vertical rhythm to your page.


For more web designer tools: 50 Tiny, Time-Saving, and Free Tools for Web Designers.

You might also like to take a look at the Top 50 CSS Tools from earlier in the year.

Подборка: Более 800 ресурсов для front-end-разработчиков



  • Bento: коллекция руководств по веб-разработке;
  • Hack Design: легкий и понятный курс по дизайну для людей, делающих потрясающие вещи;
  • Web Style Guide: все от CSS и типографики до HTML и структуры текста;
  • SmahingMagazine: как стать лучшим frontend-разработчиком;
  • Обучение: список ресурсов с обучающими материалами;
  • JavaScriptIsSexy: изучайте HTML5, CSS3 и технологии адаптивного веб-дизайна;
  • Codecademy: бесплатное интерактивное обучение языкам программирования;
  • Codeschool: обучение веб-технологиям с видеоуроками, заданиями и скринкастами;
  • TheExpressiveWeb: ресурс от Adobe, где показаны новейшие и самые впечатляющие возможности веб-технологий;
  • Treehouse: HTML, CSS, создание приложений для iPhone и многое другое;
  • General Assembly Dash: изучайте HTML, CSS и JavaScript, создавая проекты прямо в своем браузере;




  • Web Components: компонентная модель для Web’а;
  • БЭМ: технология создания веб-приложений, упрощающая разработку и объединяющая команду;
  • Tutsplus: введение в БЭМ;
  • SmashingMagazine: введение в БЭМ;
  • Видео: как использовать БЭМ вне Yandex;
  • Статья: атомарный веб-дизайн;
  • Слайды: презентация по атомарному веб-дизайну;
  • Pattern Lab; создание систем атомарного дизайна;
  • Polymer Project: библиотека для создания собственных HTML-элементов;
  • Flux: это архитектура приложения, которую использует Facebook для создания клиентской части веб-приложений;


  • Aura: архитектура управляемая событиями для разработки масштабируемых приложений путем создания виджетов;
  • Hydra: фреймворк, имеющий все инструменты, необходимые для создания масштабируемых приложений;
  • Terrific.js: позволяет вам структурировать проект, путем разбиения кода jQuery/Zepto на модули;
  • Шаблоны: для крупных архитектур приложений на JavaScript;
  • Статья: создание одностраничных приложений;
  • Видео: масштабируемая архитектура JavaScript-приложения;
  • Книга: «Learning JavaScript Design Patterns». Автор Эдди Османи (Addy Osmani);
  • Книга: «Single page apps in depth». Автор Микито Такада (Mikito Takada);
  • Книга: «Scalable and Modular Architecture for CSS». Автор Джонатан Снук (Jonathan Snook);
  • Презентация: как управлять большими jQuery-приложениями;
  • Сравнение: шаблоны проектирования;
  • Stubbornella: как медиа-объекты могут сэкономить сотни строк кода;


Организация рабочего процесса


  • Yeoman: это набор мощных инструментов и библиотек для быстрого создания красивых веб-приложений;
  • Grunt: это инструмент для сборки JavaScript-проектов из командной строки с использованием задач;
  • Веб-разработка: как использовать Grunt;
  • GruntStart: основные составляющие, с помощью которых можно быстро перейти к созданию оптимизированного сайта;
  • Руководство: начинаем работу с Grunt;
  • Grunt: синхронное тестирование сайта на разных браузерах/устройствах;
  • Gulp: это система сборки, использующая потоки;
  • Gulp + Browserify: обзор с примерами кода;
  • Gulp: видение проекта, его история и будущее;
  • Gulp.js: управление сборкой;


  • Mod: инструмент для организации рабочего процесса с использованием задач;
  • Brunch: это система сборки для HTML5-приложений;
  • FIS: frontend-решение, включающее в себя инструменты автоматизации, фреймворк и среду разработки;
  • Roots: легкая, быстрая и интуитивно понятная система сборки, предназначенная для ускорения frontend-разработки;
  • Mimosa: система сборки для современной веб-разработки;
  • Automaton: система автоматизации задач;
  • Cartero: это инструмент, помогающий с организацией frontend-кода многостраничных веб-приложений;
  • Frontend-разработка: введение;
  • Frontend-разработка: настройка среды разработки и Yeoman;


  • Frontend-разработка: Grunt-задачи;
  • Frontend-разработка: CSS-фреймворк (Inuit);
  • CSSCSS: анализатор избыточности CSS;
  • Helium: инструмент JavaScript для поиска неиспользуемых CSS;
  • JSLint: инструмент для обнаружения ошибок путем статического анализа JavaScript-программ;
  • JSHint: еще более гибкий анализ JavaScript-программ;
  • JSLint Error Explanations: объяснение всех ошибок и предупреждений, выдаваемых JSLint и JSHint;
  • ImageOptim-CLI: позволяет оптимизировать размеры изображений;
  • jpegoptim: возможность сжимать/оптимизировать размеры JPEG-файлов;
  • Pngcrush: оптимизация PNG-файлов;


  • Glue: простой инструмент с интерфейсом в виде командной строки, позволяющий генерировать CSS-спрайты;
  • Wraith: сравнение скриншотов;
  • Penthouse: создание критически важного CSS;
  • Browser-sync: позволяет тестировать ваше приложение на всех браузерах одновременно;
  • Видео: разработка приложений на JavaScript. Пол Айриш (Paul Irish);
  • Презентация: разработка приложений на JavaScript. Пол Айриш (Paul Irish);




  • Shoptalk Show: подкаст о веб-дизайне, веб-разработке и опыте взаимодействия с пользователем;
  • JavaScript Jabber: подкаст, посвященный JavaScript;
  • The Big Web Show: подкаст Джеффри Зелдмана (Jeffrey Zeldman), посвященный всему, что связано с веб;
  • The Web Ahead: еженедельный подкаст про изменяющиеся технологии и будущее веба;
  • SassCast: подкаст о препроцессоре Sass;
  • CDNify: это подкаст о технологиях, стартапах и производительности сайтов;
  • The Non Breaking Space Show: шоу с участием самых креативных людей из области дизайна и веб-разработки;




  • HTML5 Weekly: новости HTML5 и веб-технологий;
  • HTML5 Bookmarks: список статей и полезных инструментов;
  • CSS Weekly: статьи, руководства и инструменты;
  • JavaScript Weekly: новости и статьи по JavaScript;
  • Sidebar.io: пять лучших ссылок для дизайнеров каждый день;
  • Web Design Weekly: еженедельная рассылка с лучшими новостями и статьями интернета;
  • Open Web Platform Daily Digest:самые последние frontend-технологии и решения;
  • Responsive Design Newsletter: адаптивный веб-дизайн: новости, статьи, инструменты и подсказки;
  • echo.js: клон Reddit с ресурсами JavaScript;
  • Web Tools Weekly: инструменты для frontend-разработки и веб-дизайна;
  • A Drip of JavaScript: советы по JavaScript раз в неделю;
  • ng-newsletter: лучшие материалы по AngularJS;




  • Статья: что такое border-image;
  • Статья: то, что вам никто не рассказывал о Z-index;
  • Статья: полное руководство по Flexbox;
  • Статья: принципы написания последовательного, идиоматического CSS;
  • Primer: типографика, кнопки и руководства по написанию HTML и CSS от GitHub;
  • WordPress: стандарты CSS;
  • Wizardry: руководства и советы по CSS;
  • Absolute Centering: как разместить контент по центру, чтобы он корректно отображался во всех браузерах;
  • CSS Positioning 101: все о CSS-позиционировании;




  • Книга: «Eloquent JavaScript». Автор Марижн Хавербеке (Marijn Haverbeke);
  • Книга: «Speaking JavaScript». Автор Аксель Роушмайер (Axel Rauschmayer);
  • Руководство: изучаем JavaScript;
  • Статья: замыкания JavaScript;
  • OOП в JavaScript: то, что вам нужно знать;
  • Статья. Часть I: полезные комбинаторы для работы с простыми Java-объектами в старом стиле;
  • Статья. Часть II: полезные комбинаторы для работы с простыми Java-объектами в старом стиле;
  • Статья: прототипы и наследование в JavaScript;
  • Серия статей: подробности стандарта ECMA 262-3;
  • JavaScript Garden: описание самых необычных возможностей JavaScript;


  • Google Style Guide: руководство по стилям оформления сайтов на JavaScript от Google;
  • Github Styleguide: руководство по стилям оформления сайтов на JavaScript от GitHub;
  • WordPress: стандарты JavaScript;
  • Книга: «Structure and Interpretation of Computer Programs». Авторы Харольд Абельсон (Harold Abelson), Джеральд Джей Сассман (Gerald Jay Sussman), Джули Сассман (Julie Sussman);
  • RubyJS: это JavaScript-реализация всех методов классов Ruby;
  • Mout: это коллекция утилит JavaScript, которые могут быть использованы в браузере в качестве AMD-модулей или node.js;
  • bacon.js: библиотека для функционального реактивного программирования для JavaScript;
  • Руководство: событийные циклы и сопрограммы в JavaScript;
  • How To Node: асинхронный контроль потока с Promises;
  • Видео-лекция: монады в JavaScript. Дуглас Крофкфорд (Douglas Crockford);


  • Статья: не надо давать обещания, или Promises наоборот;
  • Статья: Promises – это монады асинхронного программирования;
  • Статья: изучение обратных вызовов с JavaScript Generators;
  • Статья: зачем нужны Promises;
  • Спецификация: Promises/A+;
  • Статья: обратные вызовы или сопрограммы;
  • Readme: что такое Promises;


Библиотеки JavaScript





  • Книга: «Dive into HTML5». Автор Марк Пилгрим (Mark Pilgrim);
  • Статья: принципы написания последовательного, идиоматического HTML;
  • Google Style Guide: руководство по стилям оформления сайтов на HTML/CSS от Google;
  • WordPress: стандарты HTML;


Языки высокого уровня


  • Dart: типизированный язык программирования, созданный Google, который выступает в качестве альтернативы JavaScript;
  • Sass: это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS-кода;
  • Bourbon: простая и легковесная библиотека миксинов под Sass;
  • Less: обеспечивает следующие расширения CSS – переменные, вложенные блоки, миксины, операторы и функции;
  • Stylus: надежный и динамичный препроцессор CSS;
  • TypeScript: язык программирования, представленный Microsoft, расширяющий возможности JavaScript;
  • CoffeeScript: язык программирования, транслируемый в JavaScript;


Фреймворки JS



  • Статья: автостопом по AngularJS Directive;
  • Статья: сборка frontend-проектов с помощью Grunt и Angular JS;
  • Советы: AngularJS;
  • angular-requirejs-seed: это форк Angular Seed, но с изменениями, необходимыми для поддержки RequireJS;
  • Статья: написание повторно используемых компонентов Angular JS с Bower;
  • Статья: нативные директивы AngularJS для Twitter Bootstrap;
  • Статья: автоматизация AngularJS с Yeoman, Grunt и Bower;
  • Статья: оптимизация шаблонов Angular с Grunt на Heroku;
  • Статья: создание оффлайн-приложений с AngularJS и PouchDB;
  • jQuery: библиотека JavaScript, направленная на взаимодействие JavaScript и HTML;


  • jQuery: Github;
  • jQuery: обучающий ресурс;
  • jQuery: страничка о плагинах;
  • jQuery: полное руководство по написанию плагинов jQuery;
  • Книга: «jQuery Fundamentals». Автор Ребекка Мерфи (Rebecca Murphy);
  • jQuery: стиль кода jQuery;
  • Плагины: jQuery;
  • Dojo: свободная модульная библиотека JavaScript;
  • Dojo: Github;
  • Dojo: документация;


  • Руководство Dojo: создание своего собственного виджета;
  • Backbone: JavaScript-библиотека, основанная на шаблоне проектирования Model-View-Presenter;
  • Backbone: Github;
  • Книга: «Developing Backbone.js Applications». Автор Эдди Османи (Addy Osmani);
  • Презентация: Backbone;
  • Backbone: руководство по Marionette.js View;
  • Серия руководств: создание приложения на Backbone.js;
  • Backbone: миграция приложения;
  • Chaplin.js: фреймворк для JavaScript, работающий поверх Backbone.js;
  • Meteor: это платформа с открытым исходным кодом для быстрого создания качественных веб-приложений;


  • Meteor: Github;
  • Zepto.js: небольшая JavaScript-библиотека, заточенная под движок WebKit;
  • Zepto.js: Github;
  • Zepto Builder: создание своей версии Zepto с необходимыми модулями;
  • Minified.js: библиотека JavaScript, сравнимая по размерам с jQuery и MooTools;
  • Minified.js: Github;
  • React: фреймворк от Facebook;
  • React: Github;
  • Qooxdoo: универсальный JavaScript-фреймворк для создания мобильных и одностраничных веб-приложений;


  • jQWidgets: фреймворк и набор виджетов для создания веб-приложений для ПК и мобильных устройств;
  • Flight: веб-фреймворк управляемый событиями от Twitter;
  • Singool.js: простой JavaScript-фреймворк для разработки одностраничных веб-приложений;
  • Knockout: начните применять шаблон Model-View-View Model (MVVM);
  • rAppid.js: декларативный фреймворк JavaScript MVC;
  • Sammy.js: крошечный фреймворк JavaScript, формирующий структуру приложения;
  • Ember.js: фреймворк для создания амбициозных веб-приложений;
  • Ember.js: Github;
  • Руководство: создание приложений с Ember.js;
  • EmberWatch: огромное количество обучающего материала по Ember;


  • Maria: MVC-фреймворк для приложений JavaScript;
  • Terrific Composer: frontend-фреймворк, следующий Terrific-концепции;
  • Rivets.js: простое решение для связывания данных и создания шаблонов для разработки современных веб-приложений;
  • Synapse: решение для связывания данных;
  • Cappuccino: открытый фреймворк, упрощающий создание настольных приложений, работающих в браузере;
  • JavaScript: подборка фреймворков;
  • JavaScript: фреймворки и инструментарий связывания данных;
  • Underscore.js: библиотека JavaScript;


Фреймворки CSS




  • X-editable: вставка редактируемых компонентов;
  • Pagination: навигация по страницам;
  • Slider: слайдер;
  • Bootswatch: каталог тем;
  • Bootstrap Zero: каталог тем;
  • Jumpstart UI: еще один каталог тем;
  • Themestrap: простой способ создания тем Twitter Bootstrap;
  • jQuery Mobile Boostrap: тема jQuery для мобильных устройств, основанная на Twitter Bootstrap;
  • Bootstrap CDN: CDN для Twitter Bootstrap;
  • Flat UI: набор элементов пользовательского интерфейса;




  • Bootstrap Tour: простой способ создания «туров» по сайту;
  • Bootsnipp: элементы дизайна и сниппеты для фреймворков HTML/CSS/JS;
  • Form Builder: создание форм;
  • PaintStrap: сгенерируйте потрясающие темы Twitter Bootstrap;
  • TODC: тема в стиле Google для Twitter Bootstrap;
  • Layoutit:билдер с интерфесом Drag and Drop;
  • Bootlint: проверка веб-страниц на наличие HTML-ошибок;
  • IceCream: простая сеточная система;
  • Responsive Grid: адаптивная сеточная система;
  • Responsive Grid System: еще одна адаптивная сеточная система;


  • Compass: дизайнерский фреймворк;
  • Pondasee: набор инструментов, объединяющий в себе мощь Scss и Compass;
  • Foundation от Zurb: самый продвинутый адаптивный frontend-фреймворк в мире;
  • Boilerstrap: смесь HTML5 Boilerplate и Bootstrap;
  • Bootstrap PSD: еще один инструмент, упрощающий создание веб-приложений;
  • GroundworkCSS 2: адаптивный фреймворк HTML5, CSS и JavaScript;
  • Ink: набор инструментов, ускоряющих разработку веб-интерфейсов;
  • neat:фреймворк для Sass и Bourbon;
  • BootMetro: фреймворк для создания веб-приложений в стиле Metro;
  • Cosmo: тема Windows 8;


  • inuit.css: мощный масштабируемый фреймворк для OOCSS;
  • Kraken: Node.js-фреймворк;
  • Susy: адаптивные сетки для Compass;
  • Pure: маленькие адаптивные модули CSS;
  • Topcoat: это открытая CSS-библиотека от Adobe HTML;
  • Cascade Framework: мощный и производительный OOCSS-фреймворк с поддержкой новых и старых браузеров;
  • Cascade Framework Light: облегченная версия Cascade Framework;
  • Semantic UI: это фреймворк для создания переносимых интерфейсов;




  • Normalize.css: браузеры начинают отображать все элементы в соответствии с современными стандартами;
  • HTML5: кроссбраузерное полизаполнение;
  • Viewport Component: упрощает работу с вьюпортами;
  • Can I Use: таблицы совместимости функций HTML5, CSS3, SVG с браузерами;
  • HTML5 Please: рекомендации по реализации функций HTML5 и CSS3;
  • Outdated Browser: проверка актуальности версии браузера пользователя;






  • jQuery Picture;
  • Picturefill;
  • PictureFill;
  • imgLiquid: jQuery-плагин для изменения размеров изображений;
  • Clown Car: техника для адаптивных изображений;
  • HiSRC: простой jQuery-плагин для адаптивных изображений;
  • resrc.it: адаптивные изображения по запросу;
  • FitText: jQuery-плагин для «надувания» текста;
  • Out Of Words!: фреймворк для создания адаптивных текстов;
  • Статья: создание адаптивных текстов;
  • Responsive Measure: автоматический выбор оптимального размера шрифта для блока или модуля;


Электронная почта



Мобильные устройства


  • jQuery Mobile: фреймворк для смартфонов и планшетов;
  • jQTouch: плагин Zepto/jQuery для мобильных веб-разработок под iPhone, Android, iPod Touch и другие устройства;
  • JScrollPane: это jQuery-плагин, превращающий стандартные скроллбары браузера в HTML-структуру;
  • jSwipeKinetic: jQuery-плагин, добавляющий кинетический скроллинг;
  • jQuery.pep.js: простой плагин для кинетического скроллинга;
  • Phantom Limb: эмулятор;
  • Touchе: эмулятор тач-событий;
  • Junior;
  • thumbs.js;
  • Zynga Scroller;
  • pull-to-refresh.js;
  • Overthrow;
  • iscroll;


Работа с жестами


  • jGestures: jQuery-плагин, позволяющий работать с жестами, например «прокруткой», «тапом», «поворотом»;
  • hammer.js: это JavaScript-библиотека для обработки функции мультитач;
  • TouchSwipe: jQuery-плагин для iPad, iPhone и так далее;
  • toe.js: крошечная jQuery-библиотека для обработки сложных жестов;
  • JS Touch Layer: фреймворк, упрощающий работу с жестами;
  • Статья: события касания и абстракции;
  • Jester;
  • TipTap;
  • jQuery.event.swipe;


Управление DOM-объектами



Обработка тап-событий


  • Energize;
  • Lightning Touch;
  • Tappable: простая библиотека для вызова тап-события в браузерах;
  • Fastclick: исключите 300-миллисекундную задержку между тапом и кликом в мобильных брауерах;
  • Руководство: создание «быстрых» кнопок для мобильных веб-браузеров;


Макет страницы


  • Screensizes: размеры экранов устройств;
  • Snap.js: JavaScript-библиотека для создания красивых меню в мобильных приложениях;
  • Flickable.js: позволяет взаимодействовать с любым элементом;
  • Swipe: это облегченный мобильный слайдер с четкостью перемещения 1:1 при прикосновении;
  • Swiper: слайдер с аппаратным ускорением;
  • jQuery-плагин: переход между страницами в мобильных приложениях с поддержкой жестов;
  • SwipeSlide: Zepto-плагин для iOS;
  • stackable.js: jQuery-плагин, который грамотно размещает таблицы на экранах небольших устройств;


Работа с датчиками мобильных устройств


  • lenticular.js: это jQuery-плагин для создания анимаций, реагирующих на наклон устройства или движение курсора мыши;
  • This End Up: используем датчики ориентации устройства в пространстве;




  • Safari: лучшие способы доставки изображений;
  • Safari: руководство по визуальным эффектам CSS;
  • Safari: создание веб-контента;
  • Статья: знакомство с веб-приложениями iOS;
  • Статья: веб-дизайн для iPad и инструменты разработчика;
  • Статья: iPhone 4 Retina Display и медиа-запросы CSS3;
  • Руководство: как сделать так, чтобы изображение всегда отображалось вертикально в веб-приложении для iPhone;
  • jQuery: плагин для Retina Display;
  • retina.js: это скрипт, осуществляющий загрузку изображений в высоком разрешении для Retina Display;
  • Retina Images: оптимизация изображений под Retina Display;


Шаблоны и сниппеты





  • Руководство: шрифты и @font-face;
  • Adobe Edge Web Fonts: бесплатные шрифты от Adobe;
  • Typekit: шрифты по подписке;
  • Таблица: шрифты в Mac, Windows, Microsoft Office и Adobe Creative Suite;
  • SO: шрифты @font-face работают только на своем домене;
  • FitText: jQuery-плагин для «надувания» шрифта;
  • Trunk8: инструмент для обрезки текста, чтобы он поместился на форме;
  • bacon: измените форму блока с текстом;
  • CSS Typography: небольшой обзор CSS-функций по улучшению типографики;
  • Font Squirrel: генератор шрифтов;



Различные сервисы



  • What Font Is: определение шрифта по изображению;
  • Browser Shots: тесты совместимости практически с любым браузером;
  • CSSArrowPlease: простой инструмент для создания поясняющего блока со стрелкой;
  • HTML Entity Lookup: поиск HTML-сущностей;
  • CodePen: редактор кода HTML, CSS и JavaScript;
  • site44: «превращает» папки Dropbox в веб-сайты;
  • JPEGmini: сервер оптимизации изображений;
  • TinyPNG: сжатие PNG-изображений с потерями;
  • GenyMotion: эмулятор, приемник AndroVM;


Инструменты для создания веб-сайтов



Работа с анимацией


  • Velocity.js: это jQuery $.animate(), но в 20 раз быстрее и удобнее;
  • Animo.js: небольшой мощный инструмент для управления CSS-анимациями;
  • Stylie: инструмент для создания веб-анимации;
  • animate.less: куча крутых, забавных анимаций, пригодных для использования в любом браузере;
  • Canvas Advanced Animation Toolkit: фреймворк JavaScript для работы с анимацией;
  • tween.js: суперпростой инструмент для создания анимаций;
  • Janis: простой JavaScript-фреймворк для создания анимаций с помощью CSS-переходов;
  • Rekapi: JavaScript-библиотека для создания анимаций;
  • CanvasScript3: JavaScript-библиотека для HTML5 Canvas с интерфейсом, похожим на ActionScript3;
  • Shifty: создание твининг-анимации;


  • emile.js: JavaScript-фреймворк для создания CSS-анимации;
  • Firmin: JavaScript-библиотека для создания изображений с помощью CSS-переходов и преобразований;
  • Keanu: небольшая библиотека для создания анимаций на CanvasJS;
  • jsAnim: мощная и простая в использовании библиотека, позволяющая добавлять на сайты впечатляющие анимации;
  • GreenSock: анимация с использвоанием криптов;
  • GreenSock: обучающие ресурсы;
  • GreenSock: примеры;
  • Codepen Repository: примеры использования Greensock;
  • scripty2: JavaScript-фреймворк для продвинутых HTML-интерфейсов;
  • Animator.js: библиотека JavaScript для работы с анимацией;


  • Processing.js: это открытый язык программирования для визуализации в вебе;
  • jQuery Transit: CSS3-преобразования и переходы для jQuery;
  • Move.js: маленькая JavaScript-библиотека, упрощающая создание CSS3-анимаций;
  • Collie: это JavaScript-библиотека, помогающая создавать высокооптимизированные анимации и игры с помощью HTML5;
  • Year Of Moo: анимации Angular.js;
  • animate.css: крутые анимации, которые вы можете использовать в своих проектах;
  • Approach: меняйте внешний вид объектов в зависимости от их расстояния до курсора;
  • Magic: CSS3-фреймворк с большим количеством анимаций;




  • AlloyUI: фреймворк на базе YUI3;
  • Kendo UI: все для создания мобильных и веб-приложений с HTML5 и JavaScript;
  • jQuery UI Bootstrap: тема Bootstrap для jQuery UI;
  • jQuery Bootstrap: объединенная мощь Bootstrap и jQuery UI;
  • Cascade Framework: виджеты как для старых браузеров, так и для новых;
  • Zebra: JavaScript-библиотека, которая следует ООП-концепции;


Загрузка файлов



Карта сайта



Создание содержания



Модальные окна









Навигация/переход по страницам



Элементы выбора: выпадающие списки, радиокнопки, чекбоксы



Индикаторы загрузки









Всплывающие подсказки










  • easy pie chart: создание простых круговых диаграмм;
  • CHAP Links Library: отрисовка диаграмм, схем и временных графиков;
  • Paper.js: фреймворк для работы с векторной графикой;
  • xCharts: это JS-библиотека для создания привлекательных графиков;
  • jQuery Gantt: библиотека для построения диаграмм Ганта;
  • amCharts: инструмент для построения графиков;
  • Raphael.js: простая векторная графика для веба;
  • three.js: 3D-библиотека JavaScript;
  • Highcharts: интерактивные JavaScript-графики для ваших веб-проектов;
  • Flot: привлекательные графики для jQuery;
  • Chart.js: простые схемы и графики для дизайнеров и разработчиков;
  • GoJS: библиотека для создания интерактивных диаграмм;
  • JointJS: это JS-библиотека для построения графов, схем и графиков;


Проверка правильности введенных данных в форме


  • Mention.js: дает возможность использовать символ @ для поиска пользвоателей;
  • ALAJAX: скрипт, позволяющий добавлять в форме свои поля;
  • Parsley.js: библиотека для быстрого и простого создания форм валидации;
  • mailcheck.js: jQuery-плагин, следящий за правильностью написания домена в адресе электронной почты;
  • one-validation: коллекция регулярных выражений для проверки правильности введённых данных;
  • nextVal: плагин jQuery для оценки правильности введенных данных в форму;
  • Fields.js; непрерывная оценка правильности введенных данных;
  • IV.js: специальные фильтры для оценки правильности введенных данных;
  • Ladda: превращение кнопки подтверждения в индикатор загрузки;
  • jQuery Super Labels: примеры форм с плейсхолдерами;
  • jQuery Validation Engine: JavaScript-плагин, задачей которого является оценка правильности данных, введенных в форму;


Анимированные переходы



Работа с числами



Время и дата





  • Fullproof: текстовый поиск высокого класса;
  • lunr.js: это простой текстовый поисковик для ваших приложений;





  • Jasmine: JavaScript-фреймворк с синатксисом, похожим на Rspec;
  • QUnit: это библиотека от разработчиков jQuery, позволяющая писать unit-тесты для кода на JavaScript;
  • JsMockito: mock-фреймворк, создатели которого вдохновлялись Mockito;
  • PhantomCSS: тестирование вёрстки на визуальные регрессии;
  • Gemini: тестирование вёрстки на визуальные регрессии с помощью скриншотов;
  • Karma: исполнитель тестов для JavaScript;
  • ChaiJS: это гибкая библиотека утверждений;
  • Sinon.JS: три вида тестирования с spy, stub и mock для JavaScript;
  • sinon-chai: расширение для Chai;
  • PhantomJS: Webkit в консоли, то есть браузер без графической оболочки;
  • SlimerJS: браузер с поддержкой сценариев для веб-разработчиков, который работает на Gecko;





  • ECT: движок шаблонов с синтаксисом CoffeeScript;
  • pithy: предметно-ориентированный язык для генерации HTML на JavaScript;
  • T: использует простую структуру данных JavaScript для представления данных HTML/XML;
  • Nunjucks: шаблонизатор для JavaScript;
  • Linked.in Dust.js: сравнение mustache, handlebars, dust.js;
  • Статья: JSP и Dust.js;
  • Linked.in Dust.js: руководство;
  • Linked.in Dust.js: консоль для тестирования;






Работа с текстовыми редакторами



Просмотр и редактирование кода





  • Статья: рефакторинг кода JavaScript с kratko.js;




  • Видео: производительность DOM, HTML5 и CSS;
  • Видео: высокая производительность JavaScript;
  • Видео: создание производительного HTML5-приложения;
  • Руководство: написание быстрого и эффективного кода JavaScript;
  • Советы: производительность JavaScript;
  • Статья: повышаем производительность HTML5-приложения;
  • Советы: повышение производительности веб-приложений с HTML5;
  • Статья: frontend-производительность для веб-дизайнеров и разработчиков;
  • Статья: чистим наше приложение от мусора;
  • Статья: анализ памяти;


  • Статья: шаблоны утечки памяти в JavaScript;
  • Статья: понимание и решение проблем с утечкой памяти в Internet Explorer;
  • Статья: ищем утечки памяти;
  • Статья: как писать высокопроизводительный код на JavaScript;
  • Статья: утечки памяти JScript;
  • Статья: отслеживаем утечки памяти в Node.js;
  • Статья: эффективное управления памятью – советы от команды Gmail;
  • Руководство: пишем быстрый и эффективный JavaScript;
  • jsPerf: проверка производительности JavaScript;
  • Chrome Developer Tools: обзор инструментов разработчика, встроенных в Chrome;


  • Оптимизация для V8: серия технических постов про движок V8;
  • Список: что следует помнить при оптимизации JS-приложения для V8;
  • Советы: производительность JavaScript под V8;
  • Navigation Timing: JavaScript API для измерения оценки производительности сайта;
  • Firebug Paint Events: просмотр деталей события MozAfterPaint;
  • Locache: JavaScript-фреймворк, который позволяет кэшировать JS-строки, массивы и объекты;
  • Caliper: веб-сервис для мониторинга производительности веб-приложения;


Манипуляции с элементами DOM





  • requestAnimationFrame: потрясающие и быстрые анимации;
  • Collie: высокопроизводительная библиотека для работы с анимациями;
  • requestAnimationFrame API: теперь с точностью до миллисекунд;
  • Статья: почему перемещающиеся объекты с translate() лучше, чем pos:abs top/left;


Аппаратное ускорение


  • Совет: как посмотреть, какие части веб-страницы аппаратно-ускорены;
  • Список: параметры Chromium;


О браузерах


  • Видео: Google I/O 2012 – разгоняем JavaScript с помощью V8;
  • Видео: самые быстрые HTML и CSS – как работает браузерный движок;
  • Как работают браузеры: за кулисами современных веб-браузеров;
  • O’Reilly Velocity 2011: как ускорить JavaScript;
  • Видео: GDC 2012 – от консоли до Chrome;
  • Быстрые CSS: как браузеры отображают веб-страницы;
  • Видео: что браузеры думают о вашем приложении;
  • WebKit: серия статей о рендеринге;
  • Видео: один день из жизни кнопки в веб;
  • Статья: как загружается веб-страница;
  • Видео: основы, примитивы и история HTML5;
  • Статья: семейное дерево JavaScript;
  • Статья: как работают компиляторы JavaScript;
  • Статья: стратегии работы компилятора JavaScript;
  • Статья: будущее JavaScript;




  • CSS-only: загрузка изображений по запросу;
  • Статья: оптимизация JPEG-изображений;
  • Статья: оптимизация PNG-изображений;
  • Статья: как оптимизировать PNG и JPEG без потери качества. Часть I;
  • Статья: как оптимизировать PNG и JPEG без потери качества. Часть II;





Модульность и загрузчики


  • Lazy Module Declaration: сборщик JavaScript, позволяющий создавать хорошие веб-приложения;
  • Шаблоны: UMD (Universal Module Definition);
  • Browserify: позволяет вам использовать стиль node.js модулей для работы в браузере;
  • require.js: популярный файловый/модульный загрузчик;
  • require.js: плагины;
  • sea.js: загрузчик модулей для веба;
  • CrapLoader: асинхронная загрузка рекламы, виджетов и JavaScript-кода;
  • Статья: модульная разработка JavaScript-приложений с AMD, CommonJS и ES Harmony;
  • Статья: путь JavaScript-модуля;
  • Статья: модульный JavaScript с RequireJS;
  • LABjs и RequireJS: интересный способ загрузки ресурсов JavaScript;
  • JavaScript: наследование и публичные/приватные члены классов;
  • Статья: погружение в темные воды загрузки скриптов;


Управление пакетами



Управление изображениями











  • Спецификация;
  • Socket.io: JavaScript-библиотека для веб-приложений и обмена данными в реальном времени;
  • Engine.io: низкоуровневый движок, реализующий коммуникацию в старых браузерах для Socket.io;
  • SockJS: лучшая и наиболее полная альтернативная реализация WebSocket;


Обработка ошибок и отладка


  • Tracing.js: Отслеживание выполнения функций JavaScript;
  • Руководство: как не нужно обрабатывать ошибки JavaScript;
  • Tattletale: отправка логов через XHR для обработки на сервере;
  • jsconsole: удаленная консоль;




  • DevDocs: вся документация разработчика в одном месте;
  • dexy: ПО с открытым исходным кодом для составления документации и автоматизации документооборота;
  • docco: это простенький генератор документации;
  • styledocco: генератор документации из CSS-файлов на основе специально размеченных комментариев;
  • Ronn: создание руководств;
  • dox: генератор документации JavaScript;
  • YUIDoc: это приложение Node.js, которое генерирует документацию на основании комментариев в исходном коде;
  • coddoc: это библиотека jsdoc для парсинга;
  • sphinx: инструмент, упрощающий процесс создания документации;
  • Статья: знакомство с JSDoc;
  • Beautiful docs: генерация документации на основе markdown-файлов;
  • Daux.io: генератор, формирующий документацию «на лету»;


Стили Windows 8



Видео и аудио


  • SublimeVideo: HTML5-видеоплеер;
  • Video.js: HTML5-видеоплеер с открытым исходным кодом;
  • FlowPlayer: видеоплеер для веба;
  • longtailVideo: HTML5 и Flash-плеер;
  • howler.js: позволяет добавить музыку и звуки к веб-страницам;
  • Stratus 2: плеер SoundCloud;
  • jPlayer: медиа-библиотека, написанная на JavaScript;
  • MediaElement.js: HTML5 аудио- и видеопроигрыватель на HTML и CSS;
  • audio.js: это JavaScript-библиотека, позволяющая использовать тэг HTML5 в любом браузере;


Коллекции библиотек


  • Unheap: репозиторий с плагинами jQuery;
  • jster: все, что нужно для JavaScript;
  • MicroJS: поможет найти мощные микрофреймворки;
  • JSPkg: менеджер пакетов;
  • jquer.in: коллекция плагинов jQuery;
  • JSDB.io: отличный источник лучших фреймворков JavaScript, плагинов и инструментов;


Иные источники, инструменты и ресурсы


  • pineapple.io: руководства, инструменты и другие средства для разработчиков и дизайнеров;
  • Frontdesk: список полезных вещей для frontend-разработчиков;
  • Руководство: стандарты и рекомендации по frontend;
  • Life of JS: книги по JavaScript;










  • JSON Query Language: это язык запросов, специально разработанный для популярного формата обмена данными JSON;
  • Oboe.js: потоковый JSON-парсер;
  • JSONLint: проверка ошибок в JSON-коде;
  • SpahQL: управление данными JSON;
  • JSONiq: язык запросов для JSON;








Работа с клавиатурой









Расположение элементов на странице


  • Shapeshift: плагин, динамически меняющий расположение элементов в стиле Pinterest;
  • CollagePlus: плагин для jQuery разместит элементы точно в контейнере;
  • Masonry: JavaScript-библиотека, позволяющая выводить HTML-блоки в компактно-сложенном виде;
  • MixItUp: jQuery-плагин, предлагающий анимированную сортировку;


Работа для веб-разработчиков





  • zip.js;
  • simpleCart.js;
  • Mozilla/pdf.js;
  • Aware.js: настраивайте формат отображения содержимого страницы, в зависимости от поведения пользователя;
  • Статья: как загружать файлы на Amazon S3 напрямую из клиентского приложения;
  • jIO: JavaScript-библиотека для управления документами в нескольких хранилищах;
  • Lo-Dash: это полноценная замена для Underscore.js;
  • Subtle Patterns:Photoshop-плагин;

9 Free Progress Bar JavaScript Plugins For Web Designers

1. LineProgressbar


The jQuery LineProgressbar is a free plugin that’s super thin and lightweight.

It works with any modern progress bar elements and it takes basic options for total fill length, bar color, and height/width(among other features).

Check out the demo page for some examples along with code snippets you can use on your own website.

This is probably the best progress bar plugin for anyone willing to use jQuery. It’s straightforward to work with, and it’ll run in all major browsers.

2. MProgress.js

MProgress.js library

Another simple option I really like is MProgress.js. This is built around Google’s material design style so you may notice it closely resembles some of Google’s loading bars.

It comes with four different types of loading bars with four different animation styles. They’re all visible on the main page so you can see which one might fit your website.

But you’ll also find animated GIFs of these demos on the GitHub repo along with setup instructions.

Super easy and super lightweight. What more could you ask for?

3. ProgressBar.js

ProgressBar.js homepage

We’ve all seen the progress bars that run across the top of a webpage. These are getting much more common and they’re typically used for dynamically-loaded pages.

ProgressBar.js is a free plugin that replicates this feature. But it doesn’t just rely on bars at the top of the page.

You can use this plugin for any custom shape from circles to triangles and custom parallelograms.

If you look on the main page you’ll find links to examples hosted through JSFiddle. There’s plenty to go around and these make an excellent template for adding loaders onto your page.

4. goalProgress

jQuery Goal Progress plugin

The goalProgress plugin is definitely the simplest of the bunch. It’s primarily meant for use in tracking numbers on an input field, but it can be used for any similar progress bar.

You won’t find too much on the homepage other than a basic demo featuring a charity donation bar.

There’s far more info on the GitHub repo showing what this does and how to get it setup.

I’d recommend this more as a simple starting point for very basic progress animations. For anything else check out some of the other plugins here.

5. μProgress

jQuery uProgress plugin

I had never heard of μProgress before researching for this article. Yet it’s clearly one of the best progress bar plugins on the web.

This was developed as a performant progress bar with a focus on custom animations. They all run on the computer’s GPU which frees up tasks for other page elements to render faster.

You can read a lot more about this process and find setup details in the documentation. It’s a really cool project with a full plugin API for adding custom features too.

Right now it’s in version 1.0.1 and likely to stay up-to-date for years to come. If you’d like to give it a shot just visit the main repo and download a copy.

6. nanobar.js

Nanobar.js plugin

If you’re looking for a pure vanilla JavaScript progress plugin then look no further.

With nanobar.js you get a super small JS library built around progress bar animations. The whole thing measures under 700 bytes when gzipped so it’s very small.

Check out the homepage for some examples with bars embedded in the page along with a top loading bar fixed to the full browser width.

It can run on just a single function call which makes this perfect for non-JS coders as well as devs who staunchly oppose using jQuery.

7. progressStep

progressStep plugin

The majority of progress bars fill up a percentage or a number counter.

But progressStep is different. This jQuery plugin lets you develop a breadcrumb progress bar where the user works through different steps in a pre-defined process.

This process might be signing up for a new account on a website or following an ecommerce checkout flow.

Either way this is a great plugin for adding that kind of functionality into your site. It’s totally free to use and has some great documentation on the GitHub repo.

8. CProgress

CProgress library

CProgress is designed solely for circular loading bars.

These are definitely not the norm, especially on websites. But you can find them handy for Ajax-powered widgets that load new elements into the DOM without refreshing the page.

It comes with a few different skins and plenty of optional features like custom speeds and numeric limits. Everything you need to know can be found on the main page or the main repo along with a download link.

9. jQuery Circle Progress

jQuery Circle Progress plugin

Here’s a very similar plugin also built on the jQuery library.

But with the jQuery Circle Progress plugin you get more variety to pick through. There’s more custom themes and more options to work with.

The downside? It can weigh a bit more so it’s not the best solution for every project.

Currently in v1.2.2 this is a stable plugin and well worth using in a production site. Just depends if you need a progress bar designed as a circle!

And no matter what you need I’d guarantee one of these plugins can help save you time and frustration to avoid coding a progress bar from scratch.

10 Free CSS Loading Spinner Snippets For Web Designers & Developers

1. Various CSS Spinners

This brilliant collection of custom CSS spinners comes from developer Iulian Savin.

You’ll find a slew of animation styles in here from rotating circles to animated bars and even a custom Pong-style loader. Seriously, that one is awesome.

These loaders all come as fully usable assets that you can copy/paste right into your own projects.

Just note these spinners also come from this GitHub repo where you can download the source code in full. Usually a bit easier than copy/pasting from CodePen.

2. Eclipse Spinner

Here’s a super unique spinner that mimics a solar eclipse. Or some kind of light show… I’m not exactly sure but I know it looks awesome.

The whole thing relies on very little HTML and it’s cut down even smaller thanks to Haml templating.

You can compile the Haml and Sass code into plain HTML/CSS if that’s easier for you to customize too.

3. Super Simple CSS Spinner

It doesn’t get much simpler than a lit-up circle rotating around & around.

And that’s precisely what you’ll find with this design created by Thomas Mandelid. It’s a super basic code snippet, and the CSS spinner is a true sight to behold.

It’s not one of the most stylish designs in this list, but it does the job.

Keep this in mind if you need a basic spinner that’ll match any website.

4. Beaulti Circle

I’m not exactly sure what the name for Beaulti Circle has to do with anything.

But I am sure that this custom CSS spinner is crazy cool. The animation style is just so fun to look at, and then you realize this was built entirely using CSS and HTML. That’s even more impressive.

The entire circle design is super clean and minimalist. It’ll grab your attention fast making it perfect for as a custom spinning loader.

I do think it’s a little flashy for corporate sites, but if you update the color to a lighter blue and make it a little smaller this thing could work.

5. Pure CSS Spinners

Developer Mark Kahn put together these pure CSS spinners for your enjoyment.

There’s a really fun mix in here alternating between various colors, plus a spinner of all the colors together in a rainbow. They look pretty radical and tech-focused.

If you like the black design on this spinner it can work well for your site. Just make sure you customize the spinner’s color to match your layout.

6. Spinners w/ Font Icons

Here’s a really fun idea merging custom CSS3 animation with free icon fonts.

In this pen you’ll find a bunch of icons from the Icomoon set. But they’re all animated using CSS to create rotating graphics that look like custom spinners.

Basically they are custom spinners. Just with a bit more to them since they operate on font properties in CSS.

Take a look at this and try messing around with the designs. With 15-20 minutes of tinkering, you might like the end result.

7. Olympic Rings

This has to be one of the most creative loaders I’ve seen in a while.

If you take the Olympic rings and merge them into an HTML document with a dash of CSS3 you get this excellent spinner design.

You will find a small amount of JavaScript code, but it does not directly handle the animation. That code handles the delay which is easier to manage via JavaScript. Everything else is just CSS.

Still, you can turn this into a pure CSS solution with just a few alterations. I almost think the Olympic organizers should add this loader onto their website.

8. Pure CSS Android Preload Spinners

Here’s a pretty cool loading spinner set designed after the typical Android loading graphic.

If you’ve ever used Android you’ll recognize many of these loading graphics. They certainly aren’t 100% replicas, but they’re pretty darn close.

And this pen uses nothing but pure CSS making it an excellent choice for any web developer to dive in.

9. Bounce Delay Loader

While this example isn’t technically a spinner, it’s still way too cool to leave out of this list.

Developer Joni Trythall created these bouncing loader balls from scratch with a little bit of CSS and some creative whimsy.

The code itself runs on Haml & SCSS but you can easily compile that down to raw HTML/CSS within CodePen. That might be easier to copy/paste into your page if you aren’t familiar with preprocessing.

10. Rotating Dots

Last but certainly not least is this super fun rotating spinner loader.

It’s made of smaller dots that all go through a cycle rotation. That means it’s designed to slow down at certain points where all the dots align together, then speed up to complete another revolution.

No doubt this spinner will turn heads on your page. It’s also subtle enough that it can blend into any layout with ease.

Developer Ömer Fatih created this snippet with simplicity in mind so you can get it working with only eight lines of HTML and less than 50 lines of CSS.

A fantastic minimalist spinner with a little extra something to hold your attention.

Real Time индексы в Sphinx’e

У системы полнотекстового поиска Sphinx много сильных сторон. Одна из них — индексы в реальном времени. Real-time indexes

При помощи этой функции можно “на лету” обновлять поисковые индексы, так что поисковая база всегда будет в актуальном состоянии.

RT-индексы пригодятся в том случае, когда БД уже проиндексирована, но в нее нужно в реальном времени вносить новые/обновленные или удалять несуществующие данные. Они хранятся в оперативной памяти в отдельном чанке. При его заполнении данные переносятся на диск, а ОЗУ очищается.

Схема индексации

Real time индексы подходят для быстро и часто изменяемой информации, но это не самое лучшее решение для длительного хранения больших объемов данных. Так что оптимальным решением будет задание основного индекса, в котором будут содержаться все записи (или с определенного момента), и который перестраивается, скажем, раз в сутки, а также RT-индекса с новыми данными.

Объявление основного индекса

В целом, объявление всех необходимых настроек присутствует в материале об индексации больших объемов данных в Sphinx, поэтому приведем лишь кусочек кода:

index product_index
    source        = product_shop
    path          = /var/data/product_shop
    charset_type  = utf-8

# Индексация таблицы product_shop

Объявление Real Time индекса

После добавления основного индекса, в файл конфигурации sphinx.conf нужно добавить RT-индекс:

index product_rt 
    type = rt
    path = /var/data/product_rt

    # Описание всех полей для индексирования
    rt_field = title
    rt_field = content

    #Описание атрибутов
    rt_attr_uint = added
    rt_attr_uint = product

    # Размер чанка для RT
    rt_mem_limit = 256M

# Объявление RT-индекса с описанием полей индексации и атрибутов

Обратите внимание на директиву rt_mem_limit. Тестирование производительности Sphinx показывает, что высокое значение лимита памяти (от 256 МБ и выше для больших БД) существенно улучшает скорость поиска и обновления индекса. Таким образом можно уменьшить количество дисковых фрагментов RT на диске для повышения производительности при большом количестве операций чтения/записи. Sphinx находится в активной разработке, так что оптимизации обязательно появятся в следующих версиях.

Объединение индексов

Теперь осталось объединить оба индекса, проприсав нужную конфигурацию все в том же файле sphinx.conf:

index product
  type = distributed
  local = product_index
  local = product_rt

# Объявление распределенного индекса, который объединяет основной и RT индексы

После этого не забудьте перезапустить индексацию и демон searchd.