Введение

Уважаемый читатель, данная статья является по сути своей продолжением статьи «Как сверстать веб-страницу. Часть 2 — Bootstrap» и здесь мы отойдём от собственно вёрстки, занявшись интеграцией HTML шаблона в CMS 1С-Битрикс.

В предыдущей части Хабраюзер Mirantus сверстал шаблон Corporate Blue от студии Pcklaboratory с помощью Bootstrap 3.

В посте в повествовательной и не очень манере рассказывается о различных реализациях «точных» таймеров на JS. Материал рассчитан на новичков… Добро пожаловать под кат.

Уже довольно давно у веб-приложений появилась возможность хранить часть данных или файлов локально. Можно даже кешировать MP3-файлы. Браузеры научились хранить немалые объёмы данных. Тем не менее, пока что технологии локального хранения сильно фрагментированы.

localStorage предоставляет лишь самые базовые функции, это хранилище довольно медленно и не умеет хранить блобы. IndexedDB и WebSQL асинхронны, быстры и поддерживают большие объемы данных, но их API довольно запутан. Кроме того, ни IndexedDB, ни WebSQL не поддерживаются всеми основными браузерами, и, похоже, в ближайшем будущем эта ситуация не изменится.

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

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

localForage — очень простая библиотека JavaScript, которая использует API, похожий на API localStorage, с теми же самыми базовыми методами get, set, remove, clear и length, но имеет ещё несколько важных улучшений:

• асинхронный API с колбэками;
• драйвера IndexedDB, WebSQL и localStorage (самый подходящий драйвер выбирается автоматически в зависимости от возможностей браузера);
• поддержка блобов и произвольных форматов данных, так что можно хранить изображения, файлы и так далее;
• поддержка обещаний ECMAScript 6.

Использование IndexedDB и WebSQL позволяет хранить намного больше данных, чем localStorage. Неблокирующий асинхронный API делает приложение более быстрым и отзывчивым, так как основной поток приложения не подвисает во время выполнения вызовов get/set. Поддержка обещаний позволяет писать чистый код без спагетти из колбэков. Конечно, если вы любите колбэки, можно использовать и их.

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

Так как итоговый код получился довольно-таки большим, то в статье будет рассмотрены наиболее важные и интересные с точки зрения Audio API фрагменты. Итоговый результат вы конечно же сможете посмотреть на демке.

Доброго времени суток, друзья!

Да-да, именно друзья, ведь после моего первого поста откликнулось очень много людей, кто был готов помочь всем, чем смогут. И в этом я чрезмерно благодарен Хабру — уже написаны целых две музыкальные композиции и грамотно переведен весь текст в игре на английский язык. Даже не знаю, что бы я без вас делал!

Но сам пост не об этом. Сегодня я хотел бы поделиться с вами маленькими подсказками по поводу пользовательского интерфейса. О том, чего стоит избежать уже в самом начале разработки, и что потом делать. К сожалению, мой «скилл» недостаточно высок, чтобы писать о чем-то действительно новом и неизведанном в этой области, так что пост будет больше посвящен новичкам в гейм-деве (и в первую очередь тем, кто пока еще боится NGUI), да и пост будет субъективен на все 146%.

Семнадцать дней назад (19 января 2014 года) вышла новая версия (2.0.0) джаваскриптовой библиотеки Keypress, предназначенной для удобного программирования реакций браузера на события, поступающие от нажатий (и от отпусканий) клавиш на клавиатуре.

Опубликованный на Гитхабе список изменений позволяет уверенно огласить вот что: важнейшим из достоинств новой версии стала возможность ловить события не только во всём окне в целом, но и для одного или нескольких отдельных элементов DOM. Теперь и при программировании различающихся реакций у различных элементов на веб-страницах мы можем с удобством прибегнуть к библиотеке Keypress вместо тех её более ранних и более популярных аналогов (например, jQuery.Hotkeys), которые уступают Keypress по богатству возможностей.



Возможности же эти вот каковы:

• Реакция на нажатие и отпускание одной или нескольких клавиш. Поддерживаются синонимы кросс-платформенные (например, "meta" означает "cmd" или "ctrl" в зависимости от системы) и шифтовые (например, "@" означает сочетание Shift и двойки).
   
• Программируемые сочетания клавиш могут включать в себя не только классические модификаторы ("meta", "alt", "option", "ctrl", "shift", "cmd"), но и какие угодно другие клавиши. Например, программируя WASD-управление пошаговою бродилкою, нетрудно достигнуть того, чтобы нажатие и отпускание клавиши «W» означало шаг вперёд, но «W» и «D» совместно — шаг по диагонали вперёд+направо.
   
• Возможно указание сочетаний клавиш, состоящих не из одновременных, а из последовательных нажатий клавиш. Это такие сочетания, как код Конами, например.
   
• Специальные «считающие» комбинации позволяют программировать такие ситуации, в которых нажатие основной клавиши обнуляет некоторый счётчик, а каждое нажатие дополнительной клавиши (при удержании основной) увеличивает этот счётчик на единицу. David Mauro (автор Keypress) приводит в пример такое сочетание Tab+Space, при котором нажатие Tab тотчас же открывает первую вкладку в некотором наборе вкладок, а каждое нажатие на пробел (при удержании Tab) перебрасывает на следующую вкладку — на вторую, на третью, на четвёртую…

Для каждой одиночной клавиши (или для комбинации) возможны дополнительные настройки. Эти настройки позволяют при необходимости сделать вот что:

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



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

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

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

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

На днях я наткнулся на замечательную карманную книгу для PHP разработчиков «PHP: The Right Way». Скорее, она будет более полезна новичкам. Чем именно? По интернету разбросано огромное количество материла по PHP, но многое уже устарело или не приводит к написанию качественного кода. В этой книге присутствуют основные актуальные сведения с ссылками на проверенные ресурсы. На самом деле, сначала я хотел перевести ее, форкнуть репозиторий, благо лицензия это позволяет. Но оказалось, что перевод уже есть. Нет только русской книги в форматах для электронных книг, но так как используется Markdown в русском форке, то это не составит труда.

Предисловие

Уже около четырех лет увлекаюсь языком JS, а особенно привлекает в нем прототипная реализации объектной ориентации и замыкания. Так как я большой любитель «велотренажеров» в программировании и обожаю изучать что-то новое на практических примерах, давно хотел попробовать реализовать подобное самостоятельно, и совсем недавно шанс выпал. Одним холодным зимним днем я увлекся редактором Vim и, изучая его скриптовый язык, обратил внимание на некоторые важные особенности, а именно ассоциативные массивы и передачу функций по ссылке. Я не смог пройти мимо и реализовал свою прототипную объектную ориентацию в Vim с наследованием и полиморфностью.

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

Привет всем!

В данной статье я хотел бы поделиться с вами соображениями о том, как на практике можно использовать механизм работы с асинхронными процессами, предоставляемый библиотекой jQuery с версии 1.5 под названием deferred, «отложенный» (jQuery.Deferred), а также со связанными объектами и методами.

Разумеется, уже написан не один десяток статей на тему работы с парой deferred/promise. Своей же я задался целью предоставить такой набор знаний, который дал бы новичку, во-первых, возможность забыть о своих страхах перед непонятным и сложным и, во-вторых, сделать еще один шаг к написанию понятного и хорошо структурированного кода, работающего с асинхронными процессами. Я бы хотел сосредоточить свое и ваше внимание на проблемах, которые легко разрешаются ипользованием deferred, на предпосылках и типовых схемах использования этого объекта.

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

Но прежде чем начать разбираться непосредственно с Audio API, нам необходимо набросать заготовку нашего визуализатора и делать мы будем это при помощи canvas.

Перевод pdf файла с сайта http://www.mcdonaldland.info/ с описанием 23-х шаблонов проектирования GOF. Каждый пункт содержит [очень] короткое описание паттерна и UML-диаграмму. Сама шпаргалка доступна в pdf, в виде двух png файлов (как в оригинале), и в виде 23-х отдельных частей изображений. Для самых нетерпеливых — все файлы в конце статьи.

Под катом — много картинок.

Вчера вышла [весьма достойная статья про Web Components, и я понял, что не могу не поделиться тем опытом, что я накопил за последние восемь месяцев. Я не буду рассказывать о том, как работать с Веб Компонентами, я расскажу, почему. Поэтому тем, кто не знает об этом стеке технологий, стоит прочитать статью по ссылке выше.
Дело в том, что в июне вышла первая стабильная версия моей библиотеки CornerJS. Начавшись как автономная реализация директив из AngularJS, она постепенно превратилась в более простой — как в использовании, так и в реализации — аналог (неточный, да, я знаю) Пользовательских Элементов из спецификации Веба Компонентов.

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

Это замечательная, на мой взгляд, в реализации библиотека — я действительно считал ее основным инструментом в разработке, и в последнем проекте (видеопортале) она оказалась важнее jQuery: от него я мог бы отказаться, а от нее нет.

Но я, как человек, внедривший ее в нашу команду, и отказываюсь от нее — мы переходим на Mozilla X-tags для IE9+ сайтов и Polymer для IE10+ сайтов. К счастью, на моей памяти у нас был всего один или два проекта IE8+.

И в этом посте я расскажу, почему веб-компоненты — это не просто будущее веба. А единственное будущее веба.

Статья написана в рамках конкурса среди студентов Технопарка Mail.ru.

Думаю, JavaSript-библиотека jQuery в представлении не нуждается, но на всякий случай напомню, что jQuery призвана ускорить разработку, предоставить синтаксический “сахар” для нативного js и избавить разработчиков от проблем, связанных с кроссплатформенностью.
Прежде чем говорить о том, как устроена обработка событий в jQuery, нельзя не упомянуть об истории обработки событий в браузере.

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

Я работаю предпринимателем — фрилансером с 2007 года и успел накопить значительный опыт получения денег из-за рубежа как через онлайн-биржи вроде oDesk и Elance, так и работая с заказчиками напрямую. В свое время я был инициатором некоторых изменений на oDesk, помогающих упростить легальное получение денег на свой предпринимательский счет. Сегодня я руковожу разработкой в нашем украинском стартапе Taxer.ua, от чего опыта во взаимодействии с государством накопилось еще больше.

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

1. Государственная регистрация предпринимателя: выбор системы налогообложения, подача заявления.
2. Составление ВЭД договора, получение денег от клиентов: биржи oDesk, Elance и напрямую.
3. Ведение ВЭД бухгалтерии: акты, счета, книга доходов и курсовая разница.
4. Уплата налогов и отправка отчетности в контролирующие органы: сдавать ли валютную декларацию.

Команда проекта GeeksLab 30 ноября 2013 года в Одессе провела VI специализированную конференцию FOSS Sea: back-end на базе свободных и открытых технологий. Один из потоков мероприятия был посвящен разработке бекенда на JavaScript. В данном потоке с докладами выступили представители таких компаний как: DataArt, Lohika, GlobalLogic, GradSoft, IT Adapter Corp и другие. Презентации и видеозаписи докладов под катом.

В какой-то момент меня очень удивило, что потрясающая и понятная книга о проектировании JavaScript-приложений от известного автора до сих пор не переведена на русский язык. Вместе с единомышленниками мы перевели все главы. Сейчас мы внимательно вычитали 5 из них и хотим их показать всем, кто интересуется JS. Каждую неделю мы обещаем публиковать по 2 главы.

Прочитать книгу можно на сайте, который мы специально для нее создали, следить за обновлениями можно по RSS и в твиттере. Проект хостится на GitHub Pages, а это значит, что все, кто хочет помочь в вычитке глав, исправить опечатки, или каким-то иным образом помочь проекту, может легко это сделать.

Сайт перевода
Репозиторий на GitHub

npm — это пакетный менеджер node.js. С его помощью можно управлять модулями и зависимостями.
Небольшая шпаргалка всех моих любимых команд npm:

• Установка npm
• Обновление npm
• Поиск пакетов в npm
• Просмотр информации о пакете
• Локальная установка пакетов
• Установка пакета в наше приложение
• Понимание разницы между глобальной и локальной установкой
• Глобальная установка пакетов
• Удаление локально установленного пакета
• Удаление глобально установленного пакета
• Установка определённой версии пакета
• Установка модуля с Github
• Связи любых пакетов локально
• Связи локальных пакетов для нескольких приложений
• Отмена связи между пакетами приложения
• Отмена связи пакета в системе
• Создание нового пакета
• Добавление нового пользователя
• Публикация пакета в репозиторий npm
• Удаление пакета из репозитория npm
• Управление правами доступа к пакетам в репозитории npm

Последние полгода я занимаюсь разработкой достаточно большого web-приложения, под капотом которого ревет и дымится NodeJS. Когда дело дошло до деплоя на продакшн я задумался: «почему бы мне не использовать несколько тредов с инстансом приложения?».

Реализовав кластер, я увидел, что производительность от его использования возросла в 1,5 раза, что очень даже не плохо, учитывая малый объем потраченных усилий. Но я решил не останавливаться на этом, и сделать удобный CLI для работы с кластером, чтобы отвязать код, который отвечает за запуск кластера от конкретного приложения. Кроме того, очень хотелось демонизировать кластер, чтобы он висел себе молча в процессах, поднимал упавшие воркеры, писал в логи, и никого больше не отвлекал.

Так появился node-clusterize-cli — утилита работающая из командной строки, не затрагивающая кода приложения. Основанная на оригинальном модуле «cluster» NodeJS.