19
Май 14

ZTE Open C: первое впечатление

В понедельник, 12 мая анонсировали в продаже вторую версию китайского видения телефона на опенсорс платформе B2G (boot to gecko). Кто не в курсе что это за зверь — ядро linux, прослойка из драйверов от android (работает только на soc Qualcomm), ядро firefox на котором все, включая оболочку рабочего стола, запускается в виде html5 приложений с кучей web api включая webGL, доступ из приложения к камере, микрофону, файловой системе и прочим датчикам. В России подобные устройства еще (вроде бы) официально не продаются, они проходят обкатку в Южной Америке и других развивающихся рынках. Но, внезапно нашелся продавец на eBay, который продавал эти устройства по рекомендованной цене в 99$, да еще и имел какое-то количество устройств на складе в Москве и предлагал бесплатную доставку. Немного подумав, на следующий день заказываю девайс.. Через 2 дня на почту падает сообщение что заказ отправлен, а еще через сутки звонит телефон и курьер спрашивает куда привезти! Бесплатная курьерская доставка спустя 3 дня после заказа? Что-то новенькое.

Continue reading →


12
Июл 13

javascript превью картинок из input type=file

1373621132570

что может быть прекраснее возможности посмотреть превью загружаемой картинки до отправки её на сервер? немножко coffeescriptjavascript, и никакого SWF

вариант на js

выглядит немножко хардкорно, но это плата за ClosureCompiler, минифицированая версия весит всего 861 байт

https://github.com/d1mmmk/jquery-image-upload-preview


02
Июл 13

OOM 2.4 Работа с изображениями в Compass.

Моя самая любимая часть Compass, что бы я без нее делал!? Наверное как и раньше вручную клеил картинки, таскал направляющие, считал пиксели, тратил время на рутину.

Например, необходимо вставить блок с логотипом из файла logo.png в папке images_dir, что может быть проще:

Красота, не правда ли?

Самое главное: нет никакой привязки к папке с изображениями, она поставляется из image_dir нашего config.rb (или можно прописать путь к файлу вручную), мы легко можем перенести или переименовать папку, достаточно подправить всего одну строку, и в css появятся правильные пути до изображений. Это же касается и размеров изображений, если мы изменили какую-то картинку, нет необходимости переписывать её размеры в css, ведь все подставляется само=)

С размерами картинок можно делать различные математические действия:

Спрайты

Самое крутое что можно только представить, это автоматическая склейка спрайтов и подстановка background-position, и Compass это умеет.
Для создания собственной коллекции спрайтов создадим в директории с изображениями папку «myicons».
Добавим туда два новых файла «edit.png» и «remove.png», размер каждой иконки 32х32 пикселей

получаем

добавим еще два файла «edit_hover.png» и «remove_hover.png»:

подобных «волшебных» суфиксов три: «_active», «_hover» и «_target»
можно отключить их генерацию добавивь перед вызовом миксина спрайта $disable-magic-sprite-selectors:true;

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

Так же есть варианты диагонального (diagonal) и умного (smart) выравнивания, примеры

Каждую карту спрайтов, и даже спрайт по отдельности можно тонко настроить под конкретную задачу, но как правило в этом нет необходимости.

Главный минус вставки спрайтов через @include all-myicons-sprites; — все иконки должны быть одного размера, если размеры иконок различны, то придется делать точечную вставку:

При формировании имен карт спрайтов есть своя тонкость:

имя карты спрайта будет совпадать с именем последней директории содержащей изображения

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

Inline-image

В Compass есть интересная фича: вставка изображения в виде base64 строки, но она поддерживается только современными браузерами.

пример использования:


02
Июл 13

frontend developer — защищай свой код!

В будущем, с вероятностью 146% весь софт будет опенсорс, но пока это светлое будущее не настало, мы будем прятать свой javascript код от чужих глаз. На то может быть множество причин: защита собственных алгоритмов или оригинальных решений нетривиальных задач, скрытие от чужих глаз сложной бизнес-логики, минимизация для уменьшения размера файла, или же, банально, говнокод за который стыдно. В этих ваших интернетах есть много статей про сравнение различных программ для сжатия javascript кода с анализом их производительности, степени сжатия и прочей синтетики. На практике же, в каждой задаче мы получаем разного «лидера», поэтому если нет каких-либо жестких требований, то и нет особой разницы в инструменте.

Для себя я выбрал Closure Compiler (CC) от Google, он не только минимизирует код, но и оптимизирует его, что еще лучше затрудняет восстановление исходного состояния.

