Можно ли использовать стопку из нискольких картинок для фона. Здесь я попробовал одну картинку, но с разным увеличением и положением. А пример в самом низу с анимацией, так что смотреть сначала на него (анимацию не зациклил). Вполне можно использовать для того, чтобы показать разные участки одной большой картинки.
Вынужден поддерживать windows, linux, android, делать сайты с html,css, javascript, php, java. А сайты потом надо администрировать... Drupal, WP, Joomla, Moodle... И редактировать видео, и осваивать анимацию... И front-end приблудился недавно... Compass-scss, GULP, Jekyll, bootstrap, foundation... Куда же денешься... Здесь ЧЕРНОВИКИ !!!
воскресенье, 4 декабря 2016 г.
четверг, 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"
воскресенье, 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 вообще не поддерживает 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
Здесь с десяток примеров кнопок. Я в итоге остановился на горизонтальном градиенте... Надеюсь, что этот черновик облегчит мне посторные процедуры подбороа фонов для кнопок или меню.