Индикатор прогресса на React и TailwindCSS

Индикатор прогресса - это отличное решение для сайтов с большим количеством контента. Индикатор позволяет отслеживать прогресс и объем оставшейся информации.
В статье подробная инструкция, как сделать такой функционал при помощи React и TailwindCSS.

👉 @sWebDev

Lettering.js

Lettering.js — дает полный контроль над текстом. Используется для анимации. С помощью плагина слово разбивается на буквы и с каждой можно работать отдельно.

👉 @sWebDev

React Suspense и React Freeze

Исследуем React Suspense и React Freeze. Что это такое и как правильно использовать узнаем в статье по ссылке.

👉 @sWebDev

Snap svg

Snap svg — JavaScript библиотека. Позволяет создавать и анимировать векторную графику в современных браузерах. Можно загружать код SVG асинхронно и запрашивать части, которые нужны, для превращения SVG файлов в спрайты.

👉 @sWebDev

Многоуровневое меню на React

Многоуровневое меню - это очень распространенный функционал во многих веб-приложениях, Поэтому, разберёмся, как его можно создать с применением React.

👉 @sWebDev

Barba.js

Barba.js — библиотека, создающая «приложение одной страницы». Компоненты сайта загружаются на странице единоразово. Иными словами — страница без перезагрузки. Переходя между вкладками ничего не прогружается и создается впечатление, что находишься на одной странице, как в мобильном приложении.

👉 @sWebDev

Привет!

Меня зовут Сергей и я Senior Fullstack-разработчик из Хельсинки.

На своём авторском канале «Будни разработчика» я выкладываю самые интересные и оригинальные находки, что помогают мне в моей работе.

Статьи, заметки, фишки, опросы с подвохом и разбор багов браузеров.

Подпишись, скучно не будет!

Tailwind CSS + Angular + Nx workspace

В источнике изучаем и настраиваем связку: Tailwind CSS с Angular в Nx workspace.

👉 @sWebDev

Owl carousel

Owl carousel — плагин для создания слайдеров. Отличается простой настройкой точек остановки слайдера. Адаптивен. Owl карусель поддерживает модульную структуру плагина. Подробный обзор по ссылке.

👉 @sWebDev

Яндекс создал обучающий канал по SQL и Базам Данных для всех, кто хочет стать специалистом в дата-сайнс.

— Полный комплект обучающих материалов

— Советы и гайды по оптимизации

— Помощь с поиском ваканский по специальности

Подписывайтесь: t.iss.one/sqltop

GSAP.js

GSAP.js или Greensock — это библиотека JavaScript для создания производительных анимаций. По сути, GSAP — манипулятор свойств объекта, который обновляет значения быстро и с высокой точностью. Примерно до 20 раз быстрее, чем jQuery. Анимацию можно останавливать, замедлять, ускорять, делать плавной. Присутствует готовый набор функций для создания кроссбраузерной анимации.

👉 @sWebDev

Vue nextTick()

Vue обновляет DOM асинхронно. Но, этот момент можно поймать используя Vue.nextTick() или this.$nextTick() . Разбираемся, как сделать это правильно в статье по ссылке.

👉 @sWebDev

Preact

Preact – это JavaScript библиотека, которая позиционирует себя как быстрая (3кб) альтернатива React с такой же ES6 API.
Обзор библиотеки доступен по ссылке.

👉 @sWebDev

Создаем собственный Twitter

В статье руководство по созданию твиттера с применением технологий:
1. Node.js (express.js + nest.js);
2. MongoDB + PostgreSQL;
3. Docker;
4. TypeScript;
5. React (Hooks и Context API);
6. Storybook.js;
7. Jest + React Testing Library + Cypress.
Все подробности по ссылке.

👉 @sWebDev

Hyperapp

Hyperapp - это единая библиотека, которая обеспечивает управление состоянием приложения (state) и иммутабельностью, как в Redux/Elm. Также, Hyperapp использует подходы функционального программирования при управлении своим состоянием.
Ознакомиться с полным обзором данной библиотеки можно в статье по ссылке.

👉 @sWebDev

5 библиотек JS, которые надо попробовать в 2022

В статье краткий обзор 5 интересных библиотек для JavaScript, с которыми стоит познакомиться в 2022 году.

👉 @sWebDev

Solid.js

Solid — это реактивная JavaScript-библиотека для создания пользовательских интерфейсов без использования виртуальной DOM. Она однократно компилирует шаблоны, превращая их в узлы реальной DOM, а благодаря тщательно спланированным механизмам обновления контента при изменении состояния приложения выполняется только тот код, который необходим для визуализации этого изменения.

👉 @sWebDev

Чем лендинг отличается от сайта и зачем он нужен? Как дизайнеры создают лендинги? Разберёмся на мастер-классе!

→ Бесплатно, 31 мая в 19:00

Говорить и показывать будут эксперты:

◾️ Ника Злобина
Коммуникационный дизайнер уже 8 лет.
Создает креативные концепции, айдентику, занимается 3D и моушн-дизайном, разрабатывает лендинги. Соосновательница дизайн-студии Sisters.
◾️ Лена Хурина
Коммуникационный дизайнер уже 7 лет
Фрилансер, работала штатным дизайнером в Borodin.Design, Brightlab, Tabor.

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

→ Зарегистрироваться на мастер-класс

Создаем блог на React и RestDB

В статье пошаговый гайд разработки собственного блога с применением React и RestDB.

👉 @sWebDev

D3.JS

Эта JavaScript библиотека работает с SVG для рендеринга графиков, диаграмм и динамической визуализации. Существует множество библиотек, помогающих создать необходимый функционал, но ни одна не выделяется так сильно как D3.js. Полный обзор возможностей по ссылке.

👉 @sWebDev