Тримайте свій CSS і JavaScript в чистоті

В сьогоднішній статті ми розглянемо декілька інструментів, за допомогою яких ви зможете краще писати код, а також підтримувати його в робочому стані.

 

Перевірка коду

  • StyleStats: Простий інструмент для збору статистики та аналізу CSS на сайті (наприклад, використовувані шрифти, кольори, селектори та інше).
  • W3C CSS Validation: Перевірте валідацію свого CSS за допомогою цього інструменту.
  • Can I Use: На цьому ресурсі ви знайдете свіжі дані про підтримку різними браузерами та мобільними пристроями певних властивостей CSS, HTML5, SVG і JavaScript.
  • CSS Lint: Цей інструмент шукає помилки в CSS-коді.
  • JS Lint: А цей шукає помилки в JavaScript-коді.

 

Оптимізація коду

  • CSSCSS: аналізує CSS файли і знаходить дубльовані набори правил.
  • Helium: за допомогою цього інструменту ви зможете виявити невикористовувані CSS-стилі на сторінках свого сайту. Інструмент побудований на Javascript і працює в браузері.
  • PurifyCSS – служить для видалення невикористовуваного CSS. Тут докладний урок по роботі з цим інструментом.
  • Refresh-sf: цей інструмент служить для стиснення JavaScript або CSS, що дозволяє зменшити розмір файлів і збільшити швидкість завантаження сайту.
  • JavaScript Minifier: інший онлайн-інструмент для стиснення JavaScript-коду.
  • Closure Compiler Application – утиліта від Google, яка стискає, оптимізує і шукає помилки в JavaScript. Її можна використовувати для об’єднання декількох JavaScript-файлів в один. Утиліта працює через командний рядок, опис процесу тут.

Іноді потрібно стиснений код подивитися в зручному для очей форматі, тоді вам допоможе інструмент jsbeautifier, який вміє працювати з JavaScript, HTML і CSS.

 

Recent Posts

Що таке вита (кручена) пара та де використовується

Сьогодні, в вік високих технологій, дуже важлива швидка та ефективна передача даних. Завдяки швидкому обміну… Read More

21/01/2021

Брюс Лі

Не важливо, як повільно ти рухаєшся, головне, що ти не зупиняєшся - Брюс Лі   Read More

20/01/2021

Google Search Console – Проблема з LCP та як її вирішити

Нещодавно ми писали про нововведення в інструменті для вебмайстрів Google Search Console – Основних веб-показниках.… Read More

18/01/2021

Як змінити HTML код вбудованих елементів WP oEmbed в WordPress?

Починаючи з WordPress версії 2.9 в двигун була додана підтримка oEmbed – формат простого API,… Read More

16/01/2021

Багатофункціональний пристрій коверлок: ключові особливості

Існує багато різновидів швейного обладнання, які відкривають великі можливості для вдосконалення навичок. Один з найскладніших… Read More

15/01/2021

Як зробити відкладене завантаження для HTML, iframe і вбудованого відео

Ліниве (або відкладене) завантаження (Lazy loading) – це популярний метод асинхронного звернення до адреси ресурсу,… Read More

13/01/2021