Я потратил несколько лет на изучение архитектуры компьютеров, и уж если одну вещь я выучил крепко, так это любовь компьютерных проектировщиков к изящным именам, используемым при инициализации или другой работе с памятью. Долгие часы своей жизни я истратил на придумывание забавно выглядящих адресов памяти для употребления в домашней работе или тестировании. Из подобных названий лучше других известен 0xDEADBEEF, а список некоторых других вы можете видеть вон там и там. Можно даже предположить, что этакие названия (особенно с подстановкою символов: например, «1» вместо «i» или «5» вместо «s») стали предтечами псевдо-крутого интернетовского жаргона, известного как leetspeak.

Всё это напомнила мне недавно попавшаяся мне статья о веб-дизайне (извините, я не помню её в точности). Автор статьи приводил пример CSS-кода, и выбранный им для примера цвет был #BADA55. Оказалось, что это даёт несколько безобразный зелёный цвет, но всё равно он побудил меня призадуматься о том, какие ещё английские слова можно сделать шестнадцатеричными кодами цвета.

Набросав краткий PHP-скрипт, получаем довольно обширный список для подбора таких цветов. Разумеется, годятся все коды, полностью состоящие из букв, но я также дозволил подстановку «1» вместо «i», «5» вместо «s» и «0» вместо «o». Та статья Википедии, на которую я выше сослался, также предлагала использовать «7» вместо «t» и «9» вместо «g», но мне кажется, что при этом не получаются сколько-нибудь легко читаемые «шестнадцатеричные слова» (да к тому же тогда список слов, и без того длинный, оказался бы гораздо длиннее).

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

████████████████ #ABACA5 → abacas
████████████████ #ABA5ED → abased
████████████████ #ABA5E5 → abases
████████████████ #ABA51A → abasia
████████████████ #ABBE55 → abbess
████████████████ #AB1DED → abided
████████████████ #AB1DE5 → abides
████████████████ #AB0DED → aboded
████████████████ #AB0DE5 → abodes
████████████████ #ACAC1A → acacia
████████████████ #ACCEDE → accede
████████████████ #ACCE55 → access
████████████████ #ACED1A → acedia
████████████████ #AC1D1C → acidic
████████████████ #AD0BE5 → adobes
████████████████ #AD0B05 → adobos
████████████████ #A5D1C5 → asdics

Благодаря псевдоклассу :checked, появившемуся в CSS3, можно стилизовать формы с чекбоксами и радиокнопками как угодно. В этом топике рассмотрен один очень простой способ, причем без использования JavaScript.



Демонстрация Скачать исходники

    - Google выше ранжирует сайты, которые загружаются быстрее.
    - Если на eBay или Amazone увеличить время загрузки страниц на 9% они теряют 1% прибыли.
    - Сделать свой сайт быстрее, чтобы сэкономить на клиентском трафике и на числе обращений к серверу.

.htaccess — наш герой

Профессионалы знают, что такое htaccess.
Тем кто собираются уйти с народ.ру на php-хостинг только предстоит узнать, что это такое.
Те кто только что установил свои первые jooml'у или wordpress срочно должны узнать о нашем герое — htaccess

Зачем нам .htaccess ?

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

Или другой пример. Скажем ваш ресурс начинает набирать популярность, но переезжать на выделенный сервер ещё рано, а мощностей VPS уже не хватает. Вас очень может выручить htaccess.

А ещё htaccess может решить некоторые вопросы с безопасностью вашего сайта.

А ещё…

7 июня EA Games запустили новую версию своего сайта. Интерфейс устроен неплохо, однако веб-шрифты выглядят такиииииими уродскими.

И, кажется, я нашёл решение, позволяющее сгладить шрифт при помощи CSS3-свойства text-shadow. Оно превосходно работает на Windows XP (отображаются ли шрифты ClearType или стандартным методом) и в более старых операционных системах, если браузер современный.



Посмотреть этот фокус.

Наткнулся на очень простой в реализации, но интересный rollover-эффект для кнопок на CSS. Автор — некий японец ksk1015.



Демонстрация эффекта и процесс написания.

Зачем?

Вообще, идея этого поста пришла мне в голову в тот самый момент, когда я, не имея до этого за плечами полноценного опыта фриланса, решил всерьез освоить oDesk. Да, если кто не знает, oDesk — это одна из крупнейших в мире фриланс-бирж. Итак, дело было в июле этого года. Официальной работы к тому времени у меня уже полгода как не было, все подработки закончились, новых серьезных заказов не предвиделось, и oDesk представлялся мне весьма перспективным вариантом. Аккаунт, как водится, был зарегистрирован «про запас» еще за год до того, но висел все это время без дела, поэтому начинать нужно было с нуля. При этом я был почти уверен, что руководство, хотя бы самое краткое, на тему, как и с чего начинать, я где-нибудь (уж на Хабре-то точно!) да найду.
Возможно, я плохо искал. Однако все, что мне попалось по теме, сводилось только к тому, что не нужно сразу загибать цены, лучше начинать с небольших. Примерная цитата: «начинайте с $10 в час, со временем, дорастете и до $15». Дорастать до $15, да еще и со временем, мне категорически не хотелось, я был уверен, что можно зарабатывать значительно больше. Да и кроме того, меня волновало огромное количество вопросов. Как заполнять профиль? На какие проекты откликаться? Как составлять cover letter? Как, черт побери, получить этот первый заказ, когда все тебе отказывают?
В тот момент я решил, что если все у меня получится, обязательно напишу то самое руководство для новичков, которого я не нашел.

От переводчика: Я думаю многие читали статью Rey Bango — What to Read to Get Up to Speed in JavaScript, но до хабра обсуждение так и не докатилось. Предлагаю закрыть этот пробел и поговорить о хороших книгах, блогах, тренингах и конференциях, посвященных в первую очередь клиентскому JavaScript и клиентской веб-разработке. Чтобы не копипастить оформляю статью в виде перевода.

Сейчас в рассылке JSMentors JavaScript идет обсуждение книг, который стоит прочитать, чтобы улучшить свои знания. Там было много позитивных отзывов и предложений. Я хочу показать вам те книги и интернет-ресурсы, который я считаю важными и которые помогут вам в обучении. На этой странице я перечислил большое количество источников, разделенных по уровням.

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

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

Сайтов с адаптивной разметкой с каждым месяцем становится все больше, заказчики кроме кроссбраузерности все чаще требуют адаптивность, но многие разработчики не спешат обучаться новым техникам. Но адаптивный дизайн — это просто! В этой статье представлено 5 примеров адаптивной разметки различных элементов веб-страниц.

На хабре в прошлом месяце была опубликована статья Конкурс ВК: Мессенджер для Android. Как это было!, в которой автор поделился своими мыслями о конкурсе и опубликовал список ресурсов и статей, которые помогли ему в создании приложения. Так как в последнее время я начал изучать разработку под iOS, то у меня скопилось некоторое количество ссылок, которые могут быть полезны для начинающих. Поэтому я последую его примеру и сделаю то же самое, только для своей платформы. Надеюсь, кому-нибудь они окажутся полезны и сэкономят немного времени.

Валидация форм была педантичным занятием с момента появления web. Первой пришла серверная валидация. Затем она развилась в валидацию на стороне клиента для проверки результатов в браузере. Теперь у нас есть такие гиганты как HTML5 и CSS3: глава о формах HTML5 предлагает нам новые типы для input полей и атрибуты, которые делают возможным проверку ограничений поля. Базовый UI модуль CSS3 предоставляет несколько псевдо-классов, которые помогают нам стилизовать состояние валидности и менять внешний вид поля в зависимости от действий пользователя. Давайте взглянем на комбинацию обоих для создания валидатора форм основанного на CSS, который имеет достаточно широкую поддержку браузеров.

Чем больше мы можем дать подсказок пользователю, как правильно заполнять форму, в процессе заполнения, тем меньше шансов, что он сделает ошибку. Взгляните на пример CSS3 валидации форм в браузере поддерживающем CSS3 UI псевдо-классы, например Chrome 4+, Safari 5+ или Opera 9.6+. Я использовал CSS3 UI псевдо-классы и HTML5 атрибуты форм для создания валидации основанной на CSS. Давайте посмотрим как это работает.

Работая с jQuery многие рано или поздно сталкиваются с одной особенностью: когда мы хотим показать с анимацией скрытый блок, его появление может быть дерганым. Происходит это не всегда, но довольно часто. К сожалению не все разработчики знают как с этим бороться, а те кто знают, зачастую ленятся. Явный пример дерганного появления блока, можно посмотреть прямо на главной странице jQuery, нажав на кнопку Run Code:

Отличная подборка, как нарисовать различные геометрические фигуры одним элементом HTML.

Квадрат

#square {
	width: 100px;
	height: 100px;
	background: red;
}

Последние 5-7 лет мы все наблюдаем явление, которое аналитики называют консьюмеризацией ИТ. Не вдаваясь в историю и подробности этого явления, характерного не только ИТ-отрасли, стоит отметить главное – именно «консьюмеры» сегодня создают львиную долю пресловутой добавленной стоимости – иногда своим большим числом, иногда – способностью и желанием переплачивать за новинки и вообще интересные идеи.
Операционная система Windows, получившая тотальное распространение на волне консьюмеризации середины девяностых годов, планомерно развивалась до середины «нулевых», когда персонализация вычислений получила новый мощный толчок – настоящую мобильность и доступность.

Наткнулся на интересную штуку под названием MaKey MaKey.

http://makeymakey.com/

Вот за что уважаю американцев — так это за талант красиво преподнести и довести до промышленного производства всякую простейшую штуку.



Посмотрел видео, порадовался за ребят. Но где-то сразу зудеть начало. Полез за резюками. Через 15 минут (из которых пять минут ушло на перекур) получился вот такой девайс:

Благодаря CSS3 мы можем создавать эффекты анимации, не используя JavaScript, что упростит работу многих разработчиков.
Мы не должны злоупотреблять CSS3, потому что старые браузеры не поддерживают все его свойства. В любом случае, все мы видим потенциал CSS3, и в этой статье мы обсудим, как создать зацикленный слайдер изображений, используя только CSS3-анимацию.

Здравствуй Хабр!

Adobe Photoshop CS5 (Save For Web) — 53,8 КБ	Image Catalyst (Xtreme) — 46,0 КБ

Image Catalyst — программа для комплексной оптимизации/сжатии изображений формата PNG и JPEG без потери качества в рамках того же формата.

Internet Explorer 8, как много в этом имени для рядового веб-разработчика :-) Браузер, который с одной стороны до сих пор удерживает значительную часть рынка (а значит не может быть просто так проигнорирован), а с другой — обладает тяжелым наследием IE6 в виде массы «особенностей» поведения и отсутствием поддержки целого ряда новых и вкусных технологий которые так хочется использовать. Эта двойственность породила целый ряд т.н. polyfills — JS скриптов которые призваны хоть немного подтянуть IE6-8 до уровня современных браузеров. Об одном из них и пойдет речь в данной статье.

=========

Обновление от 24.03.13
Neatbeans 5.3 бесплатная IDE подходящая для верстки умеет на лету отображать набранный html в хроме через свой плагин.
Тоже самое умеет webstorm.
Куча костылей описанных ниже уже не нужны!

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

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

Со многими вы знакомы, а что есть еще, или вы твердо убеждены, что у вас всего пара рук?

Начнем с самого известного:

1.

Говорят, если бы капитан мочевидность был веб-разработчиком, он бы всем советовал ставить Firebug. Это Джастин Бибер в мире попсы, это почти половина самого firefox.
В представлениях не нуждается, самая дописанная и навороченная панель разработчика FireBug есть только в Firefox.

Когда дело доходит до рендеринга шрифта на Вебе, дизайнер может сделать не слишком многое. То, как шрифт выглядит на экране, по большей части зависит от операционных систем, браузеров, дизайна гарнитур, шрифтовых файлов и от того, дополнены ли эти файлы инструкциями для самых неожиданных сценариев рендеринга. Но иногда свойства CSS могут повлиять на то, как выглядит шрифт.

В этом ролике запечатлена 48-часовая работа Нотча (создателя Minecraft) по созданию игры «Metagun» с нуля. Вместе с развлекухой, каляканьем в фотошопе смешных рож, рисованием реальных спрайтов и написанием кода.



Поиграть в игру можно здесь (для работы нужна Java, есть сообщения что под FF не запускается).