По мере появления новых технологий иногда становится трудно найти ресурсы для обучения и улучшения своих навыков. Когда я впервые изучил го примерно 6+ лет назад, у меня было минимальное количество ресурсов, на которых можно было бы учиться. Поскольку Go во многих отношениях эксцентричный язык, кривая обучения была круче, чем должна была быть, несмотря на его преднамеренную простоту.

С тех пор списки Awesome появились почти для каждой технологии. Как правило, они хорошо организованы и очень полезны. Некоторые из них курируются.

Около года назад я обнаружил революционный интерфейсный JS-фреймворк под названием Svelte. Это недавно превзошло младенчество. Это среда компиляции, созданная создателем rollup.js. По сравнению с React я был поражен его превосходной производительностью, меньшим размером файла пакета и удобством разработчика (* Наивысшее удовлетворение разработчиков в 2020 году).

После тщательного изучения кодовой базы и ключевых показателей я считаю, что через 3 года будут существовать только 2 основных фреймворка. Нет Vue. Нет Angular. Меня беспокоило только то, что Рич Харрис (создатель) может потерять интерес или что кто-то влиятельный в React решит переделать React во фреймворк времени компиляции.

Еще раз ставлю свою компанию на Svelte. И чтобы помочь Svelte продвигаться вверх, я запустил страницу Awesome Svelte. Были две предыдущие страницы Awesome Svelte, но они исчезли. Я хотел создать потрясающий список, чтобы энтузиасты Svelte всегда могли найти полезные ресурсы.

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

Он имеет следующие функции:
• Более быстрый поиск компонентов.
• Заказ с использованием подсчета звезд в реальном времени (новинка).
• Сводные таблицы для сравнения характеристик конкурентов. компоненты.

Если вы делаете файл readme для своей библиотеки, только кое-что из этого будет иметь значение.

Презентация

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

Когда дело доходит до оценки «качества» чего-либо на GitHub, многие люди используют 2 фактора - это количество звезд и общее представление. Я не могу напрямую контролировать количество звезд, но могу сделать страницу как можно более безупречной.

Логотип

Я хотел, чтобы логотип привлекал внимание, как SweetAlert2. Это означало, что его нужно было оживить. Обычно это анимированные GIF-файлы (некрасивые) или анимированные PNG-файлы (большие и не всегда поддерживаются браузерами). Я также хотел, чтобы логотип выглядел четким, будь то мобильный телефон или 50-дюймовый монитор. Это означало векторную графику.

Казалось, им нравились противоположные соображения, но оказалось, что вы можете встроить HTML и CSS в изображение SVG как ‹foreignObject›. После краткого руководства по CSS-анимации (и некоторого кода, который я нашел) я придумал:

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

Количество звезд

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

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

Я решил разместить квази призыв к действию в правом верхнем углу файла readme.

<p align="right">
  ⭐ &nbsp;&nbsp;<strong>the project to show your appreciation.</strong> :arrow_upper_right:
</p>

Вещество

Хорошая презентация может только вас завести (если вы не Трамп). Вам нужно подкрепить это веществом.

Различные списки Awesome подчеркивают разные аспекты соответствующей экосистемы. Я мог бы сделать это как энциклопедию со статьями, сообщениями в блогах, компонентами и т. Д., Которые обслуживают как абсолютных новичков, так и опытных экспертов. Компромисс заключается в том, что он будет загромождать страницу ненужностью, независимо от того, насколько хорошо она организована. И, как кикер, вы, вероятно, все равно проиграете быстрому поиску в Google.

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

Поскольку Svelte похож на React, нет смысла изобретать велосипед. Уже существует два чрезвычайно популярных списка Awesome React: https://github.com/enaqx/awesome-react и https://github.com/brillout/awesome-react-components. Как бывший разработчик React с 4–5-летним опытом, я также обнаружил, что немного предпочитаю более поздний список, в котором больше внимания уделяется компонентам. Также было немного легче находить вещи с помощью Ctrl / Cmd + F.

Я решил скопировать этот список после удаления связанных ссылок Redux (Svelte не нуждается во внешней библиотеке для управления состоянием).

Полезность

В настоящее время у Svelte очень небольшое (но активное) сообщество. Это означает, что ресурсов и сторонних компонентов не так много по сравнению с React и Vue. С одной стороны, это означает, что нужно меньше оценивать, прежде чем добавлять его в список. С другой стороны, мне было намного труднее и труднее находить качественные библиотеки. Я потратил огромное количество времени и усилий на поиск в Интернете и неофициально-официальный список кода сообщества.

Звезды

Поскольку количество звездочек - это фактор, который разработчики используют для оценки библиотек, я решил упорядочить компоненты и библиотеки на основе количества звезд, а не в алфавитном порядке. Это новый роман, которого я никогда раньше не видел. Я использовал shields.io для создания живых значков с подсчетом звезд.

Количество звезд обновляется в реальном времени (но список нужно будет переупорядочить, пока я его не автоматизирую)

Сводные таблицы

Некоторые компоненты лучше оценивать в таблице, потому что они конкурируют по функциям. Итак, я создал сводную таблицу.

Курирование

Я решил, что, поскольку экосистема Svelte все еще находится на стадии становления, в краткосрочной перспективе кураторство будет минимальным, поскольку люди будут отправлять PR со своими ссылками. Я предполагаю, что многие из них будут новичками (возможно, студентами университетов), которые будут рады продемонстрировать свою работу (на которую они вкладывают много времени и усилий). На данном этапе нет смысла отговаривать потенциально хороших разработчиков.

В будущем я буду более агрессивно очищать список от «некачественных» ссылок. Это исполнительное решение, которое я принял после изучения того, что там было.

Вывод

Ознакомьтесь с https://github.com/rocketlaunchr/awesome-svelte.

Чтобы изучить Svelte:

Я также нашел developer.mozzila.org полезным, когда только учился.