JavaScript *

В первой части мы сделали простой плагин для JIRA для работы с базой данных. Теперь придадим нашему плагину «стандартный» внешний вид JIRA.



Для начала добавим немного функционала в наш плагин. Пусть теперь для каждого проекта будет свой список студентов, т.е. студент будет привязан к строго одному проекту, и добавим студентам фамилии на всякий случай. Соответственно, нам придется переделать и выдачу студентов. Выдавать теперь будем только студентов, привязанных к определенному проекту. Для этого нам придется переписать класс Students, добавив туда необходимы атрибуты студента; добавить в интерфейс StudentDAO (и само собой класс StudentDAOImpl) новый метод для получения списка студентов именно для проекта; и переписать в классе MyAction методы execute() и doAdd() в соответствии с новыми изменениями.

Случилось мне как-то иметь дело с тяжелым PHP-скриптом. Нужно было каким-то образом в браузере отображать прогресс выполнения задачи в то время, пока в достаточно длительном цикле на стороне PHP проводились расчёты. В таких случаях обычно прибегают к периодичному выводу строки вроде этой:

<script>document.getElementById('progress').style.width = '1%';</script>

Этот вариант меня не устраивал по нескольким причинам, к тому же мне в принципе не нравится такой подход.

Хочу поделиться своей небольшой библиотекой. Интересно услышать ваше мнение о ней.

Сразу к сути дела: htmlmake — это js-функция, позволяющая создавать строку с html-разметкой внутри для дальнейшей вставки в DOM-дерево.

Многие посетители сайтов не знают о поиске по странице по нажатию Ctrl+F и ищут необходимый фрагмент глазами, просто пролистывая текст. Этот способ становится проблематичным, если на странице текста больше, чем три-четыре экрана. Для таких посетителей я решил реализовать поиск по странице с использованием jQuery.
Пример подобного поиска есть на сайте Конституции РФ, но там он работает как-то странно.

Добро пожаловать в серию «ES6 в деталях»! В этой еженедельной серии статей мы будем изучать ECMAScript 6 — новую готовящуюся к выходу спецификацию языка JavaScript. ES6 имеет множество новых возможностей, которые делают JS мощнее и выразительнее, и каждую неделю мы будем рассматривать эти возможности. Но прежде чем мы приступим, неплохо бы поговорить о том, чем является ES6 и что от него ожидать.

Сегодня я хочу показать, как используя React, Flummox и Express, создать полноценное изоморфное приложение.

Идея изоморфности давно витала в воздухе, но никто не знал этого слова, поэтому ничего особо не менялось, пока не пришел airbnb.

За полгода до этого появился React, позже появился Flux и множество его реализаций, одна не хуже другой. Но все эти реализации ориентировались только на работу на клиентской стороне, они работали через синглтоны и, зачастую, их нельзя было нормально использовать на сервере. Я успел попробовать несколько, но ни одна мне не понравилась. Пока два месяца назад я не наткнулся на Flummox. Как заявляет разработчик, Flummox создан как раз для изоморфных приложений, он не использует синглтоны, присущие другим реализациям, и максимально прост в использовании.

Ожидается, что вы имеете опыт работы с React и слышали про Flux. Итак, поехали…
Забрать готовый код можно тут.

За последний год я много слышал о Virtual DOM и React JS.
React работает действительно быстро и очень прост, но как он работает? Что такое Virtual DOM? Почему я должен беспокоиться об этом, и что случилось со старым добрым обычным DOM?

Что такое DOM

Перед тем, как мы начнем вникать в то, что из себя представляет DOM виртуальный, давайте немного поговорим о том, чем является DOM реальный.

Вступление

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

Сама мысль

Я полагаю, вы согласны с тем, что программирование имеет 2 смысла. Первый — мощный инструмент для решения сложных проблем(иногда простых), второй — творчество. Если с последним всё понятно — вы получаете удовольствие от процесса, придумывая оптимальный алгоритм или создавая что-то новое, то с первым не совсем.

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

Плагин буду делать для джира 4.4.4. Для начала создадим пустой проект. Проект можно создать с помощью Atlassian SDK, а затем открыть в любимой IDE. В данном случае я буду работать с Netbeans. Файловая структура проекта будет выглядеть следующим образом:

18 апреля Frontend Dev Conf в третий раз собрала frontend и UI-специалистов. Участниками стали более 300 разработчиков. Мероприятие прошло в дружелюбной атмосфере, приятных кулуарных разговорах и жарких дискуссиях с докладчиками.

Native script (NS) – это библиотека, позволяющая делать кросс-платформенные приложения, используя XML, CSS, JavaScript. Native script решает ту же задачу, что и уже всем известный phonegap (создание кросс-платформенных приложений), но подходы у них разные. Phonegap использует движок браузера, чтобы отобразить ваш UI (фактически вы получаете веб-страницу), Native script использует нативный рендеринг, использует элементы нативного UI. Следующее важное отличие: чтобы получить доступ к камере, gps и так далее в phonegap необходимо устанавливать плагины, в то время как NS дает доступ из коробки.

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

Эта статья предназначена для тех, кто хочет узнать об основах использования этого фреймворка. В ней я постараюсь подробно рассказать о том, как начать работу с Webix. Также стоит обратить внимание на то, какие дополнительные полезные инструменты, помимо библиотеки, предлагают разработчики.

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

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

Недавно в офисе Badoo проходил юбилейный MoscowJS Meetup. Делимся с вами видео докладов.

1. «Специфика верстки мультиязычных веб-приложений»
Александр Тевосян, Badoo.




+ Выложили на GitHub нашу утилиту rtl-css специально к митапу: https://github.com/badoo/rtl-css

Месяц назад кто-то нашёл у меня на гитхабе незаконченный проект и выложил ссылку на него на Designer News. Внезапно я увидел, что на сайте проекта постоянно сидит по 50 человек, и мне даже пришлось срочно сбежать с работы чтоб экстренно выпилить хотя бы самые адовые баги. Этим проектом был интенс, UX-компонент заменяющий полосу прокрутки (скроллбар) на специальный индикатор, который подсвечивает прокручиваемую область текстурой. Выглядит это примерно так:


_{на сайте проекта можно поскроллить самостоятельно}

Сообщества UX-экспертов и программистов отреагировали очень возбуждённо:

Не могу понять, почему мне это не нравится… _{— GrumpyUX Man @ layervault}

Святые какашки, эта штука бесит _{— Thecoss @ reddit}

Да я себе скорее установлю ПЕРДЯЩИЙ СКРОЛЛ http://theonion.github.io/fartscroll.js/ в качестве дефолтного, чем КОГДА-ЛИБО заменю мою полосу прокрутки на это. _{— Kyle Donmoyer @ layervault}

Спасибо, не надо. Никогда не мог понять это желание поменять стандартные элементы интерфейса. Полоса прокрутки — это одна из тех вещей, которая просто работает. Она не мешается и легко даёт понять, насколько много контента. _{— madk @ reddit}

Шта? _{— magenta_placenta @ reddit}

…
Я не очень понял, что за проблему оно решает _{— jineshshah36 @ reddit}

(кто-то даже создал сабреддит Real Bad UX чтоб разместить там ссылку на этот проект)

Вместе с UX-экспертами, возбудился и я. Бесполезные проекты обычно никому не интересны, у меня есть пара таких. Но сейчас было очень непохоже — этот получился очень спорным, и такой движухи я ещё не видел. В течение следующих недель я попытался учесть основные комментарии и либо исправить что-то в самой библиотеке, либо добавить пояснения на сайте проекта. И одновременно выкладывал его на остальных ресурсах — градус фидбэка вроде бы стал смягчаться.

Здесь я хочу рассказать, какие области применения у интенса, и попробую объяснить, как я себе представляю «жизнь после скроллбара». А также предлагаю читателям покритиковать этот проект, обсудить скроллинг вообще, UX вцелом, и целесообразность замены традиционных элементов в частности.

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

Проблема в картинках

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



В какой-то момент в дочерних классах появляется необходимость в одинаковом функционале. Обычная копипаста будет выглядеть на нашей схеме вот так:



Очень часто бывает, что данный функционал не имеет ничего общего с родительскими классами, поэтому выносить его в какой-то базовый класс нелогично и неправильно. Вынесем его в отдельное место — миксин. С точки зрения языка миксин может быть обычным объектом.



А теперь обсудим момент, ради которого написана вся статья — как правильно замешивать наш миксин в классы.

Всем привет! Сегодня мы расскажем о том, что именно должна делать хорошая система сбора отзывов для гарантированного поднятия конверсии сайта на примере нашего продукта – системы сборы отзывов Cackle Reviews. Первый релиз состоялся в ноябре 2013. За полтора года существования у нас появилось порядка 200 клиентов (из которых 150 – интернет-магазины) и чёткое представление о том, какие возможности системы отзывов честно влияют на рост конверсии:

1. Автоматическая индексация отзывов в Google с микроразметкой рейтинга schema.org/review;
2. Импорт отзывов из Яндекс.Маркета;
3. Рассылка follow-up писем после покупки с приглашением оставить отзыв;
4. Трансляция отзывов в социальные сети;
5. СПАМ-тест (mail-tester.com) с результатом не ниже 9/10 баллов.

Как это всё работает в Cackle Reviews – под катом.

• jspm — это менеджер пакетов для SystemJS, сделаный на основе ES6 module loader
• Позволяет загружать все форматы модулей (ES6, AMD, CommonJS и Globals) непосредственно из npm или Github с управлением зависимостями. Также позволяет использовать любые не стандартные источники модулей, реализованные через Registry API
• В разработке: Загружает модули ES6 как отдельные файлы, и компилирует их в прямо в браузере
• В продакшене: Собирает модули в один или несколько бандлов, с единой командой для запуска всего приложения

Начнем

Устанавливаем jspm cli

  npm install jspm -g

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

Webtorrent

Полноценный торрент клиент для NodeJS и браузеров. Стримминг будет работать прямо в браузере благодаря WebRTC (data chanels) для P2P транспортировки. А самое главное «It's Just JavaScript™», то есть не нужны никакие дополнительные плагины или расширения. Проект собрал более 3000 звезд на GitHub и на данный момент предоставляет следующие возможности: непосредственно саму потоковую передача данных, загрузка нескольких торрентов одновременно, поддержку magnet uri, peer discovery и protocol extension api, возможность подключения WebTorrent клиентов на разных доменах, стримминг видео в <video> тег в формате (webm (vp8, vp9) или mp4 (h.264)), а также в AirPlay, Chromecast, VLC player и прочие устройства.

var WebTorrent = require('webtorrent')

var client = new WebTorrent()
var magnetUri = '...'

client.add(magnetUri, function (torrent) {
  // Got torrent metadata!
  console.log('Torrent info hash:', torrent.infoHash)

  torrent.files.forEach(function (file) {
    // Get a url for each file
    file.getBlobURL(function (err, url) {
      if (err) throw err

      // Add a link to the page
      var a = document.createElement('a')
      a.download = file.name
      a.href = url
      a.textContent = 'Download ' + file.name
      document.body.appendChild(a)
    })
  })
})

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