Веб-разработка *

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



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

Асинхронные программы чертовски неудобно писать. Настолько неудобно, что даже в node.js, заявленном как «у нас все правильное-асинхронное», понадобавляли таки синхронных аналогов асинхронных функций. Что уж говорить про питоновский синтаксис, не дающий объявить лямбду со сколь-либо сложным кодом внутри…

Забавно, что красивое решение проблемы не требует ничего экстраординарного, но почему-то до сих пор не реализовано.

В вашей системе время играет важную роль? Ваши пользователи/компоненты распределены по территории всего земного шара, или хотя бы нашей необъятной родины? Значит, вам нужны часовые пояса. Что ж, это просто. Самое сложное, что вам придется сделать — не запутаться. Об этом мы с вами и поговорим. Для начала вам нужно научиться правильно думать. Думая правильно, все остальное будет для вас либо самоочевидным, либо достаточно простым.

Начнем с часов. Все мы привыкли определять время, глядя на часы на стене. При работе с часовыми поясами такое время называется Wall clock time. В принципе, ничего плохого в нем нет, только в разных местах земного шара в один и тот же момент времени часы показывают разное время. Если задаться целью, можно придумать алгоритм перевода wall clock time одного часового пояса в wall clock time другого. Обычно надо прибавить/отнять разницу в часах между часовыми поясами, кроме (внимание) моментов перехода на летнее/зимнее время. Вот когда начинается переход, вычисления становятся по-настоящему сложными.

Нам же нужно что-то простое и пуленепробиваемое, как… целое число.

На сайте новаторского магазина thinkgeek.com столкнулся с любопытным эффектом — переливающимся фоном (чтобы увидеть конфетку нужно поработать колёсиком прокрутки). Сделан он очень просто, и все же подобная техника попалась мне впервые.

Команда Mix Online запускает конкурс для веб-разработчиков под названием 10K Apart.

По условиям конкурса, вы должны разработать веб-сайтприложение общим размером в 10К, в который входят все ресурсы: разметка, скрипты, стили, картинки и прочее. Однако, вы можете использовать одну из следующих библиотек: jQuery, Prototype и Typekit с CDN и их размер не будет засчитываться в общий размер сайтаприложения.

Работа должна представлять собой совместимый со стандартами HTML5 веб-сайтприложение, которое будет работать в IE9 Preview 3, Firefox и браузерах на базе Webkit.

Среди жюри конкурса известные люди: Jeffrey Zeldman, Eric Meyer, Nicole Sullivan, Whitney Hess, Jeremy Keith.

Победитель получит $3000, регистрацию на мероприятие An Event Apart в следующем году и книгу HTML5 for Web Designers.

На сайте конкурса представлено уже три работы.

Интерес к холсту (<canvas>), а равно и к мобильным приложениям, приводит к возрождению прежней художественной школы восьмибитных изображений. Joe Huckaby из Effect Games поигрался с зацикливанием цвета, что привело к несколько ошеломляющим результатам.

Помнит ли кто-нибудь зацикливание цвета в девяностых годах? Эта технология часто использовалась восьмибитными видеоиграми той эпохи для достижения интересных зрелищных эффектов методом зацикленного сдвига цветовой палитры. Тогда видеокарты могли показывать только 256 цветов за раз, так что использовалась палитра подобранных цветов. Но программист мог переменять эту палитру по своему усмотрению, и цвета на экране тотчас переменялись, подстраиваясь под неё. Это происходило быстро, и не требовало буквально никакой дополнительной памяти.

Здесь также происходит искусная оптимизация — вместо того, чтобы очищать и перерисовывать всю сцену в каждом кадре, Джо обновляет только те пикселы, которые изменяются:

