Gulp скринкаст: Скринкаст по Gulp

Мои инструменты и технологии – Николай Громов

Каждый день я пишу относительно много разметки, стилей и JS, использующихся в коммерческих проектах. За время работы (с 2000 г.) попробовал довольно много техник, технологий и ПО, о которых коротко расскажу в этой статье.

Мои студентам на Эпике, в HTML Академии, учащимся Loftschool и просто интересующимся.

Общий подход

Красивый код

Всегда пишите красивый код!

• Его быстрее (и приятнее) читать.
• В нём видно ошибки.

Сам всегда сразу пишу красивый код, но если у вас с этим проблемы, можно смотреть в сторону автоматических средств форматирования в используемом редакторе, в сторону проверки форматирования перед коммитом (см. [Git(#git)]) или в сторону консольных утилит.

БЭМ как система именования

Это самое простое, надёжное и не зависящее от технологического стека решение, позволяющее избежать уймы проблем (большая часть проблем являются «врождёнными» для используемых в браузере технологий). Вкратце познакомиться с БЭМ как отношением к интерфейсу и системой именования селекторов можно в моём небольшом материале Как работать с CSS-препроцессорами и БЭМ, а более полно, вместе с объемным стеком БЭМ-технологий — на официальном сайте.

Если совсем коротко, то БЭМ (не полный стек, а только как система именования) даёт пространство имён селектора, что приводит к изоляции компонентов в стилях (с поправкой на наследование свойств) и к безопасной модификации стилей отдельных блоков, элементов, модификаторов.

Конечно, при использовании специфических стеков технологий (React, Vue…) можно организовать такую «изоляцию» и другими способами (CSS in JS, детка!), но они тянут за собой множество специфических инструментов.

Обучение

«Учусь, следовательно, существую», перефразируя Декарта. Если перестать учиться, можно быстро «выпасть» из профессиональной сферы.

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

Не менее 1 часа в сутки стоит уделять обучению.

Англоязычные ресурсы, которые мне нравятся:

• css-tricks.com
• alistapart.com
• tympanus.net/codrops
• css-weekly.com/archives
• lea.verou.me
• sarasoueidan.com
• csswizardry.com

Сообщества во ВКонтакте, за которыми я слежу:

• Веб-стандарты
• For Web
• uWebDesign
• Webtackles
• Love Frontend
• Frontend Raccoon
• CSS-live

Эксперименты

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

По ходу самообучения постоянно экспериментирую в песочницах, что тоже «прокачивает». К примеру, по ходу чтения книги Лии Веру «Секреты CSS. Идеальные решения» я пробовал все приведённые решения сразу. И многие «решения» оказались идеальными лишь в том смысле, что почти неприменимы в реальной работе.

Редактор кода

После мозгов и рук, это главный ваш инструмент, нужно знать его досканально. Я использую для написания кода Sublime Text 3.

Установленные у меня плагины:

• Package Control (менеджер пакетов (для установки всего остального)),
• A File Icon (чистое украшательство),
• AutoFileName (облегчает указание пути к файлам в проекте),
• BracketHightlighter (подсветка открывающей/закрывающей скобки),
• Color Highlighter (показывает цвет в стилевых файлах),
• DocBlockr (делает более удобным многострочное комментирование, описание функций в JS),
• eCSStractor (извлекает список селекторов из разметки (можно в БЭМ-представлении, с амперсандами в местах разделения элементов и модификаторов)),
• EditorConfig (добавляет поддержку проектных файлов .editorconfig с универсальными настройками редактора),
• Emmet (быстрое написание разметки и стилей),
• GitGutter (подсвечивает изменения от предыдущего коммита),
• Jade, Pug, JSX, LESS, Sass, Stylus, MarkdownLight, Syntax Highlighting for PostCSS (подсветка синтаксисов соответствующих языков),
• PyV8 (нужен для работы Emmet, автоматически ставится вместе с ним),
• List stylesheet variables (даёт список стилевых переменных проекта с нечётким поиском),
• SideBarEnhancemets (расширяет функциональность контекстного меню сайдбара),
• StringEncode (преобразует строки, в т. ч. экранирует HTML-символы),
• Sync Settings (синхронизирует настройки, плагины, темы между несколькими компьютерами),
• View In Browser (добавляет в контекстное меню файлов проекта пункты для открытия в браузерах).

Прочие дополнения брать здесь.

Горячие кнопки радикально ускоряют работу. Смотри шпаргалку по горячим кнопкам ST3.

Настройки самого ST3 менее важны, но некоторые из них стоит сделать:

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

Мои настройки на момент написания этого материала (за исключением темы оформления и словаря проверки орфографии).

Я активно пользуюсь переключением между проектами (сохраняю проекты ST3 в директорию проекта) и нечётким поиском по файлам (Crtl + P на Windows, Cmd + P на OSX).

Я экспериментировал с Atom (использовал его 4 месяца, но вернулся к ST3 из-за скорости работы) и VS Code. Для обоих этих редакторов удавалось найти похожие дополнения и организовать весьма похожий рабочий процесс.

DevTools

Второй по важности инструмент, даёт понимание того, как сработал ваш код. Поскольку изначально мы верстаем под самый распространенный в ЦА браузер (почти для всех проектов это Chrome), речь именно про DevTools Google Chrome.

Для верстальщика наиболее важны вкладки Elements (узлы DOM и применённые к ним стили в подвкладке Styles) и Network (активность браузера при открытии страницы), однако это лишь малая часть возможностей.

Для изучения:

• Документация
• «Что нового» в формате видео от разработчиков
• Короткие видео с возможностями DevTools
• Пример простенького дебага JS в DevTools

Git

Работать над кодом (да и любым текстом) без системы контроля версий — немыслимо. С Git вы получаете:

• Удобную работу в команде (даже если два разработчика правили один и тот же файл).
• Удобство собственной работы на двух (и более) рабочих местах.
• Полную историю изменений в проекте с возможностью возврата к любой временной точке.
• Резервную копию на удалённом сервере (github, bitbucket, gitlab…).
• Автоматическую проверку форматирования и некоторых типовых ошибок по хукам (перед коммитом, перед пушем…).
• Возможность логического ветвления (разработка или проба какой-либо возможности проекта в отдельной ветви разработки).
• В комбинации с github — интерфейс принятия изменений из ветки или форка (Pull Request) с возможностью построчного обсуждения предлагаемого кода.

Для освоения git рекомендую отличный скринкаст Ильи Кантора (на данный момент там отсутствует раздел про удалённые репозитории, но это единственный минус) и переведённый на русский язык скринкаст про Git от lynda.com.

См. так же мою шпаргалку по командам Git.

Терминал

Я использую командную строку по нескольким причинам:

1. Существует множество консольных инструментов, которые удобнее (и развиваются быстрее) инструментов с графическим интерфейсом и при этом бесплатны. В отрыве от вёрстки/фронтенда, к примеру, инструмент для скачивания видео с youtube, в одну команду сохраняющий видео (с он-лайн сервисами это менее удобно).
2. Можно писать собственные инструменты на Javascript. Например, генератор файловой структуры новых блоков в проекте.
3. В моей работе много задач (часто — рутинных, типа сборки спрайтов), которые могут быть автоматизированы консольными утилитами. Вся автоматизация проекта у меня работает на Gulp, а у него лишь консольный интерфейс.
4. Некоторые файловые операции быстрее делать из терминала.
5. Git имеет консольный интерфейс (все GUI для Git — лишь надстройки над командами в терминале).
6. Можно воображать себя хакером.

Для студентов с Windows на базовом и продвинутом курсах по вёрстке в EpicSkills я рекомендую использовать GitBash, чтобы у владельцев Windows, OSX и Linux были похожие команды в терминале, но сам недавно внедрил в свою практику терминал подсистемы Linux.

Использую алиасы (сокращения для длинных команд) для Git-команд и для быстрого перехода в папки конкретных проектов. Пример файла с алиасами.

Препроцессоры

Из стилевых препроцессоров я пробовал LESS, Sass и stylus (плюс, условно, PostCSS). На данный момент остановился на Sass (увы, stylus не разрабатывается более), хотя остались в поддержке и проекты на LESS. Возможности нативного CSS пока не устраивают и на призывы отказаться от препроцессоров я смотрю как на «ребячество в отрыве от реальной жизни».

В плане написания разметки мне по-прежнему очень нравится писать обычный html, однако для относительно простых проектов я всё чаще использую pug.

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

Автоматизация

Если вы занимаетесь веб-разработкой как хобби (как некоторая часть русскоязычных веб-евангелистов) и самые сложные ваши задачи — сайты котов и прочие «проекты», где вы сами себе заказчик, то можно обойтись и без автоматизации, ибо вам не нужны:

• процессинг и постпроцессинг стилей и разметки,
• автоматическая оптимизация изображений,
• автоматическая сборка и пересборка (растровых и/или векторных) спрайтов,
• локальный сервер в пересборкой стилей/разметки/чего_угодно, обновлением страницы в браузере и возможностью смотреть страницу с любого компьютера или мобильного устройства в той же локальной сети.

Я автоматизирую рабочий процесс с помощью Gulp (про который есть отличный скринкаст), т.к. на собственных проектах (я фрилансер) не нуждаюсь в возможностях Webpack (сейчас работаю по одному стороннему проекту с React, там, конечно, Webpack).

Есть мой стартовый репозиторий с автоматизацией и более простой репозиторий для студентов.

Стартовая библиотека

Постоянно приходится верстать похожие элементы страницы. Разумно сделать библиотеку компонентов с универсальной разметкой и самой базовой стилизацией для коросспроектного использования. У меня такая библиотека внедрена в стартовый проект.

Разное

Раскладка Бирмана

Это типографская раскладка, позволяющая вводить стрелки, кавычки-ёлочки, разные типы тире и прочие типографические символы без запоминания их кодов и/или на клавиатурах без цифрового блока.

Переключение раскладки

Нередко ошибаюсь с раскладкой при наборе, так как (стыдно), по-прежнему, часто смотрю на клавиатуру. Немного помогает Punto Switcher, но с раскладкой Бирмана он несколько глючит: показывает два пункта «Русский язык» и два «Английский язык», а ТП перестала отвечать на обращения.

Обмен скриншотами

Отправлять студенту или клиенту скриншот с какими-либо пояснениями прямо на картинке — это удобно. Использую для этого Monosnap.

Измерения на экране

Для измерений, получения цвета с экрана и в качестве экранной лупы (всё — по горячим кнопкам) использую PicPick.

Хранение паролей

Удобно хранить пароли в базе данных, можно делать пароли примерно такого вида: Gji%86gjl00ljg67c;s0-, а помнить придется лишь пароль к самой базе данных (если его забыть, то — всё тлен). Использую кросспатформенную KeePass и имею несколько резервных копий файла с паролями (все компьютеры, телефон, планшет).

Заключение

Поделитесь своими способами оптимизации рабочего процесса.

Подборка ресурсов по препроцессору Less

Введение

В этой подборке я собрал и структурировал все известные мне ресурсы по Less, которые могут помочь новичкам разобраться с этим препроцессором. Тем же, кто перерос ступень новичка, будут интересны некоторые статьи, библиотеки, а также плагины для Grunt, Gulp и Brunch. А тем, кто считает себя вершиной айсберга, я всё таки рекомендую обратить внимание на некоторые статьи, а также библиотеки.

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

Документация

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

• Официальный сайт — Сайт, содержащий полную информацию о препроцессоре, включая документацию, которую никто не хочет читать.
• Организация Less на GitHub — Перечень репозиториев, среди которых находится документация, сам препроцессор и плагины.

Статьи

В этой части статьи собраны ссылки на статьи, в которых что-то говорится о препроцессоре Less. Что же там такое говорится, можно узнать, покликав на ссылки и прочитав эти статьи. Этот раздел посвящается тем, кто не умеет пользоваться поисковиком или не желает этого делать.

• LESS CSS — Цикл статей от Appos’sum, в котором полностью описываются возможности Less. Освещаются темы переменных, примесей, комментариев, строковых шаблонов, JavaScript, компилятора для Java и PHP, а также прочих интересностей.
• LESS — ОБЗОР И УСТАНОВКА — Небольшой обзор возможностей Less на понятных примерах. В краткой форме автор проходится по основным возможностям. Удобно для тех, кто хочет посмотреть на базовый функционал препроцессора.
• LESS: программируемый язык стилей — Статья из далёкого 2012 года, в которой описываются некоторые базовые возможности языка. Это перевод статьи на webdesign.tuts+, написанной в конце 2011 года.
• Почему стоит использовать LESS при верстке сайта? — Галич Сергей рассказывает о том, почему «LESS это ЗБС». Сергей в юморной форме рассказывает о личном опыте и советует начать использовать CSS-препроцессоры.
• A Comprehensive Introduction to LESS: Mixins — Введение в примеси препроцессора. В этой объёмной статье подробно рассматриваются реализации различных видов примесей на Less.
• Расширение возможностей CSS с помощью LESS — Упрощение разработки стилей адаптивного дизайна для современных Web-страниц.
• Препроцессор LESS — динамический CSS — Небольшая статья и скринкаст о препроцессоре Less от LoftBlog. Говорят о том, что препроцессоры сохраняют время и даже нервы.
• DON’T READ this Less CSS tutorial (highly addictive) — Автор повествует о том, как хорош CSS-препроцессор в повседневной разработке. А ещё предупреждает, что эта статья заряжает на использование препроцессоров.
• 3 новых LESS/CSS-свойства, о которых вам следует знать — Немного подробнее о группе селекторов, импорте файлов и склейке свойств. Стоит почитать, если вы планируете писать что-то сложнее Hello World.
• Несколько советов less-разработчику — Неплохие советы для начинающих. Но всё же это больше похоже на констатацию фактов, которые должны быть известны всем.
• Малоиспользуемые, но от этого не менее прекрасные возможности LESS — В этой статье ведётся речь о малоиспользуемых возможностях Less, которые я использую очень часто. Советую к прочтению.
• Работа и манипуляции с цветом в LESS — Галич Сергей хочет поделиться с нами знаниями модели HLS и о том, как он работал с цветами и градиентами макета вместе с Less.
• LESS IMPORT OPTIONS — Опции доступные для импорта Less-файлов. Из статьи вы узнаете, что у директивы @import есть аж шесть опций.
• Working With LESS and the Chrome DevTools — Работа с Less прямиком в Chrome DevTools. Такой опыт необходим для отладки кода на Less прямиком в браузере.
• Исполнение JavaScript кода с помощью LESS CSS препроцессора — Описание того, как использовать JavaScript в Less файлах для большего контроля над Less-кодом. Кстати, реальные примеры можно посмотреть в библиотеке Less Hat.
• Медиа-запросы вместе с Less — Рассказ о некоторых вариантах организации удобного использования медиа-запросов.
• Невероятный препроцессор Less — Статья, рассказывающая о том, какие возможности скрываются в Less.

Сборники

Подборки, в которых есть что-то интересное для Less разработчиков.

• The LESS Mixins That You Need If You Use This Preprocessor — Подборка библиотек примесей.
• Frameworks Based On Less CSS Preprocessor — Подборка фреймворков, основанных на Less.
• Tools And Apps For LESS CSS Preprocessor — Подборка инструментов для работы с Less.
• Less CSS Preprocessor Toolbox — Подборка инструментов для работы с Less.
• Best Less Tutorials : A Comprehensive Guide To LESS

Сравнение препроцессоров

Некоторые люди пишут статьи, в которых пытаются сравнивать Less с другими препроцессорами.

• CSS PRE — CSS PREprocessors — Самый интересный ресурс для тех, кто не может выбрать какой CSS-препроцессор он будет использовать.
• Sass vs. LESS — Статья 2012 года, в которой сравниваются базовые возможности препроцессоров.
• WHY I SWITCHED FROM LESS TO SASS — Hugo рассказывает нам о том, почему он перешёл с Less на Sass.
• An Introduction to CSS Pre-Processors: SASS, LESS and Stylus — Сравнение базовых возможностей Less, Sass и Stylus.
• Разбираемся в отличиях препроцессоров CSS
• LESS vs Sass? It’s time to switch to Sass

Книги

Очень интересные книги, исходя из оглавления. Особенно приглянулись «Learning Less.js» и «Less Web Development Cookbook». Нужно прикупить — стоимость их довольно демократична. Хотя, если не хочется тратить деньги, то можно поискать их в поисковике, две из четырёх там точно есть. Но учтите, что этого я вам не говорил 🙂

• Instant LESS CSS Preprocessor How-to
• Less Web Development Essentials
• Learning Less.js
• Less Web Development Cookbook

Курсы

Различные курсы, которые помогут новичкам ознакомиться с некоторыми возможностями препроцессора.

• Курс «Знакомство с LESS» — Курс для новичков от HTML Academy.
• Less is More — Курс от tuts+.
• Launch into LESS — Небольшой курс от Learnable.

Программы

Самым простым способом транслировать Less в CSS является использование специализированных программ. Здесь вы не увидите программ, подобных SimpleLess, которые в прямом смысле остались в прошлом, так как давно не обновлялись и не перешли на Less 2.0, а также программы, заточенные только под одну ОС.

• Prepros — Мощнейший инструмент, поддерживающий все современные препроцессоры, некоторые инструменты для работы и оптимизации.
• Koala — Альтернатива Prepros с той лишь разницей, что поддерживается меньшее количество препроцессоров и инструментов. Взамен предлагается система плагинов. К сожалению, автор очень вяло развивает свой проект.
• Mixture — Мощный инструмент, который включает в себя все популярные препроцессоры, инструменты для оптимизации, шаблоны проектов и генератор статистических сайтов. С недавних пор имеет бесплатную версию, но не имеет поддержки Linux.
• LiveReload — Автоматическое обновление браузера при изменении ресурсов проекта с возможностью включения компиляторов популярных препроцессоров.
• CodeKit — Комплексное решение для OS X. Сделал исключение в виду того, что это действительно качественная альтернатива Prepros. Если быть честным, то не CodeKit альтернатива Prepros, а Prepros альтернатива Codekit. Единственный минус — дорого с нынешним курсом.
• CrunchApp — Редактор, специализированный на написании Less-кода. К сожалению, написан с применением технологии Adobe Air, из-за которой вытекает уйма минусов и отсутствие поддержки Linux.

Плагины для систем сборок

Как следует из названия, в этой части статьи собраны основные плагины для трансляции Less под различные системы сборок.

• grunt-contrib-less
• gulp-less
• less-brunch

Не вижу смысла использовать CSS-препроцессор без автоматической расстановки префиксов.

• grunt-autoprefixer
• gulp-autoprefixer
• autoprefixer-brunch

А ещё я бы посоветовал использовать какой-нибудь анализатор CSS для предотвращения фейспалмов. К сожалению, плагины для Grunt и Gulp разные, а Brunch в пролёте. Плагины lesslint и recess однородны по функционалу, а grunt-contrib-csslint и gulp-csslint вообще близнецы. Роли это никакой важной не играет — жить можно и без анализатора кода.

• grunt-lesslint
• grunt-contrib-csslint
• gulp-recess
• gulp-csslint

Библиотеки

Библиотеки примесей, которые можно использовать в своих проектах.

• Less Hat — Библиотека, необходимая для тех, кто не хочет пользоваться Autoprefixer.
• More or Less — Библиотека, включающая в себя примеси для построения привычных условных конструкций и циклов. Помимо этого есть примеси для другого специфичного функционала.
• Less MQ — Примеси для удобного использования медиа-запросов.
• Hamburger Icon — Генератор иконки гамбургера, которая используется для адаптивного меню.
• Quantity queries mixins for LESS — Библиотека примесей, основанная на идее, озвученной в статье Quantity Queries for CSS.
• Bellmaker — Библиотека медиа-запросов под конкретные устройства.

Фреймворки

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

• Bootstrap
• Kube
• ConciseCSS — Есть версия на Less.
• uikit
• Semantic UI
• Cardinal
• Metro Ui

Итоги

Я нахожу это полезным материалом. А вам интересны такие подборки?

Ребят а webpack для чего? это тот же Gulp? / Node.js — русскоговорящее сообщество

React — русскоговорящее с…

Binance Russian

Android Developers

Python

Vue. js — русскоговорящее …

supapro.cxx

GNU/Linux Help

DotNetRuChat

Telegram Developers

Node.js — русскоговорящее…

DevOps — русскоговорящее …

JavaScript Noobs — сообще…

Django [ru]

Go-go!

Angular — русскоговорящее. ..

phpGeeks

Kubernetes — русскоговоря…

Laravel Pro

pgsql – PostgreSQL

iOS Developers — русского…

Смотреть еще

russian programming node.js

3 ответов

Похожие вопросы

@Hide14 врубаешся хоуми ?

russian programming node. js

Почему команда «git» может не работать, знает кто? Вроде бы всё должно правильно быть.

russian programming node.js

здравствуйте, делаю функцию logout, где удаляется куки как и браузера, так и с бд, но вот запрос в postman бесконечный, что не так?

russian programming node.js

гитхаб то еще не импортозаместили, никто не в курсе? =)

russian programming node.

js

а телеграф чем плох для тебя?)

russian programming node.js

а минусы?

russian programming node.js

вопрос по telegraf’у, у меня коллбек отрабатывает синхронно, сперва обслуживает пользователя номер 1, потом только переходит к пользователю два, почему?

russian programming node. js

на этом же токене в другом проэкте ты имеешь ввиду?

russian programming node.js

всмысле этот же токен на другом боте?

russian programming node.js

как?

russian programming node.js

Смотреть еще

знание/книги по программированию — книги по программированию — Обширный метод разработки

Вы не можете выбрать более 25 тем Темы должны начинаться с буквы или цифры, могут включать тире (‘-‘) и могут содержать до 35 символов.

			### Индекс
			* [Андроид](#андроид)
			* [Угловой JS](#angularjs)
			* [С#](#csharp)
			* [CSS](#CSS)
			* [Эликсир](#эликсир)
			* [Emacs](#emacs)
			* [Ember.js](#emberjs)
			* [Эрланг](#erlang)
			* [Javascript](#javascript)
			* [Не зависит от языка] (# не зависит от языка)
			* [Node. js](#Nodejs)
			* [PHP](#php)
			* [Питон] (#питон)
			* [Рубин](#рубин)
			* [Вим](#вим)
			### Андроид
			* [Скринкаст] - [Архивы основ Android - mybringback] (http://www.mybringback.com/series/android-basics)
			### AngularJS
			* [Подкаст] — [Приключения в Angular — DevChat. tv] (http://devchat.tv/adventures-in-angular/)
			### С#
			* [Скринкаст] - [Как программировать на C# - Курс для начинающих | скобки](https://www.youtube.com/playlist?list=PLPV2KyIb3jR6ZkG8gZwJYSjnXxmfPAl51)
			### CSS
			* [Скринкаст] - [Скринкасты CSS-Tricks](http://css-tricks.com/video-screencasts/)
			### Эликсир
			* [Скринкаст] - [ЭликсирКонф 2014](https://www. youtube.com/playlist?list=PLE7tQUdRKcyakbmyFcmznq2iNtL80mCsT)
			* [Скринкаст] - [ЭликсирКонф 2015](https://www.youtube.com/playlist?list=PLWbHc_FXPo2jBXpr1IjyUgJ7hNS1eTf7H)
			* [Скринкаст] - [Глотки эликсира](http://elixirsips.com/) - Немного бесплатно
			* [Скринкаст] = [Введение в Эликсир](https://www.youtube.com/watch?v=lly-1UYmnFI&list=PLn76XROGFNtE9InImlu6e8isbOsM7qKtt)
			### Emacs
			* [Скринкаст] - [Emacs Rocks!] (http://emacsrocks. com/)
			### Ember.js
			* [Подкаст] - [Ember Weekend] (https://emberweekend.com/episodes)
			### Эрланг
			* [Скринкаст] - [Erlang Factory SF Bay 2015](https://www.youtube.com/playlist?list=PLWbHc_FXPo2h0sJW6X2RZDtT1ndw6KKpQ)
			* [Скринкаст] - [Думая как Эрлангер](https://www. youtube.com/watch?v=6sBL1kHoMoo)
			* [Скринкаст] — [Функции + Сообщения + Параллелизм = Erlang] (http://www.infoq.com/presentations/joe-armstrong-erlang-qcon08)
			### Глоток
			* [Скринкаст] - [Learning Gulp] (http://leveluptuts.com/tutorials/learning-gulp)
			### Javascript
			* [Скринкаст] - [Бесплатные качественные видеоуроки и скринкасты по Javascript](http://screencasts. org/topics/javascript)
			* [Скринкаст] — [Node Tuts — Видеоуроки по Node.JS] (http://nodetuts.com)
			* [Скринкаст] — [ShowMeDo — Скринкасты Javascript] (http://showmedo.com/videotutorials/javascript)
			* [Подкаст] - [JavaScript Jabber](http://javascriptjabber.com/)
			* [Подкаст] - [Шоу Javascript] (http://javascriptshow.com/)
			### Независимый от языка
			* [Подкаст] - [Full Stack Radio] (http://fullstackradio. com/)
			* [Подкаст] - [Программное обеспечение IEEE «О вычислениях» с Грэди Бучем] (http://www.computer.org/web/computingnow/oncomputing)
			* [Подкаст] - [Programming Throwdown] (http://www.programmingthrowdown.com/)
			* [Подкаст] - [Радио разработки программного обеспечения] (http://www.se-radio.net/)
			* [Подкаст] - [Подкаст Silver Bullet Security с Гэри МакГроу] (http://www.computer.org/web/computingnow/silverbullet)
			* [Подкаст] - [Подкаст журнала изменений] (https://changelog.com/podcast/)
			* [Подкаст] - [Ток-шоу в магазине] (http://shoptalkshow. com/)
			### Node.js
			* [Подкаст] — [Серия скринкастов Node.js — Tutsowl] (http://www.tutsowl.com/)
			### PHP
			* [Подкаст] - [Ратуша PHP] (http://phptownhall.com/)
			* [Подкаст] - [Голоса ElePHPant] (http://voicesoftheelephpant. com/)
			* [Подкаст] - [Круглый стол PHP] (https://www.phproundtable.com/)
			* [Подкаст] - [Звук Symfony] (http://www.soundofsymfony.com/)
			* [Подкаст] - [MageTalk - Подкаст Magento] (http://magetalk.com/)
			### Питон
			* [Скринкаст] — [Погружение в Джанго] (http://code.tutsplus.com/articles/diving-into-django--net-2969)
			* [Подкаст] - [Подкаст. __init__](http://podcastinit.com/)
			* [Скринкаст] — [ShowMeDo — Видео, учебные пособия и скринкасты Python] (http://showmedo.com/videotutorials/python)
			* [Подкаст] — [Поговори со мной о Python — подкаст о Python и связанных с ним технологиях] (http://www.talkpythontome.com/)
			* [Скринкаст] — [Плейлист TheNewBoston — Pygame (разработка игр на Python)] (http://www.youtube.com/playlist?list=PL6gx4Cwl9DGAjkwJocj7vlc_mFU-4wXJq)
			* [Скринкаст] - [TheNewBoston - Учебники по программированию на Python 3.4] (https://www.youtube.com/playlist?list=PL6gx4Cwl9DGAcbMi1sH6oAMk4JHw91mC_)
			* [Скринкаст] — [TheNewBoston — графический интерфейс Python с плейлистом Tkinter] (http://www. youtube.com/playlist?list=PL6gx4Cwl9DGBwibXFtPtflztSNPGuIB_d)
			* [Скринкаст] — [TheNewBoston — Учебники по программированию на Python — 2.x] (http://www.youtube.com/playlist?list=PLEA1FEF17E1E5C0DA)
			* [Скринкаст] - [Попробуйте учебник Django] (http://youtu.be/3DccH9AMwFQ?list=PLEsfXFp6DpzRgedo9IzmcpXYoSeDg29Tx)
			### Рубин
			* [Скринкаст] - [Бесплатные скринкасты Ruby on Rails](http://railscasts.com/?type=free)
			* [Скринкаст] - [Руби Тапас | Бесплатные скринкасты](http://www. rubytapas.com/episodes?filter=free)
			* [Скринкаст] - [Видео, учебные пособия и скринкасты Ruby] (http://showmedo.com/videotutorials/ruby)
			* [Подкаст] — [5by5 — Подкаст Ruby on Rails] (http://5by5.tv/rubyonrails)
			* [Подкаст] - [ENVY LABS - Ruby5] (http://ruby5.envylabs.com/)
			* [Подкаст] - [Рубиновые разбойники] (http://rubyrogues.com/)
			* [Подкаст] - [Навес для велосипедов] (http://bikeshed.fm/)
			* [Подкаст] - [Шоу Руби] (http://rubyshow.com/)
			### Вим
			* [Скринкаст] - [Бесплатные скринкасты о текстовом редакторе Vim](http://vimcasts. org/)

Использование Gulp с Craft

Все эти скучные задачи

Позвольте мне начать с того, что я действительно люблю программировать!

Каждый раз, когда я начинаю преобразовывать проекты в живой код, я волнуюсь и полон энергии. Все кажется новым и другим. Но в какой-то момент вы доходите до места, где вам нужно выполнять задачи, которые вы повторяете снова и снова для каждого проекта, и мой энтузиазм отстает. Установка файлов проекта, оптимизация изображений, минификация файлов CSS и javascript — необходимые, но утомительные вещи. Убедитесь, что вы не дублируете строки кода и удалили неиспользуемые файлы, убедитесь, что каждое правило CSS имеет префикс…

Я просто ненавижу эти задачи!

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

Пару лет назад у меня был длинный список сервисов, которые я использовал для этих задач. Я часами копировал и вставлял код в онлайн-генераторы каждый раз, когда менял пару строк кода или добавлял ресурсы. А потом приходилось обновлять браузер после каждого изменения… да ладно! Не могу передать, сколько раз я думал: «Если бы мы только могли нанять кого-нибудь, чтобы сделать это для нас». Что ж, сегодня мы можем — таскраннеры FTW!

Что такое средства выполнения задач?

Короче говоря, средства выполнения задач — это инструменты Javascript, которые помогают нам автоматизировать все эти повторяющиеся, но важные задачи. Наряду с вашим текстовым редактором или IDE, это одни из наиболее широко используемых и важных инструментов для веб-разработки. Каждый раз, когда мы сохраняем нашу работу, средство запуска задач анализирует, компилирует, оптимизирует и, наконец, обновляет ваш браузер — и все это за доли секунды. Как это здорово?!

Сегодня у нас много таскраннеров и большинство разработчиков используют один из них. К ним относятся Grunt , Cake , Broccoli и наш любимый инструмент: Gulp .

Как работает Gulp

1. Начнем с определения задачи, которую хотим выполнить.
2. В рамках этой задачи требуемый набор файлов загружается в поток Gulp для обработки.
3. Когда файлы находятся в потоке, в них можно внести одну или несколько модификаций. Поскольку потоки обрабатываются в памяти, файловая система не выполняет запись во временные каталоги между модификациями.
4. Отправьте новые (возможно, измененные) файлы в указанное место назначения

У Райана Ирелана есть отличный скринкаст, который поможет вам начать все сначала в Mijingo

Как мы используем Gulp с Craft

Это не полное руководство по использованию Gulp с Craft , потому что конфигурация одной компании не всегда подходит для другой. Существует множество статей и скринкастов о настройке Gulp для Craft, и самое прекрасное в средствах запуска задач то, что вы можете заставить их работать так, как вам нравится.

В этой статье я расскажу, как мы используем Gulp, и посоветую вам включить эти инструменты в свой собственный рабочий процесс.

Наша команда использует Craft для управления контентом, который обрабатывает все наши шаблоны, поэтому нам не требуется механизм шаблонов. Но если вы работаете над интерфейсным прототипом, вы можете скомпилировать статический HTML, используя механизмы шаблонов, такие как Twig, Liquid, Haml или Jade.

Что дальше? Нам нужно придать нашему сайту стиль!

CSS

Итак, давайте начнем с процесса, который включает в себя большинство шагов — конвейера CSS.

Большинство современных разработчиков используют препроцессоры CSS. Это дает нам возможность сделать наш CSS удобным для сопровождения, разбив его на небольшие файлы «компонентов». В нашем процессе разработки мы используем Sass с синтаксисом SCSS, но вы также можете использовать Less или Stylus.

В основном это используется для компиляции файлов SCSS в наш основной файл CSS, но мы можем найти некоторые дополнительные применения в зависимости от того, как мы компилируем файлы для среды разработки или производства.

Во время разработки нам нужно быстро отлаживать наши ошибки. Это может быть сложно при использовании препроцессоров, потому что мы видим наш скомпилированный код, а не исходные файлы. Для отладки в местах, где написано правило CSS, мы используем исходные карты. Карты источников предоставляют информацию о том, в каком файле SCSS содержится правило и в какой строке оно записано.

Как насчет префиксов поставщиков?

Autoprefixer решает любые проблемы с префиксами, анализируя наши файлы CSS и добавляя префиксы поставщиков в правила CSS, используя базу данных Can I Use.

После того, как мы закончили разработку, нам нужно оптимизировать наш код для производства. Для этого мы используем плагин Gulp на основе CSSO — CSS Optimizer.

Javascript

Чтобы убедиться, что мы используем тот же стиль кода в наших файлах javascript и что наш javascript в равной степени свободен от ошибок, мы используем JSCS и JSHINT. Вы можете уже использовать их в своем текстовом редакторе, так как большинство IDE и текстовых редакторов теперь настроены на их поддержку.

JSCS — это линтер/форматтер в стиле кода, поэтому он проверяет, есть ли у нас правильные отступы, интервалы внутри скобок и сколько пустых строк мы используем в конкретных случаях. Вы можете настроить правила кодирования в соответствии со своими потребностями — подробнее об этом читайте здесь.

JSHINT — это используемый инструмент, очень похожий на JSCS, но он обеспечивает немного большее обнаружение функциональности вашего кода. Некоторые функции JSCS и JSHINT пересекаются, но для достижения наилучшего результата мы рекомендуем использовать их обе.

Мы планируем заменить JSCS и JSHint на ESLint в нашей сборке

В будущем мы планируем заменить эту комбинацию JSCS/JSHINT на ESLint. ESLint охватывает все, что нам нужно, в одном инструменте, но мы просто еще не нашли время, чтобы настроить наш рабочий процесс. Также стоит упомянуть, что одним из недостатков ESLint является то, что его документы по настройке немного запутаны.

Оптимизация изображений

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

Используя подключаемый модуль Gulp для форматирования изображений, такой как gulp-imagemin, мы можем оптимизировать все изображения, которые мы используем для нашего проекта, с помощью одной простой команды.

Если вы являетесь пользователем Grunt, вы заметите, что я сказал «одна команда», и можете спросить, почему бы нам не создать задачу, которая «следит» за файлами изображений. Что ж… В Gulp есть встроенная функция «отслеживания», которая отслеживает изменения в текущем файле, но не проверяет наличие новых файлов. Поэтому мы не можем автоматизировать задачу, чтобы она работала при добавлении нового файла. Однако, если вы поставили задачу для просмотра изменений внутри файлов CSS и JS, вы можете добавить задачу оптимизации изображения в качестве зависимости задачи Gulp и просто повторно запустить команду «наблюдать».

Спрайты SVG

Сегодня каждый веб-сайт использует какую-либо систему для отображения значков. Большинство команд разработчиков уже используют систему спрайтов SVG, и мы не исключение.

Итак, позвольте мне дать вам краткое объяснение того, как работают спрайты SVG. Мы начинаем с создания одного большого изображения SVG, содержащего несколько маленьких изображений SVG. Мы включаем этот большой файл изображения SVG как часть нашего файла HTML, а затем вызываем одну из иконок, используя атрибут SVG xlink:href.

Для создания этого спрайта мы используем подключаемый модуль спрайтов Gulp SVG, который оптимизирует и объединяет изображения SVG по желанию, но нам все еще нужно добавить эту разметку в наш HTML.

Для этого используем gulp-inject. Инъекция Gulp используется для добавления строки в нашу разметку, поэтому в основном она преобразует наш конкатенированный спрайт SVG в строку, которая позже добавляется туда, где мы хотим, чтобы она была размещена в нашем HTML.

В предыдущей версии настройки нашего проекта мы внедрили SVG в партиал с именем icons.html, который позже включили в верхнюю часть элемента body в разметке. Но в последней версии мы храним значки в локальном хранилище браузера. Вы можете узнать больше о преимуществах использования локального хранилища в этой замечательной статье Освальдаса Валутиса.

Browsersync

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

Этот плагин перезагружает браузер, когда мы вносим изменения в наш HTML или JS, и внедряет CSS каждый раз, когда вы вносите изменения в файлы SCSS. Он работает синхронно со всеми активированными браузерами и отслеживает взаимодействие на веб-сайте. Например, если вы заполняете форму в браузере настольного компьютера, вы можете одновременно проверить то же поведение на планшете или мобильных устройствах.

EditorConfig

EditorConfig на самом деле не используется с Gulp, но по-прежнему является очень важной частью нашей настройки разработки. EditorConfig — это файл, который помогает нам определять и поддерживать согласованные стили кодирования между различными редакторами и IDE. Короче говоря, это гарантирует, что все в нашей команде используют одни и те же отступы или набор символов.

Большинство текстовых редакторов и IDE имеют встроенную встроенную поддержку EditorConfig, но некоторые из них (например, мой любимый Sublime Text) требуют добавления плагина.

Почему мы предпочитаем Gulp

Почему мы предпочитаем Gulp Grunt или какой-нибудь более новой программе, такой как Webpack?

В конце концов, выбор за вами. У каждого инструмента есть свои плюсы и минусы, но для нас Gulp оказался самым лучшим.

Мы начали с GruntJS в качестве нашего первого средства запуска задач, и его было очень удобно использовать. Но с GruntJS у вас очень сложная конфигурация. Каждый шаг, который вы делаете во время одной задачи Gulp, вы должны записать как задачу. Если вы помните, в моем объяснении того, как работает Gulp, я упомянул, что все сохраняется в «потоке», пока мы не выведем это в файл. К сожалению, Grunt требует файл для каждого шага.

Горячая замена модуля Webpack — настоящая революция

А как насчет Webpack?

Webpack очень мощный и эффективный. Он включает в себя расширенные функции, такие как замена горячего модуля, что является настоящей революцией. Он также имеет возможность импортировать файлы CSS из вашего JS и другие функции, которых нет в Gulp и Grunt. Однако кривая обучения намного круче, и я не уверен, что эти функциональные возможности приносят разработчикам веб-сайтов достаточную пользу, чтобы компенсировать объем необходимого обучения.

Тем не менее, если вы в основном занимаетесь разработкой веб-приложений, я настоятельно рекомендую использовать Webpack.

Что еще мы можем сделать с помощью Gulp?

В нашем процессе разработки есть еще несколько шагов, которые мы не встроили в нашу конфигурацию Gulp, но мы находим их очень интересными.

Мы создали bash-скрипт для загрузки последней версии Craft CMS и замены файлов конфигурации Craft на наши. Это то, что мы планируем перенести в Gulp, чтобы не использовать слишком много инструментов в нашем процессе.

Мы также хотели бы перенести наш процесс развертывания/синхронизации в Gulp из DeployHQ.

Таким образом, нам не нужно будет устанавливать исключаемые файлы для каждого проекта в DeployHQ, и мы сократим время на синхронизацию баз данных.

Другие, не столь очевидные преимущества использования Gulp

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

Во-первых, вам не нужно следить за всеми мелкими вещами. Это помогает вашему мозгу обрабатывать более важные вопросы, такие как «Используем ли мы передовой опыт при запросе данных в Craft?» или «Нужно ли нам создавать разные компоненты, чтобы сделать наш код модульным?»

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

Если Gulp так хорош, почему его не используют все?

Многие разработчики боятся Gulp и других препроцессоров, так как они могут показаться очень сложными, особенно если вы не знакомы с javascript. Но вам не нужно по-настоящему понимать javascript, чтобы работать с Gulp, и на самом деле это не так сложно, как кажется. Вот отличная статья, чтобы начать работу с Gulp. Поверьте мне, вы очень скоро почувствуете себя волшебником Gulp. Вот как это легко!

После этого вы будете удивляться, как вы могли жить без него.

Почему я ненавижу NodeJS, Gulp и Sass и что я с этим делаю

Становится все труднее рекламировать себя как настоящего «профессионала» в области веб-разработки WordPress без какого-либо контакта с этими средствами на основе NodeJS. менеджеры пакетов, диспетчеры задач и инструменты сборки. Мы перешли от обсуждения наших любимых редакторов кода к спорам о том, какой препроцессор CSS является королем. Жизнь была намного проще, когда нам приходилось иметь дело с простой папкой, заполненной файлами CSS, PHP и JS. По крайней мере, так кажется до тех пор, пока вы не осознаете, что остались позади, тоскуя по лучшим практикам 2012 года9.0003

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

Это был я когда-то, если честно, в недалеком прошлом. Я, как и многие, был надежно спрятан в своем маленьком пузыре WordPress, и мне редко приходилось покидать панель инструментов WP. Плагины делали то, что мне было нужно, и когда мне приходилось кодировать, это было более традиционным способом. Но затем я столкнулся с довольно большим и более современным проектом веб-разработки, для которого требовалась среда NodeJS с Webpack, Gulp и Sass. Сначала я был немного медлительным, так как у меня просто не было большого опыта работы с такими инструментами. Но как только я смог окунуться в эту симфонию компиляции кода и реорганизации файлов, я осознал истинный потенциал всего этого.

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

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

Два крупных обновления имеют решающее значение

Я только что выпустил Instant IDE 1. 2.0 и Themer Pro 1.1.0, и я в восторге от последствий. Цель состояла в том, чтобы обеспечить мощный удар один-два для разработки дочерней темы WordPress и полноценных сред Node DEV, как локальных, так и живых! Эти обновления начинались довольно консервативно, но быстро превратились в некоторые действительно интересные инновации.

Во-первых, с помощью Themer Pro (который позволяет легко создавать собственные дочерние темы, а затем интуитивно редактировать их код) я сделал две важные вещи:

1. Я интегрировал этот PHP-скрипт SCSS, а также этот PHP-скрипт LESS, чтобы упростить компиляцию файлов Sass и Less.
2. Я создал несколько версий доступной темы Genesis Sample Theme и дочерней темы Freelancer, включая версию Sass и версию с поддержкой Gulp.

Затем идет Instant IDE. В этом обновлении я интегрировал те же PHP-скрипты Sass и Less и сделал несколько приятных улучшений пользовательского интерфейса, но наиболее примечательными «фичами» являются скринкасты и поддержка, которые появятся (см. ниже). В Instant IDE не столько то, что может сделать для вас какой-либо отдельный параметр или параметр, который оказывает наибольшее влияние на ваше мастерство РАЗРАБОТЧИКА, но то, что предлагает пакет в целом, это так захватывающе. Недавно я опубликовал сообщение в блоге о многих удивительных способах использования Instant IDE, и давайте просто скажем, что это обновление поставило эти примеры на стероиды! Instant IDE превратился из полезного редактора кода для тех быстрых настроек, которые вам нужно сделать на месте, в потенциально полноценную современную рабочую лошадку DEV!

Журнал изменений Themer Pro 1.1.0

• Добавлен PHP-скрипт SCSS, позволяющий Themer Pro компилировать файлы .scss без использования таких инструментов, как NodeJS и Gulp.
• Добавлен скрипт LESS PHP, позволяющий Themer Pro компилировать файлы .less без использования таких инструментов, как NodeJS и Gulp.
• Добавлена ​​Sass-версия образца темы Genesis.
• Добавлена ​​Gulp-версия образца темы Genesis.
• Добавлена ​​Sass-версия дочерней темы Freelancer.
• Добавлена ​​Gulp-версия дочерней темы Freelancer.
• Добавлена ​​детская тема TwentyNineteen.
• В Ace Editor добавлена ​​поддержка подсветки синтаксиса .scss.
• Добавлена ​​возможность открывать и редактировать файлы .sh.
• Добавлена ​​возможность просмотра пустых файлов.
• Усовершенствована функция создания дочерней темы, чтобы такие вещи, как локализация, имена функций и т. д., отражались пользовательским вводом.
• Обновлены настройки Themer Creator для поддержки разных версий одной и той же дочерней темы.
• Дочерняя тема Genesis Sample обновлена ​​с версии 2.6.0 до 2.8.0.
• Скрипт Ace Editor обновлен до последней версии.
• Размер шрифта Ace Editor увеличен с 12 до 14 пикселей для лучшей читабельности.
• Обновлена ​​карта крючков, чтобы включить несколько новых крючков OceanWP.
• Скриншот OceanWP Child обновлен до последнего из родительской темы.
• Удалено поле «Имя папки темы» создателя темы, поскольку оно не нужно.

Instant IDE 1.2.0 Журнал изменений

• Добавлен PHP-скрипт SCSS, позволяющий Instant IDE компилировать файлы .scss без использования таких инструментов, как NodeJS и Gulp.
• Добавлен скрипт LESS PHP, позволяющий Instant IDE компилировать файлы .less без использования таких инструментов, как NodeJS и Gulp.
• Добавлены значки инструментов сборки (например, Gulp, SASS, LESS и т. д.) вверху редактора, чтобы указать, когда возможность компиляции в данный момент включена.
• Добавлена ​​функция фрагментов консоли для предоставления полезных примеров копирования/вставки при использовании консоли.
• Скрипт Ace Editor обновлен до последней версии.
• Размер шрифта Ace Editor увеличен с 12 до 14 пикселей для лучшей читабельности.
• Значки Font Awesome обновлены до версии 5.
• Исправлено архивирование папок при загрузке, чтобы корневой каталог оставался нетронутым.

Посмотрите, как работают встроенные функции SASS

Узнайте, как настроить полноценный сайт разработки на основе NodeJS и Gulp для Themer Pro и Instant IDE

Я упоминал, что у нас появился новый форум?

О, это номер три, верно? Да, я знаю, я сделал хобби из создания новых форумов сообщества, а затем позволил им застояться. Что ж, отчасти это связано с тем, что я больше не занимаюсь разработкой и больше сосредоточен на нашей системе поддержки по электронной почте, но это тоже изменится. Дело в том, что несколько лет назад, во времена Catalyst Theme, я когда-то руководил смехотворно активным форумом сообщества/поддержки. Причиной этого было то, что все мое внимание было сосредоточено на этом форуме, так как именно там была наша поддержка. Это придало форуму согласованность и заставило меня убедиться, что общее взаимодействие на указанном форуме было как позитивным, так и продуктивным. Это то, что я хочу воспроизвести на этом новом форуме.

Так почему бы не сделать это на одном из двух других форумов, спросите вы? Ну, во-первых, в ближайшем будущем первый форум станет полностью устаревшим. И второй форум никогда не получал особой активности, в первую очередь, опять же из-за отсутствия у меня там постоянного взаимодействия. Так что я снимаю для нового старта и чистого холста. Кроме того, я хотел начать с более современной технологии форумов, которая не только намного быстрее и отзывчивее, но и позволяет мне глубже изучить NodeJS. Вот почему я решил использовать NodeBB (чтобы увидеть их репозиторий git, над которым я работал, перейдите ЗДЕСЬ).

Вот несколько моментов для размышления относительно этого нового форума сообщества:

• Здесь будет осуществляться ВСЯ наша поддержка (за исключением тех случаев, когда предоставляется доступ к личной информации), так что все остальные будут могут извлечь выгоду из такого взаимодействия.
• Объявления будут делаться здесь. Это даст нашим членам единую точку контакта для предоставления и получения информации, которая имеет какое-либо отношение к CobaltApps.com. И, конечно же, мы по-прежнему будем рассылать информационные бюллетени, а что нет, но это будет основным направлением объявлений.
• Участники могут создавать свои собственные сообщения на форуме «Блог» , когда они хотят поделиться своими материалами. Будь то решения, информация или просто то, что они узнали на этом пути, это будет идеальное место для участников, чтобы давать и получать информацию, опять же, в централизованном месте.
• Любой может зарегистрировать учетную запись, а не только участники. Я хочу сохранить этот форум как место, где можно свободно обмениваться информацией. Существует специальная область поддержки продукта для активных участников, но даже она видна всем. Посмотрим, как это пойдет, но я надеюсь, что если кто-то использует нашу поддержку и ресурсы на этом форуме, то он обязательно будет использовать наши инструменты и, следовательно, будет иметь действующую лицензию на указанные инструменты. Здесь всегда есть потенциал для злоупотреблений, но я верю, что все пойдет к лучшему.

Так что не забудьте проверить новый Форум сообщества Cobalt Apps и зарегистрироваться и создать учетную запись, чтобы вы могли присоединиться к беседе (я знаю, сейчас это сверчки… давайте изменим это.)

Follow & Share:

Введение в Gulp.js

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

«Война имеет жизненно важное значение для государства; следовательно, это предмет исследования, которым ни в коем случае нельзя пренебрегать»

• Сунь Цзы, Искусство войны

В этом посте я познакомлю вас с Gulp.js, исполнителем задач на javascript, который поможет вам автоматизировать процесс разработки.

##Настройка системы сборки веб-приложений

При разработке современных веб-приложений необходимо автоматизировать важные задачи:

• тестирование: анализ кода, модульное тестирование, e2e-тесты
• предварительная обработка css (sass, меньше,…)
Оптимизация
• : объединение и минимизация css и скриптов, сжатие новых или измененных изображений, …
• развертывание обновлений на промежуточном или рабочем сервере

Существует множество инструментов, которые помогут вам автоматизировать эти задачи. Какой выбрать? Grunt, Gulp, Brunch, Broccoli,…

Еще в 2012 году вышел Grunt.js, и он был быстро принят сообществом, начали распространяться плагины, и он стал королем для автоматизации задач на стороне клиента, хорошо сочетаясь с Bower и Yeoman. . Как и многие другие разработчики, я использую Grunt в своих проектах, и он выполняет свою работу, но недавно я начал использовать Gulp, еще один проект с открытым исходным кодом, с более быстрым временем сборки и философским подходом Unix/Node к решению проблем.

Gulp.js фокусируется на коде, а не на конфигурации. Используя возможности потоков Node, он позволяет сократить время сборки, избегая необходимости записи временных файлов на диск. Это одно из основных отличий от Grunt. Потоковые экземпляры в основном представляют собой каналы Unix. Они могут быть доступны для чтения, записи или и того, и другого, и об этом легко рассуждать — вы можете направить доступный для чтения поток в доступный для записи поток, выполнив readableStream. pipe(writableStream).

«Потоки пришли к нам с самых первых дней Unix и за десятилетия зарекомендовали себя как надежный способ составления больших систем из небольших компонентов, которые хорошо выполняют одну задачу.
Затем вы можете подключить вывод одного потока к вводу другого и использовать библиотеки, которые абстрактно работают с потоками, чтобы установить управление потоком более высокого уровня».

• подстек

Другие преимущества использования Gulp:

• Использование стандартных библиотек для выполнения задач
• Небольшие идиоматические модули Node, которые хорошо выполняют одну задачу
• Задачи выполняются с максимальным параллелизмом
• Действительно простой и элегантный API

Изучение новых методов управления потоком сделает вас более эффективным. Чтобы узнать больше о потоках узлов, прочитайте Stream Handbook Джеймса Холлидея и поиграйте на Node.js Stream Playground Джона Резига. Еще один отличный ресурс — Node Streams: как они работают? от Макса Огдена, к нему прилагается скринкаст статьи.

Gulp имеет только несколько функций для изучения:
задача (имя, фн) : он регистрирует функцию, и вы можете дополнительно указать некоторые зависимости, если другие задачи должны выполняться в первую очередь.
run(tasks…) : запускает все задачи с максимальным параллелизмом.
watch(glob, fn) : запускает функцию при изменении файла, соответствующего glob
src(glob) : возвращает читаемый поток. Берет глоб файловой системы и начинает создавать файлы, которые совпадают. Это передается другим потокам.
dest(folder) : возвращает доступный для записи поток. Файловые объекты, передаваемые по конвейеру, сохраняются в файловой системе.

Эта статья расскажет вам обо всех пугающих вещах и познакомит вас с основными идеями, которые вам необходимо знать, чтобы начать использовать gulp. http://travismaynard.com/writing/getting-started-with-gulp

Есть эпизод Javascript Jabber с создателем Gulp: JSJ Gulp.js с Эриком Шоффстоллом

Предостережения: команда Gulp.js работает над введением новой системы задач для повышения эффективности (даже больше), и она может включать некоторые Изменения API, вы можете следить за прогрессом здесь https://github.com/gulpjs/gulp/issues/355

##Так почему я должен использовать Gulp вместо Grunt?

Марк Далглиш опубликовал отличную презентацию, посвященную истории Grunt и Gulp и их различиям: http://markdalgleish.github.io/presentation-build-wars-gulp-vs-grunt

Еще одна замечательная статья, которую стоит прочитать — Gulp, Grunt, Whatever.. Николя Бевакуа

Основные причины, по которым я решил перейти на Gulp:

• Grunt использует JSON-подобные файлы конфигурации данных; Gulp использует более компактный и простой код JavaScript.
• Плагины Grunt часто выполняют несколько задач; Плагины Gulp предназначены только для одной цели.
• Grunt требует подключаемых модулей для базовых функций, таких как просмотр файлов; В Gulp они встроены.

Вы можете найти плагины gulp на http://gulpjs.com/plugins и https://npmjs.org/browse/keyword/gulpplugin

##Conclusion

Gulp.js и потоки узлов более естественны для понимания, чем огромный файл конфигурации, а также обеспечивает большую гибкость и скорость. Грант более взрослый. Я думаю, что и Grunt, и Gulp могут счастливо сосуществовать. Если вы успешно используете Gulp, нет причин переключаться на Gulp, если вы действительно не хотите или не нуждаетесь в большем управлении потоком, и вы чувствуете себя комфортно, работая с потоками и живя на грани.

Сравнение Gulp и Grunt для разработчиков WordPress

В мире скриптов сборки Gulp и Grunt стали довольно популярными, и у каждого из них есть своя доля сторонников, критиков, сторонников и поклонников. И Gulp, и Grunt служат более или менее одинаковой цели: оба могут использоваться для автоматизации определенных задач, а также могут быть расширены с помощью плагинов. Кроме того, они оба полагаются на Node.js

Тем не менее, какой из них лучше другого? Очевидно, что для этого ответа не может быть явного победителя, но сравнивая один сценарий с другим, какой сценарий работает лучше и в каких аспектах? В этой статье мы попытаемся ответить на этот вопрос.

Gulp.js

Благодаря слогану «автоматизируйте и улучшите свой рабочий процесс», Gulp быстро завоевал популярность и стал любимцем многих разработчиков по всему миру. Gulp чрезвычайно прост в использовании, эффективен и может значительно сэкономить время и усилия разработчиков.

Gulp придерживается лучших практик Node и поэтому предлагает минимальный API, позволяющий вам моделировать его в соответствии с вашими потребностями и вашим собственным рабочим процессом. Таким образом, Gulp строится вокруг вашего рабочего процесса.

Gulp имеет собственный репозиторий плагинов, содержащий более 2292 плагинов.

Grunt.js

Grunt.js, средство выполнения задач на JavaScript, существует дольше, чем Gulp, и, следовательно, больше с точки зрения пользователей и силы сообщества — если судить по цифрам.

Как и Gulp, Grunt также фокусируется на автоматизации основных задач разработки, тем самым пытаясь сэкономить ваше время и усилия. Такие вещи, как минификация и компиляция, могут быть переданы Grunt на аутсорсинг, и вы можете сосредоточиться на более крупных и качественных вещах.

Grunt используется такими компаниями, как Twitter, Adobe и jQuery, поэтому, полагаясь на Grunt как на средство выполнения задач, вы, несомненно, попадете в хорошую компанию. Grunt также поддерживается плагинами, и в настоящее время в его репозитории содержится более 5600 плагинов, из которых вы можете выбирать.

Один на один

Скорость

Скорость должна быть самым важным фактором при выборе между Grunt или Gulp. В конце концов, оба этих скрипта призваны сэкономить ваше время, автоматизируя и выполняя основные задачи, поэтому скорость превыше всего, не так ли?

Проще говоря, Gulp имеет преимущество в скорости над Grunt.

Вы спросите, почему? Ну, это зависит от того, как оба скрипта работают с автоматизацией. Grunt, например, использует промежуточные файлы и дисковые операции ввода-вывода. Таким образом, ваш код компилируется и записывается во временный файл на диске, который затем создается и автоматически добавляется префикс, а затем конечный код записывается в конечный файл.

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

Чтобы помочь вам узнать больше об этом, вот немного старый, но все еще актуальный тест скорости.

Сообщество и пользовательская база

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

Конечно, числа мало что значат, и то, что один скрипт имеет больше плагинов, не делает его подходящим для всех целей. Тем не менее, в конце концов, у вас больше шансов найти плагин для Grunt, чем для Gulp, и, аналогично, у вас больше шансов получить поддержку от сторонних ресурсов и литературы, если вы используете Grunt. чем для Gulp.

Обратите внимание, однако, что возраст — это просто число, и со временем, особенно к следующему году или около того, Gulp вырастет до большего размера (при условии, что он продолжит расти такими же темпами).

Вердикт

Итак, какой из них выбрать?

С точки зрения скорости выполнения может возникнуть соблазн проголосовать за Gulp. Тем не менее, вы также должны помнить о характере ваших проектов. Например, если вы работаете над темой WordPress, количество функций и файлов, с которыми вы имеете дело, значительно невелико, и вы не обнаружите заметного недостатка скорости, если выберете Grunt, а не Gulp.

Количество подключаемых модулей, однако, может быть небольшим фактором. Если нужный вам плагин доступен для Grunt, но не для Gulp, вам, возможно, придется по большей части полагаться на Grunt. Точно так же, если вам нравятся более чистые и компактные API, Gulp будет служить вам лучше. Кроме того, если настройка объектов JSON вас не интересует, вам снова будет проще начать работу с Gulp.

Таким образом, разумнее принимать решение, исходя из собственных потребностей, а не жестко придерживаться одного из двух и полностью отказываться от другого. И, конечно же, есть способные разработчики, которые не любят Grunt или Gulp и предпочитают использовать npm.

Какой из них вы предпочитаете для своего рабочего процесса разработки? Глоток или ворчание? Поделитесь своим мнением в комментариях ниже!

Полное руководство: что такое скринкастинг и зачем его использовать?

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

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

В отличие от снимка экрана, скринкасты можно назвать захватом видео с экрана или записью экрана, и это отличный способ обучать или делиться идеями.

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

Что, если бы у вас в кармане была камера, готовая снимать и записывать в полном, четком HD в любой момент?

Какие типы видео вы бы создали? Хотели бы вы когда-нибудь поделиться тем, что у вас на экране? Как это может помочь вам работать лучше?

Типичные примеры скринкастов:

• Учебные пособия
• Обучающие видеоролики
• Видеоуроки
• Записанные презентации потому что обучение не всегда происходит в академической среде.

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

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

  Скринкастинг — это инструмент, который вы можете использовать уже сегодня. Вот несколько отличных советов по созданию скринкастов, которые помогут вам начать!

  Запишите свой экран сегодня! (Бесплатно!)

  Загрузите одну из наших бесплатных пробных версий программы записи экрана (для Windows или Mac), чтобы быстро и легко записывать экран вашего компьютера.

  Загрузить бесплатную пробную версию

  5 способов, с помощью которых скринкасты могут сделать вас более продуктивными на работе сегодня

  1.

  Оживите процесс адаптации

  Введение нового человека в курс дела может занять много времени.

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

  С помощью скринкастинга вам не нужно постоянно начинать и останавливаться, чтобы ответить на вопросы. Это позволяет сосредоточиться на материале. Новый сотрудник может запускать, останавливать и пересматривать скринкаст столько раз, сколько ему нужно. Никто не беспокоится о прерывании записи видео!

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

  2.

  Создайте базовое руководство

  Сколько раз в день вам приходится отвечать на один и тот же вопрос?

  • «Как повторно подключиться к принтеру?»
  • «Как лучше всего вводить данные?»
  • «Как снова получить доступ к этим файлам Q4?»

  Вы знаете. Это типа вопроса . Это вопрос, на который вы отвечали бесчисленное количество раз, и к настоящему времени ваш ответ полностью автопилотный.

  Остановись!

  И отвлеките от этого своих коллег, создав скринкаст, который оставит неизгладимое впечатление. Почему бы не создать небольшую библиотеку скринкастов с ответами на часто задаваемые вопросы?

  О, и мы упоминали, что это сделает вас похожим на рок-звезду?

  3. Используйте скринкастинг в классе или школе

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

  Идеи скринкастов для вашего класса:

  • Записывайте процедуры и отвечайте на распространенные вопросы.
  • Обеспечьте учащимся аудиовизуальную обратную связь (следующая лучшая вещь после беседы 1:1).
  • Записывайте уроки, к которым учащиеся могут получить доступ в любое время и в любом месте.
  • Снимите видео, чтобы помочь замещающему учителю, если вам придется пропустить урок.

  4. Демонстрация программного обеспечения или продукта

  Нет лучшего способа продемонстрировать свой продукт, чем показать его на деле! Институт контент-маркетинга утверждает, что потребителям необходимо множество точек соприкосновения, прежде чем они решат совершить покупку.

  Задумывались ли вы когда-нибудь о том, что пояснительные видеоролики, пошаговые руководства, учебные пособия и полезные видеоролики с практическими рекомендациями начинаются с надежной стратегии демонстрации продукта? Эти видеоролики также предоставляют потрясающие маркетинговые возможности, чтобы показать (а не просто рассказать!) ценность вашего продукта.

  Часто потенциальным покупателям необходимо почувствовать, на что будет похож опыт, прежде чем они совершат покупку.

  Однако, просматривая скринкаст, они выражают неподдельный интерес к вашему продукту и, возможно, намерение совершить покупку.

  Демонстрационный видеоролик о продукте — это мощный инструмент, который удерживает внимание посетителей на вашем веб-сайте и вызывает интерес к вашему продукту.

  Вы даже можете создать на YouTube видеоролик с демонстрацией вашего продукта, чтобы поделиться им с более широкой аудиторией.

  5. Четкая обратная связь

  Иногда лучший способ дать четкий и лаконичный отзыв — это выговориться.

  Но что, если человек, которому нужна обратная связь, находится в другом месте? Или другой часовой пояс?

  Screencasting — это решение, которое помогает восполнить пробелы для современной глобальной рабочей силы. Основная часть предоставления обратной связи — это не что вы говорите, а как вы это говорите. Контекст — это все, что нужно для конструктивной критики.

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

  Какая программа для создания скринкастов лучше всего подходит для начала?

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

  Camtasia создана для всех, кому нужно сделать какой-либо скринкаст, и имеет множество справочных видеороликов, которые помогут вам начать работу. Мы делаем 100% наших уроков и других скринкастов с помощью Camtasia.

  No related posts.