Обновить
128K+

JavaScript *

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

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

Как подружить Socket.IO и backbone.js

Время на прочтение2 мин
Охват и читатели3.2K
Как мы все знаем, евенты backbone.js делятся на две категории:

  • Изменение информации в моделях/коллекциях
  • Евенты DOM — дерева

Недавно, мне необходимо было решить задачу подключения евентов socket.io к backbone, да так, что бы все было внутри приложения backbone, что бы евенты сокетов можно было объявить прямо во вьюхах и там же описать все действия, которые будут происходить по евенту.

Дабы не отступать от стиля backbone, хотелось реализовать возможность добавить событие socket.io так же, как событие DOM — дерева, а именно вот так:

var im = Backbone.View.extend({
  io_events: {
    'new_message': 'newMessage'
  },
  newMessage: function(message_data){
    //do something
  }
});

Долгие поиски по просторам интернета меня привели к подборке менее элегантных методов связки backbon'а и сокетов, которые, вроде, и решали задачу, но не так, как хотелось бы. Пришлось думать самому.
Читать дальше →

Особенности работы или «За что я люблю JavaScript»: Замыкания, Прототипирование и Контекст

Время на прочтение17 мин
Охват и читатели104K
Зародившись как скриптовый язык в помощь веб-разработчикам, с дальнейшим развитием JavaScript стал мощным инструментом разработки клиентской части, обеспечивающий удобство и интерактивность страницы прямо в браузере у пользователя.

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

Думаю, что большинство программистов, писавших код на JavaScript больше пары дней, сталкивались с этими особенностями. Цель данного топика не открыть что-то новое, а попытаться описать эти особенности «на пальцах» и «недостатки» сделать «преимуществами».

В данном топике будут рассматриваться:

  1. Замыкания
  2. Прототипирование
  3. Контекст выполнения

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

Знакомство с CoffeeScript

Время на прочтение8 мин
Охват и читатели120K
Статья представляет собой не исчерпывающее описание языка программирования CoffeeScript, а именно знакомство, обзор некоторых интересных возможностей. Целевая аудитория — те, кто еще не смотрел в сторону CoffeeScript, но так или иначе используют JavaScript в своих проектах.

CoffeeScript — это маленький язык, который транслируется в JavaScript. Его документация умещается на одной странице — coffeescript.org и отличается компактностью и наглядностью. Я даже сомневался в необходимости данной статьи, когда есть такое классное описание «от производителя», но все же рискнул расставить акценты и прояснить некоторые детали.
Читать дальше →

Работа с моделями данных в javascript

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

Мал по-малу из моего опыта и наших проектов родилась небольшая библиотека для работы с моделями в джаваскрипте. Она так и называется — Model.js.

Я расскажу вам вкратце об этой библиотеке и этим постом запрашиваю обратную связь у тех, кто создавая сложные джаваскрипт-приложения, уже решает эту проблему каким-то определенным образом без фреймворков. Интересно также и мнение тех, кто только подыскивает подходящий инструмент для своих нужд: какой инструмент вам нужен и насколько вам подходит Model.js?
Читать дальше →

Вывод метаданных модели MVC в динамическую разметку

Время на прочтение11 мин
Охват и читатели3.2K
В ASP.NET MVC метаданные — атрибуты, описывающие поля модели, используются как при генерации разметки (вывод названия поля, его заполнителя и т.д.), так и при валидации данных (вывод правил валидации). Условно можно выделить 2 вида валидации:
  • клиентская валидация
  • серверная валидация

Клиентская валидация хороша тем, что пользователь сразу же видит допущенные ошибки в заполнении полей и может внести поправки без необходимости отправлять данные серверу (ненавязчивая валидация). Именно этот тип валидации необходим в нашем случае.

в чем собственно проблема ?
При использовании классического подхода к генерации разметки все работает автоматически, но что если мы используем ajax и формируем html разметку динамически на клиенте? В этом случае автоматически ничего не добавится в разметку. Можно конечно же все необходимое добавить вручную и казалось бы проблема исчерпана, но здесь встает проблема дублирования кода, так как одни и те же данные приходится описывать дважды — на сервере и на клиенте, что в свою очередь влечет другие проблемы. В ряде случаев динамическая разметка очень удобна, но здесь встает вопрос о выводе метаданных модели и валидации данных на стороне клиента. Об этом речь пойдет далее.

Итак, необходимо реализовать автоматический вывод метаданных модели MVC на клиентскую сторону и ненавязчивую валидацию.
Читать дальше →

AngularJs. Отложенная загрузка модулей