У CC есть несколько режимов работы: simple и advanced. Если нет понимания как работает advanced и нет желания писать код под его требования, то лучше использовать simple, разница в размере результата не особо большая, всего 3-5% (хотя, возможно, на проектах где кодовая база в несколько мегабайт, выигрыш будет больше).

разберем пример конфига CC для grunt.js.

в описании https://github.com/gmarty/grunt-closure-compiler есть инструкция как установить CC под Linux и Mac

SIMPLE_OPTIMIZATIONS

настройка режима simple крайне проста, входные данные, выходные — все.

ADVANCED_OPTIMIZATIONS

С режимом advanced все уже сложнее, он старается сжать абсолютно все что ему попадается. Поэтому если мы используем в своём коде какие-либо сторонние библиотеки, например jQuery, то нам необходимо их подключить для исключения сжатия конструкций вида $(‘.selector’).css({…}) до v(‘.selector’).B({…} && etc.

При этом у advanced режима строгие требования к качеству кода, поэтому без jshint нам уже не обойтись.
Сразу усложним задачу, и добавим склейку application.js из нескольких файлов налету по изменению какого-либо файла:

package.json

.jshintrc

для запуска сборки нашего проекта достаточно написать в консоли

эта команда запустит сборку и сервер, проект будет доступен по адресу http://localhost:8080

для слежения за изменениями в файлах запускаем задачу watch в соседней консоли

Cам по себе closure-compiler в advanced режиме очень нерасторопный, 20кб исходников преобразует с компрессией 45% примерно секунд 5, после молниеносного uglify это немного расстраивает.

Интересный момент в минификации jquery.colorbox.js, есть там конструкция вида:

так вот, такой код в CC в режиме advanced не прокатит, он попытается его сжать и в итоге $.colorbox не инициализируется.
Для корректной обработки подобных конcтрукций придется писать так:

или так

т.е. название функции из namespace в переменную переносить нельзя

UPD углубился в чтение документации CC и обнаружил что google предлагает для функций засерать global namespace https://developers.google.com/closure/compiler/docs/api-tutorial3#export, а для имен свойств черным по белому написано «Use quoted string property names only when you don’t want Closure Compiler to rename a property at all.» т.е. «если не хотите чтобы CC переименовал ваше свойство, записывайте его как строку», это полярный лис, товарищи, у меня нет слов. Хоть $[‘fn’][‘colorbox’] = $[‘colorbox’] и выглядит уродливо и нелепо, но похоже это единственный способ сохранить имена функций и свойств от переименования.


28
Июн 13

перехватываем события входа/выхода из полноэкранного режима

Очень странно, но в jquery почему-то нет события отвечающего за полноэкранный режим. Все «плагины» которые я нашел, ужасный говнокод, в котором текущий режим отображения высчитывается соотношением размеров окна браузера и screen, ужс %)

Fullscreen api поддерживают Chrome, Mozilla Firefox, Opera 12.1, Safari 5.1, и похоже что IE 11 http://caniuse.com/#feat=fullscreen

исправим эту досадную оплошность при помощи стандартных событий:

пример использования:

бонус:

добавляем тест на поддержу fullscreen api в Modernirz

если fullscreen api поддерживается, то у тега html добавится .fullscreen, если нет, то .no-fullscreen

UPD. создал репозиторий на гитхабе https://github.com/d1mmmk/jquery-fullscreen-api


26
Июн 13

OOM 2.3 переменные, миксины, структурированность sass

Что есть Sass — мета-язык, надстройка над CSS, позволяющий писать более гибкий и структурированный css код. Важная особенность sass — обратная совместимость с css, т.е., если у вашего проекта накопилась достаточно большая кодовая база стилей, то нет необходимости переводить старый css код в scss, компилятор sass все поймет и сгеренирует корректный код.

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

Nesting

Переводчик от гугла предлагает перевести это как «гнездование» — не совсем понятное слово, к тому же не отображающее суть вопроса. Nesting — это вложенность, структурированность и наследование вместе взятые.

Какие плюсы и минусы мы получаем:

+ понятная структура кода;
+ автоматическое добавление селектора родительского элемента к дочерним;

— усложнение чтения при вложенности множества элементов, особенно когда описание раздувается на 2-3 экрана и больше. этот негативный фактор сводится к минимуму при использовании БЭМ подхода, где вложенность не приветствуется.
например вместо:

при БЭМ подходе будет:

