JavaScript *

Сегодня, 25 февраля, вышла версия 1.5.0 языка CoffeeScript. В ней впервые появилась базовая поддержка так называемого «грамотного» или «литературного» программирования (literate programming). Концепцию грамотного программирования придумал Дональд Кнут в 1981 году при разработке системы TeX. В отличие от исходного кода на обычном языке программирования, который включает в себя небольшие вкрапления комментариев, грамотное программирование подразумевает написание текстового документа на естественном языке с вкраплениями кода. Многие существующие системы грамотного программирования вообще не зависят от конкретного машинного языка.

В данной статье будет показано как можно реорганизовывать код написанный в «простом» JQuery стиле в код на Backbone, с использованием представлений, моделей, коллекций и событий. Реорганизация будет постепенной, так чтобы этот процесс дал четкое понимание основных абстракций в Backbone. Статья рассчитана на тех кто использует JQuery и хотел бы познакомится со схемой MVC для клиентского кода.

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

Под катом можно узнать, как в ближайшее время будет работать скролл в 2ГИС Онлайн.

Внезапная история из прошлого! Дело было так. Несмотря на то, что я программист «немного другого толку», обратились ко мне со стандартной просьбой – сделать сайт. Обычно я не берусь за подобные дела, но в этот раз решил немного подзаработать, тем более что это был не сайт-визитка или интернет-магазин, а нормальный сайт с базой некоторых объектов, объекты добавляются-редактируются-удаляются (аля CRUD) и с ними необходимо выполнять некоторые операции. О! подумалось мне, да это идеальная задача для (название фреймворка скрыто) и после всяческой бухгалтерии я незамедлительно приступил к делу.

Собственно дальше ничего интересного и необычного так и не произошло. Спустя какое-то время заказчику был продемонстрирован сайт. И… он остался доволен. Очень неожиданное завершение истории.

Правда, появилась небольшая как бы просьба. Файловый менеджер, тот, с помощью которого на сайт в статью можно вставить картинку, ему не понравился. Вот хотелось ему чтобы всё как-то проще было. А тут и кнопок целых 20! Да и действий много. А нужно-то всего-навсего загрузить картинку на сервер и вставить на страничку. Ну ладно, подумал я, их же целый интернет, да и сам я много раз делал подобные решения. Но один страшен, как чёрт, другой по одному файлу загружает за раз, а вот третий ничё так вроде, но платен. В общем, история завершилась быстро, созданием простенького файлового менеджера с нуля. Но как-то сиделось мне, да и взгрустнулось. И выпил я (сока с мякотью, конечно). И открыл IDE и понеслось…

11.02.2013 г. Хабраюзер omfg опубликовал статью, с которой началось мое знакомство с headtrackr.js.
В этом топике я расскажу, как средствами браузера с поддержкой getUserMedia получить координаты и угол наклона головы пользователя перед монитором, как учесть дефекты изображения, принимаемого с веб-камеры и отфильтровать их, и как использовать данную технологию в своих проектах, задействовав лишь html + JavaScript.

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

Боитесь, что пользователь не сможет прочитать текст на вашем сайте издалека? Не вопрос, посмотрите на это (необходима камера и поддержка WebM).

При помощи WebM и библиотеки для распознования лиц HeadTrackr можно легко сделать дизайн, который будет подстраиваться под пользователя в зависимости от его отдаленности от монитора. Это ли не будущее?

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

Пример, как нарисовать красивые 3D облака используя CSS 3D Transformations

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

Для нетерпеливых: То, что получится в итоге

Вступление

В этой статье, автор попытаеся рассказать и показать как создать красивые 3D облака используя CSS3 Transformations. Автор так-же считает, что иметь базовое понятие о том, как работают эти самые CSS 3 Transformations не будет лишним. Ссылка на туториал здесь

Данный туториал разбит на несколько простых шагов. Каждый шаг основан на коде из предыдущего и содержит ссылки на примеры.

Сделай сам!

• Создаем мир и камеру
• Добавляем объекты в мир
• Добавляем спрайты к облакам
• Магия
• Пролог

Поооеехааали!

Egghead.io — проект, созданный Джоном Линдвистом (John Lindquist), цель которого создание видео курсов. Как утверждает автор, он никогда не был доволен существующими реализациями сайтов с видео уроками. Поэтому главной его задачей стало применение лучших практик для организации и подачи обучающих видео материалов в сети.
Пока сам ресурс находится в стадии доработки и нуждается в качественном дизайне. Но уже сейчас доступен первый курс видео туториалов по AngularJS.
Проект получил множество хороших отзывов сообщества, также был упомянут в рассылке javascript weekly и на странице javascript в google+.

