Книга «React.js. Быстрый старт»

Жаль, но, похоже, книга устарела к моменту выхода.

1) Вместо Browserify должен быть Webpack. Вместо npm — yarn
2) Вот это просто дичь какая-то

cat css/*/* css/*.css | sed 's/..\/..\/images/images/g'
> bundle.css

тут должны быть или gulp-таски, или webpack + css-loader с CSS-Modules, или Inline Styles библиотеки вроде https://github.com/zeit/styled-jsx
3) В реальной жизни настройки лежат в конфиге. А скрипты описаны в package.json

babel --presets react,es2015 js/source -d js/build

4) Webpack, например, уже умеет нативные import / export

включения реализации CommonJS, чтобы работали вызовы require(). Babel превращает все инструкции import в вызовы функций require().

Опрос разработчиков от StackOverflow (2017)

У Haxe такая же проблема. И я знаю почему так — потому что нет маркетинга. Нет и никогда не было

Что взять за основу React приложения

Зря вы наговариваете на Next.js, что там роутинг плохой.
Там же на серверной стороне можно юзать express https://github.com/zeit/next.js/blob/master/examples/custom-server-express/server.js
И с помощью него парсить такие пути /items/:id и всё прекрасно.

Препроцессоры для CSS там тоже есть https://github.com/zeit/next.js/tree/master/examples/with-styled-jsx-postcss — подключайте PostCSS плагины, какие хотите

Возрождение ActionScript2.0 c помощью JavaScript

Уже написано всё давно — Haxe + OpenFL [target JS]
Можно писать примерно как на AS3 и компилировать в JS и Flash

JavaScript без циклов

старый добрый цикл for…of

Улыбнуло :) for...of, который буквально недавно (в ES6) появился

Управляем состоянием приложения с помощью Vuex

да — breakpoint-ы стали глючить, когда Chrome сделал скачек в поддержке ES6 с 60%+ до 90%+
с тех пор от версии к версии их по-разному колбасит

Управляем состоянием приложения с помощью Vuex

Реакт позволяет по минимуму трогать DOM, но если скажешь ему отрендерить 10000 элементов, он послушно это и сделает. повесив вкладку на пару секунд.

Скоро React переедет на новый движок Fiber, и такого больше не будет происходить. https://github.com/acdlite/react-fiber-architecture

Управляем состоянием приложения с помощью Vuex

Redux тоже недружелюбен для IDE. Проследить цепочку Component -> ActionCreator -> Action -> Middleware -> Reducer -> Connect -> Component очень сложно. Все вызовы непрямые, все объекты предварительно биндятся/обёртываются специальными функциями. Обращение ко всему через объект Props ломает оставшиеся подсказки IDE.

Спасает только то, что структура папок/файлов в проектах на React примерно одинаковая везде, и ясно, куда смотреть, если нужно подебажиться.
P.S. — пишу на React 2 года. Юзаю Redux в своих проектах

Знакомство с Styled components

Если всё получится, то будет круто

Знакомство с Styled components

Мне думается, что гонять вот это https://github.com/rofrischmann/inline-style-prefixer на каждое обновление props, еще хуже чем, то, что я предположил сначала.
Этого вообще не должно быть в клиентском коде. Разработчики просто препроцессинг еще не осили

Знакомство с Styled components

Больше всего удручает, что разработчиков таких либ не заботит Autoprefixer.
Они в 2017ом опять предлагают писать руками такое:

background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top,  #1e5799 0%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #1e5799 0%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #1e5799 0%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

Замечу, что Autoprefixer тяжелый, в браузер его не стоит тащить. Он должен работать на этапе Compile Time

Занятие на вечер: эффект Explode на pure JS

Хочу дать несколько советов:

• Не учите людей анимации через setTimeout делать, есть же requestAnimationFrame
• Используйте для статей на Хабре тег <oembed>, чтобы все могли смотреть ваши демки, не отходя от кассы

Пример использования OEMBED

<oembed>http://codepen.io/MrCheater/pen/QGqdbo</oembed>

Пишем самый простой и быстрый input type file

Не просто jQuery, а jqyery

jqyery

Модульный DIY-ноутбук Olimex TERES I

Мой первый ноутбук, EeePC 701, имел примерно такие же характеристики. На нём прекрасно работала Windows XP, Visual C++ 2005 + Portable MSDN, Microsoft Office, Adobe Photoshop 6 (не CS6, именно 6) — мне этого хватило на 5 лет учебы в универе.

Проектная папка дизайнера. Создаём бекапы

А можно просто завести 2ой бесплатный репозиторий :-)

Проектная папка дизайнера. Создаём бекапы

Можно

Проектная папка дизайнера. Создаём бекапы

У Bitbucket есть лимит в 2 ГБ
Если проект будет длиться долго, то упрётесь. Но для коротких проектов это неважно.

Рефакторинг салона видеопроката на JavaScript

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

Рефакторинг салона видеопроката на JavaScript

Я вижу в статье про рефакторинг следующие вещи, которые вызывают некоторое непонимание:

1) Магические константы

result += (data.days - 2) * 1.5;

result = data.days * 3;

result = 1.5;

result += (data.days - 3) * 1.5;

2) Самопальный шаблонизатор c захардкоденными строками

function htmlStatement(customer, movies) {
  const data = createStatementData(customer, movies);
  let result = `<h1>Rental Record for <em>${data.name}</em></h1>\n`;
  result += "<table>\n";
  for (let r of data.rentals) {
    result += `  <tr><td>${r.title}</td><td>${r.amount}</td></tr>\n`;
  }
  result += "</table>\n";
  result += `<p>Amount owed is <em>${data.totalAmount}</em></p>\n`;
  result += `<p>You earned <em>${data.totalFrequentRenterPoints}</em> frequent renter points</p>\n`;
  return result;
}

3) switch-case с захардкоденными строками

switch (movie.code) {
    case "regular": /*...*/ break;
    case "new": /*...*/ break;
    case "childrens": /*...*/ break;
}

Можно было бы какое-нибудь подобие enum-а завести с этими значениями.

Классические алгоритмы генерации лабиринтов. Часть 1: вступление

"Это видео недоступно."
UPD: было недоступно — стало доступно