с минимум вложенности

Parent References

«привязка» к родительскому элементу, т.е. когда вложенный селектор прибавляется к родительскому без разделительного пробела. Для использование этой фичи достаточно перед селектором написать специальный символ &:

Variables

Переменная начинается со специального символа $, может принимать любое значение: строку, цвет, цифру, или даже размер в px, em, etc.

Operations and Functions

Поддержка переменных без возможности операций с ними была бы бесмысленной. Sass позволяет производить с переменными все стандартные математические операции(+, -, *, /, %) и даже больше. Для работы с цветом есть множество полезных функций: lightness, hue, saturation и т.д.

Interpolation

Переменная может быть не только значением свойства, но и даже частью имени свойства или селектора.

Mixins

Самая мощная фича Sass, позволяет повторно использовать код без необходимости копипаста.
Микстины начинаются с определения “@mixin”, в себе могут сочетать как стили, так и другие селекторы.

Arguments

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

@import

При разработке больших проектов файлы стилей могут быть просто гиганскими, поэтому в css появилась директива @import, позволяющяя легко подключать зависимые файлы, но она добавляет дополнительный HTTP запрос к серверу, что не очень хорошо сказывается на производительности. В Sass эта проблема решается очень просто, синтаксис остается прежним, но код подключаемого файла вставляется в сгеренированный файл в месте вызова.
Например, мы можем вынести наш миксин в отдельный файл _rounded.scss и подкючать его внутри style.scss

в результате получим все те-же:

Небольшой бонус:
Маленький, но очень полезный миксин для Compass от heygrady под говорящим названием «compass-photoshop-drop-shadow» доступный на GitHub и в качестве RybyGem

названия параметров полностью совпадают с наименованием свойств в фотошопе, $color может быть в любом формате (#RGB, rgba() и т.п.)

примеры

На этом все, спасибо за внимание.


25
Июн 13

OOM 2.2 Забываем про css префиксы браузеров

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

На заре css3, каждый браузерный разработчик старался привнести в спецификацию свои новшества. Но для соответствия принципу «не навреди», пока новшества не стали утвержденным стандартом, для каждого браузера использовались префиксы css свойств. С одно стороны это очень разумно, ведь синтаксис иногда отличался, но это породило кучу обязательных к запоминанию свойств, в который, естесственно постоянно путаешся. Самый наглядный пример (взят с сайта http://css3please.com/):

аж пять вариантов описания градиента, и это еще не считая градиентов для IE, в которых 6-7 версии отличаются 8, а IE9 вообще понимает только SVG градиенты: итого 7 синтаксисов + сгеренированный svg, рехнуться можно.

Мой любимый Compass позволяет сохранить ячейки памяти для более важных вещей, а так же сэкономить уйму убитых нервных клеток и времени на проверку корректной работы градиентов в большинстве, популярных в этой части галактики, браузерах (исключение составляют IE<9, для которых придется все же писать ручками, и то они понимают только линейные вертикальные градиенты). Достаточно написать всего одну строчку:

На выходе мы получим то, что нам надо. Для генерации svg градиента для IE9, достаточно в любом месте кода, до вызова "@include background-image" написать строку:

и мы получим дополнительно что-то типа:

Полный перечень css3 плюшек компаса есть тут, не всегда очевидно где искать нужное свойство, но есть вполне вменяемый поиск

Часто используемые мной миксины Compass для css3:

border-radius()

можно использовать множество вариантов написания, от общего

до безумных

box-shadow()

генерирует падающую тень от блока, например:

text-shadow()

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

1) заданием значений по умолчанию:

2) непосредственным заданием параметров:

font-face()

вставка пользовательских шрифтов из папки указаной в config.rb в качестве директовы со шрифтами: переменная fonts_dir, по умолчанию css_dir/fonts

синтаксис: font-face($name, $font-files, $eot, $weight, $style)
обязательные параметры:
$name — имя шрифта
$font-files — названия файлов шрифтов
необязательные параметры:
$eot — название файла шрифта, который будет подключаться как #iefix
$weight — normal, bold, etc.
$style — normal, italic, etc.

например:
из:

получается:

inline-block()

не совсем css3 свойство, оно описано еще в спецификации css2.1, но не буду тыкать пальцем в браузеры, которые некорретно его воспринимают.

так же не забываем по горизонтальные отступы в 0.3em от display: inline-block; элементов чтобы не ломать голову почему в таком случае:

получается что в строку влезает только 3 элемента вместо 4х. надо добавить:

