Всем добрый день!



Не так давно мы рассказывали вам об анонсе новой версии библиотеки WinJS – WinJS 3.0.

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

Если вы хотите начать использовать библиотеку WinJS 3.0 уже сейчас, необходимо самостоятельно собрать ее и подключить в свой проект. В этой статье мы посмотрим, как это сделать.

Внимание! Инструкция для начинающих.

2 недели назад мы полностью обновили WebStorm — нашу IDE для front-end-разработки и Node.js. Мы уже анонсировали некоторые улучшения в WebStorm 9, в том числе поддержку новых фреймворков и инструментов. С тех пор было проделано еще немало работы, результаты которой можно увидеть в WebStorm 9. В этом посте мы подробно расскажем об этом новом функционале и кратко напомним обо всем остальном.

Яндекс.Почта — большое и сложное веб-приложение. Для первоначальной загрузки ей необходимо более 1 МБ статических ресурсов (JS/CSS/Шаблонов). При этом Яндекс.Почта обновляется два раза в неделю, а иногда и чаще.

Но при обновлениях от версии к версии меняется не так много кода — особенно в случае хотфиксов. Это показывают и фризы. Чтобы снизить время загрузки почты при выходе новых версий, мы уже делаем следующее:

• включаем gzip;
• выставляем заголовки кэширования;
• фризим CSS, JS, шаблоны и картинки;
• используем CDN;
• загружаем статику параллельно через кроссдоменные AJAX-запросы.

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

Мы подумали: «А что если хранить где-то старую версию файлов (например, в localStorage), а при выходе новой передавать только diff между ней и той, которая сохранена у пользователя?» В браузере же останется просто наложить патч на клиенте. О том, что из этого получилось и каким выводам мы с Panya пришли, читайте под катом.

Это перевод публикации «Evolving Yahoo Mail» из блога разработчиков Yahoo.



Почтовый сервис Yahoo Mail изначально был запущен в 1999 году. На протяжении 15 лет код эволюционировал из серверного Web 1.0 приложения в один из крупнейших YUI одностраничных приложений в интернете.

В прошлом месяце Yahoo провел React JS митап в главном оффисе в Sunnyvale, CA. Митап (слайды с митапа) посетило более 120 человек, где мы делились знаниями и идеями о разработке приложений, используя Javascript, React, Flux и т.д. Также мы рассказали об эволюции Yahoo Mail и причинах, по которым мы выбрали ReactJS + Flux как основу для нашего нового Mail продукта.

Доброго new Date().getTimeOfDay();

HTML5 Canvas незаменим, когда нужно что-то динамически нарисовать. Но если мы захотим что-то динамически изменять — нам придётся хранить состояние элементов и перерисовывать при необходимости.
Если мы захотим реагировать на события — нам придётся ловить координаты мыши и определять, находятся ли они внутри нужной фигуры.
И т.д.

Частые повторяющиеся задачи. Так и появляются фреймворки и библиотеки.

Впрочем, случай с Graphics2D.js немного другой: мне просто захотелось порисовать. С объектной моделью, анимацией и событиями. И — ничего лишнего.
Но максимально расширяемо: идей много, и всё можно вынести в плагины.

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

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

Поэтому я постарался убрать все упоминания проекта и повторно публикую (с доработками и правками) статью, которую по сути никто еще не видел. Если вы фанат grunt — почитайте хотя бы вторую часть: то, что вы не любите gulp, не значит, что вы не любите browserify.

Краткое содержание:

1. Простой способ обработки ошибок;
2. Универсальная структура для хранения исходных файлов;
3. Объединение нескольких потоков (например, скомпилированный coffee и js) в один;
4. Создание потока из текста;
5. создание собственных плагинов для Browserify;
6. создание плагинов из плагинов Gulp для Browserify.

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

ICEcoder

Это не просто песочница, а полноценный open source редактор в вашем браузере. Вообще существуют десктопные версии, но по-моему, наибольшие внимание разработчики уделают веб-версии. ICEcoder поддерживает HTML, CSS, LESS, SASS, JS, Coffee, PHP, RonR, Python, C/C++/C#, Java, Lua, Rust, SQL, Markdown, всего более 60 языков! Фичи: возможность совместной работы с кодом, Emmet, LiveReload, работа с БД, колопикер, diff tool, линтеры и еще целое множество удачных интерфейсных решений. Повторюсь — это все в вашем браузере!

