Pull to refresh
  • by relevance
  • by date
  • by rating

Читаем руководства в цвете

Configuring Linux *
Учитывая, что День системного администратора только раз в году, а так хочется побольше ярких дней, давайте внесем немного цветов в серые будни доблесных бойцов невидимого фронта! :)

Раскрашиваем будни системного администратора...
Total votes 76: ↑68 and ↓8 +60
Views 1.4K
Comments 32

Особенности настройки git под windows

Git *
Проблемы с русскими символами в git

Когда вы начнете работать с версией git под windows в командной строке, вы столкнётесь со следующей проблемой — все сообщения git, в которых фигурируют русские символы будут нечитаемы. Имена файлов, на русском языке, будут выглядеть так — "\362\345\361\362", а тексты коммитов примерно так — <C8><ED><E8><F6><E8><E0><EB><E8><E7><E0><F6><E8><FF> <EF><F0><EE><E5><EA><F2><E0>. Т.е. исходная строка преобразуется в utf8 в соответствии с кодировкой latin1.

далее...
Total votes 20: ↑18 and ↓2 +16
Views 92K
Comments 39

Подсветка синтаксиса в less

Configuring Linux *
Администраторы Unix-подобных ОС очень часто пишут командные сценарии для автоматизации выполнения рутинных задач, используя свой любимый тектовый редактор. Время от времени приходится открывать написанные однажды сценарии, чтобы что-то в них подсмотреть. Я это делаю с помощью less. С помощью последнего мне очень понравилось читать раскрашенные руководства и захотелось того же при обычном просмотре текста в консоли (shell-сценарий, html-документ и пр.).
Читать дальше →
Total votes 11: ↑8 and ↓3 +5
Views 4K
Comments 6

SCSS — новая порция глазури от Sass

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

Список того о чем мечтали CSS дизайнеры, но боялись говорить в слух.
Total votes 54: ↑43 and ↓11 +32
Views 54K
Comments 37

CSS-препроцессор LESS и его интеграция с Ruby on Rails

Website development *
Sandbox
LESS — новый препроцессор для CSS. Проще говоря, LESS позволяет использовать в вашем CSS-файле переменные, операторы, классы и вложенные конструкции. В этой статье вы узнаете об основных возможностях LESS и о том, как быстро подключить его к популярному фреймворку Ruby on Rails 3.

Читать дальше →
Total votes 58: ↑54 and ↓4 +50
Views 5.4K
Comments 21

Набор инструментов Bootstrap для создания web-приложений

Social networks and communities
Изображение - savepic.org — сервис хранения изображений

Сегодня Twitter объявил о запуске нового набора инструментов Bootstrap для создания web-приложений при помощи CSS. Набор включает в себя стили для типографики, форм, кнопок, таблиц, стрелок и.т.д.

Создатели говорят, что сервис был запущен как фреймворк для создания фронтэнд приложений. Набор был разработан во время первого твиттеровского Hackweek.
Читать дальше →
Total votes 79: ↑75 and ↓4 +71
Views 7.2K
Comments 33

Fugue-Icons — динамический Sprite

Website development *
Для одного из проектов мне нужно было использовать набор простых иконок. Сначала я остановил свой выбор на популярный набор Silk Icons и его Sprite-плагин для Blueprint, но чем дальше я с ним работал, тем сильнее требовалось что-то большее. Иконок было маловато, ненужных гораздо больше, чем нужных, а подгружать приходилось все.

Далее мой выбор остановился на Fugue Icons. Я поискал в гугле что-либо для CSS и нашел два решения. Первое: каждая иконка отдельным файлом. Сразу нет, потому что при загрузке страницы это смотрится очень убого. Второе: несколько отдельных PNG со спрайтами и единый CSS. Все это дело весило 1.4 Мб, что никак не допустимо для среднестатистического сайта.

Посему было принято решение паковать Sprite с нужными иконками и писать для него CSS самому, однако это можно сделать единожды, но не каждый раз при каких-то изменениях на сайте, да и для новых проектов тоже было бы не лишним как-то упростить задачу.
Читать дальше
Total votes 40: ↑38 and ↓2 +36
Views 2.5K
Comments 16

Имитация именованных переменных в LESS (с примером в jsFiddle)

CSS *
Sandbox
Объяснять, что такое LESS, я не буду. Но таки пару слов скажу.

LESS — это динамический язык стилевой разметки, код на котором компилируется в стандартный CSS. LESS использует переменные*, операции и функции (нерасширяемый набор), а также миксины**, которые могут принимать параметры. Миксины при компиляции замещаются стилями. Операции и функции — результатами вычислений.

Проблема

При объявлении миксина, принимающего параметры, обязательно должны указываться значения параметров по-умолчанию. Это позволяет, при желании, вызывать миксин без передачи всех или части параметров. Но миксин в LESS пока не поддерживает именованные параметры. То есть, если миксин объявлен с 10 параметрами и необходимо изменить значение только десятого по порядку, придется передавать и предыдущие девять тоже. Да, со значениями по-умолчанию.

Но у любой проблемы есть решение. И у этой тоже...
Total votes 8: ↑7 and ↓1 +6
Views 4.8K
Comments 9

Краткий обзор отличий LESS от SASS

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

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

Читать дальше →
Total votes 47: ↑37 and ↓10 +27
Views 57K
Comments 48

LESS: программируемый язык стилей

CSS *
Sandbox
Я не люблю CSS. Он простой и понятный. Это движущая сила Интернета, но он слишком ограниченный и им трудно управлять. Пришло время привести этот язык в порядок и сделать его более полезным, используя динамический CSS при помощи LESS.
Объясню свою позицию на примере. Почему бы вместо использования #FF9F94 для получения темно-персикового цвета просто не хранить значение этого цвета в переменной для её последующего использования? Что бы перекрасить сайт достаточно будет изменить значение переменной всего в одном месте и всё.
Другими словами: это будет очень изящно, если мы будем использовать немного программирования и логики в CSS, что бы сделать его более мощным инструментом. Хорошо, что это всё возможно с использованием LESS.
Так что же такое LESS?
Total votes 161: ↑147 and ↓14 +133
Views 397K
Comments 136

CSS3: жизнь без префиксов

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

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

Естественно, перестать использовать префиксы было бы неразумно. Но переложить обязанность по их генерации на существующие специально для этого инструменты вполне возможно. Я попробовал перечислить возможные варианты.
Читать дальше →
Total votes 68: ↑62 and ↓6 +56
Views 22K
Comments 88

Серверный процессинг LESS файлов «на лету» своими руками

Nginx *
Sandbox
LESS — это популярный препроцессор для языка CSS, добавляющий возможности использовать константы, наследование, вложенные стили и много другое, чего так не хватает в CSS. Как только я познакомился с LESS я понял что это то, что мне нужно. Единственное, что омрачило мою радость — разработчики предлагают всего два варианта его использования: встраивать JavaScript файл, который занимается препроцессингом прямо в браузере или использовать специальный скрипт (который должен исполняться на node.js) который процессирует LESS файлы.

Вариант c процессингом LESS файлов на клиенте мне не понравился тем, что для больших LESS файлов это вызывает ощутимые паузы при загрузке страницы. Если использовать LESS версию твиттерного bootstrap-a — загрузка увеличивается на несколько секунд, что абсолютно недопустимо.
Вариант с предварительной компиляцией меня не устраивал тем, что приходится «вручуную» запускать препроцессор. Я видел программу, которая автоматически перегенерирует LESS файлы при их изменении, но она оказалась платной и только под МакОСь.

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

Как этого добиться?
Total votes 37: ↑31 and ↓6 +25
Views 7.3K
Comments 46

WebStorm 4 — в гармонии с ECMA Script

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

Кроме того:
Читать дальше →
Total votes 48: ↑45 and ↓3 +42
Views 2.2K
Comments 83

SASS против LESS

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

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

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

Развернутый ответ: ниже
Читать дальше →
Total votes 62: ↑50 and ↓12 +38
Views 170K
Comments 72

Большие изображения на сайте для пользователей с Retina Display — retina.js

Lumber room
Sandbox
Новый iPad уже появился в магазинах, не говоря уже про братьев iPhone 4S и iPhone 4, которыми многие давно и успешно пользуются, а вот сайтов, учитывающих возможности отображения дисплеями этих устройств картинок в высоком разрешении, пока не так много. Но есть простой вариант, как сделать свой сайт соответственно тренду «отзывчивым», или на их манер: responsive.

Как-то, примерно год назад, один знакомый фотограф жаловался, мол, приходится уменьшать фотографии, теряя детали, в которых кроется вся соль, мол разрешение экранов таково, что точки слишком заметны. iPhone 4 он отверг по причине «кропа» — несмотря на достойное физическое разрешение, на таком дисплейчике помещается лишь часть фотографии. Дальше он переключился на камеры с кропнутыми матрицами и тем, что получается даже при использовании хороших объективов, но меня зацепила та часть, которая касалась отображения картинок, а именно отсутствием возможности качественно показать изображение с экрана, не уменьшая размеров картинки до лилипутских.

И вот пришёл большой iPad!
Счастливая девочка Карли держит ГрушеПад

Show me your boobs
Total votes 22: ↑19 and ↓3 +16
Views 1.5K
Comments 5

Включаем подсветку синтаксиса для less файлов в Notepad++

CSS *
Верстая проект при использовании less библиотеки в уже привычном для меня Notepad++ я долго не мог привыкнуть к отсутствию адекватной подсветки less синтаксиса. В очередной раз, столкнувшись с этой проблемой, я решил поставить крест своим мучениям и начал искать в сети способ добавления подсветки синтаксиса для less файлов в редакторе Notepad++.

Читать дальше →
Total votes 26: ↑10 and ↓16 -6
Views 9.6K
Comments 9

Эффективная веб-разработка c Visual Studio 2012: нововведения в упаковку и минификацию скриптов и стилей

Microsoft corporate blog .NET *ASP *
Translation

С выходом Visual Studio 2012 инструмент отвечающий за автоматическую минификацию и упаковку скриптов и стилей Web Optimization Framework получил большое обновление. Эти изменения преследуют две цели:

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

Основные изменения


Для того, чтобы предоставить решение поставленных задач, во фреймворке были произведены некоторые изменения в моментах относящихся к тому как пакеты упаковки определяются и регистрируются и то, как производится ссылка на упакованные пакеты в представлении.
Читать дальше →
Total votes 14: ↑9 and ↓5 +4
Views 12K
Comments 14

Встречайте WebMatrix 2 RC: поддержка Node.js, Jade, EJS, LESS, CoffeeScript и многое другое

Microsoft corporate blog Website development *Node.JS *
Translation
После нескольких месяцев активной разработки, команда WebMatrix рада представить новую версию WebMatrix 2 Release Candidate. WebMatrix 2 включает в себя очень много новых функций, но сегодня я предлагаю вам ознакомиться с обзором той работы, которая была проделана для поддержки разработки приложений Node.js в WebMatrix.



Для того чтобы загрузить WebMatrix 2 достаточно перейти по следующей ссылке. Подробнее о нововведениях в WebMatrix 2 предыдущей предварительной версии можно прочитать здесь.
Читать дальше →
Total votes 65: ↑52 and ↓13 +39
Views 19K
Comments 49

TeaCSS – очевидный подход к созданию стилей

Website development *CSS *HTML *

Введение


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

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

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

Плюсы – практически никаких подводных камней. Файл tea преобразуется в JavaScript, наполненный простыми командами вывода. Этот JavaScript можно отлаживать, смотреть в FireBug и вообще его поведение предсказуемо. В этом и состоит очевидность подхода, в вебе уже и так превалирует JS, поэтому вам не придется учить ничего нового.
Читать дальше →
Total votes 43: ↑35 and ↓8 +27
Views 2.1K
Comments 28

Экосистемный подход к сборке веб-проекта с TeaCSS

Website development *JavaScript *HTML *
В этой статье я расскажу как можно организовать процесс сборки фронтэнда «от и до».

Советую начать со вводной статьи, если кто не читал.

Там я рассказывал про TeaCSS как про надмножество CSS, и это была неправда. Точнее – полуправда. И таким он был во времена своего создания (откуда и название).

Сейчас – это декларативный метаязык для генерации контента, во многом черпающий вдохновение из QML, Lisp, Clojure, Nemerle.
Читать дальше →
Total votes 3: ↑2 and ↓1 +1
Views 1.2K
Comments 8