Чтобы достигнуть во браузере быстрой смены кадров, мне пришлось устроить слегка безумную оптимизацию движка. Отображение картинки 640×480 с индексированным цветом на тридцатидвухбитном RGB-холсте означало бы обход и прорисовку 307200 пикселов в каждом кадре джаваскриптом. Это обход обширного массива, так что некоторые браузеры просто не в состоянии справиться с этим. Я преодолел их медлительность предварительной обработкою изображений, когда они впервые загружаются, и сбором тех пикселов, которые ссылаются на анимируемые цвета (то есть на цвета, входящие в зацикливаемые подмножества палитры). Координаты этих пикселов хранятся в отдельном (меньшем) массиве, и оттого одни только изменяемые пикселы обновляются на экране. Этот финт оптимизации сработал настолько превосходно, что анимация действительно крутится на весьма неплохой скорости в моём iPhone 3GS и iPad!

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

Что же из себя представляют печеньки от Google?

Это история личного опыта, опыта поиска бага в чужом, старом, неподдерживаемом коде.
Все начиналось как обычно, передо мной стояла простая на первый взгляд задача: сделать упаковку файлов в текущей папке в ZIP архив с определенным паролем на C++/Qt, казалось бы что может быть проще?
Естественно, первый помощник это Google, он и подсказал что существует две Qt библиотеки для работы с ZIP архивами:
QuaZIP и OSDab ZIP, помимо всего, сам Qt поддерживает методы qCompress и qDecompress для упаковки.
Мною было выяснено что методы мне мало подходят, потому что они умеют лишь жать поток, все заголовки и шифрование на совести разработчика. Этот путь был слишком долог и от него я отказался сразу и обратил свое внимание на библиотеки.
OSDaB ZIP пришлось отбросить сразу, не смотря на то, что это отличная библиотека, ее код распространяется только под лицензией GPL, мне же нужно было встроить функционал в проприетарное приложение. К счастью QuaZIP оказался с двумя лицензиями GPL и LGPL. На нем я и остановился. Особо не вникая в его устройство, я набросал простейший класс для работы ним и начал тестировать.

Введение

Хочу рассказать об одной интересной задаче, которая возникла передо мной и моим коллегой в университете. Хоть сейчас и лето, но жизнь там не угасает ни на минуту. Все суетятся, обрабатывают документы, подсчитывают абитуриентов, если все обобщать – сезон поступления в ВУЗы. Учусь я на техническом факультете университета, причем, учусь неплохо, поэтому нам предложили написание электронной очереди для поступления абитуриентов. Не долго думая, я и мой коллега (и по группе и по работе) согласились. Причиной не желания воспользоваться уже какими-то готовыми продуктами для университета стала заоблачная цена данных разработок, которая составляла порядка 300т.р. Может и не много, но для нашего города цена высокая, наверное, поэтому и решили привлечь студентов своего университета, ко всему прочему это ещё и неплохой опыт работы в данной отрасли.

Программисты с Etsy.com поделились опытом, как им удалось эффективно решить задачу по пакетному ресайзингу фотографий с 1,5 МБ до 3 КБ (после смены дизайна оказалось, что старые превью-окошки не вписываются в новые шаблоны страниц). Задача не такая банальная, как кажется. Дело в том, что Etsy.com — крупный интернет-аукцион, и количество изображений различных товаров превышает 135 млн штук.

Ради шутки они прикинули, сколько займёт эта работа вручную в «Фотошопе». Если на каждую фотографию отдать по 40 секунд, то выходит 170 лет непрерывного труда. Затем они начали считать, можно ли отдать пакет в облако EC2 и во сколько это встанет. Посмотрев на получившуюся сумму, программисты решили поискать другой способ.

В итоге им удалось завершить обработку 135 млн фотографий всего за 9 дней, задействуя четыре 16-ядерных сервера. Средняя скорость обработки составила 180 изображений в секунду.

Начиная разработчиком на тогда еще сверх продвинутом IDE от компании Borland, bc++ 3.11, работающая в операционной системе DOS, в которой тогда единственное, чего не хватало — так это поддержки dos4gw (который вышел, если мне не изменяет память, парой годами позже), я любил эту IDE и мне казалось, что на ней можно сделать все что угодно. Была куча драйверов, которые писались энтузиастами, меняющие шрифты консоли, кодировку, была целая система работы с памятью… Прорывом были отгружаемые динамически библиотеки на диск, созданные чтобы вмесить все в память. Сегменты (ну, современные программисты, что такое сегменты оперативной памяти, и откуда 640К?), нижняя память, верхняя память… 640 килобайт… Люди придумывали все новые задачи компьютерам, а гении своего дела эти компьютеры придумывали. И ведь на самом-то деле это не так давно было… Это было почти вчера.

