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

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

Зміст:

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 використовувати конкретну модель.
  • artificialanalysis.ai — незалежна компанія з бенчмаркінгу ШІ. Тестує агентів, моделі, хмари, які їх обслуговують, чіпи, на яких вони працюють.
  • LM Studio — окрема програма-середовище для встановлення відкритих мовних моделей локально. Є безкоштовний тариф. Доступні версії для Windows, Linux, Mac.

Google сервіси

UI/UX

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

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

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

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

Пісочниці WordPress

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

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

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

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).

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.

Конвертори

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

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

Конвертери

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

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

Пакетна обробка

Кольори

  • 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-коду.

Бібліотеки

Збірка проектів (бандлер)

  • Vite — сучасний інструмент збірки (build tool) та локальний сервер розробки для фронтенду. Розроблений як швидша, легша та сучасніша альтернатива застарілим бандлерам (зокрема Webpack, Rollup чи Parcel).

Відеоплеєри

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

Галереї

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

Попапи (popup, modals)

Слайдери

  • Owl Carousel — карусель на jQuery.
  • Slick Slider — слайдер на jQuery.
  • Swiper — слайдер на чистому JavaScript (використовую у своїх проєктах).

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

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

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

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

Інше

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

PHP

Бібліотеки

SEO

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

Валідатори

Хостинг

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

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

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

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

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

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

YouTuBe

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

Email, SMS розсилки

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

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

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

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

Запис екрану

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

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

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

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

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

CMS

  • OkayCMS — для інтернет-магазину.

Графічні | Аудіо | Відео редактори

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

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

Редактори

  • PhotoCraft — безкоштовний аналог Adobe Photoshop (редагування растрових зображень, робота з шарами, масками, коригувальними шарами, пензлями та векторами. Підтримує читання та збереження форматів .psd та .psb).
  • VectorCraft — безкоштовний аналог Adobe Illustrator (векторна графіка та ілюстрація. Включає інструменти Перо (Pen tool), булеві операції, градієнтні сітки, трасування зображень у вектор (Image Trace) та експорт в SVG/PDF).
  • FilmCraft — безкоштовний аналог Adobe Premiere Pro (професійний нелінійний відеомонтаж. Має багатодріжкову часову шкалу (timeline), інструменти кольорокорекції (Curves, LUTs, Log/HDR), ефекти та переходи).
  • LightCraft — безкоштовний аналог Adobe Lightroom (каталогізація фотографій та обробка RAW-файлів. Містить інструменти корекції експозиції, 8-діапазонний мікшер кольорів, маскування та роботу з фотоальбомами).
  • PdfCraft — безкоштовний аналог Adobe Acrobat (робота з PDF-документами. Дозволяє переглядати, об'єднувати, розділяти, повертати та впорядковувати сторінки, а також працювати із захищеними/зашифрованими PDF).
  • EffectCraft — безкоштовний аналог Adobe After Effects (анімація, моушн-дизайн (motion graphics) та створення візуальних ефектів (VFX).
  • DesignCraft — безкоштовний аналог Adobe InDesign (верстка, дизайн макетів для друку та електронних публікацій (Page layout & publishing).

Інше

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

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

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