Время на прочтение5 мин
Охват и читатели34K
AngularJs – великолепный фреймворк для разработки web-приложений. Разработка бизнес-логики приложения полностью отделена от сопутствующей суеты вокруг DOM. Angular модульный – это замечательно, но так же является источником проблемы. Количество модулей быстро растёт. И если директивы ещё можно упаковывать в отдельные пакеты типа angular-ui, то с контроллёрами бизнес-логики всё сложнее. Всё становится ещё хуже, когда требования безопасности в принципе запрещают загрузку на клиента контроллёров с бизнес-логикой, которые недоступны текущему пользователю. При развитой ролевой системе доступа к приложению масштаб проблемы становится очевиден.
Решение

Время подключать исходники. Введение в Source Maps

Время на прочтение19 мин
Охват и читатели57K
В современной разработке ваш код сильно отличается от кода на «боевом» сервере (production) после компиляции, минификации, объединения и разных оптимизаций. Тут-то и вступают в игру карты кода (source maps), показывая точное соответствие элементов готового рабочего кода проекта и вашего кода разработки. В этом вводном уроке мы возьмём простой проект и запустим его с помощью различных компиляторов JavaScript с целью посмотреть работу карт кода в браузере.
Читать дальше →

Dvelum или как я искал серебряную пулю

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

Была у меня недавно такая задачка. Мне надо было сделать небольшое веб-приложение, которое должно было помочь работе врача. Use-Casе‘ов там не много, посмотреть кто сегодня записан на прием, возможность посмотреть историю болезни, занести новые данные и создать нового пациента. Делов то…

Времени у меня было много, спешить некуда. Сначала подумал спрограмить по быстрому на GWT + SmartGWT, но подумалось мне, что пора бы что нибудь новое посмотреть. К тому же были явные намеки, что появятся мелкие заказы подобного рода, для библиотек там всяких и мелких фирмочек. Хотелось нечто простое с одной стороны, но в тоже время достаточно мощное.
Читать дальше →

Удлинитель субтитров формата SubRip (.srt)

Время на прочтение3 мин
Охват и читатели8.5K
Если у человека есть практика общения на иностранном языке и понимания на слух, субтитры для него — всего лишь подспорье, значение которого зависит от разборчивости, нормативности, сложности и скорости речи на экране. Но если человек всего лишь сносно читает на иностранном, субтитры для него — основной источник информации.

К сожалению, во втором случае обычного времени показа титров бывает недостаточно. Удлинить его можно во многих программах (например, в SubtitleEdit) — но иногда это удлинение ограничено разумными пределами, да и запускать для такого простого действия полноценный редактор не всегда удобно.

Поэтому я попробовал написать простые скрипты только под эту нужду и выбрал два принципа удлинения времени.
Читать дальше →

Мобильная веб-разработка: жесты, фреймворки, цифры

Время на прочтение4 мин
Охват и читатели63K
Продолжая тему веб-разработки мобильных сайтов и приложений под мобильные устройства нельзя не затронуть такую тему как Фреймворки для манипуляции DOM и отправкой асинхронных запросов.
Стандартом на десктопе уже давно стал jQuery, но он никуда не годится для разработки под мобильную платформу. Давайте посмотрим, как jQuery дружит с мобильными устройствами.

Посмотреть

uptodate.js — библиотека для автообновления элементов времени

Время на прочтение1 мин
Охват и читатели18K
Как часто Вы используете конструкции вида «5 минут назад», «Полчаса назад» на вашем сайте? А что если пользователь открыл вкладку и забыл про нее на пару часов? «5 минут назад» явно теряет свою актуальность.
Именно для того чтобы исправить это досадное недоразумение служит uptodate.js

image

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

Пишем плагин для IntelliJ IDEA, добавляем функциональности редактору кода

Время на прочтение5 мин
Охват и читатели32K
Начиная работать в IntelliJ IDEA, обнаружил отсутствие удобной комбинации клавиш, которой пользуюсь в Eclipse — Ctrl+Alt+Up. По этой комбинации выделенный блок текста или строка, копируется вверх с перемещением курсора в начало скопированного блока.
В Idea есть действие по умолчанию на Ctrl+D, которое копирует блок вниз (Ctrl+Alt+Down в Eclipse), но невозможно добавить аналогичное действие вверх. После гугления был задан вопрос в Q&A, оставшийся без ответа. Заведён issue на jetbrains. Все эти действия не дали ответа, поэтому решено было написать небольшой плагин для Idea.
Далее

Кастомизация скроллбаров в браузере: компромисс между технологиями html, css, js и удобством использования

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


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



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

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

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

Основной цикл в Javascript

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


Все мы слышали про ajax и node.js. Они прочно обосновались уже не просто в словарном запасе, но и в наборе инструментов веб-разработчика. Ajax — асинхронное подтягивание данных с сервера на страницу, node — фреймворк с асинхронным IO. Но как в таком однопоточном языке, как Javascript, реализуется та самая асинхронность?

Вы, наверное, уже догадались из заголовка, речь пойдет об основном цикле («main loop»).
Читать дальше →

Оканчивается эпоха восьмеричных чисел с ведущим нулём в языке JavaScript

Время на прочтение1 мин
Охват и читатели18K
Равенство parseInt("042") === 42 (как и другие ему подобные) станет верным в Firefox следующей версии (Firefox 21) и в более новых, хотя прежде Firefox действовал по образу и подобию языка Си, считая восьмеричными числа, запись которых начиналася нулём — так что вызов parseInt("042") давал тогда значение 34.

Обсуждение в мозилловской багзилле показывает, что перемена эта произошла под влиянием ECMAScript 5 и соответствует изменениям, случившимся в других браузерах (Safari 6, Google Chrome 23 и др.), в движке V8 (и в основанном на нём Node.js, например), так что в этом году Firefox оставался последним оплотом восьмеричности.

Теперь оплот этот не устоял, оплот этот пал. Обновите свои сайты по мере необходимости, особенно если они имели дело с обработкою записей времени, где нередко попадаются числа с ведущим нулём.

Немного об использовании this

Время на прочтение2 мин
Охват и читатели2.2K
Доброго времени суток, господа!

В джаваскрипте существует очень много интересных нюансов, которые едва ли можно встретить в других языках программирования. Рассмотрим самый нужный, на мой взгляд, из них — this.
Данный пост поможет освежить знания по этой теме.
Я не буду долго объяснять теорию, лучше сразу перейдем к коду и подумаем, что же произойдет в результате его выполнения.
Читать дальше →

Verlet.js — физический движок на основе метода Верле

Время на прочтение1 мин
Охват и читатели40K
Метод численного интегрирования Верле издавна использовался для вычисления траекторий частиц. Сам метод был впервые использован ещё в 1791 году французским астрономом Жаном-Батистом-Жозефом Деламбром. В 1907 норвежский математик и физик Карл Штёрмер использовал его для моделирования движения частиц в магнитном поле, поэтому иногда этот метод называют методом Штёрмера. Современное название этот алгоритм получил от имени французского физика Лу Верле, который в 1967 году использовал его в моделировании молекулярной динамики. В последнее время метод Верле применяется и в разработке компьютерных игр.
Читать дальше →

Новая CSS директива @supports

Время на прочтение3 мин
Охват и читатели45K
Проверка на поддержку конкретных технологий браузером с помощью JavaScript по праву считается наилучшей практикой при клиент-сайд разработке (Часто используют другой способ, заключающийся в проверке из какого браузера пользователь просматривает страницу — Прим. пер.), но, к сожалению, такую проверку нельзя было сделать с использованием только лишь CSS. Firefox, Chrome и Opera недавно объявили о поддержке CSS директивы @supports и CSS.supports (JavaScript), которые помогут разработчикам определять справится ли браузер пользователя с CSS свойством или нет. Давайте посмотрим на них в деле!
Читать дальше →

tFormer.js — велосипед для валидации форм

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

tFormer.js — empower your HTML forms



Предисловие:


Вам приходилось верстать формы? Приходилось писать скрипт для валидации этих форм на клиенте? Доводилось ли использовать уже существующие плагины/надстройки для валидации форм?
Мне приходилось, но я не был на 100% удовлетворен ни от подхода решения задачи в лоб (собственный скрипт валидации для каждого проекта под его формы), ни от того, как работают существующие сторонние плагины.

Проблема:


Основными проблемами собственных скриптов и плагинов всегда были — гибкость, удобство и простота.
Большое количество data-attributes, необходимых для конфигурации скриптов (как это в Parsley.js) делают и код менее читабельным, и никогда не помнишь, как все они пишутся. Не просто…
Не все плагины хорошо подходили под желаемые HTML-формы, а постоянно писать свои скрипты под разные формы не всегда удобно и разумно.

Задача:


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

Решение:


Решение вылилось в небольшой опенсорсный плагин, который получил название tFormer.js.
Подробности

Простой способ управления удалёнными устройствами

Время на прочтение4 мин
Охват и читатели23K
Что хотелось:

  • при завершении задачи в jenkins выводить уведомление на компьютере и как дополнение — вывести его на физический дисплей, подключенный к arduino;
  • интерфейс, который можно открыть на телефоне или планшете, для управления проигрывателем музыки на компьютере и видеоплеером на raspberry pi;
  • интерфейс, доступный снаружи локальной сети, для вывода значения с датчиков, установленных на arduino.

Что получилось:

  • клиент, запускаемый на устройстве, с декларацией методов на python;
  • RESTful api для запуска «методов»(картинка справа выведена через него);
  • «панели управления» с web-интерфейсом;
  • сервис для управления устройствами, методами и панелями.

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