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

в 19:59, , рубрики: css, html, javascript, веб-дизайн, Веб-разработка

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

Tracking.js

Несколько интересностей и полезностей для веб разработчика #25
Крошечная библиотека ( всего 7 кб ) содержит в себе различные техники компьютерного зрения в вебе. Tracking.js уже позволяет отслеживать различные объекты, цвета, лица как на фотографиях, так и с помощью веб-камеры. Проект собрал уже почти 2000 звезд на GitHub.

  var colors = new tracking.ColorTracker(['magenta', 'cyan', 'yellow']);

  colors.on('track', function(event) {
    if (event.data.length === 0) {
      // No colors were detected in this frame.
    } else {
      event.data.forEach(function(rect) {
        console.log(rect.x, rect.y, rect.height, rect.width, rect.color);
      });
    }
  });

  tracking.track('#myVideo', colors);

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

в 17:28, , рубрики: document.getSelection, javascript, jquery, Веб-разработка, смайлики, Эмоции
Эмоции.js

В статье описывается опыт создания текстового поля с возможностью вставки смайлов, проблемы которые мне встретились и их решения, а так же ссылка на репозиторий с готовым jQuery плагином. Если вам интересно, прошу под кат.
Читать полностью »

в 15:25, , рубрики: api, javascript, node.js, nodejs, text-to-speech, TTS, voice recognition, Yandex

Ознакомившись с обзором движков для распознавания речи, заметил там API от Яндекса. И на выходных написал небольшую обертку для Node.js для распознавания речи с целью поиска мата в своих телефонных разговорах. По мотивам топика на Хабре.

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

npm install yandex-speech

Исходники и примеры использования:
github: www.github.com/antirek/yandex-speech

Немного деталей:
Читать полностью »

в 14:41, , рубрики: javascript, Meteor.JS, node.js

Я начал работать с Meteor.js примерно полтора года назад, когда он был еще совсем сырым и нестабильным. Я сделал пару маленьких проектов, которые живы до сих пор, написал статью на Хабру и даже получил дикие проблемы в продакшене с забиванием CPU на 100% при том, что сервер почти ничего не делал. Но прошло время, и я решил поставить еще один эксперимент и разработать с использованием этого фреймворка проект средней сложности. Разработка затянулась, и в процессе я сформулировал свои правила того, как структурировать приложение, как решать проблемы с безопасностью, как деплоить и какие инструменты использовать на серверах. Об этом и расскажу.Читать полностью »

в 1:06, , рубрики: html, javascript, путешествия

Лето на исходе, а в отпуске еще не был. Решил посмотреть, куда можно поехать, не напрягаясь получением виз. Хотелось чего-то простого и наглядного. Не нашел. Пришлось сделать. JavaScript + LeafLetJS + из википедии загрузил данные для граждан Украины и России. Если кто-то знает хороший ресурс для Белоруссии, Грузии и других русскоязычных регионов — дайте знать — добавлю.

http://visareq.com

image

image

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

в 20:55, , рубрики: dependency injection, design patterns, dm.js, inversion of control, javascript, Проектирование и рефакторинг

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

Независимо от контекста исполнения, расширяемое и поддерживаемое javascript-приложение, как и приложение, написанное на любом другом языке, должно соответствовать некоторым архитектурным принципам. Одним из которых является инверсия управления. Читать полностью »

в 10:30, , рубрики: html, javascript, php, web-разработка, Веб-разработка

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

Очень часто веб-разработчики сталкиваются с проблемой большого количества мелких файлов. Картинки, скрипты, css — неудобно, все дела. Нужно как-то бороться с этим. import, спрайты, блаблабла — это хорошо, но можно попробовать и иначе. Мой вариант — упаковка всех необходимых ресурсов в архив на стороне сервера(реализация — на php), получение данных на клиенте, установка ресурсов в нужных местах.

Проблемы на данный момент: не придумал толком, как кешировать полученный архив, таким способом не стоит паковать динамический контент или большие файлы.
Для распаковки архива на клиенте использована библиотека JSZip, для удобства — jQuery.

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

в 7:42, , рубрики: javascript, асинхронное программирование, ненормальное программирование, парсинг

Наверное, каждый, кто использовал JavaScript, когда-либо сталкивался (или столкнётся в будущем) с асинхронными вызовами. Может быть, это будет обращение к базе на стороне сервера. Может быть — работа с таймером для создания анимации на сайте.

Для того, чтобы «побороть» асинхронность, используются разные инструменты от промисов до смены языка программирования. Но иногда очень хочется бросить всё и написать на чистом JS линейный код:

timeout(1000);
console.log('Hello, world!');

Можно ли реализовать нечто подобное? Разумеется, можно.
В данной статье мы рассмотрим один опасный, но действенный способ.
Читать полностью »

в 11:08, , рубрики: javascript, jquery, Matreshka, Matreshka.js, альтернативный фреймворк, Веб-разработка

Введение
Наследование
MK.Object
MK.Array
Matreshka.js v0.1
Matreshka.js v0.2
Реализация TodoMVC

Всем привет! В этом кратком посте, представляю на суд общестивенности долгожданную реализацию «Hello, world на стероидах» — TodoMVC на базе фреймворка Матрешка.
Matreshka.js — долгожданная реализация TodoMVC
Напомню, одной из идей Матрешки является удобное связывание данных и HTML элементов с помощью простых функций, которое имеет следующие преимущества перед решением той же задачи в других фреймворках:
1. Никакой логики в HTML коде. Мне, как человеку, который с трепетом относится к JavaScript и HTML, хотелось бы, чтоб язык программирования так и остался языком программировния, я язык разметки — языком разметки.
2. Не нужно отдельно слушать события данных, для того, чтоб обновить UI, и слушать события UI для того, чтоб обновить данные. Это возволяет избежать ошибок, типа «забыл повесить обработчик», так как не приходится хранить в голове несколько сущностей сразу. Вы задаёте правила, как данные синхронизируются с видом, а дальше работаете исключительно с данными.

this.bindElement( 'x', 'select.my-select' );

Подробности в статьях по ссылкам выше.

TodoMVC — эталонное приложение, включающее в себя наиболее распространенные и «неудобные» задачи, у которого есть спецификация и которое призвано помочь программисту выбрать понравившийся фреймворк. На одноименном сайте размещен список реализаций приложения, используя самые популярные фреймворки. На github проекта — больше (папка labs).

Реализацию приложения на базе Матрешки можно посмотреть здесь. А по этой ссылке — исходный код с аннотациями. Для тех, кто предпочитает русский язык английскому, прошу сюда.

Приложение, как вы можете видеть, состоит из трех файлов:
app.js — инициализация глобальных переменных (требуемых спецификацней TodoMVC) и приложения.
todos.js — само приложение (список дел) и коллекция этих дел. Включает в себя основную часть логики приложения и реакцию интерфейса. Там можно увидеть специальный переопределяемый метод itemRenderer, который возвращает HTML узел (или HTML строку), являющийся HTML узлом модели. Напомню, масссив можно менять: добавлять, удалять элементы, сортировать (с помощью методов, позаимстсованных из Array.prototype), UI будет реагировать смотстоятельно, без вмешательства разработчика.
todo.js — элемент коллекции (пункт списка дел).
Читать полностью »

в 6:52, , рубрики: $emit, $rootScope, angular, AngularJS, javascript, инициализация, событие

Если вы уже знаете, что такое AngularJS и пользуетесь им продолжительное время, вероятно перед вами уже стояла задача выполнения неких действий сразу после инициализации приложения. И после прочтения документации вы обнаруживаете, что такого способа “из коробки” нет)
Читать полностью »

1...1020...432433434...440450...603
Главная   |  Архив новостей  |   Android  |   Google  |   Apple  |   Microsoft  |   Информационная безопасность  |   Веб – разработка
Публикации RSS  |  Комментарии RSS
https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js