Поиск по этому блогу

воскресенье, 4 декабря 2016 г.

CSS3 Multiple Backgrounds

Можно ли использовать стопку из нискольких картинок для фона. Здесь я попробовал одну картинку, но с разным увеличением и положением. А пример в самом низу с анимацией, так что смотреть сначала на него (анимацию не зациклил). Вполне можно использовать для того, чтобы показать разные участки одной большой картинки.

четверг, 1 декабря 2016 г.

Foundation Search results for: parallax (template)

Нынче в моде шаблоны parallax. В процессе освоения Zurb Foundation решил я поискать эти шаблоны на ресурсах Zurb. Нашел видео и с десяток ссылок. Например, Parallax - Zurb University Lessons, 10 Awesome Parallax Scrolling Tutorials with Code, The CSS Source Code Behind Our Manifesto Tip F6 and background video with Jarallax.

вторник, 29 ноября 2016 г.

Free Website Builders

Попробовал два html редактора Silex websitebuilder. Слепил на скорую руку c131.my-free.website. Обнаружил, что там используют BEM и грузят картинки скриптами... Для Silex запомнил возможность импорта кода из облачных сервисов и по FTP. Однако, решение о полезности подобных сервисов не принял. Идею о том, чтобы использовать их для работы с заказчиками не отверг, но много неясностей..., потому сделаем паузу, дабы вернуться к ней позже.

воскресенье, 27 ноября 2016 г.

Web design inspiration links

Здесь нет текста, но около десятка ссылок, найденных по ключевым словам inspiration и awards. Тема представлятся важной, но не сегодня, но повторять поиски в будущем не хочется... Проще опубликовать этот куцый черновик-заготовку.

суббота, 26 ноября 2016 г.

Смотрю видео Three aspects to grafic design

И пытаюсь конспектировать. Вот они, эти самые аспекты. Layout Color Composition К этому видео нужно будет вернуться... Наедюсь, в мае.

пятница, 25 ноября 2016 г.

Краткий курс по композиции (фотография)

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

четверг, 24 ноября 2016 г.

Пора познакомиться с COLOR WHEEL

Или, как отчаяному дальтонику стать крутым дизайнером. Здесь видео, около 20 ссылок и фрагменты по темам color terminology Color Theory For Designers, RGB to HSL color conversion, paletton.com

среда, 23 ноября 2016 г.

Typography and vertical rhythm

Здесь видео и ссылки по этой теме. Начал читать Aesthetic Sass 3 и собрал здесь ссылки по Modular typography. Нашел подборку коротких видео, а в статье к видео ссылки на инструменты type-scale и ссылки на статьи с обоснованием подхода Example golden ratio

воскресенье, 20 ноября 2016 г.

Читаем Sass Best Practices: Tips And Tools For Developers

И находим ссылки на 10-ток статей, по темам: Aesthetic Sass, 11 Mixin Libraries For Sass Designers, HOW I STRUCTURE MY SASS PROJECTS, Understanding CSS Writing Methodologies, For, while, and each loops in Sass, Единицы измерения: "px", "em", "rem"

вторник, 25 октября 2016 г.

Пытаемся разобраться в хитросплетениях импорта sass в foundation-docs

Обнаружил, что foundation-docs импортирует (в node_modules) foundation-sites. И наоборот... А в gulpfile пропитсаны дополнительные пути для импорта scss файлов. Что конкретно импортируется и зачем? Здесь собрал вместе фрагменты файлов и распечатал структуру директорий.

понедельник, 17 октября 2016 г.

Знакомимся с gulp-shell и с lodash

Можно ли вызывать с Gulp системные (консольные) команды? Здесь фрагменты кода из документации.

суббота, 15 октября 2016 г.

Изучаем Hexo и рассуждаем об услугах по рекламе

Hexo - движок для блогов. Продолжаем разбираться, как он работает, но пытаемся разобраться и втом, что же мне надо для фронтенда. Update: Это все от того, что здесь я еще не знал, как его совместить с Gulp

среда, 12 октября 2016 г.

Надо просматривать package.json и научиться обновлять основные зависимости

Например, пробую пакет hexo-theme-zurb-foundation пробую запустить gulp и получаю: Ошибка Error: libsass bindings not found. Try reinstalling node-sass? при попытке выплнения команд gulp... Пришлось перечитать docs.npmjs.com, кроме того, я нашел Troubleshooting в документации node-sass...
КА еще нахожу десятки рецептов на stackoverflow.com libsass bindings not found when using node-sass in nodejs
Оказывается, что таких же как я (чайников) очень много. Потому принимаем правило (в заголовке).

понедельник, 10 октября 2016 г.

Ищем простые инструменты для Frontend, но находим примеры gulpfile.js с Hexo API

Поиски аналога Panini для EJS присели меня к Harp, однако он не захотел устанавливаться на мой ноутбук. Мне стало стыдно перед GULP, я просмотрел плагины по темам "Gulp ejs", "Gulp hexo", потом подумал об альтернативах: испоьзовать плагины для Atom, поставить ядро ijavascript на Jupyter Notebook... а потом научился искать Gulpfile.js на Github и скопиастил сюда фрагменты файлов.

четверг, 6 октября 2016 г.

Ищу варианты jekyll -> hexo - ejs, Gulp - Panini - handlebars ? Liquid!???

