Переведено компанией-локализатором Alconost.

Недавно проект, над которым я работал, наконец запустился. Ладно, перезапустился. Речь о небольшом простеньком приложении для айфона Postography, которое позволяет рассылать бумажные открытки с картинками и текстом с вашего айфона. Отличный и, вроде бы, несложный проект, правда? Приложение, на создание которого не должно было уйти много времени.

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

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

Программист, именующий себя Stuffit, опубликовал исходный код на портале Codepen. Код симулирует физику ткани. Использует HTML5, Canvas, CSS и JavaScript, приблизительно 300 строчек кода. Ткань без текстуры, простая сетка, но демонстрационным целям служит отлично.



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

Перевод с чешского источника

Pixi.js позволяет использовать мощь WebGL для рендеринга 2D-сцен, совершенно не вникая в подробности реализации, более того, он умеет самостоятельно определять наличие поддержки WebGL и переключаться между способами рендеринга. В отсутствие WebGL рендеринг осуществляется средствами canvas. Кроме того в Pixi.js реализован граф сцены, поддержка текстур и спрайтов, чуть больше недели назад в нём появилась поддержка интерактивности — на спрайты можно повесить обработчики событий мыши и тачскрина.

В феврале в Санкт-Петербурге прошла вторая конференция для менеджеров проектов и руководителей групп – «План Б».

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

events.yandex.ru/events/planb/spb-feb-2013/talks — тут выложены видео всех докладов.

Наиболее интересными мне показались Неурядицы при создании сложных проектов/сервисов, Ошибки в стартапах, 10 способов «налажать» во фрилансе.

Заранее прошу прощения за некоторые обороты в переводе. Буду рад услышать здравую критику и поправки, лучше в пм. Спасибо. – пер.

Стартапы имеют много общего с JavaScript'ом. Когда вы только начинаете, вам нужно быть динамичными. Вы должны быть гибкими. Вы должны иметь возможность мгновенно выпустить прототип, который просто работает, и вам нужно уметь быстро и дешево менять его без перекомпиляции вашего кода. JavaScript появился когда война между браузерами только начиналась, и он раздавил Java и Flash по тем же причинам, по которым стартапы рушат рынки и вытесняют признанных игроков: быстрота и гибкость.

Здравствуйте, хабражители!

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



А что из этого получилось — под катом.

Это заметка о подходе к реализации автоматизации механизма psd to html.

Модуль OdinMonkey — часть движка IonMonkey, отвечающая за оптимизацию и компиляцию низкоуровневого Asm.js — 21 марта был включён в состав сборки Firefox Nightly. Что такое Asm.js? — это подмножество языка JavaScript, позволяющее программировать «на уровне ассемблера» — без динамической типизации и выделения памяти. В каком-то смысле Asm.js аналогичен технологии Google Native Client, только с обратной совместимостью — код, написанный по спецификации Asm.js, является корректным кодом JavaScript и будет выполняться на любом движке, только медленнее, чем при наличии OdinMonkey.

Asm.js позволяет в ряде случаев вплотную приблизиться к производительности нативного кода — программа на Си, скомпилированная в Asm.js, обычно работает всего вдвое медленнее оригинала:

Заметил, что на Хабре никто не писал про отличный JavaScript шаблонизатор Swig.

JavaScript в поледнее время становится все более популярным и находит новые неожиданные сферы применения. Вот и меня не обошел этот тренд, так что при just-for-fun разработке одного проекта я не удержался и решил попробовать использовать JS одновременно на сервере (Node.JS), веб-клиенте (Backbone.js — все серьезно :) ) и в мобильном приложении (PhoneGap). Следующим шагом для меня стал выбор шаблонизатора, причем поддержка как node, так и браузера была обязательным критерием. До этого я имел дело в основном в Django Template Language, так что выбор пал на Swig.

Особенности Swig:

• Django Template подобный синтаксис
• Крайне высокая скорость работы (бенчмарки)
• Поддержка node.js и основных браузеров
• Совместимость с Express
• Открытый исходный код

