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
Сортировка по дате

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

Как это реализовать в 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
elevator.js - это библиотека для создания прокрутки наверх по клику на кнопку. Особенность ее в том, что она создает иллюзию подъема наверх, как будто на лифте, да еще и в сопровождении соответствующей мелодии.

Советуем глянуть демо на сайте!

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

#инструменты
React Just Parallax - библиотека React для создания параллакс эффекта при прокрутке и при движении мыши.

Она написана на TypeScript, весит мало, работает молниеносно и проста в использовании.

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

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

#react
Passport - это промежуточное программное обеспечение для аутентификации для Node.js. Оно поддерживает аутентификацию с использованием имени пользователя и пароля, Facebook, Twitter и многого другого.

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

#nodejs
fffuel - это коллекция бесплатных генераторов для создания уникальных фонов, градиентов и декоративных элементов в формате SVG.

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

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

#дизайн
Именование коммитов

Коммиты отражают историю репозитория, а также предоставляют информацию другим о том, какая работа была выполнена, что было исправлено или добавлено. Поэтому очень важно писать для них ясные и понятные сообщения.

Кстати, существует единое соглашение (Conventional Commit) по тому, как писать коммиты.

В статье как раз рассказывается о правилах из данного соглашения и примерах хороших и плохих коммитов.
 
Ссылка на статью

#статьи
Псевдоселектор :modal

Псевдоселектор :modal позволяет выбирать модальные элементы.

Два типа элементов в настоящее время классифицируются как :modal:
- <dialog>, использующий метод showModal;
- элементы, находящиеся в полноэкранном режиме;

Поддержка пока еще недостаточно хорошая, но :modal поддерживается уже последними версиями Chrome, Safari, Firefox и Edge. Ее уровень можно глянуть тут.

А подробнее об его использовании читайте в статье.

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

#css
JavaScript API, о которых вы не знали

В статье описываются наименее известные, но чрезвычайно полезные API, такие как:
- Page Visibility API 
- Web Share API 
- Broadcast Channel API 
- Internationalization API

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

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

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

#js
ZincSearch — поисковой движок, выполняющий полнотекстовое индексирование. Это альтернатива Elasticsearch, которая требует меньше ресурсов и соответственно легче по весу.

Подробная информация о нем на официальном сайте!

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

#инструменты
React Hook Form - это библиотека для создания производительных, гибких и расширяемых форм.

Она поддерживает встроенную валидацию, очень мало весит и имеет хорошую производительность. React Hook Form сводит к минимуму количество повторных перерисовок и минимизирует вычисления валидации.

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

#react
Gradient Text Generator - это генератор градиентов для текста. Для превью можно сразу ввести необходимый текст и задать в настройках цвета. На выходе генерируется готовый CSS код.

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

#дизайн
<input type="number"/>

Семантически правильно использовать <input type="number"/> для полей, где вводятся числа.
Но оказывается, что этот HTML-элемент имеет некоторые особенности. Например, когда поле содержит недопустимое значение, то при его извлечении, вы получаете пустую строку.

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

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

#статьи
CSS Puzzle

Все знают, что смысл игры Puzzle собрать картинку из фрагментов по образцу.

Автор этого CodePen реализовал ее на чистом CSS. Удивительно, что фрагмент встает только на свое место и никакое другое. Это тот случай, когда возможности CSS поражают!

Ссылка на CodePen

#css
South Hub — IT-кэмп в Сочи для СТО и тех, кто хочет ими стать  
Когда? 
6 – 8 октября 
Где? 
Красная Поляна, Сочи 
Зачем? 
Подняться на уровень выше. Профессионально и физически.  
 
В отеле Novotel Congress соберутся 400 IT-руководителей, тех директора и CEO. На протяжении 3-х дней 45 спикеров будут делиться с участниками своим опытом и мыслями о будущем отрасли в формате лекций и бесконечного нетворкинга.  
Помимо конференц-части гостей ждут зрелищные спортивные турниры в баскетбол, FIFA 23 PS 5 и Го, хайкинг по горам, утренние пробежки, много неформального общения, а также вечеринка на закате на высоте 2 200 метров. 
Все подробности о кэмпе можно найти на сайте:  
https://i.southhub.ru/zhNMv