На одном из проектов было необходимо сделать кропалку для загружаемых юзерами аватаров. Стандартные решения, такие как Jcrop, после выделения области отправляют на сервер координаты, и сам кроп изображения необходимо осуществлять уже на сервере. Тем временем, современные браузеры уже дошли до того состояния, когда подобные действия можно осуществлять сразу на клиенте. Это и подтолкнуло меня к написанию своей кропалки с использованием canvas, которая производила бы все действия на клиенте и отправляла готовое изображение в виде base64-строки на сервер. Помимо ускорения работы и разгрузки сервера, это так же позволит нам сразу сменить аватар пользователя на странице, без подгрузки его с сервера.

Предыстория

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

Первое на что упал мой взгляд- это виртуальная школа iTunesU. Здесь я нашел лекции курса CS 193P которые ведут разработчики эпл для студентов Стэнфордского университета. Лекции достаточно хорошо охватывают базовые особенности языка и нативных фрэймворков, однако есть одно НО– лекции на английском и никакого перевода к ним нету. Для меня лично проблем это не вызвало, потому что Aple по всей видимости выбирает на эти лекции только кандидатов с хорошо поставленной речью, и прожитые в США 8 месяцев дали мне возможность смотреть лекции в оригинале и учится у «носителей языка» (шучу-шуткую).

Так как каждый год выходит новая версия Xcode, а лекции стэнфорда в которых рассматривается именно текущая версия становятся доступны с опозданием в семестр, я решил написать серию статей, которые будут идти по практической части (!) данного курса. Так как я слушал лекции осени 2010 для меня будет практическт полезным написать программу в xcode 4.2 который был изначально разработан под 3ю версию. Здесь я не буду углублятся в особенности ObjC а буду давать голую практику.

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


Фрагмент результата валидации example.com

«Под Windows можно писать для iPhone?»
Анонимный разработчик

«Мы не планируем публиковаться в AppStore, это ведь возможно? И еще мы хотим версию под Android...»
Анонимный заказчик

Если вы решились разрабатывать приложения для iPhone/iPad, то, скорее всего, вас заинтересуют следующие вопросы:

• как можно заработать на приложениях?
• как зарегистрироваться в iOS Developer Program и что дает регистрация?
• обязательно ли нужен Mac?
• какие инструменты можно использовать для разработки?

Решив попытаться программировать для iOS я пересмотрел кучу ресурсов в поисках документации, описаний, уроков, но чаще всего попадались либо уроки на тему «Создание первого приложения Hello World», либо какие-то узкоспециализорованные статьи для решения конкретных задач. Поэтому начав кое как разбираться в этой системе я решил написать статью для новичков о создании чуть более сложного, чем Hello world приложения. Это приложение состоит из двух видовых панелей и одного Toolbar с кнопкой, по нажатии которой эти самые панели будут меняться местами. Для создания использован Xcode 4.1

Привет, Хабражитель!

Многие люди мечтают научиться писать программы, игры, но не получается по многим причинам. Я, изначально, не хотел ничего писать потому что не было интересной платформы, и я был еще слишком маленьким. Потом все изменилось. Наступила новая эра в телефонной индустрии – появился iPhone. Я сразу, как о нем услышал, загорелся желанием его приобрести. Платформа сразу понравилась, кнопок и стилуса нет – самое то для игр.
Программы я начал писать в ноябре 2009, если их можно назвать программами :). Многие спрашивают как я учился – на видео-уроках с YouTube, а как еще? Читать непонятные уроки по iPhone SDK? В тот момент я загорелся идеей учить таких же как я – начал записывать видео на YouTube новым для меня темам.
Если интересно: http://bit.ly/pdyoutube. Потом все пошло и поехало, сам стал лучше программировать и запоминалось все намного лучше. Не буду писать очень длинное вступление – перейдем к самому интересному.

Всегда хотел делать игры, но на пустом Xcode не очень удобно и понятно. Стал выбирать платформу (фреймворк) для разработки игр под iPhone, iPad. Мой выбор остановился на Cocos2D. Многие спросят почему – он очень простой в использовании, очень! Он еще и бесплатный и часто обновляемый!

«Хочу программировать под iPhone — говори, что почитать...»
Любимая девушка