Человек — ужасно ленивая зараза. Нет, ну я не о вас, конечно! Ну что вы! Я так, о себе. О 99% человечества. Но не о вас, нет. Вы сами за себя решайте. Но вот те 99%, так уж вышло — ужасно ленивы. Кто-то это отрицает, кто-то мирится, кто-то борется. А лично мне кажется, что это такая же неотъемлемая черта нашего вида, как, например, две руки и две ноги. Можно убиваться, что у нас нет крыльев или жабр — а можно научиться хорошо пользоваться тем, что есть. Так же и с ленью. Зачем её отрицать? Надо её использовать по-полной. И вот тут, поскольку мы с вами имеем кое-какое отношение к ИТ, давайте посмотрим, как с этим обстоит дело в нашей профессии.

Хочу предоставить вашему вниманию библиотеку Vow, которую написал мой коллега Дмитрий Филатов dfilatov.

Библиотека реализует Promises/A+, работает очень быстро и требует малого объема памяти. По тестам производительности сильно опережает Q, но при этом сохраняет асинхронную манеру работы.

Работа с Vow выглядит так же просто, как работа с Q. Из недостатков (по сравнению с Q) можно лишь выделить отсутствие progress.

Пример кода с использованием Vow:

function readFile(filename, encoding) {
    var promise = Vow.promise();
    fs.readFile(filename, encoding, function(err, data) {
        if (err) return promise.reject(err);
        promise.fulfill(data);
    });
    return promise;
}
Vow.all([readFile('test1.txt', 'utf8'), readFile('test2.txt', 'utf8')]).then(function(results) {
    console.log(results.join('\n'));
});

Нам нужно:

1. Установить на сайте собственные иконки с помощью SVG.
2. Они должны управляться с помощью CSS (форма, размер, заливка, эффекты в том числе и их поведение).
3. Они должны иметь маленький вес и находиться в одном месте для экономии http запросов.
4. Работать во всех основных современных браузерах.

демо

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

Введение

Во многих web проектах присутствуют элементы, значение которых необходимо часто менять. Это могут быть счётчики, индикаторы, уведомления и подобные элементы. Показывать ли актуальные значения после обновления страницы или же можно реализовать автообновление всех этих данных? Для нас ответ очевиден: если есть возможность динамически менять элементы, то для обновления страниц не остается места.

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

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

Что

Hint.css — библиотека, реализующая всплывающие подсказки, средствами CSS3 без применения JavaScript.

Библиотека использует атрибут data-*, псевдоэлементы, свойство content и CSS3 transitions для вывода всплывающих подсказок.

Дорогие друзья, давно идет разговоры о том, что грядут альтернативные методы расчетов между людьми, о том, что скоро финансовые инструменты будут меняться. Создаются новые социальные финансовые сети и тут есть место и гигантам.

Недавно было заявлено, что Google и Apple создадут свои банки и вот

один из первых шагов предпринимает Apple. Да именно APPLE.

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

За долгое время работы в Яндексе нам удалось систематизировать все наши знания и огромный опыт в создании фронтенда веб-сервисов. Результатом этого осмысления и длительной работы стала первая Школа разработки интерфейсов, занятие которой шли в московском офисе Яндекса. Вся практическая часть обучения проходила в реальных проектах Яндекса. Теоретическая же состояла из лекций, которые читали ведущие разработчики интерфейсов Яндекса: Сергей veged Бережной, Михаил mishanga Трошев, Алексей doochik Андросов, Михаил azproduction Давыдов и другие.



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

Одной из наименее обсуждаемых функций, все чаще появляющейся в последних браузерах, является поддержка файлов формата SVG. Этот формат характеризуется абсолютной свободой в отображении: легко изменяется в размере, может быть отображен в любом разрешении без потери качества. Во многих случаях SVG весят гораздо меньше, чем, например, PNG или JPG.



Но самое клевое свойство SVG, о котором многие разработчики не знают, это то, что этот формат построен на спецификации XML. C помощью этого мы можем манипулировать элементами SVG файла используя технологии вроде CSS или JavaScript, с которыми разработчики уже знакомы.

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