Ne v kontakte Antisocial programmer's blog

10 фитч в Firebug, о которых вы не знали.

10 фитч в Firebug, о которых вы не знали.

    firebug     webdev     frontend     translated

Вступление от переводчика. Я довольно редко по доброй воле берусь за переводы чужих статей, но в этот раз я всё же хочу поделиться с вами небольшой заметкой, написанной Эриком Венделином “10 Things you didn’t know about Firebug“. И хотя я довольно давно пользуюсь FireBug’ом, до прочтения этой заметки я знал лишь о трёх из упомянутых ”фитч”.

Мне доводилось работать со многими инструментами разработки, но Firebug меня просто поразил. Firebug - это расширение для Firefox, предназначенное для отладки и оптимизации CSS, JavaScript, HTML… и многого другого!

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

  1. Вы можете отслеживать время загрузки ваших скриптов (прим. переводчика: и не только скриптов) во вкладке “Net”. Бонус: FireBug выделяет запросы, которые обслуживаются из локального кэша светло-серым цветом, что полезно при оптимизации времени загрузки.
  2. Правый клик на метке брекпойнта позволяет задать условие останова.
  3. Вывод отладочной информации в консоль с помощью console.log чрезвычайно удобен, но знали ли вы, что эти записи можно группировать с помощью методов console.group(“Group Name”) и console.groupEnd()?
  4. Используйте console.profile() и console.profileEnd() для замера времени исполнения каждого вызова функции. А ещё можно просто воспользоваться профайлером.
  5. Если вы во вкладке CSS наведёте курсор на код цвета, то FireBug покажет вам записку этого цвета.
  6. Вы можете не только в реальном времени наблюдать изменения структуры HTML вашей страницы, но и самостоятельно менять всё, что угодно.
  7. Если вы используете FireBug на экране с большим разрешением, и надписи в его интерфейсе для вас слишком мелкие, вы можете увеличить размер шрифта, кликнув по картинке с тараканом и выбрав “Размер текста” → “Увеличить размер текста”.
  8. Вы можете использовать команду debugger; в вашем JavaScript-коде, чтобы приостановить его исполнение и вызвать панель FireBug.
  9. Вы можете логгировать все вызовы какой-либо функции просто сделав правый клик на её имени и выбрав “логгировать вызовы myfunction“.
  10. И наконец… вы можете использовать FireBug в IE, Opera, Safari и Chrome, скачав FireBug Lite! Правда, в этом режиме функциональность будет несколько ограничена.

Read more →

Удобная разработка букмарклетов

    js     dev     bookmarklets     articles     frontend

В процессе работы над Pastemark (пост-анонс) мне понадобилось, во-первых, написать довольно сложный букмарклет и, во-вторых, сделать динамическую генерацию букмарклетов с разными параметрами. Не возьмусь претендовать на новизну, а лишь просто поделюсь найденным мною подходом.

О букмарклетах

Для тех, кто с ними еще не сталкивался с букмарклетами, букмарклет — это разновидность закладки, но от обычной закладки он отличается тем, что вместо адреса страницы в ней записан скрипт, как правило не очень большой.

Спектр применений букмарклетов довольно широк: от простого изменения размера шрифта на текущей странице до анализа ее содержимого и передачи извлеченных данных какому-нибудь третьему сервису. В качестве примера можно привести букмарклет твиттера.

Read more →

Молниеносная верстка с помощью Zen Coding

    web     dev     frontend     articles

Всем нам приходится писать html-код, кому-то больше, кому-то меньше.

В частности, у меня написание шаблонов для моих движков зачастую занимает до трети времени от разработки. Главная причина тому - сравнительная многословность html, да и css. Так бы я и мучился, если бы очередной раз не наткнулся на статью по Zen Coding.

Как постичь Дзен?

Если кратко, то Zen Coding - это целое семейство плагинов к разным редакторам, позволяющее писать сокращенный код, который потом будет автоматически развернут с полную конструкцию. Вот вам сразу пример:

Read more →