Недавно столкнулся с задачей прикручивания достаточно необычного шрифта для мобильного веб клиента. Так как работа была под айфон, то я решил, что в этой задаче мне поможет css 3 и такая штука как @font-face. Пользу от такого способа решения задачи, я думаю, видят все, потому что:

• сохраняется поиск по тексту, потому что это текст, а не картинка;
• появляется возможность использовать онлайн-переводчики и разные фишки связанные с текстом;
• никто не отменяет для нас использование line-height, letter-spacing, text-shadow,text-align, и селекторов вида ::first-letter и ::first-line

Учимся парадигме Model-View-Presenter и выкидываем в AppStore кучу вкусностей для iPhone и iPad сразу

Как наиболее оптимальным образом портировать приложение, написанное под iPhone для iPad, можите решить только вы сами. Могу лишь предложить несколько рецептов, которые будут удобны в использовании на данном конкретном примере Web-приложений.

Далее будет предложена парадигма организации кода, рассмотрены компоненты, доступные в SDK 3.2. А паттерны проектирования вы изучите сами :-)

Начинается все с дизайна. Как правило, несколько экранов iPhone пытаются уложить на одном экране iPad.

Всеми любимый набор иконок — Fugue, обновился (16 июля) до версии 3.0. Изменения небольшие, были добавлены 32 гипер-маленькие иконки.

Мега-превью! (3Mb)
Иконки
Иконки + исходники

Разработчики W3C сделали box-shadow очень гибким свойством. Благодаря этому можно получать весьма интересные результаты, если использовать это свойство нетривиальным образом. В этой статье я напишу о некоторых эффектах, которые мне удалось получить при помощи «теневых технологий».

Пока я составлял примеры, я неожиданно обнаружил, что браузеры отображают их совсем неодинаково. В итоге, помимо простой демонстрации возможностей box-shadow, получился еще и маленький браузерный тест на поддержку CSS 3. Все примеры снабжены CSS-кодом и картинкой (общий объем всех PNG: 161 КБ). В статье я не стал прописывать свойства с вендорными префиксами -moz- и -webkit-, чтобы не ухудшать читабельность. В суммарной странице со всеми примерами эти префиксы есть (предупреждаю, что у Оперы есть баг с прорисовкой внешних box-shadow при прокрутке).

Когда-то, давным-давно, тут пиарился один удивительный и абсолютно чистый от рекламы сервис по сиськам OpenBoobs.
Он мне понравился еще тогда, но вот недавно я решил сделать для него маленький виджет. Итак, встречайте OpenBoobs Reader!

Он вам поможет:

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

Программирование на платформе iOS (той, что еще недавно называлась iPhone OS) – странное сочетание радости от плодотворной работы и муки плавания против течения. У каждого разработчика свое мнение относительно того, какая из этих компонент преобладает. Лично мне это занятие нравится, поэтому мне показалось уместным поделиться впечатлениями от процесса работы над очередным проектом.

В конце марта мне предложили написать мобильную версию Bookmate для iPhone. Дизайн большей части приложения был уже готов в виде толстенного PSD, на стороне сервера работа кипела, мне же оставалось, как говорится, «всего лишь» написать клиентскую часть на Objective-C.

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

Наверняка вы видели на многих сайтах свешивающиеся в начале строк кавычки и скобки. И хотя на бумаге такое полное свешивание в простых текстах (не заголовках) как минимум спорно, на вебе это выглядит отлично. Такое поведение текста называется «висячая пунктация», и на текущий момент есть ровно один способ её реализации в (X)HTML/CSS — добавление парных стилей. Этот способ, скажем, применён на сайте Артемия Лебедева.

Главный минус классической «лебедевской» реализации висячей пунктуации на вебе — её статичность. Поясню, как у них это сделано.

В CSS прописаны парные стили: .h[symbol] и .s[symbol], например, .slaquo и .hlaquo. Для каждого из них прописан отвес через margin. При использовании свешивающихся символов в тексте к пробелу перед символом добавляется стиль s[symbol], а к самому символу — h[symbol]. Соответственно, когда и пробел, и символ, находятся в одной строке, отвесы взаимно компенсируются, и текст выглядит как обычно. А когда свешивающийся символ по каким-то причинам сносится на следующую строку — первый стиль (балансирующий второй блок) остаётся на предыдущей строке, поэтому нужный символ свешивается влево на заданный отвес.

Реализация по сути хорошая, с одним «но» — шрифты. Для каждого шрифта отвес, скажем, открывающей кавычки-ёлочки или открывающей скобки разный. Да, конечно, мы можем его вычислить вручную и прибить в таблице стилей гвоздями (так и сделано у Лебедева на сайте), но для этого придётся быть уверенным, что как минимум у 90% посетителей сайта будет именно этот шрифт. В случае, если браузер покажет это каким-то иным шрифтом, начнутся проблемы с разъезжающимися строками.

Что было сделано?

Любовь к HTML5 продолжает вдохновлять Поля Айриша. Во-первых, он подарил нам Modernizr, а сейчас он объединился с Divya Manian для создания шаблона HTML5, который использует передовые техники, чтобы Вы могли начать использовать его в своей практике.

Он, в сущности, является хорошей отправной точкой, состоящей из HTML и CSS, предлагающим также и структуру папок, которая работает. Но созданным с учётом многих лет передового опыта профессионалов в разработке клиентской части. Загляните в исходные тексты, чтобы почувствовать, что находится внутри. А если вы думаете, что этого слишком много, просто удалите лишнее.

