Корисні онлайн-ресурси та інструменти для веб-розробника

Привіт:) У цьому пості я зібрав корисні ресурси та інструменти онлайн, які стануть у пригоді для веб-розробника, SEO-шника, дизайнера, контент-менеджера.

Валідатори

до змісту ↑

AI

Google сервіси

Сканери: безпека | віруси | malware

до змісту ↑

Пісочниці коду

Онлайн-редактори

  • vscode.dev — онлайн-версія популярного редактора VS Code (Visual Studio Code).

WordPress

  • WordPress (українська) — остання версія ВордПрес української локалізації.
  • WordPress (англійська) — остання версія ВордПрес англійської локалізації.
  • wppb.me [WordPress plugin boilerplate generator] — генератор стандартизованої об'єктно-орієнтованої заготовки плагіну WordPress із готовою структурою каталогів.
  • WordPress Hook Execution Order — наочний сервіс, який показує події та фільтри, що виконуються під час різних запитів до WordPress. Є можливість подивитися порядок виконання хуків у конкретній версії ВордПрес.
  • wp-gb.com — WordPress React Components для Gutenberg. Сніпети, зображення та інформація про всі інструменти, доступні для просунутої розробки під WordPress.
  • wpsandbox.net — онлайн-середовище для миттєвого розгортання в інтернеті повноцінного WordPress-сайту. Використовується розробниками для тестування плагінів і тем, а також для демонстрації своєї роботи замовникам. Доступний безкоштовний тарифний план, у якому створений сайт "живе" 8 годин.
  • instawp.com — ще одне онлайн-середовище для миттєвого розгортання в інтернеті сайту на ВордПрес.
  • underscores.me — генератор стартової WordPress-теми.
  • wpadmin.bracketspace.com — наочне відображення стилів та верстки адмін-частини WordPress, які можуть стати в нагоді при розробці.
  • wp-now — інструмент командного рядка, призначений для спрощення процесу локального запуску WordPress. Забезпечує швидкий і простий спосіб налаштувати локальне середовище WordPress з мінімальною конфігурацією.
до змісту ↑

WooCommerce

HTML/CSS

  • caniuse.com — перевірка підтримки браузерами CSS-властивостей.
  • caninclude.glitch.me — перевірка вкладеності HTML тегів.
  • themewagon.com — безкоштовні Bootstrap HTML-шаблони.
  • bootstrapmade.com — ще один ресурс із крутими безкоштовними Bootstrap HTML-шаблонами.
  • htmlcodex.com — безкоштовні HTML-шаблони.
  • free-css.com — ще один ресурс із безкоштовними HTML-шаблонами.
до змісту ↑

Генератори коду

  • tableconvert.com — генерація з Excel таблиць HTML коду. Спрощує та прискорює роботу, якщо потрібно перенести таблицю на сайт.
  • realfavicongenerator.net — генератор Favicon (фавікон) для коректного відображення для усіх пристроїв та у всіх браузерах.
  • cssgrid-generator.netlify.app — графічний генератор сіток на основі CSS Grid.
  • layout.bradwoods.io — графічний генератор сіток на основі CSS Flex та Grid.
до змісту ↑

Конвертори

MySQL

