Рубрики
Без рубрики

Ресурсы разработчика Frontend

Это 2020 год, после года в обзоре, так что давайте начнем с контента 2020 года. … Tagged with Frontend, JavaScript, CSS, HTML.

Это 2020 год, после года в обзоре, так что давайте начнем с контента 2020 года.

Я обновлял свой личный сайт на днях и подумал: почему бы мне не написать о некоторых технологиях, которые я использовал, некоторые инструменты, которые я использую в своем повседневном дне, а также о других ресурсах, которые я использую, даже Если они не повседневно «идут» в отношении фронта. Я также зашел в некоторые ресурсы, которые, я думаю, будут просто полезны.

Пойдем к этому!

Открытый исходный код и бесплатные ресурсы

NetLify

Я использую NetLify На бесплатном уровне, чтобы разместить мой сайт. Они предлагают отличный сервис, и он хорошо интегрируется с GitHub и непрерывной интеграцией. Я не дешев, просто в данный момент мне не нужно больше, чем бесплатный уровень. В прошлом месяце я на самом деле прошел через несколько минут сборки и заплатил небольшую плату, так что теперь у них есть моя кредитная карта … 😆

Я написал об автоматизации моих развертываний для NetLify здесь. 👇

Обновление зависимостей с помощью Devingabot, Cypress и NetLify

Ник Тейлор (он/его) ・ 16 августа ’19 ・ 6 мин. читать

Примечание: Zeit тоже удивительно. Я просто использую NetLify.

Маяк CI

Я еще не использовал это в проекте, только инструменты аудита маяка в браузере, но Maythouse CI выглядит довольно удивительно. Интегрируйте аудиты маяка в вашу непрерывную интеграцию (CI).

Googlechrome/Lighthouse-Ci

Автоматизируйте запуск маяка для каждого коммита, просмотр изменений и предотвращение регрессий

Обзор

Маяк CI – это набор инструментов, которые делают постоянно работать, сохранять, извлекать и утверждать против Маяк результаты как можно проще.

Быстрый старт

Чтобы начать работу с действиями GitHub для общих конфигураций проекта, добавьте следующий файл в ваш репозиторий GitHub. Следуйте Руководство по началу работы Для более полного прохождения и инструкций по другим провайдерам и настройкам.

.github/workflows/ci.yml

name: CI
on: [push]
jobs:
  lighthouseci:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: actions/setup-node@v1
        with:
          node-version: 14
      - run: npm install && npm install -g @lhci/cli@0.8.x
      - run: npm run build
      - run: lhci autorun

Функции

  • Получите отчет на маяке вместе с каждым PR.
  • Предотвратить регрессии в доступности, SEO, офлайн -поддержке и лучших практиках производительности.
  • Отслеживайте показатели производительности и баллы с маяком с течением времени.
  • Установите и сохраните бюджеты производительности на сценариях и изображениях.
  • Запустить маяк…

undraw.co

Этот сайт потрясающий, если вы ищете некоторые качественные иллюстрации в формате SVG или PNG. Katerina Limpitsouni, которая создала Undraw.co, проделала фантастическую работу. Она не на разработке, но Дайте ей подписку и Undraw в Твиттере.

A11Y Инструменты

Я не эксперт по доступности (так много вещей на фронте! 😆), так что инструменты, подобные тем, которые ниже, очень полезны. Кто -то, кто знает немного об этой теме, это Линдсей Копач (@lkopacz). Определенно отличное следствие.

Тота11y

Это отличный инструментарий для визуализации доступности, который был начат Джордан Шилс Пока он работал в Ханской академии.

Хан/Тота11y

Доступность (A11Y) инструментализация визуализации

Инструментарий для визуализации доступности

Попробуйте Tota11y в вашем браузере , или Прочитайте, почему мы построили тота11y Анкет

Монтаж

npm install @khanacademy/tota11y

Включите его прямо перед вот так:

Разработка

Хотите внести свой вклад в Tota11y? Потрясающий! Запустите следующее в вашем терминале:

git clone https://github.com/Khan/tota11y.git
cd tota11y/
npm install

Обзор архитектуры

Большая часть функциональности в Tota11y происходит от его плагины Анкет Каждый плагин получает свой собственный каталог в плагины/ и сохраняет свой собственный JavaScript, CSS и даже руля. Вот как выглядит простая достопримечательность -плугин Анкет

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

index.js объединяет все это.

Tota11y использует различные технологии, в том числе jQuery , WebPack , Вавилон и JSX . Нет необходимости знать все …

Забавный факт, я преобразовал его в расширение Chrome/Firefox для тех, кто заинтересован.

Расширение A11Y, поступающее в браузер рядом с вами

Ник Тейлор (он/его) ・ 1 апреля ’19 ・ 2 мин Читать

топор

Расширение браузера Deque’s Axe – еще один отличный. Это доступно для Chrome и Firefox Анкет Это отлично подходит для поиска проблем с доступностью в вашем приложении.

ВОЛНА

Webaim’s Волна Расширение браузера также отлично подходит для поиска проблем с доступностью в вашем приложении.

cssgrid.io

@wesbos Имеет отличные курсы. Он так хорошо учит чему -то и весело. cssgrid.io Это отличный курс для изучения сетки CSS, который спонсировал Mozilla, и именно так Уэс смог сделать этот курс свободным. Я очень рекомендую это. Обратите внимание на себя, чтобы снова пройти этот курс.

JavaScript 30

Уэс снова с еще одним отличным бесплатным курсом. Проверьте JavaScript 30 Чтобы повысить свою игру JavaScript с забавными небольшими проектами.

Каждый макет

Я купил Каждый макет В продаже в прошлом году, но содержание сайта все бесплатно. Энди Белл ( @hankchizljaw ) и Хейдон Пикеринг делают потрясающую работу.

Некоторые основные сайты

Есть тонны сайтов, так что я просто собираюсь бросить несколько, так как этот пост уже 11 -минутный чтение LOL.

Знать Ваш CSS триггеры

Я не знаю список всех триггеров CSS наизусть, так что CSS Triggers отличный ресурс.

Также, говоря о трюках CSS, вот Короткое, но быстрое объяснение Крис Койер ( @chriscoyier ) о триггерах CSS.

Ката Время

Тот, который я возвращаюсь время от времени, это JS Katas ранее называлось ES6 Katas. Это отличный способ поддерживать ваши навыки JS свежими.

Учебный гейм

Это отличный жанр обучения. Есть платные ресурсы, но пара известных бесплатных:

Что -нибудь Стефани Эклз

Все приведенные ниже ресурсы можно найти в Веб -сайт Стефани Анкет

  • Moderncss.dev – Современные решения CSS для старых проблем CSS
  • smolcss.dev – Минимальные фрагменты для современных макетов CSS и компонентов
  • 11ty.rocks – великий Месяти лет ресурс
  • stylestage.dev – Современная демонстрация CSS, стилизованная сообществом

Машинопись

Я признаю, что этот личный сайт, вероятно, является избыточным для моего личного сайта, который в настоящее время является просто блогом, но на моей нынешней работе мы не используем Машинопись Поэтому я решил сохранить свои навыки TypeScript свежи, используя его.

Сказав это, я работал над несколькими крупными проектами, используя TypeScript и Can 100% говорит, что это позволяет более быстрые рефактор, обнаружение и избегание глупых ошибок. У меня есть мини-серия на TypeScript для тех, кто заинтересован.

Рассмотрите возможность использования TypeScript

Ник Тейлор (он/его) ・ 8 октября ’17 ・ 5 минут прочитал

Если вы были на заборе о TypeScript, подумайте о том, чтобы попробовать в 2020 году. Сейчас существует огромная экосистема типов, и многие популярные фреймворки либо предоставляют поддержку коробки, либо довольно простые настройки, чтобы начать с помощью TyproScript:

Есть также TSDX, которая является фантастической работой Джареда Палмера (@Jaredpalmer). Это отличный инструмент для начальной загрузки для TypeScript для различных типов проектов, и он официально одобрен командой TypeScript.

Джаредпалмер/TSDX

CLI с нулевым конфигурацией для разработки пакетов TypeScript

Несмотря на всю недавнюю шумиху, настройка новой библиотеки TypeScript (x React) может быть жесткой. Между RULLUP , Шутка , tsconfig , Разрешения пряжи , Eslint и Get Vscode хорошо играть …. Есть всего много вещей (и вещи, чтобы испортить). TSDX-это CLI с нулевым конфигуртом, который помогает вам с легкостью разрабатывать, тестировать и публиковать современные пакеты TypeScript-так что вы можете сосредоточиться на своей потрясающей новой библиотеке и не тратить еще один день на конфигурацию.

И знаешь, что? Если вы все еще не фанат типов, это нормально. 😺

Цикл событий JavaScript

Филипп Робертс Поговорите в JSConf EU “Какого черта, черт возьми, цикл событий?” это отличное объяснение цикла событий.

Некоторые наггетсы знания JavaScript заботятся о Джейке Арчибальде

Это определенно отличные часы для тех, кто хочет понять здание цикла мероприятия JavaScript от разговора Филиппа Роберта выше.

У Джейка также есть отличный пост в блоге о Задачи, микротаски, очереди и графики Анкет

Сборник рассказов

Строительница – это отличный инструмент для создания компонентов и систем дизайна. Это началось как инструмент только для React, и с тех пор расширилось до всех основных рамок, а также простых старых HTML. Проверьте LearnstoryBook.com Анкет

Ключевыфрамеры

Я буду первым, кто признает, что не проделал много работы с анимацией, поэтому я много склонен к Google, когда дело доходит до этого пространства. Два джентльмена, которые являются экспертами в анимации, имеют отличный подкаст и канал на YouTube, где они перестраивают анимацию. KeyFramers – это потрясающее сотрудничество @Davidkpiano и @shshaw.

У меня еще есть много эпизодов, чтобы посмотреть и учиться.

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

Новый инструмент Frontend, который выглядит действительно интересным, это Visbug Анкет Я попробовал это кратко, но я должен признать, что я еще не копался в этом слишком глубоко.

Это удобная работа Адам Аргайл Анкет

Обновление 8 января 2020 года: Адам написал мне в Твиттере, что вы можете запустить Tota11y из Visbug. Прикольная штука. Спасибо, Адам!

Примечание. Это расширение браузера в настоящее время доступно только для Chrome.

Инструменты разработчика вашего браузера

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

Кто -то, кто хорошо знает эти инструменты, и я настоятельно рекомендую вам следовать, – это Умар Ханса ( @umaar ). Он находится на DEV и не имеет никаких действий, но ссылки в его биографии могут привести вас в другие места, чтобы найти его в Интернете. У него Отличный информационный бюллетень для Dev Tips , что я настоятельно рекомендую подписаться на.

Играя в пробке

Что происходит с вашими веб -запросами? Похоже, есть пробка. Эти инструменты имеют вашу спину:

  • Fiddler (Кроссплатформенный, но на данный момент это только прилично на машине Windows.) Fiddler был моим первым для чего-либо, связанного с сетью, когда я был на машине Windows. Воспроизведение запросов, изменение полезных нагрузок, прокси -прокси для получения трафика с сайта/приложения, над которым вы работаете.
  • Почтальон
  • Пост -женщина
    Запуск Hoppscotch v1.0 👽 – БЕСПЛАТНО, Fast & Beautiful API -Builder 🎉 Liyas Thomas ・ 5 ноября ’19 ・ 4 мин.

Выбор Джоша Комо

Джош Комо – талантливый фронт, который в настоящее время работает в Гэтсби. Во время праздников он написал в Твиттере некоторые другие замечательные ресурсы с открытым исходным кодом/бесплатные ресурсы, которые я предлагаю вам проверить. Вот ветка твита. Он также отличный след.

