Возможно, вам уже попадался на глаза этот приём. Это поле ввода, которое выглядит так, как будто в нем есть текстовая подсказка (placeholder), но при начале набора текста она не исчезает, а отодвигается в сторону. Мне нравится эта идея. Брэд Фрост написал очень хорошую статью об этом приёме, подробно рассмотрев все «за» и «против».

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

Вот так выглядит форма на nest.com:

Вступление

В этой статье я хочу поделиться с уважаемым хабраобществом своим опытом анализа и модификации обфусцированной .NET сборки на примере COMET-библиотеки PokeIn.



Несколько дней назад я заинтересовался COMET решениями для ASP.NET и нашел несколько интересных библиотек, среди которых некогда бывшая бесплатной PokeIn. Очевидно она пользовалась некоторой популярностью, так как авторы перевели ее из разряда open source в платную. На сайте бибилиотеки есть возможность скачать бесплатную версию с некоторыми ограничениями, среди которых, пожалуй, самое важное — это ограничение в 10 одновременных соединений. С ним мы и будем бороться.

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

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

Итак, условия задачи:

1. Интерфейс должен быть максимально приближен к интерфейсу от Google (т.к. до этого использовали его)
2. Нормальная реализация RFC 2445, его части касательно RRULE (паттернов повторения)
3. Быстрая скорость просчета дат событий (в данном случае рейсов) и их рендер в браузере
4. Максимальное использование существующих библиотек для уменьшения потраченного времени .

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

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

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

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

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

Быстрое изменение состояния посреди анимации

Обычно анимации используются для того, чтобы плавно менять свойства элементов со временем. Однако изменения могут также быть практически мгновенными. Для этого надо задать два ключевых кадра с очень маленьким интервалом, например в 0.001%:

@keyframes toggleOpacity {
  50% { opacity: 1; } /* Turn off */
  50.001% { opacity: 0.4; }

  /* Keep off state for a short period */

  52.999% { opacity: 0.4; } /* Turn back on */
  53% { opacity: 1; }
}

Вот как я использовал этот приём для имитации мигающей неоновой вывески с помощью прозрачности и свойства text-shadow:

Внимание!
Более свежие и прогрессивные материалы по MVVM паттерну представлены в статье Context Model Pattern via Aero Framework и подробно разобраны в следующем цикле статей

Предисловие

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

К делу

Разработчикам WPF, Silverlight и WinPhone-приложений хорошо знаком паттерн проектирования MVVM (Model — View — ViewModel). Однако если дополнительно применить к нему ещё немного фантазии, то может получиться что-то более интересное, и немного даже, осмелюсь заверить, революционное.

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

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

Проблема

Начиная работу над очередным сайтом понадобился datepicker. Самый известный такой datepicker — в jQuery UI, но так как jQuery UI в проекте не использовался — тянуть даже его часть не хотелось, принялся за поиски достойной альтернативы.

Требования следующие:

• Выбор даты, нескольких дат, интервала
• Простота настройки внешнего вида
• Желательно без каких-либо зависимостей кроме jQuery

Требования вполне логичные, ничего сверх естественного.
Каково было мое удивление, когда просмотрев десятка два плагинов я не нашел подходящего.

Для любопытных — сразу демо того, что получилось в результате.

Для загрузки информации о торговых точках в наш логистический SaaS-сервис «Муравьиная логистика» из Excel я решил использовать web-браузер. Обычно проще загрузить файл на сервер и с помощью любой библиотеки залить в БД. Но мне было интересно загрузить его построчно для контроля целостности каждой строки на клиенте, ну и, конечно, опробовать так всеми рекламируемое HTML5 FileAPI и Drag and Drop.

Много лет location.hash был способом в AJAX-приложении заставить работать кнопки «Назад» / «Вперёд» и, например, добавить определенное состояние страницы в избранное и вернуться к нему позже.

