Эта подборка полезных сниппетов, использующих HTML5, может помочь вам улучшить ваш сайт.

Автозаполнение в текстовых полях

Используя HTML5-элемент datalist вы можете создать текстовое поле с автозаполнением. Очень удобно!

<input name="frameworks" list="frameworks" />

<datalist id="frameworks">
	<option value="MooTools">
	<option value="Moobile">
	<option value="Dojo Toolkit">
	<option value="jQuery">
	<option value="YUI">
</datalist>

Волею судеб, запуская очередной проект, я столкнулся с достаточно интересным фактом.

Многие мои знакомые так или иначе пытаются делать проекты, получается у немногих.

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

Article translated from Oliver Emberton blog abetterlife.quora.com
Перевод статьи abetterlife.quora.com/How-to-master-your-time-1

Секрет тайм менеджмента прост: приемы джедая

Представьте, что Вы мастер джедай по имени Роман. Любовь Вашей жизни – принцесса Татьяна заключена в горящем здании и Вам хотелось бы очень поспешить, чтоб ее спасти.



Можете думать о Татьяне как о воплощении Вашей мечты, Вашего вдохновения – пусть это самое важное в Вашей жизни.

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

Как это вам надо две недели на эту задачу? Что, правда? Вот на эту элементарную формочку с тремя полями и двумя кнопками? Две недели? Да вы надо мной издеваетесь, наверное! Давайте разбираться.

Что? Нужна ли валидация данных при вводе? Ну, конечно, нужна! И вообще, вот это поле лучше разбить на два, так понятнее. А вот в это добавить маску. А вот это — заменить на выпадающий список. Где брать варианты для этого списка? В базе на сервере, конечно. Как это их там нет? А, ну да, это же в другом проекте они у нас были… Ну, значит надо добавить. Взять там и добавить сюда. Сейчас я дам вам контакт разработчика того проекта — обсудите с ним. Он, правда, у нас уже не работает, но я думаю, вполне можно спросить что и как — он расскажет, скорее всего.

Мы всё обсудили? Нет? Что ещё?

В своей компании для тех. поддержки клиентов используем чат+хелпдеск от kayako, но столкнулись с необходимостью найти отдельный сервис онлайн чата для новых проектов. По старой привычке — выбор делаем так: составляем список минимальных требований, потом находим все подходящие под них сервисы и проводим их тестирование, и уже из них выбираем лучший вариант.

Исходные требования:

• Интерфейс полностью на русском языке
• Возможность вставить фото оператора
• Активные приглашения — когда оператор может пригласить клиента в чат
• Статистика по посетителям — откуда пришел, какие странички смотрел
• Возможность передачи клиента между операторами
• Сохранение истории общения
• Клиент под Windows

Изначально к стартовой линии подошли около 30 различных сервисов чатов для консультирования клиентов. Некоторые из них мы рассмотрим подробно, а по некоторым пробежимся лишь вскользь.

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

Итак, представим себе, что есть два программиста. Один из них умный, прочёл кучу статей на Хабре, знает каталог GoF наизусть, а Фаулера — в лицо. Другой же делает всё просто. Первого будут звать, например, Борис Н., а второго — Маркус П. Само собой, имена вымышленные, и все совпадения с реальными людьми и программистами случайны.

Итак, к ним обоим приходит проектный менеджер (если в вашей вселенной PM не ходит сам к программистам, назовите его как-то иначе, например BA или lead, сути это не изменит) и говорит:
— Ребята, нам нужно, чтобы делался хлеб.

Именно так, «делался», без уточнения способа производства.

Как же поступят наши программисты?

Кроссворд, подсказки в котором — регулярные выражения.

Оригинал в PDF.

Автор — не я! Это часть MIT Mistery Hunt 2013.

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

Идея распознавать людей по радужной оболочке появилась в далёком 1987 у доктора Джона Доугмана и была запатентована в 1989. Примерно тогда же появился прототип. На тот момент это была вершина технологии. Пару лет до первой коммерческой цифровой камеры + алгоритм обработки изображения на компьютерах уровня i386/i486. До сих пор я не представляю, как можно получать на таком оборудовании стабильный результат.
Задачка о которой я хочу рассказать появилась на свет где-то в 2006-2009 годах. Процессоры к этому времени несколько ускорились, появились хорошие камеры, патент 1989 года истёк и системы распознавания по глазам теперь получил право делать каждый. Люди, которые решили сделать клон системы захотели использовать современные технологии и улучшить алгоритм. Самое первое, что бросалось в глаза — старый алгоритм сравнения глаз использовал изображение глаза в близком ИК диапазоне. То, что глаза бывают цветными не учитывалось.

Полгода назад здесь была опубликована статья, которая меня возмутила. В комментариях я обещал, что напишу свою версию. С другой стороны мне не хотелось этого делать, так как получу закономерные вопросы: «А ты собственно кто такой?». Не люблю подписываться в интернет-постах, у меня портилось мнение о многих писателях после того, как читал их жж-блог. Читаешь книгу, думаешь: «Классный чувак!», почитаешь блог, мнение меняется: «Что за кретин?». Такая разница возникает из-за того, что книга проходит пост-обработку, много раз редактируется.
Данная статья переписывалась несколько раз, в этом варианте, считаю, что она получилась наиболее взвешенной. Статья вполне подходит для хабрахабр, так как от людей технической направленности выходило немало известных произведений. И кому-то из вас захочется написать свою историю.

Сегодня команда Twitter представила общественности собственный фреймворк. Flight — это легкий компонентный javascript фреймворк, каждый компонент которого описывает поведение элементов на странице. На самом деле, вы скорее всего уже видели Flight в действии, потому что Twitter использует его для своих приложений. Вы можете посмотреть демонстрацию возможностей фреймворка в виде простейшего почтового клиента (код на github).

Новый фреймворк использует ES5-Shim для поддержки ES5 в старых браузерах и jQuery для манипуляции DOM. Также потребуется одна из реализаций AMD, например require.js или loadrunner.

Правильное использование CSS свойства float может стать непростой задачей даже для опытного верстальщика. В этой статье собраны варианты применения float, а также некоторые ошибки, с наглядными примерами.

Полгода назад я делал перевод статьи на Хабре Подробно о свойстве float. В этот раз взглянем на него немного под другим углом. При разработке сайта мы часто используем float'ы для позиционирования некоторых блоков на странице, например сайдабара. Но так ли это необходимо?

Float не всегда удобен: например при верстке сетки с изображением. Иногда уместно применять inline-block, который имитирует поведение float'а.

Что такое inline-block?

Обычная структура блочного элемента:



Inline-block — это значение, которые можно назначить свойству display. Название происходит от некоторых характеристик как строчного, так и блочного элементов.

Скажите, вы бы хотели иметь друга? Любого человека или другое существо, которое будет вашим самым лучшим другом, обладая той внешностью, которая вам нравится, и тем характером который вам необходим, которое не надо будет делить с ее или его друзьями, родителями, собачкой, игрушками или учебой.
А секретаря, который всегда с вами, имеет прямой доступ к вашей памяти, напомнит, подскажет, и подаст нужную идею, напарника для мозгового штурма?
Тогда добро пожаловать под кат.



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

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



Focal Point — это HTML/CSS фреймворк, представленный на GitHub, автор — Adam Bradley. Один из простых способов работы с адаптивными изображениями — это обрезание сторон, которые не помещаются на экране. Однако при этом можно случайно обрезать полезное пространство изображения. С помощью Focal Point можно указать важные точки фокуса картинки, которые не будут обрезаны:

Привет, Хабр!

К нам в Alconost часто приходят клиенты и говорят “Мне нужна справочная система для моей программы. Сделайте мне ПэДээФку”. Мы создаем руководство пользователя, оформляем PDF, а потом оказывается, что на самом деле нужна была контекстная справка с индексом и поиском.

Именно поэтому хотелось бы поделиться со всеми простыми схемами и описанием видов и форматов справки.

В последнее время появилось довольно много инструментов для создания сайтов в духе Metro UI. К сожалению, лично у меня, использовать что-то из этого в реальных проектах не получилось: либо страдает качество и приходится вставлять «костыли», либо с качеством все нормально, но нет стилей для нужных компонентов приложения (например, нигде нет стилей для datepicker-а).



Я попробовал написать свое с блэкджеком и шлюхами. Сначала это был просто набор стилей для компонентов, которые были нужны мне в первую очередь. Cейчас все становится похожим на довольно большой CSS framework.

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

Стили в архиве и документация лежат здесь: milk.ecm7.ru, есть .LESS и CSS версии.

Вчера на почту «упало» письмо от программиста (mihinn) — о цикле жизни графики после ее нарезки и про ее «удобоваримость» для программиста — мне оно показалось интересным, возможно кто-то тоже сделает какие-то выводы с него и обнаружит такую же проблему у себя (а еще было бы замечательно, если бы кто-то поделился опытом, как это организовано у вас).

Ответ от дизайнеров — тут.

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

Есть такая библиотека knockout.js. Она отличается от прочих хорошим туториалом для начинающих и кучей понятных рабочих примеров. Еще там стройная MVVM модель, декларативные связи и так далее.

Короче, если вы, как и я, поиграли с этой библиотекой, понаписали красивых формочек, и вам это понравилось, то все это дело захотелось применить на реальном проекте. И тут проблема — в реальном проекте формочек больше чем одна. А раз такие инструменты, то хочется single web page application и никак иначе. А делать один контроллер и все темплейты заверстывать на одну страницу тоже тупо и тормозно.

Под катом приведу основу своего сложного приложения. Само оно совсем не сложное, но модульное и допускает расширения, а темплейты и модели подгружаются динамически. Идея была подсмотрена в этой презентации — http://www.knockmeout.net/2012/08/thatconference-2012-session.html, код презентации выложен на github — https://github.com/rniemeyer/SamplePresentation — на базе этого кода будем писать свой.