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

ExpandJS

Огромный проект, где спецификация веб-компонентов используется на полную катушку. ExpandJS это набор из более чем 80 компонентов и более 350 различных функций для работы с ними. И все это доступно как каркас, но так же и в трендовом Material Design стиле.

<!-- Import elements -->
<link rel="import" href="../mat-content.html">
<link rel="import" href="../mat-drawer.html">
<link rel="import" href="../mat-header-panel.html">
<link rel="import" href="../mat-shell.html">

<!-- Application scaffold -->
<mat-shell theme="...">

    <mat-drawer>...</mat-drawer>

    <mat-header-panel>
        <mat-header>...</mat-header>
        <mat-content>...</mat-content>
    </mat-header-panel>

    <mat-drawer right>...</mat-drawer>

</mat-shell>

Прощай, XMLHttpRequest!

fetch() позволяет вам делать запросы, схожие с XMLHttpRequest (XHR). Основное отличие заключается в том, что Fetch API использует Promises (Обещания), которые позволяют использовать более простое и чистое API, избегать катастрофического количества callback'ов и необходимости помнить API для XMLHttpRequest.

Хех, мне всегда хотелось написать один из этих «Х считается вредным» постов.

Прежде чем я начну, позвольте сказать следующее: я считаю что jQuery оказал просто невероятное влияние на продвижение Web. Он дал возможность разработчикам делать такие вещи, которые ранее считались немыслимыми. Заставил производителей браузеров реализовать многие фичи нативно (без jQuery у нас наверное никогда бы не появился document.querySelectorAll). jQuery всё еще нужен тем, кто не может положиться на современные плюшки и вынужден поддерживать реликты вроде IE8 или хуже.

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

Автор оригинальной статьи Ali Mese добавил ещё 100 новых бесплатных сервисов. Все 400 потрясающих сервисов доступны здесь. И еще подборку +500 инструментов от 10 марта 2017 г. смотрите здесь.

A. Бесплатные Веб-Сайты + Логотипы + Хостинг + Выставление Счета

• HTML5 UP: Адаптивные шаблоны HTML5 и CSS3.
• Bootswatch: Бесплатные темы для Bootstrap.
• Templated: Коллекция 845 бесплатных шаблонов CSS и HTML5.
• Wordpress.org | Wordpress.com: Бесплатное создание веб-сайта.
• Strikingly.com Domain: Конструктор веб-сайтов.
• Logaster: Онлайн генератор логотипов и элементов фирменного стиля (new).
• Withoomph: Мгновенное создание логотипов (англ.).
• Hipster Logo Generator: Генератор хипстерских логотипов.
• Squarespace Free Logo: Можно скачать бесплатную версию в маленьком разрешении.
• Invoice to me: Бесплатный генератор счета.
• Free Invoice Generator: Альтернативный бесплатный генератор счета.
• Slimvoice: Невероятно простой счет.

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


Уязвимость рекурсивных алгоритмов навигации муравья: спираль смерти

Не знаю, кто писал большую часть птиц, но я хочу обратить внимание на особенность, позволяющую провести инъекцию произвольного яйца в гнездо. Дело в том, что птица проверяет только расположение и количество яиц, но не их хэши. В 20% случаев кукушка, эксплуатирующая этот баг, может внести яйцо с сохранением контрольной суммы, чего вполне достаточно для повышения прав в гнезде.

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

1. Интро. Личное

Я готовлюсь к языковому экзамену IELTS (International English Language Testing System) — пожалуй, самому популярному
тесту на знание английского. Если хочется эмигрировать, найти работу в международной компании — диплом IELTS очень пригодится. Шкала оценок — от 0 (от испытуемого не удалось получить даже внятного мычания) до 9 (экcперт — испытуемый чертовски хорош и может устроиться даже редактором лондонской газеты).

