react-magic-motionmagically animates your componentsjam.devOne click bug
reports devs lovegsapAnimate anythingonestackEasy, simple & fast cross‑platform appspbcomponentsUI component library for React and Vue with Typescript and Tailwind- Development
- Frontend
- Design
- Tools
pbstylesBasic styles for quick prototyping- Development
- Frontend
- Design
- Tools
Tailwind DictionaryCreating a Tailwind Theme from design tokensMixin DictionaryCreating mixins from design tokens for LESS and SCSS.clsxA tiny (239B) utility for constructing className strings conditionally.Tailwind UIBeautifully designed, expertly crafted components and templates, built by the makers of Tailwind CSS. The perfect starting point for your next project.shadcn UIBeautifully designed components that you can copy and paste into your apps. Made with Tailwind CSS. Open source.Radix UIStart building your app nowHeadless UICompletely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.heroiconsBeautiful hand-crafted SVG icons, by the makers of Tailwind CSS.Tailwind CSSВсе для работы с TailwindПодборка9 ссылок- Frontend
- Tools
Frontend DeveloperStep by step guide to becoming a modern frontend developer in 2024Create a Component Library FastUsing Vite's library modevite-plugin-css-injected-by-jsA Vite plugin that takes the CSS and adds it to the page through the JSvite-plugin-lib-inject-cssInject css at the top of each chunk file in library mode using import statementNxBuild system, optimized for monorepos, with plugins for popular frameworks and tools and advanced CI capabilities including caching and distribution.StencilStencil is a library for building reusable, scalable component libraries. Generate small, blazing fast Web Components that run everywhere.sizzy.coThe browser for web developersCSS mixinsCreating native CSS mixins with @apply ruleMulti for Tailwind CSStailwindcss-multi is a plugin for Tailwind CSS that introduces the multi directive, a utility that allows you to group utility classes together.tailwind-mergeUtility function to efficiently merge Tailwind CSS classes in JS without style conflicts.Guide to CSS GridAn Interactive Guide to CSS GridDesignsStorybook addon for embedding your design preview in addon panelBunDevelop, test, run, and bundle JavaScript & TypeScript projects—all with Bun. ViteGet ready for a development environment that can finally catch up with you.TSDXZero-config CLI for TypeScript package developmentComponent CTI StructureОбъяснение CTI структуры дизайн-токенов- Design
- Frontend
- Development
Дизайн-токеныПолезные ссылки про дизайн-токены под рукойПодборка5 ссылок- Design
- Frontend
- Development
Integrating Design Tokens With TailwindИнтеграция дизайн-токенов в тему TailwindCSSDesign Tokens Format ModuleДокументация по дизайн-токенамrecoilA state management library for ReactjotaiPrimitive and flexible state management for ReactCanduNo-code UI component builder for SaaS productswunderbucket.ioTurn local folders into websitesCreate AppБыстрый конфигуратор для сборки проектаstyle-dictionaryПакет для компиляции дизайн-токенов в csszeroheightПространство для документирование дизайн-системы для всех участников продуктовых командAwesome design systemsБольшая подборка дизайн-системAmplitude с помощью GTMПошаговая инструкция: как отправить данные в Amplitude с помощью Google Tag ManagerEditorConfigКонсистентный код стайлJavaScript Rising StarsЕжегодный обзор тенденций в мире JavaScriptTailwindcssCSS frameworkStorybookИнструмент для сборки UI компонентовjamstackВсе что известно про jamstack в одном местеFavicon в 2021 годуШесть способов на любой вкусHTML рекомендацииИ наилучшие практики на русском языкеxml-sitemapsГенератор карты сайтаOverlayFigma to clean codedayjsАльтернатива Moment.jsnumeralizeНаписание числительных на русском языке с учётом пола и падежаВизуальный редактор статичного сайтаОтличное решение для сайтов без бекенда, просто удобный редактор для изменения контента на страницеCustom HighlightВозможность выделения слов в тексте без дополнительных обёрток с помощью нативного CSSSortable JSСортируемый перетаскиванием (drag and drop) спискиПробелыТаблица с пробелами, примерами, кодами и возможностью скопировать в буферТренажер для развития навыков вёрсткиЭто тренажер Ильяхова. Развивает редакторскую насмотренность, помогает лучше верстать.Принципы работы вебЗнаете ли вы, как вообще работают сайты?CORSВизуализация работы CORSbrowser 2020Описание всех возможных браузерных APIstorybook-addon-figmaПозволяет добавить пример макета прямо из фирмы для сравнения компонентовeasymoneyБиблиотека для работы с денежными значениями в JavaScript и Typescriptstrapi.ioCMS для фронтендаRipple эффектАнимация эффекта волныJAMstackКак создать свой блог используя Gatsby + Contentful + NetlifyNextjs Custom DocumentИзменение подгружаемых скриптов и вообще всего что есть теге htmlgranim.jsАнимированные градиентыПро стили наведения, фокуса и активного состоянияПодробно про каждое состояние и почему их надо разделять15 методов работы с массивамиСамое необходимое про массивы в одном местеMixpanelАльтернатива для сбора данных статистикиAmplitudeАльтернатива для сбора данных статистикиNextjsReact SSR фреймворкФреймворк для визуального программированияМодульный фреймворк для визуального программирования. Редактор узлов прямо в браузере.zeit.coПлатформа для хостинга статичных сайтов, с поддержкой SSR фреймворковNext.js + ReduxПростой пример для интеграции Redux в Next.js SPADesign tokens with FigmaКак построить работу с дизайн токенама с помощью Figma APIMoveableБиблиотека для скейла, драгенддропа и других манипуляций с объектамиСекреты использования семантической версткиСамое важное в этой статье это примеры и объяснение почему семантическая верстка лучшеСправочник CSSБольшой и понятный справочник по CSS свойствам на русскомУ верстальщика под рукойСамое необходимое для вертски в повседневном использовании Анимации и загрузкиНесколько примеров анимаций для улучшения пользовательского опытаПодборка8 ссылок- Design
- Frontend
tesseract.jsБиблиотека для распознавания текста на изображенииv8nБиблиотека для умной валидации на jsDockerizing a React AppБыстрый способ поднять CRA в докер контейнереLocalStorageПочему не стоит использоватьCSS Grid NinjaТонкости использования гридовfuzzyjsНеточная логика поиска в jsПроизводительность фронтендаРазбор важных метрик производительности. Как измерить и повлиять на них7 полезных мелочей JS7 полезных и неочевидных советовSvelteJSСтатья про новый (относительно) js фреймворкOverlay ScrollbarsПакет для замены дефолтного скрола браузераРендер большого спискаКак делать действительно огромные списки без потери скорости отрисовки11 JavaScript Animation Libraries For 2019Если лень писать анимацию самому, то всегда можно выбрать готовый вариант21 способ ускорить CSSМеньше кода всегда лучше, тут советы как это сделать5 советов как лучше писать условные конструкции в JavaScriptКак это делать в сравнении с обычными методамиЗадачки с собеседованийИнтересные задачки с собеседований, могут помочь устроиться на работу или просто быть готовымPre-Commit and Pre-Push Git HooksВозможность для проверки кода на соответствие правилам линтера и тестинга перед пушем12 концепций JavaScript, о которых нужно знатьНу не то чтобы обязательно, но лучше ознакомитьсяКак сэкономить ресурсы в браузереБольше про то как работают браузерыПонимаем замыкания в JavaScript. Раз и навсегдаВечный вопрос на собеседованиях. Стоит один раз разобраться и закрыть для себя эту темуБандл мечты с помощью WebpackПодключать только то что используется на страницеЧасовые пояса в JavaScriptКазалось бы что может быть сложного, но в JS все непростоДебажить JavaScript-код like a PROФункция console намного круче чем мне казалось, офигенные возможности для дебагаTypescript with React and ReduxКак внедрить Typescript в React приложение30 практик HTML5Создание ясного, поддерживаемого и масштабируемого кодаПоиск на JSПрокачанный поиск по текстуPrefetching Links using Service WorkersС Service Workers все становиться лучшеdropzonejsБиблиотека для создания зоны для перетаскивания файловCSS loading animationsНесколько разных и готовых анимаций для отображения загрузкиЧего мне никогда не говорили о CSSCSS это тоже язык программирования и у него есть свои особенностиТри Больших Лжи о JavaScriptСкорее не про ложь, а про устоявшиеся стереотипыhotkeys.jsБиблиотека для обработки нажатий на клавиатуруEva IconsOpen Source iconsГенератор grid layoutGrid сложная штука, генератор поможет лучше разобраться или даже сделать готовую для себя сеткуAnimate on ScrollЛегковесная библиотека для создания действий по скролуВсё (или почти всё) о пробелеПробел не так прост как кажется, особенно если причитать статьюВизуальный редакторКрасивый и удобный редакторreact-snakkeИндикатор проскроливания страницыreact-fontawesomeПакет Fort Awesome для react приложенияSCSS — немного практикиРеальные примеры в пользу использования SCSSMini searchЛегковесная библиотека для простого поиска по по тексту на JSToken-Based AuthenticationПро токены, JSON Web Tokens (JWT), аутентификацию и авторизациюЗащита JS кодаПрячем код на фронтенде от постороннихTips & Tricks for your React-Redux ApplicationКак упросить работу с ReduxФункции высшего порядкаПонятное объяснение на русском языке, от определения до использованияОтличие функций от классов в ReactЧто в итоге выбрать то?Легкий JS валидаторОчень крутой валидатор, почти для всех случаевАсинхронные генераторы в ES9Упрощение и расширение возможностей генераторовУскоряем React разработкуАлиса для VSCode для быстрой вставки типичных конструкций, вроде импорта компонентовReact Modern Web AppПриложение, придерживающееся всех современных веб-стандартовПонимание prefetchКак это вообще работает и действительно ли стоит использовать9 генераторов статичных сайтов на ReactКрутая подборка инструментов для создания легковесных статичных сайтовПринципы функционального программирования в JavaScriptНемного о том что это такое и как это можно использовать в JSВозможности ES2018Упрощение синтаксиса уже доступных возможностей JSReact Lazy Loading and SuspenseПо сути все сводиться к динамическому импортуВерстка градиента с мягким переходомОбычный линейный градиент имеет резкий переход, пример как это исправитьExpo.ioДля создания приложенийСоветы по CSSНесколько дельных советов по CSSReact.lazyРазбор и пример новых возможностей ReactВозможности JavaScriptВозможности JavaScript, о которых я не зналOpensourceНе протирайте штаны — займитесь Open Source проектамиMeta TagsПолная проверка meta tags сайтаЗамыканияЗамыкания в JavaScript для начинающихПакет для склонений и определения полаЛьвович - пакет для склонения названий городов, определения пола по имени фамилии и отчеству, склонения падежей русских имен, фамилий и отчествCogear.jsStatic websites generatorFetchМетод fetch: замена XMLHttpRequestПонимание таймеров в JavaScriptCallback-функции, setTimeout, setInterval и requestAnimationFrameСловарь терминовНаверное все возможные термины и расшифровка к нимЧто такое thisПодробно о том что такое this и как его использоватьReact. Управление рендерингомО том как можно улучшить производительность проекта на reactLocal и Session storage в ReactПросто как использовать локальное хранилище браузера в React12 вопросов и ответов по JavaScript12 ответов на достаточные простые вопросы, о которых вроде бы мало говорятПристальный взгляд на CSS архитектурыПоверхностный взгляд на построение CSS архитектуры, хотя в заголовке написано что пристальныйОсновы TypeScriptЭто наверное самые основы, но для знакомства вполнеNEWСоздание объектов через "new"Оптимизация изображенийGUI и CLI для NodejsКак тестировать версткуКак и зачем тестировать верстку?CMS для статичных сайтовВдыхает жизнь в статичные сайтыОблачный хостинг для библиотеки компонентовИнструмент должен быть удобным для больших проектов и распределенных или просто больших командАнимация в браузереCSS анимация прямо в браузереСтруктура и наименование компонентовВечный вопрос какую выбрать структуру проекта. Это один из возможных вариантовСтрелочные функции VS Обычные функцииСпойлер: никто не выиграл. Просто плюсы и минусыConsole на полнуюЕсли уж и использовать отладку через console, то на полнуюParallax footerНа чистом cssPulse effectНа чистом cssZ-indexЕще одна статья рассказывающая все о z-indexМетоды массивов и объектовМетоды массивов и объектов в JavaScript, которые заменят циклыfullstack-дизайнерДля меня идеальное самоопределениеSymbol, Iterator, GeneratorЧе это вообще такое и зачем это использоватьReact Context APIКак можно сделать смену языка или темную тему на примере работы с новым Context APIСоздание разных цветовых тем с помощью CSS переменныхПо сути не обязательно использовать именно нативные переменные, это скорее описание подходаCSS BlocksЗамена БЭМ и css modules. Эволюция лучших практикCSS — это дизайн!Почему дизайнеру полезно уметь верстатьПонимание жизненного цикла React-компонентаПри работе с react очень важно понимать жизненный цикл компонентаМатериалы по фронтендуПримеры с описанием для разных фреймворковЧетыре вопроса про БЭМЧетыре вопроса и ответы к нимСобеседование js разработчика с ответами на вопросыДоступно написано что надо знать на джуна и выше, для каждой темы есть либо описание либо ссылочки9 полезных приемов для JSВсе суть в заголовкеКурс по версткеМожно пройти бесплатно, но стоит он всего 10€Как избавиться от лишних отступов у текстаБоремся с line-height с помощью :before и :afterБиблиотека для анимации react-springВ библиотеки собраны лучшие практики из другие пакетов для анимацииScroll и scrollbarВсе что надо знать про scroll и scrollbarКак получить максимум информации о пользователеСписок открытых api для получения различной информацииCookiesВообще все что надо знать о cookieНабор компонентов antd ProДополнительный набор про компонентов для фреймворка antd для еще более быстрого прототипированияУскорение SSRИнтересный способ оптимизации скорости серверного рендерингаGoogle Page SpeedПроверка скорости загрузки страницыВалидатор HTML разметкиРасскажет о самый банальных ошибках в разметкиАнтипаттерны в ReactНе делай как все, будь лучшеПример прелоадераПочти как на медиумеКоллекция CSS снипетовТо с чем верстальщики по всему миру сталкиваются каждый деньБыстрый старт на create-react-appСтатья примечательна тем что показан полностью процесс от 0 до деплоя на статичный хостингХостинг для статичных сайтовДавно пользуюсь этим хостингом когда надо просто показать верстку, но он способен и на большееПример модального окнаУ меня в заметках был помечен как «правильный», насколько это правильно не знаю, но способ имеет право на жизньИгра на CSSХороший пример того как можно использовать CSSПодборка css градиентовМожно скачать картинкой или скопировать кодНемного про сглаживание веб-шрифтовCSS методы визуальной оптимизации шрифтовПакет для удобной верстки писемСоздатель пакета почему-то удалил все необходимое из ветки master, но github все помнитWebpack dashboardУдобный дашборд на electronjsКак работает JSРендеринг страниц и выводы по оптимизации производительностиИнструменты JS разработчикаБиблиотеки, тестирование и еще немногоАвторизация без ввода пароляАвтоподставление логина и пароляАнимация с помощью svgОчень реалистичный вариант создания несложной (а можно и сложной) анимации без регистрации и смсПро коллапс отступовПри свойстве display: block равные отступы (margin) схлопываются в один, статья про то как это работает. Лично я просто использую display: inline-block в таких случаяхБиблиотека для анимацииРазнообразные примеры анимации, жаль что в вакуумеАлгоритмы для начинающихНесколько хороших примеров на ES6Redaction. Простая работа и организация redux actionsПозволяет не использовать файл const, да и в целом меняет подход работы reduxФреймворк компонентов для reactПозволяет быстро создавать прототипы для любой панели управленияКак воткнуть react в существующий сайтИнтересная статья, такой подход позволяет итерационно переводить уже существующий сайт на react, или использовать его для отдельных частей проекта30 css селекторовПостоянно забываю как пишется :nth-child(n)Генерация jpg с помощью javascriptМощная штука, теоретически так можно кастомизировать изображения для шаринга в социальные сети и еще много чегоВерстка это не тупоХоть и написано про верстку, но актуально скорее для всех веб-разработчиковReact состояние загружаемых данныхХороший способ хранить состояние, избегая избыточностиПример react SSR с помощью parcelParcel, конечно, сомнительный инструмент, но уже есть примеры SSR для reactParcel замена webpackПроект интересный, но пока очень сырой. Возможно когда-нибудь и будет полноценной заменойКак использовать razzle с css-modulesПример, который я нашел в PR к проекту, возможно скоро не надо будет даже кастомный webpack config создаватьПакет для быстрой настройки SSR для reactМного примеров и вариантов использования, проект быстро развиваетсяСписок react starter kitsВажно что подборка от создателей reactРуководство по css gridПодробное описание гридов, после прочтения статьи можно смело начинать использоватьВарианты верстки подчеркивания ссылокКратко собраны возможные варианты подчеркивания ссылок, есть даже вариант через backgroundFont AwesomeНаверное, самый популярный и большой пак иконокСправочник HTMLБольшой и понятный справочник по HTML тегам на русскомВсе что может быть в теге <head>Описание на русском, есть ссылка на оригинал, но там тоже самое только на английском 