JavaScript январь

Эмили Фриман ( @editingemily ) начала это в я верю в 2017 год. Много отличных статей о JavaScript. Это новый январь, так что проверьте javascriptjanuary.com Анкет

Дева!

У Дев так много замечательных постов от людей со всего мира в отношении фронта. Я поделюсь тем, что люблю, но определенно перемещается. Так много замечательных.

HTML может сделать это?

Ananya neogi ・ 25 июня ’19 ・ 2 мин читал

Посты Лидии Халли (@lydiahallie) на JavaScript

Серия Greact Holiday Майкла Чана

Учитесь отреагировать в 25 коротких уроках – React Holiday 2019 ⚛

Майкл Чан ・ 2 декабря ’19 ・ 1 мин прочитал

Visual Studio Code

Это, вероятно, подпадает под очевидную категорию, но стоит упомянуть об этом, так как это открытый источник.

Это был моим редактором, связанными с работой с тех пор, как верьте, или нет в 2015 году. Еще в 2015 году я работал над продуктом для компании электронной коммерции, и TypeScript должен был быть использован на фронте. В то время VS Code был единственным редактором, имеющим поддержку TypeScript. Еще в 2015 году не было никаких расширений для VS -кода. Это было только примерно через полтора года, когда была добавлена поддержка расширения. С тех пор Экосистема расширения взорвался.

Отличным дополнением к экосистеме было Пакет продления живой акции . Это такой отличный способ сделать Пара программирования Анкет 🍐

Если вам интересно, это немного устарело, но вот моя настройка кода VS. В эти дни я катаюсь с Сарой Эдо Ночная сова Тема и замечательный шрифт, Dank Mono (Да, я заплатил за это, но это далеко не ближе к цене оператора моно).

Моя настройка кода Visual Studio

Ник Тейлор (он/его) ・ 23 декабря ’17 ・ 6 минут прочитал

VS кодовые советы

Я создал @VSCODETIPS Аккаунт в Твиттере еще в сентябре 2017 года. Люди, кажется, наслаждаются советами, которые я публикую, или вещи, которые я ретвиту, связанные с VS -кодом. Если VS -код – это ваше джем, подумайте о том, чтобы дать ему следующее.

VS Code Tips также на разработке, но я еще не сделал там много. Вы можете проверить профиль здесь

VS -кодовые советы следуют за

Рафинированное расширение браузера GitHub

Рафинированный GitHub не зависит от Frontend, но многие из нас используют GitHub для работы. Это отличное расширение, доступное для Chrome или Firefox Анкет Расширение Chrome также работает для некоторых браузеров на основе хрома. Те, над которыми я могу подтвердить, это работает Храбрый и новая Microsoft Edge Анкет

Слишком много функций, чтобы упоминать, но мои фавориты автоматически удаляют ветвь после его объединения и побуждают вас создать PR, если вы находитесь на GitHub и просто выдвинули ветку или внесли изменения в филиал, в которой в настоящее время нет PR Open.

Расширение так хорошо интегрируется, я больше не знаю, что такое новая функция GitHub или изысканная функция GitHub.

Рафинированный-гитуб/изысканный-гитуб

: Octocat: расширение браузера, которое упрощает интерфейс GitHub и добавляет полезные функции

Расширение браузера, которое упрощает интерфейс GitHub и добавляет полезные функции

Мы часто используем GitHub и замечаем много раздражений, которые мы хотели бы исправить. Так что здесь будь драконами.

Мы надеемся, что GitHub заметит и реализует некоторые из этих столь необходимых улучшений. Так что, если вам нравится какое -либо из этих улучшений, пожалуйста, напишите Поддержка GitHub об этом.

Github Enterprise также поддерживается: Как включить это Анкет

Товарные знаки GitHub и утонченные товарные знаки GitHub принадлежат Github, Inc. и используются по лицензии.

Установить

также совместим с

