Обновить
256K+

JavaScript *

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

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

Ruby-встречи в Санкт-Петербурге снова в моде

Время на прочтение2 мин
Охват и читатели3.4K
В четверг 4 октября в Бизнес Инкубаторе «Ингрия» прошла первая встреча Saint Petersburg Ruby User Group. Хотелось бы провести некую ретроспективу мероприятия, подвести итоги, собрать мнения и рассказать о дальнейших планах.
Читать дальше →

Визуализация характеристической функции

Время на прочтение3 мин
Охват и читатели8.9K
Многие в общих чертах представляют, как работает обратная лучевая трассировка: через каждый пиксель окна вывода алгоритм пропускает луч и вычисляет, с какими объектами сцены он пересекается и как в результате данный пиксель должен быть освещён. Алгоритм по сути требует, чтобы у нас была функция, которая для каждой позиции возвращает цвет точки. Разумеется, тот же подход можно применять не только для трёхмерной графики: любое изображение можно растеризовать таким образом, если у нас есть подходящая функция. Рассмотрим для примера, как с помощью такого подхода решить задачу визуализации диаграмм разложения на простые множители, о которой написал helarqjsc.

Моя реализация здесь. На картинке изображено 10! = 3628800, хотя всех деталей, разумеется, не видно.
Читать дальше →

TypeScript: статический анализ, автодополнение и немножко ES6 для JavaScript

Время на прочтение3 мин
Охват и читатели13K
image Такие web приложения как почта, карты, текстовые процессоры, инструменты для совместной работы, стали неотъемлемой частью нашей жизни. Язык программирования TypeScript был разработан для удовлетворения потребностей разработчиков подобных приложений. Он облегчает определение интерфейсов между программными компонентами, помогает изучать поведение существующих JavaScript библиотек, снижает риск конфликта имен посредством организации кода в динамично подгружаемые модули. Система типов TypeScript (которая кстати необязательна) позволяет использовать такие высокопроизводительные инструменты и техники разработки как статический анализ, символьная навигация, автодополнение и рефакторинг кода.
Читать дальше →

Премьера jQuery UI 1.9.0

Время на прочтение3 мин
Охват и читатели32K
image

За последние два с половиной года команда jQuery UI проделала огромную работу. Было выпущено более десятка релизов, исправлено больше 500 багов. Но основная задача была сделать jQuery UI как можно стабильнее, и гибче. В прошлом году мы замахнулись на серьезную цель:
Мы хотим полностью обновить весь проект к версии 2.0. Мы упростим API, улучшим стабильность, документацию, и обеспечим полное тестирование каждого плагина.

И вот сегодня мы рады представить вам первый важный шаг в достижении этой цели — новая версия jQuery UI 1.9.0. Она содержит сотни исправлений, лучшее покрытие тестами, и обновленным API. В добавок, мы развернули новую версию сайта, с улучшенной документацией.
Итак, что вас ждет

DBSlayer прокси на BASH за 5 минут или еще один способ отдать JSON из MySQL

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


Дело было вечером, делать было нечего, но дурная голова уркам покоя не давала… Данный пост создан как результат чисто-академического интереса. А началось все с того, что при разработке небольшого клиентского приложения для своих нужд, реализованного на Javascript, появилась необходимость взаимодействовать с уже существующей базой, где хранятся искомые данные. База — MySQL. Один из простых способов — реализация серверного скрипта (на PHP или еще каком языке), который по входящим параметрам делает нужный запрос и возвращает результат в JSON виде.

Другой вариант — это DBSlayer-прокси для MySQL. Кто про него не слышал, рассказываю в крадце: был создан в недрах New York Times как средство абстракции и балансирования нагрузки на БД. Подробнее можно почитать на сайте code.nytimes.com/projects/dbslayer/wiki/WhyUseIt. DBSlayer предоставляет API на основе JSON, известен в кругу NodeJS разработчиков.

Но это тоже не наш метод. Под катом приведено простое решение данной задачи на BASH.

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

Новые аттачи в Яндекс.Почте

Время на прочтение8 мин
Охват и читатели33K
Мы стремимся к тому, чтобы все части Яндекс.Почты одинаково хорошо работали у всех пользователей. Сегодня мы расскажем вам о том, как и зачем полностью переписали блок добавления аттачей. В этой статье — про отказ от флеша, поддержку возможностей современных браузеров и, как результат, увеличение скорости и надёжности загрузки файлов.

Проблема

Раньше всю аудиторию Яндекс.Почты мы разделяли на пользователей с флешем и без.

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

А вот с пользователями без флеша (8-10% от дневной аудитории) было сложнее. Мы предлагали им загружать файлы через обычную форму с />. Файлы из неё отправлялись через iframe вместе с содержимым самого письма, и это занимало много времени. Нажав кнопку «Отправить», пользователь долго ждал, пока загрузятся файлы.
Читать дальше →

Функциональное программирование на Javascript

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


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

Возьмем немного функций высшего порядка, добавим частичное применение функций, приправим fold с map-ом и получим Javascript DSL для работы с DOM.

Человеческим языком:
Простое и понятное введение в функциональное программирование на чистом и понятном Javascript.

В отличие от «Через тернии к Haskell» все разжевано (возможно даже слишком) и разложено по полочкам.

Прочтение статьи развоплотит миф о неприменимости ФП в реальной жизни. Вы сможете смотреть на решение одной и той же задачи с разных точек зрения. Прямо как на картинке.

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

JPG, прозрачность, Canvas, анимация

Время на прочтение8 мин
Охват и читатели34K
Здравствуйте, друзья!

Предлагаю вам небольшой урок на тему анимации спрайтов с альфаканалом на канве HTML5.

Преамбула.


Для начала нарисуем нечто
image

Почему круглое и желтое? Потому что у Дугласа Адамса в «Автостопом по галактике» есть такой Слартибартфаст — очень трогательный дядя, имеет приз за береговые линии при строительстве Земли. Поэтому на всякий случай будем анимировать желтую звезду.

Далее анимируем звезду

Особенности загрузки файлов на HTML5

Время на прочтение5 мин
Охват и читатели62K
После некоторого, опыта решил написать небольшую статью-шпаргалку о загрузке файлов с использованием возможностей HTML5, а именно File API.

Читайте далее:
  1. Поддержка браузерами.
  2. Загрузка через Form Data.
  3. Загрузка через File Reader.

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

Пишем сложное приложение на knockoutjs

Время на прочтение8 мин
Охват и читатели47K
Есть такая библиотека knockout.js. Она отличается от прочих хорошим туториалом для начинающих и кучей понятных рабочих примеров. Еще там стройная MVVM модель, декларативные связи и так далее.

Короче, если вы, как и я, поиграли с этой библиотекой, понаписали красивых формочек, и вам это понравилось, то все это дело захотелось применить на реальном проекте. И тут проблема — в реальном проекте формочек больше чем одна. А раз такие инструменты, то хочется single web page application и никак иначе. А делать один контроллер и все темплейты заверстывать на одну страницу тоже тупо и тормозно.

Под катом приведу основу своего сложного приложения. Само оно совсем не сложное, но модульное и допускает расширения, а темплейты и модели подгружаются динамически. Идея была подсмотрена в этой презентации — http://www.knockmeout.net/2012/08/thatconference-2012-session.html, код презентации выложен на github — https://github.com/rniemeyer/SamplePresentation — на базе этого кода будем писать свой.
Читать дальше →

Эмулятор Радио-86РК на JavaScript / Перезагрузка

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


В 2009 я написал первую версию эмулятора Радио-86РК на JavaScript. Тогда мне очень хотелось проверить саму идею подобного эмулятора, поэтому непосредственно реализация вышла несколько сумбурной, хотя и работала в итоге. Тогда я тестировал эмуляцию процессора Intel 8080 в основном визуально, на играх. Поэтому какой-либо рефакторинг кода был мучителен, так как было элементарно что-то сломать.

Недавно я запустил эмулятор РК на микрокомпьютере Maximite. В процессе работы эмуляция ядра Intel 8080 выделилась в отдельный проект i8080-core, в котором также появилась система тестирования. Тесты, особенно, 8080 CPU Execercier, позволяют весьма тщательно проверить качество эмуляции, особенно на предмет недокументированного поведения.

И тут пришла идея вернуться к эмулятору на JavaScript и перетестировать его. В итоге я фактически переписал эмулятор с нуля, разделив его на ядро процессора i8080-js, и, собственно, эмулятор РК.
Читать дальше →

Насколько Node.js быстрее, чем Windows Script Host? И о чём это говорит нам?

Время на прочтение3 мин
Охват и читатели2.9K
[цитата]Читатель, заходящий на сайт NodeJS.org, по центру страницы видит четыре цитаты от лидеров сайтостроения, выражающие удовольствие от Node. Цитаты меняются каждую минуту. При некотором везении (или терпении при перезагрузке страницы) читатель увидит похвалу от Клаудио Кальдато из Microsoft Open Technologies, Inc. — для вашего удобства я привожу эту цитату на иллюстрации справа.

Чем вызвана к жизни такая похвала? Ведь, казалось бы, задолго до того, как движок Node вообще успел появился на свет, у Microsoft существовало собственное (встроенное в Windows, начиная с Windows 98, а также устанавливаемое вместе с Internet Explorer 5) средство для запуска скриптов — Windows Script Host.

Ответ на этот вопрос очевиден: Node.js работает гораздо быстрее. (У него, кстати, ещё и API попроще. Но главное — скорость.)

Но насколько именно быстрее Node, чем WSH?

Это нетрудно выяснить опытным путём. Возьмём тот скрипт, при помощи которого evgeniyup вчера сравнивал быстродействие WSH с быстродействием виртуальной машины своего языка ObjectScript. В начале скрипта добавим десяток строк — «костыль» для Node.js, реализующий WSH-функцию WScript.Echo при её отсутствии.

показать (или вновь скрыть) исходный код скрипта
// CScript to Node.js:
if (typeof WScript == "undefined") WScript = {};
if (typeof WScript.Echo == "undefined") WScript.Echo = function(){
  var i;
  var log = '';
  for (i=0; i < arguments.length; i++){
     log += arguments[i];
  }
  console.log(log);
}

var fannkuch = function(n)
{
  var p = [], q = [], s = [], sign = 1, maxflips = 0, sum = 0;
  var i;
  for(i=1; i<=n; i++) p[i] = q[i] = s[i] = i;
  for(;;){
    // Copy and flip.
    var q1 = p[1];				// Cache 1st element.
    if(q1 != 1){
      for(i=2; i<=n; i++) q[i] = p[i];		// Work on a copy.
      var flips = 1;
      for(;;){
        var qq = q[q1];
        if(qq == 1){				// ... until 1st element is 1.
          sum = sum + sign*flips;
          if(flips > maxflips){
            maxflips = flips;
          } // New maximum?
          break;
        }
        q[q1] = q1;
        if(q1 >= 4){
          var i = 2, j = q1 - 1
          for(;;){ var tmp = q[i]; q[i] = q[j]; q[j] = tmp; if(++i >= --j) break; }
        }
        q1 = qq; flips++;
      }
    }
    // Permute.
    if(sign == 1){
      var tmp = p[2]; p[2] = p[1]; p[1] = tmp; sign = -1;	// Rotate 1<-2.
    }else{
      var tmp = p[2]; p[2] = p[3]; p[3] = tmp; sign = 1;	// Rotate 1<-2 and 1<-2<-3.
      for(i = 3;; i++){
        // print "mark 4"
        var sx = s[i];
        if(sx != 1){ s[i] = sx-1; break; }
        if(i == n) return [sum, maxflips];	// Out of permutations.
        s[i] = i;
        // Rotate 1<-...<-i+1.
        var t = p[1]; for(var j = 1; j <= i; j++){ p[j] = p[j+1]; } p[i+1] = t;
      }
    }
  }
}

function getTimeSec(){
 	var d = new Date();
    return (d.getTime() + d.getMilliseconds() / 1000.0) / 1000.0;
}

var n = 10;
var start_time = getTimeSec();
var r = fannkuch(n);
var sum = r[0], flips = r[1];
WScript.Echo(
    sum,"\n",
    "Pfannkuchen(",n,") = ",flips,"\n",
    "time = ",(getTimeSec() - start_time),"\n"
)

После этого достаточно запустить этот скрипт дважды (сперва в Node, затем в WSH) — и мы получим вот какой результат в консоли (и на скриншоте):

[скриншот]

Разница на два порядка! Вычисления, с которыми Node.js справляется за секунду, Windows Script Host перемалывал больше двух минут.

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

Понимание ООП в JavaScript [Часть 1]

Время на прочтение16 мин
Охват и читатели341K
— Прототипное наследование — это прекрасно
JavaScript — это объектно-ориентированный (ОО) язык, уходящий корнями в язык Self, несмотря на то, что внешне он выглядит как Java. Это обстоятельство делает язык действительно мощным благодаря некоторым приятным особенностям.

Одна из таких особенностей — это реализация прототипного наследования. Этот простой концепт является гибким и мощным. Он позволяет сделать наследование и поведение сущностями первого класса, также как и функции являются объектами первого класса в функциональных языках (включая JavaScript).

К счастью, в ECMAScript 5 появилось множество вещей, которые позволили поставить язык на правильный путь (некоторые из них раскрыты в этой статье). Также будет рассказано о недостатках дизайна JavaScript и будет произведено небольшое сравнение с классической моделью прототипного ОО (включая его достоинства и недостатки).
Читать дальше →

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

Пишем редактор карт изображений (html image map) на javascript / html5 / inline SVG

Время на прочтение5 мин
Охват и читатели47K
Карты изображений применяются в том случае, когда требуется создать ссылку формы, отличной от прямоугольной. Например, для презентационных сайтов, отображения планов/схем и т.п.

Раньше создавать такие карты было удобно в Adobe ImageReady, но начиная с версии CS3 эта программа больше не поставляется с Фотошопом. На сегодняшний день подобный функционал есть в Adobe Fireworks, но устанавливать эту программу только из-за редактора карт (для работы мне нужен только Фотошоп) — не очень хорошая идея. Существуют и онлайн-редакторы, которые написаны, в основном, с использованием canvas. В них отсутствует возможность редактировать созданные области на карте. Если ошиблись — придется все переделывать. Да и создавать эти области не слишком удобно. Еще одно неудобство заключается в том, что картинку приходится загружать на сервер. В общем, надо писать что-то свое.

Итак, задача:
— написать на javascript редактор, который позволит создавать карты изображений — загружаем картинку, рисуем области, получаем html-код. Если ошиблись — должна быть возможность отредактировать карту. Редактор должен работать в оффлайн-режиме. Обеспечить поддержку только современных браузеров, в том числе Internet Explorer 9.

Summer html image map creator
Читать дальше →

Интерактивная HTML5-визуализация по мотивам «Lost»

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


Поклонник одного из лучших телепроектов последних десяти лет "«Остаться в живых» («Затерянные», «Lost») программист Сантьяго Ортиз (Santiago Ortiz) создал прекрасный пример интерактивной визуализации взаимоотношений между главными и второстепенными героями шоу при помощи HTML5.

Сериал создавался силами более 30 сценаристов, которые должны были прорабатывать характеры и взаимоотношения персонажей, создавая при этом реалистичную атмосферу с точки зрения перемещения героев во времени, следить за непротиворечивостью событий, и при этом давать намёки на всевозможные загадки (например, почему Кейт видела в джунглях тёмную лошадь); при этом wiki-проект по мотивам шоу содержит более 7000 статей.
Узнать подробности

Doppio — JVM, Компилятор и дизассемблер в JavaScript

Время на прочтение2 мин
Охват и читатели9.2K
На сегодняшний день мы не испытываем недостатка в прекрасных вещах, которые написаны на JavaScript. Да и реализации JVM в JavaScript мы уже видели. Теме не менее, Doppio представляет собой наиболее полную и активно развивающуюся JVM.


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

SugarJS — Синтаксический сахар для JavaScript

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


Что такое SugarJS?


SugarJS — это open source (лицензия — MIT) библиотека Javascript, который расширяет нативные объекты полезными методами. Она разработана, чтобы быть интуитивным, ненавязчивым инструментом, повышающим выразительность кода, который позволял бы делать больше с меньшим количеством кода и меньше задумываясь над рутиной.

На самом деле у них очень информативный и простой сайт — где все уже хорошо написано.
Я просто постараюсь обозначить основные моменты.

Кратко...

  • Расширяет нативные элементы Javascript полезными, интуитивными методами.
  • Прост для понимания и в использовании.
  • Метод SugarJS не используется при наличии метода в родной реализации браузера.
  • Имеет систему тестирования, имеющую огромный набор тестов.
  • Расширяет возможности работы с датой и временем, обеспечивает их форматирование на нескольких языках (русский есть).
  • Отлично ладит с другими фреймворками и сторонним кодом.
  • Модульность, вы можете включать только нужные пакеты.
  • Полностью совместимый ECMAScript.
  • Заявлена поддержка всех основных браузеров, включая мобильные.
  • Поддерживает Node.js.
  • Имеет хорошую и удобную документацию.


Заинтересовало? Добро пожаловать под кат.
Читать дальше →

Эффектная анимация разрушения (Pixel Dust) на JavaScript

Время на прочтение5 мин
Охват и читатели44K
В процессе развития нашей игры на HTML5, мы столкнулись с дилеммой: рисовать для каждого элемента эффект разрушения или попробовать сделать это программно на JavaScript (canvas). Если с первым способом всё понятно (проверенно работает, но много работы художнику), то со вторым у нас были сомнения относительно скорости рендера, ведь это 60FPS x 64 x 4 байта ~ 1 МБ/сек. на один элемент, а если их 40 на одном экране?

Как оказалось, наши сомнения были напрасны...

Космики: моделирование эволюции многоклеточных организмов

Время на прочтение4 мин
Охват и читатели44K
Здравствуй, Хабр!

Несколько лет назад в прикладных целях я реализовал обычный Force-based визуализатор графов.

На меня произвело впечатление, как простые итеративные преобразования могут производить субъективно сложные и интересные вычисления, формируя нетривиальные визуально-кинетические модели.

Со временем возникло несколько идей, что интересного можно смоделировать.

Вот что получилось с одной из них (в кадре мелкие объекты, смотреть в HD):



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

Небольшая заметка о feature detection

Время на прочтение3 мин
Охват и читатели11K
В современном вебе используются две основные технологии определения возможностей браузера:
(а) распарсить юзер-агент, определить версию браузера и писать в коде свитчи по версии браузера;
(б) пытаться определять поддержку фич путём проверки нужных полей / вызовов нужных методов.

Исторически сложилось так, что второй вариант считается более true, и именно его реализуют все современные проекты. Достаточно сказать, что этим путём идёт jQuery.

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

Это всё хорошо и правильно, но только для небольших проектов.

И вот почему