Logotype

Полезные ссылки

SVGitoOnline SVG optimizer by Sketch Master
  • Design
  • Frontend
  • Tools
OverAPICollection of cheat sheets for programming languages, frameworks and tools
  • Frontend
  • Development
UI kit и дизайн-системыИнструменты и библиотеки для сборки, документации и развития UI kit и дизайн-систем
    Подборка10 ссылок
  • Frontend
  • Design
  • Tools
От идеи до библиотеки компонентовПодборка про создание, сборку, стили и документацию библиотек компонентов
    Подборка9 ссылок
  • Development
  • Frontend
  • Tools
react-magic-motionmagically animates your components
  • Development
  • Tools
  • Frontend
jam.devOne click bug reports devs love
  • Development
  • Tools
  • Frontend
gsapAnimate anything
  • Development
  • Frontend
  • Tools
onestackEasy, simple & fast cross‑platform apps
  • Development
  • Frontend
  • Tools
pbcomponentsUI 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 tokens
  • Development
  • Frontend
  • Tools
Mixin DictionaryCreating mixins from design tokens for LESS and SCSS.
  • Development
  • Frontend
  • Tools
clsxA tiny (239B) utility for constructing className strings conditionally.
  • Frontend
  • Tools
Tailwind UIBeautifully designed, expertly crafted components and templates, built by the makers of Tailwind CSS. The perfect starting point for your next project.
  • Frontend
  • Design
  • Tools
shadcn UIBeautifully designed components that you can copy and paste into your apps. Made with Tailwind CSS. Open source.
  • Frontend
  • Design
  • Tools
Radix UIStart building your app now
  • Frontend
  • Design
  • Tools
Headless UICompletely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
  • Frontend
  • Tools
heroiconsBeautiful hand-crafted SVG icons, by the makers of Tailwind CSS.
  • Frontend
  • Design
  • Tools
Tailwind CSSВсе для работы с Tailwind
    Подборка9 ссылок
  • Frontend
  • Tools
Frontend DeveloperStep by step guide to becoming a modern frontend developer in 2024
  • Frontend
Create a Component Library FastUsing Vite's library mode
  • Development
  • Frontend
vite-plugin-css-injected-by-jsA Vite plugin that takes the CSS and adds it to the page through the JS
  • Development
  • Tools
  • Frontend
vite-plugin-lib-inject-cssInject css at the top of each chunk file in library mode using import statement
  • Development
  • Tools
  • Frontend
NxBuild system, optimized for monorepos, with plugins for popular frameworks and tools and advanced CI capabilities including caching and distribution.
  • Development
  • Tools
  • Frontend
StencilStencil is a library for building reusable, scalable component libraries. Generate small, blazing fast Web Components that run everywhere.
  • Development
  • Tools
  • Frontend
sizzy.coThe browser for web developers
  • Development
  • Frontend
  • Tools
CSS mixinsCreating native CSS mixins with @apply rule
  • Development
  • Frontend
Multi 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.
  • Development
  • Frontend
  • Tools
tailwind-mergeUtility function to efficiently merge Tailwind CSS classes in JS without style conflicts.
  • Development
  • Frontend
  • Tools
Guide to CSS GridAn Interactive Guide to CSS Grid
  • Frontend
DesignsStorybook addon for embedding your design preview in addon panel
  • Development
  • Tools
  • Frontend
BunDevelop, test, run, and bundle JavaScript & TypeScript projects—all with Bun.
  • Development
  • Tools
  • Frontend
ViteGet ready for a development environment that can finally catch up with you.
  • Development
  • Frontend
  • Tools
TSDXZero-config CLI for TypeScript package development
  • Development
  • Frontend
  • Tools
Component CTI StructureОбъяснение CTI структуры дизайн-токенов
  • Design
  • Frontend
  • Development
Дизайн-токеныПолезные ссылки про дизайн-токены под рукой
    Подборка9 ссылок
  • Design
  • Frontend
  • Development
Integrating Design Tokens With TailwindИнтеграция дизайн-токенов в тему TailwindCSS
  • Design
  • Frontend
