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

Безусловно в этом списке вы обязательно найдёте уже знакомые расширения, однако огромный пласт полезных расширений всегда остаётся в стороне. Так что приготовьтесь установить ещё парочку расширений! :)

Встроенные инструменты разработки в Firefox

Перед началом списка было бы неправильно не упомянуть об инструментах, уже встроенных в Firefox. Здесь речь идёт о тех самых инструментах разработки в Firefox Aurora 10 и том функционале, который сегодня можно найти в любом современном браузере.

При разработке интерфейса этих инструментов было перепробовано множество подходов и решений. В результате получился довольно приятный интерфейс, который любой желающий может испробовать, установив Firefox Aurora (хм, вы ещё его не поставили?)



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

Доброе время суток уважаемые хабражители.

Многие javascript-программисты сталкивались с не поддерживанием некоторых функций DOM JS API в некоторых браузерах (не будем показывать пальцем). Наверняка, многие знакомы с замечательными библиотеками es5-shim и DOM-shim для решения проблем совместимости между разными браузерами, а DOM-shim к тому же, «подтягивает» браузер до уровня DOM4.

В данной же статье я расскажу, как сделать DOM-shim в IE6 и IE7, чтобы навсегда забыть о существовании этих браузеров.

На одном из проектов было необходимо сделать кропалку для загружаемых юзерами аватаров. Стандартные решения, такие как Jcrop, после выделения области отправляют на сервер координаты, и сам кроп изображения необходимо осуществлять уже на сервере. Тем временем, современные браузеры уже дошли до того состояния, когда подобные действия можно осуществлять сразу на клиенте. Это и подтолкнуло меня к написанию своей кропалки с использованием canvas, которая производила бы все действия на клиенте и отправляла готовое изображение в виде base64-строки на сервер. Помимо ускорения работы и разгрузки сервера, это так же позволит нам сразу сменить аватар пользователя на странице, без подгрузки его с сервера.

Предисловие

Всем привет. Не так давно я написал статью о создании загрузчика изображений на флеше. Там я упомянул, что загрузчик можно реализовать и с помощью html5 File API. Несколько вечеров и — ура — я это сделал. Настало время рассказать, какие приемы я использовал, в каких браузерах это работает, и стоит ли этим вообще пользоваться.
Напомню вкратце требования: необходимо реализовать загрузчик изображений, поддерживающий пакетную загрузку, создание миниатюр(и загрузку их на сервер), и приемлемый интерфейс.

Я уже писал о своих экспериментах со скроллбарами на сайтах и в веб-приложениях, но эти опыты удались не вполне. Поэтому я пока оставил идею кастомизации скроллбаров, но решил досканально разобраться с событиями, вызываемыми прокруткой колеса мыши.

Итак, задача: реализовать реакцию на события прокрутки мышиного колеса над определённым блоком, то есть не трогая «родной» скролл окна браузера. Реализация должна быть кроссбраузерной и не использовать какие-либо фреймворки.

Забегая вперёд, скажу, что этот экперимент удался вполне, а итоговый результат работает во всех десктопных браузерах, начиная с IE7 (по идее, должно работать и в шестом, но сейчас нет возможности это проверить). Также, хочу выразить благодарность поисковой системе Гугл. Без неё жизнь была бы соткана из уныния и отчаяния.

Так получилось (и прошу считать это удачным совпадением), именно сегодня на Хабре опубликован топик про практическое применение теней из CSS3 для создания интересных эффектов, а мы в свою очередь подготовили топик про основы для этого творчества.

Мы попробуем разобраться в том, как работают тени в новых модулях CSS3. С практической точки зрения, мы рассмотрим два правила: box-shadow и text-shadow, определенные соответственно в модулях CSS3 Backgrounds and Borders и CSS3 Text.

Оба правила работают схожим образом (вплоть до соответствующей отсылки в спецификации), поэтому имеет смысл рассматривать их вместе. Вместе с этим есть некоторые различия, о которых тоже нельзя не сказать.

Первая часть посвещена работе с box-shadow, во второй мы пройдемся по теням для текста.

Привет, Хабр!

Хочу поделиться замечательным мастер-классом по созданию реалистичных теней для блоков на чистом CSS, найденном на просторах рунета по адресу http://mainview.ru/css/realistichnye-teni-pri-pomoshhi-css3-bez-ispolzovaniya-izobrazhenij. Естественно, для того, чтобы примеры работали как надо, необходим браузер с поддержкой CSS3.

