Собирайте веб-сайты, которые обычно используются разработчиками интерфейсов, и время от времени обновляйте их. Для доступа к некоторым веб-сайтам может потребоваться научный доступ в Интернет.
ES6 Console
es6console.com/
Инструмент, который преобразует код ES6 в ES5 в режиме реального времени. Это хороший инструмент для студентов, которые хотят научиться использовать ES5 для реализации некоторых функций синтаксиса ES6.
AST Explorer
astexplorer.net/
Инструмент, который может конвертировать код на разных языках в AST для удобного просмотра, включая знакомые css, html и js. Он поддерживает множество компиляторов, наиболее знакомыми нам являются babel и typescript. Если вы хотите узнать больше о принципах компиляции или разработать плагин для Babel, этот сайт вам очень поможет.
TS playgroud
www.typescriptlang.org/play
Официальный сайт Typescript для изучения ts. Мы можем изменить конфигурацию ts, написать код ts, проверить синтаксические проблемы ts и просмотреть на нем результаты преобразования js. Студенты, которые хотят заниматься гимнастикой типа ТС, найдут этот сайт полезным.
Carbon
carbon.now.sh/
Студентам, имеющим привычку вести блоги, вероятно, нравится отображение блока кода в стиле Mac. Carbon — это веб-сайт, который позволяет нам вставлять код и генерировать изображения блоков кода в стиле Mac, а также переключаться между различными языками и цветовыми схемами.
Shields.io
shields.io/
Для многих хорошо сделанных проектов с открытым исходным кодом их REANDME на github будет иметь несколько тегов, показывающих такие индикаторы, как статус сборки, покрытие модульным тестом, объем загрузки и т. д. Как делаются эти этикетки? Мы можем использовать Shields.io для создания ссылок на изображения и вставки README. Пока URL-адрес изображения построен в соответствии со спецификациями Shields.io, данные, такие как загрузки на npm, могут быть получены автоматически.
рисование персонажей
Мы можем быть незнакомы с концепцией рисования персонажей или словесного искусства ASCII, но мы должны были где-то их видеть. Например, на панели консоли Zhihu мы можем видетьHIREРаспечатайте его в виде 3D WordArt. Это часто более бросается в глаза, поэтому мы часто видим его в аннотациях кода, введениях в инструменты cli, консолях веб-сайтов и т. д.
Как правило, есть две формы рисования персонажей: одна - изображение в текст, а другая - искусство преобразования текста в слово.
Веб-сайт с рекомендацией изображения в текст:www.degraeve.com/img2txt.php
Рекомендуемый веб-сайт для преобразования текста в слова:текст КО OL.com/en/ASCII-AR…
Конечно, два вышеупомянутых инструмента не выглядят идеальными, вы также можете поискать самостоятельно, чтобы увидеть, есть ли лучший.
Unsplash
unsplash.com/
На этом сайте есть много красивых бесплатных изображений, которые можно использовать в качестве заголовков блога.
Excalidraw
excalidraw.com/
Очень интересный инструмент для рисования диаграмм.
mdnice
mdnice.com/
Modrop, самый популярный редактор Markdown для общедоступной учетной записи WeChat, набор текста адаптируется к общедоступной учетной записи. Существует множество настраиваемых шаблонов тем, которые также можно настраивать. В общем, функции веб-версии достаточно, более мощные функции нужно платить.
Суммировать
В статье организованы некоторые веб-сайты инструментов, которые я считаю более практичными в качестве фронтенд-разработки, и я надеюсь, что они будут полезны всем. Что касается caniuse, MDN и других интерфейсных веб-сайтов, которые необходимо знать, я не буду их здесь перечислять.