Если вы любите изысканный GitHub, рассмотрите Спонсирование или найм Содействие @fregante

@fregante ‘s Работа с открытым исходным кодом поддерживается сообществом. Отдельное спасибо

Проектируйте, автоматизируйте и управляйте бизнес -процессами в одном месте. Быстро создайте инструменты, которые нуждаются в вашем бизнесе практически без кода

Работа Синдре с открытым исходным кодом поддерживается сообществом. Отдельное спасибо

Онлайн редакторы/игровые площадки

Все больше и больше разработки осуществляются непосредственно в Интернете, будь то доказательство концепций или полномасштабных приложений. В последние несколько лет в этом пространстве произошло так много. 👏

Вот несколько основных продуктов:

Платные инструменты/ресурсы

У меня нет никаких партнерских ссылок ни в одном из материалов, размещенных ниже. Это просто отличные ресурсы, которые мне помогают. Давайте начнем.

Рефакторинг пользовательского интерфейса

Я купил Рефакторинг UI Забронируйте в прошлом году и понравилось. Я дал ему полное чтение и, вероятно, даст ему еще одно чтение. Цена варьируется в зависимости от типа пакета, с которым вы идете. Я получил отличную предварительную сделку, поэтому я взял всю энчиладу.

Существует также канал YouTube, на который вы можете подписаться или просто искать рефакторинг пользовательского интерфейса на YouTube.

Кроме того, Стив Шогер ( @steveschoger в Твиттере), один из авторов книги, много пишет в Твиттере о рефактории пользовательского интерфейса. Отличное следствие.

Каждый макет

Как упомянуто выше, я купил Каждый макет Анкет Это отличная покупка, и дополнительные ресурсы великолепны. Я читал электронную книгу (еще не закончена) и действительно наслаждался ею. Отличная работа, Энди и Хейдон!

XSCOPE

Существуют расширения браузера, которые делают часть того, что делает XSCOPE, но несколько лет назад коллега познакомил меня с XSCOPE Анкет Единственным недостатком этого инструмента является то, что он доступен только для Mac. Если вы на Mac, я очень рекомендую его.

Сиззи

Sizzy это новый в моем ударе инструментов, но до сих пор мне это нравится. Я зацепил его по отличной цене во время недели в боксе. Короче говоря, это позволяет вам работать на сайте или приложении и посмотреть, как он появляется в разных устройствах. У этого есть больше, чем это, но я все еще новичок в этом, поэтому я, вероятно, еще не раскрыл всю его удивительность. Престижность @thekitze Для построения этой удивительности.

Обучение через видео

Скорее всего, они не станут сюрпризом, но стоит упомянуть их.

  • Egghead (Счастливый подписчик)
  • Frontend Masters (Счастливый подписчик. Спасибо за подписку Дробовик (Мой предыдущий работодатель)!)
  • testingjavascript.com (Счастливый владелец лицензии. Спасибо x 2 дробовика!)
  • Что угодно, уэс Бос. Проверьте его Курсы Анкет

Кроме того, в блоке есть новый ребенок, Образование Анкет Похоже, они набирают какую -то тягу, поэтому, вероятно, стоит проверить. Они также на разработке, публикуя отличный контент.

Образование следует

Это все Она написала

Там так много ресурсов Но это то, что моя нынешняя свалку мозга принесла на стол, и в какой -то момент нам всем нужно пойти в ванную. 😆 Я, наверное, мог бы организовать это лучше, но сейчас, так же вышла свалка.

Если у вас есть ресурсы, которые вы не перечислили, вы думаете, что другие разработчики Frontend выиграют, отбросьте их в комментарии! Надеюсь, вам понравилось чтение, и теперь вы можете пойти в ванную.

До следующего раза нет!

Изображение обложки – это частичный скриншот на странице моего сайта, но иллюстрация происходит от замечательной работы Катерины Лимпитсуни undraw.co

Оригинал: “https://dev.to/nickytonline/frontend-developer-resources-246j”

Читайте ещё по теме: