Коллекция CSS прелоадеров

Креативная коллекция крутящихся прелоадеров, анимированных при помощи CSS3. Каждый «волчок» коллекции состоит всего из одного блока с классом .loader и текстом «Loading…». Текст задан для экранных читалок и обратной совместимости со старыми версиями браузеров, не поддерживающих CSS3.

Всем прелоадерам задан размер шрифта font-size в px (пиксели), а все другие размеры в em (относительная величина, зависящая от размера шрифта текущего элемента). Это сделано для того, чтобы можно было легко изменить размер всего прелоадера, оперируя только размером шрифта.

Установка очень проста, просто перейдите на сайт и выберите, что Вам понравилось и нажмите под прелоадером на ссылку "View Source". Откроется код для копирования на свой сайт,

#HTML_CSS

CDN (Content Delivery Network) - Сеть доставки содержимого — географически распределённая сетевая инфраструктура, позволяющая оптимизировать доставку и дистрибуцию содержимого конечным пользователям в сети Интернет.

Для чего стоит ее использовать?
Уменьшение задержки является ключевой причиной для использования сетей доставки контента CDN, потому что сеть располагает серверами во многих точках в мире. При этом, объекты вашего сайта будут загружаться для пользователя из ближайшего сервера который расположен в его регионе.

Это придаст вашему сайту большего быстродействия. В своих проектах я использую библиотеки от сервиса cdnjs.com

#Статьи

ColorPix - инструмент для определения цветового тона

Иногда необходимо быстро узнать цветовой тон на какой либо картинке и в помощь к нам приходит ColorPix.

Основная цель ColorPix - сохранить тон определенного пикселя и перевести его в читаемый формат. Однако основное преимущество заключается в том, что пользователь имеет возможность масштабировать и «захватывать» один пиксель за раз, когда это необходимо.

Определяет цвет сразу несколько цветовых моделей: rgb, HEX, HSB, CMYK. А еще он умеет определят позицию курсора на экрана. Работает на Windows XP - 10. Не требует установки.

#Инструменты

WOW.js — анимация элементов при прокрутке страницы

WOW.js позволяет отложить запуск анимации элементов до момента их отображения на экране при прокрутке страницы. Разработчик WOW.js рекомендует использовать Animate.css для анимации. Эта библиотека поддерживает более 70 эффектов.

Демонстрацию анимаций можете посмотреть на официальном сайте

ScrollMagic - это библиотека javascript, которая помогает вам легко реагировать на текущую позицию прокрутки пользователя.

Это идеальная библиотека для вас, если вы хотите:

- Анимировать на основе положения прокрутки - либо запустить анимацию, либо синхронизировать ее с движением полосы прокрутки (например, с помощью элемента управления воспроизведением).
- Закрепить элемент, начиная с определенной позиции прокрутки - либо на неопределенный срок, либо на ограниченный объем хода прокрутки (липкие элементы).
- Включать и выключать CSS-классы элементов в зависимости от положения прокрутки.
- Легко добавить эффекты параллакса на ваш сайт.
- Создать бесконечно прокручиваемую страницу (ajax загрузка дополнительного контента).
- Добавить обратные вызовы в определенных местах прокрутки или при прокрутке мимо определенного раздела, передав параметр прогресса.

#JS

Пример сочетания цветов и оттенков для кнопок Вашего сайта!

Делайте все правильно и красиво! Для захвата цвета можете использовать инструмент ColorPix, о котором мы недавно рассказывали.

Line Icon Pack - Бесплатные иконки для вашего проекта. Набор включает в себя 280+ иконок.

Коллекция иконок содержит разрешения от 28х28 до 1024х1024px, а так же популярные форматы: png, svg, шрифтовый тип. Имеются даже исходники под различные платформы. Забираем себе в коллекцию!

Brumm Shadow — отличный сервис для создания ровных теней. При помощи данного сервиса вы сможете легко в онлайн режиме настроить тени для блоков или кнопок Вашего сайта

Способ центрировать и обрезать миниатюры с помощью CSS

Если у вас на сайте блоки под изображения квадратного типа, а сами картинки неправильного размера, то вы при помощи этого трюка можете легко это исправить