В то время как Ajax стал мейнстримом, пользовательские интерфейсы по-прежнему не могут похвастаться мгновенной отзывчивостью к действиям пользователя. Причина в том, что многие разработчики привыкли мыслить в терминологии «запрос/ответ» и думают, что UI должен работать параллельно с фронтэндом, дожидаясь ответа от сервера на каждый запрос. Но почему бы не обновлять интерфейс раньше, чем пришёл ответ?

Проблема довольно острая, потому что быстродействие является критически важной характеристикой UI. Например, по оценке Amazon, задержка загрузки страницы всего лишь в 0,1 секунды приводит к снижению оборота магазина на 1%. По оценке Google, задержка в 0,5 секунды уменьшает количество поисковых запросов на 20%.

Ruby/JavaScript-разработчик Алекс Маккоу (Alex MacCaw) из компании Twitter предлагает логичное решение проблемы: распространить принципы Ajax не только на фронтэнд, но и на пользовательский интерфейс. Он разработал соответствующий фремйворк для того, что называется AUI (асинхронный интерфейс пользователя).

Введение

Открывая любой учебник по языку программирования мы первым делом видим простой прмер, показывающий программисту базовые возможности языка. Обычно в качестве такого примера выступает всеми любимый вывод «HelloWorld» на экран. Все давно привыкли к тому, что такой пример просто реализует минимальную структуру программы, и не дает забросить книгу куда-нибудь в уборную на дальнюю полку. Но существует некоторые языки программирования в которых вывод сообщения на экран не является такой уж тривиальной задачей. Ниже будет приведено несколько простых примеров.

Очень хороший и простой способ отдать клиенту несколько файлов в zip архиве. Не нагружая и без того нагруженный сервер.

var zip = new JSZip();
zip.add("Hello.txt", "Hello World\n");
img = zip.folder("images");
img.add("smile.gif", imgData, {base64: true});
content = zip.generate();
location.href="data:application/zip;base64,"+content;

Итак давайте разберем, что тут происходит.
Создается экземпляр нашего zip архива, класс JSZip,.
Далее мы можем добавлять в него любые данные, допустим Hello.txt, также можно добавить папку images.
Далее положить в нее smile.gif, все это завернуть, и отдать вам как zip фаил.

Добрый день, Хабр!

Не так давно я оставлял весьма категоричный комментарий в топике о модернизации скроллбаров а, буквально, через пару дней был вынужден сам решать задачу о его (скроллбара) модернизации. Так уж сложились звёзды, что в пользовательском интерфейсе одного из проектов стандартной полосе прокрутки место было найти можно, но крайне нежелательно. Из всех возможных вариантов было выбрано нечто среднее между скроллбаром нового Gmail'а, благо задачи похожи и Mac OS X Lion, потому что «ох, они круты ». Я вооружился js и jQuery, и на свет было произведено это.

Я попытаюсь просто объяснить, как работают замыкания в Javascript, как работает this, как создавать конструкторы для своих классов и чем различаются различные подходы к их созданию.
Статья не претендует на новаторство, но достаточно доступные объяснения how it works для новичков я не видел, и на мой взгляд — это три самых узких места в Javascript (не привязанному к какому либо контексту, серверу или браузеру, например).

Как-то незаметно для себя, я решил отойти от возни с классами и паттернами, и разобраться с самыми обычными Js функциями. Думал, что будет достаточно скучно, но ошибся — оказалось очень даже интересно.

В этой статье я расскажу об особенностях объявления функций, и некоторых полезных паттернах (кхе-хе, да, они есть и тут)

Совсем недавно с 15 по 16 ноября состоялась первая конференции W3Conf, которую провела организация W3C, ответственная за утверждение стандартов веб-разработки. Подзаголовок конференции был следующим: “Practical Standards for Web Professionals” (практическое применение стандартов для профессионалов в Веб).

На конференции выступили спикеры от множества участников организации W3C: Microsoft, Google, IBM, Adobe, Mozilla, Opera, Amazon, Nokia и других.

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

Разработчик Андерс Эвенруд (Anders Evenrud) сделал любопытный проект OS.js, который он называет «операционной системой на Javascript».



Название поменяется в ближайшее время, потому что оно не отражает реальность: на самом деле OS.js — не операционная система, а оболочка и оконный менеджер в стиле Linux, с комплектом приложений на HTML5 и CSS2+, с PHP-бэкендом. Из приложений есть часы (HTML5-SVG, CSS2), видеоплеер (HTML5-Video), аудиоплеер (HTML5-Audio), файловый менеджер, терминал, графический редактор (HTML5-Canvas), игры и прочее. Они разработаны, в основном, на Glade Interface Designer (GTK+3 XML).