Frontend

В последние несколько лет CSS препроцессоры имели большой успех. Проекты с нуля очень часто начинались с Less или Sass. И это все еще очень популярная технология. Основными преимуществами этих технологий, на мой взгляд, то, что: Они позволяют вкладывать селекторы Обеспечивают легкую функциональность импорта Они дают вам переменные В данный момент в современном CSS вы уже можете использовать пользовательские параметры CSS или переменные CSS. CSS не является языком программирования, таким как JavaScript, Python, PHP, Ruby или Go, где переменные являются ключевыми вещами. CSS очень ограничен в том, что он может делать, и это в основном декларативный синтаксис, чтобы сообщить браузерам, как они должны отображать HTML-страницу. ...

Создание рабочей папки проекта с помощью Yeoman Создадим папку с названием myicons и воспользуемся генератором Tapp, который создаст все директории с пакетами Stylus, Jade, Gulp, Browserify, Bower и остальными. При успешном запуске Yeoman у вас должна получится такая картинка: [[$googleAdsenceResponsive? ]] После выполнения этих команд у вас получится приблизительно такая структура: Запустим Gulp командой: gulp serve Остальные команды вы можете просмотреть в файле .gulpfile. При успешном запуске у вас должна получится следующая картинка: ...

Yeoman like a Pro Yeo, man (Йоу мэн) — эй, чувак. Генераторы Yo помогают настроить быстро рабочее окружение. Наше рабочее окружение будет включать в себя Jade, Stylus, Gulp, Browserify, Bower. Вы можете самостоятельно собрать свой проект (рабочее окружение), для последних рекомендую курс на Lynda.com автор Ray Vilyalobos «Web Project Workflows with Gulp.js, Git, and Browserify». Установка и удаление генератора: Генераторы устанавливаются и удаляются с помощью Node Package Manager (NPM). Найти их можно по ссылке http://yeoman.io/generators/ (поиск там кривой, поэтому просто вставляйте поочерёдно необходимые слова, типа Stylus, Jade…) ...

Placesheen Для любителей Чарли Шина http://placesheen.com/200/300 Placekitten Для любителей кошек http://placekitten.com/g/200/300 PlaceBeard Фанатам бородатых мужчин http://placebeard.it/640x480 http://placebeard.it/640/480 http://placebeard.it/g/640x480 PlaceBoobs (+18) Женская грудь http://placeboobs.com/500/500 LoremPixel Генерирование тематический изображений, можно с надписями: http://lorempixel.com/400/200 http://lorempixel.com/g/400/200 http://lorempixel.com/400/200/sports http://lorempixel.com/400/200/sports/1 http://lorempixel.com/400/200/sports/modx%20is%20CMS/ http://lorempixel.com/400/200/sports/1/Dummy-Text DummyImage Генерирование однотипных монохроматичных изображений с надписью http://dummyimage.com/600x400/000/fff PlaceholdIt То же самое, что и DummyImage, но более приятный интерфейс и шрифт http://placehold.it/350x150 http://placehold.it/300&text=placehold.it+rocks! http://placehold.it/250/ffffff/000000 LowerSrc Пригодится при разработке адаптивных дизайнов <img class="lowersrc" /> <img class="lowersrc" width="100" height="150" /> <img class="lowersrc" data-text="My Image" /> <img class="lowersrc" data-bg-col="#e8e2e8" /> ...

Итак у нас есть система со всеми редакторами. Теперь можно усилить их плагинами (расширениями, пакетами). Расмотрим основные пакеты для Sublime Text 3: Для написания кода Emmet (ранее известный как Zen Coding) — это инстремент веб-разработчика, который может существенно улучшить ваш HTML & CSS алгоритм работы. Подробнее на сайте http://emmet.io SublimeLinter — интерактивный отладчик кода. Инструкции по установке лежат здесь и для каждого языка нужен свой плагин, список тут. scsslint & jshint в особенности полезны. ...

Условно разделил их на несколько типов. Голова, Железо, Операционная система, Браузеры, Редакторы, Плагины (расширения), Другие инструменты. Голова Раз это умственный труд, то для работы нам понадобятся мозги. А мозги мы развиваем прочтением книг, блогов, просмотром курсов, уроков, изучаем английский язык на курсах, посещаем конференции по веб-разработке, выступаем на них, пишем полезные статьи, ведём блоги, влоги на ютьюбе, создаём группы в фейсбуке, вконтакте по интересам, в общем веселимся как можем. Главные три условия для успешной работы (если вы ещё их не выполнили): ...

Недавно я начал использовать Brackets в качестве основного редактора кода и скажу вам — он очень классный. Он создан компанией Adobe и является опенсорс проектом. У редакторе огромное сообщество, которое постоянно разрабатывает всякие полезные дополнения еженедельно и постоянно происходит обновление существующих расширений. Я приведу ниже список наиболее используемых мной расширений (без некоторых из них я просто не смог бы жить :). Пакеты для Brackets редактора Brackets Sass — компилирует SASS .sass/.scss файлы при их изменении. Обновляет стили используя Live Preview. Экспериментальная поддержка Quick Edit. ...

В этом посте пойдёт речь о процессах и используемых инструментах для создания SVG спрайтов в студии Liquid Light. Создание и поддержка больших SVG спрайтов может быть сложным делом и времязатратным. Поэтому мы решили автоматизировать процесс. И вместо использования одного большого SVG спрайта и отслеживания координат каждой иконки индивидуально, мы бы хотели иметь возможность редактировать каждую иконку и создавать и размещать сгенерированные иконки автоматически. На практике это значит, что нам нужно сложить все наши SVG иконки в папку и будет создан SVG спрайт (и PNG резерв для IE8) и оптимизирован автоматически вместе с Sass картой или именами и скоординирован. Используя Sass миксины, мы далее сможем включать наши спрайты используя маленькие куски кода: ...

Откладывайте Grunt в сторону, у нас появился новый исполнитель задач. Gulp - это интуитивная, код-над-конфигурацией, потоковая система сборки. Это факт. Почему мне должно быть интересно? Хороший вопрос. Gulp’s код-над-конфигурацией делает не только лёгким написание задач, но его также легче читать и поддерживать. Gulp использует node.js потоки, что делает быстрее сборку, так как не нужно писать на диск временные папки и файлы. Если вы хотите узнать подробнее о потоках - можете почитать —эту статью. Gulp позволяет вам вводить ваши файл(ы) источники, прокачивать их через множество плагинов и получать вывод в конце, вместо конфигурирования каждого плагина с входом и выходом как в Grunt. Давайте взглянем на характерный пример построения базового Sass в Grunt и в gulp: ...

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