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

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

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

По всем вопросам пишите сюда - @yankovsky_ads
Download Telegram
NodeMailer

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

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

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

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

#nodejs
June 11, 2022
June 12, 2022
Chrome 102

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

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

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

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

#статьи
June 13, 2022
HTML теперь в телеграм!

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

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

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

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

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

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

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

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

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

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

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

#инструменты
June 16, 2022
June 17, 2022
June 18, 2022
June 19, 2022
Советы по GitHub

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

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

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

#статьи
June 20, 2022
SMACSS vs. BEM

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

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

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

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

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

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

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

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

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

#js
June 22, 2022
PixiJS — это библиотека рендеринга, которая позволяет создавать богатую интерактивную графику, кросс-платформенные приложения и игры без необходимости углубляться в WebGL API или разбираться с совместимостью браузеров и устройств.

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

#инструменты
June 23, 2022
react-speech-kit — это небольшая библиотека для работы с Web Speech API в React. 

В этом пакете доступны два хука: useSpeechSynthesis для преобразования текста в речь и useSpeechRecognition для распознавания речи.

В статье рассказывается, как с помощью хука useSpeechSynthesis преобразовывать текст в речь.

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

#react
June 24, 2022
REST vs GraphQL  

С момента своего появления GraphQL завоевал мир веба как альтернатива REST API.

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

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

Ссылка на статью
June 25, 2022
Pagify – этот онлайн-инструмент обещает превратить Google-документ в сайт.

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

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

#дизайн
June 26, 2022
June 27, 2022
position: sticky

position: sticky имеет сейчас достаточно хорошую поддержку.

Самый частый случай его использования - это создание "липкого" хедера. Но иногда случается такое, что данное свойство со значением sticky не работает. И причин этому может быть немало.

Например, одна из них:
Если какому-то родителю выше задан overflow, то position: sticky не будет работать. 

Подробнее обо всех проблемах и как их решить читайте в статье!

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

#css
June 28, 2022
Новые методы массива

Клонирование или копирование - очень распространенная операция в JavaScript. На данный момент самым популярным способом копирования является использование оператора spread(...). Он очень удобен и при изменении скопированного массива, исходный не будет изменяться. 

const myArray = [ 1, 2, 3];
const newArray = [...myArray];

Поскольку клонирование часто используемая операция, в новой спецификации было предложено добавить множество новых способов копирования с последующим изменением массива: 
- toReversed - копирует массив, а затем переворачивает;
- toSorted - копирует массив, а затем сортирует;
- toSpliced - копирует массив и удаляет элементы и/или добавляет новые элементы (то же самое, что и метод splice, только без изменения исходного массива);
- with - копирует массив и добавляет в него новый элемент.

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

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

#js
June 29, 2022
Golden Ratio Typography

Типографика на сайте очень важна. Если текст выглядит привлекательно и читается легко, то пользователь будет потреблять больше контента, покупать товары и услуги.

Golden Ratio Typography - это генератор идеальных размеров для шрифта на основе золотого сечения.

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

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

#инструменты
June 30, 2022