Сейчас, когда HTML5 считается нормой, пора обратить свое внимание на History API и забыть про location.hash. HTML5 History API проще для понимания и позволяет сделать URL чуточку красивее (без кракозябры # или #! если вы имеете дело с индексированием ajax приложения).

Пару месяцев назад я стал обладателем весьма интересного смартфона — TCL Idol X S950 (он же Alcatel One Touch 6040D). На сегодня имеющий одно из лучших соотношение цена/качество. Все характеристики перечислять не буду — Google их знает. Остановлюсь лишь на 5" — FullHD(Sharp) — 140.4 x 67.5 x 6.99 — 120 гр.

И все бы было хорошо, но вот заряжать его приходилось все так-же, по старинке, каждодневным изнашиванием маленького microUSB разъема.
Провода уже давно надоели, а к стандартизации беспроводных ЗУ производители все никак не доходили. А здесь в пользовании появился Nexus 7, с возможностью беспроводной зарядки, и оказалось, что наконец-то и стандартизация подоспела. Вот и было принято решение проапгрейдить свой смартфон такой удобной функцией, как беспроводная зарядка.

Почему NancyFX?

Сейчас, когда набирают популярность single page application, от серверного фреймворка требуется фактически перенаправить запрос пользователя по определенному роуту на какую-то конкретную страничку. К серверной части не предъявляются какие либо особые требования, от нее нужно только перенаправление. При использовании .NET просто глупо становится для таких целей использовать такую махину как ASP.NET MVC, 99% возможностей которой будут не востребованы. Плюс к этому достаточно громоздкая структура проекта MVC, включающего в себя как минимум три папки и большое количество ссылок на библиотеки, при всем при том что от конечного результата Вам требуется только редирект на готовую html страничку.

Как один из вариантов для выхода из сложившейся ситуации это использование фреймворка NancyFX, который является идеальным решением для таких ситуаций( если конечно у Вас на сервере используется .NET). Основные достоинства этого фреймворка состоят в легковесности, простоте( как будет показано ниже), а также в том что он может быть размещен не только на Windows хостинге но и на *unix платформах с MONO.

Для современных веб-приложений стало уже нормой использование AJAX при создании пользовательских интерфейсов. Однако, из-за этого, порой, возникают дополнительные сложности. Часто эти сложности связаны с аутентификацией и процессом обработки таких запросов на клиенте.

Захотелось мне посмотреть, как работает реализация .NET на Linux. Решено было развернуть Ubuntu Server на нашем гипервизоре, установить свежий пакет mono и через nginx запустить ASP.NET MVC4 сайт.

На официальном сайте mono готовый пакет для Ubuntu только 2-х летней давности. С этого момента начались поиски в сети путей осуществления задуманного. Результатом полученного опыта стал скрипт для автоматического развертывания на голой Ubuntu Server 12.04.3 или 13.04 всего необходимого для запуска сайтов ASP.NET MVC4:

• Соберем из исходников и установим mono 3.2.1
• Добавим monoserve скрипт в init.d для автоматического запуска сайтов и управления ими.
• Установим nginx 1.4.1
• Создадим и настроим простой сайт, чтобы проверить работоспособность всей связки.

Сразу под катом находится строчка для автоматического выполнения всей процедуры, описанной в статье.

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

Webflow

С помощью данного сервиса вы сможете сверстать кроссбраузерный отзывчивый макет за 55 минут. Очень красивый и удобный интерфейс. Идеальное решение для веб-дизайнеров, 26 000 из которых уже используют Webflow. Для создания двух проектов сервис бесплатный, а в дальнейшей перспективе вас ждут вполне демократичные цены. Инструмент реально «крутой».

Если Вам GUI для верстки не комильфо сам по себе как для меня, все равно рекомендую зарегистрироваться и экспортировать парочку responsive макетов. А еще есть простой генератор отзывчивого лэйаута и Responsive Patterns.

Parallax.js

Функциональный и простой инструмент для создания параллакс эффекта.

Сколько уже было сломано копий о задачу выравнивания элементов на странице. Предлагаю вашему вниманию перевод отличной статьи с решением этой проблемы от Стефана Шоу (Stephen Shaw) для Smashing Magazine — Absolute Horizontal And Vertical Centering In CSS.

Все мы знали о margin: 0 auto; для горизонтального центрирования, но margin: auto; не работало для вертикального. Это можно легко исправить, просто задав высоту и применив следующие стили:

.Absolute-Center {
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

Я не первый, кто предложил это решение, однако такой подход редко применяется при вертикальном выравнивании. В комментариях к статье How to Center Anything With CSS Simon ссылается на пример jsFiddle, где приводится отличное решение для вертикального центрирования. Вот еще несколько источников на эту тему.

Рассмотрим способ поближе.

По роду моей деятельности, мне часто приходится делать различные небольшие проекты, в основном, это сайты написанные на ASP.NET MVC. В любом современном проекте присутствуют данные, а значит и база данных, а значит с ней нужно как то работать.
Если отбросить все дискуссии про «за и против», то спешу сообщить, что мой выбор пал на Entity Framework Code First. Во время разработки проекта, я уделяю внимание исключительно бизнес-логике и не трачу время на проектирование базы данных и прочие шаблонные действия. Неприятным сюрпризом при использовании такого подхода для меня стало отсутствие возможности «из коробки» у Entity Framework возможности строить индекс по полям, а так же пользоваться удобным и современным механизмом полнотекстового поиска.

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

Для создания минидампов в управляемой среде используются возможности библиотеки DbgHelp.dll. Рассмотрим применение ее функционала на примере готового проекта на WinForms.

Эта подборка полезных сниппетов, использующих 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>