Обновить
256K+

JavaScript *

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

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

Несколько интересностей и полезностей для веб-разработчика #39

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

Unheap




Огромная коллекция реально качественных и нужных jQuery плагинов, грамотно расфасованная по области применения. В Unheap 5 основных разделов UI, Inputs, Media, Nav, Other и каждый из них содержит еще с десяток подкатегорий. В общей сложности на данный момент каталог насчитывает более 1000 различных плагинов.
Читать дальше →

Введение в разработку слайд-шоу на JavaScript

Время на прочтение26 мин
Охват и читатели90K
В этой статье мы опишем основные принципы построения слайд-шоу на JavaScript, то, из чего они строятся (HTML, CSS, JavaScript) и техники, которые используются при их создании.

JS-код будет представлен в двух видах – ванильном и jQuery. Это сделано специально, чтобы подчеркнуть: в современных браузерах даже простой JS можно прекрасно использовать, особенно комбинируя его с анимациями и переходами CSS. jQuery хорош, если нам не хочется волноваться насчёт несовместимостей браузеров или использовать более простой API. Предоставленный код преследует лишь в демонстрационные цели.

В примерах с ванильным JS я использую простейший метод инициализации объектов, init(). Этот метод занимается вызовом нужного кода для создания экземпляра объекта через new. В этой ветке на Stack Overflow всё объясняется подробнее. Почему объекты, а не функции? Для ответа на этот вопрос понадобилась бы отдельная статья – но, в общем, просто чтобы код был более организованным и простым для повторного использования.
Читать дальше →

Практика функционального программирования на JavaScript с использованием Ramda

Время на прочтение3 мин
Охват и читатели21K
Мы в rangle.io давно увлекаемся функциональным программированием, и уже опробовали Underscore и Lodash. Но недавно мы наткнулись на библиотеку Ramda, которая на первый взгляд похожа на Underscore, но отличается в небольшой, но важной области. Ramda предлагает примерно тот же набор методов, что и Underscore, но так организовывает работу с ними, что функциональная композиция становится легче.

Разница между Ramda и Underscore – в двух ключевых местах – каррирование и композиция.
Читать дальше →

Создаём своё первое десктопное приложение при помощи HTML, JS и Node-WebKit

Время на прочтение4 мин
Охват и читатели119K
В наше время при помощи JavaScript и HTML можно сделать практически всё. А благодаря Node-WebKit (недавно переименован в NW.js) можно делать даже десктопные приложения, которые выглядят, как нативные и имеют доступ ко всем частям ОС. Сегодня мы покажем, как создать простое десктопное приложение при помощи Node-WebKit, используя jQuery и несколько модулей для Node.js.

Node-WebKit — комбинация Node.js и встроенного браузера WebKit. Код JavaScript выполняется в особом окружении, из которого есть доступ и к стандартному API браузеров, и к Node.js.
Читать дальше →

«Реверс-инжиниринг» клиентского приложения в образовательном центре

Время на прочтение3 мин
Охват и читатели12K
Привет, Хабр. Хочу поделиться историей из жизненного опыта. Несколько месяцев назад я записался на платные курсы по изучению языка программирования JavaScript в прекрасном городе Минск. Потратил около недели времени на подробное изучение отзывов о каждой из компаний на рынке, сравнивал цены на услуги и местоположение относительно моего дома. Наконец, выбрав «достойного» кандидата, направился к ним в офис для заключения договора. В общем, прошел я начальный инструктаж, получил расписание занятий и содержание всего курса и с радостью приступил к делу.
Читать дальше →

Очередной способ организации ООП в JS

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

Введение


Как недавно было сказано в публикации в «Честные приватные свойства в прототипе», существует два лагеря JavaScript-разработчиков:
  • те, что готовы терпеть префиксы, как обозначение сокрытия свойств\методов;
  • те, что не готовы терпеть псевдо-инкапсуляцию.


Я отношу себя ко второму лагерю и решаю проблему объявлением всего класса в его конструкторе, что позволяет использовать private/public в любой комбинации с static.
Читать дальше →

Сайт с нуля на полном стеке БЭМ-технологий. Методология Яндекса

Время на прочтение29 мин
Охват и читатели110K
На прошлой неделе BBC рассказала, что для новой версии главной страницы использовала методологию БЭМ, созданную в Яндексе. По такому случаю мы решили поднять материалы мастер-класса «Разрабатываем сайт с нуля на полном стеке БЭМ-технологий» и рассказать вам, как начать использовать полный стек БЭМ-технологий в своих проектах.

БЭМ упрощает разработку сайтов, которые нужно быстро создавать и долго поддерживать. Эту технологию используют во фронтенде почти всех сервисов Яндекса, и она уже успела обрасти множеством библиотек и инструментов, которыми мы хотим с вами поделиться.



В статье мы расскажем, в чём преимущество вёрстки независимыми блоками и что такое уровни переопределения, познакомимся с готовыми библиотеками блоков и инструментами для автоматизации сборки. Покажем, как разные инструменты — например, autoprefixer, css-препроцессор Stylus или модульная система YModules — упрощают жизнь разработчика и создают по-настоящему удобную платформу, если встроить их в процесс разработки по БЭМ.

На живом примере мы объясним, в чём польза декларативного подхода, когда одни и те же идеи можно использовать как для CSS, так и для JavaScript. Отдельно остановимся на декларативных шаблонах BEMHTML и BEMTREE, которые позволяют преобразовывать данные в БЭМ-дерево, описанное в формате BEMJSON и, затем в HTML. Рассмотрим в деталях, как написать серверную часть приложения по БЭМ-методологии.
Читать дальше →

Честные приватные свойства в прототипе

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

За последние 10 лет(С днем рождения, prototype.js!) было написано очень много библиотек для эмуляции полноценного ООП в javascript.
Все они, так или иначе, решали задачу реализации приватных членов класса.

Копьев сломано много и в итоге разработчики разделились на 2 части:
Первая прячет приватные свойства в scope конструктора и отказывается от использования прототипов(создает методы для каждого экземпляра объекта заново), вторая просто использует соглашение в именах вроде "_privateProperty" и по сути никак не инкапсулирует данные.

Но есть еще один, на мой взгляд, интересный способ со своими плюсами и минусами:

React v0.13 RC

Время на прочтение3 мин
Охват и читатели10K
За выходные мы выпустили первый (и надеемся последний) пре-релиз React v0.13!

Мы уже немного говорили о грядущих изменениях. Основное — это конечно же поддержка ES6 классов. Подробнее в нашем анонсе беты. Мы очень взволнованы этим событием! Себастьян также написал сегодня утром о некоторых изменениях с ReactElement. Мы надеемся, что изменения, над которыми мы работатли, улучшат производительность и ощущения от разработки.
Читать дальше →

Повышаем стабильность Front-end

Время на прочтение7 мин
Охват и читатели29K
В продолжение предыдущей статьи о тестировании интерфейсов в Тинькофф Банке расскажу, как мы пишем unit-тесты на javascript.

image

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

Статические анализаторы JavaScript и ошибки, от которых они помогут отучиться (Часть 2)

Время на прочтение5 мин
Охват и читатели8.4K
Продолжаем перевод статьи о статических анализаторах: в прошлой части автор затронул такие нюансы, как использование операторов == и ===, а также неопределенные переменные и поздние определения, кроме того, автор указывает на замечания, которые выдают анализаторы (на примере JSHint) при обнаружении подобных ошибок. В этой части речь пойдет о повторном объявлении переменной, а также о контроле над цикломатической сложностью кода.
Читать дальше →

node-seq на новый лад (опять про асинхронность)

Время на прочтение5 мин
Охват и читатели5.4K
Здравствуй, Хабр! Пишу тебе на правах слоупока. Ведь в то время как космические корабли с вертикальным взлетом и посадкой бороздят просторы мирового океана, а самые нетерпеливые вовсю используют фичи ES6 в своих проектах я принес тебе очередную библиотеку для облегчения жизни асинхронщика.
Slowwwly continue

BattleGIS — JavaScript-движок для игры в Танчики

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


Танчики на денди — классический пример синдрома утёнка в плоскости видеоигр. Современные игры настолько круты, что сложно отличить скриншот от фотографии. Однако взрослые дядьки могут часами двигать по экрану восьмибитные пиксели, вспоминая счастливое детство.

