JavaScript *

На днях потребовалось ускорить открытие сайта. Проблема заключалась в том, что одни только JS-файлы, даже собранные в один и сжатые обфускацией, весили более 500kB, а ведь еще есть css тоже довольно крупный.
В связи с этим, пользователям, у которых файлы закешированы (например новый пользователь или после билда сменилась версия), с медленным интернетом приходилось ждать довольно долго, смотря на белый экран.

Всем привет

Вариантов использования Google Apps Scripts множество. Мой друг работал с иностранным заказчиком и тот просил каждый день отчет ему на почту с текстом кто и что делал. В результате он попросил сотрудников трэкать все в гугл таблицу не позднее 21:00, потом стартовал скрипт и собирал данные и слал по нужному адресу.
В статье я приведу простой и, как мне кажется, полезный пример использования Google Apps Scripts.

Что такое Google Apps Scripts?

Если коротко, то это сервис который позволяет на JavaScript писать скрипты, работающие в облаке Google. Сервис предоставляет широкий API, к примеру в данной статье мы создадим гугл таблицу на основе метрик приложения из Flurry.

Уважаемые хабровчане!

Сегодня и до следующей среды у нас проводится акция.
Объявлена скидка 20% на книгу

JavaScript: сильные стороны

Дугласа Крокфорда

см. Часть 1

Производительность: создание классов через __proto__

По производительности Object.create к сожалению не дает больших результатов (в особенности со вторым аргументом — дескрипторами). В отличии от использования __proto__ напрямую, который оказался даже быстрее связки функции–конструктора с оператором new — см. jsPerf. Отмечу также, что использование дескрипторов не особо удобно.

Здравствуй, <%= habrauser %>!

Я очень люблю фреймворк Ruby On Rails, он правда очень и очень крут. Он позволяет в кратчайшие сроки реализовать твои замыслы. Раньше я много писал на нем, но сегодня я front-end разработчик. Когда я узнал о методологии БЭМ, я был в полном восторге, потому что так или иначе ты сам приходишь к чему-то подобному. Хорошо, когда дзен-процесс сокращается в разы. О том, что такое БЭМ можно прочитать тут и тут. Недавно прошедший BEMup окончательно расставил все на свои места. Мне были просто необходимы инструменты для работы с БЭМ в рамках проектов на Ruby on Rails. Конкретных решений не существовало, а bem-tools не подходит по вполне понятным причинам, описанным ниже. Я решил написать bem-tools на Ruby.

Возможности встроенного в браузер инструмента Chrome Developer Tools можно расширить с помощью сниппетов. Это ускоряет разработку и упрощает рабочий процесс. Хорошая коллекция сниппетов есть на GitHub'е.

Сниппеты в Google Chrome

Подробно о функциях сниппетов можно почитать в официальной документации Chrome. А вот краткая инструкция:

1. Зайти в «chrome://flags» — Отметить «Enable Developer Tools experiments».
2. Открыть DevTools: «Settings» — «Developer Tools Experiments» — Отметить «Snippets support».
3. После перезагрузки во вкладке DevTools «Sources» появится «Snippets», где можно управлять сниппетами:

Я уже писал краткий пост про Tessel, микроконтроллер, программируемый на JavaScript.

Сегодня Technical Machine (так называется компания, создавшая Tessel) начала сбор предзаказов, посредством кампании на Dragon Innovations (crowdfunding-платформа для hardware-проектов).

Ценник, как по мне, далёк от демократичного — получить Tessel с одним модулем можно получить заплатив от $89 $99.

Более подробно об опциях кампании и ценах вы можете узнать под катом, для самых нетерпеливых cсылка на кампанию

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

На странице есть набор элементов типа А, которые можно по одному или группой перетащить в элемент типа Б. Пользователь должен видеть, перетаскивает он один элемент или несколько. Перетаскивать один элемент просто, достаточно присвоить свойству draggable значение true, наверняка, все это делали.

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

В современном мире вряд ли найдется Frontend-разработчик, который никогда не пользовался библиотекой jQuery. Именно jQuery значительно упростила работу с JavaScript и позволила разработчикам не беспокоиться о кросс-браузерных вопросах.

Команда jQuery работает над проектом уже почти семь лет. Дэйв Мэтвин (Dave Methvin) – президент jQuery Foundation – прошёл долгий путь от участника сообщества до главного разработчика ядра. Сейчас Дэйв готовится к приезду на первую российскую конференцию, посвящённую библиотеке jQuery, #jQueryRussia.



Организатор конференции, компания ITmozg, задал Дэйву несколько вопросов о развитии библиотеки, сообщества и основных трендах Frontend-разработки.

Приветствую хабражителей. Я бы хотел рассказать о своем расширении и попросить небольшой помощи.
Называется расширение Total bookmarks, т.к. его интерфейс почти полностью позаимствован у Total commander'а.

XSS неспроста стоит в верхней части списка опасностей OWASP TOP 10. Любой толковый программист о них знает. Но это не мешает статистике: восемь из десяти веб-приложений имеют XSS-уязвимости. А если вспомнить личный опыт пентестов банков, то более реальной представляется картина «десять из десяти». Кажется, тема изъезжена от и до, однако есть подвид XSS, который по разным причинам потерялся. Это — DOM Based XSS. И как раз о нем я сегодня пишу.

Интересна ли вам возможность писать в JavaScript вот такие штуки?

$ ('.btn-toogle').onclick (lambda $ (this).toggleClass ('active'));

var chars = Array.prototype.forEach.call ('0123456789abcdef', lambda arg.charCodeAt (0));

function fn (arg1 = 100, arg2 = 'test'){ ... }

var html = h`
    <div>
        <a href="...">link</a>
    </div>`;

for (var key, value in object) 
    console.log (key + ' = ' + value);

Тогда, возможно, вас заинтересует эта статья.

Один из наиболее сложных аспектов создания нашей игры заключался в том, чтобы совместить две очень крутые библиотеки: Easel.js и Box2dWeb. В данном материале мы рассмотрим основы создания главных игровыч объектов игры так, что вы сможете перевести box2d размеры в систему X, Y, и параметры вращения предметов на дисплее в easel.

Навеяно статьёй про науку под замком. Хотя моя статья не об этом, но тоже про доступ к электронным библиотекам, хотя и другого характера.

Работаю в западном… не, всё же северном университете, и приходится читать немало статей из своей области исследований. Благо, тут университетская библиотека подписана на множество электронных библиотек (интересно, сколько это удовольствие стоит… не, не так – сколько буржуи наживаются на наших статьях?). По моей тематике таких библиотек три – ACM, IEEE и Springer. А в них – львиная доля того, что мне нужно. И всё бы здорово, но есть одно НО.

Эта статья родилась как логическое продолжение пятничного поста о методе Бутстрапа, а особенно, комментариев к нему. Не защищая метод Бутстрапа, стоит уделить внимание методам Монте-Карло. Здесь я хочу поделиться своим опытом применения Монте-Карло в одной из своих практических задач, а также обоснованием законности этого применения.

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

Постановка задачи

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

'hello, %(thing)s' % {'thing': 'world'}

Или вот так:

'hello, {thing}'.format(**{'thing': 'world'})

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

Webflow

С помощью данного сервиса вы сможете сверстать кроссбраузерный отзывчивый макет за 55 минут. Очень красивый и удобный интерфейс. Идеальное решение для веб-дизайнеров, 26 000 из которых уже используют Webflow. Для создания двух проектов сервис бесплатный, а в дальнейшей перспективе вас ждут вполне демократичные цены. Инструмент реально «крутой».

Если Вам GUI для верстки не комильфо сам по себе как для меня, все равно рекомендую зарегистрироваться и экспортировать парочку responsive макетов. А еще есть простой генератор отзывчивого лэйаута и Responsive Patterns.

Parallax.js

Функциональный и простой инструмент для создания параллакс эффекта.

Большинству программистов на языке JavaScript, успевших ознакомиться с Node.js, хорошо известен модуль fs, который в API Node служит для доступа к файловой системе.

Matthew Phillips (на фото справа) предпринял успешную попытку создания во браузерном (клиентском) джаваскрипте частичного аналога этого нодовского модуля. Исходный код, опубликованный им на Гитхабе к началу нынешнего (2013) года, поддерживает работу с файлами и каталогами виртуальной файловой системы, в роли которой в Chrome выступает FileSystem API, а в Firefox и в IE — IndexedDB.

Это небольшой учебный пример редактора карты памяти. За счёт очень подробных комментариев и простого кода, понять его не составит проблем. Статья предназначена для знающих и изучающих Javascript.

Я опишу особенности создания редактора карты памяти, который использует базу данных браузера. Причём, это будет не LocalStorage, который не может превышать 5 мегабайт. Объём данных сможет превысить 100-200 мегабайт, так как используется IndexedDB или webSQL, смотря что доступно в конкретном браузере.

Исходники выложены в открытый доступ на Github.

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

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

1. Ydn.db — хранение информации в базе данных браузера с автоматическим выбором лучшего метода и единым API
2. jQuery context menu — контекстное меню, которое можно наполнять динамически при помощи Javascript
3. jsPlumb — расширение позволяющее рисовать линии между HTML элементами
4. jQuery UI — Drag&drop — перетаскивание элементов между собой

PS: Также мы научимся создавать «синглтон», облегчать себе асинхронное программирование при помощи jQuery и встроенного объекта $.Deferred(), а также при помощи плагина LiveReload, сохраним краску на клавише F5 при изменении свойств CSS и кода в HTML и Javascript.