в этом случае в строке будет 4 элемента.

background-image()

background-image умеет делать не только градиенты, им можно делать и рутинные задачи наподобии вставки фоновой картинки:

можно и параметризовать:

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

Остальное изучаем сами 😉 http://compass-style.org/reference/compass/css3/


20
Июн 13

«Умное» окно подтверждения действия

Небольшой скрипт «умного» всплывающего окна подтверждения действия (confirm)

Что он умеет:

  • переход по ссылке
  • выполнение ajax запроса по адресу и возвращение результата для его последущей обработки
  • выполнение какого либо действия

пример использования:

1371715482145


18
Июн 13

Автокомплит геоданных

Последние годы стали модны различные автоподсказки при заполнении форм, в html5 даже добавили datalist для удобной реализации средствами браузера без необходимости использовать jqueryUI или другую библиотеку. Когда набор данных ограничен (например список всех населенных пунктов в России состоит всего из ~170 тысяч строк) вполне достаточно в качестве source autocomplete использовать ajax запрос на собственный сервер, но если мы добавим к городу улицу? а если дом? уже ни горизонтальное, ни вертикальное масштабирование ресурсов сервера не спасет от количества данных (которые надо еще где-то достать и постоянно актуализировать). На выручку нам придут геокодеры Яндекс.Карт и Google Maps.

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

пример работы:

пишем адрес с городом и улицей
1371541441464
добавляем номер дома
1371541464352
выбираем из подсказки
1371541502936

Работу с геокодером Яндекс.Карт думаю можно оставить для самостоятельного изучения, тут небольшая подсказка

upd.
еще немножко про недокументированные типы адресов геокодера гугла:

transit_station — транспортные станции, увидел как доп. тип к аэропорту,
так же обозначает жд вокзалы
bus_station — автовокзалы
fire_station — пожарные части
post_office — почта
finance — финансовые учереждения
establishment — различные учереждения
point_of_interest — достопримечательности
zoo — зоопарки


30
Май 13

OOM 2.1 семантика HTML5

Зачем все это нужно?

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

С чего все начинается?

Театр начинается с вешалки, html страница начинается с доктайпа:

далее идет c заголовком и определением кодировки страницы, в html5 синтаксис определение кодировки значительно упростили, просто сравните:
html4

html5

далее идет подключение стилей, скриптов и определение ссылочных отношений (этот момент я оставлю для самостоятельного изучения http://wiki.whatwg.org/wiki/RelExtensions)

Основные семантические элементы спецификации html5:

section — раздел документа или приложения — порция содержимого, сгруппированя по тематическому признаку, например разделы на главной странице сайта: вводные замечания, новости, контактная информация и т.п.
article — самостоятельно значимый фрагмент страницы который может независимо распространяться или повторно использоваться, например: запись на форуме, блоге, статья, пользовательский комментарий, интерактивный виджет или любая другая независимая единица контена
nav — раздел содержащий ссылки на другие страницы или части данной страницы
aside — раздел страницы, содержимое которое косвенно связано с темой содержимого документа, например сайдбар, или рекламный блок
hgroup — заголовок раздела, используется для группировки тегов h1…h6 которые представляют собой заголовки разного уровня: основной заголовок, поздаголовок, рекламный слоган. Если нам надо просто вставить заголовок перого уровня, то hgroup использовать не нужно. Ни разу на практике не встречал необходимость использование этого тега
time — содержит точное указание времени, например дату публикации документа.
mark — подсвечивает важный текст к которому пользователь возможно пожелает вернуться

колонтитулы:
header — верхний колонтитул документа/раздела/фрагмента. Группа вспомогательных материалов вводного или навигационного характера. Используется для оформления заголовка раздела, иногда содержит навигационный блок, логотип, форму поиска
footer — нижний колонтитул родительского элемента. Обычно содержит информацию об авторе, ссылки на родственные документы, теги и т.п.

Поддержка браузерами.

Все современные браузеры поддерживают html5 теги, но старые версии, например IE8 и ниже даже не подозревают об их существовании и попросу игнорирут их отображения. Не буду описывать как эта проблема решается на js, для включения их поддержки достаточно подключить html5shiv (http://code .google .com/p/html5shiv/)

либо Modernizr (http://modernizr.com/).
Важный момент: html5shiv или modernizr должен подключатсья в head, иначе html5 элементы в старых браузерах не будут отображаться, ну и естественно не забываем про reset.css.

Наглядный пример использования: