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

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

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

По всем вопросам пишите сюда - @yankovsky_ads
Download Telegram
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
👍1👎1
Fast Node Manager

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

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

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

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

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

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

#дизайн
👍2
Шорткаты Chrome

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

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

#статьи
Задержка анимации

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

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

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

#css
👍2
Стрелочные функции

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

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

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

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

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

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

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

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

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

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

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

#react
👍4
3D карусель

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

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

Ссылка на CodePen

#дизайн
👍5
NGINX

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

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

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

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

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

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

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

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

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

#css
3
Сортировка по дате

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

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

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

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

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

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

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

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

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

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

#react
👎7
Эффекты для курсора

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

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

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

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

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

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

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

#статьи
👍2
-webkit-box-reflect

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

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

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

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

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

#css
👍2
метод startsWith

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

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

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

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

#js
👍3👎2