Здравствуйте, меня зовут Александр Зеленин, я веб разработчик. Сегодня хочу рассказать, как могут работать сайты в условиях нестабильного подключения _{как и обещал}. Проще говоря, что делать если отключили интернет, а деньги зарабатывать надо.

Рассмотрим 3 примера: интернет-магазин, кинотеатр и онлайн-плеер. Для магазина и кинотеатра так же идет разделение на 2 части — что делать на стороне пользователя и на стороне оператора/продавца.

Что такое Meteor?

Это не очередной javascript фреймворк. Ставить его в один ряд с derby, sails, angular или backbone некорректно. Meteor — это платформа для создания модульных высокоинтерактивных клиент-серверных приложений. Пусть это звучит слегка напыщенно и напоминает маркетинговый булщит слоган, но зато по сути очень точно отражает миссию и текущее состояние Meteor. Буквально несколько дней назад Meteor API выпустил первую стабильную версию (1.0).

Официальную информацию можете почитать на портале www.meteor.com, а я же хочу рассказать об особо горячо любимых мной фичах.

Здравствуйте, меня зовут Дмитрий Карловский и я… профессиональный велосипедист. За свою жизнь я перепробовал множество железных коней, но в конечном счёте остановился на самодельном. Не то чтобы мне очень нравилось работать напильником, тратя кучу свободного времени на изобретение колеса, но конечный результат, где каждая кочка не отдаётся болью в нижней половине туловища, того стоит. А теперь, когда вы знаете, что я затеял всё это не просто так, а чтобы сделать мир лучше, позвольте представить вам TypeScript/JavaScript модуль $jin.atom.

Краткое содержание предыдущей серии: простейшее приложение достигло критического уровня сложности, и, чтобы совладать с оной, была введена абстракция «атом», которая вобрала в себя всю рутину, позволив разработчику сконцентрироваться на описании инвариантов в функциональном стиле, не теряя связи с объектно ориентированной платформой. Вся теория и картинки там. Тут же будет куча практики, примеров кода и дампов консоли.

Внезапно вышел Meteor 1.0

Поздравляю всех с этим радостным событием, теперь есть очередной стимул попробовать эту full stack «магию» на вкус!
По сравнению с версией 0.9.4 особых изменений в коде нет.
Приведена в порядок документация.
Обновился сайт проекта.
Бесплатно доступна книга Discover Meteor.

Ссылки

• www.meteor.com
• book.discovermeteor.com/starter
• github.com/meteor/meteor

Содержание

• Введение
• Величины, типы и операторы
• Структура программ
• Функции
• Структуры данных: объекты и массивы
• Функции высшего порядка
• Тайная жизнь объектов
• Проект: электронная жизнь
• Поиск и обработка ошибок
• Регулярные выражения
• Модули
• Проект: язык программирования
• JavaScript и браузер
• Document Object Model
• Обработка событий
• Проект: игра-платформер
• Рисование на холсте
• HTTP
• Формы и поля форм
• Проект: Paint
• Node.js
• Проект: веб-сайт по обмену опытом
• Песочница для кода

Вопрос о том, могут ли машины думать так же уместен, как вопрос о том, могут ли подводные лодки плавать.

Эдсгер Дейкстра, Угрозы вычислительной науке

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

Наш проект – постройка виртуальной экосистемы, небольшого мира, населённого существами, которые двигаются и борются за выживание.

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

Что же может потребоваться программисту от хорошего парсера маркдауна? Ну конечно же не скорость :). А нужна на самом деле возможность добавлять свои расширения синтаксиса. К сожалению, во всех реализациях парсеров, что я до этого встречал, логика разбора разметки приколочена намертво. Все что остается — ковырять гвоздиком конечный результат и надеяться что конфликтов не случится. Конечно, гарантировать при этом надежный выхлоп невозможно. Можно пойти другим путем — попробовать заслать патч в апстрим. Но тут нет ни каких гарантий, что синтаксис вашего расширения будет нужен кому-то еще кроме вас, и что ваш код будет принят.

Как же быть? К счастью, теперь у нас есть markdown-it!

Друзья, не так давно вышел очередной релиз open source фреймворка Apache Cordova, детали вы можете узнать из аннонса.
Я же спешу поделиться деталями одной из интересных фич, которая не так очевидна и распиарена в релизе, но которая значительно облегчает жизнь разработчиков плагинов под Apache Cordova, предоставляя для них практически неграниченное поле для деятельности. Прошу любить и жаловать:

