CodeRoll | Frontend

Cборщики Node.js приложений Сборщики (бандлеры) — это инструменты, которые помогают объединять и управлять модулями и зависимостями в проекте. Конечно, одним из самых популярных является Webpack! Но существуют и другие альтернативы. Например, Parcel, Rollup, Brunch и другие. Подробнее о них в статье. Ссылка #nodejs

Editable - это фрэймворк для создания редактируемого контента в реалтайме для React.  Штука полезная и где-то обязательно может пригодиться! С помощью него можно создавать редактируемые блоки текста, таблицы, списки, блоки кода и многое другое. Ссылка #react

Chrono - это Javascript парсер даты из текста. Он предназначен для обработки большинства форматов даты/времени и извлечения информации из любого заданного текста.  Например, из таких вариантов: - 5 days ago - 2 weeks from now  - this Friday from 13:00 - 16.00 и других! Ссылка #инструменты

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

Альтернативы GitHub Copilot GitHub Copilot — это инструмент на основе искусственного интеллекта, созданный GitHub, который помогает разработчикам писать код быстрее и эффективнее. Он предлагает варианты для автозаполнения и даже полные фрагменты кода для разработчика, когда он работает в своем текстовом редакторе. Он также может предложить улучшения существующего кода и помочь с такими задачами, как отладка и рефакторинг. А вот какие существуют еще альтернативы такому инструменту читайте в статье! Ссылка #статьи

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

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

Верстаешь? С 13 по 19 июня проводим бесплатный онлайн-интенсив по Frontend-разработке, где будем учить, как разрабатывать сайты и веб-приложения. Что будет: 1️⃣ Создание полноценного веб-сайта на HTML и CSS Мы научим тебя создавать стильные и функциональные веб-страницы с использованием самых современных технологий.  2️⃣ Оживление страницы с помощью JavaScript Узнаешь, как добавить интерактивность и динамичность в свои проекты.  3️⃣ Использование фронтенд-фреймворка Angular Узнаешь, как использовать этот мощный инструмент для создания масштабируемых и эффективных веб-приложений.  4️⃣ Подключение Backend и загрузка сайта на хостинг Мы научим тебя основам работы с Backend'ом и покажем, как развернуть свой проект на хостинге. 5️⃣ Советы по доработке проекта Получишь ценные советы от опытных разработчиков, чтобы улучшить свой проект и достичь более высокого уровня качества.  👉 Участвуй бесплатно

Strawberry - это фронтенд фреймворк, который создает реактивность. Он делает это с нулевыми зависимостями, без шага сборки и занимает менее 4 КБ в сжатом виде. Strawberry — это не альтернатива React, Vue и т. д. Это альтернатива Vanilla JS. Он подходит для небольших и простых приложений. Подробности и примеры использования на официальном сайте! Ссылка #js

ЧЕ, АЙТИШНИК, ДА? КРАСАВЧИК! Сделали для вас самую полезную подборку каналов по программированию. В ней собраны официальные русскоязычные каналы самых популярных языков. Там только топовая информация, которая потом появляется на платных курсах. Надо подписаться: @it

@scope  Когда-то в HTML существовал атрибут scoped для элемента style, но он устарел. Атрибут указывает, что стили применяются не ко всему документу, а только к родительскому элементу и его дочерним элементам. Элемент <style> при этом размещается не внутри элемента <head>, а внутри того родительского элемента для которого применяются стили. То есть таким образом, можно было ограничивать области видимости стилей.  Был сделан запрос на возврат данной возможности и тогда был добавлен @scope в CSS. Поддержка браузерами пока ожидается. Но по прогнозам он должен уже появиться в Chrome 117. А пока интересно почитать, какие проблемы поможет решить данное свойство и посмотреть примеры использования. Все это вы найдете в статье! Ссылка #css

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

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

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

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

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

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

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

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

5 Headless CMS Headless CMS - это CMS с готовым к эксплуатации API, это альтернатива WordPress, Drupal, Joomla или Битрикс. В отличие от классической CMS, в Headless нет механизма отрисовки страниц, нет шаблонов, только инструменты и интерфейс для проектирования данных, работы с данными. В статье рассказывается про 5 Headless CMS, которые стоит попробовать! Ссылка #статьи