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

Життя веб-розробника може бути сповнена приємних моментів, але коли керівники проектів доручають вам робити все більше і більше, а часу на це відводиться все менше і менше, це може стати розчаруванням.

Тому завжди приємно знайти інструменти, які допоможуть зробити вашу роботу швидше і продуктивніше. У цій статті ми зібрали деякі з найбільш корисних інструментів.

Про деякі ви вже чули, інші вже використовуєте, але, сподіваюся, тут знайдеться, принаймні, один або два інструменти, які зможуть зменшити вашу завантаженість і зроблять ваш день більш приємним…

01. Firebug

Плагін Firebug для Firefox є обов’язковим інструментом для розробників.

Дивно корисне доповнення Firebug від розробників Firefox дозволяє оперативно проводити відладку, редагування та моніторинг HTML, JavaScript і CSS, і все це прямо у браузері.

Один із кращих інструментів для веб-розробників, його обов’язково повинні мати ті, хто працює у веб-дизайні.

02. HTML Entity Character Lookup

HTML Entity Character Lookup допоможе вам перевірити всі символи на вашій сторінці.

При використанні HTML дуже важливо забезпечити перевірку всіх символів вашої сторінки. Тим не менш, часто, щоб перевірити весь код, потрібно просканувати понад 250 рядків символів.

Інструмент також доступний в якості віджету на Mac Dashboard.

03. Adobe Edge Inspect

20 корисних інструментів для веб-розробників

Adobe Edge Inspect це сучасна альтернатива Flash для розробників мобільних додатків.

Це відносно нова платформа від Adobe надає розробникам дієвий спосіб створення інтерактивних веб-сайтів в пост-флеш епоху.

За допомогою цього інструменту ви можете створювати мобільні й адаптивні програми і контент, призначені для сучасних мобільних і ПК-браузерів. Використовуючи при цьому CSS і HTML.

04. -prefix-free

20 корисних інструментів для веб-розробників

-prefix-free допоможе вам вирватися з пекла CSS-префіксів.

Це крутий інструмент від Леї Віру дозволяє використовувати CSS властивості без префіксів. По суті, він працює за кулісами, додаючи префікс поточного браузера в будь-CSS-код, лише коли це необхідно.

05. Cloud9 IDE

20 корисних інструментів для веб-розробників

Cloud9 IDE дозволяє розробникам по всьому світу разом працювати над тим же кодом і спілкуватися.

Cloud9 IDE — це інструмент, завданням якого є допомогти розробникам у взаємодії при роботі над масштабними проектами створення кодів.

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

Його особливостями є наявність редактора і компілятора коду, можливість деревовидного перегляду архіву документів, смарт-відладчик і інтегрований FTP-клієнт.

06. PixelDropr

20 корисних інструментів для веб-розробників

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

Цей блискучий плагін Photoshop дозволяє легко створювати різні ілюстрації, кнопки та іконки. Всі ці елементи можуть бути перенесені в PSD-файл.

07. Foundation3

20 корисних інструментів для веб-розробників

Як говорять його творці з ZURB — він «скажено швидко» становить коди для адаптивних проектів.

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

Остання версія Foundation3 має можливість простого побудови макета на основі сітки, що робить роботу зі стилями ще більш зручною і гнучкою. Інструмент працює, як з SASS, так і з CSS.

08. Fontello

20 корисних інструментів для веб-розробників

Fontello пропонує простий спосіб створення іконок у форматі веб-шрифтів.

Цей генератор іконок дійсно єдиний у своєму роді. Виберіть піктограми, які вам потрібні, і Fontello скомпилирует їх у спеціалізований веб-шрифт. Ви також можете редагувати і налаштовувати коди символів і імена.

09. Cloud Comp

20 корисних інструментів для веб-розробників

Діліться з громадськістю вмістом свого сайту і додатками за допомогою простого інструменту Cloud Comp.

Цей зрозумілий і простий у використанні інструмент допоможе вам зробити доступними для інших контент вашого сайту й додатка.

Cloud Comp був створений спеціально, щоб дати дизайнерам і розробникам можливість надавати права доступу своїм клієнтам через оболонку різних пристроїв.

10. BLOKK

20 корисних інструментів для веб-розробників

11. Basecamp

20 корисних інструментів для веб-розробників

Basecamp є інструментом для управління проектами, який вибирають багато веб-розробники.

Розроблений в 37signals, Basecamp є популярним онлайн-інструментом, який дозволяє легко керувати проектами та координувати роботу членів команди.

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

12. Browser Shots

20 корисних інструментів для веб-розробників

Browser Shots створює скріншоти ваших сайтів в різних браузерах.

Browser Shots генерує знімки того, як відображається на сайті у шести найбільш популярних веб-браузерах з роздільною здатністю 800 на 600 і 1024 на 768.

Просто введіть адресу сайту і Browser Shots відкриє його з декількох комп’ютерів, а потім завантажить вам скріншоти сайту.

13. FavIcon Generator

20 корисних інструментів для веб-розробників

FavIcon Generator.

Favicon («іконка вибране») являє собою невелике, 16 на 16 пікселів зображення, яке показується на панелі вкладок або в закладках браузера, коли відкривається ваш сайт.

Цей інструмент дозволяє легко створювати Іконки для вашого сайту.

14. Web-developer toolbar

20 корисних інструментів для веб-розробників

Розширення Web Developer додає в браузер панель зручних інструментів.

Цей плагін, розроблений для Firefox, надає ряд корисних інструментів, які веб-розробники використовують кожен день. Це особливо корисно, якщо вам потрібно перевірити інформацію з HTTP-заголовків або проінспектувати XHTML.

15. Load Impact

20 корисних інструментів для веб-розробників

Load Impact симулює ситуацію велике навантаження на ваш сайт для тестування його продуктивності.

Успішним є той сайт, який завантажується швидко. Load Impact є хмарним сервісом для симуляції тестового навантаження та оптимізації сайту, який генерує навантаження на сайт як при великих обсягах трафіку.

Іншими словами, Load Impact дозволяє перевірити, як ваш сайт, веб-додаток, мобільний додаток або API-інтерфейс впорається з потоком до 1,2 мільйона користувачів одночасно.

16. Lorem Ipsum Generator

20 корисних інструментів для веб-розробників

Lorem Ipsum Generator робить саме те, що випливає з назви.

Якщо ви не в захваті від BLOKK (див. пункт 10), але вам все ж потрібно заповнити макет якимось текстом (Lorem Ipsum), ви можете використовувати цей інструмент, який, використовуючи посилання на сайт, додасть в текст інформацію про нього.

Він також включає в себе генератор випадкових текстів Lorem Ipsum.

17. W3c Markup Validation Service

20 корисних інструментів для веб-розробників

W3c Markup Validation Service перевіряє ваші документи на відповідність специфікаціям.

Перевірка валідності веб-документів є важливим етапом розробки, який може сприяти значному поліпшенню їх якості.

Цей безкоштовний сервіс від W3C допоможе вам перевірити правильність розмітки різних веб-документів в HTML, SMIL, XHTML і MathML і інших мовах.

18. Typetester

20 корисних інструментів для веб-розробників

Перевірте шрифти через Typetester.

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

19. Pingdom

20 корисних інструментів для веб-розробників

Pingdom — це відмінний інструмент для оцінки продуктивності вашого сайту.

Pingdom — це сервіс, який відстежує час роботи, простою і продуктивність веб-сайтів. Завантажте сторінку в HTML, і він буде імітувати процес завантаження всього сайту, включаючи різні елементи (JavaScript, RSS, CSS і зображення).

Це дозволить вам відслідковувати і контролювати продуктивність вашого сайту.

20. CSS Sprite Generator

20 корисних інструментів для веб-розробників

CSS Sprite Generator може допомогти поліпшити продуктивність вашого сайту.

За рахунок зменшення кількості запитів HTTP цей інструмент дозволяє підвищити швидкість завантаження вашого сайту. Картинки об’єднуються в одне велике зображення, що має задані розміри з координат векторів X і Y.

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

Переклад статті «20 useful tools for web developers» був підготовлений дружною командою проекту Сайтостроение від А до Я.