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
Нашли кое-что действительно интересное для тех, кто хочет создавать тренды в мире технологий. 
⚡️ South HUB — кэмп для руководителей в ИТ, который пройдет с 12 по 16 июня в Сочи. 
400 настоящих и будущих CTO соберутся на Курорте Красная Поляна, чтобы обменяться знаниями, опытом и найти партнеров. Нетворкинг начинается ещё до кэмпа: все CTO уже собрались здесь
Кэмп про профессиональное развитие с акцентом на work-life-balance. Программа включает в себя обширную конференц-часть, отдельный день спорта, серию вечеринок и детскую научно-исследовательскую конференцию. 

Где встречаемся?
На высоте 960 всесезонного горного Курорта Красная Поляна
Вся информация тут.
DevTools Tips - ресурс, на котором собраны советы по использованию панели разработчика. 

О некоторых возможностях DevTools вы возможно даже не подозревали! Например, что через нее можно ускорить или замедлить видео со страницы или что можно отлаживать CSS стили для печати, включив эмуляцию print media.

Ссылка

#инструменты
5 Headless CMS

Headless CMS - это CMS с готовым к эксплуатации API, это альтернатива WordPress, Drupal, Joomla или Битрикс.

В отличие от классической CMS, в Headless нет механизма отрисовки страниц, нет шаблонов, только инструменты и интерфейс для проектирования данных, работы с данными.

В статье рассказывается про 5 Headless CMS, которые стоит попробовать!

Ссылка

#статьи
CSS HD Gradients - это интерактивный инструмент для создания HD-градиентов, созданных с использованием современных цветовых форматов, таких как oklab, LCH, HSL, sRGB и других.

Ссылка

#css
Валидация URL

В статье представлено несколько способов валидации URL и их плюсы и минусы. Возьмите на заметку тот, который лучше всего подходит под ваши задачи!

Ссылка

#js
gridstack.js - это библиотека для создания интерактивных дашбордов с возможностью перетаскивания элементов и изменения их размеров. Она совместима React, Vue, Angular, Knockout.js.

Демо можно глянуть на сайте.

Ссылка

#инструменты
react-intersection-observer - это готовое решение для использования Intersection Observer API в React приложении, чтобы отслеживать когда элемент появляется в области просмотра и исчезает из него.

Ссылка

#react
Hapi - это простой и безопасный Node.js фрэймворк с полной готовой функциональностью для создания мощных и масштабируемых приложений. 

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

Ссылка

#nodejs
tech icons - это ресурс с логотипами популярных библиотек, инструментов, технологий в формате PNG и SVG.

Ссылка

#дизайн
Бесплатные курсы по математике

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

Ссылка

#статьи
dragjs - это JavaScript библиотека, упрощающая реализацию операций перетаскивания элементов на страницах. Она предлагает для использования: перетаскиваемые панели и различные типы ползунков. 

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

Ссылка

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

Когда-то в HTML существовал атрибут scoped для элемента style, но он устарел. Атрибут указывает, что стили применяются не ко всему документу, а только к родительскому элементу и его дочерним элементам. Элемент <style> при этом размещается не внутри элемента <head>, а внутри того родительского элемента для которого применяются стили. То есть таким образом, можно было ограничивать области видимости стилей. 

Был сделан запрос на возврат данной возможности и тогда был добавлен @scope в CSS. Поддержка браузерами пока ожидается. Но по прогнозам он должен уже появиться в Chrome 117.

А пока интересно почитать, какие проблемы поможет решить данное свойство и посмотреть примеры использования. Все это вы найдете в статье!

Ссылка

#css
Strawberry - это фронтенд фреймворк, который создает реактивность. Он делает это с нулевыми зависимостями, без шага сборки и занимает менее 4 КБ в сжатом виде.

Strawberry — это не альтернатива React, Vue и т. д. Это альтернатива Vanilla JS. Он подходит для небольших и простых приложений.

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

Ссылка

#js
Rewind UI - это библиотека UI компонентов, созданная специально для использования с React и Tailwind CSS.

Она предлагает ряд доступных, легко настраиваемых компонентов, которые можно интегрировать в любой проект React. Rewind UI поставляется с набором стилей по умолчанию, которые могут настраиваться с помощью классов Tailwind CSS.

Ссылка

#react
iconoir - это библиотека бесплатных SVG иконок. Альтернатива иконкам Noun Project, Flaticon и всем ресурсам Figma. Можно скачать понравившиеся иконки прямо с сайта или установить в качестве пакета для приложений React, React Native, Flutter и Vue.

Ссылка

#дизайн
Альтернативы GitHub Copilot

GitHub Copilot — это инструмент на основе искусственного интеллекта, созданный GitHub, который помогает разработчикам писать код быстрее и эффективнее.

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

А вот какие существуют еще альтернативы такому инструменту читайте в статье!

Ссылка

#статьи
daisyUI - cамая популярная библиотека компонентов для Tailwind CSS. 

Используя Tailwind CSS для стилизации элементов нужно писать множество классов, а с помощью этой библиотеки намного меньше. Как это работает? Советуем глянуть документацию.

Ссылка

#css
Chrono - это Javascript парсер даты из текста.

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

Например, из таких вариантов:
- 5 days ago
- 2 weeks from now 
- this Friday from 13:00 - 16.00
и других!

Ссылка

#инструменты
Editable - это фрэймворк для создания редактируемого контента в реалтайме для React. 

Штука полезная и где-то обязательно может пригодиться!

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

Ссылка

#react
Cборщики Node.js приложений

Сборщики (бандлеры) — это инструменты, которые помогают объединять и управлять модулями и зависимостями в проекте.

Конечно, одним из самых популярных является Webpack! Но существуют и другие альтернативы. Например, Parcel, Rollup, Brunch и другие.

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

Ссылка

#nodejs
iconhunt - это ресурс для поиска иконок. 

175 000 бесплатных векторных иконок! Доступны в формате PNG, SVG или можно сразу скопировать SVG код.

Ссылка

#дизайн