Оффлайн
- 20.06.2022
- 23 845
- 218
- 36
- Награды
- 10
- Пол
- Муж.
- Автор темы
- Администратор
- Модератор
- Команда форума
- #1
Полезные ресурсы для Frontend-разработчика
- – сервис для записи экрана в gif со следящим курсором(пример на хабре)
- – имитация аэросъемки, позволяет делать ролики, снятые будто в полете над Землей или даже из космоса
- – генератор аватарок пользователей
- – Бесплатные Google Слайды и PowerPoint шаблоны
- – цветные бэйджики для GitHub
- – онлайн сервис для создания трехмерных объектов с заголовком. Можно выбирать из 16 объектов с разной формой, цветом и текстурой. Объекты можно настраивать и добавлять им разные эффекты
- – найти ментора по любому направлению из крупных компаний
- – еще один сервис для поиска ментора
- – проверка засветился ли пароль в списке скомпрометированных
- – все для работы с пдф в одном месте
- – подработка
- – красивые скриншоты кода
- - красивые скриншоты кода
- - красивые скриншоты кода
- - красивые скриншоты кода от Raycast
- – задачи на react, js, css и тд
Разработка
- – запахи кода, рефакторинг, паттерны
- – генерация апишки, полезно для тестовых или демок
- – изучение git в игре
- – переместить лягушку на кувшинку с помощью flexbox
- – генератор фавиконок под разные устройства (по совету HTML Academy)
- – автоматичское добавление браузерных префиксов для css-свойств
- – сборник всех методов и свойств в Javascript
- – сервис для форматирования HTML, CSS, JS или наоборот, минификации
- – спецификация HTML
- – поделиться кодом быстро и без боли: скопировал вставил
- – онлайн конвертация SVG в React компонент
- – может оценить стоимость сайта (по SEO)
- – вдохновение для креативного фронтендера Web GL, Three.js
- - специфичность разных селекторов ( старый)
- – паттерны популярных компонентов
- – Layout & Web Vitals patterns в блоге гугл
- – конвертация font awesome иконок в png. Например для верстки email
- – сервис с API для загрузки файлов
- – генерация шрифтов в разные форматы
- – удобный список html тэгов с описанием и примерами
- – документация по HTML от Mozilla
- – генератор шумов для фона
- – аналог Can I Use, только определяет можно ли вложить один тег html в другой
Тренажер по emmet - – генератор сетки на гридах
- – конструктор webpack и parcel конфигов
- – все HTML тэги в периодической таблице
- – руководство по HTML-элементам в <head>
- – сканирует браузер на поддержку тех или иных свойств
- – сайт для it помощи
- – сервис для расшифровки хэшей
- – бесплатные SSL сертификаты на 3 месяца
- – заработок на вкладе в open-source
- – построить диаграмму для md файлов
- – как маркдаун для диаграмм и уже встроен в гитлаб
- – онлайн книга паттернов Javascript и React (от Addy Osmani)
- - Node.js Headless CMS
- – считает время рендера HTML элементов
- – бесплатный аналог Chat GPT на русском
Библиотеки ориентированные на доступность
- – от
- – от Adobe
- – от Tailwind
- – из поста artalar
UI Kits и дизайн-системы
- – от Рамблера
- – от Uber (!использует styled-components)
- – аналог material ui
- – от Газпром нефти, хорошая документация
- – в архиве но был очень преочень красивый сайт с документацией (найти)
- – селекты не стилизованы
- – очень красивая, построена на чакре, для админок
- – каталог отечественных компонентных дизайн-систем
- – дизайн система Nordhealth
- – дизайн система Shopify
- – от GitHub
- – от Вконтакте
- – от Яндекс, есть поддержка rtl
Анимации
- – простые CSS анимации наглядно
- – набор готовых анимаций для CSS transition
- – поиграть с кривыми безье
Оптимизация
- – мощный онлайн инструмент для сжатия и конвертации изображений. Умеет в альфа-канал с PNG-8 в отличие от PS
- – оптимизация SVG
- – проверить и сравнить размер разных библотек
- – сайт для тестирования производительности js
- – еще один сайт для тестирования производительности js
Тестирование
- – как выглядит сайт на разных устройствах
- – тестирование сайта на разных разрешениях и ОС
- – по совету Никиты Дубко с Яндекс.Субботника тык
- – тестирование регулярок
- – расширение для Chrome: отключить CSS, JS, flex и пр.
- – расширение для Chrome: одновременный скрол всех разрешений адаптива, синхронизация кликов на всех разрешениях. Не забывать отключать после использования, а то блочит JS в магазине расширений Chrome.
- – расширение для Chrome. Чтобы проверить как будет работать сайт без JS, CSS, отключить куки, работа с формами и многое другое. ТОПЧИК
- – сменить User-Agent на любой другой
- – отключить/включить на сайте гриды, флексы, sticky и многое другое
- – еще один сервис для Good First Issue
- – сколько ваш сайт потребляет углерода
- – сайт для тестирования блокировщиков рекламы
Email
- – проверить письмо на вероятность попасть в спам
- – можно вставить верстку и разослать на любую почту чтобы протестировать письмо
- - Получать письма через сервис Firefox Relay чтобы узнать откуда приходят спам письма
Шрифты
- – чумовые кириллические шрифты
- – подобрать letter-spacing для улучшения LCP
- – автоматически подбирает самый похожий шрифт. Но настройкам size-adjust и ascent-override верить нельзя.
Иллюстрации и иконки
- – бесплатные полезности для фигмы: ui компоненты, иллюстрации, плагины
- – конструктор иллюстраций
- – бесплатные иллюстрации от дизайнера из Мексики Пабло Стэнли (есть плагин Blush в Figma для быстрой вставки в проект)
- – набор готовых иллюстраций от Icons8
- – бесплатно только коллекция Phonies
- – самый большой набор иконок на любую тему в едином стиле
- – еще один большой набор иконок на любую тему
- – генератор абстрактного бэкграунда
- – удобное создание волн и искривлений часто используемых на лэндингах с экспортом в SVG и CSS
- – конструктор коммерческих видео
- – файлы фигма в флюент дизайне, красивые fluent emoji
- – коллекция всяких разных прикольных абстрактных картинок и генераторов
Цвет
- – генератор цветовых схем
- – генератор градиентов по введенному цвету
- – коллекция готовых градиентов
Последние темы в этом разделе:
- [Анна Блок] Типичный верстальщик - Супер Старт 2.0
- [Анна Блок] Базовый курс для верстальщиков
- [HTML Academy] HTML и CSS. Адаптивная вёрстка и автоматизация (2023)
- [Udemy] [Бауыржан Абдигалин] Создание многостраничного сайта на Wordpress с нуля (2024)
- [Dmitrii Fokeev] [Udemy] Верстка и создание веб сайтов - с нуля до результата! (2024)
- [HtmlAcademy] HTML и CSS. Профессиональная вёрстка сайтов.(2023)
- Инструкция по установке Скриптов Рулеток
- Как создать свой магазин в DarkWeb
- [Stepik] Курс по WordPress с нуля до результата. Создание сайтов без кода (2024)
- Слив сборник СКРИПТЫ И ЭФФЕКТЫ ПОД ТИЛЬДУ - ЗЕРО-БЛОК - cybergrish