Когда решаешься заняться разработкой под iOS, то трудно выбрать литературу и ресурсы, которые действительно были бы полезны. Хорошо еще, что Apple предоставляет множество учебных материалов и программ с открытым исходным кодом в своем центре для разработчиков. В остальных книжках можно если и не утонуть, то порядочно захлебнуться. Сейчас я жалею, что потратил время на пару «мануалов». Не буду делать им антирекламу, а лучше порекомендую хорошие материалы по программированию под iOS.

Под катом книги, видеокурсы и блоги, которые будет полезно прочитать/посмотреть.

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

Именованные шаблоны

Многие «проблемы» XSLT связаны с тем, что мы слишком часто пытаемся писать на нём в процедурном стиле. Мы постоянно пытаемся сделать из него Smarty, но упираемся в один простой факт — XSLT является декларативным языком, как бы необычно это для нас не выглядело.
Например, мы пытаемся использовать именованные шаблоны, воспринимая их как процедуры, выводящие данные в определённом формате:

<xsl:template name="CreateItemLink">
    <xsl:param name="item"/>
    <a href="/item/?id={$item/id}">
        <xsl:value-of select="$item/name"/>
    </a><br/>
</xsl:template>

* This source code was highlighted with Source Code Highlighter.

Наверное, многие программисты именно так написали свой первый шаблон. И он неплохо решает свою задачу. Декларативный XSLT предлагает немного другой подход:

<xsl:template match="item">
    <a href="/item/?id={id}">
        <xsl:value-of select="name"/>
    </a><br/>
</xsl:template>

* This source code was highlighted with Source Code Highlighter.

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

Браузеры и стандарты. Вечная погоня. Из-за несоответствий стандартам, из-за разных способов рендеринга страниц большая часть времени веб-дизайнера уходит на то, чтобы загладить эти несоответствия (использовать хаки). В итоге, вместо эффективной работы, дизайнер вступает в противоестественные отношения с браузерами, теряя драгоценное время.

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

Когда в изучении языка доходишь до нетривиальных вещей, бывает полезно сместить уровень абстракции, чтобы понять, как на самом деле всё устроено. Ведь, по большому счету, любые конструкции языков сколь угодно высокого уровня сводятся к старому доброму машинному коду. Писать в объектно-ориентированном или функциональном стиле можно и на чистом C, и даже на ассемблере. Грубо говоря, любой высокоуровневый язык — это зафиксированный на уровне компилятора или интерпретатора набор синтаксических карамелек и шоколадок. Повышение уровня абстракции позволяет писать более сложные программы с меньшими усилиями, но вот понять в начале пути, что конкретно имеется в виду под наследованием или замыканием, как это всё работает и почему, гораздо легче, разобравшись, каким образом всё это реализовано.

JavaScript, как никакой другой язык, нуждается в именно таком объяснении. Функциональная природа, скрытая за Си-подобным синтаксисом, и непривычная прототипная модель наследования поначалу сильно сбивают с толку. Давайте мысленно понизим уровень JavaScript до простого процедурного, наподобие Си. Отталкиваясь от этого «недоязыка», переизобретем функциональное и объектно-ориентированное программирование.

Плагин Chosen создан для оформления красивых и удобных выпадающих списков с помощью jQuery и Prototype. Для установки плагина достаточно просто скачать файлы и прописать одну строчку:

$(".chzn-select").chosen()

(версия для jQuery)

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

Поскольку Chosen заменяет стандартный элемент HTML, то не нужно беспокоиться, как он работает с браузерами без поддержки JavaScript. Также не нужно ничего менять в бэкенде: формы сабмиттятся как обычно, изменения только в пользовательском интерфейсе.

Некоторые форки:
Chosen для MooTools
Модуль Chosen для Drupal 7

Объекты, классы, конструкторы

ECMAScript, будучи высоко-абстрактным объектно-ориентированным языком программирования, оперирует объектами. Существуют также и примитивы, но и они, когда требуется, также преобразуются в объекты. Объект — это коллекция свойств, имеющая также связанный с ней объект-прототип. Прототипом является либо также объект, или же значение null.

В JavaScript нет привычных классов, но есть функции-конструкторы, порождающие объекты по определенным алгоритмам (см. Оператор new).

Прототипное делегирующее наследование

Классическое наследование очень похоже на то, как люди наследуют гены своих предков. Есть какие-то базовые особенности: люди могут ходить, говорить… И есть характерные черты для для каждого человека. Люди не в состоянии изменить себя — свой класс (но могут поменять собственные свойства) и бабушки, дедушки, мамы и папы не могут динамически повлиять на гены детей и внуков. Все очень по земному.

