Блоки в форме плитки на чистом CSS

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

Javascript. Основы ES6.

Отличный курс от CodeDojo по основам ES 6. JavaSctipt - это язык Интернета и, хотя еще не все функции ES6 реализованы в современных браузерах, я думаю сейчас самое время начинать использовать ES6. Уже многие перешли на новый стандарт и тебе пора!

#Курсы #JS

The Front-End Checklist - замечательный помощник фронтэндеру при разработке.

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

Сервис использует 3 уровня гибкости:

1) Зеленый круг означает, что элемент рекомендуется, но может быть опущен в некоторых конкретных ситуациях.
2) Желтый треугольник означает, что этот пункт настоятельно рекомендуется и может быть опущен в некоторых действительно особых случаях. Некоторые элементы, если будут пропущены, то могут иметь плохие последствия с точки зрения производительности или SEO.
3) Красный квадрат означает, что элемент не может быть опущен по любой причине. Вы можете вызвать дисфункцию на своей странице или проблемы с доступностью или SEO. Приоритет тестирования должен быть в первую очередь для этих элементов.

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

Easy - это бесплатный шаблон Bootstrap 4, подходящий для SaaS или целевых страниц приложения. Он построен с учетом выдающихся особенностей, которые будут эффективно привлекать и конвертировать посетителей. В частности, такие эффекты как анимации при прокрутке, классная таблица цен, интеграция видео, плавный, потрясающий слайдер и многое другое! Проверьте это и не забудьте поделиться этим инновационным шаблоном!

А еще хотим поделиться с Вами нашим каналом по веб-интерфейсам. Создан он больше для вдохновения @interfacer

#Шаблоны

SEO META в 1 клик - расширение для браузера Chrome, которое отображает все метаданные и основную информацию SEO по сайту.

Основные возможности:
— Определяет заголовок и его длину,
— Определяет описание и его длину,
— URL (и метаканонический URL тоже),
— Мета-роботы,
— Отображение заголовков в порядке их появления в HTML (H1, H2, H3, H4, H5 и H6),
— количество изображений с и без ALT,
— количество ссылок (внутренних, уникальных, ...)
— График социальных данных
— Robots.txt и sitemap.xml

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

Лучшее на канале за последнюю неделю

1) RemoveBg - классный сервис для удаления фона с изображения.
2) LanguageTool - расширение для браузера Chrome, которое корректирует грамматику и орфографию.
3) Easy - бесплатный шаблон Bootstrap 4
4) Javascript. Основы ES6 - курс от CodeDojo
5) The Front-End Checklist - замечательный помощник фронтэндеру при разработке.

Всем успешной разработки!

#Лучшее

Magic CSS3 Animations — это библиотека крутых кросс-браузерных анимаций, которые можно использовать на своем проекте в качестве привлечения внимания на каком либо моменте.

Как установить Magic CSS3 Animations.

Шаг 1.
Скачиваем архив с библиотекой. Загружаем его на свой проект и подключаем файл перед закрывающим тегом </head>

<link rel="stylesheet" href="yourpath/magic.min.css">

Шаг 2.
Для необходимого блока добавляем класс основной класс magictime и класс самой анимации, например puffIn. В итоге должно получится так

<div class="magictime puffIn">Ваш блок</div>

#Библиотека

Get Waves - отличный сервис генерации непрерывной svg-волны – можно разнообразить границу футера или какого либо блока. Отдельно для дизайнеров можно сделать интеграцию в Figma.

Sync - это бесплатный шаблон для сайта целевой страницы HTML Bootstrap для мобильных приложений, созданный для того, чтобы вы могли легко представить мобильные приложения онлайн-аудитории и убедить посетителей стать новыми пользователями.

Шаблон построен на Bootstrap 4, HTML / CSS и JS, он содержит слайдеры изображений с большими превью лайтбоксов для скриншотов, текстовые слайдеры для отзывов, лайтбоксы для дополнительных деталей, дополнительные страницы и рабочую контактную форму.

Sync имеет сдержанный, но стильный дизайн в легких тонах с серым фоном и красочными акцентами, которые подчеркивают ваш контент и создают незабываемые впечатления для посетителей.

Vue.js с нуля

Короткий курс от .dev о том, что такое Vue.js, и как используя Data Binding, благодаря чему легко можем добавить на страницу интерактивный текст. В курсе вы узнаете как легко погрузится в этот замечательный фреймворк с открытым исходным кодом.

#Vue

IKONS - иконки для дизайнеров и разработчиков.

Созданные вручную масштабируемые векторные иконки для дизайнеров и разработчиков.
Этот пакет содержит 300 пользовательских значков в форматах SVG, AI, ESP, PSD, CSH и PNG.
Все иконки бесплатны для личного и коммерческого использования.