У многих из нас есть блоги, интернет-магазины, новостные сайты etc… Понятное дело стараемся опубликовывать оригинальный контент, но что же происходит после появления контента в интернетах, его конечно же просматривают и если он интересный, пользователи иногда обмениваются ссылкой на страничку с контентом. Новые переходы на нужную страницу и нам очень хорошо, а что если наш отличный текст просто взяли скопировали и скинули в аську\скайпик\почту — наш текст ушел, а перехода нету :(.



Запретить копирование, это очень неправильно, весело и смешно ©, но мы ведь можем при копировании добавить в буфер обмена ссылку на наш сайтик. Рассмотрим как же нам это лучше сделать:

В вашей системе время играет важную роль? Ваши пользователи/компоненты распределены по территории всего земного шара, или хотя бы нашей необъятной родины? Значит, вам нужны часовые пояса. Что ж, это просто. Самое сложное, что вам придется сделать — не запутаться. Об этом мы с вами и поговорим. Для начала вам нужно научиться правильно думать. Думая правильно, все остальное будет для вас либо самоочевидным, либо достаточно простым.

Начнем с часов. Все мы привыкли определять время, глядя на часы на стене. При работе с часовыми поясами такое время называется Wall clock time. В принципе, ничего плохого в нем нет, только в разных местах земного шара в один и тот же момент времени часы показывают разное время. Если задаться целью, можно придумать алгоритм перевода wall clock time одного часового пояса в wall clock time другого. Обычно надо прибавить/отнять разницу в часах между часовыми поясами, кроме (внимание) моментов перехода на летнее/зимнее время. Вот когда начинается переход, вычисления становятся по-настоящему сложными.

Нам же нужно что-то простое и пуленепробиваемое, как… целое число.

 — Здравствуй *с широко развевающейся по лицу улыбкой* дружок.
 — Ваа! *с ярким блеском в широко распахнутых глазах* Тётя Ася приехала!
 — Да, и у меня есть для тебя новая сказка *присела и взяла малыша за руки* хочешь послушать?
 — Конечно! *слегка смутился и отвёл взгляд* Мне тут дядя такие страшные истории рассказывал…
 — Ну, надеюсь моя история тебя не испугает *потрепала его по волосам* Она должна научить тебя мыслить шаблонно.
 — Эээ? *лицо перекосилось от недопонимания* Это как?
 — М… сейчас узнаешь *подмигнула и взяла на ручки* Вот когда тебе нужно вставить переменные в строку — ты как поступишь?
 — Ну… *взял карандаш и чирканул на лежащей рядом бумажке* примерно так:

var query= 'xxx'
var resultCount= 512
var message= 'По запросу <kbd>' + query + '</kbd> найдено страниц: ' + resultCount

 — Ты ничего не забыл? *победоносно подняла голову*
 — Да вроде нет… *уткнулся носом в код, ещё раз внимательно его проверяя*
 — Что, если пользователь введёт… *выдержала многозначительную паузу и добавила*

Каждый, кому приходилось писать объемные куски осмысленного кода на javascript, рано или поздно понимал, что ему многого не хватает в этом языке или просто неудобны некоторые врожденные конструкции. Для сглаживания шероховатостей применяются jQuery, Prototype, MooTools etc. Кто-то уже мало представляет себе, как можно кодить без них. Сегодня я расскажу о еще одной маааленькой библиотечке, которая делает мир javascript-программиста еще прекраснее. Речь пойдет о Underscore.js

У форм в Django есть несколько предопределенных методов as_p(), as_table() и as_ul(), которые отображают форму как набор параграфов, таблицу или список. На практике этих методов не всегда достаточно, чтобы формы выглядели так, как нам хочется.

Допустим, верстальщик сверстал все формы div-ами. Документация предлагает в этом случае писать нужные теги в ручную в шаблоне. Если форма у нас только одна, можно поступить и так. Если форм несколько, то этот подход сразу же теряет все свое очарование. Решение очень простое — пронаследуем наш собственный класс форм от forms.Form или forms.ModelForm и обучим его рисовать формы так, как нужно нам.

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

Большая часть программ для iPhone и iPod touch поддерживают только портретную ориентацию. Многие разработчики даже не задумывались о том, чтобы добавить ландшафтную (альбомную) ориентацию там, где она действительно нужна. Не исключение и компания Apple, которая в iPhone OS 2.x подавала не самые лучшие примеры, не реализовывая поддержку ландшафтной (альбомной) ориентации в важных системных программах (в iPhone OS 3.x компания исправила свою ошибку).

С приходом iPad ситуация изменилась. Компания Apple обязала всех разработчиков поддерживать все ориентации устройства в программах для iPad. Естественно, могут быть исключения, например, игры. Но программы, которые не имеют жёсткой привязки (функциональной) к ориентации, должны быть дружелюбны к пользователю в любом положении устройства.

С простыми интерфейсами сложностей никаких нет. Объектам класса UIView задаётся необходимое свойство autoresizingMask, которое описывает изменение фрейма. К сложным интерфейсами такой метод уже не подходит.

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

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

Итого, нам нужно грузить в дополнение к данным страницы: скин с константами и стили с формулами. Только две клиентские технологии позволяют сделать это: JS и XSLT. Однако первую очень любят отключать, а вторую отключать просто нет смысла. Поэтому вынесем CSS в XSLT контейнер, а заодно и не забудем про технологию XHTML-инклудов.

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

— Здравствуй…
— А-а-а! Памагите! Убивают! \(0_0)/
— Дружок, спокойно, я свой :-\
— Свои незаметно сзади не подкрадываются! \(@_@)/
— А я динамически добавился В-]
— Э-э-э \(~_~)/
— Ясно, не знаешь, как реагировать на такие ситуации? XD
— Ну… как бы… есть мысли… \(=_=)/
— Покажи-ка свой исходник %-)
— Я… эта… стесняюсь… \(._.)/
— Давай, не боись, я же свой ;-)
— Лаааадно \(-_-)/

<body><br>    <script><br>        $(function(){<br>            $('.c-example').wrapInner( '<span class="wrapper" />' )<br>        })<br>    </script><br>    <div class="c-example">epic</div><br></body>

В iPhone SDK 3.2 было добавлено несколько новых элементов интерфейса, таких как UIPopoverController и UISplitViewController.
В этом посте я покажу как пользоваться UIPopoverController.

CSRF, или Cross-Site Request Forgery (межсайтовая подделка запроса) — это, возможно, одна из самых забываемых уязвимостей. Разработчики, как правило, знают о SQL инъекциях и XSS атаках, но очень часто забывают о CSRF-атаках.