Darkmode.js - Изменение цветовой схемы сайта в один клик.

Эта Open Source библиотека, которая использует CSS mix-blend-mode, чтобы установить темный режим на любой из ваших сайтов. Просто скопируйте и вставьте фрагмент, и вы получите виджет для включения и выключения темного режима. Вы также можете использовать его без виджета программно. Плагин легкий, построенный на VanillaJS. Он также использует localalstorage по умолчанию, поэтому ваши последние настройки будут запомнены!

Библиотеку нашли у наших друзей https://t.me/opensourcefuture

Disqus — веб-сервис, предоставляющий возможность импорта интернет-обсуждений и комментариев на сайт пользователя. Сервис использует свою социальную сеть, что упрощает комментирование на сайтах, использующих его.

Интеграция очень простая. Вам необходимо пройти регистрацию на официальном сайте и получить скрипт-код для отображения виджета на вашем сайте. Виджет работает не зависимо от вашей CMS.

Виджет социальных кнопок для сайта

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

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

Простой способ прикрепить футер к низу страницы

Зачем это необходимо?
Все очень просто, когда у вас мало контента, случается так что футер прыгает по всей странице, для этого мы прикрепим его изначально к низу страницы и таким образом, при добавлении контента, футер будет автоматически расширятся.

Шаг 1.
Обернуть ваш хедер, контент и футер таким образом, чтоб в Вашей обертке wrapper было 2 родительских блока

<div class="wrapper">
    <div class="header_content">
        <nav>
            Ваше меню
        </nav>
        <main>
            Ваш контент
        </main>
    </div>
    <footer>
        Ваш подвал
    </footer>
</div>

Шаг 2.
Добавляем стили

.wrapper {
min-width: 100vh; /*Задаем на всю высоту экрана*/
display: flex; /*Задаем Flexbox элемент*/
flex-direction: column; /*Определяем раcположение блоков по вертикали*/
justify-content: space-between; /*Определяем пространство блоков по краям*/
}

Если у вас есть какие либо вопросы, пишите в личку @zapilim. Будем разбирать вместе!

Коллекция 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, чтобы измерить размеры подключенной области.
- Настройка горячих клавиш.