Эта статья основана на моей презентации с конференции BrazilJS в августе 2014 года. Она базируется на идеях, о которых я писал в блоге недавно, в основном, в связи с UX и производительностью.

Я хочу представить 7 действенных принципов для веб-сайтов, которые хотят применить JavaScript для управления UI. Эти принципы являются результатом моей работы как веб-дизайнера, но также как давнего пользователя WWW.

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

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

• Должен ли JavaScript использоваться как замена функциям браузера: история, навигация, рендеринг?
• Умирает ли бэкенд? Нужно ли вообще рендерить HTML?
• Правда ли, что будущее за приложениями на одной странице (Single Page Applications, SPA)?
• Должен ли JS генерировать страницы на веб-сайте и рендерить страницы в веб-приложениях?
• Нужно ли использовать техники вроде PJAX или TurboLinks?
• Каково точное отличие между веб-сайтом и веб-приложением? Должно ли остаться что-то одно?

WebInspector

Мощный инструмент для дебаггинга JavaScript, полноценный инспектор кода для Sublime. Фичи: установка брейкпоинтов прямо в редакторе, показ интерактивной консоли с кликабельными объектами, остановка с показом стек трейса и управление шагами дебаггера. Все это работает на ура! А еще есть Fireplay от Mozilla, который позволяет подключаться к Firefox Developer tools и максимально простой дебаггер JSHint.

Я работаю с node.js более трех лет и за это время успел хорошо познакомиться с платформой, ее сильными и слабыми сторонами. За это время платформа сильно изменилась, как, собственно, и сам javascript. Идея использовать одну среду и на сервере и на клиенте пришлась многим по душе. Еще бы! Это удобно и просто! Но, к сожалению, на практике все оказалось не так радужно, вместе с плюсами платформа впитала в себя и минусы используемого языка, а разный подход к реализации практически свел на нет плюсы от использования единой среды. Так все попытки реализовать серверный js до ноды не взлетели, взять тот же Rhino. И, скорее всего, node ждала та же участь, если бы не легендарный V8, неблокирующий код и потрясающая производительность. Именно за это его так любят разработчики. В этой серии статей, я постараюсь рассказать о неочевидных на первый взгляд проблемах и тонкостях работы, с которыми вы столкнетесь в разработке на nodejs.

В Лас Вегасе начался второй день конференции MIX – крупнейшей конференции на тему web-разработки. Если вы пропустили темы и анонсы первого дня конференции, то смело наверстывайте в этом обширном посте. Если вы еще не в курсе, что это за конференция, то прошу ознакомится с другой статьей, в которой я пытался рассказать о ней более или менее подробно.

Кроме того, начали выкладывать первые записи сессий для скачивания. Спешите видеть! Видео самого кейнота, про который пойдет речь , доступно здесь

Итак. Что нам принес второй день MIX? Вернее, открытие второго дня. Поскольку у меня, когда я начал писать заметку, была половина 12 ночи, а в Лас Вегасе только начинался новый день.

Ответ один и он сокрушительный: Internet Explorer вернулся! Да, иногда они возвращаются. Казалось бы, еще утром я с сомнением оценивал шансы IE9, а сейчас вижу, что он не только догнал, но и перегнал своих конкурентов на их же поле. Но обо все по порядку.

Если вы хотите узнать про: GPU-акселерацию HTML5/SVG и типографики, поддержку и GPU-акселерацию HTML5 Video, полную поддержку селекторов CSS3, мультиядерную обработку JavaScript и о том, как пали в битве скорости и поддержки стандартов Firefox и Chrome… обращайтесь под кат (а так же там есть другие, менее интересные вещи: jQuery и Джон Ресиг, кровь и Билл Бакстон, протокол oData и проект Gustav). Осторожно, много картинок!

Здравствуй хаброчеловек!

Так уж случилось, что с этого семестра в своем вузе я записался на спецкурс по паттернам проектирования. Курс проходит в виде семинаров, на которых ты (студент) должен рассказать чему научился за неделю (имеется ввиду, какие паттерны изучил и применил на практике).

Онлайн инструмент для создания цветовых схем. Есть 6 вариантов подборки цветов, возможность корректировки яркости контрастности отобранных цветов или выбор из имеющихся вариантов (темное / светлое и т. п.), возможность просмотреть шестнадцатеричные коды основного цвета и дополнительных, есть функция предпросмотра «сайта» с выбраными цветами со светлым / темным фоном, симуляция различных нарушений восприятия цветов людьми, рандомайзер, а так же API для интеграции с вашим сайтом. www.colorschemedesigner.com

Да, мы действительно понимаем, что идеал женщины создать невозможно. Но мы и не ставили такой цели, мы создавали визуальный образ «совершенной программы — Аскина». И коль на хабре пошло такое живое обсуждение и тема уже на 3-ем месте в top 30 — мы, специально для вас, попробовали различные варианты Аскины.

Технологии «дополненной реальности» (augmented reality) еще могут быть и сыроваты для «серьезных» приложений, но в развлекательных, образовательных и рекламных целях их уже активно используют. Благодаря чему у нас есть, чем развелчься в остаток рабочего дня в пятницу.



Например, GE Energy на своем сайте, посвященном энергосберегающим решениям Smart Grid, предлагает две «игрушки» с использованием augmented reality.

Если у вас есть под рукой вебкамера и принтер, то нужно просто:
(1) зайти на сайт Plug Into the Smart Grid
(2) распечатать страницу с «цифровой голограммой»
(3) открыть одно из двух приложений:
— Wind Turbine
— Solar Power
(4) разрешить флэшу использовать камеру и микрофон
(5) показать страницу камере (в случае с ветряком — можно еще подуть в микрофон)

Ну а если вебкамеры нет — то можно просто посмотреть ролик:

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

Подумал что хабрапользователям бывает трудно на некоторых сайтах, где нельзя использовать коды, вот и решил предложить альтернативный вариант =)
Сам символ просто так не получается вставить, зато можно его вытащить из примера.
Вставлять его нужно после каждой буквы, кроме последней.

Как вы помните, Windows 7 RC прекратит хорошо себя вести в начале весны. Не все знают, что таки можно перейти с RC на RTM без переустановки системы. А я знаю, и с удовольствием расскажу.

Прежде всего, в ветке HKLM\Software\Microsoft\Windows NT
в значениях параметров EditionID и ProductName заменить слово Ultimate на слово Enterprise.

Затем взять образ w7 Enterprise, открыть каким-нибудь редактором, UltraISO или еще чем-то, найти файл Sources\cversion.ini, и в строчке MinClient поставить номер билда поменьше, чем который у Вас сейчас.

Сохраняем, поджигаем, обновляем.

P.S. Само собой разумеется, что у Вас есть юридическое право использовать Windows 7 Enterprise RTM. :-)

Удачного апгрейда.

Компания Font Bureau разработала новое семейство шрифтов Input, важнейшим из которых в данном случае для нас является шрифт Input Mono. Кириллица присутствует. Для персонального использования шрифты бесплатны.

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

FastClick.js

Nota Bene. Практически всегда страница в браузере на вашем тач устройстве реагирует недостаточно быстро. Все из-за задержки в 300ms, чтобы убедиться, что это не double tap. FastClick.js — это полифил, который избавляет пользователей вашего сайта от этой задержки.

Кстати, это репозиторий от разработчиков известнейшего Financial Times и у них же есть еще один полезный проект на GitHub — ftscroller, с помощью которого легко создать адаптивный скроллинг и мульти-скроллинг для любого эленмента.

Перевод статьи Vincent Driessen: A successful Git branching model

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



В качестве инструмента управления версиями всего исходного кода она использует Git.

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

Открылся веб-сервис TinyPNG, на котором можно быстро конвертировать полноцветные PNG24 в индексные PNG8 с сохранением альфа-прозрачности. Сайт работает на известных open source утилитах, так что квантование палитры можно сделать и без него, но здесь это просто удобнее.

Продолжая свои «css-раскопки» возникла новая идея, разобрать по косточкам ещё одну актуальную тему, которая касается равномерного выравнивания блоков по ширине. В принципе мои доскональные исследования я уже запостил у себя в блоге, но так как прошлая моя работа очень понравились Хабра-сообществу, то я решил сделать здесь небольшой краткий обзорчик этой статьи, чтобы ни одна хабра-душа не пропустили её наверняка. Так что, как говорил Гагарин: «Поехали».

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

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

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

Ну вот дошли руки до следующей части.
Сегоня расскажу что знаю про американский бухучет применительно к к нашей alien`ской конторе и налоги.

Это продолжение топиков HOWTO: свой бизнес в США из России,
и Бизнес в США из России. Часть II. Деньги и банки.

В любой профессии есть тонкая прослойка людей, которые являются действительно высококлассными специалистами. Не исключение и область фронт-енд разработки — здесь также есть выдающиеся личности. К их мнению прислушиваются, за ними следят в блогах и социальных сетях и читают их книги. В процессе своей работы они рождают различные оригинальные решения или техники, которые мгновенно расходятся по миру веб-разработки и остаются актуальными не один год. Они создают удобные онлайн-сервисы для верстки, пишут полезные js-библиотеки, совершенствуют браузеры, пропагандируют веб-стандарты и оказывают непосредственное влияние на их развитие. Они могут называть себя front end engineer, front-end developer, web developer, web designer, UI Designer, browser compatibility expert или просто css lover, но для большинства из нас они — звезды мирового фронт-енда, которые делают интернет таким, каким мы его знаем. На Хабре довольно часто появляются обзоры интересных решений, техник и новостей из мира веб-разработки с указанием западных авторов, однако далеко не все знают что-нибудь о них кроме имени. Мне захотелось вкратце рассказать для широкой публики о некоторых из этих товарищей.

В прошлой статье я начал рассказывать о своём опыте разработки экспериментального WEB-проекта «Что делать?» на Node.JS. Первая часть была обзорной, в ней я постарался раскрыть плюсы и минусы технологии, а также предупредить о проблемах, с которыми, возможно, придётся столкнуться в ходе разработки. В этой статье я подробнее остановлюсь на технических деталях.

Несколько слов о «хабраэффекте»