Как стать автором
Обновить
-7
0
Федор Горожанко @lobstarr

Пользователь

Отправить сообщение

Выразительный JavaScript: Величины, типы и операторы

Время на прочтение10 мин
Количество просмотров156K

Содержание




Под поверхностью машины движется программа. Без усилий, она расширяется и сжимается. Находясь в великой гармонии, электроны рассеиваются и собираются. Формы на мониторе – лишь рябь на воде. Суть остаётся скрытой внутри…

Мастер Юан-Ма, Книга программирования

Читать дальше →
Всего голосов 26: ↑25 и ↓1+24
Комментарии6

ObjectManager в API Яндекс.Карт. Как быстро отрисовать 10 000 меток на карте и не затормозить всё вокруг

Время на прочтение10 мин
Количество просмотров109K
Перед разработчикам, которые используют API Яндекс.Карт, довольно часто встаёт задача отобразить много объектов на карте. Действительно много — порядка 10 000. Причем эта задача актуальна и для нас самих — попробуйте поискать аптеки на Яндексе. На первый взгляд кажется: «А в чем собственно проблема? Бери да показывай». Но пока не начнешь этим заниматься, не поймешь, что проблем на самом деле целый вагон.



Вопросы по большому количеству меток с завидной регулярностью поступают в наш клуб и техподдержку. Кто все эти люди? Кому может быть интересно показать на карте больше 10 меток? В этом посте я подробно рассмотрю весь вагон проблем и расскажу, как в API появились инструменты, помогающие разработчикам оптимально показать большое количество объектов на карте.
Читать дальше →
Всего голосов 93: ↑89 и ↓4+85
Комментарии85

GameStick под Android: самая маленькая в мире игровая приставка

Время на прочтение1 мин
Количество просмотров69K


В мире 1,4 миллиарда телевизоров, но менее 1% из них используются для игр. Это же безумие, говорят разработчики новой игровой приставки GameStick, на которую начался сбор денег на Kickstarter. GameStick — проект open source, который ставит целью освободить рынок ТВ-приставок от закрытых платформ. В экосистеме Android уже сейчас более 700 тыс. игр, многие из которых отлично подходят для игры на телевизоре, при небольшой доработке.
Читать дальше →
Всего голосов 38: ↑29 и ↓9+20
Комментарии25

Подсказки: API для ввода почтовых адресов и ФИО одной строкой

Время на прочтение2 мин
Количество просмотров28K
Если вам когда-нибудь приходилось разрабатывать форму регистрации или оформления заказа, то вы знаете, что для получения из формы качественных данных нужно прикрутить множество проверок для ФИО, почтовых адресов, e-mail, телефонов. При этом так уж исторически сложилось, что разработчики пишут код валидации информации каждый раз заново. Ну а потом эти проверки приходится еще и поддерживать, а на поддержку, как известно, приходится 80% усилий.

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

Так не должно быть.

Читать дальше →
Всего голосов 42: ↑40 и ↓2+38
Комментарии62

Сортировка при помощи HTML5 Drag'n'Drop API

Время на прочтение5 мин
Количество просмотров36K
Sortable.js — минималистичная библиотека для современных браузеров и touch-устройств, не требующая jQuery.

Как вы уже догадались из названия, библиотека предназначена для сортировки элементов при помощи drag’n’drop. Стандартным решением в таких случаях является jQuery UI/Sortable, а это ни много, ни мало 64 кб + 10 кб. Итого 75 кб gzipped в проекте, где jQuery не используется совсем. Относительно недавно на Хабре уже была статья о том, как реализовать похожий функционал, но опять же на jQuery, да и touch-устройства в предлагаемом решении не поддерживаются.

Читать дальше →
Всего голосов 59: ↑54 и ↓5+49
Комментарии44

Асинхронный JavaScript (книга)

Время на прочтение2 мин
Количество просмотров29K
image
Ответьте на три вопроса по JavaScript. Если какой-то из них вас затруднит, вам следует прочесть отличную книгу Тревора Бернхема (Trevor Burnham) — Async JavaScript. Всего 90 страниц, но здесь разобраны такие темы, как событийный цикл JavaScript, синхронность/асинхронность, однопоточность/многопоточность (воркеры), promises, fibers и еще много чего интересного.

Итак, что выдаст следующий код?
for (var i = 1; i <= 3; i++) {
    setTimeout(function(){ console.log(i); }, 0);
};

Ответ
4
4
4
Еще вопросы
Всего голосов 50: ↑36 и ↓14+22
Комментарии22

Путь шрифта на WebFont.ru

Время на прочтение4 мин
Количество просмотров18K


Всем привет.

Это будет пятничный небольшой пост о том, как у нас работает внутренняя кухня, да и просто чтобы все понимали, что мы делаем.
Читать дальше →
Всего голосов 44: ↑42 и ↓2+40
Комментарии20

Новое для веб-дизайнера за июнь 2013

Время на прочтение1 мин
Количество просмотров51K
Новые полезные штуки для веб-дизайнеров за июнь 2013. Остальные подборки доступны по тегу "новое для веб-дизайнера"

Инструменты




Red Pen — сервис позволяет легко получать обратную связь на свои работы в формате PNG: после загрузки картинки любой пользователь может оставлять свои комментарии к файлу
Читать дальше →
Всего голосов 86: ↑78 и ↓8+70
Комментарии9

Подборка полезного для любителей Twitter Bootstrap

Время на прочтение1 мин
Количество просмотров83K
В подборке инструменты, плагины и другие полезности, облегчающие работу с Twitter Bootstrap. Предыдущая подборка.

Инструменты




Bootstraptor — подборка большого количества бесплатных и премиум тем, в том числе Starter Kit, на основе Bootstrap.
Читать дальше →
Всего голосов 109: ↑96 и ↓13+83
Комментарии21

Решаем квартирный вопрос при помощи API Яндекс.Карт

Время на прочтение7 мин
Количество просмотров50K
В жизни даже самого «махрового» IT-шника порой наступает момент, когда нужно не только вылезти из своей берлоги на улицу, но целиком перенести себя на новое место жительства. Обычный человек в таких случаях вооружается Интернетом и прочёсывает сайты недвижимости в поисках подходящих вариантов, которые отмечаются на карте, выписываются или распечатываются, а затем планомерно прозваниваются. Если наступает конец цикла, а задача ещё не выполнена — goto line 1… А на каком-то этапе человеку это надоедает и он идёт в агенство.

Вот и в моей жизни пришло время для переезда, но проведя несколько дней за такой рутинной деятельностью я вспомнил, что незря ношу бороду есть такой чудесный сервис, как Яндекс.Карты, и у них есть не менее чудесное API. Посидев одно утро и скомбинировав всё с простейшим граббером на PHP и XPath я получил такую вот красочную карту, где разными маркерами можно отмечать объекты (квартиры) по любому из критериев, или просто одним взглядом оценить, какие из них ближе к желаемому месту дислокации (в моём случае это было метро):

Снимок экрана

Под катом - PHP, JS, немного HTML и кое-какие полезные ссылки
Всего голосов 77: ↑67 и ↓10+57
Комментарии51

5 правил верстки email-писем от Печкина

Время на прочтение2 мин
Количество просмотров74K

Сегодня мы хотели бы рассказать о базовых правилах верстки HTML в email-письмах. Как известно, на свете существует множество почтовых клиентов:
  • веб-версии у почтовых провайдеров (Gmail, Yandex, Mail, Yahoo итд.)
  • десктопные почтовые клиенты (Outlook, Bat, Thunderbird, Mac Mail)
  • мобильные почтовые клиенты (Blackberry, Android, Iphone, Ipad итд)


К сожалению, не существует обязательного стандарта верстки писем, который бы универсально поддерживался бы всеми клиентами. Часть поддерживает CSS3, часть нет, какие-то теги и аттрибуты поддерживаются, какие-то нет, не говоря уже о том, что поддержка HTML и CSS меняется даже в пределах одного почтового клиента от версии к версии. Последнее особенно заметно на примере Outlook (от Express и 2003 к Outlook 2011).

Что же необходимо знать тем, кто собирается самостоятельно верстать HTML-код для email-писем?
Посмотреть 5 правил верстки email
Всего голосов 56: ↑46 и ↓10+36
Комментарии24

Основы профессиональной верстки электронных писем

Время на прочтение7 мин
Количество просмотров104K
Верстка электронных писем
Ни для кого не секрет, что e-mail маркетинг только начинает набирать обороты во всем мире. А для России – это ещё и вовсе молодая ниша на рынке. И профессиональная верстка электронных писем здесь один из составляющих факторов успеха. Под профессиональной версткой понимается не только визуально красиво и надежно сверстанный макет, но и то, как выглядит usability открытки с маркетинговой точки зрения, как оптимизирована графика вместе с типографией для спам-фильтров и многое другое. Верстка электронных писем довольно обширная тема, в одной статье все не уместить, поэтому в данном посте постараюсь описать только базовые элементы и приемы, надежно проверенные за годы практики и работающие в top самых используемых почтовых клиентах мира: iPhone 4S/5; Outlook 07/10/13; iPad; Apple Mail; Android 2.3/4.0; Yahoo; Gmail. Если рассматривать только российский рынок, то нельзя не упомянуть о Mail.ru и Яндекс.Почта.

