Пишу про разработку вообще и в частности про: JavaScript, HTML5, CSS3, AngularJS, ReactJS, Agile.

Github предупреждает об уязвимости в jQuery

Вчера github разослал “письма счастья” касательно уязвимости проектов использующих jQuery ниже третьей версии.

github-jquery-vulnerability

На моей памяти github первый раз выступает в такой роли. Это очень круто, по сути это же единственный ресурс с таким охватом опенсорсных проектов, после него, пожалуй, идут npm и bitbucket. Комьюнити беспокоится о своих птенцах ^_^

Ссылки по теме:

Поделиться:

Из прекрасного про стайлгайды

self-thought-coder

Поделиться:

Новый html элемент – dialog

В следующей версии html 5.2 появляется новый элемент <dialog>, который как раз и предназначен для нативных всплывающих окон. Не тех, что были в js с начала времен alert() и dialog(), а нормальных, не блокирующих интерфейс и не блокирующих исполнения кода. Разумеется можно накладывать свои стили и анимации.

html-element-dialog

Ссылки по теме:

Поделиться:

jarvis – информационная панель для webpack

Последнее время достаточно часто в трендах гитхаба можно встретить jarvis‘а – информационную панель для webpack. Симпатичный дизайн и заявленные возможности по сбору информации о собираемом проекте притягивают братьев фронтендеров лучше любой приманки 🙂 Ну и я, конечно, решил потестировать и в итоге совершенно не понял зачем это нужно.

jarvis-screenshot

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

Очень сложно пробираться по списку модулей, особенно на большом проекте. В моем случая приложение состоит из более чем 30 частей, которые подгружаются постепенно, по мере необходимости. Их число будет только расти, но уже сейчас jarvis никак не дает возможности нормально просматривать такой список. Никаких фильтров и поиска нет и не предвидится на горизонте.

А больше, собственно ему и похвастаться то и не чем. Они конечно говорят о полезности панели, которая показывает время загрузки модулей, только толку то. Мне нужно знать сколько будет грузиться страница у пользователя, а не через сколько скачается тот или иной файл. Как мне это считать-то?

В общем по-прежнему остаюсь верным пользователем bundle-analyzer, ничего лучше пока не придумали.

Поделиться:

Хром меняет полиси относительно автозапуска видео на странице

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

  • Пользователь как-то интерактировал со страницей (кликал мышкой, тапал и т.п.)
  • Пользователь уже проигрывал видео со звуком на этом домене
  • На мобильном устройстве пользователь добавил страницу на рабочий стол

i-will-found-you-and-will-mute-you

Если честно, то я доволен. Чем строже с автозапуском видео тем лучше.

Autoplay Policy Changes

Поделиться:

Пример улучшения дизайна для корзины

Отличный пример улучшения дизайна для корзины на сайте. Контексты сменились правильно и теперь четко видна разница между информационными группами: список товаров и общая стоимость покупки. Причем явно, что общая стоимость – это производная списка, она не должна и не может быть в том же контексте.

cart-design-makeover

Cart design upgrade

Поделиться:

Webpack-server проксируем запросы

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

или

но это не самое лучшее решение. Так как нужно настраивать это отдельно и каждый фронтенд разработчик должен быть в курсе. А хочется запустить все командой

И больше не возвращаться к этому вопросу. Для этого можно настроить проксирование через webpack-dev-server, обращаться во время разработки к нему, а он уже будет стучаться к удаленному серверу.

webpack-proxy-flow-diagram

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

Все настройки добавляются во все тот же webpack.config.js

Ссылки по теме:

Поделиться:

UI – сборник микро-советов

Немножечко советов о том, как сделать UI приятнее и нагляднее. По ссылке внизу можно получить все одним махом 😉

Все советы одним моментом:

Поделиться:

Биткоин – жутко медленная и энергоемкая система транзакций

Биткон-сеть, для своей работы потребляет энергию – энергия требуется на “майнинг”, расшифровку и обработку блоков с информацией о транзакциях. В год на это потребляется 35 тераватт электричества, столько же сколько и Дания. Только в случае с Данией это целая страна, а в случае с биткоином это очень медленная сеть по обеспечению транзакций.

bitcoin-transactions-data

На сегодняшний день через эту сеть проходит почти 340 тысяч операций, это всего лишь 4 транзакции в секунду. Это невероятно медленно и вопрос об этом уже достаточно давно стоит в биткоин-комьюнити.

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

Ссылки по теме:

Поделиться:

Тестируем NodeJS

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

Причем под NodeJS вроде несовсем понятно как это и делать, а проблема в том как мы пишем код:

Этот код ни разу не протестировать, потому что мы не можем просто создать файл с тестами, импортировать туда productsController.js и поверять что возвращает метод fetchProducts. А все потому что он тесно связан с базой данных myDB, эту связь для тестов нужно разорвать, заменив базу данных на временный объект.

Теперь вопрос в том как это сделать. Можно обернуть все функции контроллера в класс и передавать в него зависимости, но это выглядит достаточно грамоздко, в добавок переписывать сущестующую кодовую базу может быть накладно.

Можно пойти другим путем – заменять контекст. Стандартный пакет vm имеет метод runInNewContext(), который как раз этим и занимается. В итоге нам потребуется вот такая вспомогательная функция для загрузки контроллера, который нужно протестировать:

И все что остается – это использовать ее в самом тесте:

Ссылки по теме:

Поделиться: