JavaScript *

Очень часто на тостере вижу вопросы вида «Как отсортировать массив в JavaScript по определенному правилу?», «Как сделать с массивом в JavaScript <действие>?» и т.д.

Под катом собраны некоторые манипуляции над массивами.

Неожиданно столкнулся с забавной проблемой. Кратко суть можно описать так. Допустим, вы используете requestAnimationFrame для динамического изменения цвета текста, например таким образом:

function render() {
  element.innerHTML = "<font color='#555'>some text</font>";
  requestAnimationFrame(render);
}

Если теперь на element (либо на весь документ) повесить обработчик события onclick, а потом кликнуть по тексту, то… ничего не происходит.

Очередная конференция MoscowJS пройдёт 31 марта 2016 в офисе Rambler&Co.

Список докладчиков под катом:

Я не первый и не последний, кто вам об этом скажет, но стандарт ES2016 (или ES7) уже утвержден, и не включает в себя те функции, про которые говорят — «Будет в ES7».
Пора закончить упоминать ES7 в смысле “разные, предложенные сообществом функции, которые возможно когда-нибудь будут внесены в стандарт”.

В первой части статьи рассматривались структуры execution context, lexical environment и объекты Function. Вторая часть посвящена использованию this.

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

Со стремительным приближением Angular 2.0, параллельно существующим с большим количеством других frontend-фреймворков, в воздухе витает множество волнений по поводу предстоящих затрат (как временных, так и денежных), связанных с переводом своих проектов на новую версию. Как вы думаете, есть ли у разработчиков желание изучить еще один новый фреймворк?

Давайте разбираться. Прошу под кат.

Привет, %хабрачитатель%!

Несколько месяцев назад у нас возникли проблемы с одной виртуальной машиной, запущенной на сервере Dell PowerEdge R720 с ESXi 5.5. Перезагрузка этой VM длилась довольно долго и вызвала сильное падение производительности на самом хосте.
Lifecycle-лог на сервере был наполнен сообщениями вида:

PDR47
A block on Disk 0 in Backplane 1 of Integrated RAID Controller 1 was
punctured by the controller.

PDR64
An unrecoverable disk media error occurred on Disk 0 in Backplane 1 of
Integrated RAID Controller 1.

Гугление привело к неутешительному выводу: рейд-массив поврежден и восстановить его невозможно. А именно — повредились данные, относящиеся к одному блоку (страйпу), сразу на нескольких дисках (double fault):