Для учебы, например, в США, нужно не менее 6.5 баллов (бывает и 6, но не часто), для работы — 7 и выше. А для эмиграции, допустим, в Канаду — чем выше оценка, тем лучше. Мой прогнозируемый балл перед сдачей теста — 5.5. Значит, что я могу читать газеты, смотреть кино, вести беседы в знакомых ситуациях, писать ответы на письма. Но для работы в центральном офисе Гугла явно недостаточно.

Что же делать, чтобы подтянуть уровень языка? Конечно же, начать использовать его в своей жизни как можно чаще и больше. Например, читать книги на английском.

Введение

Добро пожаловать в третью часть серии статей «Изучаем React». Сегодня мы будем изучать, как устроена архитектура Facebook Flux, и как использовать ее в своих проектах.

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

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

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

Краткий обзор

Один из лучших способов изучить, что то новое, это увидеть, как в нем используются уже знакомые нам вещи. Эта статья не намерена ознакомить читателей с проектированием или шаблонами проектирования. Она предлагает базовое понимание концепций ООП, шаблонов проектирования и архитектурных шаблонов. Цель статьи описать, как различные конструкции программного обеспечения и архитектурные шаблоны используются в AngularJS и написанных на нем SPA.

Введение

Статья начинается с краткого обзора фреймворка AngularJS. Обзор объясняет основные компоненты AngularJS: directives, filters, controllers, services, scope. Во втором разделе перечислены и описаны различные конструкции и архитектурные шаблоны, которые реализованы внутри фреймворка. Шаблоны сгруппированы по компонентам AngularJS, в которых они используются. Если некоторые шаблоны используются в нескольких компонентах, это будет указано.
Последний раздел включает несколько архитектурных шаблонов, которые обычно используются в SPA построенных на AngularJS.

Писать тесты скорости JS не так легко, как кажется. Даже не касаясь вопросов кроссбраузерной совместимости, можно попасть во множество ловушек.

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

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

Тесты для JavaScript пишут многие, некоторые пишут много тестов. Есть несколько популярных тестовых фреймворков, таких как Jasmine, Mocha, QUnit, а также инструменты для автоматического запуска тестов. Некоторые из них даже интегрированы в некоторые редакторы кода. Например, Karma runner и Mocha прекрасно интегрированы моими коллегами в WebStorm. Словом, существуют разные способы запускать тесты автоматически и получать результаты в течении одной или нескольких секунд. Впрочем, время зависит от количества и характера тестов.

Как мы используем наши JavaScript тесты

Такой движок JS, как V8 (Chrome, Node) от Google, заточен для быстрого исполнения больших приложений. Если вы во время разработки заботитесь об эффективном использовании памяти и быстродействии, вам необходимо знать кое-что о процессах, проходящих в движке JS браузера.

Что бы там ни было — V8, SpiderMonkey (Firefox), Carakan (Opera), Chakra (IE) или что-то ещё, знание внутренних процессов поможет вам оптимизировать работу ваших приложений. Но не призываю вас оптимизировать движок для одного браузера или движка – не делайте так.

Задайте себе вопрос:
— можно ли что-то в моём коде сделать более эффективным?
— какую оптимизацию проводят популярные движки JS?
— что движок не может компенсировать, и может ли сборка мусора подчистить всё так, как я от неё ожидаю?



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

Я покажу как собрать простой, но достаточно мощный, генератор на 220 вольт.

Потребуется:

— коллекторный мотор, можно другой на 12 вольт
— насадка на ось мотора — патрон от дрели
— бесперебойник UPS или инвертор с 12 на 220
— диод на 10 ампер: Д214, Д242, Д215, Д232, КД203 и т. д.
— провода
— велосипед
— и желательно аккумулятор на 12 вольт

Сборка:

