Корисні онлайн-ресурси та інструменти для веб-розробника
Привіт:) У цьому пості я зібрав корисні ресурси та інструменти онлайн, які стануть у пригоді для веб-розробника, SEO-шника, дизайнера, контент-менеджера.
- Валідатори
- AI
- Google сервіси
- Сканери: безпека | віруси | malware
- Пісочниці коду
- Онлайн-редактори
- WordPress
- WooCommerce
- HTML/CSS
- Генератори коду
- Конвертори
- MySQL
- Шрифти
- Текст
- Зображення/Картинки/Іконки/PDF
- Безкоштовні зображення/іконки
- Конвертери
- Онлайн-редактори
- Оптимізація/Стиснення
- Кольори
- CSS
- Бібліотеки
- JavaScript
- Мініфікація
- Бібліотеки
- Відеоплеєри
- Галереї
- Попапи (popup, modals)
- Слайдери
- Parallax (Паралакс) та анімація
- Збільшення зображення по кліку
- Інше
- SEO
- Хостинг
- API-сервіси з фіктивними даними JSON
- Тайм-трекери
- YouTuBe
- Розсилки
- Файлові сховища
- Інше
Валідатори
- brokenlinkcheck.com — перевірка сторінок сайту на наявність неробочих ("битих", 404) посилань. Якщо потрібно знати, на яких саме сторінках сайту присутні невірні URl-посилання: drlinkcheck.com або deadlinkchecker.com.
- last-modified.com — перевірка Last-Modified.
- validator.schema.org — валідатор schema.org.
- validator.w3.org — валідатор HTML-розмітки.
AI
Google сервіси
Сканери: безпека | віруси | malware
до змісту ↑Пісочниці коду
- codepen.io — HTML/CSS/JS-пісочниця.
- jsfiddle.net — HTML/CSS/JS-пісочниця.
- onlinephp.io — PHP-пісочниця.
- regex101.com — онлайн-тестування регулярних виразів.
Онлайн-редактори
- 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
- Large Sample Data Set For WooCommerce — великий набір тестових даних для магазину на WooCommerce у форматах CSV та XLSX.
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.
Конвертори
- Pixel to Em Converter — конвертор з PX в EM і навпаки.
- PX to REM converter — конвертор з PX в REM і навпаки.
MySQL
- Search Replace DB — безпечна заміна в базі даних.
Шрифти
- 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
Безкоштовні зображення/іконки
- apps.timwhitlock.info — великий список кодів Емоджі.
- icon-icons.com — соціальні медіа та логотипи, іконки.
- flaticon.com
- remixicon.com — більше 2-х тисяч безкоштовних іконок в одному стилі (SVG, PNG).
- Full Emoji List — список кодів Емоджі.
- Loading.io — анімовані іконки лоадери (спінери).
- placehold.co — зображення-заглушки онлайн.
- picsum.photos — випадкові зображення-заглушки онлайн.
- Unicode Characters — список Unicode іконок.
- w3schools.com — список кодів Емоджі.
- Material Symbols & Icons - Google — безкоштовні Google-іконки в форматах SVG і PNG.
Конвертери
- iconizr.com — конвертація SVG-зображень в CSS іконки.
- urldecoder.org — SVG URL decoder.
- urlencoder.org — SVG URL encoder.
- ilovepdf.com — конвертор PDF -> Word.
Онлайн-редактори
- photopea.com — безкоштовна онлайн заміна Photoshop.
- pixlr.com — безкоштовний редактор зображень.
- pixso.net — редактор для роботи з Figma-макетами.
- yqnn.github.io — SVG редактор.
Оптимізація/Стиснення
- compressor.io
- TinyPNG
- WebsitePlanet ImageCompressor
- img2go.com — збільшення зображень за допомогою ШІ (штучного інтелекту).
- smallpdf.com — стиснення PDF.
Кольори
- 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 (Паралакс) та анімація
- simplePARALLAX.js
- AOS (Animate On Scroll Library)
- particles.js — анімація частинок.
Збільшення зображення по кліку
Інше
- 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 та збереження локально.
Розсилки
- turbosms.ua — масові SMS розсилки.
Файлові сховища
Інше
- jsonformatter.org — JSON-парсер для виведення JSON-даних у зручному форматі.
- businessnamegenerator.net — генератор доменних імен за ключовими словами.
- businessnamegenerator.net — генератор назви компанії (бренду) за ключовими словами.