Этот топик будет отличаться от предыдущего топика Классический сапёр на html5 и LibCanvas. Его даже, скорее, можно назвать продолжением. И первая часть содержала пошаговую и детальную инструкцию, как заставить работать игрушку, то в этой части будет пару интересных приёмов, как её «оказуалить».

Играть в изометрический «Сапёр»

---

Если вы новичок в этом деле, то стоит начинать с первой части. Для тех, кто хочет углубляться я рассмотрю следующие темы на примере изометрического сапёра, построеного на базе LibCanvas:

• Изометрическая проекция
• Оптимизация скорости отрисовки через грязный хак
• Спрайтовые анимации
• Draggable слои
• Оптимизация обработчика мыши согласно особенностей приложения

Это позволяет избежать CSRF/XSRF-атак (подделки межсайтовых запросов).

Рассмотрим следующий пример: допустим у Google есть URL вида gmail.com/json?action=inbox, который возвращает 50 первых сообщений вашего почтового ящика в формате JSON. Злоумышленник, чей сайт находятся на другом домене, не может выполнить AJAX запрос, обратившись по данному URL, чтобы получить данные, ввиду same origin policy (правило ограничения домена). Но ничто не мешает злоумышленнику включить вышеуказанный URL на свою страницу с помощью тега .


В этой статье я пошагово расскажу, как писать самый обычный, классический сапёр при помощи Html5 Canvas, AtomJS, и тайлового движка LibCanvas.

А также смотрите продолжение — "Изометрический сапёр на LibCanvas (html5)"

Tweetping — интересный проект от Franck Ernewein, который берет поток твитов из публичного API Twitter и располагает их на карте, попутно считая слова и буквы в твитах, и выводя последнее упоминание и хештег.
Так как берет он твиты из публичного API — на карте показываются лишь около 1% от всех генерируемых твитов, но и этого вполне достаточно для отрисовки красивой карты.

UPD. Сделать из этой штуки классный скринсейвер можно с помощью WebSaver (OS X). Вариант для Windows (сам не пробовал) — здесь.

Как реализовать long polling с помощью Nginx и Javascript в сети достаточно много материала. Но полного руководства я ещё не встречал. То возникают проблемы с компиляцией модуля под Nginx, то в браузере вертится иконка загрузки при long poll запросах. Под катом, полный материал как же все таки это сделать правильно.

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

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

Добрый день, Хабр!

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

1. я — дилетант. Хотя моя жизнь напрямую связана с программированием уже более 10 лет, я отношусь тем людям, которым интересно в IT очень многое от 3D моделирования до робототехники. А потому бывает, не знаю элементарных для специалиста вещей. Иногда это помогает, иногда мешает, но что есть, то есть.
2. если вы хотите в результате «пощупать» технологию в деле, вынужден разочаровать. Все дальнейшее – только изложение мыслей и идей. Создать готовый движок на хорошем уровне у меня не хватит ни времени, ни умений. Впрочем, если кто-то заинтересуется изложенным – я готов всячески содействовать разработке.

Суть идеи.

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

При обычной верстке html – задает структуру контента, а css – управляет и позиционированием и визуальным представлением документа. Эта двойственность css приводит к раздутым файлам стилей, внутри которых бывает сложно ориентироваться. Одни и те же свойства управляют и положением и внешним видом элементов – это вносит путаницу и затрудняет отладку.

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

Это вторая часть серии статей об открытой Javascript canvas библиотеке Fabric.js.

В первой части этой серии, мы ознакомились с самыми базовыми аспектами canvas библиотеки Fabric.js. Мы узнали чем может быть полезна Fabric, рассмотрели её объектную модель и иерархию объектов; увидели что существуют как простые фигуры (прямоугольник, треугольник, круг), так и сложные (SVG). Научились выполнять простые операции над этими объектами.

Ну вот, разобрались с азами, давайте приступать к более интересным вещам!

Гем под названием Turbolinks способен неплохо ускорить ваше приложение, используя JavaScript для обновления контента на странице. Он включен по умолчанию в Rails 4, но я покажу, как можно использовать его уже сейчас в программах, написанных на Rails 3. Также вы узнаете о некоторых подводных камнях.

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

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

Я хочу предложить вам поломать голову вечерок-другой над интересными задачками, на регулярные выражения, которые Callum Macrae выкладывает на своем сайте на GitHub каждый Вторник.

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

Тесты используют JavaScript Regex движок вашего браузера, который обладает всеми основными возможностями PCRE.  Подробнее можно посмотреть тут (англ.) , в колонке ECMA в таблице.

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

UPD: В регулярных выражениях ECMAScript нету ретроспективных проверок.