CodeRoll | Frontend
5.04K subscribers
1.59K photos
73 videos
1 file
899 links
— Лучшее для разработчика и дизайнера / IT инструменты, курсы и книги
— Веб-разработка на JS, HTML, CSS, React, Vue,Angular

Купить рекламу: https://telega.in/c/coderoll

Чат: https://t.me/coderoll_chat

По всем вопросам пишите сюда - @yankovsky_ads
Download Telegram
Анимация во Vue

В статье рассматривается 5 лучших библиотек для создания анимаций во Vue:

- vue-kinesis
- vue-prix
- vue-fake3d-image
- v-wave
- vue-animate-onscroll

Читайте полный обзор с примерами использования в статье!

Ссылка на статью

#vue
Видеочат

Вы можете создать свой видеочат! И в этом вам поможет сегодняшняя статья. Для создания используются JavaScript, Node.js, PeerJS, WebRTC и Socket.io.

В начале статьи можно посмотреть демо создаваемого приложения.

Ссылка на статью

#js
CSS генераторы

Полезных инструментов много не бывает!

Делимся ссылкой на ресурс, на котором вы найдете множество полезных генераторов CSS кода:
- генератор для создания кнопок переключателей
- генератор теней
- генератор треугольников
- генератор полосы прокрутки
и еще много других крутых инструментов!

Ссылка на сайт

#дизайн
Словарь разработчика

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

Например, знаете ли вы, что означает registrar или crawl в вебе?

Читайте значение в статье!

Ссылка на статью

#статьи
Grid генераторы

С помощью grid генераторов можно создавать сетку в несколько кликов. Но все ли они хороши?

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

Ссылка на статью

#css
Throttling и Debouncing - это методы для повышения производительности сайтов.

Например, если повесить обработчик события на mousemove или scroll, который будет выполнять какие-то сложные вычисления, то каждый раз при срабатывании это будет влиять на производительность сайта.

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

Подробно о данных техниках с примерами использования читайте в статье.

Ссылка на статью

#js
JSON Visio - это инструмент визуализации JSON данных, который иллюстрирует их в виде схемы.
Очень удобен для просмотра структуры данных!

Ссылка на сайт

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

При создании приложения React разработчики, как правило, тратят большую часть времени на написание кода CSS и JSX, чтобы приложение выглядело привлекательным.

Для экономии времени на помощь приходят библиотеки готовых UI компонентов. Одна из таких - React Suite.

React Suite - это библиотека React компонентов, разработанных для создания серверных и корпоративных системных продуктов.

Ссылка на официальный сайт

#react
NodeMailer

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

NodeMailer — самый известный модуль, используемый для отправки и получения электронной почты из приложений NodeJS.

В статье рассказывается, как настроить этот модуль для отправки писем.

Ссылка на статью

#nodejs
Кастомные контроллы

Bun - это генератор кастомных чекбоксов и радио-баттонов.

В нем можно задать множество настроек: стили контролла, состояния hover и focus, а так же сразу посмотреть все это на реальном примере. И даже можно проверить, как элемент будет выглядеть на темном и светлом бэкграунде.

На выходе вы получаете готовый HTML И CSS!

Ссылка на сайт

#дизайн
Chrome 102

Что нового появилось в Chrome версии 102?

Например, стал доступен HTML атрибут inert. Он указывает браузеру игнорировать события пользовательского ввода для элемента, включая события фокуса.

Подробно о нововведениях читайте в статье!

Ссылка на статью

#статьи
HTML теперь в телеграм!

HTML — самый популярный язык в мире. Именно на нем написаны все сайты. Начать свой путь в программировании проще всего с изучения HTML. Тем более теперь в телеграмме появился официальный русскоязычный канал. Это первоисточник всего, что появляется в платных курсах и остальных ресурсах. Стоит подписаться!
<template>

Как часто вы используете тэг <template> в работе?

Элемент <template> предназначен для хранения разметки, невидимой и предназначенной для вставки куда-либо.

Его отличие от обычных тегов в том, что его содержимое обрабатывается особым образом. Оно не только скрыто, но и считается находящимся вообще «вне документа». А при вставке автоматически «оживает», выполняются из него скрипты, начинает проигрываться видео и другое.

Подробнее о его преимуществах и случаях использования читайте в статье.

Ссылка на статью

#html
checkiO - это ресурс для изучения и практики TypeScript и Python, где обучение проходит в игровой форме. Задания представлены в виде миссий и для перехода на следующий уровень нужно написать код.

Принять участие в игре может любой желающий. Участники демонстрируют решение задач и получают оценки от других пользователей.

Ссылка на сайт

#js
Small dev tools - это еще один полезный ресурс с различными инструментами:
- JSON декодер
- инструмент для форматирования JSON
- BASE64 декодер
- декодер и энкодер URL
и другие!

Ссылка на сайт

#инструменты
Pinia - это официально признанная библиотека управления состоянием для Vue.

Даже создатель Vue Эван Ю назвал его фактически Vuex 5

Pinia была создана Эдуардо Сан Мартином Мороте, тем же членом команды Vue, который создал Vue Router.
 
Но знаете ли вы, почему стоит использовать Pinia вместо Vuex?

В статье подробнее рассказывается о данной библиотеке и объясняется, почему она лучше Vuex

Ссылка на статью

#vue
AbortController

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

Сделать это в Node.js было сложной задачей в течение очень долгого времени. В Node v15.0.0 появился AbortController для решения вышеуказанной проблемы. 

Данная статья является руководством по AbortController и AbortSignal API.

Ссылка на статью

#nodejs
Shadow Gradients - это генератор цветных теней с градиентом. 

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

Ссылка на сайт

#дизайн
Советы по GitHub

На GitHub есть полезный функционал, о котором, вы возможно не знали!
  
Например, если зайти в какой-нибудь репозиторий на GitHub и нажать кнопку ".", то проект откроется в онлайн-редакторе VS Code.  

В статье рассказывается про 8 функций GitHub, которые могут вам пригодиться! 

Ссылка на статью

#статьи
SMACSS vs. BEM

Не все фанаты BEM.

Если вы в разработке относительно недавно, то возможно и не слышали о других методологиях.

SMACSS - это еще одна методология, помогающая с организацией кода. Аббревиатура расшифровывается, как Scalable and Modular Architecture for CSS (масштабируемая и модульная архитектура для CSS). 

Базовые категории SMACSS
- Base - в эту категорию входят правила, которые определяют внешний вид элементов по умолчанию;
- Layout - категория для стилей, с помощью которых страница разделяется на секции;
- Module - это повторно используемые части дизайна(меню, модальные окна и др.);
- State - категория для стилей состояния;
- Theme - в эту категорию входят стили, отвечающие за внешний вид макетов и модулей;

В статье дается сравнение BEM и SMACSS. А на официальном сайте SMACSS можно почитать онлайн или скачать руководство по использованию данной методологии.

Ссылка на статью

Ссылка на официальный сайт SMACSS

#css
Java5cript - это сайт, на котором собраны бесплатные источники для изучения JavaScript.
На нем предоставлены ссылки на книги, курсы, рекомендуемые видео и ресурсы для подготовки к собеседованию.

Ссылка на сайт

#js