Design Tokens Format ModuleДокументация по дизайн-токенам
  • Design
  • Frontend
recoilA state management library for React
  • Frontend
  • Tools
jotaiPrimitive and flexible state management for React
  • Frontend
  • Tools
CanduNo-code UI component builder for SaaS products
  • Design
  • Tools
  • Frontend
wunderbucket.ioTurn local folders into websites
  • Tools
  • Frontend
  • Design
Create AppБыстрый конфигуратор для сборки проекта
  • Frontend
  • Tools
style-dictionaryПакет для компиляции дизайн-токенов в css
  • Design
  • Frontend
  • Tools
zeroheightПространство для документирование дизайн-системы для всех участников продуктовых команд
  • Tools
  • Frontend
  • Design
Awesome design systemsБольшая подборка дизайн-систем
  • Design
  • Frontend
  • Tools
Amplitude с помощью GTMПошаговая инструкция: как отправить данные в Amplitude с помощью Google Tag Manager
  • Tools
  • Frontend
EditorConfigКонсистентный код стайл
  • Tools
  • Frontend
JavaScript Rising StarsЕжегодный обзор тенденций в мире JavaScript
  • Frontend
  • Tools
TailwindcssCSS framework
  • Design
  • Tools
  • Frontend
StorybookИнструмент для сборки UI компонентов
  • Tools
  • Frontend
  • Design
jamstackВсе что известно про jamstack в одном месте
  • Frontend
Favicon в 2021 годуШесть способов на любой вкус
  • Frontend
HTML рекомендацииИ наилучшие практики на русском языке
  • Frontend
xml-sitemapsГенератор карты сайта
  • Tools
  • Frontend
OverlayFigma to clean code
  • Tools
  • Design
  • Frontend
dayjsАльтернатива Moment.js
  • Frontend
numeralizeНаписание числительных на русском языке с учётом пола и падежа
  • Frontend
Визуальный редактор статичного сайтаОтличное решение для сайтов без бекенда, просто удобный редактор для изменения контента на странице
  • Frontend
  • Design
Custom HighlightВозможность выделения слов в тексте без дополнительных обёрток с помощью нативного CSS
  • Frontend
Sortable JSСортируемый перетаскиванием (drag and drop) списки
  • Frontend
  • Design
ПробелыТаблица с пробелами, примерами, кодами и возможностью скопировать в буфер
  • Design
  • Frontend
Тренажер для развития навыков вёрсткиЭто тренажер Ильяхова. Развивает редакторскую насмотренность, помогает лучше верстать.
  • Design
  • Frontend
Принципы работы вебЗнаете ли вы, как вообще работают сайты?
  • Frontend
CORSВизуализация работы CORS
  • Frontend
browser 2020Описание всех возможных браузерных API
  • Frontend
  • Tools
storybook-addon-figmaПозволяет добавить пример макета прямо из фирмы для сравнения компонентов
  • Figma
  • Frontend
  • Design
easymoneyБиблиотека для работы с денежными значениями в JavaScript и Typescript
  • Frontend
  • Tools
strapi.ioCMS для фронтенда
  • Frontend
  • Tools
Ripple эффектАнимация эффекта волны
  • Design
  • Frontend
JAMstackКак создать свой блог используя Gatsby + Contentful + Netlify
  • Frontend
  • Tools
Nextjs Custom DocumentИзменение подгружаемых скриптов и вообще всего что есть теге html
  • Frontend
granim.jsАнимированные градиенты
  • Design
  • Frontend
  • Tools
Про стили наведения, фокуса и активного состоянияПодробно про каждое состояние и почему их надо разделять
  • Design
  • Frontend
15 методов работы с массивамиСамое необходимое про массивы в одном месте
  • Frontend
MixpanelАльтернатива для сбора данных статистики
  • Frontend
  • Tools
AmplitudeАльтернатива для сбора данных статистики
  • Frontend
  • Tools
NextjsReact SSR фреймворк
  • Frontend
  • Development