Что такое якорные ссылки и для чего они нужны?
Якорные ссылки помогут направить посетителей в нужный раздел сайта.
Когда посетитель сайта нажимает на элемент, к которому добавлена ссылка на якорь, он автоматически переносится в ту часть страницы, где был добавлен якорь.

Как создать якорную ссылку?
Задаем ссылке через хэштег ссылку такого вида

<ul class="link_box">
<li><a href="#link">Ссылка</a></li>
<li><a href="#link2">Ссылка</a></li>
<li><a href="#link3">Ссылка</a></li>
<li><a href="#link4">Ссылка</a></li>
</ul>
Затем, необходимо разделу или блоку до которого надо прокрутить добавляем id с таким же именем, как href у ссылки, только уже без хэштега. Каждый id должен соответствовать своей ссылке

<div id="link">Раздел</div>
<div id="link2">Раздел</div>
<div id="link3">Раздел</div>
<div id="link4">Раздел</div>

Как настроить плавную анимацию на JS читайте в полной статье.

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

Проверьте, соответствует ли мобильная версия вашего сайта следующим пунктам:
- Информация отображается корректно как в книжной, так и в альбомной ориентации;
- Все кликабельные элементы работают;
- Отсутствуют тяжелые изображения, которые замедляют загрузку страницы;
- На сайте нет ничего, связанного с Flash;
- Нет всплывающих окон, которые перекрывают полстраницы;
- Нигде не задействована горизонтальная прокрутка;
- Контактный номер кликабельный или его хотя бы можно скопировать;
- Поля в форме регистрации короткие и простые, отключена функция автозаполнения (часто может подтягиваться некорректная информация);
- Все кнопки сделаны с помощью CSS, нет кнопок-изображений;
- Размер картинок меняется автоматически в зависимости от типа устройства;
- Есть возможность совершить покупку в один клик.

CSS Box shadow Generator - еще один классный, интуитивно понятный сервис генерации теней для ваших блоков. При помощи ползунков можно выставить позицию, масштаб, прозрачность, положение вашей тени и сразу же она отображается на экране.

Как подключить собственные шрифты к своему проекту.

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

#CSS

Анимированный прелоадер для сайта на чистом CSS.

Страница любого сайта или веб-приложения не загружается мгновенно. На загрузку и отображение страницы необходимо некоторое время. При этом страница при её загрузке может видоизменяться. Обычно это происходит при загрузке стилей, шрифтов, картинок. Чтобы этот не привлекательный момент скрыть от пользователя, можно на время загрузки страницы отобразить пользователю какой-нибудь анимированный прелоадер. А после того, как страница полностью загрузится его убрать. Основная цель прелоадера — это улучшить впечатление пользователя о сайте.

#HTML_CSS

AOS — это современная библиотека, которая способна менять позиции элементов при скролле. Богатый функционал, есть возможность создавать свои анимации.

Инструкция по установке и настройке AOS
Рассмотрим на примере подключения через CDN

Шаг 1.
Подключить перед закрывающим тегом </head> CSS файл
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

Перед закрывающим тегом </body> подключить JS файл
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

Шаг 2.
Выполнить инициализацию библиотеки. Перед закрывающим тегом </body> добавить
<script>
AOS.init();
</script>

Шаг 3.
Добавляем анимацию для нашего блока. Просто добавьте к блоку data-атрибут c названием анимации
<div data-aos="fade-up-right"></div>

#JS #HTML_CSS

У нас новая рубрика, давайте не только обучаться и работать, но и отдыхать. Теперь, каждую пятницу, будем что то рекомендовать для проведения личного досуга в выходные. Но не просто проведения. а конечно c айтишным упором. И открывает эту пятницу фильм.

Игра в имитацию (2014)

1941 год. Английскому математику Алану Тьюрингу поручено расшифровать секретный код Третьего рейха – "Энигма". Тьюринг действует по поручению Британской разведки в центре, специализирующемся на взломе шифров и кодов. Для выполнения сверхсекретного задания здесь собрана целая команда талантливых ученых, которым предстоит создать первый в мире компьютер.

КиноПоиск: 7.6
IMDB: 8.0

Анимированный скролл на чистом CSS

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

#HTML_CSS

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

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

Лучшее на канале за последнюю неделю.

1) IKONS - иконки для дизайнеров и разработчиков.
2) AOS — это современная библиотека, которая может менять позиции элементов при скролле.
3) Magic CSS3 Animations - библиотека крутых кросс-браузерных анимаций.
4) Vue.js с нуля
5) Анимированный прелоадер для сайта на чистом CSS.

Всем успешной разработки!

#Лучшее