CB-6481 Add unified hooks support for cordova app and plugins

Ниже я покажу, как можно использовать данную фичу для написания Windows Phone JavaScript дебаггера в качестве плагина для Apache Cordova. Результат вы можете посмотреть на видео ниже (смотреть с включенным HD режимом)

var t: [number, string] = [1, "hello"];
t = [];                 // Error
t = [1];                // Error
t = [2, "test"];        // Ok
t = ["test", 2];        // Error
t = [2, "test", true];  // Ok

Когда мы выпустили TypeScript 1.0 ранее в этом году, мы были сфокусированы на том, чтобы создать язык, который поможет разработчикам действительно масштабировать их проекты на JavaScript. Было довольно увлекательно наблюдать, что люди делали с ним, включая 170000 строчек кода в Mozilla Shumway, Walmart stationery и наш богатый опыт с Microsoft Azure, в котором мы перепрыгнули за миллион строчек кода.

Наша цель в работе над TypeScript – продолжать поддерживать проекты подобного размаха и сделать его лучшим языком для масштабирования JavaScript. С версией 1.1 мы выпустили быстрый и легковесный компилятор, способный выдавать результат в четыре раза быстрее, чем предыдущий. Новый компилятор также более гибок в отношении добавления новой функциональности, чем мы непременно воспользуемся, двигаясь к версии 2.0.

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

Содержание

• Введение
• Величины, типы и операторы
• Структура программ
• Функции
• Структуры данных: объекты и массивы
• Функции высшего порядка
• Тайная жизнь объектов
• Проект: электронная жизнь
• Поиск и обработка ошибок
• Регулярные выражения
• Модули
• Проект: язык программирования
• JavaScript и браузер
• Document Object Model
• Обработка событий
• Проект: игра-платформер
• Рисование на холсте
• HTTP
• Формы и поля форм
• Проект: Paint
• Node.js
• Проект: веб-сайт по обмену опытом
• Песочница для кода

Проблема объектно-ориентированных языков в том, что они тащат с собой всё своё неявное окружение. Вам нужен был банан – а вы получаете гориллу с бананом, и целые джунгли впридачу.

Джо Армстронг, в интервью Coders at Work

Термин «объект» в программировании сильно перегружен значениями. В моей профессии объекты – стиль жизни, тема священных войн и любимое заклинание, не теряющий своей магической силы.

Стороннему человеку всё это непонятно. Начнём же с краткой истории объектов как концепции в программировании.

День добрый, читатели Хабра!
В этой статье спешу вам рассказать (хоть и с опозданием) о том, что такое WebJars на примере приложения в Play Framework.

В практически любом веб-приложении нельзя обойтись без сторонних javascript-библиотек. Самый простой способ добавить их: скачать и добавить в проект, а также добавить файл в git-репозиторий. Решение годное, но лично для меня наличие в проекте какой-либо статики малость раздражает. Есть другой метод: указывать ссылку на внешний хостинг js-библиотек такой как google, yandex. В принципе вариант, но в моей практике были случаи, когда необходимо было продолжить разработку а доступ в интернет оставлял желать лучшего либо его вообще не было, в итоге клиентская часть не функционировала. Наиболее годным решением мне видится добавления js библиотеки в качестве зависимости в проект, с подобным подходом вы могли сталкивать в Ruby on Rails.

Этот пост выходит за рамки повседневного использования объектов в JavaScript. Основы работы с объектами по большей части так же просты, как использование JSON-нотации. Тем не менее, JavaScript дает возможность использовать тонкий инструментарий, с помощью которого можно создавать объекты некоторыми интересными и полезными способами и который теперь доступен в последних версиях современных браузеров.

Всем доброго времени суток!

Прочитав очередную статью про проблему со временем в JavaScript (для браузеров Windows (RU) после patch'а KB2998527), я стал понимать, что мало кто приводит общее решение для ExtJS 3.

В этом посте любитель javascript тряхнет костями, доставая что-нибудь полезно-интересное из исходника Backbone.

Тут не будет рассматриваться вопрос применения библиотеки, это на Хабре уже давно сделали, а будет простой конспект-шпаргалка по js с примерами, в роли примеров — сам Backbone.