Мы собрали большой перечень онлайн-платформ, которые пригодятся в работе верстальщику и веб-дизайнеру. От простых инструментов до серьезных сервисов. В любом случае просмотри – тут найдешь то, что облегчит твою деятельность.
1. HTML Hint — инструмент статического анализа кода и разметки. Тут проверка происходит не по внутренним общепринятым параметрам, а по тем, которые ты задаешь. Это может быть преимуществом перед аналогичными сервисами, если необходима проверка только по определенному признаку.
2. Sanusart.github — если ты еще не используешь в работе никакой boilerplate, но хочешь делать задачи без лишней возни, то попробуй этот HTML Template Generator. Он за тебя выполнит автоматически базовую разметку HTML. Скрипты, мета-теги, текстовые блоки, бандлы. Ничего лишнего. И совершенно бесплатно.
3. JSON Generator — если тебе когда-то приходилось создавать макет данных для тестирования API или сценариев, то ты в курсе, что довольно сложно сделать это в масштабе тысячи записей. Тут поможет этот сервис. Он генерирует структурированные объекты JSON со случайными данными.
4. JS Nice — если нужно преобразовать корявый код в нормальный, то этот сервис как раз для этого. Нужно просто вставить JS-чудовище в поле, а программа после некоторого анализа сама добавит отступы, назовет переменные более удачно, добавит комментарии.
5. CSS Triggers — просто находка для тех, кто только начинает вникать в CSS-свойства. Этот сервис дает исчерпывающую информацию обо всех возможных свойствах, показывает их действие и влияние на рендеринг страницы. Расположены просто в алфавитном порядке – новичку стоит пролистать и просмотреть все, чтобы понимать масштабы и возможности. Опытному верстальщику будет удобнее искать определенные названия через поисковую строку. Потому что запомнить это все сразу просто невозможно.
6. CSS Colours — перечень CSS-цветов, которые применяются как слово. Это облегчает задачу с поиском и подбором. А еще сам сайт максимально простой и удобный – просто подборки оттенков, которые рассортированы по категориям. Они не подписаны – выбирай визуально нужный пласт, уже там ищи наиболее подходящий цвет среди сотни предложенных.
7. LoremFlickr — изображения-заполнители на все случаи жизни. Практически любые темы и размеры. И бесплатно. Просто нужно вставить в свой код определенный URL-адрес.
8. Placeholder – еще один бесплатный сервис с изображениями-заполнителями. Кроме стандартных картинок еще есть бесплатные макеты лого, тексты-заполнители и баннеры-заполнители в стандартных размерах IAB. На сайте написано, как использовать сервис, как установить нужный размер и формат изображения, вставить текст, цвет фона.
9. CSS Shortand generator — этот сервис поможет собрать и объединить в одно общее свойство разные специфические разрозненные свойства типа background-color.
10. Plain Pattern — сервис для создания паттернов. Выбираешь цвета, фигурки из SVG-изображений, расставляешь их как нужно и получаешь прикольный оригинальный паттерн, который подойдет к твоему проекту. Очень затягивает. Иногда можно позволить себе поиграться несколько часов, чтобы сделать заготовки для будущих проектов. Только не забывай сохранять свои шедевры.
Сразу 11-15. Конвертеры разных мастей.
- PX to EM — без лишних слов. Конвертирует EM в PX и наоборот.
- А Sass в Scss и обратно можно перевести в сервисе с оригинальным названием, которое ты не угадаешь. Sass to Scss.
- Less2CSS — из Less в CSS;
- html2pdf — преобразует веб-страницы в формат PDF.
16. The Code Player — платформа с огромным количеством онлайн-уроков по JavaScript и HTML в форме демонстрации. Здесь можно не только посмотреть, но и себя показать, то есть загружать свои уроки.
17. CodeFights — сервис, который нередко используют рекрутеры для технических собеседований. Это хороший набор задачек по JavaScript, который позволит сильно сэкономить время во время подбора кандидатов и поможет не отвлекать специалистов, по крайней мере, на первичном-вторичном интервью. Зачем это тебе, если ты не рекрутер? Если претендуешь на должность с применением JavaScript, то потренируйся проходить такое тестирование. И знания подтянешь, и к собеседованиям будешь готов, и уровень свой оценишь.
18. SnazzyMaps — очень много вариаций стилей и цветовых решений для Google Maps. Тут найдется монохром разных типов, подробные схемы, простые, светлые и темные, полноцветные, можно выбрать по цвету или даже создать собственный стиль.
19. Fibonacci — интересный инструмент, который позволяет создавать макеты страниц на Flexbox, даже тем, кто далек от разработки и не изучал HTML или CSS. Но в целом верстальщики тоже им пользуются довольно успешно. Сервис сам генерирует как HTML, так и CSS, необходимые для создания макета. Ты вручную делаешь разделение, добавляешь элементы, корректируешь сетку. А потом просто одним кликом копируешь сгенерированный код и вставляешь в нужное место в своем коде.
20. Shortcut Mapper — наглядность всегда работает отлично, если речь о запоминании и обучении. И если тебе нужно выучить горячие клавиши для разных рабочих программ, то тут можно посмотреть все основные сочетания. Выглядит это как изображение клавиатуры. Ты просто выбираешь нужную программу в списке и видишь варианты. Открываешь свою программу и применяешь все на практике. Сервис показывает решения для:
- Продукты Adobe: After Effects, Photoshop, Illustrator, Lightroom;
- Продукты JetBrains: AppCode, WebStorm, PhpStorm, CLion, Intellij IDEA, RubyMine, PyCharm;
- Blender;
- SideFx HouDini;
- Autodesk 3dsMax и Autodesk Maya;
- The Foundry Nuke;
- Sublime Text;
- SketchUp;
- Unity 3D.
21. Siteliner — проверка сайта после его запуска является важной задачей. И SEO-инструменты играют тут немаловажную роль. Надо своевременно найти неработающие ссылки, повторения контента и прочие косяки. Данная платформа как раз для этого. Работает максимально просто – вводишь ссылку на свой сайт, жмешь кнопку, сервис выдает тебе результат проверки через некоторое время. Чем больше страниц, тем дольше анализ. Можно увидеть весь список ошибок и кликнуть на каждую для понимания подробностей.
22. Blind Text Generator — рыбный текст нужен часто, это классика. И не стоит думать, что для этого не требуется специальный инструмент. Попробуй сначала этот сервис, потом поговорим. Кстати, тут есть не только приевшийся всем Lorem ipsum dolor sit amet, но и другие варианты заполнения. В том числе отрывок из “Превращения” Кафки.
23. Favicon Generator — фавикон является важной частью сайта. Это такая маленькая иконка, которая отображается возле названия сайта. И сгенерировать удачный фавикон, который будет корректно отображаться во всех браузерах будет не лишним.
24. Random User Generator — бесплатный API с открытым кодом для генерации случайных данных пользователя. Как Lorem Ipsum, но для людей. Простой функционал, на сайте все шаги подробно описаны. Программа предоставит объект JSON, XML, CSV или YAML. Формат можно изначально указать.
Материал подготовлен командой образовательной платформы WAYUP