Техника использует преобразования CSS3, поэтому она работает во всех современных браузерах, включая IE9 и выше.

Пример разметки HTML
<div class="thumbnail">
<img src="landscape-img.jpg" alt="Image" />
</div>
<div class="thumbnail">
<img src="portrait-img.jpg" class="portrait" alt="Image" />
</div>

Пример CSS свойств для этой разметки:
.thumbnail {
position: relative;
width: 200px;
height: 200px;
overflow: hidden;
}
.thumbnail img {
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: auto;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.thumbnail img.portrait {
width: 100%;
height: auto;
}

Вот и весь процесс, если что то не понятно, обсуждаем в нашем чате!

#HTML_CSS

Прелоадер — это индикатор загрузки сайта. Он может быть выполнен в виде анимированного gif-изображения, шкалы загрузки, css набора эффектов.

В этой статье мы рассматривали сервис анимации прелоадеров, теперь рассмотрим как реализовать эту предзагрузку на jQuery.

Разметка для предзагрузки
<div class="loaderArea">
<div class="loader"></div>
</div>

Класс .loaderArea это оболочка для нашей анимации,
а .loader это сам элемент предзагрузки (анимация).

Вызов предзагрузки на jQuery
$(window).on('load', function () {
let preloader = $('.loaderArea'),
loader = preloader.find('.loader');
loader.fadeOut();
preloader.delay(500).fadeOut('slow');
});

Оформление уже ляжет на вас, присылайте у кого что получилось в личку или делитесь в чате!

#jQuery

Toolbar.Js - плагин, который позволяет быстро создавать панели инструментов со всплывающими подсказками для использования в веб-приложениях и веб-сайтах. Панель легко настраивается с помощью Font Awesome (шрифтовые иконки), что обеспечивает гибкость в установке панели инструментов.

Установка Toolbar:
1. Скачать исходные файлы плагина

2. Подключаем javavascript:
Перед </body> добавляем и не забываем подключить jQuery
<script src="jquery.toolbar.js"></script>

3. Подключаем CSS файл:
перед </head> добавляем
<link href="jquery.toolbar.css" rel="stylesheet" />

4. Вставляем этот код на страницу, где хотите использовать подсказки
<div id="toolbar-options" class="hidden">
<a href="#"><i class="fa fa-plane"></i></a>
<a href="#"><i class="fa fa-car"></i></a>
<a href="#"><i class="fa fa-bicycle"></i></a>
</div>

5. Задействуем рабочее состояние нашему плагину:
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#element').toolbar( options );
});
</script>

#jQuery

Cleave.js - библиотека javascript для простого способа повысить удобочитаемость поля ввода, отформатировав введенные данные. Используя её, вам не нужно будет писать какие-то потрясающие регулярные выражения или шаблоны масок для форматирования входного текста.

Основные особенности:
- Форматирование номера кредитной карты
- Форматирование телефонных номеров
- Форматирование даты
- Форматирование чисел

Установка:

1. Подключаем javavascript:
Перед </body> добавляем
<script src="cleave.min.js"></script>
<script src="cleave-phone.{country}.js"></script>

cleave-phone.{country}.js - плагин требуется только при включенном режиме кода телефона. Больше информации в документации.

2. Задействуем рабочее состояние нашего поля:
<script>
var cleave = new Cleave('.input-phone', {
phone: true,
phoneRegionCode: '{country}'
});
</script>

4. Вставляем этот код на страницу, где хотите использовать маску
<input class="input-phone" type="text"/>

Есть вопросы? Пиши в чат!

Atom - это бесплатный настольный редактор кода, созданный с интеграцией HTML, JavaScript, CSS и Node.js.

Неудивительно, что он пользуется спросом, поскольку это продукт от GitHub, Atom обладает лучшим встроенным элементом управления Git, специально предназначенного для репозиториев GitHub.

Atom работает на разных операционных системах. 

Основные возможности:
- Встроенный менеджер пакетов
- Умное автозаполнение
- Браузер файловой системы
- Несколько панелей для удобной работы
- Находите, просматривайте и заменяйте текст по мере ввода в файл или во всех ваших проектах.

Теперь в Google Chrome можно группировать вкладки

Для этого нужно нажать на вкладке ПКМ и выбрать «Добавить в новую группу» или «Добавить в существующую группу». Каждой группе можно присвоить имя и закрепить за ней цвет, нажав на кружок возле вкладок.

Если браузер не обновился самостоятельно, попробуйте сделать это вручную в настройках:

chrome://settings/help

Если и после обновления функция не появилась, активируйте её в экспериментальных настройках. Перейдите по адресу и нажмите Enabled напротив Tab Groups:

chrome://flags/#tab-groups

Что такое CMS и как ее использовать?

CMS (Content Management System) — это система управления контентом, готовое коробочное решение для создания, редактирования и управления контентом сайта. На профессиональном жаргоне CMS также называют «движок». Примерами CMS являются WordPress, Joomla, OpenCart.

В свою очередь, системы управления контентом позволяют пользователям, не обладающим навыками разработки сайтов и знаниями языков программирования, самостоятельно работать над созданием и изменением сайта.

Основные особенности CMS:
- наполнять сайт контентом, изменять и администрировать ресурс, при этом не являясь IT-специалистом и не имея серьезных навыков программирования;
- создавать новые страницы в короткие сроки без лишних затрат;
- оптимизировать внешний вид сайта и улучшать качество его наполнения.

Dimensions — крутое расширение для Chrome, которое помогает измерять расстояния между элементами на веб-страницах. 

Основные возможности:
- Ваш дизайнер передал вам макеты в формате PNG или JPEG? Просто поместите их в Chrome, активируйте измерения и начните измерения.
- Хотите получить радиус круга? Стоит ли текст на вашем пути? Нажмите Alt, чтобы измерить размеры подключенной области.
- Настройка горячих клавиш.

Сервисы, которые помогут эффективно и удобно работать с дизайн-макетами.

1. Avocode – помогает быстрее обмениваться файлами дизайна, обсуждать изменения и кодировать веб-сайты, мобильные приложения и информационные бюллетени. Платформа для работы макетами для верстальщиков (PSD, Sketch и др)
2. Adobe Assets – работа с PSD-макетами прямо в браузере. Экспорт кода.
3. Zeplin – работа с дизайн-макетами как в браузере так и в десктопной версии. Есть экспорт кода.
4. PSD Tech – бесплатный аналог Avocode.

#Инструменты

Автоматическое сохранение изменений CSS в Chrome

Очень часто приходится редактировать код сразу в браузере. И для экономии времени мы можем сразу сохранять изменения у себя на локалке, перезаписывая старый файл.

1. Откройте панель разработчика.
2. Перейдите на вкладку Sources. 
3. Выберите вкладку Overrides. 
4. Ниже выберите «Select Folder For Overrides». 
5. Выберите директорию, в которой вы хотите сохранять изменения. 
6. После выбора директории, появится запрос на чтение и запись в выбранную директорию. Выбираем "Разрешить". 
7. Меняем наш CSS в браузере, перезагружаем страницу и наши изменения будут сохранены.

#Инструменты

HTML Purifier - это стандартная библиотека HTML фильтров, написанная на PHP. HTML Purifier не только удалит весь вредоносный код (более известный как XSS ), но также обеспечит соответствие ваших документов стандартам, чего можно достичь только при полном знании спецификаций W3C . 

 Ищете высококачественные, совместимые со стандартами компоненты с открытым исходным кодом для создаваемого приложения? HTML Purifier для вас!

HTML Purifier - это отличная библиотека для интеграции с существующими CMS и другими приложениями или редакторами WYSIWYG

Интеграция с:
MODx, Drupal, Wordpress and bbPress, Joomla, CodeIgniter, Symfony, CakePHP, Lithium, Elgg, SilverStripe CMS

Visual Center - определение центра на вашем изображении.

Visual Center - это open-source проект, написанный на javascript. Он рассчитывает значение визуального веса для каждого пикселя на изображении: квадратный корень из разницы между этим пикселем и цветом фона. И тогда алгоритм пытается сбалансировать этот вес во всех направлениях.

Пригодится тем у кого проекты нацелены под работу с изображениями.

#JS