column-rule

Если верстка состоит из колонок и между ними нужен разделитель, есть очень простой способ их создать - это свойство column-rule!

column-rule - это краткая форма записи для column-rule-width, column-rule-style, и column-rule-color, с помощью которых задаются стили для разделителя.

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

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

#css

Шпаргалка GSAP

GSAP - это высокопроизводительная JavaScript библиотека анимации.

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

Удобно иметь под рукой!

Ссылка на шпаргалку

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

React-Responsive-Carousel — это npm пакет, используемый в React приложениях для создания карусели изображений или видео.

Хороший и быстрый вариант для создания карусели, адаптированной под все экраны!

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

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

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

#react

Fast Node Manager

Иногда для проектов требуются разные версии Node.js.
Часто возникают ошибки или проект не собирается по причине того, что на компьютере может быть уже самая последняя версия ноды, а проект был написан на одной из предыдущих.

Fast Node Manager - это менеджер версий Node.js, написанный на Rust. С помощью него вы можете устанавливать различные версии и удобно переключаться между ними.

В статье рассказывается, как использовать Fast Node Manager.

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

#nodejs

Pebble - это коллекция бесплатных стильных иконок. Они доступны в форматах PNG и SVG, а так же в качестве React компонентов, построенных с помощью SVGR.

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

#дизайн

Шорткаты Chrome

Шорткаты или горячие клавиши упростят вашу жизнь и ускорят работу в самом часто используемом браузере — Google Chrome. В статье дается список комбинаций для Windows, Linux и MacOS.

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

#статьи

Задержка анимации

А знали ли вы, что значение animation-delay может быть отрицательным? Это помогает сделать пошаговую анимацию более естественной.

В сегодняшней статье как раз показывается показывается пример использования отрицательной задержки анимации.

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

#css

Стрелочные функции

Стрелочные функции стали широко используемыми разработчиками при написании кода. Они предоставляют очень удобный и компактный синтаксис.

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

О всех недостатках и случаях, читайте подробнее в статье.

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

#js

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

Благодаря этому генератору, вы можете больше сконцентрироваться на контенте, так как весь функционал уже готов.

Docusaurus предлагает расширенные функции, такие как: управление версиями, i18n, поиск по сайту и настройка тем.

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

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

Remotion - это библиотека для создания видео в React приложениях. Она позволяет создавать визуальные эффекты с помощью canvas, CSS, SVG и WebGL и объединять их в видео. 

Простыми словами, используя Remotion, вы cможете создавать видео с помощью кода! 

Советуем ознакомиться с документацией, чтобы понять, как это работает.
  
Ссылка на официальный сайт

#react

3D карусель

Делимся ссылкой на крутую 3D карусель с эффектом вращения по кругу.

Сохраняйте в закладки!

Ссылка на CodePen

#дизайн

NGINX

Как фронтенд-разработчику, вам будет полезно знать что такое NGINX.

Данная аббревиатура произносится, как "энджин икс" ("engine X"), а не так, как привыкли произносить многие - "энгинкс".

Если вкратце, то NGINX - это веб-сервер, который может быть использован в качестве обратного прокси, балансировщика нагрузки, почтового прокси и HTTP-кэша, разработанный Игорем Сысоевым.

Более подробно о принципе его работы читайте в статье.

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

#статьи

Эффект печатающей машинки

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

В статье представлено несколько демо с реализацией:
- на чистом CSS;
- c помощью CSS и JavaScript;
- с помощью библиотек.

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

#css

Сортировка по дате

Часто на практике возникает задача: с бэкэнда приходит набор данных, которые нужно отсортировать по дате.

Как это реализовать в JavaScript читайте в статье.

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

#javascript

Preline - это набор готовых UI компонентов, основанный на Tailwind СSS. 

В вашем распоряжении более 250 компонентов, которые можно использовать в React, Vue и HTML. Все компоненты имеют вариант для темной цветовой темы, что упрощает создание функционала переключения тем.

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

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

Начинать что-то с нуля страшно, особенно если это путь в новую профессию. Но на самом деле у вас уже есть опыт, который можно применить!  
 
Яндекс Практикум проводит день открытых дверей. На нём вы поймёте, как ваш опыт пригодится в поиске работы в IT. 
→ Бесплатно, 23 августа в 18:00 
 
Во встрече будет два блока:  
◾️ Круглый стол с выпускниками Практикума. 
Ребята расскажут, как они прошли путь до новой профессии. Как учились с нуля, как долго искали работу, что из их опыта помогало, а что мешало. 
 
◾️ Упражнение на выбор IT-профессии от карьерного консультанта. 
Карьерный специалист Мария Оборина даст алгоритм по поиску профессии, которая вам по душе. Она поможет: 
— оценить прошлый опыт и понять, как использовать его в новой работе; 
— определить, что для вас важно в работе, 
— наложить эти данные на разные IT-профессии и выбрать подходящую; 
— определить, насколько востребованы такие специалисты. 
 
В финале встречи выпускники и Мария ответят на вопросы гостей. 
 
→ Узнать больше и зарегистрироваться

useRunOnce - это React хук который запускает функцию один раз при монтировании компонента. 

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

В статье объясняются распространенные случаи использования useRunOnce и когда его не следует использовать.

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

#react

Эффекты для курсора

Создание эффекта для курсора при его передвижении - это хороший способ добавить сайту изюминку.

Делимся ссылкой на коллекцию крутых эффектов. На сайте представлены демо, а как добавить понравившийся вариант в свой проект рассказано в документации!

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

#дизайн

DNS (Domain Name System — система доменных имен) - технология, которая предоставляет браузеру возможность находить конкретный сайт по его имени с помощью DNS-серверов.

У каждого подключенного к интернету устройства есть свой номер, который на профессиональном языке называется IP-адресом. Запомнить эти наборы цифр сложно, поэтому придумали DNS технологию, которая связывает домен с IP-адресом. Часто DNS сравнивают с телефонной книгой, где записаны контакты (доменные имена) и номера телефонов (IP-адреса).

В этой статье рассказывается о внутренностях DNS: различных компонентах, участвующих в обработке DNS-запроса и какую функцию каждый из них выполняет.

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

#статьи

-webkit-box-reflect

Реально ли создать отражение элемента всего лишь с помощью одного CSS свойства? Да!

-webkit-box-reflect предоставляет эту возможность.

Хотя Firefox не поддерживает данное свойство. И для похожего эффекта рекомендуется использовать функцию element(). Но все же с помощью webkit-box-reflect можно создавать очень крутые эффекты. Примеры смотрите в статье.

Совместимость с браузерами можно глянуть тут.

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

#css

метод startsWith

Существует много способов для того, чтобы проверить, что строка начинается с определенного символа:
- метод indexOf; 
- метод substring;
- регулярное выражение;  

А также существует метод специально предназначенный для этого! startsWith помогает определить, начинается ли строка с символов переданных в качестве аргумента, возвращая true или false. 

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

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

#js