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
Валидация 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 код.

Ссылка

#дизайн
Расширения Chrome для разработчиков

В статье представлено 10 AI Chrome расширений, которые помогут оптимизировать рабочий процесс, повысить производительность и писать более качественный и чистый код.

Ссылка

#статьи
Spruce CSS - это низкоуровневая, легкая по весу и современная система дизайна CSS, построенная на Sass. Благодаря минималистичному дизайну компоненты смотрятся очень стильно. 

Берите на заметку для своего следующего проекта!

Ссылка

#css
Elevator Saga - это игра, задачей которой является запрограммировать движение лифтов, написав код на JavaScript.

Проверьте себя на сообразительность и знание JavaScript!

Ссылка

#js
phind - это AI поисковая система для разработчиков. Можно задать вопросы про то, как работает определенный код или как задать какие-то настройки для приложения и многое другое.

Что круто на этом ресурсе, так это то, что помимо ответа показываются ресурсы откуда информация.

Ссылка

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