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

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

Contents:

AI

  • opencode.ai — це open-source AI coding agent, тобто окремий інструмент на кшталт Claude Code / Codex CLI, але з акцентом на те, щоб можна було підключити практично будь-яку модель. Працює через термінал, має desktop-додаток і IDE extension. OpenCode позиціонується як provider-agnostic: можна використовувати Claude, OpenAI, Gemini, локальні моделі та інші провайдери. OpenCode має власний конфіг, де можна описувати модель. Наприклад, можна налаштувати свій OpenAI-compatible endpoint, а потім сказати OpenCode використовувати конкретну модель.
back to contents ↑

Google сервіси

UI/UX

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

back to contents ↑

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

Конструктори сайтів

  • LP-Mobi — онлайн-конструктор для створення мобільних лендінгів на основі готових шаблонів.

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

  • 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.
  • underscores.me — генератор стартової WordPress-теми (класичної).
  • fullsiteediting.com/block-theme-generator/ — генератор стартової WordPress-теми (блокової).
  • wpadmin.bracketspace.com — наочне відображення стилів та верстки адмін-частини WordPress, які можуть стати в нагоді при розробці.
  • wp-now — інструмент командного рядка, призначений для спрощення процесу локального запуску WordPress. Забезпечує швидкий і простий спосіб налаштувати локальне середовище WordPress з мінімальною конфігурацією.
  • wpe98.com — "занулені" преміум версії плагінів/тем.
  • developerszone.net — безкоштовні PREMIUM теми/плагіни.
back to contents ↑

Пісочниці WordPress

  • instawp.com — платне онлайн-середовище для миттєвого розгортання в інтернеті сайту на ВордПрес.
  • WordPress Playground — спеціальна онлайн-версія WordPress, яка працює прямо браузері без необхідності сервера, PHP або бази даних. За її допомогою можна швидко тестувати теми і плагіни. Достатньо просто перейти за посиланням та в результаті — готовий чистий сайт на WordPress із доступом в адмін-частину, на якому можна робити все що завгодно.
  • wpsandbox.net — онлайн-середовище для миттєвого розгортання в інтернеті повноцінного WordPress-сайту. Використовується розробниками для тестування плагінів і тем, а також для демонстрації своєї роботи замовникам. Доступний безкоштовний тарифний план, у якому створений сайт "живе" 8 годин.
  • TasteWP.com — онлайн-сервіс, який дозволяє миттєво створювати тимчасові WordPress-сайти для тестування тем, плагінів чи налаштувань без встановлення локального серверу чи реєстрації. Дає змогу запустити повноцінний WordPress-інстанс буквально в один клік, з автоматично згенерованою адресою та доступом до адмін-панелі. Сервіс пропонує як безкоштовні тимчасові сайти з обмеженим терміном життя, так і опціональні преміум-опції з тривалішим зберіганням, більшим дисковим простором та підтримкою.
back to contents ↑

Локальні середовища розробки для WordPress

  • Local WP — безкоштовний та зручний інструмент для розробників, що дозволяє швидко створювати локальні сервери для WordPress. Можливість обрати веб-сервер, версію PHP, надати онлан-доступ до локального сайту через Інтернет.
  • WordPress Studio — локальне середовище розробки для WordPress від розробників CMS. Можливість синхронізації локального сайту із сайтом, розміщеним на wordpress.com.
back to contents ↑

WooCommerce

Elementor

  • guywp.com — великий вибір безкоштовних (а також платних) шаблонів сторінок для Elementor.
  • ThemeForest Elementor Template Kit або ThemeForest — набір преміальних Elementor-шаблонів сторінок на ThemeForest (такі шаблони мають структуру: папки screenshots і templates, файли help.html і manifest.json; встановлюються через Template Kit – Import).
  • templategoat.com — free Elementor template kits (такі шаблони мають структуру: папки screenshots і templates, файли help.html і manifest.json; встановлюються через Template Kit – Import).
back to contents ↑

HTML/CSS

  • caniuse.com — перевірка підтримки браузерами CSS-властивостей.
  • caninclude.glitch.me — перевірка вкладеності HTML тегів.

HTML-шаблони

  • bootstrapmade.com — ще один ресурс із крутими безкоштовними Bootstrap HTML-шаблонами.
  • htmlcodex.com — безкоштовні HTML-шаблони.

Figma-шаблони

  • templatesjungle.com — безкоштовні Figma-шаблони (+ їх HTML варіанти).
  • uidux.com — безкоштовні та платні Figma-шаблони.

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

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

Конвертори

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 — ще один зручний конвертор.
back to contents ↑

Текст

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

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

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

back to contents ↑

Конвертери

  • iconizr.com — конвертація SVG-зображень в CSS іконки.
  • urldecoder.org — SVG URL decoder.
  • urlencoder.org — SVG URL encoder.
  • ilovepdf.com — конвертор PDF -> Word.
  • towebp.io — конвертор зображень у WEBP. Є можливість масової конвертації.
back to contents ↑

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

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

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

back to contents ↑

Кольори

  • subcolor.github.io — генератор градієнта між двома кольорами.
  • Devoth‘s HEX 2 RGBA Color Calculator — конвертор hex-кольору (#) в RGBA.
  • wtools.io — затемнення та освітлення вказаного кольору.

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 (Паралакс) та анімація

back to contents ↑

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

Меню/Мегаменю

  • megamenu.js — jQuery-бібліотека для створення мегаменю.

Інше

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

PHP

Бібліотеки

back to contents ↑

SEO

  • openlinkprofiler.org — безкоштовний інструмент для перевірки зворотних посилань.
  • schemantra.com — безкоштовний генератор мікророзмітки у форматі JSON-LD.
  • opengraph.xyz — безкоштовний генератор метатегів Open Graph та перегляд вигляду URL-адреси після її публікації в соціальних мережах.
back to contents ↑

Валідатори

back to contents ↑

Хостинг

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

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

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

Тестування зовнішніх API

  • ReqBin — онлайн-інструмент для тестування API для REST та SOAP API. Тестування кінцевих точок API, надсилаючи запити API безпосередньо з вашого браузера. Тестування відповіді API за допомогою вбудованих валідаторів JSON та XML. Тестування свого API за допомогою сотень імітованих одночасних з'єднань. Генерація фрагментів коду для фреймворків автоматизованого тестування API.
back to contents ↑

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

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

YouTuBe

  • savefrom.net — завантаження та збереження локально відео з YouTuBe.
  • ssyoutube.com — завантаження відео з YouTuBe.
  • ytop1.com — конвертер YouTuBe -> mp3 та збереження локально.
  • y2down.cc — конвертація та збереження локально відео з YouTuBe у відео/аудіо форматах.
back to contents ↑

Email, SMS розсилки

  • TEMP-MAIL — безкоштовний сервіс електронної пошти, який дозволяє отримувати електронні листи на тимчасову адресу, що самознищується через певний час. Багато форумів, власників Wi-Fi, веб-сайтів та блогів просять відвідувачів зареєструватися, перш ніж вони зможуть переглядати контент, коментувати або завантажувати щось. Temp-Mail — це найсучасніший сервіс одноразової електронної пошти, який допомагає вам уникнути спаму та залишатися в безпеці.
  • mailer lite — аналог популярного сервісу email-розсилок Mailchimp з україномовною підтримкою та більш зрозумілим і зручним інтерфейсом. Має офіційні плагіни для WordPress та WooCommerce.
  • turbosms.ua — масові SMS розсилки.
back to contents ↑

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

Системи обліку

  • Dilovod — український онлайн-сервіс обліку та звітності (онлайн-бухгалтерія).

Запис екрану

  • OBS Studio — безкоштовна програма запису екрану для Windows.
  • Loom — онлайн-інструмент трансляції екрану, який дозволяє знімати екран свого комп'ютера та записувати себе на камеру. Loom можна використовувати на Mac і Windows. Після закінчення відео із записом екрану є можливість редагувати його та поділитися ним у вигляді URL-адреси або вставити на веб-сайт. Серед тарифних планів є безкоштовний варіант.
back to contents ↑

3D моделювання та анімація

  • Blender — безкоштовна програма для створення анімацій. Підтримує Windows, Linux, macOS

Розширення/Додатки для браузерів

  • Browsec VPN — безкоштовний VPN для Firefox.
  • HeadingsMap — зручне виведення на екран заголовків H1-H6 на поточній сторінці з можливістю переходу по кліку до місця розташування їх у коді.
  • GoFullPage - Full Page Screen Capture — повний знімок екрану поточного вікна браузера, включаючи присутність вертикального прокручування. Можливість зберегти знімок у форматах PNG, JPG, PDF.
  • Redirect Path — виведення інформації про наявний редирект на поточній сторінці сайту (Chrome).
  • Wappalyzer — аналіз технології, що використовуються на веб-сайтах, які ви відвідуєте.
back to contents ↑

Інше

  • jsonformatter.org — JSON-парсер для виведення JSON-даних у зручному форматі.
  • businessnamegenerator.net — генератор доменних імен за ключовими словами.
  • businessnamegenerator.net — генератор назви компанії (бренду) за ключовими словами.
  • ClearVPN — безкоштовний VPN застосунок від українського розробника для приватності, анонімності та безпеки онлайн. Для безкоштовного користування повним набором функцій українцям потрібно пройти верифікацію через ДІЮ.
Михайло Петров
Михайло Петров

Мене звати Михайло. Я — WordPress-розробник. Створюю візитки, корпоративні сайти, інтернет-магазини, блоги на WordPress. Надаю консультації з WordPress.