Рубрика «javascript» - 311

image
Идея для написания этой статьи возникла прошлым летом, когда я слушал доклад на конференции BigData по нейронным сетям. Лектор «посыпал» слушателей непривычными словечками «нейрон», «обучающая выборка», «тренировать модель»… «Ничего не понял — пора в менеджеры», — подумал я. Но недавно тема нейронных сетей все же коснулась моей работы и я решил на простом примере показать, как использовать этот инструмент на языке JavaScript.

Мы создадим нейронную сеть, с помощью которой будем распознавать ручное написание цифры от 0 до 9. Рабочий пример займет несколько строк. Код будет понятен даже тем программистам, которые не имели дело с нейронными сетями ранее. Как это все работает, можно будет посмотреть прямо в браузере.
Читать полностью »

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

Root — робот который помогает детям учить программирование - 1Читать полностью »

Настроить webpack по мануалу, запрограммировать ангуляр и даже послать json по ajax — кажись каждый может, но вот как взглянешь на сам код… В этом посте будет показана разница между нововведениями.

Итак вы открыли ноду и увидели, что почти все функции «из коробки» последним аргументом принимают колбэк.

var fs = require("fs");
fs.readdir(__dirname, function(error, files) {
    if (error) {
        console.error(error);
    } else {
        for (var i = 0, j = files.length; i < j; i++) {
            console.log(files[i]);
        }
    }
});

Пирамида смерти
Читать полностью »

В 2014 году по информации Smart Insights количество пользователей мобильных приложений превысило число пользователей десктопных. Одним из наиболее популярных инструментов для сбора статистики приложений на мобильных устройствах является Flurry. Инструмент полностью бесплатен, доступен для основных мобильных платформ и имеет мощный функционал. Вот основные показатели, которые предоставляет данный инструмент:

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

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

История о том, как заставить Flurry собирать статистику десктопных приложений - 1

В сети была найдена Flurry SDK для платформы BlackBerry. Компания Flurry предоставляет данную библиотеку по запросу на электронную почту. Интегрироваться с библиотекой для BlackBerry не удалось, исходные коды также не были найдены. Но был найден другой путь.
Читать полностью »

D3.js — это библиотека JavaScript для управления документами, в основе которых лежат данные. D3 помогает претворить данные в жизнь, используя HTML, SVG и CSS. D3 позволяет привязывать произвольные данные к DOM, и затем применять результаты манипуляций с ними к документу.

Для понимания статьи пригодится знание основ D3, и в ней мы рассмотрим реализацию алгоритмов визуализации графа на основе сил (Force-directed graph drawing algorithms), которая в D3 (version 3) имеет название Force Layout. Это класс алгоритмов визуализации графов, которые вычисляют позицию каждого узла, моделируя силу притяжения между каждой парой связанных узлов, а также отталкивающую силу между узлами.

image
Читать полностью »

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

Предупреждение читателю

Эта статья написана 24-го июня 2016-го года. Поскольку WebAssembly очень молодая и динамично развивающаяся технология, со временем многие описанные в данной статье вещи устареют или полностью изменятся — учитывайте это.

А теперь поехали.

Что такое WebAssembly?

Официальная документация говорит следующее: «WebAssembly или wasm это новый портабельный, эффективный по размеру и скорости загрузки формат компиляции для веба». Эм-м-м-м… Что? Формат чего? Текстовый или бинарный? Да, это откровенно плохое описание. Так что убирайте уже ваши баззворд-бинго карточки и я, на основе моего опыта, дам своё определение:
«WebAssembly или wasm это спецификация байткода для написания производительных, браузеро-независимых компонентов для веба». Это определение, тоже, конечно, не вершина эпистолярного жанра, но я попробую его дополнить. WebAssembly позволяет повысить производительность с помощью использования статически типизированных переменных, которые обходятся на рантайме значительно дешевле динамических. WebAssembly разрабатывается W3C Community Group и планируется быть внедрённым во все основные браузеры. И с этого момента на стол выкладывается киллер-фича: вы сможете писать код веб-компонентов на любом языке программирования.

Теперь звучит лучше, неправда ли?
Читать полностью »

Отображение списка (множества) элементов на странице — это стандартная задача для практически любого web-приложения. В этом посте я хотел бы поделиться некоторыми советами по повышению производительности.

Для тестового примера я создам небольшое приложение, которое рисует множество «целей» (кругов) на элементе canvas. Я буду использовать redux как хранилище данных, но эти советы подойдут и для многих других способов хранения состояния.
Так же эти оптимизации можно применять с react-redux, но для простоты описания я не буду использовать эту библиотеку.

Данные советы могут повысить производительность приложения в 20 раз.

Читать полностью »

Google Chart Tools API – это многофункциональный набор инструментов для визуализации данных. С помощью него можно относительно легко строить графики и диаграммы на сайте.

Функционал Google Chart Tools API включает в себя:

  • Динамические пиктограммы;
  • Карты;
  • Циферблаты и дисплеи;
  • Формулы;
  • QR-коды;
  • Возможность создавать свои инструменты визуализации и использовать сторонние.

Карта

Сделаем визуализацию данных с помощью карты, раскрашенной в соответствии с внесенными данными. Для начала подключаем файлы, loader.js обязателен.
Читать полностью »

Обзор новорождённой платформы Scorocode - 1

BaaS-платформы (Backend as a Service) сделали разработку и сопровождение backend'а для мобильных и веб-приложений достаточно простыми и предсказуемыми процессами. Одним из флагманов движения BaaS стала компания Parse, но в 2016 году она заявила о прекращении обслуживания клиентов с 2017 года.

В связи с закрытием их сервиса и отсутствием русскоязычных облачных BaaS, мы решили создать собственный аналог — Scorocode. Об этом под катом.
Читать полностью »

Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы и интересные материалы из области фронтенда

Дайджест свежих материалов из мира фронтенда за последнюю неделю №217 (20 — 26 июня 2016) - 1
Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js