Lineicons - сервис с набором крутых шрифтовых иконок, которые подойдут как для веб-проектов так и мобильных проектов. Данный сервис содержит бесплатные иконки, а так же расширенную платную версию.

Patternico - классный и полезный сервис для создания безшовного фонового изображения для Вашего проекта. Вы можете настраивать цвет фона, загружать собственные иконки и собственный backround

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

Крутая новость для студентов-разработчиков 🚀
Cтартует онлайн-марафон по разработке от ИТ компании КРОК. За три недели команда участников из 3-5 человек сможет решить реальную бизнес-задачу на Java или .NET. 
Какую?
💻 Например, создать онлайн-систему решения и проверки задач, in-memory OLAP-куб, инструмент для сбора и оценки метрик по работе с исходным кодом и многие другие. Огонь же? 🔥
Всё это с наставниками - экспертами компании. В рамках марафона пройдут вебинары и код-ревью, на которые можно зарегистрироваться отдельно без участия в решении задачи. 
📍Когда? С 20 июля по 7 августа, но сбор заявок заканчивается уже через неделю. 
📍Что нужно, чтобы присоединиться?
 Подать заявку по ссылке и пройти отбор. Участие совершенно бесплатное.

🛑 Спойлер: участие в марафоне можем оформить студентам как учебную практику (да, её можно пройти онлайн). Знаем, что круто, поэтому скорее переходи по ссылке и подавай заявку.

Помощник в виде шпаргалки с CSS триггерами.

Здесь вы найдёте некоторые свойства CSS и информацию о том, как они влияют на производительность браузерных движков.

Значения разноцветных полосок:
— Layout: перерасчет макета (синий цвет)
— Paint: прорисовка макета (зеленый цвет)
— Composite: компоновка макета (темно-зеленый цвет)

Bliss - небольшая классная библиотека, которая добавляет синтаксический сахар для Vanilla JS схожий на jQuery, делая API гораздо более приятным. В отличие от jQuery, он не влияет на сам API, а просто улучшает синтаксис, оставляя функциональность метода без изменений.

#JS

Выберите правильный ответ ниже.

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

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

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

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

1) iziModal.js - современный плагин, который позволит Вам создавать красивые модальные окна.
2) Patternico - классный и полезный сервис для создания безшовного фонового изображения.
3) Siteliner - сервис, который позволяет вам исследовать ваш сайт.
4) Khroma — инструмент, который создает палитры на основе ваших предпочтений.
5) Bulma - это бесплатный CSS-фреймворк, основанный на Flexbox.

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

#Лучшее

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

Устранение зависимости от jQuery стало возможным благодаря усовершенствованиям в интерфейсных средствах разработки и поддержке браузеров. В результате, проекты, созданные на Bootstrap 5, будут значительно легче в размерах файлов и загрузке страниц.

#Статьи

Zoomove - это плагин, разработанный с помощью jQuery, который позволяет динамически масштабировать изображения при наведении мыши, а также просматривать детали при перемещении мыши.

Настройка плагина:
1. Подключаем библиотеку

<!-- ZooMove CSS minified -->
<link rel="stylesheet" href="dist/zoomove.min.css">

<!-- jQuery CDN JS minified (must) -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- ZooMove JS minified -->
<script src="dist/zoomove.min.js"></script>

2.Теперь нужно подготовить наши изображения и показать их ZooMove.

<!-- Item image -->
<figure class="zoo-item" data-zoo-image="img/example.jpg"></figure>

<!-- Starting the ZooMove -->
<script>
$('.zoo-item').ZooMove();
</script>

ZooMove совместим с: jQuery 1.7+ в Chrome 42+, Firefox 41+, Safari 9+, Opera 29+, Internet Explorer 9+

#jQuery

Argon Dashboard - бесплатный шаблон на Bootstrap 4.

Панель инструментов Argon состоит из более чем 100 отдельных компонентов, что дает вам свободу выбора и комбинирования. Все компоненты могут иметь разные цвета, которые вы можете легко изменить с помощью файлов SASS.

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

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

#Шаблоны

Мини-курс по JavaScript ES7-ES9 от WebDev.

В данном цикле лекций будут рассмотрены основные фичи, которые появились в стандартах ES7-ES9 (ECMAScript). Будут разобраны различные методы и нововведения, которые существенно упрощают и ускоряют разработку на нативном jаvascript, как синхронном, так и асинхронном. И в этом мини курсе будут разобраны новые методы, которые были добавлены для массивов.

Что будет выведено в консоли?

Проверь свой ответ в этом посте

На канале Senior Front постоянно выходят задачки на проверку знаний в CSS и JS, интересные статьи:

Кнопка "В начало" на чистом CSS

Объект Set в ES6

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

Подписывайся, качай скиллы 💪

CSS Shrink — полезный инструмент, который умеет делать онлайн-сжатие вашего CSS-кода. Кстати, не только сжатие — можно вставить уродливо отформатированный код и получить на выходе красивый.

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

Выберите правильный ответ ниже.

Colormind — генератор цветовых схем, который использует машинное обучение. Информацию сервис может извлечь из изображений, видеороликов. Каждый день загружаются разные наборы. Сервис отлично подойдет как для верстальщиков, так и для дизайнеров!

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

Как и когда использовать ссылочные атрибуты rel="sponsored" и rel="ugc".

В настоящее время для ссылок можно использовать три атрибута: “nofollow”, “sponsored” и “ugc”, каждый из которых усиливает разное значение.

rel=”sponsored” – ссылки, связанные с рекламными материалами или платными местами размещения (обычно называются платными ссылками), следует помечать как рекламные.

rel=“ugc” – для ссылок, которые ведут на контент, созданный пользователями, например комментарии или записи форумов, рекомендуется применять атрибут ugc.

rel=”nofollow” – если вам не подходят описанные выше атрибуты, и вы не хотите, чтобы роботы Google переходили по ссылкам на вашем сайте, используйте значение nofollow.

Ссылки записываются в таком формате
<a rel="Название атрибута" href="#">Ссылка</a>

Google советует размечать платные/спонсированные ссылки с помощью атрибута “sponsored” или “nofollow”, но не “ugc”.

#Статьи

React - не безызвестная JavaScript-библиотека для создания пользовательских интерфейсов. Многие Front-End разработчики уже знают что это такое и используют в полной мере.Библиотека разработана и одновременно используется Facebook Inc.

Основные особенности:
- Декларативные представления сделают код более предсказуемым и упростят отладку.
- Основан на компонентах. Поскольку логика компонента написана на JavaScript, а не содержится в шаблонах, можно с лёгкостью передавать самые разные данные по всему приложению и держать состояние вне DOM.
- React также может работать на сервере, используя Node.js и на мобильных платформах, используя React Native.

#JS

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

Подключение библиотеки:
1. Подключите файл vivify.css перед </head>
<link href="vivify.min.css" rel="stylesheet" type="text/css"/>

2. Добавьте класс vivify к элементу, который вы хотите анимировать. Если вы хотите, чтобы ваша анимация была бесконечной, вы также можете добавить класс infinite.

#CSS