Хотелось сделать чего-нибудь эдакого, чтоб можно было собраться с коллегами в большой переговорке и за разного рода напитками весело провести время. Это должно было быть связано с профессиональной деятельностью: JavaScript`ом или вёрсткой, ведь чтобы погамать в Кваку или выехать на шашлыки, быть frontend-разработчиком совсем не обязательно.

Так родилась идея сделать JavaScript AI-challenge.
Читать дальше →

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

Статические анализаторы JavaScript и ошибки, от которых они помогут отучиться (Часть 1)

Время на прочтение5 мин
Охват и читатели36K
Далеко не каждая строка моего кода получается идеальной с первого же раза. Ну, в некоторых случаях… Иногда… Ладно – практически никогда. Правда заключается в том, что я трачу значительно больше времени на исправление своих собственных глупых ошибок, чем мне хотелось бы. Именно поэтому я использую статические анализаторы практически в каждом написанном мной файле JavaScript.

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

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

Гибридные приложения в Qt на примере использования D3.js

Время на прочтение6 мин
Охват и читатели30K
D3 — мощная JavaScript библиотека для визуализации данных. На мой взгляд — просто рай для web-разработчика, казалось бы недоступный для Qt-программиста. Но гибкость фреймворка Qt позволяет интегрировать web-frontend в толстый клиент с помощью механизма Qt Web Bridge. Такие приложения получили наименование гибридные (Qt Hybrid Apps).

Для JavaScript-программистов хорошая новость заключается в том, что их решения можно легко интегрировать в Desktop приложения, что потенциально может увеличить целевую аудиторию пользователей разрабатываемых библиотек (во всяком случае это верно для мира Qt приложений).

На скриншоте ниже изображен виджет Dependency Wheel (Круг Зависимостей), отрисовка которого осуществляется с помощью D3.js а управление данными и отображением — с помощью Qt. При нахождении указателя над соответствующей дугой её взаимосвязи «подсвечиваются», а остальные становятся полупрозначными. Данный виджет можно использовать для визуализации различного рода зависимостей (например библиотек).

В отличии от оригинального JS решения диаграмма динамически изменяет размер под размер виджета, а данные устанавливаются на стороне Qt, а не с помощью загрузки JSON-файла.

Статья больше ориентирована на Qt-программистов, но также может быть интересна и JS программистам.


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

Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №148 (16 — 22 февраля 2015)

Время на прочтение6 мин
Охват и читатели42K
Предлагаем вашему вниманию подборку с ссылками на полезные ресурсы, интересные материалы и IT-новости


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

OData REST API и рекурсивные запросы

Время на прочтение1 мин
Охват и читатели9.2K
В дискуссии к предыдущей статье dezconnect поднял интересный вопрос о возможностях OData выполнять рекурсивные запросы (по аналогии с SQL CTE).

В документации OData в разделе 11.2.4.2 описывается опция запроса $expand. Эта опция позволяет получать объекты вместе со связанными объектами. Например, Вы можете получить данные о компании вместе со всеми данными о ее президенте:
https://samples.databoom.space/api1/sampledb/collections/companies(company1)?$expand=president

Без опции $expand результат будет включать только id президента компании (или ссылку при других настройках).
https://samples.databoom.space/api1/sampledb/collections/companies(company1)

В 4й версии OData существенно расширены возможности опции $expand для выполнения рекурсивных запросов.

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

Решение задачи сброса тяжелой логики на одну из множества открытых вкладок

Время на прочтение2 мин
Охват и читатели14K
Не так давно я начал разрабатывать библиотеку DuelJS, которая предоставила удобный интерфейс для определения состояния вкладки Master (активная) или Slave (неактивная). Однако позже мне начали поступать предложения для оптимизации соединений по веб-сокетам. Подход DuelJS: если вкладка активна -> держать соединение, если неактивна -> класть — является не продуктивным. На помощь приходит расширение TabNinja.



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

Самые нужные плагины для Grunt

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


Доброго времени суток, всем! Кто-то умный, не помню в какой статье именно на Хабре, буквально недавно размышлял о процессе разработки с явным призывом автоматизировать все, что только можно автоматизировать. И лучше один раз потратить время на автоматизацию, чтобы потом экономить его на протяжении всего проекта.

У веб-разработчиков есть прекрасный инструмент для автоматизации массы задач, который называется Grunt. И моя страсть к таксономии заставила себя собрать огромную коллекцию почти из 100 ценных плагинов для этого сборщика. Думаю многие кто уже использует Grunt найдут для себя что-то нужное, а кто нет, глядя на возможности, получит хорошую мотивацию установить его и понять как эта штука работает.

А еще я выложил подборку на GitHub, чтобы каждый мог пополнить коллекцию.

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

Translit для JavaScript и ГОСТ-7.79-2000

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

Переводы как женщины: если красивы — неверны, если верны то некрасивы.
Мориц Готлиб
Ссылки
Информация: Wiki,
PDF ГОСТа
Репозиторий: GitHub,
NpmJs
Исходный код
/* jshint -W100 */
/**
* @name      translit.js
* @author    XGuest <xguest@list.ru>
* @link      https://github.com/xguest/iso_9_js
* @version   1.0.4
* @copyright GPL applies.
*            No warranties XGuest[28.03.2016/07:59:18] translit [ver.1.0.4]
* #guid      {E7088033-479F-47EF-A573-BBF3520F493C}
*
* @description Прямая и обратная транслитерация
*              Соответствует ISO 9:1995 и ГОСТ 7.79-2000 системы А и Б
*
* @param {String}  str транслитерируемая строка
* @param {Number}  typ ± направление (тип) транслитерации
*                      + прямая с латиницы в кириллицу
*                      - обратная
*                      system A = 1-диакритика;
*                      system B = 2-Беларусь;3-Болгария;4-Македония;5-Россия;6-Украина;
* @example
* function example() {
*  var a, b = [
*     [],
*     ["Диакритика", "Съешь ещё этих мягких французских булок, да выпей же чаю!"],
*     ["Беларускую", "З'ясі яшчэ гэтых мяккіх французскіх булак, ды выпі ж чаю!"],
*     ["Български",  "Яжте повече от тези меки кифлички, но също така се пие чай!"],
*     ["Македонски", "Јадат повеќе од овие меки францускиот ролни, па пијат чај!"],
*     ["Русский",    "Съешь ещё этих мягких французских булок, да выпей же чаю!"],
*     ["Українська", "З'їж ще цих м'яких французьких булок, та випий же чаю!"]
*  ], c, d;
*  for(a = 1; a < b.length - 1; a++) {
*   c = b[a][0];                                       // Language
*   d = b[a][1];                                       // Source
*   e = translit(d, a);                                // Forward
*   console.log(
*    "%s - %s\nSource  : %s\nTranslit: %s\nReverse : %s\n",
*    c,                                                // Language
*    translit(c, a),                                   // Transliterated language
*    d,                                                // Source
*    e,                                                // Forward
*    translit(e, -1 * a)                               // Reverse
*   );
*  }
* };
**/
function translit(str, typ) {
  var func = (function(typ) {
  /** Function Expression
  * Вспомогательная функция.
  *
  * FINISHED TESTED!
  * В ней и хотелось навести порядок.
  *
  * Проверяет направление транслитерации.
  * Возвращает массив из 2 функций:
  *  построения таблиц транслитерации.
  *  и пост-обработки строки (правила из ГОСТ).
  *
  * @param  {Number} typ
  * @return {Array}  Массив функций пред и пост обработки.
  **/
    function prep (a) {
      var write = !a ? function(chr, row) {trantab[row] = chr;regarr.push(row);} :
      function(row, chr) {trantab[row] = chr;regarr.push(row);};
      return function(col, row) {        // создаем таблицу и RegExp
        var chr = col[abs] || col[0];    // Символ
        if (chr) write(chr, row);        // Если символ есть
        }
    }
    var abs = Math.abs(typ);             // Абсолютное значение транслитерации
    if (typ === abs) {                   // Прямая транслитерация в латиницу
      str = str.replace(/(i(?=.[^аеиоуъ\s]+))/ig, '$1`'); // "i`" ГОСТ ст. рус. и болг.
      return [prep(),                    // Возвращаем массив функций
        function(str) {                  // str - транслируемая строка.
          return str.replace(/i``/ig, 'i`').    // "i`" в ГОСТ ст. рус. и болг.
           replace(/((c)z)(?=[ieyj])/ig, '$1'); // "cz" в символ "c"
        }];
    } else {                             // Обратная транслитерация в кириллицу
      str = str.replace(/(c)(?=[ieyj])/ig, '$1z'); // Правило сочетания "cz"
      return [prep(1),function(str) {return str;}];// nop - пустая функция.
    }
  }(typ));
  var iso9 = {                           // Объект описания стандарта
    // Имя - кириллица
    //   0 - общие для всех
    //   1 - диакритика         4 - MK|MKD - Македония
    //   2 - BY|BLR - Беларусь  5 - RU|RUS - Россия
    //   3 - BG|BGR - Болгария  6 - UA|UKR - Украина
   /*-Имя---------0-,-------1-,---2-,---3-,---4-,----5-,---6-*/
    '\u0449': [   '', '\u015D',   '','sth',   '', 'shh','shh'], // 'щ'
    '\u044F': [   '', '\u00E2', 'ya', 'ya',   '',  'ya', 'ya'], // 'я'
    '\u0454': [   '', '\u00EA',   '',   '',   '',    '', 'ye'], // 'є'
    '\u0463': [   '', '\u011B',   '', 'ye',   '',  'ye',   ''], //  ять
    '\u0456': [   '', '\u00EC',  'i', 'i`',   '',  'i`',  'i'], // 'і' йота
    '\u0457': [   '', '\u00EF',   '',   '',   '',    '', 'yi'], // 'ї'
    '\u0451': [   '', '\u00EB', 'yo',   '',   '',  'yo',   ''], // 'ё'
    '\u044E': [   '', '\u00FB', 'yu', 'yu',   '',  'yu', 'yu'], // 'ю'
    '\u0436': [ 'zh','\u017E'],                                 // 'ж'
    '\u0447': [ 'ch','\u010D'],                                 // 'ч'
    '\u0448': [ 'sh', '\u0161',   '',   '',   '',    '',   ''], // 'ш'
    '\u0473': [   '','f\u0300',   '', 'fh',   '',  'fh',   ''], //  фита
    '\u045F': [   '','d\u0302',   '',   '', 'dh',    '',   ''], // 'џ'
    '\u0491': [   '','g\u0300',   '',   '',   '',    '', 'g`'], // 'ґ'
    '\u0453': [   '', '\u01F5',   '',   '', 'g`',    '',   ''], // 'ѓ'
    '\u0455': [   '', '\u1E91',   '',   '', 'z`',    '',   ''], // 'ѕ'
    '\u045C': [   '', '\u1E31',   '',   '', 'k`',    '',   ''], // 'ќ'
    '\u0459': [   '','l\u0302',   '',   '', 'l`',    '',   ''], // 'љ'
    '\u045A': [   '','n\u0302',   '',   '', 'n`',    '',   ''], // 'њ'
    '\u044D': [   '', '\u00E8', 'e`',   '',   '',  'e`',   ''], // 'э'
    '\u044A': [   '', '\u02BA',   '', 'a`',   '',  '``',   ''], // 'ъ'
    '\u044B': [   '',      'y', 'y`',   '',   '',  'y`',   ''], // 'ы'
    '\u045E': [   '', '\u01D4', 'u`',   '',   '',    '',   ''], // 'ў'
    '\u046B': [   '', '\u01CE',   '', 'o`',   '',    '',   ''], //  юс
    '\u0475': [   '', '\u1EF3',   '', 'yh',   '',  'yh',   ''], //  ижица
    '\u0446': [ 'cz',     'c'],                                 // 'ц'
    '\u0430': [ 'a'],                                           // 'а'
    '\u0431': [ 'b'],                                           // 'б'
    '\u0432': [ 'v'],                                           // 'в'
    '\u0433': [ 'g'],                                           // 'г'
    '\u0434': [ 'd'],                                           // 'д'
    '\u0435': [ 'e'],                                           // 'е'
    '\u0437': [ 'z'],                                           // 'з'
    '\u0438': [   '',      'i',   '',  'i',  'i',   'i', 'y`'], // 'и'
    '\u0439': [   '',      'j',  'j',  'j',   '',   'j',  'j'], // 'й'
    '\u043A': [ 'k'],                                           // 'к'
    '\u043B': [ 'l'],                                           // 'л'
    '\u043C': [ 'm'],                                           // 'м'
    '\u043D': [ 'n'],                                           // 'н'
    '\u043E': [ 'o'],                                           // 'о'
    '\u043F': [ 'p'],                                           // 'п'
    '\u0440': [ 'r'],                                           // 'р'
    '\u0441': [ 's'],                                           // 'с'
    '\u0442': [ 't'],                                           // 'т'
    '\u0443': [ 'u'],                                           // 'у'
    '\u0444': [ 'f'],                                           // 'ф'
    '\u0445': [  'x',     'h'],                                 // 'х'
    '\u044C': [   '', '\u02B9',  '`',  '`',   '',   '`',  '`'], // 'ь'
    '\u0458': [   '','j\u030C',   '',   '',  'j',    '',   ''], // 'ј'
    '\u2019': [ '\'','\u02BC'],                                 // '’'
    '\u2116': [  '#']                                           // '№'
   /*-Имя---------0-,-------1-,---2-,---3-,---4-,----5-,---6-*/
  }, regarr = [], trantab = {};
  /* jshint -W030 */                     // Создание таблицы и массива RegExp
  for (var row in iso9) {if (Object.hasOwnProperty.call(iso9, row)) {func[0](iso9[row], row);}}
  /* jshint +W030 */
  return func[1](                        // функция пост-обработки строки (правила и т.д.)
      str.replace(                       // Транслитерация
      new RegExp(regarr.join('|'), 'gi'),// Создаем RegExp из массива
      function(R) {                      // CallBack Функция RegExp
        if (R.toLowerCase() === R) {     // Обработка строки с учетом регистра
          return trantab[R];
        } else {
          return trantab[R.toLowerCase()].toUpperCase();
        }
      }));
}
module.exports = translit;
Читать дальше →