Пора начинать упражнения с шаблонизаторами. Но с чего начинать. Есть hexo (ejs, swig), но выбор тем пока невелик, есть Jekyll (handlebars) с большим выбором готовых тем, но тратить время на Ruby не могу, есть Gulp Panini (handlebars), который мне очень понравился, но надо будет к hexo прикручивать плагин handlebars. Не проще ли освоить и embeddedjs, и handlebars, а потом и SWIG, jade между делом... Бааа, да в Jekyll оказывается используется Liquid... Пробую прикрутить плагин hexo-renderer-liquid Hexo, но обнаруживаю, что в Jekyll слишком много своих хелперов... Нет, проще освоить EJS... Бросаю это дело на engine.registerFileSystem Так что здесь только 15 ссылок... и обрывок кода о renderer.Engine

понедельник, 12 сентября 2016 г.

Начинаем с Fiddle.net и аналогов, но увлекаемся и собираем онлайн сервисы для фронтенда

Здесь видео и около 20 ссылок, например Bootstrap Mega Menu, fiddlesalad.com, jsfiddle.net, CodePen ... Но сервисов обнаруживается все больше, причем, с новыми возможностями cssdig-chrome gulpfile.js , или Accessibility audit and element properties . И совсем уж для дизайнеров и аниматоров - shadertoy.com. Так что добавлять новые ссылки по всем фронтенд-инструментам будем в комментарии.

пятница, 9 сентября 2016 г.

Foundation-doc. Откуда Gulp берет scss файлы и куда пишет...

Сначала я посмотрел видео Make a Basic Website with Foundation 6, потом Make a Trendy Site with Foundation 6, Sass and Panini #2, а 20 дней спустя решил разместить здесь мои блуждаания в изрядно запутанных лабиринтов импорта и отслеживания (gulp-watch) папок с SASS файлами Foundation-doc. Здесь еще и изрядное количество копий файлов типа _settings.scss и содержание директорий с файлами стилей

вторник, 6 сентября 2016 г.

Устанавливаем foundation-sites с помощью foundation CLI

Упражнения с интерфейсом командной строки foundation new foundation-with-cli. Что загружается и в какой последовательности.

суббота, 3 сентября 2016 г.

Мне понравился gulpfile.js Foundation-site

Здесь я копаюсь во внутренностях gulpfiles.js foundation-docs и foundation-sites, открываю Supercollider, panini... Потом ытаюсь найти склад тем SassDoc Theme Boilerplate... Здесь штук 20 ссылок, галпфайлы, и даже readme c foundation-docs

пятница, 2 сентября 2016 г.

Установил Foundation-site

В процессе установки произошел сбой. В папке Node_modules появилась подпапка... Это был редкий сбой железа. Надо было просто удалить node_modules, но я с испугу записал здесь процесс установки...

вторник, 30 августа 2016 г.

Посмотрел видео о классах "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

четверг, 25 августа 2016 г.

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

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

суббота, 20 августа 2016 г.

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

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

среда, 17 августа 2016 г.

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

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

воскресенье, 14 августа 2016 г.

Как склеивать, чистить, сжимать файлы 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... и еще есть пара ссылок в комментариях к посту.

суббота, 13 августа 2016 г.

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

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

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

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

среда, 3 августа 2016 г.

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

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

среда, 27 июля 2016 г.

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

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

понедельник, 25 июля 2016 г.

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

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

среда, 20 июля 2016 г.

Запусаем локальный сервер 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

воскресенье, 17 июля 2016 г.

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, но пост начинается с попыток самоанализа - почему нашел решение только через две надели?.

четверг, 30 июня 2016 г.

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

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

вторник, 28 июня 2016 г.

Позвонил Гена: "HP ProOne 400 не загружается - что делать?"

Тащи эту штуку ко мне! ...
И Гена приволок мне этот моноблок ящик с понтами. Наши отношения с Геной - это песня о молодом инженере, который предпочитал есть меджвежатину и презирал мещанскую виртуальную жизнь, а заодно и все IT. Его ноутбуки - это питомники вирусов...
На этот раз у него нашелся фирменный загрузочный диск. Ктоме того, мне удалось нагуглить рецепт repeatedly press the F11 и загрузиться прямо с винчестера. Но, как всегда, не обошлось без приколов. Гена умудрился сохранить раритетный Window 7, так что пришлось потом два дня грузить Widows 10. Здесь только ссылки на документацию HP ...

пятница, 24 июня 2016 г.

К скринкасту Создаем свой пайп (плагин) Gulp:9

Gulp 9: Создание плагинов при помощи through2, gulp-rev А также: manifest.json

К скринкасту Gulp 8: Обработка ошибок

Здесь разбираются модули gulp-notify, gulp-plumber, multipipe, stream-combiner2 (сктинкаст о И. Кантора)

четверг, 23 июня 2016 г.

Service Worker - прокси в браузере, управляемый скриптом с загружаемой страницы

Вот, оказывается какие штуки появились, и в моих браузерах, и даже какие-то "воркеры" уже мне кто-то поставил... и в Chrome chrome://serviceworker-internals/, и в Mozilla about:debugging#workers
Понял, как они работают после того, как прочитал Register a Service Worker on the site из инструкции "Your first offline web app". А перед этим просмотрел несколько статей ...часть ссылок здесь.

К скринкасту о Browsersync добавим фрагменты из web-starter-kit/gulpfile.babel.js

И запомним, что вариантов gulpfile.babel.js в репозитории много. Здесь только фрагменты из master. А пост начинается с видео и кода к скринкасту Gulp 7: Browsersync... Плагины live-reload, browser-sync вставляют скрипты на html страницу. Как эти скрипты отслеживают изменения? Разбираться некогда, сначала бы опции освоить. Но на кнопку reload браузера теперь нажимть не надо. Все пересобирается само.

Конспекты к двум виедороликам о кэшированиив в Gulp

Примеры с плагинами gulp watch, since: , Gulp-changed, gulp-newer, gulp-remember, gulp-cache, gulp-cached от Ильи Кантора в скринкастах Gulp 5: Инкрементальная сборка, watch. Gulp 5: Инкрементальная сборка, повышение производительности.
В первом примере, "инкрементальность" обеспечивается за счет того, что в плагине styles данные кэшируются, а значит пересобираются заново только измененные файлы, но все это реализовано внутри styles...

среда, 22 июня 2016 г.

Конспекты к первым четырем скринкастам Gulp

Здесь видео и код к скрикастам. "Система достаточно детская, но надо же с чего-то начинать" (- Илья Кантор). А этот пост начинается ссылками на подборки статей, потом я постарался привязать примеры к видео поминутно..., а заканчиватся все фрагментами кода из двадцатиминутного ролика "Начальная сборка стилей" и последующим копипастом заголовков "Рецептов" из документации Gulp

понедельник, 20 июня 2016 г.

Копипаст трех gulpfile.js и ссылки на всякую всячину из папок репозиториев Google

Просмтривал корень репозитория material-design-lite, узнал, что Babel is a JavaScript compiler, Drone is a hosted continuous integration service. В комментариях к статье на хабре Google Web Starter Kit: конструктор мобильных сайтов нашел три ссылки на сервисы building high-quality mobile apps, которые решил считать альтернативами...
Потом решил, что надо бы добавить сюда все ссылки на gulpfile.js из web-starter-kit, WebFundamentals и iliakan/gulp-screencast (от Ильи Кантора)

Service Worker - прокси в браузере, управляемый скриптом с загружаемой страницы

Смотрим видео и умиляемся, до чего дошел прогресс. Вот, оказывается какие штуки появились, и в моих браузерах, и даже какие-то "воркеры" уже мне кто-то поставил... и в Chrome chrome://serviceworker-internals/, и в Mozilla about:debugging#workers
Понял, как они работают после того, как прочитал Register a Service Worker on the site из инструкции "Your first offline web app". А перед этим просмотрел несколько статей ...часть ссылок здесь.

воскресенье, 19 июня 2016 г.

Прежде, чем юзать Google web starter kit, проникаемся принципами Progressive Web App

решил прочитать раздел документации Web Fundamentals -> Getting started -> Your First Progressive Web App
Все так понравилось, что проглотил весь "Getting started" c другими примерами Your first push notifications web app и даже к GULP нашел пояснения... Start your site with Web Starter Kit, Introduction to Service Worker, New Service Worker debugging tools, Разработка → Введение в Firebase, Google Web Designer, Правила PageSpeed Insights,
Здесь видео про ServiceWorker и еще ссылки на фундаментальные статьи типа JavaScript Promises

вторник, 14 июня 2016 г.

Яндекс-косноязычие... ищу альтернативы для фронтенда

Фраза фаз, называемых режимами с фрагментами результатов в документации bem-xjst сразила меня наповал.

НО я сразу же снова поверил в себя... это не я тупой, это они не могут писать по-русски. И дальше это читать не буду. Потому здесь только ссылки на шедевры и онлайн демо (песочницу).
Но жизнь продолжилась. Начал искать альтернативы и учиться. Здесь десятка два ссылок по темам gulp-hexo, bootstrap, EJS, Understanding module.exports, JavaScript Modules ,Скринкаст NODE.JS

четверг, 9 июня 2016 г.

Последнее видео с фронтед-субботника 2016 Яндекса про BEM

О планах на начало года и промежуточных итогах рассказывается в видео "Новости из мира БЭМ". Здесь и про Gulp (я сюда скопировал версию gulpfile.js, мало ли чего...), и про кастомные библиотеки (bemdesign-blocks, Alfa-Bank Open Source ...), и ссылки на гитхаб эксперименты типа bootstrap-bl (4-х летней давности)

среда, 8 июня 2016 г.

Видео бебинаров по BEM (2-ой и 3-й)

Мое первое желание - использовать GUlp. Потому фраза в описании к видео Мы показали, как это делается, на примере Gulp заинтересовала. Здесь же и gulpfile.js И приблудились ссылки на Lightweight BEM plugin for jQuery и html2bl Tiny little script for getting blocks dirs from HTML file with redefinition levels.

Знакомимся с Node.js Style Guide и @use JSDoc

Должны же быть в nodejs соглашения о том, что и как писать в блоках комментариев. Да, и здесь есть еще теги (например @param {string} html), которые вставляются в блоки с многострочными комментариями... Оказывается, что так можно подготавливать документацию в процессе кодинга... Т.е., сначала пишешь комментарии в коде, а потом... можно все это "выпарсить" при помощи JSDoc в страницы с описанием API. Здесь видео и ссылки.

вторник, 7 июня 2016 г.

Здесь я пробую BEM start-project (Yandex) и добавляю переменные окружения при помощи SET

Установил start-project, запустил сервер... Обнаружил в дистрибутиве make.js, записал сюда. Но сначала записал
set PATH=%cd%\node_modules.bin;%PATH% (для windows) и
export PATH=./node_modules/.bin:$PATH для Linux.
Я никак не запомню, где двоеточие, а где точка с запятой..., а надо бы.

понедельник, 6 июня 2016 г.

Фрагменты gulpfile для BEM - сохраняю, дабы вернуться к ним после изучения скринкаста по GUlp

Здесь я нахожу разные юзаю bem, нахожу разные варианты gulpfile для BEM (gulp-bem, gulp-bem-debug), нахожу, как задавать переменные окружния в консоли

суббота, 28 мая 2016 г.

Конспектируем статью про Gulp на Хабре и 100 комментариев к ней

И называется она Разработка → Приятная сборка frontend проекта. Пару месяцев назад я ее уже просмотрел, но не оценил..., а вчера нашел снова и прочитал с удовольствием. Почему? Потому, что сейчас я решаю задачку о том, по каким папкам мне раскладывать мои новые проекты... К статье сделано более 100 комментарие. Так что, надеюсь выделить для себя подпроцессы фронтенда с наборами инструментов под каждый процесс. Например, я пытаюсь спрогнозировать поведение заказчиков, сделал я им сайт-визитку, а они захотят добавить к неу блог, а потом окажется, что им и контент для блога нужен... С точки зрения "фронтенда", у меня должны быть заготовки шаблонов и стилей... (и движков, но это уже бэкэнд ?)... и под "визитку" и под "блог" сразу. И это очевидно... Так что здесь продолаем осваивать инструменты, и между делом устанавливаем авторские заготовки для сборки проектов.

четверг, 26 мая 2016 г.

Пробуем Metalsmith, metalsmith-base и ждем счастья - есть статьи автора и статьи последователей

Идеи автора полностью совпали с моими. Если мне нужен не движок для блога, а нечто более гибкое, то неплохо было бы: 0) Шаблонизатор на nodejs, 1)Подход к настройкам, как в Gulp 3)Примеры сборок и модулей
Пробуя шаблонизатор я обнаружил сборку metalsmith-base, в которой реализована мечта 4)Добавить шаблонизатор к Gulp, а не Gulp в шаблонизатор...
Надеюсь, что это именно то, что нужно... Здесь: Установил сборку metalsmith, и рядом metalsmith-base, поднял сервер metalsmith-base..., распечатал логи и файлы настроек... Первые опасения: слишком много предупреждений об устаревших версиях в metalsmith-base...

понедельник, 23 мая 2016 г.

Практикум с Hexo - устанавливаем темы, в которых авторы использовали Bootstrap

Хочу перехитрить время и надеюсь, что изучение чужих тем для Hexo нужно провести до того, как ваять свою. Даже, если эти темы сделаны с ошибками (как мне кажется). Все эти искания происходят от того, что "в принципе у нас все есть", но мелих "непоняток" слишком много...

пятница, 20 мая 2016 г.

Три видео и технология Express Nodejs

Express - это фреймворк для разработки сайтов на ноде. Знакомимся. Смотрим видеоуроки Ilya Kantor Express: основы и Middleware -12мин, Логгер, конфигурация, шаблонка для HTML, Шаблонка: layout, block, partials Кроме того, есть и другие альтернативы 10 Best Node.js Frameworks For Developers... всего 14 ссылок

среда, 18 мая 2016 г.

Практикум с npm, читаем документацию и конспектируем как и куда устанавливаются пакеты

Сейчас мне нужен движок для статичных сайтов. Jekyll понравился, но "у него гранаты не той системы", я ведь хочу не блог вести, а менять темы (и офрмление) как перчатки, так что получается, что надо учить Ruby, дабы не путаться с "гемами" и их совместитмостью. Но я еще Nodejs толком не юзал, сейчас надо тратить время на него... Так что, ударим по бездорожью и разгильдяйству десятком ссылок на темы npm v3 Dependency Resolution, scoped package и прочее...

понедельник, 16 мая 2016 г.

Устанавливаем Hexo и пытаемся понять, как работать с темами

Установил Hexo, но получил предупреждение notsup Not compatible with your operating system or architecture: fsevents@1.0.12. Какая-то опция не будет работать... Вроде бы, сервер не подхватывает изменения сам. Думаю, что вопрос решаем, потому сосредоточимся на переключении тем. Итак, здесь первые шаги с блоками и пакетами Hexo. Собственно установка hexo во второй половине поста, а в начале мои блуждания в трех сосна темах landscape - штатной, zurb-foundation- кривой, simplest- той, которая успешно установилась, но удивила пухлой папкой t1/themes/simplest/node_modules

среда, 11 мая 2016 г.

Здесь еще один лог установки bundle install -j8

Великая битва с Jekyll на полях Windows продолжается. Здесь практикум с bundle с bundle exec rake build. Все это категорически не нравится... Но пока не хочется терять возможности использования чужих наработок по Jekyll

вторник, 10 мая 2016 г.

Практикум по "windows shell scripting"

В предыдущем посте собрал подборку видео, а в этом постарался все повторить. Оказалось, что часть команд устарели (видеоролики хорошие, но старенькие), так что здесь еще и ссылки на мануалы с technet.microsoft.com

воскресенье, 8 мая 2016 г.

Не знать windows shell scripting просто стыдно (7 видео, ссылки и примеры)

Это те самые навыки, освоените которых каждый раз откладываешь на "потом". Вчера задумался о том, как надо бы переписать переменную окружения PATH из консоли (и глобально).
Раскопал подтверждения моим старым "открытиям" для локальных пространтсв имен: просто set - или set PATH=%PATH%;C:\xampp\ph,
потом пошли "открытия:" setx, @echo off, потом начал смотреть видео Setlocal ... потом нашел справочники..., словом, я понял, как низко я пал, когда обнаружил, что можно использовать type... Публикую этот пост вне очереди, чтобы пересматривать видео.

четверг, 5 мая 2016 г.

Jekyll on Windows, или как снести RUby и поверить в RailsInstaller

Пытался понять почему в Jekyll serve не работает --watch. Начал осваивать RubyGems, обновил все gem`ы, после того, как jekyll перестал "запускаться", убедился, что bandler придумали имено для этого, посмотрел пару видео про Ruby on rails... в одном случайно подсмотрел, как лучше работать с gemfile... И понял, что моя неизбывная вера в человечество дала трещину. Залить ruby на Ubunty&Читать ли потихоньку ruby? Заменить ли Jekyll на что-нибудь под nodejs? Даже вопросы толком сформулировать не могу... соломинки (для спасения) слишком разные, но уже качаю RailsInstaller?

вторник, 3 мая 2016 г.

Устанавливаем jekyll с GitHub ... там есть Bandler c большим Gemfile

Приходит понимание того, что "все эти жжжжж неспроста"... bower, bundler... Ранее я наустанавливал гемы sass, kompass, jekyll, foudation разными способами. Все худо-бедно работало. Потом я не мог понять, почему сервер Jekyll не обновляется... и решил установить Jekyll с GitHub... И здесь повыскакивали ошибки, да такие, что в следующих постах я переустановлю Ruby

Смотрим видео и юзаем понты BrowserSync

Обнаружил в дистрибутиве jekyll-foundation (вроде бы) лишний сервер BrowserSync. Не понял, зачем он нужен (есть же "штатный" в Jekyll). Нашел и посмотрел видео, запустил на машине с windows... Ну да, немного понтов есть..., но так и не понял, зачем же он нужен.
А потом (в следующих постах) я обнаружил, что jekyll вообще не поддерживает windows..., в частности автоматическое обновление (штатного сервера) мне настроить так и не удалось. Так что, не исключено, что попробую его еще разок.
Здесь два видео, код для gulp.js... и еще ссылки на документацию, и на портал видеоуроков.

воскресенье, 1 мая 2016 г.

Пытаюсь понять общие приемы front-end в дистрибутивах Jektll, Foundation, Bootstrap

Скопировал с Гитхаба несколько вариантов фреймворков. Здесь пытаюсь сравнить структуру папок, подходы и методологии CSS, фреймфорки для верстки, ... с учетом того, что Bootstrap переходит на SASS. Здесь еще фрагменты _config.yml (jekyll)

четверг, 28 апреля 2016 г.

Заставляем Google Chrome показывать scss вместо css и учим матчасть Chrome DevTools

Как использовать вкладку resources браузера? Файлы можно не только просматривать, но и редактировать, и сохранять на диск... Здесь несколько мануалов и страницы документации. Еще один способ для работы со стилями?
Наверное это правильно - наскоро освоить несколько альтернатив. ...Что понравилось в документации Chrome developers... Так это то, как они между делом подключили сервер на Питоне python -m SimpleHTTPServer. И правильно, без сервера никуда, а Ruby (на котором они sass запускают) я и знать не хочу...

Здесь я устанавливаю Foundation на локалку и обретаю понимание основ

Начинаю привыкать к установкам типа git clone https://github.com/zurb/foundation-sites-template projectname cd projectname npm install bower install. Более ранние установки foundation оказались "кривоватыми", поскольку не представлял, что какой софт делает... Такой период в конце апреля наступил, когда "тупо" ничего не устанавливается, везде надо хоть немного разбираться в том, что делаешь... А устанавливал, чтобы проще было изучать... Словом, Ruby-cтрдания "чайника"...

среда, 27 апреля 2016 г.

Готовимся к Jekyll 3 and Foundation, вспоминаем, где уже установлен Jekyll Bootstrap

Пост начал 27-го, заканчиваю 30-го. За это время прочитал документацию про Foundation, потом по Jekyll. А вчера вечером пришлось повозиться с установкой Jekyll Foundation, так что пост получился длинный, но все нужные ссылки здесь есть. Оставим все, как есть, а для сравнения трех установок Jekyll напишем следующий пост. Еще здесь ссылки из двух статей (мануалов) по теме Jekyll Foundation. В первой описан прстой способ установки, а во второй автор попытался описать еще и приемы работы веб-дизайнера. От идей до инструментов. Например, Designing Visual Hierarchy, Picking Subtle Textures и даже Case Study - Koodilehto Site

понедельник, 25 апреля 2016 г.

Шпаргалка по SASS (SCSS) на русском языке

Здесь я читаю перевод документации SASS, копирую примеры и просто пытаюсь запомнить основные команды. В посте две ссылки на русский переводид и оригинал.

воскресенье, 24 апреля 2016 г.

Продолжаем практиковаться с Сompass, но открываем мануалы Foundation

Кажется нашел именно то, что надо мне именно сейчас. На сайте foundation есть руководство по установке, команда compass create found-test-dir -r zurb-foundation --using foundation создает странную структуру папок (я в предыдущем посте научился использовать add_import_path для подключения в конфиге из залитой в kompass папки foundation или bootstrap).
Здесь же и документация scss с описанием переменных и миксинов для каждого компонента. Здесь же и видео (сильно небритый очкарик показывает свои крупные планы при каждом удобном случае), здесь же и 8 штук "responsive templates" (дабы я мог запомнить классы каркаса)... Есть еще и подписка от учебного центра, вот пример "Build a sticky navigation with Foundation for Sites 6"

суббота, 23 апреля 2016 г.

Практикум Compass-sass и немного Jekyll и Bower

Посмотрел несколько видео, здесь три по связке sass&compass. Сначала решил повторить примеры из двух роликов "Введение в SASS & Compass" - здесь кратко и понятно изложены основы SASS.
Но оказалось, что сначала надо научиться настраивать compass и попрактиковаться с Bower.
Так что воспользовался видео из предыдущего поста и настроил компиляцию scss -> css, потом add_import_path и подключил normalizer из скачанного последнего foundation.
Получилось с приложениями (хелперы и файлы) слишком длинно. Так что здесь только начало.

четверг, 21 апреля 2016 г.

Сравниваем темы drupal-bootstrap и zurb foundation и практикуем Vagrant ssh в git bash и гордо настрамиваем Twig Debugging

Обе темы я уже установил под windows, начал было сравнивать, но Друпал работал медленно, потому пришлось искать альтернативные варианты (делать все в virtualBox). Теперь есть виртуальная Убунта (в десктопном варианте) и там залит Друпал с хорошо документированной темой Prius.
Решил сегодня сравнить возможности тем, посмотреть на интерфейсы... и поупражняться с grant, drush... Этот пост - практикумы по материалам, собраным ранее в "Drupal 8 theming -...читаем документацию и примеры Starter Themes"

среда, 20 апреля 2016 г.

Добавить новый region в Drupal... как в видео "Blocks and Regions"

Раскопки папок в подпапках тем Друпала вкупе с чтением документации вещь полезная, но к вечеру происходит заморачивание головы. Я не мог понять, как создать новый регион, чтобы поместить в него мой новый блок. Догадался посмотреть видео "Drupal 8 Theming - Part 04 - Blocks and Regions" ...
Да, и еще запомним новую команду drush cache-rebuild ...
И пора оправдаться перед грядущим: я не так глуп, как может показаться... документация к 8-ой версии еще только создается, я обнаружил свежие страницы с "нововведениями" в разделе, который прчитал на прошлой неделе...

понедельник, 18 апреля 2016 г.

Ссылки на софт по анимации... из обзоров и дополнений к Chrome

Новые программы по анимации появляются как грибы после дождя, пока я откладываю игры с "Блендером", появилась Клара (Clara.io ), xNorma. А часть устаревшего софта начинает вдруг снова поддерживаться, а потом снова бросается... Так что, здесь всего 5-ть ссылок на ... на три обзора.

воскресенье, 17 апреля 2016 г.

Устанавливаем Ruby, Sass, Compass, Nodejs, npm на Ubuntu... Все пакеты находятся легко и сразу

Все элементарно и просто. Записал, чтобы в следующий раз (и не раз) не вспоминать названия пакетов. Будем считать это заготовкой для bash скрипта.
Чуть не забыл про Bower,

среда, 13 апреля 2016 г.

Установил Atom на Ubuntu, потом плагин для XDebug... но глаза разбежались из-за "Varying Vagrant Vagrants (VVV)"

Но ковыряние с Ubunyu в VirtualBox утомило настолько, что решил отложить экзерсисы с php дебаггером до тех лучших времен, когда он мне всерьез понадобится... Так что здесь ссылки на недочитаные мануалы, и не только, есть еще ссылка на репозиторий со сборкой стэка для php-разработчика Varying Vagrant Vagrants (VVV) (но вместо Gulp Grunt): If you're a php developer on ubuntu, there comes the time where you have to install/reinstall your system.

понедельник, 11 апреля 2016 г.

Танцы с бубном вокруг раздела документации Drupal "Complete Open Source Dev Stack"

Нашел на сайте друпала раздел "Complete Open Source Dev Stack". Сначала установил "The LAMP Stack", потом "Drupal stack"... Получился хороший практикум по осовению VirualBox, в процессе выскакивали такие вопросы, как
"добавить драйвер, чтобы изменить разрешение окна VB", увеличить выделенную мощность процессора, настроить виртуальный хост в Apache, где root в Ubuntu, bidirectional shared clipboard, как установить .deb в Ubuntu sudo dpkg -i /path/to/deb/file , установка аналога clip в Linux...
Словом, практикум получился полезный, но утомительный... Слишком многом мелочей сразу. Потому здесь просто фрагменты команд и ссылки на статьи с подробностями.

среда, 6 апреля 2016 г.

Drupal CEM (aka BEM) - как же работать со стилями?

Так как же работать со стилями? Я снова задаю себе этот вопрос после знакомства с "theming" в Друпал. Сначала посмотрим пару-тройку "Друпалконов" - часовых обзорных видео с конференций, почитаем статьи (по рекомендациям докладчиков), вроде "Sass techniques and tools"... В этой статье предлагается для работы Compass ...
Кроме того, здесь еще ссылки на сообщества Bootstrap, Foundation... И после этого, надеюсь, пойму, как работать лучше со стилями ( не только в Drupal).

вторник, 5 апреля 2016 г.

Drupal 8 theming - смотрим разные видео, читаем документацию и примеры Starter Themes

В подборке из 23 видео (10-25 минут каждое) в которых автор создает новую тему... мне понравился ролик, в котором автор настраивает Drupal - подключает девелоперский файл настроек development.services.yml, в котором собраны все нужные настройки: отмена кэширования, ... подключение twig дебаггера (вывод сообщений в ferebug браузера).
Это те настройки, которые надо обязательно производить... каждый раз. Здесь же и список других видео... (Drush, css, gulp, import wp theme...). Английский белорусский, так что все понятно...
Через неделю я прочитал документацию и две статьи с Lilabout и добавил все ссылки сюда.

понедельник, 4 апреля 2016 г.

Пробуем Vagrant Drupal Development (VDD), на видео все просто...

Здесь мое первое знакомство с Vagrant произошло при скудном опыте использования VirtualBox. Потому здесь я тупо повторил вслед за автором "Tutorial: Vagrant Drupal 8 Development" и скопипастил большую часть вывода консоли. Я еще не понимал, что и как работает, и надеялся освоить все с Друпалом.

пятница, 1 апреля 2016 г.

Ссылки для загрузки Ansible

И две обзорные статьи с Хабара, и раздел и справки Vagrant..., в которой есть еще с полдюжины альтернатив (Shell, CFEngine, Chef..., Puppet..., Salt, Docker...). Пока я не понимаю, чем лучше пользоваться и что изучать ( в качестве основы). Пока только ясно, что автоматизировать работу с удаленным сервером надо... Так что пока важно ничего не пропустить...? А начать с Drush... или Console?

четверг, 31 марта 2016 г.

Пробуем DrupalVD - плагин хорошо документирован, но после установки двух виртуальных боксов и попытки ускорить работу на Windows решил бросить все и поюзать альтернативу - VDD (см. в следующем посте)

Здесь короткое видео и полтора десятка ссылок. В видео не только установка связки Vagranr -VirtualBox, но и работа в ssh, с debugger... А в ссылках докуентация, статьи и некоторые VDD альтернативы "LAMP Stacks Made Easy with Vagrant & Puppet", PuPHPet ... Собственно, начал я три дня назад с альтернативы: -DrupalVM, но что-то встало криво... начал читать документацию и ...увлекся...

воскресенье, 27 марта 2016 г.

Видео, с которым я начал первые опыты с Vagrant на машине с Windows

Помнится, вместо Acquia Dev Desktop решил ликвидировать свои виртуальные комплексы... Итак, установил Vagrant, VirtualBox... и стало ясно, что влип основательно... что с ними двумя делать..., а там еще целый стек... Интересно, конечно, но для начала хотя бы определить, как эту "стопку" складывать.

четверг, 24 марта 2016 г.

Создаем статическую страницу BEM (выполняем первый пример "hello" из документации Яндекса)

Слишком много новых названий. Потому решил, что надо попрактиковаться. Здесь загрузил пакет с примером с Github, залил на флешку, создал файлы, запустил сервер... и обнаружил прорву новых файлов в папках проекта. Этого не ожидал. В примере страничка формы, на которой после клика по кнопке должен показываться текст из поля ввода (имя пользователя), не работает... Тупо повторить пример не удалось... и вообще руководство написано так, что надо думать... Это грубая методическая ошибка... отпугивает...

вторник, 22 марта 2016 г.

Что делает less.js в twitter bootsrap - компилирует все в css... может ли быть хуже?

Начинать надо с самых простых вариантов компиляции less --> css. Потому я вспомнил про less.js in the browser, опробовал этот вариант на экспорте bootstrap из Pingendo (он офрмирует сразу оба варианта: less и css). Оказалось, что результирующий код сss тупо записывается в заголовок html-файла.
Очевидно, что такой же компилятор в Atom должен работать куда быстрее. Установил несколько плагинов less, здесь описаны толко два (компилятора). В сочетании с плагином сервера (atom-live-server) все должно работать замечательно...

воскресенье, 20 марта 2016 г.

Gimp не открывает .eps файл - срочно хакнуть .dll

При попытке открыть .eps файл сначало выскочило окно настройки импорта, а потом и приговор: "Не удалось интерпретировать файл Postscript..." На ru-форуме Gimp предложили воспользоваться он-лайн конвертером. Но мне, пытливому чайнику, захотелось использовать слои (читал, что можно отделить фон от картинки), поэтому пришлось установить GhostScript и тупо скопировать dll файл оттуда. Вот только файлы с картинками, из-за которых все началось оказалиь однослойными...

суббота, 19 марта 2016 г.

Нахожу Scribus, XnView... но не решаюсь их установить. И вместо инструментов для художника опять нахожу редакторы

А как прорисовывать внешний вид страницы сайта? Неужели все ограничивается .psd и софтом от Adobe? Находим Scribus, XnView... Ищем альтернативы, потом снова перебираем варианты софта для фронт-энд работ. И находим сравнитеьную таблицу для html редакторов, IDE, ... много нового, ... пытаюсь понять, чем они друг от друга отличаются. Отчаявшись, устанавливаю NetBeans, и прихожу к выводу, что я на правильном пути. Будем юзать плагины к "Atom" и не забывать про Grunt, Gulp, Yeoman, kompass, Jekyll

четверг, 17 марта 2016 г.

Установил Jekyll, sass, Compass, потом GUI : Scout, Compass.app, Fire.app и Bourboun

Кроме процесса установки здесь еще штук 20 ссылок с аннотациями. После вчерашней установки Jekyll сегодня снова попробовал его в дистрибутиве Bootstrap. К вечеру удалось уложить набор для веб-дизайна (Bootstrap, Jekyll, Grunt... ) в голове... Я уже начал представлять, как же я буду работать... но предстоит еще понять, как подбирать стили с sass, scss, less, stulys. Миксины и прочие прибамбасы постпроцессоров - это все красиво, но чего-то не хватает... Надеюсь, что kompass - это как раз то, чего мне не хватает...

среда, 16 марта 2016 г.

Знакомство с файлами в дистрибутиве Bootstrap закончилось установкой Jekyll под Windows

В итоге я поднял локальный сервер на 9001 порту и опробовал пачку статических html-страниц, изучил прибамбасы Jecyll ... и подумал: "А зачем современному сайту-визитке все эти пхп и сикьюлы...?"

вторник, 8 марта 2016 г.

Как правильно задавать стили в css файлах? Знакомимся с методиками для CSS

Первые гуглопоиски вывели на страницы с BEM Yandex, Bootsytap, Compass, Foundation. Ссылки сохранил, а начал со статьи на Хабре. В статье дано краткое описание БЭМ •OOCSS •SMACSS •Atomic CSS •MCSS •AMCSS •FUN

суббота, 27 февраля 2016 г.

Пробуем плагины JQuery ...поскольку еще ничего не знаем про twitter bootstrap

Эти строки я пишу через три месяца (публикую старый пост, не пропадать же плагинам). Здесь плагины с сайтов jQuery. Когда я их скачивал, то заметил некое "запустение", но не смог его объяснить... Я тогда "привинтил" к сайту заказчика парочку плагинов..., а сегодня (апрель) использовал бы Bootstrap или Foundation

четверг, 25 февраля 2016 г.

Склад (почти рассортированная свалка) 50 первых ссылок для frontend-разработчика

Началось все с того, что я подумал, что должны же быть какие-то аналоги bootstrap, и инструменты для подбора цветов, и редакторы для верстки, и методики для компиляции стилей и управления файлами...
Здесь несколько групп ссылок по темам: bootsrap, less, on-line editors, desktop... Brackets...

понедельник, 15 февраля 2016 г.

Смотрим парочку видео и устанавливаем Yeoman

Сначала видео: Конференция JSLab, образовательного проекта для IT-специалистов GeeksLab, 28.03.2015 Грибанов Александр. "Yeoman - избавляемся от рутинных задач"
"В докладе пойдет речь о современных средствах автоматизации web разработки, начиная от создания структуры проекта и заканчивая разворачиваем приложения. Рассмотрим популярные генераторы приложений и вы узнаете как написать свой
Затронем тему Grunt и Gulp, разберемся в чем разница"
Затем лог установки Yeoman

пятница, 12 февраля 2016 г.

Как лучше поместить видео в фон страницы

Действительно, как лучше разместить блок с видео. Берем плагин Video-Backgrounds-tubular и обнаруживаем, что разработчики использовали блок с параметрами position: fixed; z-index: 50; Здесь только ссылки на демо страницу (на хостинге tmweb.ru), на демо плагина ... и фрагменты кода плагина.

Обрывки кода. Как сплющить контейнер для видео так, чтобы он стал адаптивным

Пример кода и ссылка на статью, в которой разжевано про прием с контейнером height: 0; padding-bottom: 56.25%; Здесь же ссылка - напоминания о формировании моего презрения к Joomla (вместе с хаками стилей)

среда, 10 февраля 2016 г.

Изучаем Node.js и ставим Gulp (под windows)

Здесь подборка курсов от Ильи Кантора (javascript -> Nodejs -> Gulp... у него еще есть Курс по Angular.JS, Курс по React.JS, Курс по TypeScript ), gulp.js из его репозитория... А также сравинтельные статьи с Хабра, моя глобальнай установка...

понедельник, 8 февраля 2016 г.

Ссылки по темам: Canvas, free HTML5 animation

Надо бы не прозевать надвигающийся, как каток, расцвет анимации в рекламе. Здесь с десяток ссылок на софт для анимации. Его надо отслеживать и осваивать...

вторник, 2 февраля 2016 г.

Псевдошрифты или псевдокартинки в Joomla привели к jQuery selectors

Здесь я делаю великое открытие об использовании селекторов jQuery для добавления псевдоэлементов на страницу html. Как же работают Joomla Standard Icomoon Fonts? Шрифты занимают изрядную часть файла template.css, и, чтобы код в файле работал, в него подгружаются псевдошрифты /media/jui/fonts/IcoMoon.eot...
А после подгрузки странный контент становится рабочим .icon-cancel-circle_1:before {content: "\e217"; } ... Однако, здесь (Jupyter)у меня не получилось импортировать эти шрифты..., почему, сразу не сообразил. Здесь незнакомый Font Awesome ... Потому решил попробовать радикальное средство jQuery("...").toggleClass("...")...

вторник, 5 января 2016 г.

CSS. Подбор вариантов фона с градиентом для кнопок главного меню Protostar Joomla

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