Здравствуйте! На днях мне выпала задача написать «заглушку» на сайт, который прекратил своё существование. Дизайнерское решение заключается в создании видео на котором изображён старый сайт, напечатанный на листке, плавно поглощающийся офисным утилизатором бумаги. После окончания ролика должна появиться надпись «Старого сайта больше нет. Скоро будет новый.», логотип компании, ссылки на Facebook и Google+, а также контактная информация.



Видео посредством Css размещается на всю ширину или высоту вьюпорта, в зависимости от экрана пользователя, сохраняя свои пропорции. То есть, если у нас видео с разрешением 1280 x 1024, то при ресайзе окна браузера, его разрешение будет меняться пропорционально: 1000 x 800, 600 x 480.

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

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

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

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

Что же это за проблемы?

В поисках утраченного ковчега – часть I

Представим, что вы тертый в боях игрок. Старый. Опытный. Человек, которого трудно удивить. Человек, который многое повидал. Человек, который видел Истоки. Каждая новая игра сопровождается вашим скрипом, — «А вот раньше…», «Помню, были времена…», «Детки, то, что вы считаете новым, не более чем хорошо забытое старое, я это видел в 19..». Предположим также, что вы новый Индиана Джонс своего времени, боец невидимого археологического фронта, который каждый божий день пытается отыскать свой Грааль. Грядущее вас интересует мало, настоящее вызывает скепсис, цель ваших поисков – прошлое. Полагаю, что нам с вами, сегодня, по пути.

Почему прошлое? Потому что оттуда с завидным постоянством приходит то, что есть в настоящем и то, что грядет в будущем. Половина, если не большинство гениальных идей «озаряющих» разработчиков сегодня — уже давно сделанные кем-то игры. Все что нужно в этом случае – отряхнуть находку, заново раскрасить и сделать казуальный контроллер, добавив пару новшеств.
Не секрет, что во многих старых играх игроку нашего времени разобраться сложно, да и старый игрок частенько буксует. Общепринятые решения по части удобства использования интерфейсов, привычные схемы ставшие нормой сегодняшнего дня тогда не были реализованы даже в зачатках. Каждая новая игра была, по сути, полностью самостоятельным миром, зачастую без оглядки на других разработчиков. Это было великое время экспериментов, недооцененных потенциалов, игр которые многие до сих пор не могут воссоздать и до сих пор не могут переосмыслить.

Я часто гуляю с лопаткой по улицам и подземкам давно забытых городов. Именно с этой целью. Поиск хорошо забытого старого. Новое, безусловно, удивляет, но что может сравниться с покрытой пылью бутылкой хорошего старого скотча? Расскажу вам. Как археолог археологу.

На глубине временных пластов периода 1999 года моя лопата со звоном ударилась о неизвестный объект. По моим выкладкам в этом секторе не должно было находиться крупных и не изученных игр. Обкопав объект по периметру и сдув пыль там, где она мешала разглядеть символы я увидел… чудо. Это покажется невозможным, но в наш короткий игровой век мы до сих продолжаем находить неизвестные широкой публике работы древних зодчих. Можете представить мое удивление, изумление и благоговейный восторг, когда я увидел игру, созданную в стилистике…


После успешного релиза PHP-фреймворка Phalcon 1.0, команда разработчиков продолжает работать над его развитием. В этой статья я хочу осветить наиболее интересные фичи, представленные в версии 1.1.0 BETA

• Пагинация результатов конструктора запросов (QueryBuilder)
• Сервер очередей Beanstalkd
• Шифрование
• Assets Management
• Режим Exception для ORM-валидаторов
• Роутинг по имени хоста
• Использование контроллеров в приложениях Mvc\Micro
• Послесловие
• Помогите сообществу, проголосовав за поддержку Phalcon в cPanel

Twitter Bootstrap становится всё популярнее и популярнее, многие используют его в своих проектах, думаю еще больше людей используют для прототипирования интерфейсов. Я не исключение. И вот сегодня утром наткнулся на интересный сервис — LayoutIt. По сути LayoutIt — это онлайн редактор для создания интерфейсов с использованием Bootstrap. Редактор представляет собой Drag & Drop интерфейс.

В своих проектах часто использую bootstrap. Он великолепен. И для того чтобы сделать его еще более универсальным у меня появилась мысль сделать сервис для его кастомизации. Прежде я конечно поискал аналоги и был приятно удивлен обилием ресурсов использующих bootstrap. Есть и сборники готовых тем. Нашел сервис который позволяет серьезно изменить внешность bootstrap'а. Но он немного перегружен деталями и для создания удобного варианта темы у меня должны быть заготовлены готовые цветовые палитры. Прикольно, но не очень юзабельно как по мне. Вот и решил я состряпать свой сервис с удобным и простым интерфейсом, который отдавал бы пользователю архив последней версии bootstrap с сохраненной цветовой схемой.

Текстовый редактор bootstrap-wysiwyg — это всего 1.5 Кб в минифицированном и сжатом виде и чуть больше 6 Кб исходного кода, базовые функции редактирования на основе execCommand, drag-and-drop для вставки изображений, поддержка стандартных горячих клавиш и ничего лишнего. Редактор работает в современных браузерах (Chrome 26, Firefox 19, Safari 6) и на мобильных платформах (IOS 6 iPad/iPhone, Android 4.1.1 Chrome). Зависимости — jQuery, jQuery HotKeys и Bootstrap.

Сейчас стало модным трендом использовать twitter bootstrap и всевозможные форки с различными темами. Есть даже уже биржи с готовыми шаблонами для сайтов на основе бустрапа. Хипсторы вовсю купаются в тренде закосов под старину. Так вот специально для хипстеров предлагается олдскульная типографика со всеми вытекающими. Вам надоел вебдваноль? Тогда этот форк

divshot.github.io/geo-bootstrap
(ссылка на гитхаб github.com/divshot/geo-bootstrap)

для вас! Превосходная типографика, куча анимации! Долой статичный вэб!

QR-code, уже давно распространен повсеместно, во всех сферах человеческой жизни. Вроде такая популярная вещь, а нормальной библиотеки (Open Source) на PHP — нет. Товарища deltalab, очень напрягла эта проблема и он решил переписать имеющиеся в наличии С библиотеки ibqrencode от Kentaro Fukuchi, на более привычный ему язык PHP.

Мне очень нравятся выпадающие меню из Bootstrap. Благодаря простой и понятной семантике их легко и приятно использовать при верстке.

Но для полного счастья мне не хватало некоторой функциональности.

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

<a href='http://google.com/' data-intro='Hello step one!' data-step='1'></a>

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

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

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

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

• Вступление
• Как сделать простейший редактор самому, причем не будет никакой теории, только практика. Предупреждаю, для многих эта часть покажется простой и очевидной, так как текст ориентирован, можно сказать, на себя, в прошлом (нет, я не путешествую во времени :));
• Описание работы очень легкого редактора «Suit Up» (оригинальный объем кода: 5.97KB (1.87KB gzipped), минимизированный: 3.35KB (1.37KB gzipped) на момент написания статьи, не считая спрайта и стилей).

UPD Критика

Вступление

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

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

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

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

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

<div contenteditable></div>

Редактор готов!

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

Одним из крутейший новшеств в php 5.4 является встроенный сервер, созданный специально для разработки и тестирования. Теперь вы можете писать и тестировать свой код не имея полноценного веб-сервера — просто запустите встроенный сервер, протестируйте свой код, и выключите его, когда закончите.
Сервер, так же, предоставляет возможность и для творческого использования. Например, вы можете распространять портативное web-приложение на CD или USB, или даже как десктопное приложение, созданное на PHP без использования GTK или других графических библиотек.

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



Демонстрация стилей / Скачать исходники

    - Google выше ранжирует сайты, которые загружаются быстрее.
    - Если на eBay или Amazone увеличить время загрузки страниц на 9% они теряют 1% прибыли.
    - Сделать свой сайт быстрее, чтобы сэкономить на клиентском трафике и на числе обращений к серверу.

.htaccess — наш герой

Профессионалы знают, что такое htaccess.
Тем кто собираются уйти с народ.ру на php-хостинг только предстоит узнать, что это такое.
Те кто только что установил свои первые jooml'у или wordpress срочно должны узнать о нашем герое — htaccess

Зачем нам .htaccess ?

Представьте, что вы купили себе хостинг и кажется, почти обрели счастье. Но однажды (а может быть дважды, а может и трижды) ваш сайт перестает отвечать на запросы. Начинает медленно грузиться и вообще вести себя странно. А виртуальный хостинг это такая хитрая штука, что помимо вашего сайта на этом сервере находится ещё два десятка других сайтов. Все они разные по мощности, организованности и трафику. И когда ваш сосед по случайности, а может и умыслу запускает на своем хостинге сложные или избыточные в алгоритмах скрипты, это отзывается и на вас.

Или другой пример. Скажем ваш ресурс начинает набирать популярность, но переезжать на выделенный сервер ещё рано, а мощностей VPS уже не хватает. Вас очень может выручить htaccess.

А ещё htaccess может решить некоторые вопросы с безопасностью вашего сайта.

А ещё…

Признавайтесь, кто в детстве часами напролёт просиживал за игрой в «Денди» или «Сегу»? А кто по мере прохождения игры записывал пароли на бумажку или в специально заведённую тетрадку? Если это вы, и раз уж вы читаете этот сайт, то у вас наверняка хоть раз возникал вопрос: «а как же это работает?»

Я постараюсь объяснить принципы работы классических механизмов генерации паролей на примерах из игр моего детства. Заранее прошу меня извинить за то, что все примеры будут с платформы NES (да, та, которая «Денди»), хотя тематика только ею не ограничивается. Так уж получилось, что не нашёл в себе достаточно мотивации, чтобы провести немного больше исследований и написать немного больше текста.

С развитием CSS3, возможности верстки растут экспоненциально. Всё больше функционала можно реализовать на «чистом» CSS. В этом посте показан процесс разработки интерактивного циклического слайдера без единой строчки JavaScript. Автоматическая ротация, выбор любого слайда с плавным переходом – на «чистом» CSS. Пример в действии