Ресурсы для разработчиков интерфейса 2022

Ресурсы для разработчиков интерфейсов (серия из 3 частей)

1Ресурсы для разработчиков интерфейса 2020

2Поделитесь некоторыми внешними ресурсами!

3Ресурсы для разработчиков интерфейса 2022

В статье рассмотрим актуальный список ресурсов на 2022 год.

Большинство источников информации бесплатны, но некоторые платные. Можно порекомендовать вам подписаться на egghead.io . Многие разработчики довольны данным сервисом.

Многие открытые библиотеки предоставляют бесплатный доступ к платным ресурсам, таким как LinkedIn Learning. Перед покупкой определенного контента загляните в интернет, может есть источники в открытом доступе. 

JavaScript

Независимо от того, начинаете ли вы с библиотеки или фреймворка, в какой-то момент вам как фронтенд-разработчику потребуется более глубокое понимание JavaScript. Вот несколько отличных ресурсов, которые помогут вам в этом.

• JavaScript 30 — Классическая забота Веса Боса . Хорошие проекты, помогающие укрепить некоторые основы JS.
• JavaScript Katas.

• Patterns.dev

«Learning Patterns»: Patterns.dev — бесплатная книга на 435+ страниц по шаблонам дизайна и производительности JavaScript + React от @lydiahallie и I. В Интернете, ePub и PDF.07:36 – 20 декабря 2021 г.

• Доклад Филипа Робертса на JSConf EU является отличным объяснением цикла событий.

• Джейк Арчибальд : в петле – JSConf.Asia

• Задачи, микрозадачи, очереди и расписания — отличный пост Джейка Арчибальда о более сложных вещах.
• Серия статей Лидии Холли «Визуализация JavaScript» о DEV . Лидия отлично объясняет концепции с помощью визуализаций.
• Просто JavaScript — от Дэна Абрамаова и Мэгги Эпплтон. Как говорится на сайте:

Откройте для себя и перестройте свои ментальные модели JavaScript.

• Советы, как начать отладку JavaScript.

Машинопись

TypeScript с каждым годом становится все популярнее. В современном мире становится необходимостью изучать его для более продуктивной работы.

• Интересные советы от Мариуса Шульца — у него есть масса отличных постов в блоге о TypeScript и несколько отличных курсов по Egghead.
• Практический продвинутый TypeScript — интересный курс от Rares Matei.
• Тип 2021 года команды TypeScript | Серия лечений о DEV — Орта из команды TypeScript в этом году собрала несколько удивительных задач.
• Площадка TypeScript. Площадка TypeScript постоянно совершенствуется и является отличным местом для тестирования.
• Изучайте TypeScript с нуля с Джеймсом Генри — отличный бесплатный курс от Джеймса Генри. 

Помощь в повышении своего уровня CSS.

• Современный сброс CSS Энди Белла
• Сброс CSS Джоша В. Комо
• Создание красивых теней в CSS
• CSS для разработчиков JavaScript
• Сетка на примере
• cssgrid.io
• Современные CSS-решения
• SmolCSS
• Каждый макет
• Учебник по запросам контейнеров CSS

HTML

Если вы занимаетесь веб-разработкой в ​​течение длительного времени, вы должны ознакомиться с семантической разметкой. Передайте заказ на <div />суп.

• МДН как всегда
• HTMHell — отличный сайт с ужасными примерами HTML и способами их исправления.
• Периодическая таблица HTML-элементов — забавный вариант классической периодической таблицы.

Доступность

Доступность очень важна, и, честно говоря, если вы хотите выделиться как разработчик интерфейса, повышение уровня здесь — хороший шаг.

• Средство проверки контрастности WebAIM — простой способ проверить цветовой контраст
• ButtonBuddy — забавный интерактивный инструмент для создания доступных кнопок.
• Инклюзивные компоненты — отличный сайт о том, как создавать инклюзивные компоненты.
• Документация Forem Developer по доступности — я предвзят, но мне нравится наша документация a11y
• 5 вещей, когда проверяют доступность запроса на слияние — отличный контрольный список вещей, на которые следует обращать внимание при рассмотрении запросов на вытягивание, связанных с внешним интерфейсом.

 5 вещей, о которых я думаю, когда проверяю запрос на доступностьSuzanne Aitchison (она/она) ・ 30 марта 21 ・ 5 мин чтения# a11y # вебдев #javascript