К счастью, делловские RAID-контроллеры обладают фичей продолжать работу, несмотря на неконсисентное состояние массива — puncture (https://www.dell.com/support/Article/us/en/04/438291/EN#Unique-Hyphenated-Issue-Here-2), что позволяет сохранить хотя бы ту часть данных, которая не повредились. Это, конечно, не никак отменяет необходимость последующей замены дисков и пересборки рейд-массива «с нуля».
Для предотвращения подобных ситуаций Dell рекомендует запускать проверку целостности массива не реже одного раза в месяц. Увы, но мы об этом узнали слишком поздно.

Такую проверку можно запускать как через веб-интерфейс Dell OpenManage Server Administrator (http://www.dell.com/support/contents/us/en/19/article/Product-Support/Self-support-Knowledgebase/enterprise-resource-center/Enterprise-Tools/OMSA/), так и через утилиты omconfig/omreport, входящие в OMSA. И, если бы разработчики из Dell не «забыли» включить эти утилиты в OpenManage для ESXi, то проблем с автоматизацией бы не возникло, т.к. понятно, что ручная проверка целостности массива на каждом сервере, совершенно не IT-way. Не говоря уже о том, что интерфейс OMSA очень медленный и работать с ним удовольствие еще то.
Ребята из Dell «поработали на славу» и простым способом автоматизировать проверку (например, через открытие в cURL заранее подготовленной ссылки) невозможно, т.к. веб-интерфейс генерируется динамически и постоянные ссылки в нем отсутствуют.

Что же делать?

В рамках изучения нового стандарта наткнулся на Tagged Template Literals, по-русски часто обзывают строковые шаблоны.
За рубежом советуют переименовать в tagged string literals, а Template Literals тем временем в interpolated string literals или просто interpoliterals . Обожаю js тусовку, где халивар начинают даже из-за название фичи :)

Что, куда, зачем

Прежде чем перейдем непосредственно к тому о чем я хотел рассказать исходя из заголовка, пару слов о Template Literals.
Наверняка каждый из вас их уже попробовал:

var text =
`Now is the time for all good men
to come to the aid of their
country!`;

console.log( text );
// Now is the time for all good men
// to come to the aid of their
// country!

Не поймали за хвост удачу в виде главного бага известного сервиса, нет желания “толкаться” на oDesk или не хочется делать то же, что уже и так делаете в рабочее время?

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

Следуя традиции выпускать новые версии библиотеки с завидным постоянством, разработчики Webix сообщили о выходе регулярного весеннего релиза, на этот раз за номером 3.2. Среди нововведений в этой версии были замечены два новых виджета: SpreadSheet, который, как видно из названия, служит для создания экселеподобных таблиц, а также RangeChart, позволяющий выбрать для отображения определенный участок большого графика. Помимо этого, были добавлены новые возможности, позволяющие расширить функционал уже имеющихся компонентов.

Но обо всем по порядку.

В первой части статьи я рассказывал о том как сделать стандартный интерфейс более комфортным, однако с тех пор утекло достаточно воды, что бы вышли как новые версии xWiki-движка, так и поменялся интерфейс в сторону улучшения юзабилити. По этому в новой статье я предлагаю обсудить тюнинг и более тонкую настройку xWiki для портативного клиента (на базе связки Jetty и HSQLDB). Оговорюсь сразу, я не считаю это лучшей реализацией из возможных, но учитывая удобство развертывания портативной версии (скопировал в нужную папку и запустил), считаю что для индивидуальной работы или работы небольшого коллектива в спартанских условиях — это лучший вариант.

Добро пожаловать под Cut

Оригинал здесь.

Написав несколько приложений на React, теперь уже довольно скучно каждый раз начинать всё сначала. Мне нужно настроить webpack, webpack-dev-server, Babel с некоторыми пресетами и плагинами, Karma, React, несколько лоадеров для JSON, CSS, картинок и шрифтов – и объединить всё это вместе.

Почему в JavaScript:

>1+[[]+[]]-[]+[[]-[]]-1
 9

Вот весь код: var x = []; x[0x7fffffff]=1; JSON.stringify(x);

Для желающих попробовать: jsfiddle

Таким незамысловатым способом, можно намертво повесить firefox, довести до падения вкладку хрома и повесить основной поток nodejs.

Самое примечательное в этом то, что зависание происходит на уровне нативного кода функции JSON.stringify, что не позволяет прервать выполнение в том же firefox'е, как это обычно бывает при простом while(true);.

При выполнении внутри WebWorker'а в chrome, страница продолжает отвечать, но terminate не может завершить поток.

Так же по понятным причинам, такой код не обнаруживается jslint'ом.

Google, Microsoft и Mozilla на этой неделе синхронно выпустили экспериментальные билды браузеров с поддержкой WebAssembly (wasm) — эффективного низкоуровневого языка программирования, выполняющегося в браузере с производительностью гораздо выше, чем у самых современных и скоростных компиляторов JavaScript.

Разработчик из Mozilla Люк Вагнер рассказал на Mozilla Hacks о преимуществах WebAssembly, а также сообщил о портировании на WebAssembly научно-фантастического шутера Angry Bots. Демка запускается в браузерах с поддержкой WebAssembly — это последние версии Chrome Canary, Firefox Nightly и Microsoft Edge. Скоро к ним присоединится Safari на WebKit.

Про устройство JavaScript написано много статей. В первую очередь, это "JavaScript. Ядро." Дмитрия Сошникова, перевод статьи Ричарда Корнфорда и поста Дмитрия Франка. Но для того чтобы хорошо разобраться в какой-либо технологии лучше обратиться к первоисточникам. В данном случае к стандарту ECMA-262 ECMAScript Language Specification. Я рассматриваю этот пост как облегченный способ начать изучение стандарта. Рекомендую переходить по ссылкам, вчитываться в текст спецификации и составлять собственные схемы.

Около полугода назад был снят часовой видеовыпуск о том, как просто написать игру для социальной сети ВКонтакте, в котором никак не затрагивалась тема использования ВК API. В этом небольшом видеокурсе я хочу показать наглядность использования ВКонтакте API для ваших будущих или текущих проектов.

О чём речь?

Всё чаще возникает задача научить frontend-приложение работать в автономном режиме. Это значит придать web-приложению свойство mobile- или desktop-программы — функционировать в отсутствии связи с Интернет, а также в случае отказа сервера.

Цель — оградить пользователя от проблем соединения на его устройстве. Как было бы обидно не сохранить созданные в google docs таблицы из-за потери wi-fi в ближайшем фастфуде!

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

Решение задачи заключается в следующем:

(у учебника по Основам React вышло второе издание, Redux-учебник в процессе обновления)

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

Курс про Redux попал в официальную документацию.

Оба руководства бесплатны и выложены на gitbook (можно скачать PDF, ePub, mobi).

В текстах нарочно участвуют термины переведенные на русский (например, состояние), английские (state), либо английский термин написанный по-русски — стейт. Считаю это допустимым, и даже более того, удобным для читателя.