— закрепляем велосипед так, что бы заднее колесо крутилось свободно, вывешиваем его
— прикручиваем патрон на ось мотора
— крепим мотор так, что бы патрон плотно прижимался к колесу, можно подтянуть его пружиной
— подключаем мотор к аккумулятору: минусовой провод мотора к минусу аккумулятора, плюсовой провод мотора к аноду диода, катод диода к плюсу аккумулятора
— аккумулятор соединяем с бесперебойником или с инвертором
Всё! К бесперебойнику можно подключать потребители на 220 вольт и пользоваться электричеством! Как только аккумулятор разрядится, достаточно будет покрутить педали и примерно через час аккумулятор зарядится.

Кристофер Нолан — режиссер/сценарист «Интерстеллар» рассказал о событиях в жизни доктора Манна (в фильме его играет Мэт Дэймон) после прибытия на ледяную планету. Он был выдающимся ученым, отважившимся исследовать новые горизонты в рамках миссии «Лазарь» с одиннадцатью другими астронавтами. Но что случилось с Манном? Почему его робот был сломан?

Историю проиллюстрировал известный среди создателей комиксов художник Шон Гордон Мерфи.

Посмотреть и почитать комикс можно на сайте журнала Wired.

Перевод книги Marijn Haverbeke "Eloquent JavaScript". Лицензия Creative
Commons attribution-noncommercial license. Код предоставляется под лицензией MIT.

Содержание

• Введение
• Величины, типы и операторы
• Структура программ
• Функции
• Структуры данных: объекты и массивы
• Функции высшего порядка
• Тайная жизнь объектов
• Проект: электронная жизнь
• Поиск и обработка ошибок
• Регулярные выражения
• Модули
• Проект: язык программирования
• JavaScript и браузер
• Document Object Model
• Обработка событий
• Проект: игра-платформер
• Рисование на холсте
• HTTP
• Формы и поля форм
• Проект: Paint
• Node.js
• Проект: веб-сайт по обмену опытом
• Песочница для кода

Сегодня мы рады анонсировать превью нашего нового инструмента — RemoteIE, доступного через технологию Azure RemoteApp. Это бесплатный сервис от Microsoft, который позволит вам запустить свежую версию Internet Explorer на Windows 10 Technical Preview с вашего устройства на Windows, Mac OS X, iOS или Android, причем без необходимости запуска новой операционной системы или тяжелой виртуальной машины на устройстве.



В будущем это будет рекомендованным способом протестировать последние превью-версии IE для разработчиков, не использующих Windows 10.

Чтобы начать, просто войдите на сайт remote.modern.ie со своим Microsoft-аккаунтом и следуйте инструкциям по установке клиента Azure Remote App для вашей платформы.

Если бы меня спросили, какая часть технической реализации игры «Цезарь» мне интересна больше других, я бы вспомнил о расчете одного «дня» городской жизни. Отдельные компоненты математической модели города тоже интересны в реализации, но эти «шестеренки» будут крутиться только в сборе. Большая часть игры проходит внутри «игрового цикла», в котором проводятся вычисления параметров компонентов, выполняются перемещения игровых объектов, создаются новые события и объекты. Если вам интересно узнать, как была устроена симуляция города в одной из лучших игр 1998 года — добро пожаловать под кат. Описания, псевдокод и схемы помогут вам лучше узнать об используемых алгоритмах.

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

LENR – Low-energy nuclear reaction – Низкоэнергетическая ядерная реакция.

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


E-Cat изобретателя Андреа Росси – устройство, использующее холодный синтез для выработки большого количества дешёвой экологичной энергии – в марте 2014г было проверено независимой группой учёных, представивших сейчас 54-страничный отчёт.

Они исследовали маленький E-Cat в течение 32 дней, за которые реактор произвёл 1.5 мегаватт-часов энергии. Это «намного больше, чем может быть получено из любого известного химического источника для реактора подобного размера».

Интересно, что в самом отчёте написано, что 32 дня – это заранее установленный срок эксперимента. То есть, реактор выключили искуственно, и он, к тому времени, всё ещё не подавал признаков снижения выдаваемой мощности.