en
Projects
Useful links
Posts
About myself
Unfortunately, the content on this page may be partially in Russian.
Useful links
Links
Compilations
Design
Frontend
Tools
Figma
Development
Local use npm packages
How To Install A Local Module Using NPM?
Development
react-magic-motion
magically animates your components
Development
Tools
Frontend
bundlephobia
find the cost of adding a npm package to your bundle
Development
Tools
jam.dev
One click bug reports devs love
Development
Tools
Frontend
Trae
Trae is an adaptive AI IDE that transforms how you work
Development
Tools
cursor
The AI Code Editor
Development
Tools
gsap
Animate anything
Development
Frontend
Tools
Reown
Toolkits to build onchain UX
Development
Tools
GitLens in VsCode
Interactive Rebase
Development
Tools
onestack
Easy, simple & fast cross‑platform apps
Development
Frontend
Tools
pbcomponents
UI component library for React and Vue with Typescript and Tailwind
Development
Frontend
Design
Tools
pbstyles
Basic styles for quick prototyping
Development
Frontend
Design
Tools
Tailwind Dictionary
Creating a Tailwind Theme from design tokens
Development
Frontend
Tools
Mixin Dictionary
Creating mixins from design tokens for LESS and SCSS.
Development
Frontend
Tools
clsx
A tiny (239B) utility for constructing className strings conditionally.
Frontend
Tools
Tailwind UI
Beautifully 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 UI
Beautifully designed components that you can copy and paste into your apps. Made with Tailwind CSS. Open source.
Frontend
Design
Tools
Radix UI
Start building your app now
Frontend
Design
Tools
obsidian
Obsidian is the private and flexible writing app that adapts to the way you think.
Tools
Headless UI
Completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.
Frontend
Tools
heroicons
Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS.
Frontend
Design
Tools
Tailwind CSS
Все для работы с Tailwind
Compilation
9 links
Frontend
Tools
Frontend Developer
Step by step guide to becoming a modern frontend developer in 2024
Frontend
Create a Component Library Fast
Using Vite's library mode
Development
Frontend
vite-plugin-css-injected-by-js
A Vite plugin that takes the CSS and adds it to the page through the JS
Development
Tools
Frontend
vite-plugin-lib-inject-css
Inject css at the top of each chunk file in library mode using import statement
Development
Tools
Frontend
concurrently
Run multiple commands concurrently.
Development
Tools
Nx
Build system, optimized for monorepos, with plugins for popular frameworks and tools and advanced CI capabilities including caching and distribution.
Development
Tools
Frontend
Stencil
Stencil is a library for building reusable, scalable component libraries. Generate small, blazing fast Web Components that run everywhere.
Development
Tools
Frontend
prettier-plugin-organize-imports
Make sure that your import statements stay consistent no matter who writes them and what their preferences are.
Development
Tools
commitlint
Lint commit messages
Development
Tools
npm-run-all
A CLI tool to run multiple npm-scripts in parallel or sequential.
Development
Tools
sizzy.co
The browser for web developers
Development
Frontend
Tools
simple-git-hooks
A tool that lets you easily manage git hooks
Development
Tools
Yargs
Yargs be a node.js library fer hearties tryin' ter parse optstrings
Development
Tools
Commander.js
The complete solution for node.js command-line interfaces.
Development
Tools
CSS mixins
Creating native CSS mixins with @apply rule
Development
Frontend
Figma Release Notes
Figma
Multi for Tailwind CSS
tailwindcss-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
Tokens Studio for Figma
Tokens Studio for Figma is a Figma Plugin allowing you to integrate Tokens into your Figma designs.
Design
Figma
Tools
cal.com
Meet Cal.com, the event-juggling scheduler for everyone. Focus on meeting, not making meetings.
Tools
tailwind-merge
Utility function to efficiently merge Tailwind CSS classes in JS without style conflicts.
Development
Frontend
Tools
ncu
npm-check-updates
Development
Tools
buildship.com
Build powerful APIs in minutes
Development
Tools
Guide to CSS Grid
An Interactive Guide to CSS Grid
Frontend
meow
CLI app helper
Development
Tools
yargs
Yargs be a node.js library fer hearties tryin' ter parse optstrings
Development
Tools
chalk
Terminal string style
Development
Tools
Designs
Storybook addon for embedding your design preview in addon panel
Development
Tools
Frontend
Whimsical
The hub for visual collaboration
Tools
Styles to Variables
Only compatible with Color styles (solid and transparent).
Figma
Design
Tools
Destroyer
Let Destroyer recursively detach instances, remove auto layouts, detach styles and variables within your current selection so you can iterate faster!
Design
Tools
Figma
mate
The translator app you'll love
Tools
builder.io
Automate your design-to-code workflow with AI
Development
Tools
autocannon
Benchmarking tool
Development
Tools
Hyper
Hyper is an Electron-based terminal
Tools
Development
Lasso
Move and resize windows with your mouse
Tools
Rive
Build interactive animations that run anywhere
Tools
Design
Sanity
A headless CMS and so much more
Development
Tools
Bun
Develop, test, run, and bundle JavaScript & TypeScript projects—all with Bun.
Development
Tools
Frontend
husky
Husky improves your commits
Development
Tools
Vite
Get ready for a development environment that can finally catch up with you.
Development
Frontend
Tools
TSDX
Zero-config CLI for TypeScript package development
Development
Frontend
Tools
Developer Roadmaps
roadmap.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.
Development
Tools
Component CTI Structure
Объяснение CTI структуры дизайн-токенов
Design
Frontend
Development
Дизайн-токены
Полезные ссылки про дизайн-токены под рукой
Compilation
5 links
Design
Frontend
Development
1.1.1.1
Бесплатный и безопасный VPN
Tools
UUID Generator
Онлайн генератор рандомных чисел
Tools
Development
It's Nice That
Для референсов
Design
Integrating Design Tokens With Tailwind
Интеграция дизайн-токенов в тему TailwindCSS
Design
Frontend
Design Tokens Format Module
Документация по дизайн-токенам
Design
Frontend
Run Strapi 4 in a Docker
How to Run Strapi 4 in a Docker Container Using Docker Compose
Development
Docker with Strapi V4
Dockerize Strapi for development
Development
Tabby
A terminal for the modern age
Tools
recoil
A state management library for React
Frontend
Tools
jotai
Primitive and flexible state management for React
Frontend
Tools
Certbot и Nginx
Certbot и nginx, как обратный прокси в Docker
Tools
Candu
No-code UI component builder for SaaS products
Design
Tools
Frontend
wunderbucket.io
Turn 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
timestripe
Дизайн твоего времени
Tools
Design
JavaScript Rising Stars
Ежегодный обзор тенденций в мире JavaScript
Frontend
Tools
Tailwindcss
CSS framework
Design
Tools
Frontend
Storybook
Инструмент для сборки UI компонентов
Tools
Frontend
Design
Создание npm-пакета
Набор команд и описание к ним для создания и публикации своего NPM пакета
Development
Passport-Passwordless
Метод авторизации без пароля
Tools
jamstack
Все что известно про jamstack в одном месте
Frontend
Magic links
Волшебная ссылка для авторизации пользователя
Tools
Nototo
Пространство для рабочих досок
Tools
Favicon в 2021 году
Шесть способов на любой вкус
Frontend
HTML рекомендации
И наилучшие практики на русском языке
Frontend
xml-sitemaps
Генератор карты сайта
Tools
Frontend
languagetool
Проверки грамматики и стилистики текста
Tools
Орфограф
Проверка орфографии от Лебедева
Tools
Главред
Главред помогает очистить текст от словесного мусора
Tools
Яндекс.Спеллер
Помогает находить и исправлять орфографические ошибки в русском
Tools
Орфограммка
Умная проверка пунктуации, грамматики и стилистики
Tools
Для проверки текста
Рабочие сервисы для проверки текста на орфографию, пунктуацию и стилистику
Compilation
6 links
Tools
Карта компетенций продуктового дизайнера
От Юрия Ветрова
Design
Overlay
Figma to clean code
Tools
Design
Frontend
dayjs
Альтернатива Moment.js
Frontend
numeralize
Написание числительных на русском языке с учётом пола и падежа
Frontend
С чего начать дизайн сайтов?
Стартовый шаблон в Figma
Design
Hide My Bar
Быстрое скрытие Touch Bar на MacBook
Tools
Craft
Кроссплатформенный редактор документов
Tools
Визуальный редактор статичного сайта
Отличное решение для сайтов без бекенда, просто удобный редактор для изменения контента на странице
Frontend
Design
Custom Highlight
Возможность выделения слов в тексте без дополнительных обёрток с помощью нативного CSS
Frontend
Sortable JS
Сортируемый перетаскиванием (drag and drop) списки
Frontend
Design
Пробелы
Таблица с пробелами, примерами, кодами и возможностью скопировать в буфер
Design
Frontend
Тренажер для развития навыков вёрстки
Это тренажер Ильяхова. Развивает редакторскую насмотренность, помогает лучше верстать.
Design
Frontend
Как вскрытие может сделать тебя крутым фрилансером
По сути обычная ретроспектива по agile, но без agile
Design
gSwitch
Приложение для управления графическими процессорами на MacBook
Tools
Эмпатия — это суперсила
Интервью с руководителем отдела дизайна Google
Design
Дизайн-кабак
Cамый большой коллективный блог про дизайн на русском языке
Design
7 фундаментальных приемов психологии в дизайне
В заголовке написано «должен знать каждый дизайнер», громко сказано, но ознакомиться точно стоит
Design
Визуальная культура
Про вкус, идеалы, красоту, доверие, заботу, любовь и визуальную среду в окружении
Design
Taskade
Что-то вроде Miro на минималка
Tools
Принципы работы веб
Знаете ли вы, как вообще работают сайты?
Frontend
Ложная простота в UI дизайне
Проще не всегда значит лучше
Design
Airtable CMS
Особенности Airtable как headless CMS для статичного сайта
Tools
Product hunt
Подборки лучший приложений за день
Design
Tools
Table Creator
Плагин генератор таблиц для Figma
Design
Figma
Бардак в коммуникации
Почему Basecamp взялась за разработку почтового сервиса Hey
Design
Недоверие к дизайну
«Что-то не то», «Можно что-то интереснее», «Мне не нравится»
Design
10 ошибок при работе с цветом в UI
Самые распространенные ошибки дизайнеров при работе с цветом в интерфейсе.
Design
Модель «двойного алмаза»
Как управлять дизайн-задачами и проектами
Design
Дизайн-система в Figma
Татьяна Маслакова рассказывает как организовать дизайн-систему
Design
Cross-sale и upsell инструменты
Как увеличить средний чек?
Design
Алексей Новичков
Сделал «Финолог», «Мегаплан» и «Оптима»
Design
Онлайн журнал для дизайнеров
Продуктовый дизайн (UX/UI), брендинг и аналитика
Design
CORS
Визуализация работы CORS
Frontend
Clover
Модный блокнот для планирования задач и времени
Tools
Библиотека компонетов от ivi
Мне нравиться что ivi выглядит везде одинаково, хороший пример кроссплатформенной дизайн-системы
Design
Проектирование доступных цветовых систем в Stripe
Подробное исследования о том как создать разнообразную цветовую палитру, но при этом учесть все нормы доступности
Design
Pitch
Продвинутое создание красивых презентаций
Tools
Design
Сколько стоит время сотрудника?
Подробно о зарплате сотрудника со всеми налогами
Tools
Deno
Вроде как замена NodeJS
Tools
Development
Все о дизайне кнопок
Все, что вам нужно знать о дизайне кнопок в интерфейсе
Design
Подборка полезных Google-таблиц
Для учёта финансов, оценки навыков, создания отчётов и других целей
Tools
browser 2020
Описание всех возможных браузерных API
Frontend
Tools
Optima
Редактор для осмысленной работы с текстом
Tools
storybook-addon-figma
Позволяет добавить пример макета прямо из фирмы для сравнения компонентов
Figma
Frontend
Design
easymoney
Библиотека для работы с денежными значениями в JavaScript и Typescript
Frontend
Tools
Hamok
Сервис для быстрого создания презентаций для макетов на разных устройствах
Design
Tools
Columns
Приложение для создание множества разных списком
Design
Tools
Стать профессионалом
Три шага в верном направлении
Design
Сетка для печати
Инструмент для настройки разных сеток и сохранении для печати
Tools
Design
Типографская раскладка
Раскладка для клавиатуры от Ильи Бирмана
Tools
Beans
Облачный кардхолдер
Tools
Spacing Manager
Помогает настроить внутри одного компонента
Figma
Design
Главред в Figma
Плагин главреда в Figma
Figma
Design
Map Maker
Добавляет карту в проект
Figma
Design
Полезные плагины для Figma
Это список плагинов, которым я смог найти применение
Compilation
13 links
Figma
Design
Get Waves
Генератор волн и кривых с заливкой
Figma
Design
Wave & Сurve
Генератор кривых линий
Figma
Design
Redlines
Помогает документировать макет для разработки
Figma
Design
Marka Email Generator
Генерирует шаблоны электронной почты HTML
Figma
Design
Sticky Notes
Стикеры-заметки для размещения в проекте
Figma
Design
Typographer
Отформатируйте текст с помощью типографских элементов
Figma
Design
Typograf
Создаёт типографические элементы
Figma
Design
Design Lint
Проверка макета
Figma
Design
Webgradients
Генератор градиентов
Figma
Design
Contentful to Figma
Позволяет использовать данные из Contentful в макетах
Figma
Design
Специализация дизайнера
Как можно сужать свою специализацию
Design
10 мелких ошибок в дизайне
Возвращение правила: «Не заставляйте меня думать»
Design
Зачем дизайнеру дружить с Tilda?
Плюсы и минусы использования Тильды
Design
Tools
Как оценивать свой прогресс
Как оценивать свой прогресс и что считать нормальным развитием?
Design
Работа в офисе: плюсы и минусы
Автор делиться личным опытом после перехода с удаленки в офис
Design
strapi.io
CMS для фронтенда
Frontend
Tools
Unshaky
Программа помогает исправить проблемы с клавиатурой на macbook pro 15
Tools
Oh My Zsh
Улучшаем iTerm
Tools
Ripple эффект
Анимация эффекта волны
Design
Frontend
Как технический долг убивает ваши проекты
Что это такое, как понять проблему и что с этим можно сделать
Tools
JAMstack
Как создать свой блог используя Gatsby + Contentful + Netlify
Frontend
Tools
Nextjs Custom Document
Изменение подгружаемых скриптов и вообще всего что есть теге html
Frontend
Неоморфизм
Готовые стили оформления
Design
Figma
Ключевые метрики для дизайн-менеджера
Как понять эффективность дизайн-команды
Design
Почему мы не делаем то, что запланировали
Как одна особенность мешает нам добиваться поставленных целей
Tools
Плагины Figma 11 часть
Просто хочу сохранить для себя ссылку на эту рубрику
Figma
Design
bettertouchtool
Делаем Touch Bar полезным
Tools
Чекбоксы и переключатели
Про семантику элементов и когда их использовать
Design
granim.js
Анимированные градиенты
Design
Frontend
Tools
Типографика digital-продукта
Как собрать систему текстовых стилей сложного сервиса, не уходя в крайности.
Design
Про стили наведения, фокуса и активного состояния
Подробно про каждое состояние и почему их надо разделять
Design
Frontend
15 методов работы с массивами
Самое необходимое про массивы в одном месте
Frontend
Интуитивно понятный call to action
Очень простые, но полезные советы по организации основных действий экрана
Design
Дизайн деструктивных действий
Используйте красные предупреждающие сигналы и другое
Design
Композиция
Плохая композиция убьет сайт, даже если контент интересен
Design
Психология рейтинговых систем
Должны ли мы перестать использовать звезды?
Design
Tools
Продуктивность это управление вниманием
А не управление временем
Tools
Design
10 эвристических принципов
Эвристические принципы помогают определить, где дизайн интерфейса не обеспечивает хороший опыт
Design
Модульные сетки в работе UX-дизайнера
Много информации про сетки, как их использовать и как это влияет на пользователей
Design
Mixpanel
Альтернатива для сбора данных статистики
Frontend
Tools
Amplitude
Альтернатива для сбора данных статистики
Frontend
Tools
Как анимация влияет на UX
Анимация как часть более качественного взаимодействия с продуктом
Design
Nextjs
React SSR фреймворк
Frontend
Development
Скруглённые углы проще для восприятия
Немного теории почему скруглять углы это хорошо
Design
Скруглённые или остроугольные?
Че же блин делать с углами? Разбор с аргументами
Design
Популярные мифы о методах обучения
Полезно для дизайнеров, чтобы не питать иллюзий про получение опыта пользователя
Design
Manifest
Странные, но интересно сделанные заметки прямо в браузере и на одной странице
Design
Tools
Орфо онлайн
Совершенно ужасно выглядит, но работает. Проверка орфографии и пунктуации
Tools
Фреймворк для визуального программирования
Модульный фреймворк для визуального программирования. Редактор узлов прямо в браузере.
Frontend
Tools
Contentful
Облачная CMS для создания сайтов без бекенда
Tools
Headless CMS
Статья о том как выбрать облачную CMS, чтобы не пилить бекенд
Tools
NodeGui
Библиотека для создания кроссплатформенных дескоптных приложний
Tools
Development
zeit.co
Платформа для хостинга статичных сайтов, с поддержкой SSR фреймворков
Tools
Frontend
Next.js + Redux
Простой пример для интеграции Redux в Next.js SPA
Frontend
Development
Atlassian design
Как устроена дизайн-система Atlassian
Design
Как стать лидером творческой команды
Абстрактор об очевидно, но очень интересно
Design
Не мудрите с формами входа
Плохие и хорошие паттерны формы авторизации
Design
Мир не вертится вокруг UX
Прекрасная статья об экзестенциальном кризисе и понимании дизенром ценности своей работы
Design
Визуальный сахар
Про злоупотребление визуальным сахаром в дизайне
Design
Как упростить дизайн
Собрание эвристик для понимание процесса упрощения
Design
Design tokens with Figma
Как построить работу с дизайн токенама с помощью Figma API
Frontend
Tools
Design
50 day’s challenge
Описание опыта участия в челендже
Design
Moveable
Библиотека для скейла, драгенддропа и других манипуляций с объектами
Frontend
Tools
JSON from figma file
Тулза для получение данных с figma api. Хорошо подходит чтобы просто разобраться в api
Tools
uxcrowd
Тестирование вашего сайта реальными пользователями
Design
Tools
Секреты использования семантической верстки
Самое важное в этой статье это примеры и объяснение почему семантическая верстка лучше
Frontend
Справочник CSS
Большой и понятный справочник по CSS свойствам на русском
Frontend
У верстальщика под рукой
Самое необходимое для вертски в повседневном использовании
Compilation
8 links
Frontend
Анимации и загрузки
Несколько примеров анимаций для улучшения пользовательского опыта
Compilation
8 links
Design
Frontend
Памятка пользователям ssh
Сохранил ради раздела алиасов, но информации про ssh очень много
Tools
tesseract.js
Библиотека для распознавания текста на изображении
Frontend
Development
Search by Muzli
Гугл для дизайнеров
Design
Tools
v8n
Библиотека для умной валидации на js
Frontend
Основы работы с файлами в Nodejs
Как работать с файловой системой средствами Node.js
Development
Dockerizing a React App
Быстрый способ поднять CRA в докер контейнере
Development
Frontend
LocalStorage
Почему не стоит использовать
Frontend
Генератор чата
Для создания реалистичных скриншотов
Design
Tools
CSS Grid Ninja
Тонкости использования гридов
Frontend
fuzzyjs
Неточная логика поиска в js
Frontend
Команда ssh-keygen
Генерирует ssh ключ, подробно про все возможные параметры
Tools
Figma — как единая точка правды
Почему Figma это хороший инструмент для всех кто участвует в процессе дизайна
Design
Производительность фронтенда
Разбор важных метрик производительности. Как измерить и повлиять на них
Frontend
7 полезных мелочей JS
7 полезных и неочевидных советов
Frontend
SvelteJS
Статья про новый (относительно) js фреймворк
Frontend
Tools
Tuemilio
Инструмент сбора данных о потенциальных пользователях
Tools
Overlay Scrollbars
Пакет для замены дефолтного скрола браузера
Frontend
Emojipedia
Библиотека всех эмоджи
Design
Рендер большого списка
Как делать действительно огромные списки без потери скорости отрисовки
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
Мощь системы поощрений
Перевод статьи автор оригинала — Николас Крамер
Design
Модальность
Одна из концепций UX, которую большинство дизайнеров не до конца понимают
Design
Как спрашивать у пользователей при проведении UX-исследования
Очень хорошая тема для тех кто проводить интервью
Design
Чего мне никогда не говорили о CSS
CSS это тоже язык программирования и у него есть свои особенности
Frontend
Три Больших Лжи о JavaScript
Скорее не про ложь, а про устоявшиеся стереотипы
Frontend
hotkeys.js
Библиотека для обработки нажатий на клавиатуру
Frontend
Eva Icons
Open Source icons
Design
Frontend
Темы для VSCode
Много самых разных тем для редактора
Tools
Генератор grid layout
Grid сложная штука, генератор поможет лучше разобраться или даже сделать готовую для себя сетку
Frontend
Animate on Scroll
Легковесная библиотека для создания действий по скролу
Frontend
Design
Всё (или почти всё) о пробеле
Пробел не так прост как кажется, особенно если причитать статью
Design
Frontend
Распознавание чеков
Google Docs с помощью ABBYY OCR SDK
Tools
API для расшифровка текста на картинке
Описание ABBYY Cloud OCR SDK
Tools
Checklist Design
Список из пунктов что надо сделать для реализации дизайна разных сущностей
Design
Визуальный редактор
Красивый и удобный редактор
Frontend
Tools
react-snakke
Индикатор проскроливания страницы
Frontend
react-fontawesome
Пакет Fort Awesome для react приложения
Frontend
SCSS — немного практики
Реальные примеры в пользу использования SCSS
Frontend
drone.io
Отличный CI/CD для Docker контейнеров
Development
Tools
Mini search
Легковесная библиотека для простого поиска по по тексту на JS
Frontend
Development
Token-Based Authentication
Про токены, JSON Web Tokens (JWT), аутентификацию и авторизацию
Frontend
Development
Шпаргалка с командами Docker
Все самые необходимые команды под рукой
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
Машинное обучение с Node.js
При помощи библиотеки Tensorflow.js
Tools
Development
Принципы функционального программирования в JavaScript
Немного о том что это такое и как это можно использовать в JS
Frontend
Возможности ES2018
Упрощение синтаксиса уже доступных возможностей JS
Frontend
Development
React Lazy Loading and Suspense
По сути все сводиться к динамическому импорту
Frontend
Верстка градиента с мягким переходом
Обычный линейный градиент имеет резкий переход, пример как это исправить
Frontend
Подсказка для анимации UI
Несколько хороших примеров анимации взаимодействия элементов
Design
Notion
Приложение для заметок, досок, планирование и тд
Tools
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
User-friendly CLI
Для создания крутых возможностей выбора и ввода прямо в консоле
Development
Инструменты Андрея Романова
Небольшой список инструментов
Tools
Замыкания
Замыкания в JavaScript для начинающих
Frontend
Пакет для склонений и определения пола
Львович - пакет для склонения названий городов, определения пола по имени фамилии и отчеству, склонения падежей русских имен, фамилий и отчеств
Frontend
Правильное использование анимации в UX
Достаточно примеров как стоит делать и почему
Design
Cogear.js
Static websites generator
Frontend
Tools
Fetch
Метод fetch: замена XMLHttpRequest
Frontend
Понимание таймеров в JavaScript
Callback-функции, setTimeout, setInterval и requestAnimationFrame
Frontend
Словарь терминов
Наверное все возможные термины и расшифровка к ним
Frontend
Дизайн система в фигме
Очень подробный пример как это может быть
Design
Спецификация никому не нужна
Главная мысль: спецификация не тех задание, а база знаний
Design
Про удаленную работу
Тут не про дизайн, но применимо ко всем на удаленке
Design
Что такое this
Подробно о том что такое this и как его использовать
Frontend
Набор градиентов
Красивые, многоцветные, плавные и не очень
Design
React. Управление рендерингом
О том как можно улучшить производительность проекта на react
Frontend
Local и Session storage в React
Просто как использовать локальное хранилище браузера в React
Frontend
Пользовательские сценарии
Что это такое, как и для чего их нужно строить
Design
12 вопросов и ответов по JavaScript
12 ответов на достаточные простые вопросы, о которых вроде бы мало говорят
Frontend
Пристальный взгляд на CSS архитектуры
Поверхностный взгляд на построение CSS архитектуры, хотя в заголовке написано что пристальный
Frontend
Основы TypeScript
Это наверное самые основы, но для знакомства вполне
Frontend
NEW
Создание объектов через "new"
Frontend
Оптимизация изображений
GUI и CLI для Nodejs
Frontend
Development
Как тестировать верстку
Как и зачем тестировать верстку?
Frontend
CMS для статичных сайтов
Вдыхает жизнь в статичные сайты
Frontend
Tools
Облачный хостинг для библиотеки компонентов
Инструмент должен быть удобным для больших проектов и распределенных или просто больших команд
Frontend
Tools
Примеры UX от известных приложений
Подробные разборы кейсов от известных компаний
Design
Анимация в браузере
CSS анимация прямо в браузере
Design
Tools
Frontend
Структура и наименование компонентов
Вечный вопрос какую выбрать структуру проекта. Это один из возможных вариантов
Frontend
Закрой Dribbble
3 вещи, которые помогут в карьере больше чем портфолио
Design
Стрелочные функции VS Обычные функции
Спойлер: никто не выиграл. Просто плюсы и минусы
Frontend
Console на полную
Если уж и использовать отладку через console, то на полную
Frontend
Parallax footer
На чистом css
Frontend
Sketch или Figma
Раунд #100500
Design
Pulse effect
На чистом css
Design
Frontend
Z-index
Еще одна статья рассказывающая все о z-index
Frontend
Автокомплит
Автокомплит — для помощи человеку, не для проверки
Design
Что такое UX/UI дизайн на самом деле?
Объяснение для новичков и тех кто совсем не в теме
Design
Что такое UX/UI?
Очередная статья о том что это такое
Design
Отличие UI от UX?
Подробный разбор часто используемых терминов
Design
Методы массивов и объектов
Методы массивов и объектов в JavaScript, которые заменят циклы
Frontend
Почему дизайн-систему вы делаете не вовремя?
Из статьи складывает ощущение что дизайн-система всегда не вовремя и заморачиваться вообще не стоит
Design
fullstack-дизайнер
Для меня идеальное самоопределение
Frontend
Design
Symbol, Iterator, Generator
Че это вообще такое и зачем это использовать
Frontend
Три уровня дизайна
Дизайн продукта, дизайн взаимодействия и визуальный дизайн
Design
Создание интерактивной карты
Новый инструмент для создание интерактивной карты пользовательского поведения
Design
Определение понятия «Дизайн-система»
Достаточно точно и подробно описано что это вообще такое и где можно посмотреть примеры использования
Design
React Context API
Как можно сделать смену языка или темную тему на примере работы с новым Context API
Frontend
Создание разных цветовых тем с помощью CSS переменных
По сути не обязательно использовать именно нативные переменные, это скорее описание подхода
Frontend
CSS Blocks
Замена БЭМ и css modules. Эволюция лучших практик
Frontend
console logger
Легко настраиваемый и очень вариативный консольный логгер
Development
Интерфейс для управление docker
Вроде очень просто ставиться и помогает запускать и останавливать контейнеры, создавать новые. Короче полное управление докером с помощью интерфейса.
Development
Джуниор в 33
Как быть если тебе 33 года а ты все еще джуниор
Design
CSS — это дизайн!
Почему дизайнеру полезно уметь верстать
Design
Frontend
Понимание жизненного цикла React-компонента
При работе с react очень важно понимать жизненный цикл компонента
Frontend
Материалы по фронтенду
Примеры с описанием для разных фреймворков
Frontend
Learn X in Y minutes
Подсказка, наверное, по всем возможным языкам
Tools
Тестовые в студию Чулакова
Есть интересные работы и подробные презентации
Design
Четыре вопроса про БЭМ
Четыре вопроса и ответы к ним
Frontend
Дизайн в условиях хакатона
Советы вполне подходят не только для хакатона, но и для MVP
Design
Собеседование js разработчика с ответами на вопросы
Доступно написано что надо знать на джуна и выше, для каждой темы есть либо описание либо ссылочки
Frontend
9 полезных приемов для JS
Все суть в заголовке
Frontend
Как стать UX/UI дизайнером
Без образованя и опыта
Design
Курс по верстке
Можно пройти бесплатно, но стоит он всего 10€
Frontend
Как избавиться от лишних отступов у текста
Боремся с line-height с помощью :before и :after
Frontend
Библиотека для анимации react-spring
В библиотеки собраны лучшие практики из другие пакетов для анимации
Frontend
Scroll и scrollbar
Все что надо знать про scroll и scrollbar
Frontend
Рассылка «Интерфейсы без шелухи»
Уже не частая, но не менее интересная рассылка
Design
Спрвочник материалов по дизайну от Антона Жиянова
Структурированные подборки материалов по многих важным вопросам
Design
Как получить максимум информации о пользователе
Список открытых api для получения различной информации
Frontend
Cookies
Вообще все что надо знать о cookie
Frontend
Набор компонентов antd Pro
Дополнительный набор про компонентов для фреймворка antd для еще более быстрого прототипирования
Frontend
Ускорение SSR
Интересный способ оптимизации скорости серверного рендеринга
Frontend
Development
Google Page Speed
Проверка скорости загрузки страницы
Frontend
Tools
Валидатор HTML разметки
Расскажет о самый банальных ошибках в разметки
Tools
Frontend
Каталог дизайн систем
На мой взгляд у рамблера самая крутая система из всех представленных, но они все на уровне
Design
Антипаттерны в React
Не делай как все, будь лучше
Frontend
Пример прелоадера
Почти как на медиуме
Frontend
Design
Коллекция CSS снипетов
То с чем верстальщики по всему миру сталкиваются каждый день
Frontend
Figma freebies
Дизайн системы, дашборды и всякое такое, но может и полезные плагины появятся
Design
Быстрый старт на create-react-app
Статья примечательна тем что показан полностью процесс от 0 до деплоя на статичный хостинг
Frontend
Хостинг для статичных сайтов
Давно пользуюсь этим хостингом когда надо просто показать верстку, но он способен и на большее
Frontend
Tools
Пример модального окна
У меня в заметках был помечен как «правильный», насколько это правильно не знаю, но способ имеет право на жизнь
Frontend
Игра на CSS
Хороший пример того как можно использовать CSS
Frontend
Процесс выбора шрифта
Одна из многих, но достаточно неплохая статья как можно подойти к выбору шрифта
Design
Icons set
В заголовке написано что набор иконок для лендингов, но использовать можно хоть где. Разделены тематически
Design
Подборка css градиентов
Можно скачать картинкой или скопировать код
Frontend
Конвертировать psd в sketch файл
От Avocode
Design
Немного про сглаживание веб-шрифтов
CSS методы визуальной оптимизации шрифтов
Frontend
Пакет для удобной верстки писем
Создатель пакета почему-то удалил все необходимое из ветки master, но github все помнит
Frontend
Webpack dashboard
Удобный дашборд на electronjs
Frontend
Tools
Работа с файлами в NodeJS
Запись, чтение, загрузка
Development
Оптическое выравнивание компонентов
На примере модального окна
Design
Настройка Touchbar
Кастомизация Touchbar на Macbook
Tools
Как работает JS
Рендеринг страниц и выводы по оптимизации производительности
Frontend
Инструменты JS разработчика
Библиотеки, тестирование и еще немного
Frontend
Авторизация без ввода пароля
Автоподставление логина и пароля
Frontend
Исходник альбома для прототипирования
Альбомный лист в точку, можно проектировать экраны любого размера
Design
Анимация с помощью svg
Очень реалистичный вариант создания несложной (а можно и сложной) анимации без регистрации и смс
Design
Frontend
Про коллапс отступов
При свойстве display: block равные отступы (margin) схлопываются в один, статья про то как это работает. Лично я просто использую display: inline-block в таких случаях
Frontend
Tinkoff Design System
Один из подходов к организации дизайна
Design
Гайдлайн от Контура
Подробный гайдлайн по элементам интерфейса от контура, стоит посмотреть не как руководство к действию, а пример организации информации
Design
Документы для фрилансера от ТЖ
Есть разные варианты документов, если вариант договора от ТЖ не понравился
Design
Документы для фрилансера
Вариант договора от ТЖ
Design
Библиотека для анимации
Разнообразные примеры анимации, жаль что в вакууме
Design
Frontend
Алгоритмы для начинающих
Несколько хороших примеров на ES6
Frontend
Установка Nodejs на Ubuntu
Лучше всегда выбрать установку через nvm, что бы можно было легко выбрать подходящую версию
Development
Смена версии Nodejs с помощью Homebrew
Просто подсказка для смены версии
Development
Redaction. Простая работа и организация redux actions
Позволяет не использовать файл const, да и в целом меняет подход работы redux
Frontend
Nodejs API + Docker
Понятное руководство, далеко не исчерпывающее как написано, но закрывает некоторые вопросы
Development
Отличный пример переверстки объявления
Кратки, но по делу разбор переверстки
Design
Как больше никогда в жизни не работать в стол Максим Ильяхов
Видео не о том как не делать в стол, а как не браться за проекты которые не будут реализованы
Design
Фреймворк компонентов для react
Позволяет быстро создавать прототипы для любой панели управления
Frontend
Как воткнуть react в существующий сайт
Интересная статья, такой подход позволяет итерационно переводить уже существующий сайт на react, или использовать его для отдельных частей проекта
Frontend
30 css селекторов
Постоянно забываю как пишется :nth-child(n)
Frontend
Генерация jpg с помощью javascript
Мощная штука, теоретически так можно кастомизировать изображения для шаринга в социальные сети и еще много чего
Frontend
Верстка это не тупо
Хоть и написано про верстку, но актуально скорее для всех веб-разработчиков
Frontend
React состояние загружаемых данных
Хороший способ хранить состояние, избегая избыточности
Frontend
Пример react SSR с помощью parcel
Parcel, конечно, сомнительный инструмент, но уже есть примеры SSR для react
Frontend
Development
Parcel замена webpack
Проект интересный, но пока очень сырой. Возможно когда-нибудь и будет полноценной заменой
Frontend
Начало работы с NodeJS
Я прочитал этот материал уже достаточно поздно, но его пользы это не отменяет. Все что надо знать для старта.
Development
Как использовать 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