Что нужно знать в начале?


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

  1. В нашем арсенале имеется очень урезанный набор css-свойств, которые поддерживаются всеми почтовиками. При этом, стили нужно прописывать inline, а в head выносить только вендорные свойства и те блоки объявлений, которые не несут нагрузки на основную стилизацию письма. Ну и использовать link in head — крайне нежелательно.
  2. Не используйте background-image в основных визуальных элементах дизайна и не помещайте в изображения важную текстовую информацию. Вообще нужно всегда учитывать такой вариант, что письмо будет просматриваться получателем без единого изображения.


Каркас


Пожалуй каждый, кто хоть раз верстал письмо под рассылку, знает, что каркас лучше строить с помощью таблиц. На самом деле простая блочная модель div поддерживается на данный момент во всех перечисленных выше почтовиках, за исключением MS Outlook начиная с 2007 версии. Это связано с тем, что в качестве движка последние версии Outlook используют Microsoft Word, который в свою очередь много не знает о блочных css-свойствах. Игнорировать при верстке данный почтовый клиент я не рекомендую, поэтому в качестве фундамента все же используйте table. Да и добившись хорошего результата для Outlook, можно быть уверенным, что в большинстве почтовиках, письмо будет смотреться тоже хорошо, а скорее и лучше.

В качестве примера рассмотрим наиболее важные элементы из следующего, не сложного шаблона:
Шаблон письма для рассылки
Читать дальше →
Всего голосов 94: ↑81 и ↓13+68
Комментарии66

intro.js — пошаговое руководство для веб-страницы

Время на прочтение1 мин
Количество просмотров51K


Эта маленькая библиотека позволяет очень просто создать пошаговое введение для сайта или приложения. Достаточно добавить атрибуты data-intro и data-step с описанием и номером шага соответственно к нужным элементам страницы. Вот так:

<a href='http://google.com/' data-intro='Hello step one!' data-step='1'></a>
Читать дальше →
Всего голосов 139: ↑134 и ↓5+129
Комментарии24

Пользовательские таблицы в MODx Revolution

Время на прочтение5 мин
Количество просмотров24K
imageВ данной статье мы разберем следующие вопросы:
  1. Создание пользовательских таблиц для MODx Revolution.
  2. Генерация XML-схемы и php-файлов-классов для xPDO.
  3. Работа с пользовательскими таблицами.

Читать далее
Всего голосов 10: ↑6 и ↓4+2
Комментарии17

Полезные хаки и сниппеты для .htaccess

Время на прочтение7 мин
Количество просмотров462K


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

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

Если же вам нужны базовые сведения о предназначении данного файла, то вы можете получить из нашей статьи введение в .htaccess (перевод данной статьи не делал, так как там основы, их достаточно в русскоязычном сегменте Сети, но если будет проявлен интерес, то можно и ее перевести для полноты картины — прим. переводчика), в которой достаточно подробно раскрыты все аспекты его применения.
Узнать больше
Всего голосов 114: ↑92 и ↓22+70
Комментарии82

Мой первый скрипт по разгадыванию капчи

Время на прочтение4 мин
Количество просмотров21K
Предисловие:

Есть у меня один знакомый который держит интернет магазин. Балует меня иногда довольно-таки нестандартными задачами в программировании. Всё началось с того что, подумав, он решил что для его пользователей — будет очень удобно получать информацию о том где сейчас его посылка (товары с магазина он отправляет почтой России). Благо на сайте почты есть функция слежения за отправлением.

image

На странице достаточно ввести номер трекера и информация о посылке появляется на экране в виде аккуратной таблички. Не долго думая, я вооружился функцией curl и за пару минут приготовил легкий скрипт — который парсил эту информацию и выводил последнее местоположение посылки (статус: «Прибыло в место вручения» или «Вручение адресату» — давал команду скрипту отправить покупателю смс о том что он может забирать свою посылку).
Читать дальше →
Всего голосов 129: ↑110 и ↓19+91
Комментарии120

Suit Up! Простой и легкий WYSIWYG

Время на прочтение10 мин
Количество просмотров57K


Статья делится на три части:
UPD Критика


Вступление


