Amazing Tab Bar (Animated) - это не очередные вкладки! Это небольшой набор плавных анимаций для ваших табов. Забираем в коллекцию!

#codepen

CSS clip-path maker - простой онлайн-инструмент для обрезки картинок по заданному трафарету.

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

Tornis - представляет собой минималистичную библиотеку JavaScript, которая отслеживает состояние окна просмотра вашего браузера, позволяя вам реагировать, когда что-то меняется.

#javascript

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

1) Amazing Tab Bar (Animated) - небольшой набор плавных анимаций для ваших табов. 
2) Компоненты Tailwind 2.0 UI.
3) MVP.css - минималистичная таблица стилей для HTML-элементов.
4) Все про семантическую разметку сайта.
5) Tornis - представляет собой минималистичную библиотеку JavaScript, которая отслеживает состояние окна просмотра вашего браузера.

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

#Лучшее

Next.js - фреймворк React, который имеет гибридный статический и серверный рендеринг, поддержка TypeScript, интеллектуальное связывание, предварительная выборка маршрута и многое другое.

#react

Random Password Generator - реализация генератора случайно созданных паролей с красивой стилизацией. Забираем в коллекцию!

#codepen

Responsively - инструмент для одновременной проверки внешнего вида его сайта на разных устройствах. Имеет более 30 встроенных профилей, охватывающих все основные устройства.

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

404 Page - реализация страницы с 404 ошибкой(страница не найдена), которая содержит эффект параллакса. Забираем в коллекцию!

#codepen

Подборка ресурсов от нашего подписчика с бесплатными мокапами.

1) https://www.ls.graphics
2) https://smartmockups.com
3) http://mockuuups.studio
4) http://psdrepo.com
5) https://themockup.club
6) https://mockups-design.com
7) https://www.mockupworld.co
8) https://graphicburger.com

#графика

Pfpmaker -онлайн инструмент для быстрого создания аватарок. Измените цвета, фон и тени до совершенства. Фон удаляется автоматически.

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

Propeller.js - библиотека JavaScript для поворота элементов с помощью мыши или сенсорных жестов. 

Propeller использует композицию requestAnimationFrame и GPU для повышения производительности. Он также совместим с сенсорными устройствами. Есть поддержка jQuery.

#javascript #jquery

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

#vue

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

1) Random Password Generator - реализация генератора случайно созданных паролей с красивой стилизацией.
2) Подборка ресурсов с бесплатными мокапами.
3) Propeller.js - библиотека JavaScript для поворота элементов с помощью мыши или сенсорных жестов. 
4) Responsively - инструмент для одновременной проверки внешнего вида его сайта на разных устройства.

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

#Лучшее

Instant.page - использует своевременную предварительную загрузку, предварительно загружает страницу прямо перед тем, как пользователь нажимает на нее.

#javascript

TMDb - известный API, который предоставляет информацию по конкретным шоу, фильмам, актерам, сериалам. Используя изображения, не защищенные авторскими правами, вы действительно можете создать отличное приложение для поклонников своих любимых шоу.

#api

Отличный способ плавной прокрутки ссылки-якоря c учетом фиксированного меню на JS.

document.querySelectorAll('a[href^="#"').forEach(link => {

link.addEventListener('click', function(e) {
e.preventDefault();

let href = this.getAttribute('href').substring(1);

const scrollTarget = document.getElementById(href);

const topOffset = document.querySelector('.menu').offsetHeight;
// const topOffset = 0; // если не нужен отступ сверху
const elementPosition = scrollTarget.getBoundingClientRect().top;
const offsetPosition = elementPosition - topOffset;

window.scrollBy({
top: offsetPosition,
behavior: 'smooth'
});
});
});

Метод Window.scrollBy() имеет параметр top в котором мы укажем количество пикселей, на сколько нам необходимо прокрутить страницу. От общей высоты документа отнимем высоту навигации и получим необходимое смещение в пикселях по оси Y.

#javascript

Подготовили для Вас перевод статьи 13 useful JavaScript array tips and tricks you should know

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

#javascript

Supabase UI - это библиотека компонентов пользовательского интерфейса высокого уровня, ориентированная на быстрое и эффективное создание красивых приложений. Пользовательский интерфейс Supabase разработан для использования с служебными классами Tailwind CSS.

#react

ApostropheCMS - это мощная и гибкая платформа для создания веб-сайтов для веб-агентств, SaaS-компаний, высшего образования, предприятий и многого другого.

#cms

Upscale - мгновенно увеличивайте разрешение любого рисунка или фотографии. Upscale не увеличивает ваши пиксели - он увеличивает ваше изображение. Технология анализирует ваше изображение и создает совершенно новые пиксели.

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

Гайд по HTML-элементам, которые можно использовать в каждом проекте.

В данной статье автор взял следующий набор элементов: header, nav, main, section, article, aside, address, и показал случаи, когда можно их использовать.

#статьи