December 2, 2015 at 02:55 PM
Air Datepicker, легкий и красивый выбор даты
Хочу поделиться с вами опытом написания компонента выбора даты для текстового поля.
Читать дальше →
-
December 2, 2015 at 02:55 PM
-
March 18, 2015 at 02:44 PM Грабли mongoose
Читать дальше →Хакер — человек, который наступает на грабли, которые спрятаны в сарай и закрыты на замок
Mongoose — самый популярный модуль для работы с mongodb на javascript. Примеры на сайте позволяют достаточно быстро и успешно начать его использовать, однако mongoose имеет ряд неожиданных особенностей, которые могут заставить программиста начать выдирать волосы на голове. Именно об этих особенностях я и собираюсь рассказать.
-
August 25, 2015 at 03:36 PM Как сверстать интерактивные вкладки в email-письме
- Translation
Читать дальше →
В нашем блоге мы уже неоднократно рассказывали о создании интерактивных email-рассылок с помощью CSS и HTML. Сегодня мы представляем вашему вниманию адаптированный перевод заметки Джастина Ку о том, как сверстать интерактивные вкладки, которые будут работать в почтовых программах iOS, Android и популярных веб-приложениях. -
October 11, 2014 at 10:02 PM Подстраховка web-доступности семантических областей HTML5 через роли WAI-ARIA
- Tutorial
Как известно, HTML5 имеет расширенные возможности семантической вёрстки. Он позволяет обернуть отдельные логические блоки страницы в специально предназначенные для них блочные теги, какие как header, main, footer и другие. Ну а улучшение структурной и семантической вёрстки, как правило, автоматически способствует повышению уровня accessibility web-интерфейса для пользователей программ экранного доступа, потому что они добавляют элементы страницы, по которым возможно осуществлять навигацию и быстро перемещаться между блоками контента.Читать дальше →
В принципе, дополнительная разметка для обеспечения accessibility реализуется через отдельную технологию WAI-ARIA, однако и стандартные семантические структуры HTML5 современными браузерами и современными программами экранного доступа воспринимаются как соответствующие атрибуты ARIA для вспомогательных технологий. Проще говоря, это означает, что в теории следующие два варианта вёрстки с точки зрения программ чтения экрана аналогичны::
-
June 30, 2015 at 12:38 PM
По-настоящему адаптивные письма. Часть первая
Написание данного поста навеяно недавней поистине шикарной работой, Niсole Merlin. Во многом ее методика верстки схожа с моей и мне радостно от того, что это направление развивается теперь и на западе. Чем же этот способ так хорош? Все очень просто. Не нужно объяснять как важно адаптировать под мобильные платформы сверстанные письма для того, чтобы они были прочтены. Читать простыни на телефоне мало кто будет. Что же все это время делал западный разработчик? Он верстал табличной версткой с элементами блочности, затем причесывал этот код медиазапросами для поддержки мобильников. Чем этот подход ущербен? А тем, что ни на андроиде, ни на яблоке медиазапросы не поддерживаются следующими почтовыми клиентами: Gmail, Yandex, Mail.ru. По большому счету западные коллеги могли бы и наплевать на яндекс с мейлом, но вот Gmail как ни крути первый среди почтовиков.Читать дальше →
Для Nicole Merlin это стало очевидно и она разработала свою методику, которая основывается на резиновой верстке с минимальным использованием медиазапросов(progressive enhancement) и это работает! Но немного не так как хотелось бы нам в России. Вся резиновость автора держится на inline-block элементах и оперированием max-width. Но вот беда-то, наши ребята из яндекса и мейла max-width не поддерживают. Сначала я расскажу об отличиях моего подхода от приемов Nicole, а затем плавно перейду к своим мыслям и примерам кода, которые стоит использовать при подготовке писем.
-
July 1, 2015 at 08:58 AM Очередной умный дом, в трех частях. Часть третья, пользовательско-интерфейсная
Итак, подошло время рассказать и показать как это все управляется. Как я уже говорил во второй части, после нескольких итераций — все остановилось на HTML + JS. Писать отдельное приложение под Android я не планировал, но жизнь, как обычно, внесла некоторые коррективы.Читать дальше →
Ссылки на первые две части:
-
August 16, 2014 at 08:08 PM 10 самых распространённых ошибок при программировании на JavaScript
- Translation
Читать дальше →
Сегодня JavaScript лежит в основе большинства современных веб-приложений. При этом за последние годы появилось большое количество JavaScript-библиотек и фреймворков для разработчиков Single Page Application (SPA), графики, анимации и даже серверных платформ. Для веб-разработки JavaScript используется повсеместно, и поэтому качество кода обретает всё большее значение.
На первый взгляд, этот язык может показаться довольно простым. Встраивание в веб-страницу базового функционала JavaScript — это не проблема для любого опытного разработчика, даже если он ранее не сталкивался с этим языком. Однако это обманчивое впечатление, поскольку JavaScript гораздо сложнее, мощнее и чувствительнее к нюансам, чем кажется поначалу. Немало тонкостей в этом языке приводит к большому количеству распространённых ошибок. Сегодня мы рассмотрим некоторые из них. На эти ошибки нужно обратить особое внимание, если вы хотите отлично программировать на JavaScript.
-
January 4, 2015 at 06:42 AM Что нужно знать, чтобы хорошо рисовать?
- Translation
- Tutorial
Читать дальше →
Давид Ревуа — прекрасный художник, работающий со свободным программным обеспечением, постоянный член сообществ Krita Foundation и Blender Institute, концепт-художник анимационных проектов Gooseberry Open Movie Project, Mango Open Movie Project (Tears of Steel) и Durian Open Movie Project (Sintel). В этой статье он делится с начинающими художниками списком знаний, которые необходимо приобрести, чтобы работы получались реалистичными. Он обращает внимание, что для рисования «в цифре» следует обзавестись теми же навыками, что и в традиционной технике. Итак, приобщимся к его опыту.
-
November 10, 2014 at 01:45 PM
ECMAScript 6 Promises
- Tutorial
На Хабре уже встречались статьи о замечательной технологии Promises, которая в будущем станет частью стандарта ECMAScript 6, однако, в этих статьях не было подробного описания, почему же они так полезны и в чем таки их преимущества. Дабы заполнить этот пробел, я решил написать эту статью.Читать дальше → -
August 20, 2012 at 10:04 AM
Меню с плавной инверсией цвета
Читать дальше →Представляю вашему вниманию меню с плавной инверсией цвета при перетекании курсора.
Под катом сам плагин и немного о концепции.
-
November 5, 2014 at 02:32 PM
Продвинутый Gulp и Browserify: интересные трюки
Пару недель назад я начал цикл о том, как делал некоммерческий музыкальный проект (первый пост есть в «я пиарюсь», не буду ставить ссылок), но, к сожалению, в первой же статье увлекся, и вместо того, чтобы рассказывать о том, как делал конкретно его, начал вспоминать эффективные трюки из других проектов. Видимо, именно это вкупе с прописанным акцентом на сам проект привело к тому, что за мной и постом прилетело НЛО.Читать дальше →
Однако все то, что было в статье, было по крайней мере малоизвестно, а половина ее была вообще уникальна, как я уверен, и каждый из этих советов может ощутимо облегчить работу с gulp, поэтому мне действительно было бы жаль, если этот материал безвозвратно пропал бы.
Поэтому я постарался убрать все упоминания проекта и повторно публикую (с доработками и правками) статью, которую по сути никто еще не видел. Если вы фанат grunt — почитайте хотя бы вторую часть: то, что вы не любите gulp, не значит, что вы не любите browserify.
Краткое содержание:
- Простой способ обработки ошибок;
- Универсальная структура для хранения исходных файлов;
- Объединение нескольких потоков (например, скомпилированный coffee и js) в один;
- Создание потока из текста;
- создание собственных плагинов для Browserify;
- создание плагинов из плагинов Gulp для Browserify.
-
November 5, 2014 at 11:24 AM
«Sanitize this!» и «Search that!»
На дворе подходит к концу 2014 год, слово «юникод» уже не вызывает, вроде бы, священный трепет даже у Ричи Столлмана. Казалось бы, мы знаем и умеем хотя бы UTF-8. Неприятно вас удивлю: это не так. Давайте для начала взглянем на несколько картинок редактирования простого HTML (смотреть нужно внутрь тега body):Читать дальше →
IntelliJ IDEA
Sublime
Eclipse
Это один и тот же файл. Вот его код:
<!doctype html> <head> <meta charset="utf-8"> </head> <body> Barçelona Barçelona </body> </html>
-
October 24, 2014 at 06:18 PM
Продвинутое использование объектов в JavaScript
- Translation
Этот пост выходит за рамки повседневного использования объектов в JavaScript. Основы работы с объектами по большей части так же просты, как использование JSON-нотации. Тем не менее, JavaScript дает возможность использовать тонкий инструментарий, с помощью которого можно создавать объекты некоторыми интересными и полезными способами и который теперь доступен в последних версиях современных браузеров.Читать дальше →
-
June 19, 2013 at 02:27 PM
Смотрим MKV на Apple TV из Plex
Всем привет!Читать дальше →
Продолжая цикл Apple-related статей, сегодня хочу поделиться удивительным способом, как можно заставить приставку Apple TV полюбить распространённую ныне матрёшку (MKV) и предоставить ей возможность комфортабельного воспроизведения на большом экране.
-
January 19, 2012 at 07:49 PM
Smart KM Link A820
Часто приходится работать за ноутом и ПК одновременно — не весь софт есть и там и там, не весь софт на ноуте работает достаточно быстро, часто нужно прервать работу и ехать на встречу.Такую штуку я ждал давно
Работая таким образом, я, как наверное и многие, периодически пытаюсь мышкой компа что-то щелкнуть на ноуте или передвинуть мышу с ноута на соседний монитор. Особенно это знакомо тем, у кого больше одного монитора на столе.
Теперь это возможно!
-
October 14, 2014 at 03:38 PM
5 популярных JavaScript-хаков
Существует несколькоЧитать дальше →JavaScript-хаков , которыми постоянно пользуются опытные программисты. Они не совсем очевидны, особенно для новичков. Эти хаки используют возможности языка, имеющие некоторые побочные эффекты. В этой статье я объясню, как работают 5 таких распространённых хаков. -
September 28, 2014 at 09:43 PM
Выравниваем блок по центру страницы
- Tutorial
Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.Читать далее
-
September 5, 2014 at 08:22 AM GitHub's CSS
[Прим. перев.]: предлагаю вашему вниманию перевод статьи Марка Отто, разработчика GitHub, бывшего разработчика Twitter, создателя самого известного CSS фреймворка Bootstrap. В этой статье он рассказывает о внутреннем устройстве CSS проектов GitHub.Читать дальше →
Меня всегда интересовали подробности процесса разработки других продуктов, особенно их гайдлайны и подход к использованию CSS. Учитывая мою склонность к деталям чужого CSS кода, я решил написать о подходе к CSS в GitHub.
Несколько фактов
Обзор нашего текущего состояния CSS:
- В качестве препроцессора мы используем SCSS.
- У нас есть более 100 отдельных исходных файлов стилей, которые мы компилируем перед выкаткой в продашн.
- Исходники компилируются в 2 отдельных CSS файла (чтобы избежать проблемы с максимальным количеством селекторов для IE<10).
- Эти 2 файла весят в сумме около 90 kb.
- Мы не используюм какую-нибудь особенную «CSS архитектуру».
- Для определения размера мы выбрали пиксели, но все же у нас есть немного «em-ов».
- Мы используем Normalize.css, смешанный с несколькими нашими собственными стилями для сброса свойств.
-
August 18, 2014 at 02:11 PM Малоиспользуемые, но от этого не менее прекрасные возможности LESS
Данный пост навеян коментарием уважаемого хабраюзера SerafimArts о том, что LESS много чего не умеет. Хочется развеять эти крамольные заявления и заодно показать, каким прекрасным может быть LESS, если правильно его готовить.Смотреть примеры
Примечание: некоторые примеры «из жизни» в данной статье предоставлены для тех людей, кто по каким-то причинам (вплоть до религиозных) не использует Autoprefixer.
Примечание 2: для всего, что написано ниже используется последняя версия LESS, потому что нет вообще ни одной причины её не использовать.
Слияния
Они же объединения, они же мерджи (Merge). Используются, если вам нужно что-нибудь присоединить через пробел или через запятую. Транзишны, трасформы, множественные бэкграунды, тени (простите за русское слово: бокс-шадоуы звучит как-то неласково) ликуют. Лучше всего за меня скажут примеры.
-
August 18, 2014 at 12:36 PM
Визитки 2.0: Добавим немного NFC-магии
- Tutorial
Узнать больше
Визитные карточки – такая же привычная часть бизнеса, как и электронная почта или телефон. Многие уже давно предрекают им смерть в связи с «прогрессом» QR-кодов, соцсетей и передачи файлов, но они до сих пор живее всех живых. Мы пока не можем обойтись без бумажных карточек для передачи контактных данных нашим клиентам и партнёрам. QR-коды не стали популярными, так как требовали установки дополнительных приложений, хорошего освещения и были слишком громоздкими для хранения всех нужных данных. В соцсетях зарегистрированы не все и хранить там персональные данные порой непозволительная роскошь. А передача файлов с помощью различных технологий типа AirDrop, Alljoyn или Beam, будем честны, пока недостаточно удобна и широко распространена.
И всё-таки есть способ добавить немного магии в ваши бумажные визитки и быстро передать ваши контактные данные прямо в записную книжку телефона партнёра. Я говорю об NFC.
Собственно, с бумажными визитками понятно, что делать: сканируем и распознаем с помощью ABBYY Business Card Reader и сохраняем в контакты. Но вот для того, чтобы добавить визиткам «айтишность» и некоторый шарм, нужно что-нибудь дополнительное. В этой роли отлично сыграет NFC-метка.