С завидной периодичностью в блоге разработчиков браузера Опера появляются сообщения, что Опера не может распарсить ту или иную страницу и пользователь видит примерно такую ошибку:



Эффект можно посмотреть по любой из этих ссылок. При этом, в других популярных браузерах страницы отображаются нормально, так же как и в Опере, если попросить распарсить документ как HTML, а не как XML (ссылка «Reparse document as HTML»).

Собственно, сам код

В последнее время Вы, наверное, много слышали о том, что Flash является умирающей технологией и о том, как она будет вскоре заменена на HTML5. Лично я считаю, что HTML5 будет постепенно заменять Flash лишь для некоторых вещей, но Flash всегда будет иметь место, особенно при разработке сложных игр и насыщенных интернет-приложений. Если вы еще не видите, что можно сделать с помощью HTML5, я ограничусь десятью примерами, чтобы показать некоторые из возможностей HTML5.



Так что же вы думаете – HTML5 заменит Flash?

Наткнулся на Stackoverflow.com на интересный топик с вопросом о новом в программистском жаргоне. Предлагаю здесь подборку наиболее интересных выражений.

Египетские операторные скобки

if (a == b) {<br>  printf("hello");<br>}<br><br>

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

Я думаю некоторые из веб-разработчиков сталкивались с задачей создания сайтов и сервисов под мобильные платформы. И проблема возникает в том момент, когда надо протестировать свое творение. И если найти тот или иной девайс все же не проблема, то протестировать на максимальном количеством устройств достаточно сложно. И тут на помощь приходят ОНИ — эмуляторы. В данном посте я рассмотрю вопросы установки и запуска эмуляторов следующих мобильных устройств, с целью запуска на них нужного сервиса: Win Mobile, iPhone, BlackBerry, Android, Symbian^3.

node.js — серверный асинхронный Javascript, превосходный инструмент для создания серверной части COMET приложений, в частности, для игрушек, чатов, и других высоконагруженных проектов, использующий синтаксис Javascript, прекомпилируемый в машинный код, работающий на скорости, сравнимой с кодом на C++, очень быстрый, способный держать 10 — 12 тысяч подключений, и не создающий отдельного процесса/не интерпретирующий себя заново/не запускающий процесс при каждом новом клиенте. Использует в качестве основы V8 — движок Javascript от Google. Удобные возможности, можно установить значение переменной при одном посетителе, и считать это значение при ответе другому.
Обращаю внимание на то, что если вы не программировали, например, на Python или Ruby, только на PHP, не обходите его стороной, это не ещё один незнакомый язык. И в этом его преимущество — Javascript — знакомый язык, особенно для тех, кто программировал на PHP+Javascript, но PHP не позволял очень многих вещей, особенно в связке с Apache, например, аплоад файлов с полосой загрузки (без Flash), возможность низкоуровневого управления сетью (возможность написать, например, клиента или сервер Mysql или прокси-сервер вроде nginx).
О гибкости языка говорит тот факт, что расширения для работы с MySQL, например, написаны на самом Javascript.
Я планировал написать статью с описанием этой замечательной системы, с примерами, но на момент чтения читателю хорошо бы иметь под рукой установленную версию node.js. Поэтому этот пост о том, как установить node.js, в том числе и на Windows, что актуально в связи с недавним появлением порта под cygwin. (Да, есть информация о том, где скачать node.exe)

Сегодня я вкратце расскажу о технологии WebSocket, о предпосылках к её появлению, о текущих проблемах и об их решениях.

Совсем недавно натолкнулся на один занимательный CSS баг/фичу, решил поделиться, возможно кому пригодится.
Нужно было на сайте создать выбор городов из списка, стандартный список не подошел по эстетическим соображениям, результат должен был выглядить как «ссылка» при клике на которой выпадает список доступных городов, задача банальна, но тут случайно наткнулся на занимательное поведение браузеров, причем как оказалось у всех одинаковое.