Шрифти

  • fontconverter.io — конвертор шрифту в різні формати (OpenType Font Format (OTF), TrueType Fonts (TTF), Scalable Vector Graphic Font (SVG), Web Open Font Format (WOFF 1 & 2) та Embedded Open Type Font (EOT). У веб-розробці використовується для конвертації у веб-формат.
  • transfonter.org — ще один зручний конвертор.
до змісту ↑

Текст

  • slovnyk.ua — транслітерація українських символів.
  • texthandler.com — конвертор верхнього/нижнього регістру букв.

Зображення/Картинки/Іконки/PDF

Безкоштовні зображення/іконки

до змісту ↑

Конвертери

Онлайн-редактори

  • photopea.com — безкоштовна онлайн заміна Photoshop.
  • pixlr.com — безкоштовний редактор зображень.
  • pixso.net — редактор для роботи з Figma-макетами.
  • yqnn.github.io — SVG редактор.
до змісту ↑

Оптимізація/Стиснення

до змісту ↑

Кольори

до змісту ↑

CSS

  • Bootstrap Breakpoints — контрольні точки популярної CSS-бібліотеки Bootstrap [оф. сайт].

Бібліотеки

  • animate.css — бібліотека для анімації на чистому CSS.

JavaScript

Мініфікація

  • unminify.com — зворотна мініфікація (unminify) JavaScript-коду.

Бібліотеки

Відеоплеєри

  • Plyr.js — адаптивний відеоплеєр з можливістю вставити як локально розміщений відеоролик, так і YouTube та Vimeo. Має інструменти для гнучкого налаштування плеєра.

Галереї

  • masonry — JavaScript-галерея на основі сітки. Розміщує елементи в оптимальному положенні на основі доступного вертикального простору.
  • Macy.js — ще одна JavaScript-бібліотека для розміщення елементів у вигляді сітки. Легка та проста у налаштуванні.

Попапи (popup, modals)

Слайдери

  • Owl Carousel
  • Slick Slider — один із найпопулярніших слайдерів на jQuery.
  • Swiper — слайдер на чистому JavaScript.

Parallax (Паралакс) та анімація

Збільшення зображення по кліку

Інше

  • cdnjs.com — CDN(онлайн)-версії популярних JavaScript-бібліотек.
  • International Telephone Input — плагін JavaScript для введення та перевірки міжнародних телефонних номерів. Додає список що розкривається із прапорцями до будь-якого input, визначає країну користувача, автоматична іконка країни у формі введення номера телефону (геолокація), відображає відповідний заповнювач і надає методи форматування/перевірки.
  • Pannellum — 3D панорама.
до змісту ↑

SEO

  • openlinkprofiler.org — безкоштовний інструмент для перевірки зворотних посилань.

Хостинг

  • hetzner.com
  • HOSTiQ.ua — крутий український хостинг. Стабільна та надійна робота серверів, вибір локації сайту, толкова та розуміюча техпідтримка, позитивні відгуки клієнтів.
  • hosting.works — український VPS хостинг.
  • hostings.com.ua — рейтинг хостингів: найкращі хостинги України.
  • hostings.info — популярний рейтинг хостингів із реальними відгуками.
до змісту ↑

API-сервіси з фіктивними даними JSON

  • dummyjson.com — безкоштовний API-сервіс із фіктивними даними JSON. Використовується для тестування з'єднань із зовнішніми API.
  • gorest.co.in — безкоштовний ресурс GraphQL і REST API для тестування та створення прототипів.
  • jsonplaceholder.typicode.com
  • randomuser.me — безкоштовний сервіс з відкритим API для генерації випадкових даних користувача (профілів користувачів).
  • reqres.in — ще один безкоштовний API-сервіс із фіктивними даними JSON.
до змісту ↑

Тайм-трекери

  • toggl.com — відстеження часу (тайм трекер).

YouTuBe

  • savefrom.net — завантаження та збереження локально відео з YouTuBe.
  • ssyoutube.com — завантаження відео з YouTuBe.
  • ytop1.com — конвертер YouTuBe -> mp3 та збереження локально.

Розсилки

Файлові сховища

Інше

  • jsonformatter.org — JSON-парсер для виведення JSON-даних у зручному форматі.
  • businessnamegenerator.net — генератор доменних імен за ключовими словами.
  • businessnamegenerator.net — генератор назви компанії (бренду) за ключовими словами.

Михайло Петров
Михайло Петров

Мене звати Михайло. Я є WordPress-розробником. Створюю сайти з "нуля", розробляю плагіни, оновлюю наявний функціонал та підтримую готові проєкти.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *