Бывает у вас так, что дизайн разработан отличный, всю эту красоту технично собрали и заанимировали, а вот прелоадер как то остался на последнюю очередь и силы уже иссякли… А если учесть, что это первый элемент который встречает посетителя, то положение приобретает серо-тоскливые оттенки.

Специально для попавших в такую ситуацию, ресурс для вдохновения (подчеркиваю!) prettyloaded.com

Увлекшись написанием плагинов для Wordpress'а составил правила хорошего тона…

Чтобы получить содержимое веб-страницы все с удовольствием используют file_get_contents(), например file_get_contents('http://www.habrahabr.ru/'). Но я уже давно наблюдаю, что, как дело доходит до того, чтобы отправить POST, разработчики используют либо CURL, либо открывают сокеты. Я не считаю, что это плохо или что не надо так делать, просто для решения простых задач можно использовать простые решения.

Я и сам так раньше делал, пока на наткнулся на понятие контекстов потоковых операций в PHP. Контекст позволяет передать дополнительные параметры потоковому обработчику. Для http например, можно сконфигурировать POST-запрос или передать дополнительные заголовки.

file_get_contents() принимает 3 параметром «контекст», который собственно и конфигурирует сам запрос.
Ниже пример такого запроса или RTFM

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

На написание этого текста меня натолкнули постоянные споры, возникающие за время моей практики как веб-дизайнера. Собственно, первый раз мне пришлось столкнуться с «резиновыми сайтами» благодаря прихоти заказчика. Когда дизайн проекта был полностью готов, а сам сайт сверстан и подключен, заказчик спросил: «А почему он не растягивается?». Было это достаточно давно, но этот вопрос я слышу примерно раз в 4-5 месяцев. О «резиновой» верстке сайтов говорили и писали много. Говорили что она обязательна, и наоборот, что использование ее ошибка. Однозначно, были причины возникновения резиновости. И утверждать, что использование этой технологии на 99% ошибочно, однозначно нельзя. Любую технологию нужно применить, если она нужна. Я хочу очертить примерную границу применения резиновой верстки.

В этой статье я хочу по возможности полно и последовательно рассказать о том, что такое объект в JavaScript, каковы его возможности, какие взаимоотношения могут строиться между объектами и какие способы «родного» наследования из этого вытекают, как это все влияет на производительность и что вообще со всем этим делать :)

В статье НЕ будет ни слова про: эмуляцию традиционной класс-объектной парадигмы, синтаксический сахар, обертки и фреймворки.

Сложность материала будет нарастать от начала к концу статьи, так что для профи первые части могут показаться скучными и банальными, но дальше будет намного интереснее :)

Задачей этой статьи является систематизация знаний о том, как правильно растягивать сайт для различных разрешений экрана.

Я занимаюсь разработкой форм ввода персональных данных. Для удобства работы пользователей и увеличения скорости ввода данных (а та же сокражения расходов на перепроверку введенных данных) был разработан метод обработки блока ФИО.



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

Логика функционирования блока «Личные данные»
После ввода фамилии, определяется пол по окончанию фамилии:
Мужской: 'ОВ', 'ЕВ' ,'ИН' ,'ЫН', 'ОЙ', 'ЦКИЙ', 'СКИЙ', 'ЦКОЙ', 'СКОЙ', 'ЦКИЙ'.
Женский: 'ОВА', 'ЕВА', 'ИНА', 'АЯ', 'ЯЯ', 'ЕКАЯ', 'ЦКАЯ'.

ФИО должны вводится в именительном падеже!
1. Если удалось определить пол по фамилии то в следующее поле «Имя» подгружаются исключительно мужские имена-справочник мужских имен(если пол мужской определился), женские имена(аналогично)-женская фамилия. В случае если фамилия оказалсь бесполой (Кравчук), то подгружаются оба справочника мужской и женский.
2. В поле «Имя», в зависимости от подгруженного справочника по первым буквам происходит подстановка полного имени, при нажатии на «Enter» происходит переход к следующему полю «отчество». Имеются также справочники отчеств, значения в поле подставляются аналогично предыдушему пункту. В случае когда введено не справочное имя(либо имя которое не содержится в справочнике), т.е. не возможно определить пол, происходит проверка опять же фамилии, и по ней происходит подгрузка значений в поле «отчество», и в случае когда не по имени не по фамилии невозможно определить пол, происходит подгрузка обоих справочников. Если имя является не справочным, то оно подсвечивается красным цветом, и отмечается в базе метка о несправочном значени, свидетельствующая о том что запись нужно повторно проверить на корректность.
3. Отчество. После ввода проверяется также на справочное значение и помечается так же как имя.
4. Форма проставляет пол автоматически при вводе информации, если есть уверенность в этом. Т.е.:
4.1. Фамилия мужская или женская, при этом имя и отчество из справочника мужские или женские – форма проставляет пол. Вам требуется обратить внимание, что пол проставлен верно.
4.2. Фамилия бесполая, имя и отчество справочные, если имя и отчество соответствуют одному полу, форма проставляет пол.
4.3. Фамилия + имя если отчество пустое или по нему невозможно определить пол.
4.4. Фамилия + отчество, если имя пустое или по нему невозможно определить пол.
5. Форма НЕ проставляет пол автоматически при наличии одной только фамилии (имя и отчество – инициалы):
5.1. Иванова И.И. – форма НЕ проставит пол, т.к. тут может быть ошибка – родительный падеж, в этом случае форма оставляет пол пустым, и Вы должны проставить его вручную с анкеты.

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

6.Форма спрашивает о соответствии ФИО и пола один раз, при выходе из блока, при повторном обращении к блоку сообщения выводиться не будут для данной анкеты. При этом анализируются сочетания:
6.1. Окончание фамилии и пол (Иванова – мужской, форма спросит «уверены ли?»).
6.2. Неверные совпадения Фамилия + Имя / Фамилия + Имя + Отчество (Иванова Алексей, или Иванов Алексей Ивановна и т.д. – форма спросит).
6.3. Неверные совпадения ФИО – пол (при наличии полного ФИО), аналогично п. (6.1) – Иванова Алексей женский – форма спросит.
7. В случае, если пол не проставлен – форма при выходе из блока спросит, можете ли вы проставить пол?

Хотел разместить в разделе «Эти пользовательские интерфейсы», но у меня недостаточно кармы.

Мучения со стандартным подходом применения CSS спрайтов, а именно трудности модернизации и в некоторых случаях сложности оптимальной компоновки заставили искать альтернативный вариант оптимизации загрузки изображений. Очередной раз почитывая хабра-статьи, наткнулся на интересный подход реализации спрайтов с применением data:URI. В ходе дискуссий и умозаключений были определены слабые и сильные стороны данного подхода. Одним из значительных недостатков нового подхода является сложность сборки конечного CSS. Однако, при использовании data:URI имеет место возможность автоматизации процесса.

Настройка резервного копирования в Ubuntu за 20 минут.

Для работы над проектами использую svn, который находится на удаленном виртуальном выделенном хосте, под управлением ubuntu 8.04. Со временем объемы данных выросли, как и критичность этих данных. Потеря чего-то снилась в кошмарах. Время от времени копировал репозитории на локальный компьютер. Недавно мне это надоело. И я стал искать возможности автоматизировать это дело. Не буду говорить о поисках и вариантах, расскажу о результатах.

Итак, мы имеем удаленный хост под управлением ubuntu, с некоторым массивом довольно критичных данных. Довольно логичным было бы настроить бэкап прямо на удаленном хосте, с помощью tar по крону, rsyns и т.д. Но, т.к. место на виртуальном выделенном хостинге довольно дорого и использовать его лучше по делу, идеально было бы, чтобы данные автоматически копировались на какую нибудь локальную машину, место на которой хоть отбавляй. В моем случае это файловый сервис в офисе, под управлением все той же Ubuntu.

Решили мы как то с приятелем, запустить стартап не стартап, а так, сайт для души. Решили — значит будет запущен. Бюджет… А давай не купим ещё по 2 кружки пива, на это и запустим. В общем денег на домен да на виртуальный хостинг на валуехосте. Так люди мы «взрослые», и делать всё привыкли основательно, нам нужна система управления версиями и выкладыванием. Было решено поднять subversion репозиторий с возможностью раздачи доступа к нему нескольким разработчикам с разными логинами на valuehost. Но у нас виртуальный хостинг со всеми его ограничениями, что делать?

Заметка Выносим CSS в пост-загрузку была посвящена исследованию наиболее быстрого способа добавить стилевые правила в исходный документ динамически, не затрагивая при этом стадию предзагрузки (когда у нас еще белый экран в браузере). В ней, однако, не был рассмотрен следующий вопрос: какой метод использовать для добавления массива CSS-правил в сам HTML.

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

Тестовое окружение

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

Все варианты представлены на тестовой странице, вкратце опишу основные подходы.

Читать дальше yа webo.in →.

В этом посте я постарался собрать все известные мне хаки для css. Многие могут усомниться в их надобности для нормальных современных браузеров, потому как большинство хаков всегда применялись только для IE, но этот пост скорее для любознательных :), в верстке хаки вообще лучше не использовать. Но так или иначе, раз они есть, грех о них не знать.

В отличие от многих хаков для той же Opera, которые также будут обработаны и Safari, я немного изменил код и Opera 9.2, Opera 9.5 и Safari 3 увидят каждый свой css.

Почти все сайты использующие тег SUP никак не инструктируют браузер как его отображать. А ведь отображение по-умолчанию откровенно хромает — тег этот рвёт тексты, высота строки где присутствует SUP увеличивается и в результате нам предстают хаотично разбросанные строки, а не параграф. Сложно даже быстро понять, является ли такое экстра-пространство разбивкой между строками, или между параграфами.


Два варианта superscript'а: «мой» и стандартный.

Самое интересное, что такое поведение можно легко исправить, достаточно добавить глобальный стиль навроде этого:

Вы наверняка не раз видели javascript-реализации контекстных меню на базе популярных библиотек, таких как jQuery и prototype. А значит обязательно сталкивались с основными их недостатками: неудобностью API, большим количеством кода, требовательностью к ресурсам, любовью к генерации огромного количества html кода. В один прекрасный момент эти проблемы пересилили мою лень и я решил бороться с ними, поставив следующие задачи:

• Минимум html кода, генерируемого для меню (зачем нам засорять ДОМ)
• Лаконичность js кода для создания меню (API вызова без копипасты)
• Оптимум гибкости при работе (многоуровневые, динамически модифицируемые меню)
• Как можно меньше кода в реализации библиотеки (6302 байта в несжатом виде)
• Минимальное количество jQuery-вызовов (чтобы можно было легко от них отказаться тем, кто jQuery не использует)
• Inline-события где это возможно вместо биндов (меньше ресурсов сожрет)

UPD: разместил проект в google code, пользуйтесь, развивайте:
svn checkout js-cmenu.googlecode.com/svn/trunk js-cmenu-read-only

Одним из наиболее запутанных аспектов CSS является применение font-size атрибута для масштабирования текста. Используя CSS, вы можете изменить размер текста в браузере с помощью четырех разных единиц измерения. Какая из этих четырех единиц лучше всего подходит для веб? Это вопрос, который породил разнообразные дискуссии и критику. Поиск окончательного ответа затруднен, поскольку вопрос сам по себе сложный.

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

В этой статье хотелось бы привести примеры того, как НЕ надо писать запросы.

Недавно, в Dojo появилась возможность производить cross site POST запросы, т.е. отправка POST запросов на другие сайты, с другими доменными именами. Это событие осталось незамеченным в нашем сообществе JavaScript разработчиков. По крайней мере, никто и слова про это не сказал. А зря…

В один прекрасный момент

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

JavaScript — очень динамический язык, в нём заложена возможность менять язык под себя и создавать удобные инструменты для дальнейшей работы. «Реализация классического наследования» — как раз один из таких инструментов. В данный момент я не представляю себе, как я программировал бы на JS без «классов».

Для меня «Классы» — это, скорее, подход к проектированию и реализации поставленной задачи. В нашем новом проекте такой подход используется по полной программе (и, я думаю, что он оправдывает себя на все 100%).

Не так давно закончился мой переход на Linux. Я установил себе дистрибутив Ubuntu. Процесс был непростой и отнял много сил и времени несмотря на то, что ответы на каждый вопрос я находил в интернете очень быстро.

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