Посмотрел видео о классах "CSS - Who Wins?", а перед этим задумался об инструментах для CSS

Если стиль блока включает несколько классов, то какие "главнее"? Когда порядок объявления стилей в css файлах второстепенен? Эти вопросы особенно важны, когда у элемента разметки много классов (BEM). Как лучше использовать префиксы, оптимизаторы, json2html, Map HTML to JSON, beautifytools, CSS Optimizer, What is Modernizr? Best Free CSS Optimization Tools to Tune up Your Site, Bootstrap wrapper no conflict

Как преобразовать html2json & json2html

Весь современный фронтенд "настроен" на работу с данными в формате Json. Если я захочу "стырить" данные с чужого сайта, том можно не ваять парсер, а вырезать кусок кода, преобразовать его в json, и использовать свойства объекта javascript, например, в шаблонизаторе... Не уверен, что такой комплесный парсер лучше... Но идея красивая. Потому наскоро нашел с пяток вариантов, вот примеры Pure JavaScript HTML5 Parser, gulp-to-json, Demo online

Процесс загрузки HTML страницы в браузер на примерах из документации Гугл

Популярное изложение основ Блокировка анализатора и асинхронный JavaScript. Здесь же ссылки на несколько примеров страниц с разными вариантами загрузки скрипта. JavaScript позволяет извлечь из DOM скрытый объект span, который может не отображаться в модели визуализации, а затем заменить текст внутри объекта (с помощью команды .textContext) и вычисляемое свойство стиля (с none на inline). Готово! На странице появится текст Hello interactive students!.

Упражняемся с 'node debug' по видео из поста 'Отладка-скриптов-в-nodejs'

1)Supervisor (для перезапуска автоматического скриптов. 2) node debug - штатный дебаггер, можно задать (setbreakpoint или) в коде скрипта debugger; , node-inspector - добавляет GUI Chrome с возможностью просматривать файлы

Как склеивать, чистить, сжимать файлы css и javascript

Здесь я еще не знал, как вообще работать с этими файлами. Но уже занл про GULP плагины. Потому решил найти онлайн инструменты для быстрой склейки (например) CSS... Нашел много чего: PageSpeed Insights, What is the Closure Compiler..., jsmin, Разработка → Разгони свой сайт – автоматическая СКЛЕЙКА + GZIP...

Gulp-swig c плагином Gulp, и мануал по ejs

Поймал себя на том, что мысль о собственном шаблонизаторе становится все более навзчивой. Причем, я ее гоню..., выгоняю..., а потом она приходиит ко мне под видом gulp-ejs. Оказалось, что в описании к Gulp-swig исчерпывющий набор примеров...
Так что здесь я начал было разбирать, как использовать Swig and YAML front-matter, но все оказалось очень просто, так что пост короткий.
Update: Оказалось, что в посте нет ссылки на документацию, нашел вот здесь Liquid-for-Designers... и еще есть пара ссылок в комментариях к посту.

Видео и презентация о CSS3 Flexible Box

Нашел статью на Хабре, потом видео (30 минут), свойства Flexbox надо использовать. Вспомнил, что недавно, просматривая учебник по CSS3, не обратил внимние..., вернее, не захотел вникать (без надобности) в новый подход к выравниванию html-блоков. Исправлюсь..., для тренировок буду испоьзовать примеры с **w3schools.com

Видео и презентация CSS3 Flexible Box

Нашел статью на Хабре, потом видео (30 минут), свойства Flexbox надо использовать. Вспомнил, что недавно, просматривая учебник по CSS3, не обратил внимние..., вернее, не захотел вникать (без надобности) в новый подход к выравниванию html-блоков. Исправлюсь..., для тренировок буду испоьзовать примеры с **w3schools.com

Читаю раздел "Browser Rendering Optimization" и Google developers tools

Почему браузер "подвисает" при отрисовке страницы, или, почему страница видна, а прокрута заблокирована? Как посмотреть, что и почему тормозит?
Здесь много ссылок, тема мне так понравилась, что не смог все изложить (запомнить) последовательно, при первом же чтении регулярно посещал "второстеенные" страницы по ссылкам на "главных" страницах... Пришлось в конце поста добавлять ссылки с пояснениями. С них, пожалуй, и надо начинать. Кроме того, здесь картинки из раздела Производительность визуализации документации Гугла.

Ифи - IIFE - Immediately-invoked function expression ...and two sets of parentheses... и приемы сборки модулей js

Дабы не путаться в круглых скобках javascript здесь конспект и ссылки для понимания паттернов (function() { ... })(); и someFunctionCall()()
А потом добавил сюда 4 ссылки для двух статей JavaScript модули: сборка модулей. В следующих постах надо будет разобрать приемы сборки jQuery и Bootstrap (например).

Отладка-скриптов-в-nodejs

Здесь заметки к двум видео - Supervisor и "Отладка...". Nodejs считывает файл модуля один раз, поэтому при отладке надо чистить кэш. Делать это лучше с помощью модуля Supervisor. А для отладки можно использовать внутренний дебаггер, GUI Crome, или настроить IDE. Пробую варианты дебаггера по одноименному видео от И. Кантора.

Запусаем локальный сервер Material design light и строим демо-сайт

Надеялся, что после скачивания mdl с Github достаточно вручную скомпилировать galpfile.babel.js и запустить gulp serve, оказалось, что надо еще подгрузить плагин и скопипастить файл ..., а потом выяснилось, что в новом se-gulpfile.js 934 строки, и перед запуском сервера надо выполнить несколько команд для сборки (swig, css, assets, js ). Соответвствующие командв Gulp удалось довольно быстро найти и выполнить... Сегодня мне интересно понять, как работает шаблонизатор (gulp-swig)... Об этом в следующих постах, а здесь тоолько о том, как его запустить.

934 строки из файла se-gulpfile.js (MDL)

Поскольку мне еще не раз понадобится заглянуть в gulpfile.babel.js из Material Design Light, то надо иметь под рукой его скомпилированный вариант. Так что здесь сам файл, содержание директории material-design-lite... фрагменты из файла... Templating with Swig and YAML front-matter

Babel CLI globally - починяет примус и "Web Starter Kit", или, как победить дефект Gulp

Все мои попытки запустить Google Web Starter Kit или Material design light приводили к тому,что Gulp работал дефективно и стили не подгружались... При этом Gulp ругался при любом обращении к нему Requiring external module babel-register... Никакие установки и переустановки модулей на помогали... не было решений и в сети. (Смотри мои предыдущие посты на эту тему) Здесь показан процесс установки babel-cli с последующей тупой компиляцией gulpfile.babel.js в se-gulpfile.js, но пост начинается с попыток самоанализа - почему нашел решение только через две надели?.

Разобрался с деревом node_modules в NPM (Nodejs), а ошибку обещают исправить разработчики

Ошибка Requiring external module babel-core/register подоспела вовремя. Иначе так и не прочитал бы документацию npm. Здесь фрагменты из документации и мои упражнения с опциями CLI npm.
Однако, оказалось, что мои настойчивые поиски дали сомнительный результат только после того, как я догадался ограничить поиск (в Гугле)только последним месяцем. Сразу же нашелся призыв разработчиков подождать следующего релиза.
Но верится с трудом. Такие ошибки у них вываливались регулярно в течение последнего года... Чего-то я не понимаю...