Джед Шмидт, Томас Фухс и Дастин Диаз — достаточно известные в JavaScript-коммьюнити ребята в последнее время нашли себе новую развлекуху — писать полезные штуки размером не больше одного твита, то есть 140 байт. Даже домен зарегали — 140byt.es, куда приглашаются все желающие попробовать свои силы в написании супер-компактных функций.

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

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

Если вы создаете графический редактор на canvas, вам наверняка захочется иметь в арсенале мягкую кисть. Так вот, задача эта довольно нетривиальная и я постараюсь осветить основные трудности и подсказать пути решения.
(на картинке пример работы мягкой кисти в GIMP)
Перед прочтением рекомендую ознакомиться с предыдущей статьей.

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

Среди вопросов на счёт Canvas чаще всего звучали вопросы по внутренностям фреймворков — как понять, что мышка находится над элементом, как это реализовано в фреймворках. В топике мы реализуем подобный Canvas фреймворк на базе AtomJS.

Несколько дней назад я предложил позадавать на Хабре интересующие вопросы по Canvas. Под Хабракатом — ответы на 27 вопросов.

Всем привет. Данная статья посвящается методологии Разработки через тестирование (TDD) в применении c JavaScript.
Напишу лишь вкратце о методологии TDD, более подробную информацию можно почерпнуть из ссылки выше.

Разработка через тестирование подразумевает, что перед написанием кода необходимо:

• создать тест, который будет тестировать несуществующий код, тест соответственно не пройдет
• написать код и убедиться, что тест прошел
• почистить код
• повторить

Продолжаем неделю canvas на хабре.
Графические редакторы на флеше/сильверлайте в интернете не редкость. На canvas их намного меньше, но есть и довольно интересные. Вот пара примеров:

• mrdoob.com/projects/harmony
• muro.deviantart.com

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

День добрый. В этом топике я расскажу, как сделать ping-pong при помощи LibCanvas. Я значительно упростил её, оставив только самую важную часть, так как цель топика не создать игру ping-pong, а объяснить основы LibCanvas.

Итак, в топике пошаговая инструкция, как создать ping-pong при помощи LibCanvas (без оптимизаций).

Введение

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

Когда на конференции Google I/O показали Angry Birds на HTML5, в потоке радости мало кто обратил внимание, что игра на самом деле требует наличия Flash. Спрашивается, почему? Ведь игра написана на Google Web Toolkit (GWT) и для обработки звука использует библиотеку GWT-voices.

Появились размышления, что таким образом разработчик постарался блокировать игру для пользователей iOS (они покупают её за деньги в App Store). Из лагеря Microsoft высказались в том смысле, что Google умышленно оптимизировал игру под свой «глючный» и «нестандартный» Chrome, тогда как IE гораздо лучше поддерживает <Audio> и не экспериментирует с функциями, которые ещё не утверждены.

На самом деле причины немного другие, и главная из них в том, что HTML5 <Audio> пока что не подходит для использования в играх или профессиональных аудиоприложениях.

За последние несколько месяцев несколько человек спросили меня, как работает TinEye и как в принципе работает поиск похожих картинок.

По правде говоря, я не знаю, как работает поисковик TinEye. Он не раскрывает деталей используемого алгоритма(-ов). Но глядя на поисковую выдачу, я могу сделать вывод о работе какой-то формы перцептивного хэш-алгоритма.

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

У элемента input в HTML 5 появился атрибут multiple, с помощью которого мы можем выбрать для загрузки несколько файлов. Этот атрибут принимает только одно значение «multiple», в живую будет выглядеть так:

<input type="file" multiple="multiple" name="files[]" />

Обратите внимание на name, мы явно в нем указали, что это массив.

Сразу появляется вопрос, какой браузер это новшество не понимает, ответ легко предсказуем, это семейство Internet Explorer. Начиная с 9 версии и ниже, они не поддерживают этот функционал и просто проигнорируют атрибут, искренне надеюсь что в финальной 10 версии они это поправят.
Кроме того что, мы дали пользователям загрузить сразу много файлов, мы должны позаботиться о них, и дать им возможность загрузит именно те файлы которые нам необходимы. И тут на помощь приходит еще один новый атрибут accept. Который принимает "MIME Media Types".

<input type="file" multiple="multiple" name="files[]" accept="image" />

Статья написана в 2009 году, и с тех пор многое изменилось, в том числе появились некоторые альтернативные шрифты для программирования, например, Anonymous Pro.

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

Я выкладываю список из десяти моноширинных шрифтов, готовых к использованию. Некоторые из них идут в комплекте с современными операционными системами, но большинство можно бесплатно скачать из интернета. Отдельные, в том числе Consolas, являются частью коммерческого ПО.

Взаимодействие частей приложения друг с другом — важная часть архитектуры любой программы.
И существует немало паттернов для их реализации. Я бы хотел на примере веб-приложения показать применение одного из них, а именно — Event-driven модели.
Она хорошо известна любому frontend-разработчику — всякий раз, работая с событиями DOM, вы используете эту модель. Давайте попробуем построить на ней не маленькое веб-приложение — файловый менеджер.

Иногда возникает необходимость написать какой-то простенький TCP либо UDP сервер. Например, сейчас у меня вполне успешно в production трудится собственная реализация DHCP (существующие не подходят из-за специфики). Обычно это делается просто — один цикл, слушаем сокет — и вуаля! Но не всегда «тупой» подход оправдан (нужно что-то более сложное — работа в несколько потоков, например), а использование тяжелой артиллерии слишком затратно.

Интересно? Добро пожаловать под кат.

Введение

jQuery UI больше всего известен как набор готовых виджетов. Главное их преимущество, на мой взгляд, — консистентное API: каждый виджет управляется одинаково. Второе их преимущество — они хранят свое состояние: если повторно навесить виджет на элемент, то результатом будет уже существующий инстанс виджета.
Но jQuery UI — это не только набор окошечек и табов (далеко не всеми любимых). Это еще целая инфраструктура для создания своих виджетов: с удобным консистентным API, с хранением состояния и с возможностью наследования. Как ни странно, это для многих новость, в результате чего и появилась эта статья — так же, как это было новостью для меня всего несколько месяцев назад.

В HTML5 есть замечательный атрибут — placeholder (текст-подсказка для элементов ввода). Задается он следующим образом:

<input type=«text» placeholder=«type here some text» />

Обычно этот текст отображается серым цветом, но допустим у нас есть необходимость стилизовать этот текст с помощью CSS.

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

Спрайтовая анимация — одна из тех вещей, которые при всей своей примитивности успешно работают и применяются в компьютерной графике и играх уже больше четверти века. Даже в трехмерных играх есть спрайты — например, билборды взрывов. Во многих браузерных и флеш-играх применяют именно спрайтовую анимацию, так как она очень проста и не требует высокой производительности — просто переключай кадры и все! А с появлением анимации в CSS 3 стало возможным использовать спрайты на своих страницах без яваскриптов.