Анимации

Анимация — отличный способ улучшить взаимодействие с пользователем, но помните: не добавляйте анимацию на свой сайт ради добавления анимации. Вот работы замечательных людей, которые стоит проверить в этом пространстве.

• Что-нибудь от Джея Томпкинса
• Все от Кэсси Эванс
• Отличный пример @coffeecraftcode — настоящий гений, когда дело доходит до анимации. Ознакомьтесь с ее профилем codepen и курсами LinkedIn . 
• предпочитает-уменьшенное-движение: Татьяна Мак использует подход без движения к анимации. Отличный вариант, чтобы узнать о анимации больше.

Джемстек

• Исследователи Jamstack
• jamstack.org
• Инкрементная статическая регенерация
• Распределенный постоянный рендеринг
• Понимание рендеринга в Jamstack

Расширения браузера

• WAVE – «оценивайте веб-контент на предмет проблем с доступностью прямо в браузере».
• axe — «протестируйте свои веб-приложения, чтобы выявить и решить распространенные проблемы с доступностью».
• Accessibility Insights for Web – «помогает разработчикам находить и устранять проблемы доступности в веб-приложениях и сайтах».
• Если вы работаете с React: React DevTools ( браузеры на основе Chromium | Firefox )
• Если вы работаете с Preact: Preact DevTools
• VisBug — инструменты отладки веб-дизайна с открытым исходным кодом.

Тестирование

Тестирование — это обширная тема, поэтому коснемся самой ее сути, но знать, что тестировать, очень важно. В конце дня, когда вы что-то отправляете сделанное задание, спросите себя: «Чувствую ли я себя уверенно, отправляя это?».

• Многие являются поклонниками Cypress, и часто используется его в Forem (программное обеспечение, на котором работает dev.to). Это отличный ресурс, если вы хотите погрузится в сквозное тестирование. Ознакомьтесь с Написание тестов Cypress
• Тестирование набора инструментов библиотеки. Будь то компонентные тесты в React, Svelte, старый добрый HTML/CSS/JS или комплексное тестирование, Testing Library поможет вам.

Облачные IDE/полноценные среды разработки

• Гитпод
• vscode.dev
• CodeSpaces (если у вас есть доступ)
• Stackblitz
• КодПесочница
• vscodetips.com — сообщество, обсуждающее все, что связано с VS Code, включая облачные IDE.

Жить на краю

На The Edge происходит много интересного. 

• Cloudflare Workers — включает в себя такие вещи, как Durable Objects, хранилища ключевых значений и т. д.
• Страницы CloudFlare
• Обработчики краев Netlify
• Краевые функции Vercel

Инструменты

• Сборник рассказов — Learnstorybook.com
• Если у вас установлен Node.js и вам нужно настроить файл gitignore проекта на основе JavaScript из корня проекта, запустите npx gitgnore node(это работает и для других языков, или, если вы опустите язык, он предоставит вам список всех поддерживаемые gitignores)
• Посылка
• Вите
• Турборепо

 Почему TurboRepo станет первым большим трендом 2022 годаswyx ・ 27 дек. 21 ・ 6 мин чтения#devtools #резюме #javascript

Книги

Отличные источники для чтения.

• Перемещайте вещи с помощью CSS
• TypeScript за 50 уроков
• Инклюзивные компоненты: Книга

Twitch-стримы

Хорошие разработчики часто смотрят Twitch. Многие стримят самостоятельно на livecoding.ca , а также на стриме DEV Twitch . Вот несколько замечательных людей, за которыми стоит следить во всем, что касается фронтенда, чтобы подчерпнуть опыта.

• TrostCodes
• Стефани Эклз
• Джей Томпкинс
• Майкл Чан
• Бен Майерс
• Учись с Джейсоном

Статья достаточно обширная, но все равно много информации, которую можно добавлять для расширения знаний и пополнения практических знаний. Поэтому следите за обновлениями и практикуйтесь! И все получится!

Источник статьи: http://dev.to/