CodeRoll | Frontend

Новый синтаксис media запросов Теперь можно будет использовать операторы сравнения в media запросах в Chrome, начиная с 104 версии.  Данный синтаксис был доступен еще в Firefox 63, но для Chrome его можно назвать новым.  Такой синтаксис очень удобен для написания диапазонов.  Вместо того, чтобы писать: @media (min-width: 400px) and (max-width: 600px) {  ... } Можно использовать следующую запись:  @media (400px <= width <= 600px ) {  ... } Подробности в статье! Ссылка на статью #css

GitHub теперь в Telegram! Подписывайтесь: @github

Бесплатные книги по вебу Что почитать на досуге по вебу? Делимся подборкой бесплатных книг! В списке представлены ссылки на книги по HTML, CSS, JavaScript и другим общим темам. Материалы полезны, как для новичков, так и для опытных разработчиков.  Например, для разработчика с опытом будет интересно почитать книгу "Learning JavaScript Design Patterns". Ссылка на статью #статьи

Pictogon - это онлайн-сервис для создания интерактивных картинок.  Например, с помощью него можно создавать интерактивные карты или схемы. Сервис позволяет выделять области на картинке и добавлять надписи, которые будут отображаться при наведении или щелчке мыши. Сначала на сайте создается картинка с выделенными областями и надписями к ним, а затем всего лишь нужно встроить сгенерированный скрипт на ваш сайт! Ссылка на сайт #дизайн

Fresh 1.0 Fresh — это новый fullstack фреймворк для Deno. И недавно была выпущена его первая стабильная версия. С Fresh рендеринг происходит не на клиентской стороне. Весь объемный рендеринг и вычисления могут выполняться на сервере, а на клиенте нужно только отрисовывать небольшие UI компоненты. А это значительно влияет на производительность сайта. Подробности o Fresh читайте в статье! Ссылка на статью Ссылка на официальную страницу Fresh #nodejs #deno

Лайфхак: чтобы найти норм работу на удалёнке (или офисную) — не надо целыми днями шерстить HeadHunter и сотни других сайтов. Надо просто держать в подписках React Job. Туда напрямую обращаются лучшие работодатели со всего мира. Если вы пишете на React, вы только начинаете или уже профи в своем деле, то подписывайся на наш канал. У нас вы найдете стажировки, работу для разного уровня и рекомендации как не облажаться при трудоустройстве!

Next.js - это React фреймворк, который позволяет создавать веб-приложения с улучшенной производительностью с помощью дополнительных функций предварительного рендеринга, таких как: полноценный рендеринг на стороне сервера (SSR) и статическая генерация страниц (SSG). Next.js предоставляет: - встроенный роутер (не нужно устанавливать React Router); - оптимизацию изображений и шрифтов; - встроенную поддержку ESLint и TypeScript и многое другое! Подробнее о всех преимуществах и о том, как использовать данный фрэймворк читайте в статье! Ссылка на статью #react

Golden Ratio Typography Типографика на сайте очень важна. Если текст выглядит привлекательно и читается легко, то пользователь будет потреблять больше контента, покупать товары и услуги. Golden Ratio Typography - это генератор идеальных размеров для шрифта на основе золотого сечения. В результатах предоставляются подходящие размеры, высота и интервал для заголовков разного уровня, списков, цитат и другого. Ссылка на сайт #инструменты

Новые методы массива Клонирование или копирование - очень распространенная операция в JavaScript. На данный момент самым популярным способом копирования является использование оператора spread(...). Он очень удобен и при изменении скопированного массива, исходный не будет изменяться.  const myArray = [ 1, 2, 3]; const newArray = [...myArray]; Поскольку клонирование часто используемая операция, в новой спецификации было предложено добавить множество новых способов копирования с последующим изменением массива:  - toReversed - копирует массив, а затем переворачивает; - toSorted - копирует массив, а затем сортирует; - toSpliced - копирует массив и удаляет элементы и/или добавляет новые элементы (то же самое, что и метод splice, только без изменения исходного массива); - with - копирует массив и добавляет в него новый элемент. Подробнее читайте в статье! Ссылка на статью #js

position: sticky position: sticky имеет сейчас достаточно хорошую поддержку. Самый частый случай его использования - это создание "липкого" хедера. Но иногда случается такое, что данное свойство со значением sticky не работает. И причин этому может быть немало. Например, одна из них: Если какому-то родителю выше задан overflow, то position: sticky не будет работать.  Подробнее обо всех проблемах и как их решить читайте в статье! Ссылка на статью #css

Chrome 103 Что интересного было добавлено в Chrome 103? Например, был добавлен новый код состояния HTTP 103 Early Hints, который помогает браузеру решить, какой контент предварительно подгружать, еще до того, как страница начала загружаться. Обо всем подробно в статье! Ссылка на статью #статьи

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

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

react-speech-kit — это небольшая библиотека для работы с Web Speech API в React.  В этом пакете доступны два хука: useSpeechSynthesis для преобразования текста в речь и useSpeechRecognition для распознавания речи. В статье рассказывается, как с помощью хука useSpeechSynthesis преобразовывать текст в речь. Ссылка на статью #react

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

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

SMACSS vs. BEM Не все фанаты BEM. Если вы в разработке относительно недавно, то возможно и не слышали о других методологиях. SMACSS - это еще одна методология, помогающая с организацией кода. Аббревиатура расшифровывается, как Scalable and Modular Architecture for CSS (масштабируемая и модульная архитектура для CSS).  Базовые категории SMACSS:  - Base - в эту категорию входят правила, которые определяют внешний вид элементов по умолчанию; - Layout - категория для стилей, с помощью которых страница разделяется на секции; - Module - это повторно используемые части дизайна(меню, модальные окна и др.); - State - категория для стилей состояния; - Theme - в эту категорию входят стили, отвечающие за внешний вид макетов и модулей; В статье дается сравнение BEM и SMACSS. А на официальном сайте SMACSS можно почитать онлайн или скачать руководство по использованию данной методологии. Ссылка на статью Ссылка на официальный сайт SMACSS #css

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

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

AbortController Обычно ожидается, что результат асинхронной операции будет успешным или неудачным. Однако этот процесс также может занять больше времени, чем предполагалось. В этой ситуации логично завершить асинхронную операцию, которая заняла больше времени, чем должна, или результат которой вам не нужен.  Сделать это в Node.js было сложной задачей в течение очень долгого времени. В Node v15.0.0 появился AbortController для решения вышеуказанной проблемы.  Данная статья является руководством по AbortController и AbortSignal API. Ссылка на статью #nodejs