Обновить
256K+

JavaScript *

Прототипно-ориентированный язык программирования

235,13
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

Работа с COM портом в web-проекте

Время на прочтение4 мин
Охват и читатели58K

Пролог


Один из клиентов нашего web-проекта захотел использовать для поиска заказов в системе сканер штрихкодов. Но, к сожалению, полностью отказался от идеи работы с ними в режиме имитации клавиатуры — только эмуляция COM-порта.
Вариантов решения было не особенно много:
  • отдельное нативное приложение, которое бы отправляло запрос на наш сервер, а сервер бы отдавал команду в браузер
  • работа с COM портом непосредственно из браузера

К счастью, есть способ решения проблемы вторым путём.

Читать дальше →

Выразительный JavaScript: Функции высшего порядка

Время на прочтение17 мин
Охват и читатели105K

Содержание




Цу-ли и Цу-су похвалялись размерами своих новых программ. «Двести тысяч строк»,- сказал Цу-ли,- «не считая комментариев!» Цу-су ответил: «Пф-ф, моя – почти миллион строк». Мастер Юнь-Ма сказал: «Моя лучшая программа занимает пятьсот строк». Услышав это, Цу-ли и Цу-су испытали просветление.

Мастер Юнь-Ма, Книга программирования

Есть два способа построения программ: сделать их настолько простыми, что там очевидно не будет ошибок, или же настолько сложными, что там не будет очевидных ошибок.

Энтони Хоар, 1980 лекция на вручении премии Тьюринга


Большая программа – затратная программа, и не только из-за времени её написания. Большой размер обычно означает сложность, а сложность сбивает с толку программистов. Сбитые с толку программисты делают ошибки в программах. Большая программа означает, что багам есть где спрятаться и их получается труднее отыскать.
Читать дальше →

Перевод книги «The Little Book on CoffeeScript»

Время на прочтение4 мин
Охват и читатели18K

Приветствую, хабраюзер!
Недавно я решил изучить CoffeeScript. В поисках книги по этому языку я наткнулся на The Little Book on CoffeeScript. Однако, эта книга на английском — и я подумал, почему бы не перевести её на русский? Небольшая часть перевода уже завершена, и я был бы рад, если бы сообщество поддержало инициативу и помогло с переводом (сам я не настолько эксперт в JS, поэтому перевод местами кривоват, это надо корректировать).

За процессом перевода можно следить здесь. Ниже прикладываю перевод первой главы.
Читать дальше →

BlackHole.js с привязкой к картам leaflet.js

Время на прочтение12 мин
Охват и читатели24K
Приветствую вас, сообщество!

Хочу предложить вашему вниманию, все таки доведенную до определенной точки, свою библиотеку для визуализации данных blackHole.js использующую d3.js.
Данная библиотека позволяет создавать визуализации подобного плана:
картинки кликабельные
image или

Статья будет посвящена примеру использования blackHole.js совместно с leaflet.js и ей подобными типа mapbox.
Но так же будут рассмотрено использование: google maps, leaflet.heat.

Получится вот так =)

Поведение точки зависит от того где я находился по мнению google в определенный момент времени

Посмотрите, а как перемещались вы?...
Детали...

Несколько интересностей и полезностей для веб-разработчика #31

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

Исходники Reddit


Gravit


image

Замечательный графический редактор с открытым исходным кодом. Есть приложения под Mac, Linux, Windows, а также браузерная версия. В Gravit на данный момент реализован базовый функционал: слои, шейпы, пентул и множество различных функций для манипуляций с объектами. Но данный проект по большему счету ориентирован именно на веб-дизайн. Правильнее всего сказать, что Gravit — это смесь графического редактора в типичном представлении с визуальным редактором для разработки сайтов. Именно эта идея и ее реализация в формате open source делает продукт уникальным.
Читать дальше →

Эквалайзер на JavaScript

Время на прочтение5 мин
Охват и читатели60K
На хабре уже было несколько статей по Web Audio API: создание визуализатора, вокодера и пианино в 30 24 строки. Поиск же по всея интернетам по запросу эквалайзер упорно выдавал туториалы по созданию спектрограмм. (Если заголовок этой статьи сбил вас с толку или вы таки купились на картинку:) и ожидали именно визуализации аудио — вам сюда или вот сюда). Но именно просто эквалайзера я так и не встретил (хотя уверен, что где-то он таки есть). Возможно, это настолько простая задача, что об этом и писать не стоит. Но, в таком случае, почему бы не сделать её ещё проще?


Читать дальше →

Выразительный JavaScript: Структуры данных: объекты и массивы

Время на прочтение22 мин
Охват и читатели151K

Содержание




Два раза меня спрашивали: «Скажите, м-р Бэббидж, а если вы введёте в машину неправильные данные, получится ли правильный ответ?». Непостижима та путаница в головах, которая приводит к таким вопросам.

Чарльз Бэббидж, «Отрывки из жизни философа» (1864)


Числа, булевские значения и строки – кирпичики, из которых строятся структуры данных. Но нельзя сделать дом из одного кирпича. Объекты позволяют нам группировать значения (в том числе и другие объекты) вместе – и строить более сложные структуры.

Написание программ, которым мы до сего момента занимались, сильно затруднял тот факт, что они работали только с простыми данными. Эта глава добавит вам в инструментарий понимание структур данных. К её концу вы будете знать достаточно для того, чтобы начать писать полезные программы.

Глава пройдётся по более-менее реалистичному примеру программирования, вводя понятия по мере необходимости. Код примеров будет строиться из функций и переменных, которые мы определяли ранее.
Читать дальше →

sketchometry — динамическая геометрия в браузере

Время на прочтение5 мин
Охват и читатели17K
sketchometry — это интерактивная динамическая геометрия, веб приложение, разработанное на базе библиотеки JSXGraph. Эта статья является учебным пособием по её использованию.
Текст и много картинок

Новый курс от Школы разработки интерфейсов. В Екатеринбурге и везде

Время на прочтение6 мин
Охват и читатели46K
Меня зовут Денис Чистяков, и я руковожу группой разработки интерфейсов в Екатеринбурге. Мы занимаемся фронтендом: делаем множество сложных, ярких и красивых страниц для приложений Яндекса.

Два года назад мы запустили свою Школу разработки интерфейсов, в рамках которой пытаемся в максимально сжатый срок превратить веб-разработчиков в крутых веб-разработчиков, готовых к специфике нашей компании, нашей инфраструктуре и нашим технологиям. Этот год тоже не стал исключением. В 2014 году ШРИ пройдет в Екатеринбурге и Минске.

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

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



Мы понимаем, что часто желающие поучиться у нас выкраивают время между учебой, работой и семьей. А мы не обычная школа и не вуз, где нужно обязательное присутствие на уроках и парах. У нас есть уверенность, что те люди, которые попадают в ШРИ, обладают здоровым азартом, ответственны и понимают то, для чего они начали путь обучения. (Да-да, мы знаем, что вы крутые :)

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

Это будут мини хакатоны, на которых ребятам придется реализовывать целый проект. А помогать им в этом будет команда яндексовых менторов. И в этом есть много плюсов: общение, возможность поработать бок о бок с профессионалами, получить «живой опыт» и, самое главное, попробовать почувствовать себя частью Яндекса.

Все видео лекций курса плюс подробности об очном обучении

WinJS 3.0 – релиз для всех платформ

Время на прочтение5 мин
Охват и читатели24K


Команда проекта «Библиотека Windows для JavaScript» (WinJS) спешит сообщить о первом релизе с момента представления открытого проекта на конференции //BUILD 2014 – библиотеке WinJS 3.0. Релиз WinJS 3.0 предлагает разработчикам:

  • Кроссбраузерную/кроссплатформенную поддержку, охватывающую наиболее распространенные декстопные и мобильные браузеры, а также основанные на HTML среды приложений, такие как Apache Cordova

  • Модульный подход, предоставляющий разработчикам контроль над оптимизацией производительности и загрузкой только тех модулей библиотеки WinJS, которые необходимы для их веб сайта или приложения

  • Улучшенный дизайн универсальных элементов управления, обеспечивающий более комфортную работу для конечных пользователей и охватывающий телефоны, планшеты, компьютеры — форм-факторы с различными размерами экранов и устройства ввода

Читать дальше →

Выразительный JavaScript: Структура программ

Время на прочтение15 мин
Охват и читатели143K

Содержание




Сердце моё сияет ярко-красным светом под моей тонкой, прозрачной кожей, и им приходится вколоть мне десять кубиков JavaScript, чтобы вернуть меня к жизни (я хорошо реагирую на токсины в крови). От этой фигни у вас враз жабры побледнеют!

_why, Why's (Poignant) Guide to Ruby


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

Несколько интересностей и полезностей для веб-разработчика #30

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

Cloudtunes



Cloudtunes один из тех проектов, глядя на которые я не понимаю мотивации разработчиков выкладывать такие наработки в открытый доступ. Не сочтите меня за сугубо меркантильную личность, но данный проект — это грубо говоря клон iTunes в облаке и это просто великолепный сервис. Cloudtunes обеспечивает единый интерфейс для вашей медиатеки, синхронизируя данные между Dropbox, Youtube, Lastfm и тд. Серверная часть написана на Python (Tornado, Celery, Mongo DB, MongoEngine, Redis), а клиентская на CoffeeScript (Backbone.js, SocketIO, Handlebars, Compass, SoundManager).

Читать дальше →

Ближайшие события

JavaScript: проверьте свою интуицию

Время на прочтение4 мин
Охват и читатели31K

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

Ответы и свой вариант объяснения почему такое поведение логично, как и в прошлый раз, я буду скрывать под спойлером. Сразу оговорюсь, что не претендую на непоколебимую истину своих версий и буду рад их обсудить. В разгадывании вам может помочь отличный русский перевод спецификации ECMAScript 5, за который большое спасибо iliakan!

1. Главный вопрос жизни, вселенной и всего такого

"3" -+-+-+ "1" + "1" / "3" * "6" + "2"

Решение
"3" -+-+-+ "1" + "1" / "3" * "6" + "2" == "42"

Как мы уже знаем из прошлого поста оператор “+” выполняет либо конкатенацию строк, либо сложение, либо приведение к числу. Т.е.
“3” + 2 == “32”

а не 5, как можно было бы подумать.

Кроме этого, вы можете бросить унарный оператор “+” или “-” на выражение, чтобы изменить его знак и сделать вещи красивее и читабельнее.

С учетом всего вышесказанного:
+ “1” === 1
-+ “1” === -1
+-+ “1” === -1
…
-+-+-+ === -1
"3" -+-+-+ "1" === 2  //вычитание производится над числами


Дальше вспомним приоритет операций: / * +
“1”/”3” === 0.3333…
“1” / ”3” * ”6” === 2
2 + 2 === 4
4 + “2” === “42”


Читать дальше →

jQuery.viewport или как я искал элементы на экране

Время на прочтение13 мин
Охват и читатели60K

Равно как у каждой девушки должно быть «маленькое черное платьице», у каждого front-end разработчика должен быть «маленький черный плагинчик»… как-то не очень звучит, пусть будет «маленький функциональный плагинчик», так о чем это я, я это о том, что хочу одним таким поделиться.

Представленный плагин позволяет определять положение какого-либо элемента/набора элементов, относительно области просмотра. Функционально, он расширяет набор псевдо-селекторов, а так же добавляет трекер элементов.

Так же, под катом, я расскажу о процессе написания плагина, с какими трудностями столкнулся и т.д., если я Вас заинтересовал — милости прошу под кат.
Читать дальше →

Сборка проектов с помощью Gulp.js. Семинар в Яндексе

Время на прочтение8 мин
Охват и читатели30K
Привет, меня зовут Борис. Я работаю в Яндексе в отделе тестирования и создаю инструменты, которые позволяют сделать жизнь наших тестировщиков проще и счастливее. Наша команда отчасти исследовательская, поэтому мы можем позволить себе использовать довольно необычные инструменты и эксперименты. Недавно я рассказал своим коллегам об одном из таких экспериментов: Gulp.js. Сегодня я хотел бы поделиться этим опытом с вами.



Для начала немного предыстории, о том, как развивались веб-технологии. В начале не было фронтенда как отдельного понятия, большая часть логики выполнялась на сервере. Поэтому разнообразные задачи по сборке скриптов и стилей, а также подготовка картинок, шрифтов и других ресурсов выполнялись бэкэндом, и их сборщиками, например, Apache Ant или Maven. Фронтенд оказывался в невыгодном положении, инструменты, предоставляемые этими сборщиками не очень подходили для него. Эту проблему начали решать только недавно, когда появился Grunt. Это первый сборщик, написанный на JS. Каждый фронтендер знает JavaScript, поэтому может без проблем писать задачи под Grunt и разбираться в уже написанных. Это и обусловило успех этого сборщика. У Grunt есть куча преимуществ, но есть и недостатки.
Читать дальше →

