Болтаясь сегодня по интернету в поисках чего-нибудь интересненького, наткнулся на вот такой простой (и столь же замечательный в своей простоте) способ отыскать «неполадку» в верстке.

CSS

* { outline: 2px dotted red; }
* * { outline: 2px dotted green; }
* * * { outline: 2px dotted orange; }
* * * * { outline: 2px dotted blue; }
* * * * * { outline: 1px solid red; }
* * * * * * { outline: 1px solid green; }
* * * * * * * { outline: 1px solid orange; }
* * * * * * * * { outline: 1px solid blue; }


Цвет, тип и размер обводки каждый может выбрать по вкусу.

Поддержка браузерами:

К сожалению, в браузерах от Microsoft версий 6 и 7 (в 8-й — все окей) свойство outline не поддерживается. Для них, пожалуй, придется использовать border.

Задача

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

Часть I — Часть II — Часть III — Часть IV — Часть V — Часть VI

Часть I

Как-то ко мне обратился знакомый дизайнер с просьбой разобраться в странной по его мнению ситуации. Клиент просил «сделать так же, как у Apple», но с использованием собственных способов расположения блоков, изображений, цветовой гаммы и текста. В общем, дизайн в итоге получался совершенно непохожий на apple.com, но этого, собственно, и добивался клиент. И вроде бы у дизайнера получилось, но… Клиенту по-прежнему не нравилось, он всё равно требовал переделать макет. По его ощущения «что-то было ну совсем не так». А что именно — тот объяснить был не в силах. Вот и возник вопрос у моего коллеги по поводу того, как угодить капризам клиента и понять его чаяния. Оказалось всё не так просто, но вполне объяснимо. Я и раньше сталкивался с данной проблемой. Поэтому решил попробовать изложить свои мысли по этому поводу.

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

Задался недавно вопросом, какие шрифты можно без зазрения совести и страха развалить дизайн сайта использовать на последнем.

Нашел несколько полезных ссылок, спешу поделиться с теми, кто еще не успел найти подобное.

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

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

Для начала стоит определиться с названием. При мозговом штурме мы учитывали три условия: 1. Компании с таким названием не должно существовать. Или на крайний случай их не должно быть много в РФ. 2.Свободное доменное имя в зоне ru.
В итоге, через несколько дней поиска у нас появилась целая куча странных и не очень названий типа: Мурака-Барака, Ник Кейв, Огенри, Кейтбланш, Магвай, Донни Дарко.

Мы выбрали Магвай. В тот момент я не подозревал о существовании фильма Гремлины, двое других о нем просто забыли. Так появилась веб-студия Магвай — создание сайтов в Волгограде.
Основные виды нашей деятельности: разработка сайтов, реклама (seo, контекстная и пр.), фирменный стиль + в дальнейшем создание и развитие собственных проектов.

Поиск офиса
Мы искали необшарпанную комнату до 25 метров, с умеренной ценой и не слишком далеко от центра города. Несколько советов для тех, кто сейчас в поиске, на что следует обратить внимание:
1. Цена, планировка, состояние офиса, наличие-отсутствие кондиционера, с какой стороны восходит солнце, куда дели жалюзи – все что должны узнать в первую очередь.

Представляю вашему вниманию обзор нескольких полезных инструментов для всестороннего тестирования сайтов.

Статья является расширенным сборником CSS-хаков в сравнении с аналогичной статьей.
Под хаком подразумевается метод, позволяющий воспринимать CSS только определенному браузеру.
Хаки могут использоваться не только для исправления багов в верстке, но и в случае использования определенных особенностей браузера для ускорения рендеринга web-страницы в нём (к примеру CSS3-свойства)

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

Возможности

1. Можно создавать свои собственные жесты;
2. Можно иметь множество областей на странице, которые будут способны распознать жесты;
3. Есть визуальная обратная связь;
4. Работоспособность во всех основных браузерах.

Благодарности

Этот скрипт инициирован из скрипта распознавания жестов мыши от Didier Brun.

Демонстрация

Запустить демонстрацию распознавания жестов мыши

Скриншот модных жестов jQuery

Как управлять небольшой web-студией в провинциальном городке? Маленькая – это 3-4 человека с учетом самого управленца. Конечно, готового рецепта я дать не могу (опыта маловато), но поделиться какими-то своими соображениями очень даже вполне.

В статье «Как учить английские слова» возникло очень оживленное обсуждение, в котором читатели привели ряд ссылок на интересные ресурсы. Теперь все они собранны в одном месте.

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

Несмотря на то, что необходимо минимизировать количество http-запросов, иногда (или часто, в зависимости от задачи) бывает полезно загружать часть «тяжелого» функционала только тогда, когда он действительно понадобится на странице.
У jQuery есть механизм, позволяющий осуществить это — $.getScript, однако, он обладает рядом недостатков:

• не запоминаются уже загруженные или загружаемые в данный момент скрипты, при повторном запросе опять идет их загрузка.
• нельзя указать сразу несколько скриптов
• выключен кэш (к каждому урлу насильно приписываются параметры типа ?_=1242843920520). Зачем это было так жестко сделано, для меня осталось загадкой.
• у коллбэка нельзя задать контекст (это вообще болезнь коллбэков jQuery).

Пришлось написать небольшой плагин, лишенный вышеперечисленных недостатков:

$.requireScript(url, callback, [context], [options])
Где:
url — урл загружаемого скрипта (может быть массивом урлов)
callback — коллбэк-функция, вызываемая после загрузки скриптов
context — контекст, в котором вызывается коллбэк-функция (опционален)
options — параметры; в данный момент поддерживается только один параметр — parallel, указывающий, нужно ли использовать параллельную загрузку для нескольких скриптов (по умолчанию — true)


Может кому-то пригодится. Скачать и попробовать можно с code.google.

UPDATE: согласно замечаниям в комментах, $.loadScript переименован в $.requireScript, и теперь можно указать несколько урлов сразу.

Многие знают о механизме Event-Dispatcher-Listener'ов, реализованному во многих языках программирования. Я же создам подобный механизм не для Event'ов, а для любого метода объекта JavaScript — Object.
Я не претендую на оригинальность, нет. Основная цель статьи — рассмотреть интересные механизмы прототипирования в JavaScript, создание декораторов и, собственно, постараться хоть немного раскрыть мощь и гибкость это чудесного языка, который так часто обижают и недооценивают.

UPD1: краткое содержание:
1. Создание декоратора на JavaScript
2. Создание механизма Function call listener с помощью декораторов

UPD2: от 09.06.2009
В конце статьи я добавил раздел Update: Decorator Mark II. В нём — исправления и улучшения (я не перекраивал всю статью из-за этого)

Итак, первый (и, надеюсь, не последний) рецепт в моей поваренной книге JavaScript.

Если кто не знал — в именах CSS-селекторов можно использовать юникодовые символы. Вообще любые. :)

Теперь подумаем,

Есть в диджеинге такая вещь, до которой новички своим умом не всегда доходят. Это гармоническое сведение.

Обновился замечательный аддон Yslow для Firefox.

Для тех кто в танке, этот плагин помогает выявлять узкие места на сайте влияющие на скорость загрузки.

Насколько я заметил список изменений таков:
1) Появились сеты для разных типов проверок.
2) Добавили инструменты — Jslint для проверки яваскрипта, Интеграция с сервисом Smush.it, который сжимает картинки на сайте без потери качества.
3) Улучшился дизайн.

Всем кто делает сайты, рекомендую установить если вы еще этого не сделали.

Источник
Обновиться

Доброго времени суток уважаемые хабрапользователи! Спешу поделиться с вами отличной статьей, которую написал товарищ Jackarus (TriminghamDJ Trimingham). Сам он к сожалению запостить не смог, поэтому пришлось это сделать мне. Так что если кто-то захочет поблагодарить автора статьи, помните что автор — Jackarus (надеюсь он объявиться в комментариях), а не я, помните кого плюсовать ;)

P.S. Заодно, пользуясь случаем, хочу извиниться перед автором статьи за огромную задержку в публикации.

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

После небольшого исследования выяснилось, что не всегда данный размер возможно получить обычными способами. Будь то методы jQuery, prototype или обычное обращение к параметрам DOM.

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

Понадобилось мне тут вдруг для одной прикладной задачи генерировать PNG-шки на PHP, чтобы затем их можно было вставлять в документы и распечатывать. Но вот проблема, никак с помощью GD в PHP при сохранении нельзя задать разрешение в dpi, а ведь это очень важно при печати. С ImageMagick мне связываться не хотелось, поэтому я быстренько нагуглил PNG (Portable Network Graphics) Specification и написал вот такой код:

До того как заняться верской гитарных аккордов (статьи 1,2,3) я столкнулся с необходимостью сделать человеку на сайте меню-дерево. Рисовать не хотелось вообще, поэтому я взял старый добрый HTML с CSS и начал делать это дерево, начал с простого одноуровневого, а позже сделал многоуровневое с маркерами, которое и представлю.

Позже это дерево дало мне плоды в виде habrahabr.ru/blogs/css/53792