Много лет назад мой & quot;dev инструменты& quot; папка закладок имела около двадцати записей, каждая из которых представляла собой отдельный одноцелевой веб-сайт, каждый со своим собственным макетом объявления, собственным баннером файлов cookie, и - это та часть, которая меня наконец беспокоила - собственный сервер, на который незаметно загружались мои данные. я вставил в один из них токен промежуточного API, чтобы декодировать его, и на полпути подумал: Я понятия не имею, что этот сайт делает с этой строкой. Это был день, когда я перестал доверять сайтам случайных инструментов и начал строить Toolz.dev, где каждый инструмент работает в вашем браузере, и ничто, что вы вставляете, не покидает вкладку.
Это набор инструментов, который вышел из того. не "top 600 инструментов" listicle - Toolz.dev имеет чуть более пятидесяти инструментов прямо сейчас, и я бы предпочел показать вам те, которые рабочий веб-разработчик открывает каждую неделю, чем заполнить счет. Они сгруппированы здесь по выполняемой вами работе: формирование данных, спор текста, написание CSS, подготовка изображений, доставка SEO и работа по обеспечению безопасности и кодированию между ними. Все бесплатно, не требует учета и локально обрабатывает.
TL;DR: Оставьте одну группу вкладок браузера открытым во время сборки. Для данных: Форматтер JSON, JSON диф, Валидатор YAML, CSV-просмотр, йо- Для отладки токен: JWT декодер, Конвертер Base64, Конвертер времени отметки времени, йо- Для регулярного выражения: Тестер регулярного выражения, йо- Для CSS: градиент генератора, палитра, CSS-минификатор, йо- Для изображений: менять размер, компресс, конвертер формата, йо- Для SEO: Генератор метатегов, Открыть предварительный просмотр графика, йо- Все клиенты, все бесплатно.
Зачем возиться с инструментами браузера, когда у вас есть терминал?
Справедливый вопрос - я тоже живу в терминале. Честный ответ заключается в том, что для разовых задач "посмотри на себя" - визуальный инструмент с мгновенной обратной связью, запоминающий ритмы jq заклинание или openssl флаг Когда API вручает мне миниатюрную двою, что в 2 часа ночи я не хочу писать скрипт форматирования, хочу его вставить и посмотреть. Когда мне нужно смотреть в глаза, если два ответа JSON различаются, красный/зеленый дифференциал быстрее, чем проходить через что-либо.
Но решающим фактором является не удобство, а Куда идут данные. Огромное количество & quot;бесплатно онлайн & quot; инструменты загружают все, что вы вставляете, на сервер для его обработки.Это нормально для общедоступного образца и подлинной проблемы для производственного токена, записи клиента или неизданного актива. Каждый инструмент в этом руководстве полностью работает в вашем браузере - обработка происходит в JavaScript на вашем компьютере, и нет шага загрузки, о котором нужно беспокоиться. эта комбинация, визуальная и мгновенная плюс частная по умолчанию, является всей причиной держать их в группе вкладок вместо того, чтобы выкладывать.
Формирование данных: JSON, YAML, CSV, XML
Это категория, которую я использую чаще всего, потому что большая часть веб-разработки — это перемещение структурированных данных между системами и прищуривание на них, когда они ломаются.
выше Форматтер JSON является рабочей лошадкой - вставить минифицированный ответ API и получить отступы, читаемый вывод с синтаксической ошибкой, расположенной, когда JSON недействителен. Когда вам нужно знать Что изменилось Между двумя полезными нагрузками JSON диф Сравнивает структурно, а не построчно, поэтому переупорядоченные ключи не создают фантомных различий. Для конфигурационной стороны задания Валидатор YAML ловит тихие ловушки YAML - вкладки в отступе, дубликаты клавиш и поворотные сюрпризы типа-принуждения version: 1.10 в число 1.1 - до того, как файл Kubernetes или CI взорвет развертывание.
Данные редко остаются в одной форме. выше json в CSV а CSV в JSON Преобразователи перемещаются между выходными данными API и электронными таблицами, CSV-просмотр рендерит беспорядочный CSV как настоящую таблицу, чтобы вы могли его прочитать, а XML в JSON а json в yaml Инструменты охватывают переходы в формат, который вы нажмете, с помощью устаревших API и файлов конфигурации. Если вам нужна более глубокая версия этой категории, Полное руководство по инструментам JSON Проходит весь рабочий процесс.
Отладка токенов и время: JWT, Base64, метки времени
Аутентификация и время - это то, где "Код выглядит правильно" - прячутся, чтобы скрываться, и они почти всегда решаются Глядя на данные вместо того, чтобы перечитывать логику.
выше JWT декодер разбивает токен на заголовок, полезную нагрузку и подпись и показывает вам претензии - именно так вы это обнаружите exp вы поклялись, что все в порядке на самом деле в прошлом. Дотянитесь за него вместо общего декодера, потому что JWT используют base64url (RFC 4648 §5), не стандартная база64 и простая Конвертер Base64 является правильным инструментом для всего остального - Основные заголовки auth, URI данных, закодированные полезные нагрузки.The Конвертер времени отметки времени Превращает Unix секунд и миллисекунды в реальные даты (смешение секунд и секунд — это самая распространенная ошибка, которую я вижу) и конвертер часовых поясов а разница в дате Инструменты обрабатывают "как время для пользователя" и "сколько времени между этими двумя вопросами". Я написал весь процесс отладки в Руководство по инструментам отладки API Если вы хотите военные истории.
Регулярное выражение без догадок
Регулярные выражения: write-one, debug-forever. выше Тестер регулярного выражения Позволяет построить шаблон для примера текста с подсветкой в реальном времени, чтобы вы видели, что соответствует моменту, когда вы его вводите, а не развертываете валидатор и надеетесь. Если вы предпочитаете собрать узор из строительных блоков, то регулярный конструктор приближается к нему с другой стороны. В любом случае, точка такая же: протестируйте шаблон на реальные строки, прежде чем он защитит форму или проанализирует журнал. выше Руководство по строительству регулярных выражений Охватывает распространенные узоры, заслуживающие внимания.
Текстовая борьба: подсчет, оболочка, дифференциация, заполнитель
Негламурные струнные хлопоты складываются. выше счетчик слов Проверяет содержимое содержимого длины (мета-описания, твиты, заголовки). выше конвертер перевороты между camelCase, snake_case, kebab-case и PascalCase - неоценимы, когда вы переносите имена переменных в кодовую базу. The текст разница Сравнивает два блока и выделяет каждое изменение, которое представляет собой проверку кода за пределами git и аудита конфигурации, сложенного в один.
Для построения и прототипирования конкретно: Генератор Lorem Ipsum Заполняет макеты справа количество текста-заполнителя (есть Полное руководство по размеру текста-заполнителя), генератор пуль превращает заголовки в чистые пути URL, и струна реверс Инструмент обрабатывает нечетное одноразовое. выше Руководство по текстовым инструментам связывает их вместе.
CSS и цвет
Здесь живет фронтенд-полька. выше градиент генератора дает вам визуальный редактор линейных и радиальных градиентов и стрелок назад производства CSS - без угадывания углов и остановок (the градиент идет глубже). выше палитра Преобразует между HEX, RGB и HSL, где я проверяю контрастность, прежде чем цвет в конечном итоге не пройдет проверку доступности; Руководство по выборке цвета Охватывает контрастную математику. Когда пора отправлять, CSS-минификатор а HTML-минификатор Удалите пробел и комментарии, чтобы сбрить байты с провода.
изображения для интернета
Изображения обычно являются самой тяжелой вещью на странице, поэтому эта категория окупается Основные веб-жизненные ресурсы, йо- выше Изменение размера изображения Набор инструментов точных размеров (и есть ловушка для сетчатки, о которой стоит знать, покрытая в направляющий), имиджевый компресс Уменьшает размер файла при сохранении качества, а Конвертер формата изображения Переходы между PNG, JPG и WebP, поэтому вы подаете правильный формат для работы. выше Фоновое средство для удаления это средство для снятия цветовых клавиш - быстрое и приватное, великолепное на плоском фоне и честное в своих ограничениях направляющий, йо- выше Руководство по инструментам изображения является опорой для этого набора.
Доставка: SEO, SEO, совместное использование и безопасность
Последняя миля перед выходом на страницу. выше Генератор метатегов строит ваш заголовок, описание, открытый графики теги карт Twitter, и Открыть предварительный просмотр графика Показывает, как будет выглядеть ссылка, когда она будет передана, прежде чем вы узнаете, как усложнить трудный путь в социальных сетях. выше Роботы.txt Генератор а УТМ-строитель Обрабатывать правила сканирования и отслеживать кампании, а также QR генератор Создает код для печати или слайдов. Со стороны безопасности гигиеническая генератор паролей а хэш-генератор охватывают сильные секреты и проверки целостности, а также Генератор UUID Выдает идентификаторы для тестовых данных и ключей базы данных.
Инструменты на стороне клиента и инструменты на основе загрузки: важное сравнение
| Toolz.dev (клиентская сторона) | Типичный "бесплатный онлайн-инструмент"; | |
|---|---|---|
| Где происходит обработка | в вашем браузере | На удаленном сервере |
| Ваши данные (токены, файлы, код) | Никогда не покидает счет | Загружено третьей стороной |
| Регистрация / Войти | ни один | Часто требуется для полных функций |
| Ограничения использования | Нет на инструментах | Часто закрытые или платные |
| торопить | Мгновенный, без туда-обратно | Зависит от загрузки + сервера |
| Работает с конфиденциальными данными | Да, по замыслу | Рискованно - вы доверяете их серверу |
| Количество инструментов | Чуть больше пятидесяти, куратор | Обычно один инструмент на сайт |
Строка, которая меня больше всего волнует, - вторая. Для общедоступной выборки не имеет значения, где происходит обработка; для производственной тайны это имеет огромное значение. создание всего инструментария на стороне клиента означает, что мне никогда не придется спрашивать & quot;это безопасный сайт, чтобы вставить это в & quot; - все они есть.
Как я на самом деле использую это: цепь инструментов
Большинство реальных задач — это небольшой конвейер, ни один клик:
Отладка ответа API: вставьте его в Форматтер JSON, расшифровать любой токен с помощью JWT декодер, поверните exp претендовать на дату с Конвертер времени отметки времени, затем сравните сломанный ответ с рабочим с JSON диф, йо-
Подготовка образа героя: Фоновое средство для удаления Если нужно вырезать, то Изменение размера изображения то для точных размеров, то имиджевый компресс Чтобы достичь бюджета на вес страницы, переведя его в WebP с помощью конвертер формата На выходе.
Доставка новой страницы: сгенерируйте теги с помощью Генератор метатегов, проверьте карту общего доступа в Открыть предварительный просмотр графика, и подтвердите, что ваша копия соответствует счетчик слов, йо-
Держите пять или шесть, которые вы касаетесь ежедневно в группе с закрепленными вкладками. Остальные находятся в одном поиске в палитре ⌘K, когда они вам нужны.
Часто задаваемые вопросы
Действительно ли эти инструменты веб-разработчика бесплатны?
да. Каждый инструмент на Toolz.dev можно использовать без премиального уровня, без ворот и без ограничения использования самих инструментов. Для их использования не требуется учетная запись.
Мне нужно создать учетную запись или войти в систему?
нет ,откройте инструмент и используйте его немедленно. Регистрации нет, и поскольку инструменты, запущенные в вашем браузере, не с чем синхронизировать с профилем.
Безопасно ли вставлять токены, ключи или личные данные?
Да, и это основное решение по дизайну. инструменты обрабатывают все на стороне клиента в JavaScript, поэтому то, что вы вставляете - JWT, ответ API, неизданное изображение - обрабатывается на вашей машине и не загружается на сервер. Это основная причина использовать их альтернативы, основанные на перегрузке.
Сколько инструментов у Toolz.dev?
На данный момент чуть более пятидесяти, охватывающих категории данных, текста, кодирования, CSS, цвета, изображения, SEO, безопасности и калькулятора. Я бы предпочел намеренно увеличить набор, чем заявлять о числе, которое в основном является наполнителем - каждый инструмент, указанный здесь, существует и работает сегодня.
Инструменты работают на мобильном?
Да, интерфейсы отзывчивы и работают в мобильных браузерах. более тяжелые работы - особенно большая обработка изображений - быстрее и удобнее на рабочем столе, но сами инструменты работают в любом направлении.
Эти инструменты работают в автономном режиме?
В основном да. поскольку каждый инструмент работает в JavaScript в вашем браузере, инструмент продолжает работать без подключения после загрузки его страницы - полезно в самолете или хрупкой сети. Вам нужно быть онлайн только для того, чтобы открыть инструмент в первый раз; после этого обработка сама не нуждается в сервере.
В чем разница между клиентскими и серверными онлайн-инструментами?
Инструмент на стороне клиента выполняет свою работу в вашем браузере, поэтому данные, которые вы вставляете, никогда не покидают вашу машину. Инструмент на стороне сервера загружает ваш ввод на удаленный компьютер для его обработки и отправляет результат обратно. Выходные данные могут выглядеть идентично, но только инструменты на стороне клиента сохраняют производственный токен, частный файл или запись клиента от кого-то другого и #39;s-сервера - вот почему каждый инструмент здесь построен на стороне клиента.
Могу ли я использовать их вместо инструментов Terminal или IDE?
Для разовых, визуальных задач - форматирование капли, декодирование токена, просмотр различий, построение градиента - они часто быстрее, чем запоминание эквивалента командной строки. для скриптовой, повторяемой работы вам все равно понадобится ваш терминал. На практике они сидят рядом: запустите запрос в своем обычном клиенте, затем вставьте в него выходные данные, чтобы прочитать его.
Какие инструменты я должен закладывать в первую очередь?
Начните с тех, к которым вы будете прикасаться ежедневно: Форматтер JSON, JWT декодер, Тестер регулярного выражения, Конвертер времени отметки времени, и в зависимости от того, какой из инструментов CSS или Image соответствует вашей работе. Добавьте остальное, когда вы попадете в задачи, которые в них нуждаются.
завершение
Современный веб-разработчик's инструментарий не является одним большим приложением - это дюжина маленьких, острых инструментов, к которым вы тянетесь, не задумываясь. ловушка рассеивает их по дюжине схематичных веб-сайтов, которые загружают ваши данные для их обработки. исправление - сохранить те, которым вы доверяете, в одной группе вкладок, все работают локально, все бесплатно, все на расстоянии одного нажатия клавиши.
вот что Toolz.dev IS: чуть более пятидесяти таких инструментов, созданных на стороне клиента, чтобы ваши токены и файлы оставались вашими. приколать Форматтер JSON, Тестер регулярного выражения, и Конвертер времени отметки времени сегодня и добавьте остальное по мере того, как требует работа. Бесплатно навсегда, частный по дизайну.
