Local use npm packagesHow To Install A Local Module Using NPM?react-magic-motionmagically animates your componentsbundlephobiafind the cost of adding a npm package to your bundlejam.devOne click bug
reports devs loveTraeTrae is an adaptive AI IDE that transforms how you workcursorThe AI Code EditorgsapAnimate anythingReownToolkits to build onchain UXGitLens in VsCodeInteractive RebaseonestackEasy, 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 nowobsidianObsidian is the private and flexible writing app that adapts to the way you think.Headless 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 statementconcurrentlyRun multiple commands concurrently.NxBuild 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.prettier-plugin-organize-importsMake sure that your import statements stay consistent no matter who writes them and what their preferences are.commitlintLint commit messagesnpm-run-allA CLI tool to run multiple npm-scripts in parallel or sequential.sizzy.coThe browser for web developerssimple-git-hooksA tool that lets you easily manage git hooksYargsYargs be a node.js library fer hearties tryin' ter parse optstringsCommander.jsThe complete solution for node.js command-line interfaces.CSS mixinsCreating native CSS mixins with @apply ruleFigma Release NotesMulti 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.Tokens Studio for FigmaTokens Studio for Figma is a Figma Plugin allowing you to integrate Tokens into your Figma designs.cal.comMeet Cal.com, the event-juggling scheduler for everyone. Focus on meeting, not making meetings.tailwind-mergeUtility function to efficiently merge Tailwind CSS classes in JS without style conflicts.ncunpm-check-updatesbuildship.comBuild powerful APIs in minutesGuide to CSS GridAn Interactive Guide to CSS GridmeowCLI app helperyargsYargs be a node.js library fer hearties tryin' ter parse optstringschalkTerminal string styleDesignsStorybook addon for embedding your design preview in addon panelWhimsicalThe hub for visual collaborationStyles to VariablesOnly compatible with Color styles (solid and transparent).DestroyerLet Destroyer recursively detach instances, remove auto layouts, detach styles and variables within your current selection so you can iterate faster!mateThe translator app you'll lovebuilder.ioAutomate your design-to-code workflow with AIautocannonBenchmarking toolHyperHyper is an Electron-based terminalLassoMove and resize windows with your mouseRiveBuild interactive animations that run anywhereSanityA headless CMS and so much moreBunDevelop, test, run, and bundle JavaScript & TypeScript projects—all with Bun. huskyHusky improves your commitsViteGet ready for a development environment that can finally catch up with you.TSDXZero-config CLI for TypeScript package developmentDeveloper Roadmapsroadmap.sh is a community effort to create roadmaps, guides and other educational content to help guide developers in picking up a path and guide their learnings.Component CTI StructureОбъяснение CTI структуры дизайн-токенов- Design
- Frontend
- Development
Дизайн-токеныПолезные ссылки про дизайн-токены под рукойПодборка5 ссылок- Design
- Frontend
- Development
1.1.1.1Бесплатный и безопасный VPNUUID GeneratorОнлайн генератор рандомных чиселIt's Nice ThatДля референсовIntegrating Design Tokens With TailwindИнтеграция дизайн-токенов в тему TailwindCSSDesign Tokens Format ModuleДокументация по дизайн-токенамRun Strapi 4 in a Docker How to Run Strapi 4 in a Docker Container Using Docker ComposeDocker with Strapi V4Dockerize Strapi for developmentTabbyA terminal for the modern agerecoilA state management library for ReactjotaiPrimitive and flexible state management for ReactCertbot и NginxCertbot и nginx, как обратный прокси в DockerCanduNo-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Консистентный код стайлtimestripeДизайн твоего времениJavaScript Rising StarsЕжегодный обзор тенденций в мире JavaScriptTailwindcssCSS frameworkStorybookИнструмент для сборки UI компонентовСоздание npm-пакетаНабор команд и описание к ним для создания и публикации своего NPM пакетаPassport-PasswordlessМетод авторизации без пароляjamstackВсе что известно про jamstack в одном местеMagic linksВолшебная ссылка для авторизации пользователяNototoПространство для рабочих досокFavicon в 2021 годуШесть способов на любой вкусHTML рекомендацииИ наилучшие практики на русском языкеxml-sitemapsГенератор карты сайтаlanguagetoolПроверки грамматики и стилистики текстаОрфографПроверка орфографии от ЛебедеваГлавредГлавред помогает очистить текст от словесного мусораЯндекс.СпеллерПомогает находить и исправлять орфографические ошибки в русскомОрфограммкаУмная проверка пунктуации, грамматики и стилистикиДля проверки текстаРабочие сервисы для проверки текста на орфографию, пунктуацию и стилистику Карта компетенций продуктового дизайнераОт Юрия ВетроваOverlayFigma to clean codedayjsАльтернатива Moment.jsnumeralizeНаписание числительных на русском языке с учётом пола и падежаС чего начать дизайн сайтов?Стартовый шаблон в FigmaHide My BarБыстрое скрытие Touch Bar на MacBookCraftКроссплатформенный редактор документовВизуальный редактор статичного сайтаОтличное решение для сайтов без бекенда, просто удобный редактор для изменения контента на страницеCustom HighlightВозможность выделения слов в тексте без дополнительных обёрток с помощью нативного CSSSortable JSСортируемый перетаскиванием (drag and drop) спискиПробелыТаблица с пробелами, примерами, кодами и возможностью скопировать в буферТренажер для развития навыков вёрсткиЭто тренажер Ильяхова. Развивает редакторскую насмотренность, помогает лучше верстать.Как вскрытие может сделать тебя крутым фрилансеромПо сути обычная ретроспектива по agile, но без agilegSwitchПриложение для управления графическими процессорами на MacBookЭмпатия — это суперсилаИнтервью с руководителем отдела дизайна GoogleДизайн-кабакCамый большой коллективный блог про дизайн на русском языке7 фундаментальных приемов психологии в дизайнеВ заголовке написано «должен знать каждый дизайнер», громко сказано, но ознакомиться точно стоитВизуальная культураПро вкус, идеалы, красоту, доверие, заботу, любовь и визуальную среду в окруженииTaskadeЧто-то вроде Miro на минималкаПринципы работы вебЗнаете ли вы, как вообще работают сайты?Ложная простота в UI дизайнеПроще не всегда значит лучшеAirtable CMSОсобенности Airtable как headless CMS для статичного сайтаProduct huntПодборки лучший приложений за деньTable CreatorПлагин генератор таблиц для FigmaБардак в коммуникацииПочему Basecamp взялась за разработку почтового сервиса HeyНедоверие к дизайну«Что-то не то», «Можно что-то интереснее», «Мне не нравится»10 ошибок при работе с цветом в UIСамые распространенные ошибки дизайнеров при работе с цветом в интерфейсе.Модель «двойного алмаза»Как управлять дизайн-задачами и проектамиДизайн-система в FigmaТатьяна Маслакова рассказывает как организовать дизайн-системуCross-sale и upsell инструментыКак увеличить средний чек?Алексей НовичковСделал «Финолог», «Мегаплан» и «Оптима»Онлайн журнал для дизайнеровПродуктовый дизайн (UX/UI), брендинг и аналитикаCORSВизуализация работы CORSCloverМодный блокнот для планирования задач и времениБиблиотека компонетов от iviМне нравиться что ivi выглядит везде одинаково, хороший пример кроссплатформенной дизайн-системыПроектирование доступных цветовых систем в StripeПодробное исследования о том как создать разнообразную цветовую палитру, но при этом учесть все нормы доступностиPitchПродвинутое создание красивых презентацийСколько стоит время сотрудника?Подробно о зарплате сотрудника со всеми налогамиDenoВроде как замена NodeJSВсе о дизайне кнопокВсе, что вам нужно знать о дизайне кнопок в интерфейсеПодборка полезных Google-таблицДля учёта финансов, оценки навыков, создания отчётов и других целейbrowser 2020Описание всех возможных браузерных APIOptimaРедактор для осмысленной работы с текстомstorybook-addon-figmaПозволяет добавить пример макета прямо из фирмы для сравнения компонентовeasymoneyБиблиотека для работы с денежными значениями в JavaScript и TypescriptHamokСервис для быстрого создания презентаций для макетов на разных устройствахColumnsПриложение для создание множества разных спискомСтать профессионаломТри шага в верном направленииСетка для печатиИнструмент для настройки разных сеток и сохранении для печатиТипографская раскладкаРаскладка для клавиатуры от Ильи БирманаBeansОблачный кардхолдерSpacing ManagerПомогает настроить внутри одного компонентаГлавред в FigmaПлагин главреда в FigmaMap MakerДобавляет карту в проектПолезные плагины для FigmaЭто список плагинов, которым я смог найти применениеПодборка13 ссылок- Figma
- Design
Get WavesГенератор волн и кривых с заливкойWave & СurveГенератор кривых линийRedlinesПомогает документировать макет для разработкиMarka Email GeneratorГенерирует шаблоны электронной почты HTMLSticky NotesСтикеры-заметки для размещения в проектеTypographerОтформатируйте текст с помощью типографских элементовTypografСоздаёт типографические элементыDesign LintПроверка макетаWebgradientsГенератор градиентовContentful to FigmaПозволяет использовать данные из Contentful в макетахСпециализация дизайнераКак можно сужать свою специализацию10 мелких ошибок в дизайнеВозвращение правила: «Не заставляйте меня думать»Зачем дизайнеру дружить с Tilda?Плюсы и минусы использования ТильдыКак оценивать свой прогрессКак оценивать свой прогресс и что считать нормальным развитием?Работа в офисе: плюсы и минусыАвтор делиться личным опытом после перехода с удаленки в офисstrapi.ioCMS для фронтендаUnshakyПрограмма помогает исправить проблемы с клавиатурой на macbook pro 15Oh My ZshУлучшаем iTermRipple эффектАнимация эффекта волныКак технический долг убивает ваши проектыЧто это такое, как понять проблему и что с этим можно сделатьJAMstackКак создать свой блог используя Gatsby + Contentful + NetlifyNextjs Custom DocumentИзменение подгружаемых скриптов и вообще всего что есть теге htmlНеоморфизмГотовые стили оформленияКлючевые метрики для дизайн-менеджераКак понять эффективность дизайн-командыПочему мы не делаем то, что запланировалиКак одна особенность мешает нам добиваться поставленных целейПлагины Figma 11 частьПросто хочу сохранить для себя ссылку на эту рубрикуbettertouchtoolДелаем Touch Bar полезнымЧекбоксы и переключателиПро семантику элементов и когда их использоватьgranim.jsАнимированные градиентыТипографика digital-продуктаКак собрать систему текстовых стилей сложного сервиса, не уходя в крайности.Про стили наведения, фокуса и активного состоянияПодробно про каждое состояние и почему их надо разделять15 методов работы с массивамиСамое необходимое про массивы в одном местеИнтуитивно понятный call to action Очень простые, но полезные советы по организации основных действий экранаДизайн деструктивных действийИспользуйте красные предупреждающие сигналы и другоеКомпозицияПлохая композиция убьет сайт, даже если контент интересенПсихология рейтинговых системДолжны ли мы перестать использовать звезды?Продуктивность это управление вниманиемА не управление временем10 эвристических принциповЭвристические принципы помогают определить, где дизайн интерфейса не обеспечивает хороший опытМодульные сетки в работе UX-дизайнераМного информации про сетки, как их использовать и как это влияет на пользователейMixpanelАльтернатива для сбора данных статистикиAmplitudeАльтернатива для сбора данных статистикиКак анимация влияет на UXАнимация как часть более качественного взаимодействия с продуктомNextjsReact SSR фреймворкСкруглённые углы проще для восприятияНемного теории почему скруглять углы это хорошоСкруглённые или остроугольные?Че же блин делать с углами? Разбор с аргументамиПопулярные мифы о методах обученияПолезно для дизайнеров, чтобы не питать иллюзий про получение опыта пользователяManifestСтранные, но интересно сделанные заметки прямо в браузере и на одной страницеОрфо онлайнСовершенно ужасно выглядит, но работает. Проверка орфографии и пунктуацииФреймворк для визуального программированияМодульный фреймворк для визуального программирования. Редактор узлов прямо в браузере.ContentfulОблачная CMS для создания сайтов без бекендаHeadless CMSСтатья о том как выбрать облачную CMS, чтобы не пилить бекендNodeGuiБиблиотека для создания кроссплатформенных дескоптных приложнийzeit.coПлатформа для хостинга статичных сайтов, с поддержкой SSR фреймворковNext.js + ReduxПростой пример для интеграции Redux в Next.js SPAAtlassian designКак устроена дизайн-система Atlassian Как стать лидером творческой командыАбстрактор об очевидно, но очень интересноНе мудрите с формами входаПлохие и хорошие паттерны формы авторизацииМир не вертится вокруг UXПрекрасная статья об экзестенциальном кризисе и понимании дизенром ценности своей работыВизуальный сахарПро злоупотребление визуальным сахаром в дизайнеКак упростить дизайнСобрание эвристик для понимание процесса упрощенияDesign tokens with FigmaКак построить работу с дизайн токенама с помощью Figma API50 day’s challengeОписание опыта участия в челенджеMoveableБиблиотека для скейла, драгенддропа и других манипуляций с объектамиJSON from figma fileТулза для получение данных с figma api. Хорошо подходит чтобы просто разобраться в apiuxcrowdТестирование вашего сайта реальными пользователямиСекреты использования семантической версткиСамое важное в этой статье это примеры и объяснение почему семантическая верстка лучшеСправочник CSSБольшой и понятный справочник по CSS свойствам на русскомУ верстальщика под рукойСамое необходимое для вертски в повседневном использовании Анимации и загрузкиНесколько примеров анимаций для улучшения пользовательского опытаПодборка8 ссылок- Design
- Frontend
Памятка пользователям sshСохранил ради раздела алиасов, но информации про ssh очень многоtesseract.jsБиблиотека для распознавания текста на изображенииSearch by MuzliГугл для дизайнеровv8nБиблиотека для умной валидации на jsОсновы работы с файлами в NodejsКак работать с файловой системой средствами Node.jsDockerizing a React AppБыстрый способ поднять CRA в докер контейнереLocalStorageПочему не стоит использоватьГенератор чатаДля создания реалистичных скриншотовCSS Grid NinjaТонкости использования гридовfuzzyjsНеточная логика поиска в jsКоманда ssh-keygenГенерирует ssh ключ, подробно про все возможные параметрыFigma — как единая точка правдыПочему Figma это хороший инструмент для всех кто участвует в процессе дизайнаПроизводительность фронтендаРазбор важных метрик производительности. Как измерить и повлиять на них7 полезных мелочей JS7 полезных и неочевидных советовSvelteJSСтатья про новый (относительно) js фреймворкTuemilioИнструмент сбора данных о потенциальных пользователяхOverlay ScrollbarsПакет для замены дефолтного скрола браузераEmojipediaБиблиотека всех эмоджиРендер большого спискаКак делать действительно огромные списки без потери скорости отрисовки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Несколько разных и готовых анимаций для отображения загрузкиМощь системы поощренийПеревод статьи автор оригинала — Николас КрамерМодальностьОдна из концепций UX, которую большинство дизайнеров не до конца понимаютКак спрашивать у пользователей при проведении UX-исследованияОчень хорошая тема для тех кто проводить интервьюЧего мне никогда не говорили о CSSCSS это тоже язык программирования и у него есть свои особенностиТри Больших Лжи о JavaScriptСкорее не про ложь, а про устоявшиеся стереотипыhotkeys.jsБиблиотека для обработки нажатий на клавиатуруEva IconsOpen Source iconsТемы для VSCodeМного самых разных тем для редактораГенератор grid layoutGrid сложная штука, генератор поможет лучше разобраться или даже сделать готовую для себя сеткуAnimate on ScrollЛегковесная библиотека для создания действий по скролуВсё (или почти всё) о пробелеПробел не так прост как кажется, особенно если причитать статьюРаспознавание чековGoogle Docs с помощью ABBYY OCR SDKAPI для расшифровка текста на картинкеОписание ABBYY Cloud OCR SDKChecklist DesignСписок из пунктов что надо сделать для реализации дизайна разных сущностейВизуальный редакторКрасивый и удобный редакторreact-snakkeИндикатор проскроливания страницыreact-fontawesomeПакет Fort Awesome для react приложенияSCSS — немного практикиРеальные примеры в пользу использования SCSSdrone.ioОтличный CI/CD для Docker контейнеровMini searchЛегковесная библиотека для простого поиска по по тексту на JSToken-Based AuthenticationПро токены, JSON Web Tokens (JWT), аутентификацию и авторизациюШпаргалка с командами DockerВсе самые необходимые команды под рукойЗащита JS кодаПрячем код на фронтенде от постороннихTips & Tricks for your React-Redux ApplicationКак упросить работу с ReduxФункции высшего порядкаПонятное объяснение на русском языке, от определения до использованияОтличие функций от классов в ReactЧто в итоге выбрать то?Легкий JS валидаторОчень крутой валидатор, почти для всех случаевАсинхронные генераторы в ES9Упрощение и расширение возможностей генераторовУскоряем React разработкуАлиса для VSCode для быстрой вставки типичных конструкций, вроде импорта компонентовReact Modern Web AppПриложение, придерживающееся всех современных веб-стандартовПонимание prefetchКак это вообще работает и действительно ли стоит использовать9 генераторов статичных сайтов на ReactКрутая подборка инструментов для создания легковесных статичных сайтовМашинное обучение с Node.jsПри помощи библиотеки Tensorflow.jsПринципы функционального программирования в JavaScriptНемного о том что это такое и как это можно использовать в JSВозможности ES2018Упрощение синтаксиса уже доступных возможностей JSReact Lazy Loading and SuspenseПо сути все сводиться к динамическому импортуВерстка градиента с мягким переходомОбычный линейный градиент имеет резкий переход, пример как это исправитьПодсказка для анимации UIНесколько хороших примеров анимации взаимодействия элементовNotionПриложение для заметок, досок, планирование и тдExpo.ioДля создания приложенийСоветы по CSSНесколько дельных советов по CSSReact.lazyРазбор и пример новых возможностей ReactВозможности JavaScriptВозможности JavaScript, о которых я не зналOpensourceНе протирайте штаны — займитесь Open Source проектамиMeta TagsПолная проверка meta tags сайтаUser-friendly CLIДля создания крутых возможностей выбора и ввода прямо в консолеИнструменты Андрея РомановаНебольшой список инструментовЗамыканияЗамыкания в JavaScript для начинающихПакет для склонений и определения полаЛьвович - пакет для склонения названий городов, определения пола по имени фамилии и отчеству, склонения падежей русских имен, фамилий и отчествПравильное использование анимации в UXДостаточно примеров как стоит делать и почемуCogear.jsStatic websites generatorFetchМетод fetch: замена XMLHttpRequestПонимание таймеров в JavaScriptCallback-функции, setTimeout, setInterval и requestAnimationFrameСловарь терминовНаверное все возможные термины и расшифровка к нимДизайн система в фигмеОчень подробный пример как это может бытьСпецификация никому не нужнаГлавная мысль: спецификация не тех задание, а база знанийПро удаленную работуТут не про дизайн, но применимо ко всем на удаленкеЧто такое thisПодробно о том что такое this и как его использоватьНабор градиентовКрасивые, многоцветные, плавные и не оченьReact. Управление рендерингомО том как можно улучшить производительность проекта на reactLocal и Session storage в ReactПросто как использовать локальное хранилище браузера в ReactПользовательские сценарииЧто это такое, как и для чего их нужно строить12 вопросов и ответов по JavaScript12 ответов на достаточные простые вопросы, о которых вроде бы мало говорятПристальный взгляд на CSS архитектурыПоверхностный взгляд на построение CSS архитектуры, хотя в заголовке написано что пристальныйОсновы TypeScriptЭто наверное самые основы, но для знакомства вполнеNEWСоздание объектов через "new"Оптимизация изображенийGUI и CLI для NodejsКак тестировать версткуКак и зачем тестировать верстку?CMS для статичных сайтовВдыхает жизнь в статичные сайтыОблачный хостинг для библиотеки компонентовИнструмент должен быть удобным для больших проектов и распределенных или просто больших командПримеры UX от известных приложенийПодробные разборы кейсов от известных компанийАнимация в браузереCSS анимация прямо в браузереСтруктура и наименование компонентовВечный вопрос какую выбрать структуру проекта. Это один из возможных вариантовЗакрой Dribbble3 вещи, которые помогут в карьере больше чем портфолиоСтрелочные функции VS Обычные функцииСпойлер: никто не выиграл. Просто плюсы и минусыConsole на полнуюЕсли уж и использовать отладку через console, то на полнуюParallax footerНа чистом cssSketch или FigmaРаунд #100500Pulse effectНа чистом cssZ-indexЕще одна статья рассказывающая все о z-indexАвтокомплитАвтокомплит — для помощи человеку, не для проверкиЧто такое UX/UI дизайн на самом деле?Объяснение для новичков и тех кто совсем не в темеЧто такое UX/UI?Очередная статья о том что это такоеОтличие UI от UX?Подробный разбор часто используемых терминовМетоды массивов и объектовМетоды массивов и объектов в JavaScript, которые заменят циклыПочему дизайн-систему вы делаете не вовремя?Из статьи складывает ощущение что дизайн-система всегда не вовремя и заморачиваться вообще не стоитfullstack-дизайнерДля меня идеальное самоопределениеSymbol, Iterator, GeneratorЧе это вообще такое и зачем это использоватьТри уровня дизайнаДизайн продукта, дизайн взаимодействия и визуальный дизайнСоздание интерактивной картыНовый инструмент для создание интерактивной карты пользовательского поведенияОпределение понятия «Дизайн-система»Достаточно точно и подробно описано что это вообще такое и где можно посмотреть примеры использованияReact Context APIКак можно сделать смену языка или темную тему на примере работы с новым Context APIСоздание разных цветовых тем с помощью CSS переменныхПо сути не обязательно использовать именно нативные переменные, это скорее описание подходаCSS BlocksЗамена БЭМ и css modules. Эволюция лучших практикconsole loggerЛегко настраиваемый и очень вариативный консольный логгерИнтерфейс для управление dockerВроде очень просто ставиться и помогает запускать и останавливать контейнеры, создавать новые. Короче полное управление докером с помощью интерфейса.Джуниор в 33Как быть если тебе 33 года а ты все еще джуниорCSS — это дизайн!Почему дизайнеру полезно уметь верстатьПонимание жизненного цикла React-компонентаПри работе с react очень важно понимать жизненный цикл компонентаМатериалы по фронтендуПримеры с описанием для разных фреймворковLearn X in Y minutesПодсказка, наверное, по всем возможным языкамТестовые в студию ЧулаковаЕсть интересные работы и подробные презентацииЧетыре вопроса про БЭМЧетыре вопроса и ответы к нимДизайн в условиях хакатонаСоветы вполне подходят не только для хакатона, но и для MVPСобеседование js разработчика с ответами на вопросыДоступно написано что надо знать на джуна и выше, для каждой темы есть либо описание либо ссылочки9 полезных приемов для JSВсе суть в заголовкеКак стать UX/UI дизайнеромБез образованя и опытаКурс по версткеМожно пройти бесплатно, но стоит он всего 10€Как избавиться от лишних отступов у текстаБоремся с line-height с помощью :before и :afterБиблиотека для анимации react-springВ библиотеки собраны лучшие практики из другие пакетов для анимацииScroll и scrollbarВсе что надо знать про scroll и scrollbarРассылка «Интерфейсы без шелухи»Уже не частая, но не менее интересная рассылкаСпрвочник материалов по дизайну от Антона ЖияноваСтруктурированные подборки материалов по многих важным вопросамКак получить максимум информации о пользователеСписок открытых api для получения различной информацииCookiesВообще все что надо знать о cookieНабор компонентов antd ProДополнительный набор про компонентов для фреймворка antd для еще более быстрого прототипированияУскорение SSRИнтересный способ оптимизации скорости серверного рендерингаGoogle Page SpeedПроверка скорости загрузки страницыВалидатор HTML разметкиРасскажет о самый банальных ошибках в разметкиКаталог дизайн системНа мой взгляд у рамблера самая крутая система из всех представленных, но они все на уровнеАнтипаттерны в ReactНе делай как все, будь лучшеПример прелоадераПочти как на медиумеКоллекция CSS снипетовТо с чем верстальщики по всему миру сталкиваются каждый деньFigma freebiesДизайн системы, дашборды и всякое такое, но может и полезные плагины появятсяБыстрый старт на create-react-appСтатья примечательна тем что показан полностью процесс от 0 до деплоя на статичный хостингХостинг для статичных сайтовДавно пользуюсь этим хостингом когда надо просто показать верстку, но он способен и на большееПример модального окнаУ меня в заметках был помечен как «правильный», насколько это правильно не знаю, но способ имеет право на жизньИгра на CSSХороший пример того как можно использовать CSSПроцесс выбора шрифтаОдна из многих, но достаточно неплохая статья как можно подойти к выбору шрифтаIcons setВ заголовке написано что набор иконок для лендингов, но использовать можно хоть где. Разделены тематическиПодборка css градиентовМожно скачать картинкой или скопировать кодКонвертировать psd в sketch файлОт AvocodeНемного про сглаживание веб-шрифтовCSS методы визуальной оптимизации шрифтовПакет для удобной верстки писемСоздатель пакета почему-то удалил все необходимое из ветки master, но github все помнитWebpack dashboardУдобный дашборд на electronjsРабота с файлами в NodeJSЗапись, чтение, загрузкаОптическое выравнивание компонентовНа примере модального окнаНастройка TouchbarКастомизация Touchbar на MacbookКак работает JSРендеринг страниц и выводы по оптимизации производительностиИнструменты JS разработчикаБиблиотеки, тестирование и еще немногоАвторизация без ввода пароляАвтоподставление логина и пароляИсходник альбома для прототипированияАльбомный лист в точку, можно проектировать экраны любого размераАнимация с помощью svgОчень реалистичный вариант создания несложной (а можно и сложной) анимации без регистрации и смсПро коллапс отступовПри свойстве display: block равные отступы (margin) схлопываются в один, статья про то как это работает. Лично я просто использую display: inline-block в таких случаяхTinkoff Design SystemОдин из подходов к организации дизайнаГайдлайн от КонтураПодробный гайдлайн по элементам интерфейса от контура, стоит посмотреть не как руководство к действию, а пример организации информацииДокументы для фрилансера от ТЖЕсть разные варианты документов, если вариант договора от ТЖ не понравилсяДокументы для фрилансераВариант договора от ТЖБиблиотека для анимацииРазнообразные примеры анимации, жаль что в вакуумеАлгоритмы для начинающихНесколько хороших примеров на ES6Установка Nodejs на UbuntuЛучше всегда выбрать установку через nvm, что бы можно было легко выбрать подходящую версиюСмена версии Nodejs с помощью HomebrewПросто подсказка для смены версииRedaction. Простая работа и организация redux actionsПозволяет не использовать файл const, да и в целом меняет подход работы reduxNodejs API + DockerПонятное руководство, далеко не исчерпывающее как написано, но закрывает некоторые вопросыОтличный пример переверстки объявленияКратки, но по делу разбор переверсткиКак больше никогда в жизни не работать в стол Максим ИльяховВидео не о том как не делать в стол, а как не браться за проекты которые не будут реализованыФреймворк компонентов для reactПозволяет быстро создавать прототипы для любой панели управленияКак воткнуть react в существующий сайтИнтересная статья, такой подход позволяет итерационно переводить уже существующий сайт на react, или использовать его для отдельных частей проекта30 css селекторовПостоянно забываю как пишется :nth-child(n)Генерация jpg с помощью javascriptМощная штука, теоретически так можно кастомизировать изображения для шаринга в социальные сети и еще много чегоВерстка это не тупоХоть и написано про верстку, но актуально скорее для всех веб-разработчиковReact состояние загружаемых данныхХороший способ хранить состояние, избегая избыточностиПример react SSR с помощью parcelParcel, конечно, сомнительный инструмент, но уже есть примеры SSR для reactParcel замена webpackПроект интересный, но пока очень сырой. Возможно когда-нибудь и будет полноценной заменойНачало работы с NodeJSЯ прочитал этот материал уже достаточно поздно, но его пользы это не отменяет. Все что надо знать для старта.Как использовать razzle с css-modulesПример, который я нашел в PR к проекту, возможно скоро не надо будет даже кастомный webpack config создаватьПакет для быстрой настройки SSR для reactМного примеров и вариантов использования, проект быстро развиваетсяСписок react starter kitsВажно что подборка от создателей reactРуководство по css gridПодробное описание гридов, после прочтения статьи можно смело начинать использоватьВарианты верстки подчеркивания ссылокКратко собраны возможные варианты подчеркивания ссылок, есть даже вариант через backgroundFont AwesomeНаверное, самый популярный и большой пак иконокСправочник HTMLБольшой и понятный справочник по HTML тегам на русскомВсе что может быть в теге <head>Описание на русском, есть ссылка на оригинал, но там тоже самое только на английском 