Теперь представим другую планету, на которой не такое как на Земле генное наследование. Там обитают мутанты с «телепатическим наследованием», которые способны изменять гены своих потомков.
Разберем пример. Отец наследует гены от Дедушки, а Сын наследует гены от Отца, который наследует от Дедушки. Каждый мутант может свободно мутировать, и может менять гены своих потомков. Например у Дедушки был зеленый цвет кожи, Отец цвет унаследовал, Сын тоже унаследовал цвет. И вдруг Дед решил: «надоело мне ходить зеленым — хочу стать сними», смутировал (изменил прототип своего класса) и «телепатически» распространил эту мутацию Отцу и Сыну, вобщем посинели все. Тут Отец подумал: «Дед на старости лет совсем двинулся» и поменял свой цвет в генах обратно на зеленый(изменил прототип своего класса), и распространил «телепатически» свой цвет сыну. Отец и Сын зеленые, Дед синий. Теперь как бы дед ни старался Отец и сын цвет не поменяют, т.к сейчас Отец в своем прототипе прописал цвет, а Сын в первую очередь унаследует от Прототипа Отца. Теперь Сын решает: «Поменяю ка я свой цвет на черный, а моё потомство пусть наследует цвет от Отца» и прописал собственное свойство, которое не влияет на потомство. И так далее.

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

Многие наверняка сталкивались с тем, что любимый браузер не умеет делать что-то очень простое, но насущно необходимое. Я хочу рассказать, как на коленке за час можно обучить FF4 хорошему. Написание расширений — процесс очень простой и даже временами приятный, но, к сожалению, документация не всегда легко находится, how-to разбросаны по разным углам сайта MDN, внятных рекомендаций мне найти тоже не удалось… Все это порождает (по крайней мере, в моей голове — породило) миф о том, что это трудоемкий процесс, доступный только гуру. Вот этот миф и призвана развеять данная статья. Мы напишем расширение, которое будет править типографику в полях ввода, обращаясь за помощью к сервису «Типограф».

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

Для работы с расширениями вам понадобится переключить канал обновлений на Dev или Beta.

В прошлой статье я описал как реализовать инклудинг и кеширование при обработке xsl-темплейтов на стороне клиента. Сегодня я раскажу с помощью каких инструментов можно проводить отладку xslt-преобразований на стороне клиента и о работе конструкции <xsl:value-of select=«xxx» disable-output-escaping=«yes»/> в firefox.

Отладка XSLT на клиенте

Во время обработки xsl-документов в браузере могут происходить различные ошибки:
1) сетевые ошибки — когда xml или xsl данные не были получены;
2) ошибки обработки шаблонов.

Стили

User Agent

Один из способов включения стилей для мобильного устройства — это использование User Agent, которую получает сервер от клиента.
Этому может помочь набор скриптов: code.google.com/p/mobileesp, а также сервис от яндекса api.yandex.ru/detector
При работе с User Agent только одна проблема — это постоянно появляющиеся новые User Agent.

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

Разбирая код очередного проекта внутри тега head наткнулся на интересный код:

<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta3)/IE9.js"></script>
<![endif]-->

Только одно слово «IE9» меня пустило в замешательство. Первое что пришло мне в голову — это то, что при помощи этого .js кода браузеры под печальным клеймом Internet Explorer можно заставить работать используя свойства многообещающего IE9. Больше всего я ожидал что будут доступны свойства CSS3.0, но не тут-то было!

Эту статью я хочу посвятить тонкостям работы с массивами в JavaScript.

Наверное, у каждого JavaScript-разработчика есть фунции (самописные или библиотечные) $ (выбор элемента по id) и $$ (выбор элементов по CSS-классу). Если мы выбираем несколько элементов по CSS-классу, то мы хотим произвести с ними определенные действия. Напрашивается цикл. А если нужна выборка среди них? Преобразования? Действия над нужными элементами? Непростой получается код.

JavaScript не стоит на месте, Mozilla неустанно улучшает JavaSript в своем движке Gecko и грех не пользоваться этими нововведениями. В JavaScript 1.6 добавлены новые полезные методы для упрощения кода, необходимого в вышеописанных ситуациях.