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

Пришла пятница, а это значит - время смотреть что-то интересное.

Мир Дикого Запада (2016 — …)
Этот сериал под интересным углом освещает отношения между людьми и машинами. Роботы обслуживают посетителей парка развлечений. А развлечения в этом парке, мягко говоря, не самые безобидные. Будут ли роботы следовать заложенным в них инструкциям, или у них есть собственный сценарий развития событий? Ответы в сериале.

КиноПоиск: 8.1
IMDB: 8.7

Shapedivider — онлайн инструмент для простого создания скривлений с экспортом в SVG. Вы можете создать фон волны для своего проекта очень быстро и легко. Инструмент подойдет для разработчиков и дизайнеров.

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

Выберите правильный ответ ниже. Этот и другие вопросы по разработке можно всегда обсудить в нашем чате.

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

#JS #HTML

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

1) Vivify — это бесплатная CSS библиотека, которую вы можете использовать для анимации кнопок, изображений и многого другого.
2) Shapedivider — онлайн инструмент для простого создания скривлений с экспортом в SVG.
3) Мини-курс по JavaScript ES7-ES9 от WebDev.
4) Colormind — генератор цветовых схем, который использует машинное обучение.
5) CSS Shrink — полезный инструмент, который умеет делать онлайн-сжатие вашего CSS-кода.

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

#Лучшее

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

Настройка библиотеки:
1.Подключите CSS файл перед </head>:
<link href="/path/to/three-dots.css" rel="stylesheet">

2. Добавьте нужный класс в  div:
<div class="dot-elastic"></div>

Список всех доступных классов и их примеры можете посмотреть в демонстрации или на GitHub.

#HTML #CSS

Studio - отличный онлайн-инструмент с визуальным редактором веб-страниц с поддержкой командной работы.

Основные особенности:
- Легко обновляйте свой сайт, масштабируя новый контент для своей аудитории.
- Встроенная аналитика и поисковая оптимизация.
- Редактирование в реальном времени.
- Интегрированная среда разработки для настройки расширенных функциональных требований.

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

Какими навыками должен обладать первоклассный верстальщик в 2020 году?

Основные навыки топового верстальщика.
- Умение делать адаптивную кроссбраузерную оптимизированную вёрстку, совместимую с современными браузерами.
- Отличное владение CSS, работа с препроцессорами Sass, SCSS. Хорошее знание Flexbox и Grid.
- Работа с SVG графикой, анимацией, canvas.
- Уверенные знания Git
- Понимание методологии разбиения на блоки, такие как БЭМ или другие.
- Знание одного из фреймворков, таких как Bootstrap.
- Знание JS на уровне своей области (модальные окна, работа с анимацией и другое), а также понимание работы с jQuery.
- Понимание того, как верстаются макеты из графических редакторов Figma, Photoshop, Sketch.
- Автоматизация своей работы при помощи npm-скриптов, Autoprefixer, Gulp или Webpaсk.
- Понимание как адаптировать шаблон на CMS.
- Умение работать с шаблонизаторами, такими как PUG (Jade).

#Статьи

Webpack - это статический модульный сборщик для приложений на jаvascript. Подобные инструменты позволяют разработчикам упаковывать, компилировать и в целом организовывать все ресурсы, необходимые для проекта. В этом видео курсе Вы узнаете как настроить шаблон Webpack 4, подключите babel 7, а также разберетесь с webpack dev server. Подключите js библиотеки на примере vue.js и bootstrap, настроите loaders, узнаете как работать с препроцессорами, автопрефиксами и многое другое.

#Курсы