Не так давно, а, точнее, года два назад, в кругу разработчиков, с которыми я имел честь общаться (почти все — новички), каждый, кому поступила задача поставить WYSIWYG, ставили монстрообразный TinyMCE. Этот редактор считался почему-то стандартом у многих веб разработчиков, хотя, мало кому нужны были то большое количество функций, которые предлагались программистам. Тут тебе и то и это. Наверно, таким образом, новички пытались сказать клиенту «смотри, мы тебе на сайт запилили Ворд».

Однажды (не помню при каких условиях), мне захотелось или понадобилось разобраться в том, как работают браузерные «рич эдиторы». Моему удивлению не было предела, когда я сам, не имея каких-либо глубоких познаний в веб разработке, сделал две кнопочки: Bold и Italic, что оказалось очень простой задачей. Мне захотелось больше узнать о том, что же делать дальше. Так я познакомился с серией статей «WYSIWYG HTML редактор в браузере» (по ссылке первая статья, советую прочесть). Но информация на тот момент мне показалась несколько сложноватой. Поэтому я решил методом тыка, наступая на уже растоптанные кем-то грабли, написать свой простой редактор.

Сделал я его в виде jQuery плагина, и, думаю, не стоит отвечать «почему». Получилось кое-как заставить работать его в разных браузерах. Тут мне пришла в голову идея написать статью на хабр, после некоторых доработок. Время шло, допиливание я откладывал, откладывал… Два года, черт, целых два года. Но я постараюсь исправиться.


Простейший редактор


Для того, чтоб дать возможность пользователю менять содержимое блока (в данном случае, обычного дива) просто задаём ему (блоку) атрибут contenteditable:
<div contenteditable></div>

Редактор готов!
Читать дальше →
Всего голосов 95: ↑90 и ↓5+85
Комментарии88

[Перевод] Современный веб-разработчик, или 6 вещей, которые вы должны знать, чтобы выжить

Время на прочтение4 мин
Количество просмотров97K
Это статья об изменениях, которые произошли в мире веб-разработки. Я наблюдаю огромное количество веб-разработчиков, которые буквально застряли в устаревших технологиях, особенно в мире .NET. Если вы еще не начали совершенствовать свои навыки, и адаптироваться к изменяющимся трендам, вы должны начинать уже сегодня.
Читать дальше →
Всего голосов 169: ↑132 и ↓37+95
Комментарии90

Книга веб-программиста. Секреты профессиональной разработки веб-сайтов

Время на прочтение6 мин
Количество просмотров25K
Сегодня мы хотим представить вашему вниманию «Книгу веб-программиста. Секреты профессиональной разработки веб-сайтов», которую написал авторский коллектив: Б. Хоган, К. Уоррен, М. Уэбер, К. Джонсон, А. Годин. Авторы предлагают широкий спектр передовых методов веб-разработки: от проектирования пользовательского интерфейса до тестирования проекта и оптимизации веб-хостинга.

image

Как внедрить на сайт анимацию, которая работает на мобильных устройствах без установки специальных плагинов? Как использовать «резиновую» верстку, которая корректно отображается не только на настольных ПК с различными разрешениями экрана, но и на мобильных устройствах? Как использовать фреймворки JavaScript — Backbone и Knockout — для разработки пользовательских интерфейсов? Как современные инструменты веб-разработчика, такие как CoffeeScript и Sass, помогут в оптимизации кода? Как провести кроссбраузерное тестирование кода? Как планировать процесс разработки сайта с помощью инструмента Git?

Вот, что пишут авторы во Введении:
Читать дальше →
Всего голосов 33: ↑10 и ↓23-13
Комментарии10

Подборка инструментов для эффективной frontend разработки

Время на прочтение3 мин
Количество просмотров101K
В эту прекрасную пятницу осмелюсь предложить хабрасообществую небольшую подборку приложений, предназначенных для увеличения продуктивности во время работы с фронтэндом. Если ваш любимый апп здесь не представлен — добро пожаловать в комментарии!

Form Builder

image

Этот прекрасный генератор форм поможет вам в создании красивейших CSS логин-боксов и прочих input вещей, при минимальных временных затратах. Помимо форм на сайте этого проекта можно создавать и другие не менее красивые CSS элементы, в том числе кнопки и ленты.
еще 24 ссылки
Всего голосов 204: ↑197 и ↓7+190
Комментарии46
1

Информация

В рейтинге
Не участвует
Откуда
Санкт-Петербург, Санкт-Петербург и область, Россия
Дата рождения
Зарегистрирован
Активность