Хочу Вам рассказать о штуке, которую я изобрел сегодня, чтобы ускорить процесс загрузки сайтов. Все вы знаете, что <script src="..."></script> задерживает отрисовку страницы, пока не загрузится этот скрипт. Если их десятки — это может сереьезно замедлить работу сайта — в результате пользователь 20 секунд пялится на пустую (или недорисованную) страницу из-за какого-нибудь тупящего социального виджета (умножить на десяток этих виджетов).

Не правда ли было бы круто, если бы можно было сказать <script extsrc="..."></script> ("extsrc" = "грузи потом"), чтобы скрипты загружались после того как страница отрисована?

Все бы хорошо, но есть document.write… Сегодня я наконец решил его проблему — представляю extsrc.js — скрипт, который запустит все скрипты после отрисовки страницы (даже если они содержат document.write — и правильно отрисуется все).

Результат? Супер-быстрая загрузка страниц, даже если там море всяких внешних скриптов.

Использование:

Заменяем <script src="..."> на <script extsrc="...">.

Итого получается:

<script src="http://whiteposts.com/extsrc_js/extsrc.js"></script>
<script extsrc="..."></script>

Если посмотреть на скрипт, сжатый Closure Compiler'ом, YUI Compressor'ом или еще чем-нибудь, можно увидеть бесконечные вереницы повторяющихся ключей: .prototype, .length, offsetParent и так далее. Попробуем избавиться от них на примере плагина jQuery UI Sortable. Скажу сразу, что gzip нам не переплюнуть, но когда его нет под рукой или нельзя им воспользоваться (например, на конкурсе 10K Apart), эта техника сжатия может оказаться весьма полезной.

На написание данной заметки натолкнула одна интересная статья “Anchoring effect”. Однако это совсем не перевод, так как в тексте встречается много лишней информации и исследований в духе «Британские ученые доказали…» Это скорее творческая интерпретация.

В статье описывается один очень важный психологический эффект – эффект якоря или эффект привязки.

В чём секрет?

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

Чтобы что-то оценить, нам необходима отправная точка, некий якорь – что-то вроде «розовой обезьяны».

Например, если спросить – сколько человек составляет население Венесуэлы, что вы скажете? Растеряетесь и задумаетесь. А если задать вопрос: «Население Венесуэлы больше или меньше 65 млн?». Вопрос приобретает иной окрас, и ваш мозг подсознательно начинает опираться на упомянутую цифру, даже если она взята «с потолка». Какой ответ вы дали в первом и втором случае? Во втором случае названное число будет намного больше, чем в ответ на первый вариант вопроса.
А между тем – в Венесуэле живет всего 28 млн человек.

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

Как то стало интересно что значат разные буковки/цифарки через точку в названиях видеофайлов.

Пост — результаты гугления, обобщения, структуризации и некоторой правки орфографии.
Возможно, кому то пригодится. Я, например, перестал связываться с TC.

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

Плюсы

• Есть прижимающийся к полу футер
• Колонки меню растягиваются по 100% высоте
• Колонок может быть сколько душе угодно
• Колонки могут быть как лево- так и правосторонними, а также совмещенными, например 2 справа и 1 слева
• Ширина как резиновая, так и фиксированная
• Критический минимум хаков
• Не используется Javascript
• Не используются бекграундовые изображения для создания эффекта колонки
• Никаких таблиц
• Одинаковый результат в ie5.5, ie6, ie7, ie8, ff3.5, o10, chrome4 (Если у вас не работает в каком-то браузере — отпишитесь, пожалуйста, в комментах. Исправим и приведем к универсальному виду)

Минусы

• Есть несколько «лишних» блоков. (Я бы и сам рад от них избавиться)
• Есть несколько абсолютно-позиционируемых блоков

(2009 год, второе письмо старшего менеджера веб-студии — младшему)
Итак, первоначальные переговоры c клиентом проведены. Смотрим первую часть методички здесь http://habrahabr.ru/blogs/studiobusiness/45543/.
Теперь надо сориентировать клиента по цене. Если он с ней принципиально согласен — переходим к обсуждению Технического задания (ТЗ).
Делаем смету

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

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

META-теги

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

META-теги имеют два возможных атрибута

— <META HTTP-EQUIV="имя" CONTENT="содержимое">
— <META NAME="имя" CONTENT="содержимое">
META-теги должны находиться в заголовке HTML-документа между <HEAD> и </HEAD> (особенно это важно для документов, использующих фреймы).

Стандартом HTML 4.01 значения и имена мета-тегов НЕ оговариваются, поэтому мы будем рассматривать те значения, которые уже устоялись в интернете и используются чаще других.

Есть программа, которая должна сохранять и загружать некоторые настройки: позицию и размер главного окна программы, идентификатор выбранного языка, время последней проверки обновления. Я задался вопросом — где программа должна хранить свои настройки? Решил собрать информацию на эту тему и поделится ею с вами.

Возможные папки, для хранения настроек и файлов программы:

• Program Files
• My Documents
• User\Application Data
• User\Local Settings\Application Data
• All Users\Application data

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

Небольшой список, самых, на мой взгляд, полезных сайтов для любого WEB-разработчика, интересующегося сферой веб дизайна, верстки и программирования. Думаю каждый среди этого списка найдет для себя сайты, которые надолго войдут в его ленту RSS.

A — A List Apart

A List Apart содержит лучшие советы и мнения от лидирующих умов индустрии.

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

Поэтому я попробую исправить этот недочёт.

Под катом Вы не найдёте каких-то инновационных моделей управления временем. Это будет фундамент, основа, без которой нельзя обойтись людям, которые заботятся о своём будущем, о своём благосостоянии и личностном развитии.

Welcome!

Многие видели девелоперский тулбар для фреймворка Kohana (слизанный, в свою очередь, с Symfony), который недавно выкладывали на хабре. Мне он очень понравился — захотелось поиметь такой и для себя.

Немножко поколдовав, получилось нечто похожее…

Внимание!
Перед изменением файла .htaccess не забудьте сделать его резервную копию.

1 — Перенаправляем WordPress RSS поток на feedburner с использованием .htaccess
Почему некоторые вебмастера не используют feedburner? Ведь это такой замечательный инструмент для контроля за подписками на RSS. Проблема в том, что приходится руками исправлять файлы шаблонов. Этот прием поможет сохранить Ваше время.
И не забудьте исправить в строке 6 на Ваш код

<IfModule mod_rewrite.c>
 RewriteEngine on
 RewriteCond %{HTTP_USER_AGENT} !FeedBurner    [NC]
 RewriteCond %{HTTP_USER_AGENT} !FeedValidator [NC]
 RewriteRule ^feed/?([_0-9a-z-]+)?/?$ httр://feeds2.feedburner.com/wordpress[R=302,NC,L]
</IfModule>

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

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

Любители квантовой физики и сайта TED.com наверняка слушали доклад Брайна Грина про теорию суперструн, в котором упоминалось, что данная теория будет работать только при наличии целых 11 измерений!

Эх… А ведь нам даже четвертое-то измерение представить довольно трудно, а вы про какие-то десять говорите… Но, несмотря на это, мы попытались перевести и переозвучить видеоролик, который интересно и доходчиво объясняет, как же можно представить себе аж десятое измерение!

Вторая версия статьи, расширенная и дополненая.

Большая часть готовилась для моего выступления на «РИТ: Клиентские технологии», куда я, к сожалению, не доехал.

 



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

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

Начинаю вести серию статей Это статья про вёрстку html css js, начинаю с самого простого, потом планирую описать более сложные вещи и всякие тонкости и этим видимо так и закончил

Один из стандартных вопросов, который задает (или по идее должна задавать) веб-студия на первой встрече с клиентом – зачем вам нужен сайт? Зачастую клиент с готовностью отвечает «нам нужен сайт как инструмент». Но, как показывает опыт, иногда это примерно то же самое, что прийти в магазин и купить дрель, чтобы была. Чтобы в доме был инструмент.

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

С учетом того, что создание сайта – удовольствие чаще всего не дешевое, что же нужно сделать, чтобы инструмент не лежал на полке, а использовался по своему прямому назначению? Декларируя, что мы заказываем сайт-инструмент, надо понимать, какие именно «дырки» мы хотим получить в результате.

Давайте рассмотрим постановку задачи на примере.