Всем привет! В июле мы провели в Краснодаре первый митап по Backend-технологиям – а теперь самое время обсудить Frontend. Приглашаем на онлайн-митап с разработчиками SimbirSoft. Как всегда, участие бесплатное, а за самые интересные вопросы спикеры подарят полезные подарки.

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

В этот раз мы рассмотрим:

• Проблему с одинаковыми именами файлов
• Страницу ожидания перед загрузкой
• Создание CSS с помощью SASS
• Аутентификацию
• Запуск из под thin
• Тестирование с помощью RSpec
• Бенчмарки

Что такое Haml/Sass?

Haml (xHTML Abstraction Markup Language) это язык разметки для упрощённой генерации xHTML. В свою очередь эквивалент Haml для css — это Sass (Syntactically Awesome StyleSheets).

В данной статье я расскажу чем примечателен Sass. И с помощью чего sass-файл можно скомпилировать в css.

Я давно ждал этого момента, нет честно, где-то в подкорке я очень-очень хотел такой штуки чтобы было удобно писать на CSS без переписывания похожих стилей по два раза, без выыскивания нужных разделов в собственном коде, в общем хотелось чтобы на CSS можно было работать легко и просто, что-то я затянул…И так встречайте xCSS — php-класс для работы с динамическим CSS.

В этой сборке вас ждут:

Новое имя. Два варианта Web IDE получили свои официальные названия: JetBrains WebStorm и JetBrains PhpStorm. Брендинг еще не закончен так что вы увидите знакомые белые сплэши и иконки WI в самых разных местах. Цель разработки остается прежней — идеальный инструмент для PHP/JS разработчиков и веб-дизайнеров.

Полностью настраиваемый PHP formatter – эта фича получила наибольшее количество голосов в трекере.

Последнее время я практически не занимался версткой, и пропустил выход Sass3, в котором реализовано расширение SCSS (Sassy CSS). Это именно расширение для CSS без «искажения» синтаксиса — то есть любой валидный CSS документ является и полностью валидным SCSS документом. В посте я проведу сравнение с уже существующими препроцессорами такими как Sass и Less. О которых уже писалось на хабре: Sass, Less. Но та информация немного устарела: в частности изменился синтаксис Sass.

Для того, чтобы управлять проектами по-настоящему эффективно, необходимо обращение к специальному программному обеспечению. Набор систем для управления проектами на сегодняшний день очень обширный: от громоздких, мегафункциональных до самых «лёгких» и простых. Для внедрения первых и их эффективной отдачи, конечно, потребуется много усилий (если, конечно, Вы не пригласите пару другую сертифицированных специалистов для контроля project-цикла внутри организации). Но всегда ли это оправдано? И будет ли использоваться весь функционал системы?

Я изготавливаю сайты «под ключ». Начиная от дизайна, кончая заливкой на хостинг. И самая нелюбимая мною часть этого увлекательного процесса — верстка дизайна в HTML. Вроде бы ничего сложного, но многие рутинные вещи очень утомляют. Поэтому я постоянно нахожусь в поисках интересных решений в этой области.

Не так давно я начал изучать Ruby on Rails 3 и нашел очень интересный плагин для него: Compass. По сути, этот CSS-фреймворк независим от Rails, им можно пользоваться и в других типах проектов.

Расскажу-ка я вам, как Compass облегчил мою жизнь.

В эту субботу состоится очередной донецкий кофе-и-код.

Впервые у нас будет англоговорящий докладчик, Keith Gaddis, который является активным участником встреч рубистов в Остине, столице Техаса, который он решил покинуть на время гиковской вакханалии на ежегодном SXSW. Keith — CTO компании Inductive Applications, которая занимается медицинским программным обеспечением. Говорить он будет о рефакторинге RoR-кода и часть названия его доклада перевести на русский трудно: «Refactoring WTF into OMG — стратегии успеха».

Я поделюсь своим опытом быстрого прототипирования при помощи Compass, Haml и Sass. Эти технологии растут из RoR, но это не мешает применять их и отдельно.

Зарегистрироваться на встречу можно на http://cnc.dn.ua/. Там же со временем появятся слайды и ссылки по темам.

«Забери мусор с собой!» — так называется сайт, который я сделал пару недель назад на выходных ^{(почти 2 дня делал)}, как раз к весеннему сезону, когда многие начинают выезжать за город на отдых.

Главная идея проста — убеждать людей, что природу нужно сохранить чистой. Для этого на сайте призываю всех убирать за собой (и не только за собой) мусор, а также на выбор предлагаются разные варианты плакатов в формате А4, которые можно распечатать на обычном принтере и приколоть канцелярскими кнопками к дереву, такая форма наглядой агитации:

Вчера пол дня потратил на подробное изучение LESS и его отличие от используемых нами SASS/SCSS.

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

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

Итак, представляю публике проект под девизом «Поменьше писанины! Побыстрей, дебаг!» Набор для скоростной разработки на Джанго.

Это 2 шаблона:

• шаблон конфига buildout, который подтягивает и собирает все необходимые проекту пакеты
• шаблон проекта, а именно настройки, включающие все нужные инструменты, и набор статики (готовые файлы на Haml и Sass)

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

Проблема очевидна. Нужен способ облегчить работу с префиксами.

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

Начинающим: удобный инструмент для верстки, создание и понимание работы плагинов в MODx.

Sass — правильный CSS

Многое (если не всё), чего не хватало старому доброму CSS (вплоть до CSS3), реализовано в расширенном формате написания каскадных таблиц стилей — Sass. Не зря приверженцы Ruby on Rails (откуда берет корни Sass) ласково называют его «синтаксический сахар».

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

Не отстаем от тенденций современности

Для тех, кто программирует на PHP в условиях CMS MODx, предлагается создать плагин, который будет следить за наличием и изменениями в sass-файлах и автоматически (ре)генерировать соответствующие css-файлы, подключаемые в шаблоне.

Статей про SASS(SCSS), Less на хабрахабре уже полно, но на мой взгляд не хватает такой, в которой было бы немного реальной практики. Я постараюсь восполнить этот пробел. Около года назад одна из SASS-статей меня "зацепила", и с тех пор я полюбил эту технологию настолько, что ручной набор обычного CSS кода представляется мне лишней тратой времени. Сия статья посвящается тем верстальщикам (или web-программистам), которые про SCSS ещё не слышали, или же ещё не пробовали в деле. Более опытным товарищам, полагаю, в ней ловить нечего.

Что такое SCSS

SCSS — "диалект" языка SASS. А что такое SASS? SASS это язык похожий на HAML (весьма лаконичный шаблонизатор), но предназначенный для упрощения создания CSS-кода. Проще говоря, SASS это такой язык, код которого специальной ruby-программой транслируется в обычный CSS код. Синтаксис этого языка очень гибок, он учитывает множество мелочей, которые так желанны в CSS. Более того, в нём есть даже логика (@if, each), математика (можно складывать как числа, строки, так и цвета). Возможно, некоторые возможности SCSS покажутся вам избыточными, но, на мой взгляд, лишними они не будут, останутся "про запас".

Мы продолжаем поддержку новейших технологий и улучшаем средства контроля качества. В сегодняшнем WebStorm 4.0 — ECMAScript Harmony и встроенный Code Coverage для JavaScript Unit Testing.

Кроме того:

• Создание пректов на основе HTML5 Boilerplate, Twitter Bootstrap и других
• Тонкая настройка JavaScript библиотек для любого файла в проекте
• Умное упорядочивание подсказок при дополнениии JavaScript
• Сворачивание произвольных регионов кода
• Эффективное управление версиями node.js

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

Если быть кратким: SASS.

Немного развернутый ответ: SASS лучше по всем пунктам, но если вы уже счастливы с LESS — это круто, по крайней мере вы уже упростили себе жизнь используя препроцессинг.

Развернутый ответ: ниже

В топике SASS против LESS хабраюзер morr упомянул интересный libsass — реализацию SASS на C++

На минувшем Railsconf 2012 был отдельный доклад про sass, где анонсировали фичи над которыми сейчас ведётся работа, и которые появятся в следующем релизе:
1. libsass — написанный на C компилятор sass в css, работающий быстрее на порядки нынешнего скрипта на руби. Для крупных проектов это очень существенно — большие объёмы стилей при деплое компилируются ну очень долго(полминуты и дольше). Так же это позволит написать биндинги для libsass к другим языкам, что означает более простое встраивание sass во фрейморки питона/ноды/дотнета/пхп.
…

А я взял и сделал для libsass биндинги для Python. Встречайте, любите и пользуйтесь python-sass

Недавно я наткнулся на интересную статью о Python-биндинге для libsass, в которой я узнал о существовании такой замечательной библиотеки, как libsass (реализация рубивского sass на C++). Имея опыт в написании PHP расширений, я решил сделать SASS/SCSS обработчик, используя libsass. Исходный код полученного расширения Вы можете найти тут — sass-php.

Введение

Хотя CSS-подобных языков не так уж и много – на слуху и на плаву сейчас и вовсе одни Sass и Less, я все же начну с ответа на вопрос «А зачем нужен еще один?».

Если коротко, то TeaCSS не плодит новых сущностей, ведь этот тот же CSS, в который в качестве языка добавили JavaScript.

У этого подхода есть свои плюсы и минусы.

Плюсы – практически никаких подводных камней. Файл tea преобразуется в JavaScript, наполненный простыми командами вывода. Этот JavaScript можно отлаживать, смотреть в FireBug и вообще его поведение предсказуемо. В этом и состоит очевидность подхода, в вебе уже и так превалирует JS, поэтому вам не придется учить ничего нового.