Всё, что вы хотели знать об областях видимости в JavaScript (но боялись спросить)

Время на прочтение8 мин
Охват и читатели83K
У JS есть несколько концепций, связанных с областью видимости (scope), которые не всегда ясны начинающим разработчикам (и иногда даже опытным). Эта статья посвящена тем, кто стремится погрузиться в пучину областей видимости JS, услышав такие слова, как область видимости, замыкание, “this”, область имён, область видимости функции, глобальные переменные, лексическая область видимости, приватные и публичные области… Надеюсь, по прочтению материала вы сможете ответить на следующие вопросы:

— что такое область видимости?
— что есть глобальная/локальная ОВ?
— что есть пространство имён и чем оно отличается от ОВ?
— что обозначает ключевое слово this, и как оно относится с ОВ?
— что такое функциональная и лексическая ОВ?
— что такое замыкание?
— как мне всё это понять и сотворить?
Читать дальше →

Создание приложений OS X с помощью JavaScript

Время на прочтение13 мин
Охват и читатели21K
Недавно в OS X Yosemite была представлена возможность использования JavaScript для автоматизации. Это открывает возможность получать доступ к нативным* фреймворкам OS X из JavaScript. Я тут покопался в этом новом мире и собрал несколько примеров. В этом посте я объясню основы и шаг за шагом покажу процесс создания небольшого приложения
Читать дальше →

Sqimitive.js — Frontend Primitive или «Backbone без фантиков»

Время на прочтение31 мин
Охват и читатели20K
Уже довольно давно большинство сайтов перестало быть набором HTML/PHP/CSS/JS-файлов, которые достаточно просто загрузить на сервер. Bower, Grunt, Component.js, AMD, Require.js, CoffeeScript, Clojure, Composer, npm, LESS и ещё 100500 инструментов — всё это сегодня применяется для сборки проектов, обновления компонентов, загрузки зависимостей, сжатия кода, компиляции из одного JavaScript в другой, подтасовки карт, прополки огорода и даже готовки яичницы.

Многих людей это вдохновляет. Да что там — 95% моих знакомых в один голос твердят, как подключив всего пару-тройку библиотек с особой, уличной магией можно забабахать сайт на over-9000 зелёных австралийских долларов — и всего за один вечер, с перерывом на кофе и бублики.

А я — странный человек. Не люблю смешения языков, технологий, библиотек. Angular, Knockout, React — они все хороши, но каждая — по-своему сложна. А ведь есть и «гибриды», где сходится сразу несколько миров — как Ember и Knockout.Bootstrap. Вдобавок, многие построены на jQuery — впрочем, к ней даже у меня претензий нет; наверное, таким и должен был быть JavaScript.

Как бы то ни было, реальность беззастенчиво входит в контакт с мечтами и расставляет точки над «i». Мне так же приходится писать на «new & popular» — а когда пишешь, душа томится и просится создать очередной велосипед… а ей разве откажешь? Она ведь как дитя малое.

Велосипед был создан. Велосипед без фантиков. Такой же простой, как автомат Калашникова, и многогранный, как швейцарский нож, где вместо наследования — события, вместо моделей, коллекций и представлений — один класс, с неограниченной вложенностью и полной свободой действий, почти в два раза меньший Backbone.js, использующий Underscore.js и, необязательно, jQuery/Zepto.

Добро пожаловать в Sqimitive.
Zen Book: введение в нирвану

Хром, укравший рождество

Время на прочтение1 мин
Охват и читатели74K
Я люблю свою профессию. Сидишь, никого не трогаешь, починяешь примус пишешь код. К тебе подходит тестировщик и говорит, что в календаре на сайте в 2015 году нет рождества. Ты спокойно отвечаешь, что такого не бывает, открываешь страничку у себя и показываешь что все хорошо. Вот только тестировщику от этого не легче. Потому что у него действительно нет рождества.
Читать дальше →