Фреймворк для визуального программированияМодульный фреймворк для визуального программирования. Редактор узлов прямо в браузере.
  • Frontend
  • Tools
zeit.coПлатформа для хостинга статичных сайтов, с поддержкой SSR фреймворков
  • Tools
  • Frontend
Next.js + ReduxПростой пример для интеграции Redux в Next.js SPA
  • Frontend
  • Development
Design tokens with FigmaКак построить работу с дизайн токенама с помощью Figma API
  • Frontend
  • Tools
  • Design
MoveableБиблиотека для скейла, драгенддропа и других манипуляций с объектами
  • Frontend
  • Tools
Секреты использования семантической версткиСамое важное в этой статье это примеры и объяснение почему семантическая верстка лучше
  • Frontend
Справочник CSSБольшой и понятный справочник по CSS свойствам на русском
  • Frontend
У верстальщика под рукойСамое необходимое для вертски в повседневном использовании
    Подборка14 ссылок
  • Frontend
Анимации и загрузкиНесколько примеров анимаций для улучшения пользовательского опыта
    Подборка11 ссылок
  • Design
  • Frontend
tesseract.jsБиблиотека для распознавания текста на изображении
  • AI
  • Frontend
  • Development
v8nБиблиотека для умной валидации на js
  • Frontend
Dockerizing a React AppБыстрый способ поднять CRA в докер контейнере
  • Development
  • Frontend
LocalStorageПочему не стоит использовать
  • Frontend
CSS Grid NinjaТонкости использования гридов
  • Frontend
fuzzyjsНеточная логика поиска в js
  • Frontend
Производительность фронтендаРазбор важных метрик производительности. Как измерить и повлиять на них
  • Frontend
7 полезных мелочей JS7 полезных и неочевидных советов
  • Frontend
SvelteJSСтатья про новый (относительно) js фреймворк
  • Frontend
  • Tools
Overlay ScrollbarsПакет для замены дефолтного скрола браузера
  • Frontend
Рендер большого спискаКак делать действительно огромные списки без потери скорости отрисовки
  • Frontend
11 JavaScript Animation Libraries For 2019Если лень писать анимацию самому, то всегда можно выбрать готовый вариант
  • Frontend
21 способ ускорить CSSМеньше кода всегда лучше, тут советы как это сделать
  • Frontend
5 советов как лучше писать условные конструкции в JavaScriptКак это делать в сравнении с обычными методами
  • Frontend
Задачки с собеседованийИнтересные задачки с собеседований, могут помочь устроиться на работу или просто быть готовым
  • Frontend
Pre-Commit and Pre-Push Git HooksВозможность для проверки кода на соответствие правилам линтера и тестинга перед пушем
  • Frontend
12 концепций JavaScript, о которых нужно знатьНу не то чтобы обязательно, но лучше ознакомиться
  • Frontend
Как сэкономить ресурсы в браузереБольше про то как работают браузеры
  • Frontend
Понимаем замыкания в JavaScript. Раз и навсегдаВечный вопрос на собеседованиях. Стоит один раз разобраться и закрыть для себя эту тему
  • Frontend
Бандл мечты с помощью WebpackПодключать только то что используется на странице
  • Frontend
  • Development
Часовые пояса в JavaScriptКазалось бы что может быть сложного, но в JS все непросто
  • Frontend
Дебажить JavaScript-код like a PROФункция console намного круче чем мне казалось, офигенные возможности для дебага
  • Frontend
Typescript with React and ReduxКак внедрить Typescript в React приложение
  • Frontend
30 практик HTML5Создание ясного, поддерживаемого и масштабируемого кода
  • Frontend
Поиск на JSПрокачанный поиск по тексту
  • Frontend
Prefetching Links using Service WorkersС Service Workers все становиться лучше
  • Frontend
dropzonejsБиблиотека для создания зоны для перетаскивания файлов
  • Frontend
CSS loading animationsНесколько разных и готовых анимаций для отображения загрузки
  • Design
  • Frontend
Чего мне никогда не говорили о CSSCSS это тоже язык программирования и у него есть свои особенности
  • Frontend
Три Больших Лжи о JavaScriptСкорее не про ложь, а про устоявшиеся стереотипы
  • Frontend
hotkeys.jsБиблиотека для обработки нажатий на клавиатуру
  • Frontend
Eva IconsOpen Source icons
  • Design
  • Frontend
Генератор grid layoutGrid сложная штука, генератор поможет лучше разобраться или даже сделать готовую для себя сетку
  • Frontend
Animate on ScrollЛегковесная библиотека для создания действий по скролу
  • Frontend
  • Design
Всё (или почти всё) о пробелеПробел не так прост как кажется, особенно если причитать статью
  • Design
  • Frontend
Визуальный редакторКрасивый и удобный редактор
  • Frontend
  • Tools
react-snakkeИндикатор проскроливания страницы
  • Frontend
react-fontawesomeПакет Fort Awesome для react приложения
  • Frontend
SCSS — немного практикиРеальные примеры в пользу использования SCSS
  • Frontend
Mini searchЛегковесная библиотека для простого поиска по по тексту на JS
  • Frontend
  • Development
Token-Based AuthenticationПро токены, JSON Web Tokens (JWT), аутентификацию и авторизацию
  • Frontend
  • Development
Защита JS кодаПрячем код на фронтенде от посторонних
  • Frontend
Tips & Tricks for your React-Redux ApplicationКак упросить работу с Redux
  • Frontend
Функции высшего порядкаПонятное объяснение на русском языке, от определения до использования
  • Frontend
Отличие функций от классов в ReactЧто в итоге выбрать то?
  • Frontend
Легкий JS валидаторОчень крутой валидатор, почти для всех случаев
  • Frontend
Асинхронные генераторы в ES9Упрощение и расширение возможностей генераторов
  • Frontend
  • Development
Ускоряем React разработкуАлиса для VSCode для быстрой вставки типичных конструкций, вроде импорта компонентов
  • Frontend
React Modern Web AppПриложение, придерживающееся всех современных веб-стандартов
  • Frontend
  • Development
Понимание prefetchКак это вообще работает и действительно ли стоит использовать
  • Frontend
9 генераторов статичных сайтов на ReactКрутая подборка инструментов для создания легковесных статичных сайтов
  • Frontend
  • Tools
Принципы функционального программирования в JavaScriptНемного о том что это такое и как это можно использовать в JS
  • Frontend
Возможности ES2018Упрощение синтаксиса уже доступных возможностей JS
  • Frontend
  • Development
React Lazy Loading and SuspenseПо сути все сводиться к динамическому импорту
  • Frontend
Верстка градиента с мягким переходомОбычный линейный градиент имеет резкий переход, пример как это исправить
  • Frontend
Expo.ioДля создания приложений
  • Frontend
  • Tools
Советы по CSSНесколько дельных советов по CSS
  • Frontend
React.lazyРазбор и пример новых возможностей React
  • Frontend
Возможности JavaScriptВозможности JavaScript, о которых я не знал
  • Frontend
OpensourceНе протирайте штаны — займитесь Open Source проектами
  • Frontend
  • Tools
  • Development
Meta TagsПолная проверка meta tags сайта
  • Frontend
  • Tools
ЗамыканияЗамыкания в JavaScript для начинающих
  • Frontend
Пакет для склонений и определения полаЛьвович - пакет для склонения названий городов, определения пола по имени фамилии и отчеству, склонения падежей русских имен, фамилий и отчеств
  • Frontend
Cogear.jsStatic websites generator
  • Frontend
  • Tools
FetchМетод fetch: замена XMLHttpRequest
  • Frontend
Понимание таймеров в JavaScriptCallback-функции, setTimeout, setInterval и requestAnimationFrame
  • Frontend
Словарь терминовНаверное все возможные термины и расшифровка к ним
  • Frontend
Что такое thisПодробно о том что такое this и как его использовать
  • Frontend
React. Управление рендерингомО том как можно улучшить производительность проекта на react
  • Frontend
Local и Session storage в ReactПросто как использовать локальное хранилище браузера в React
  • Frontend
12 вопросов и ответов по JavaScript12 ответов на достаточные простые вопросы, о которых вроде бы мало говорят
  • Frontend
Пристальный взгляд на CSS архитектурыПоверхностный взгляд на построение CSS архитектуры, хотя в заголовке написано что пристальный
  • Frontend
Основы TypeScriptЭто наверное самые основы, но для знакомства вполне
  • Frontend
NEWСоздание объектов через "new"
  • Frontend
Оптимизация изображенийGUI и CLI для Nodejs
  • Frontend
  • Development
Как тестировать версткуКак и зачем тестировать верстку?
  • Frontend
CMS для статичных сайтовВдыхает жизнь в статичные сайты
  • Frontend
  • Tools
Облачный хостинг для библиотеки компонентовИнструмент должен быть удобным для больших проектов и распределенных или просто больших команд
  • Frontend
  • Tools
Анимация в браузереCSS анимация прямо в браузере
  • Design
  • Tools
  • Frontend
Структура и наименование компонентовВечный вопрос какую выбрать структуру проекта. Это один из возможных вариантов
  • Frontend
Стрелочные функции VS Обычные функцииСпойлер: никто не выиграл. Просто плюсы и минусы
  • Frontend
Console на полнуюЕсли уж и использовать отладку через console, то на полную
  • Frontend
Parallax footerНа чистом css
  • Frontend
Pulse effectНа чистом css
  • Design
  • Frontend
Z-indexЕще одна статья рассказывающая все о z-index
  • Frontend
Методы массивов и объектовМетоды массивов и объектов в JavaScript, которые заменят циклы
  • Frontend
fullstack-дизайнерДля меня идеальное самоопределение
  • Frontend
  • Design
Symbol, Iterator, GeneratorЧе это вообще такое и зачем это использовать
  • Frontend
React Context APIКак можно сделать смену языка или темную тему на примере работы с новым Context API
  • Frontend
Создание разных цветовых тем с помощью CSS переменныхПо сути не обязательно использовать именно нативные переменные, это скорее описание подхода
  • Frontend
CSS BlocksЗамена БЭМ и css modules. Эволюция лучших практик
  • Frontend
CSS  —  это дизайн!Почему дизайнеру полезно уметь верстать
  • Design
  • Frontend
Понимание жизненного цикла React-компонентаПри работе с react очень важно понимать жизненный цикл компонента
  • Frontend
Материалы по фронтендуПримеры с описанием для разных фреймворков
  • Frontend
Четыре вопроса про БЭМЧетыре вопроса и ответы к ним
  • Frontend
Собеседование js разработчика с ответами на вопросыДоступно написано что надо знать на джуна и выше, для каждой темы есть либо описание либо ссылочки
  • Frontend
9 полезных приемов для JSВсе суть в заголовке
  • Frontend
Курс по версткеМожно пройти бесплатно, но стоит он всего 10€
  • Frontend
Как избавиться от лишних отступов у текстаБоремся с line-height с помощью :before и :after
  • Frontend
Библиотека для анимации react-springВ библиотеки собраны лучшие практики из другие пакетов для анимации
  • Frontend
Scroll и scrollbarВсе что надо знать про scroll и scrollbar
  • Frontend
Как получить максимум информации о пользователеСписок открытых api для получения различной информации
  • Frontend
CookiesВообще все что надо знать о cookie
  • Frontend
Набор компонентов antd ProДополнительный набор про компонентов для фреймворка antd для еще более быстрого прототипирования
  • Frontend
Ускорение SSRИнтересный способ оптимизации скорости серверного рендеринга
  • Frontend
  • Development
Google Page SpeedПроверка скорости загрузки страницы
  • Frontend
  • Tools
Валидатор HTML разметкиРасскажет о самый банальных ошибках в разметки
  • Tools
  • Frontend
Антипаттерны в ReactНе делай как все, будь лучше
  • Frontend
Пример прелоадераПочти как на медиуме
  • Frontend
  • Design
Коллекция CSS снипетовТо с чем верстальщики по всему миру сталкиваются каждый день
  • Frontend
Быстрый старт на create-react-appСтатья примечательна тем что показан полностью процесс от 0 до деплоя на статичный хостинг
  • Frontend
Хостинг для статичных сайтовДавно пользуюсь этим хостингом когда надо просто показать верстку, но он способен и на большее
  • Frontend
  • Tools
Пример модального окнаУ меня в заметках был помечен как «правильный», насколько это правильно не знаю, но способ имеет право на жизнь
  • Frontend
Игра на CSSХороший пример того как можно использовать CSS
  • Frontend
Подборка css градиентовМожно скачать картинкой или скопировать код
  • Frontend
Немного про сглаживание веб-шрифтовCSS методы визуальной оптимизации шрифтов
  • Frontend
Пакет для удобной верстки писемСоздатель пакета почему-то удалил все необходимое из ветки master, но github все помнит
  • Frontend
Webpack dashboardУдобный дашборд на electronjs
  • Frontend
  • Tools
Как работает JSРендеринг страниц и выводы по оптимизации производительности
  • Frontend
Инструменты JS разработчикаБиблиотеки, тестирование и еще немного
  • Frontend
Авторизация без ввода пароляАвтоподставление логина и пароля
  • Frontend
Анимация с помощью svgОчень реалистичный вариант создания несложной (а можно и сложной) анимации без регистрации и смс
  • Design
  • Frontend
Про коллапс отступовПри свойстве display: block равные отступы (margin) схлопываются в один, статья про то как это работает. Лично я просто использую display: inline-block в таких случаях
  • Frontend
Библиотека для анимацииРазнообразные примеры анимации, жаль что в вакууме
  • Design
  • Frontend
Алгоритмы для начинающихНесколько хороших примеров на ES6
  • Frontend
Redaction. Простая работа и организация redux actionsПозволяет не использовать файл const, да и в целом меняет подход работы redux
  • Frontend
Фреймворк компонентов для reactПозволяет быстро создавать прототипы для любой панели управления
  • Frontend
Как воткнуть react в существующий сайтИнтересная статья, такой подход позволяет итерационно переводить уже существующий сайт на react, или использовать его для отдельных частей проекта
  • Frontend
30 css селекторовПостоянно забываю как пишется :nth-child(n)
  • Frontend
Генерация jpg с помощью javascriptМощная штука, теоретически так можно кастомизировать изображения для шаринга в социальные сети и еще много чего
  • Frontend
Верстка это не тупоХоть и написано про верстку, но актуально скорее для всех веб-разработчиков
  • Frontend
React состояние загружаемых данныхХороший способ хранить состояние, избегая избыточности
  • Frontend
Пример react SSR с помощью parcelParcel, конечно, сомнительный инструмент, но уже есть примеры SSR для react
  • Frontend
  • Development
Parcel замена webpackПроект интересный, но пока очень сырой. Возможно когда-нибудь и будет полноценной заменой
  • Frontend
Как использовать razzle с css-modulesПример, который я нашел в PR к проекту, возможно скоро не надо будет даже кастомный webpack config создавать
  • Frontend
Пакет для быстрой настройки SSR для reactМного примеров и вариантов использования, проект быстро развивается
  • Frontend
  • Development
Список react starter kitsВажно что подборка от создателей react
  • Frontend
  • Tools
Руководство по css gridПодробное описание гридов, после прочтения статьи можно смело начинать использовать
  • Frontend
Варианты верстки подчеркивания ссылокКратко собраны возможные варианты подчеркивания ссылок, есть даже вариант через background
  • Design
  • Frontend
Font AwesomeНаверное, самый популярный и большой пак иконок
  • Design
  • Frontend
Справочник HTMLБольшой и понятный справочник по HTML тегам на русском
  • Frontend
Все что может быть в теге <head>Описание на русском, есть ссылка на оригинал, но там тоже самое только на английском
  • Frontend