2013-06-16T12:18:30-07:00 http://vstarkov.ru Владимир Старков; Технический блог privet@vstarkov.ru 2013-06-08T00:00:00-07:00 http://vstarkov.ru/how-to-switch-language-with-capslock-in-macos <h1 id="capslock--macos">Как менять раскладку с помощью CapsLock в MacOS?</h1> <p>Как я уже писал, мне кажется удобным переключать язык одной клавишей, поэтому я пытался найти способ сделать это в MacOS. Я не нашёл, как простую инструкцию для мака (PuntoSwitcher не имеет такой опции) и поэтому, когда у меня всё получилось, то решил записать себе на будущее и вдруг кому-то ещё пригодится.</p> <ol> <li>Скачайте и установите <a href="https://pqrs.org/macosx/keyremap4macbook/index.html.en" title="KeyRemap4MacBook">KeyRemap4MacBook</a> и <a href="https://pqrs.org/macosx/keyremap4macbook/pckeyboardhack.html.en" title="PCKeyboarHack">PCKeyboarHack</a>, каждое из них после установки попросит вас перезагрузить компьютер — соглашайтесь;</li> <li>Откройте PCKeyboarHack и поменяйте (двойным кликом) значение keycode с 51 до 110;<br /> <a href="http://content.screencast.com/users/yaajing/folders/Jing/media/a1f20aeb-d1e5-44b4-87f6-444fc6a27df3/00000121.png" title="Шаг 2"><img src="http://content.screencast.com/users/yaajing/folders/Jing/media/a1f20aeb-d1e5-44b4-87f6-444fc6a27df3/00000121.png" alt="Изображение" title="Шаг 2" /></a></li> <li>Откройте KeyRemap4MacBook и в разделе For PC users, установите галочку напротив Application key to Command_L+Space; <a href="http://content.screencast.com/users/yaajing/folders/Jing/media/13d036ac-b311-422a-81c6-ccf8de2d8b19/00000122.png" title="Шаг 3"><img src="http://content.screencast.com/users/yaajing/folders/Jing/media/13d036ac-b311-422a-81c6-ccf8de2d8b19/00000122.png" alt="Изображение" title="Шаг 3" /></a></li> <li>Вы уже наполовину восхитительны! Осталось только отменить стандартное поведение CapsLock;</li> <li>Откройте настройки клавиатуры, кликните настройки клавиш-модификаторов:<br /> <a href="http://content.screencast.com/users/yaajing/folders/Jing/media/4ab42f51-1364-4347-80a1-1daeb9ecfa27/00000123.png" title="Шаг 5.1"><img src="http://content.screencast.com/users/yaajing/folders/Jing/media/4ab42f51-1364-4347-80a1-1daeb9ecfa27/00000123.png" alt="Изображение" title="Шаг 5.1" /></a><br /> и отмените поведение для клавиши CapsLock:<br /> <a href="http://content.screencast.com/users/yaajing/folders/Jing/media/5e52c3ac-4b88-4bda-a2f5-7b2cddb755dd/00000124.png" title="Шаг 5.2"><img src="http://content.screencast.com/users/yaajing/folders/Jing/media/5e52c3ac-4b88-4bda-a2f5-7b2cddb755dd/00000124.png" alt="Изображение" title="Шаг 5.2" /></a></li> <li>Готово — вы полностью восхитительны и начинаете эконосить себе минуты вашего времени каждый день!</li> </ol> 2013-05-29T00:00:00-07:00 http://vstarkov.ru/high-performance-javascript <h1 id="high-performance-javascript">Книга «Высокопроизводительный джаваскрипт» (High Performance JavaScript)</h1> <p>Пару недель назад я прочитал замечательную книгу на английском — <a href="http://www.amazon.com/dp/059680279X" title="High Performance Javascript">High Performance JavaScript</a> от <a href="https://twitter.com/slicknet" title="@slicknet">Николаса Закаса</a> (Nickolas C. Zakas). Книга очень хорошая и добросовестно написана. Николас рассказывает об интересных деталях уже известных технологий и делится неожиданными техниками оптимизации. А так как книга о производительности, то конечно же есть графики и сравнения, но не всё же книга написана живым языком. Интересно читать всю книгу целиком. Также книга открывает перед тобой некоторые аспекты производительности веб-страницы о которых ты раньше не задумывался или даже не знал.</p> <p><a href="http://www.amazon.com/dp/059680279X" title="High Performance Javascript"><img src="http://content.screencast.com/users/yaajing/folders/Jing/media/f3e254c9-5e10-4db8-b0dd-e1db38d29a1d/00000057.png" alt="" title="High Performance Javascript" /></a></p> <p>Книга разделена на 10 глав. В первой главе рассказывается про загрузку и выполнение джаваскрипта. Из этой главы важно вынести, что загрузка и выполнение джаваскриптовых файлов являются блокируюшими процессами и значит, в то время пока выполняется джаваскрипт не может идти процесс рендеринга страницы. Отсюда напрашивается вывод, что все js-файлы следует подключать в самом низу страницы перед закрывающим тегом <code>&lt;/body&gt;</code>, а аспект загрузки побуждает нас минифицировать, конкатенировать все файлы, и также было бы неплохо это всё отдавать с сервера с помощью gzip.</p> <p>Во второй главе Николас раскрывает вопрос цены обращения к данным и переменным. Как вы уже можете догадаться, если вы будете кешировать внешние (по отношению к текущему месту выполнению) переменные в локальные, и вообще как только вы начнёте кешировать переменные, всё начнёт работать быстрее.</p> <p>Затем Закас объясняет, что операции с DOM-деревом чрезвычайно дорогие и по возможности минимизируйте их. Кешируйте DOM-элементы в локальные переменные. Старайтесь не работать напрямую с DOM-деревом, по возможно склонируйте его или скопируйте с помощью <code>document.createDocumentFragment()</code> сделайте с элементами всё, что вам нужно, а после поместите обратно в DOM — таким образом вы уменьшите количество событий repaint и reflow. Для обращения к переменным также старайтесь использовать последние API (<code>document.querySelector()</code> и <code>document.querySelectorAll()</code>). В этой главе я особенно восхищался методом <code>document.createDocumentFragment()</code> и наконец обретённым знанием, чем же отличается <em>reflow</em> от <em>repaint</em> — reflow выполняется, когда меняется геометрия страницы (выполнятеся сразу после того, как были изменены какие-либо свойства, отразившиеся на размерах), а <em>repaint</em> — простой ререндеринг участка. Следующим закономерным открытием было, что браузеры пытаются оптимизировать эти два события и кешируют их, поэтому не стоит сбрасывать этот кеш каждый раз обращаясь к свойствам (<code>offsetTop|Right|Bottom|Left</code>, <code>scrollTop|Right|…</code>, <code>clientTop|Right|…</code>, <code>getComputedStyle()</code>) для вычисления которых, браузеру придётся выполнить весь стек закешированных repaint и reflow — и соответственно, все оптимизации будут напрасны.</p> <p>После этого рассказывается, что самый быстрый цикл — это старый добрый <code>for</code>. И также абсолютно очевидные советы, которым всё равно часто не хватает <strong>осознаности</strong> при повседневном применении: «Чтобы увеличить производительность цикла старайтесь уменьшить количество итераций и количество операций внутри одной итерации».</p> <p>В пятой главе идёт речь о регулярных выражениях и о том, что не стоит их бояться и о том, как использовать их эффективно. Сами по себе регулярные выражения хороши тем, что оптимизированы на более низком уровне и поэтому работают быстрее любых других текстовых операций. Но как и у любого другого инструмента у них есть область применения в которой регулярные выражени особенно хороши. Но в контексте производительности нам важны другие правила, которые заставят их работать быстрее. Старайтесь писать регулярку так, чтобы она имела больший шанс закончить выполнение, вместо медленного выполнения остальных проверок. Начинайте регулярку с простого и необходимого токена, чтобы при первой же проверке было ясно имеет ли смысл дальнейшие проверки или нет.</p> <p>Затем рассказывается про отзывчивые интерфейсы — интерфейсы без зависания и с хорошим откликом — о том как их добиться. Вся штука в том, что выполнение джаваскрипта как уже было выяснено раньше является блокирующим процессом, поэтому интерфейс не может реагировать на действия пользователя во время выполнения джаваскрипта и наоборот. Так как критическим откликом являются 100 миллисекунд, то ваша задача рефакторить ваш код в соответствии с этим условием. В вашем распоряжении отложенное выполнение с помощью таймеров и плюсом ещё одна невероятная вешь — webworkers – эта технология позволяет вынести продолжительные операции в отдельный поток и поэтому эти операции перестают блокировать интерфейс.</p> <p>Также в книге поднимаются темы мемоизации функций, кеширования результатов, оптимизирующего переопределения функции. Об этом можно рассказать подробнее, допустим у вас есть некроссбраузерный метод, для которого вы пишете обёртку:</p> <pre><code>function addHandler(target, eventType, handler) { if (target.addEventListener) { // DOM2 Events target.addEventListener(eventType, handler, false); } else { // ugly IE target.attachEvent("on" + eventType, handler); } } </code></pre> <p>Но мы ясно видим, что каждый раз при назвачении обработчика будет выполняться одно и тоже условие, и так как вряд-ли в пределах одной страницы и одной сессии пользователь будет менять браузер, то мы можем создать следующую оптимизацию:</p> <pre><code>function addHandler(target, eventType, handler) { // выполним проверку один раз и перезапишем саму функцию, // и после этого все следующие разы функция будет работать быстрее // так как избавилась от постоянного условия внутри if (target.addEventListener) { // DOM2 Events addHandler = function(target, eventType, handler) { target.addEventListener(eventType, handler, false); } } else { // ugly IE addHandler = function(target, eventType, handler) { target.attachEvent("on" + eventType, handler); } } // вызовем функцию, чтобы сразу переопределить addHandler(target, eventType, handler); } </code></pre> <p>Итогом всей книги будет несколько простых истин, которые гласят: чтобы увеличть производительность нужно:</p> <ul> <li>уменьшать количество итераций в циклах.</li> <li>Уменьшать количество операций в каждой отдельной итерации.</li> <li>Используйте локальные переменные.</li> <li>Кешируйте всё, что возможно.</li> <li>Избегайте дорогих операций.</li> <li>Аккуратно используйте регулярки.</li> <li>Поменьше трогайте DOM-дерево.</li> <li>А если трогаете, то сведите количество операции к минимуму.</li> <li>Не сбрасывайте браузерные кеши на repaint и reflow.</li> <li>Выучите битовые операторы — они правда быстрые.</li> <li>Пишите меньше кода.</li> </ul> 2013-04-08T00:00:00-07:00 http://vstarkov.ru/compress-files-with-jekyll <h1 id="jekyll">Как минифицировать файлы в Jekyll</h1> <p>Все хотят быстрые сайты, поэтому необходимо снижать количество запросов на сервер и минифицировать оставшиеся объёдиненные файлы.</p> <p>Если у вас блог на Jekyll, то вы не исключение. Чтобы иметь эту возможность, придётся чуть-чуть поменять структуру вашего сайта.</p> <p>Для начала создайте файл <code>_layouts/compress.html</code>. Этот файл будет шаблоном для минификации ваших файлов. <code>strip_newlines</code> и <code>replace</code> — <a href="https://github.com/shopify/liquid/wiki/liquid-for-designers#standard-filters">стандартные фильтры</a>. В данном случае я настроил свои фильтры на минификациюю CSS-файлов. Так как блок с комментарием для красоты, то вы можете его не использовать.</p> <pre><code>/** * @author Ваше имя и фамилия * @mail awesomemail@gmail.com * @twitter @awesometwitter */ {‍{ content | strip_newlines | replace:' ','' | replace:' ','' }} </code></pre> <p>Затем перенесите файлы из папок <code>js/</code> и <code>css/</code> в папку <code>_includes</code>.</p> <p>После этого создайте файлы <code>css/styles.min.css</code> и <code>js/scripts.min.js</code> и перечислите в каждом из них соотвествующие конкатенируемые файлы. Эти файлы будут выглядить примерно так, как показано ниже. Блок обрамлённый <code>---</code> включает YAML режим для этого файла. А строка <code>layout: compress</code> указывает на то, что должен использоваться шаблон <em>compress</em>, созданный нами ранее.</p> <pre><code>--- layout: compress --- {‍% include css/normalize.css %} {‍% include css/helper.css %} {‍% include css/print.css %} {‍% include css/main.css %} </code></pre> <p>После этого в шапке вашего jekyll сайта достаточно будет указать ссылку только на минифицируемый файл:</p> <pre><code>&lt;link href="/css/styles.min.css" rel="stylesheet" /&gt; </code></pre> <p>В моём случае этот <a href="/css/styles.min.css">файл</a> выглядит примерно так:<br /> <a href="http://img833.imageshack.us/img833/4349/10642240c1e64e2d9405f56.png"><img src="http://img833.imageshack.us/img833/4349/10642240c1e64e2d9405f56.png" alt="" /></a></p> <h2 id="section">Итоги</h2> <p>Весь CSS быстро грузится один раз одним маленьким файлом. Сайт стал быстрее, пользователи счастливее.</p> 2013-03-17T00:00:00-07:00 http://vstarkov.ru/git-undo <h1 id="git">Отмена последнего коммита в git</h1> <p>Удаляем коммит:</p> <pre><code>git reset --hard HEAD~1 </code></pre> <p>Сохраняем обновлённую историю коммитов в удалённом репозитории:</p> <pre><code>git push -f </code></pre> 2013-03-11T00:00:00-07:00 http://vstarkov.ru/markdown-workflow <h1 id="markdown--sublime-text">Редактирование Markdown в Sublime Text</h1> <p>В этом посте я хочу поделиться дзеном редактирования маркдауна в саблайме. Первоначально, я хотел только <strong>хоткеи</strong>, но потом поработав с гитхабом и маркдаун исходниками статей других авторов, я понял, что нужно как-то свести к минимуму операции по <strong>ограничению длины строки</strong>. Обе цели были достигнуты, и о способе я хочу рассказать.</p> <h2 id="section">Правильные хоткеи</h2> <p>Установите <a href="https://github.com/ttscoff/MarkdownEditing" title="The humble beginnings of a better Markdown editing package for Sublime Text 2">MarkdownEditing</a>. Откройте ваши пользовательские настройки хоткеев (<em>Menu: Preferences → Key Bindings — User</em>) и скопируйте туда всё из моих <a href="https://gist.github.com/matmuchrapna/5130995" title="Default (Windows).sublime-keymap">настроек</a> (за основу я брал <em>редактор StackOverflow</em>). Теперь вам доступны хоткеи:</p> <ul> <li><code>#</code> — при выделенном тексте создаёт заголовки уровня зависящего от количества #</li> <li><code>ctrl+b</code>, <code>**</code> — оборачивает в <code>**</code></li> <li><code>ctrl+i</code>, <code>*</code> — оборачивает в <code>*</code></li> <li><code>ctrl+l</code> — вставляет ссылку</li> <li><code>ctrl+g</code> — вставляет картинку</li> <li><code>ctrl+k, ctrl+k</code>, <code>`</code> — оборачивает в обратные кавычки для инлайнового кода</li> </ul> <p>Этим бы можно было и ограничиться, но зачем?</p> <ul> <li><code>ctrl+shift+v</code> — вставляет ссылку в референсы статьи (просто попробуйте)</li> <li><code>ctrl+shift+l</code> — показывает все референсы статьи</li> <li><code>ctrl+N</code> — создаёт из выделенного текста заговок N уровня</li> </ul> <p>И безусловно, редактирование списков будет незаметным — автоматическое проставление цифр, звёздочек или тире возьмёт на себя MarkdownEditing.</p> <h2 id="section-1">Полуавтоматическое ограничение в 80 символов</h2> <p>Для начала настроим Саблайм на редактирование файлов, ограниченных 80 символами строке. Для этого добавим в файл <code>Markdown.sublime-settings</code> такие строчки:</p> <pre><code>"rulers": [ 78 ], // чуть меньше, чем 80 символов // чтобы были правильные переносы "wrap_width": 78, "word_wrap": false </code></pre> <p>После этого создаём в папке &#8216;./Packages/User/&#8217; файл с названием <code>rewrapped paragraph.sublime-macro</code> и наполняем его из этого <a href="https://gist.github.com/matmuchrapna/5130923" title="rewrapped paragraph.sublime-macrо">гиста</a></p> <p>Затем впишем хоткей на этот макрос — откроем пользовательские настройки хоткеев (Menu: Preferences → Key Bindings — User) и добавим:</p> <pre><code>{ "keys": ["alt+r"], "command": "run_macro_file", "args": {"file": "Packages/User/rewrapped paragraph.sublime-macro"} } </code></pre> <p>И теперь абзац любой длины по хоткею <code>alt+r</code> будет перестроен, чтобы точно вписываться в 80 символов.</p> <p><a href="http://img694.imageshack.us/img694/6492/abfaa8d5cec246d88879a29.png" title="before rewrap"><img src="http://img694.imageshack.us/img694/6492/abfaa8d5cec246d88879a29.png" alt="" title="before rewrap" /></a><br /> <a href="http://i.imgur.com/gEz3TJV.png" title="after rewrap"><img src="http://i.imgur.com/gEz3TJV.png" alt="" title="after rewrap" /></a></p> <hr /> <p>Все счастливы!</p> 2013-03-10T00:00:00-08:00 http://vstarkov.ru/sublime-workflow <h1 id="sublime-text----">Sublime Text и плагины к нему</h1> <p>Я начал пользоваться <a href="http://sublimetext.com/" title="Sublime Text 2">Sublime Text</a> около года назад. Этот редактор бесподобен и этот текст пишу сейчас именно в нём. Я хочу дать новичкам материалы для ознакомления и инструкции по началу работы, а для тех, кто уже пользуется, хочу рассказать про плагины, которыми я пользуюсь.</p> <p>Бонусы Саблайма:</p> <ul> <li>Скорость работы</li> <li>Минималистичный интерфейс — ничего лишнего</li> <li>Режим «усиленной концентрации» — совсем ничего лишнего</li> <li>Графическая карта файла — удобная идея навигации по файлу</li> <li>Нечёткий поиск</li> <li>Гибкая настройка под себя без графического интерфейса</li> <li>Мощное, развитое сообщество плагинов, обеспеченное первоначальником Package Control (1000+ плагинов от 800+ авторов)</li> <li>Мультикурсор — редактирование стоблцов текста и не только</li> <li>Продуманные хоткеи</li> <li>Таб-группы — возможностью разделить экран на несколько частей</li> <li>Возможность одновременно редактировать один и тот же файл в разных табах.</li> </ul> <p>Почти все бонусы можно будет увидеть в видеокурсе, о нём ниже.</p> <h2 id="section">Установка, настройка, система плагинов</h2> <p>Первым делом при работе с Sublime Text установите <a href="http://wbond.net/sublime_packages/package_control" title="Sublime Package Control">Package Control</a>, через него тему «<a href="https://github.com/buymeasoda/soda-theme" title="Dark and light custom UI themes for Sublime Text 2">Soda Theme</a>» (в настройках: <code>"theme":"Soda Dark.sublime-theme"</code>), после этого для баланса с темой нужно настроить <a href="https://github.com/buymeasoda/soda-theme#syntax-highlighting-colour-schemes" title="Soda Theme — Syntax Highlighting Colour Schemes">цветовую схему</a>: из репозитория Soda Theme скачайте отдельный архив <a href="http://buymeasoda.github.com/soda-theme/extras/colour-schemes.zip" title="Archive of *.tmtheme files">colour-schemes.zip</a> и перенесите из него соответствующий файл в папку с <code>./Packages/User/</code> затем вы можете вписать в пользовательский файл настроек: <code>"color_scheme": "Packages/User/Monokai Soda.tmTheme"</code>, и не забудьте вписать в настройки шрифт <a href="/meslo/" title="Meslo">Meslo</a>.</p> <p>O философии настроек Саблайма: «Если у вас уже есть текстовый редактор, то зачем увеличивать энтропию и сложность проекта, создавая графический интерфейс, если настройки можно хранить в удобочитаемом формате и редактировать в самом редакторе?» Мне кажется, что Джон Скиннер думал именно так, когда проектировал свой редактор, и я с ним полностью согласен. Важно понимать, что есть дефолтные настройки и пользовательские (в меню <code>Preferences → Settings Default</code> и <code>Preferences → Settings User</code>): первые — это стандартные для редактора настройки с кучей поясняющих комментариев, которые сбрасываются обновлении, все свои настройки нужно хранить в пользовательских файлах. В самом начале я скопировал все стандартные настройки в пользовательский файл и попробовал каждую опцию, тем самым я понял на что способен мой редактор из коробки, и это важно, так как ты должен <em>знать свои инструменты</em>.</p> <p>Теперь я хочу рассказать о некоторых особеностях Package control. Это не только способ устанавливать плагины прямо из редактора, но ещё и большой их список, доступный на <a href="http://wbond.net/sublime_packages/community" title="Sublime Text Packages">сайте</a> <a href="http://wbond.net/" title="Will Bond">Уилла Бонда</a>. На этой странице вы всегда сможете найти нужный вам плагин, тему, сниппеты или подсветку нового языка через поле поиска.</p> <p>После того, как вы решили использовать Sublime Text обязательно просмотрите все плагины на рабочие для вас темы — скорее всего уже будет удобный инструмент для работы в вашей области. Также вы <strong>не пропустите ни одного нового плагина подписавшись на <a href="http://wbond.net/sublime_packages/community/rss" title="Newest Sublime Text Packages">RSS</a></strong> этой страницы. Ещё мало кто знает, но можно устанавливать даже те плагины, которых нет в общем канале, для этого есть опция <code>Package Control: Add Repository</code>: и вы сможете добавить GitHub или BitBucket репозиторий, после добавления, вы сможете установить существующий там плагин по стандартной схеме.</p> <h2 id="section-1">Дальнейшее знакомство</h2> <p>После этого небольшого ознакомления, я настоятельно рекомендую прочитать прошлогоднюю статью «<a href="http://net.tutsplus.com/tutorials/tools-and-tips/sublime-text-2-tips-and-tricks/" title="Sublime Text 2 Tips and Tricks (Updated)">Sublime Text 2 Трюки и заметки (Обновлено)</a>» и посмотреть видеокурс <strong>«<a href="https://tutsplus.com/course/improve-workflow-in-sublime-text-2/" title="Perfect Workflow in Sublime Text 2">Идеальный рабочий процесс в Sublime Text 2</a>»</strong> от Джеффри Уэя. Из этих двух источников вы подчерпнёте для себя очень много нового и полезного в Саблайме — в общем статья и как видеокурс не очень большие, поэтому найдите время посмотреть и то и другое.</p> <h2 id="section-2">Хоткеи</h2> <p>Изучите их и настройте под себя. Это сделает вашу жизнь легче.</p> <h2 id="section-3">Плагины</h2> <p>Это плагины, которые остались в использовании после просмотра всего, чем я пользовался ещё недавно.</p> <ul> <li><a href="http://wbond.net/sublime_packages/package_control" title="Sublime Package Control"><strong>Package Control</strong></a> (работает в 3 версии редактора).</li> <li><a href="https://github.com/buymeasoda/soda-theme" title="Dark and light custom UI themes for Sublime Text 2"><strong>Soda Theme</strong></a> (работает в 3 версии редактора) — качественная тема вместе с модифицированной цветовой схемой; существует в тёмной и светлой версии.</li> <li><a href="https://github.com/skuroda/Sublime-AdvancedNewFile" title="Advanced New File">Advanced New File</a> (работает в 3 версии редактора) — в два раза уменьшает проблему и время на создание новых файлов.</li> <li><a href="https://github.com/BoundInCode/AutoFileName" title="AutoFileName">Auto Filename</a> — позволит не вспоминать полные названия файлов, когда вы будете их подключать.</li> <li> <p><a href="https://github.com/SublimeLinter/SublimeLinter" title="Sublime Linter"><strong>Sublime Linter</strong></a> (работает в 3 версии редактора, отдельная ветка на гитхабе) — это <strong>мана небесная!</strong> </p> <blockquote> <p>— Пишешь стили и опечатался?<br /> — Ты сразу об этом узнаешь!<br /> — Используешь в стилях ID?<br /> — Ты сразу об этом узнаешь!<br /> — Применяешь устаревшую или небезопасную конструкцию в джаваскрипте?<br /> — Ты сразу об этом узнаешь!</p> </blockquote> <p>Инструмент c большим количеством настроек для CSS (JS поменьше), который в реальном времени проверяет код на опечатки, недочёты, ошибки и подсвечивает ошибку прямо в файле, попутно объясняя «почему» в статус-баре; вообще спасает много времени на дебаге. Для CSS требует nodejs.</p> </li> <li><a href="https://github.com/sergeche/emmet-sublime/" title="Emmet for Sublime Text 2"><strong>Emmet</strong></a> (работает в 3 версии редактора, <a href="http://emmet.io/blog/sublime-text-3/" title="Sublime Text 3 support">читайте пост в оффициальном блоге</a>) — приемник <em>Zen Coding</em>; в общем, если вы пишете HTML код руками, и не знаете обеих аббревиатур, то в прошлом вы потратили слишком много времени зря. Самое важное, это возможность раскрыть <code>.wrap&gt;.inner</code> в <code>&lt;div class="wrap"&gt; &lt;div class="inner"&gt;&lt;/div&gt;&lt;/div&gt;</code> или, допустим, обернуть список меню (• Главная, • О нас, • Цены, • Контакты) конструкцией <code>nav&gt;ul&gt;li*&gt;a[href="#"]</code>. Также важно, что в <code>emmet</code> появилась возможность менять числовые значения, как в Developer Tools, с помощью клавиш вверх и вниз в паре с дополнительными клавишами (<code>ctrl+↑|↓</code> — ±1, <code>alt+shift+↑|↓</code> — ±10, <code>alt+↑|↓</code> — ±0.1).</li> <li><a href="https://github.com/facelessuser/BracketHighlighter" title="Bracket and tag highlighter for Sublime Text 2">Bracket Highlighter</a> — подсвечивает теги и скобки; иногда помогает.</li> <li><a href="https://github.com/spadgos/sublime-jsdocs" title="Simplifies writing DocBlock comments in Javascript, PHP, CoffeeScript, Actionscript, C &amp; C++"><strong>DocBlockr</strong></a> (работает в 3 версии редактора) — Все любят документацию, но никто не любит её писать, для этого изобрели инлайлоновую документацию и этот плагин поможет вам писать её комфортно и быстро.</li> <li><a href="https://github.com/spape/SublimeFileDiffs" title="Shows diffs - also in an external diff tool - between the current file, or selection(s) in the current file, and clipboard, another file, or unsaved changes.">FileDiffs</a> — отличается от GitGutter тем, что позволяет видеть диффы любых файлов, а не только диффы между коммитами; да и появился он раньше, намного раньше GitGutter.</li> <li><a href="https://github.com/roadhump/GoldenRatio" title="Sublime Text 2 plugin to resize current group by golden ratio"><strong>GoldenRatio</strong></a> (работает в 3 версии редактора) — стандартное разбиение на две панели табов создаёт их равными друг другу, а на маленьких мониторах это решение не позволяет полноценно следить за обеми панелями. Этот плагин позволяет увеличивать активную панель при получении ею фокуса. Настройки такие: <code>{ "auto_resize": true, "golden_ratio": 1.618 }</code>.<br /> <a href="http://img171.imageshack.us/img171/9758/f77f8a97a18b4c09b06c05c.png" title="Sublime GoldenRation demonstration #1"><img src="http://img171.imageshack.us/img171/9758/f77f8a97a18b4c09b06c05c.png" alt="" title="Sublime GoldenRation demonstration #1" /></a><br /> <a href="http://img856.imageshack.us/img856/2333/03ed66dd17df4a3c9fe8462.png" title="Sublime GoldenRation demonstration #2"><img src="http://img856.imageshack.us/img856/2333/03ed66dd17df4a3c9fe8462.png" alt="" title="Sublime GoldenRation demonstration #2" /></a></li> <li><a href="https://github.com/ttscoff/MarkdownEditing" title="MarkdownEditing"><strong>MarkdownEditing</strong></a> при должных настройках хоткеев превращает Саблайм в полноценный Маркдаун редактор.</li> <li><a href="https://github.com/erinata/SublimeMarkdownBuild" title=" Sublime Text plugin for building markdown into html and view it in browser">MarkdownBuild</a> — компилирует по хоткею маркдаун в HTML и сразу показывает в браузере.</li> <li><a href="http://wbond.net/sublime_packages/prefixr" title="A Sublime Text 2 plugin to run CSS through the Prefixr API.">Prefixr</a> — ты пишешь <code>box-sizing: border-box;</code>, нажимаешь <code>alt+ctrl+x</code> и Prefixr добавляет все актуальные префиксы.</li> <li><a href="https://github.com/spadgos/sublime-ToggleQuotes" title="ST2 Plugin for toggling quote marks ">ToggleQuotes</a> — простейшая смена двойных кавычек на одинарные и в другую сторону.</li> <li><a href="https://github.com/SublimeText/WordCount" title="Real time Word Counter">WordCount</a> (работает в 3 версии редактора) показывает список слов, символов в статус-баре, удобно для написания и редактирования статей.</li> <li><a href="https://github.com/SublimeText/WordHighlight" title="Highlight all copies of the currently selected word">WordHighlight</a> (работает в 3 версии редактора) подсвечивает все копии выделенного слова, позволяет проверять не опечатался ли в названии переменной.</li> </ul> <p>В самое разное время, мне пригождались (но не сейчас) такие плагины как: <a href="https://github.com/alexstaubo/sublime_text_alternative_autocompletion" title="Adds TextMate-like autocompletion to Sublime Text 2">Alternative Autocompletion</a>, <a href="http://deansofer.com/projects/view/74/AngularJs_tmbundle" title="AngularJs.tmbundle">AngularJS</a>, <a href="https://github.com/erinata/SublimeBullet" title="Sublime Text plugin for markdown style Bullet points and Number lists">Bullet</a> (удалил после MarkdownEditing), <a href="http://csscomb.com/" title="The Greatest tool for sorting CSS properties in specific order">CSScomb</a> (мегакрутая вещь; жаль, что бесполезна для меня пока она на PHP), EncodingHelper (умер), <a href="https://github.com/rmaksim/Sublime-Text-2-Goto-CSS-Declaration" title="Goto CSS declaration in an open *.css file">Goto-CSS-Decalaration</a>, <a href="http://hayakubundle.com/" title="Hayaku - tools for writing CSS faster">Hayaku</a>, <a href="https://github.com/mrmartineau/HTML5" title="HTML5 bundle for Sublime Text 2">HTML5</a> сниппеты, <a href="https://github.com/agibsonsw/HTMLAttributes" title="HTML(5) attribute completions">HTMLAttributes</a>, <a href="https://github.com/rmaksim/Sublime-Text-2-Inc-Dec-Value" title="increase / decrease of numbers, dates, hex color values, etc.">Inc-Dec-Value</a>, IndentGuides (умер), <a href="https://github.com/SublimeText/jQuery" title="Sublime Text 2 package bundle for jQuery">jQuery</a> и <a href="https://github.com/aaronpowell/sublime-jquery-snippets" title="Code snippets for developing with jQuery">jQuery Snippets Pack</a>, <a href="http://net.tutsplus.com/articles/news/introducing-nettuts-fetch/" title="Automatically pull in the latest copy of a file">Nettuts+ Fetch</a>, <a href="https://github.com/SublimeText/Open-Include" title="Will open file paths found under the cursor with ALT+D">Open-Include</a>, <a href="https://github.com/jfromaniello/Sublime-Package-Decontrol" title="Like Sublime Package Control but without a central repository">Package DeControl</a>, <a href="https://github.com/titoBouzout/SideBarEnhancements" title="Enhancements to Sublime Text sidebar. Files and folders">SideBarEnhancements</a>, <a href="https://github.com/billymoon/Stylus" title="Stylus Package for Sublime Editor 2">Stylus</a>, <a href="https://github.com/Kronuz/SublimeCodeIntel" title="Full-featured code intelligence and smart autocomplete engine">SublimeCodeIntel</a>, <a href="https://github.com/SublimeText/Tag" title="Collection of packages about HTML/XML tags">Tag</a>, <a href="http://wbond.net/sublime_packages/tortoise" title="TortoiseSVN, TortoiseGit and TortoiseHg integration with Sublime Text 2 via menus and keyboard shortcuts">Tortoise</a>.</p> 2013-02-25T00:00:00-08:00 http://vstarkov.ru/windows-workspace <h1 id="windows">Рабочее окружение Windows</h1> <p>После необходимости настраивать рабочее пространство на новом рабочем месте, я решил законспектировать настройки окружения и десктопные иструменты для фронтенд разработчика.</p> <h2 id="section">Настройки окружения</h2> <ul> <li><a href="http://drp.su/ru/" title="программа для автоматической установки, обновления и поиска драйверов">ДрайверПак</a> установит все драйвера в автоматическом режиме и будет сам следить за их актуальным состоянием;</li> <li><a href="http://www.avast.com/" title="Avast">Аваст</a> — много раз выручавший меня бесплатный антивирус;</li> <li><a href="https://www.dropbox.com/" title="Dropbox">Дропбокс</a> — храните все наработки и файлы настроек в облаке и вы ещё не раз скажете самому себе огромное спасибо;</li> <li><a href="http://eyeleo.com/" title="handy PC application that regularly reminds you to take short breaks for your eyes">АйЛео</a> спасёт ваши глаза и тело от переутомления. Единственная достойная программа подобного назначения с приличным графическим и интерфейсным исполнением;</li> <li><a href="http://skillbrains.com/" title="The fastest way to do a customizable screenshot">ЛайтШот</a> поможет поделиться снимком экрана с колегами или читателями в твиттере;</li> <li><a href="http://ilyabirman.ru/projects/typography-layout/" title="Типографская раскладка Ильи Бирмана">Типографская раскладка Бирмана</a> позволит использовать правильные типографские символы: неразрывный пробел, длинное тире, правильные русские, британские и американские кавычки, знаки копирайта и градуса по цельсию. <em>Тут важно отметить</em>, что язык и раскладка это разные сущности в понимании Виндоус системы и после установки раскладки Бирмана, у вас будет <strong>два языка и по две раскладки в каждом</strong> — четыре возможных комбинации, и в половине из них не будет работать спец. символы, поэтому <strong>после установки типографской раскладки удалите стандартные раскладки</strong>, чтобы спец. символы работали всегда;</li> <li><a href="http://punto.yandex.ru/" title="Punto Switcher">ПунтоСвитчер</a> экономит много времени на переключении раскладки по капслоку.</li> </ul> <p>А также <a href="http://picasa.google.com/" title="Picasa">Picasa</a>, <a href="http://2gis.ru/" title="Бесплатный справочник организаций с картой города">2Gis</a>, <a href="http://www.skype.com/ru/" title="Skype">Skype</a>, <a href="http://www.7-zip.org/" title="file archiver with a high compression ratio">7-zip</a> и <a href="http://www.bittorrent.com/" title="BitTorrent">BitTorrent</a>.</p> <h2 id="section-1">Инструменты разработки</h2> <ul> <li><a href="https://github.com/andreberg/Meslo-Font" title="Meslo LG">Meslo</a> — <a href="/meslo/" title="Meslo">самый крутой моноширинный шрифт</a> для терминалов и редакторов;</li> <li><a href="https://www.google.com/intl/en/chrome/browser/" title="Chrome">Google Chrome</a> — простота, встроенные инструменты разработки и синхронизация настроек не оставляют мне выбора; для разработки лучше использовать <a href="https://www.google.com/intl/en/chrome/browser/index.html?extra=devchannel#eula" title="Chrome Dev">дев ветку</a>. На странице списка разных версий хорошо объяснено, <a href="http://www.chromium.org/getting-involved/dev-channel#TOC-How-do-I-choose-which-channel-to-use-" title="How do I choose which channel to use?">как работает</a> эта система;</li> <li><a href="https://www.vmware.com/products/player/" title="VMware Player">Vmware player</a> — оболочка для виртуальных машин для экспериментов с FreeBSD;</li> <li><a href="http://www.heidisql.com/" title="HeidiSQL is a lightweight, Windows based application for managing MySQL and Microsoft SQL databases.">HeidiSQL</a> — интерфейсная оболочка для доступа к базам данных, если знаний SQL стало нехватать для эффективной работы в обычном терминале;</li> <li><a href="http://www.netsarang.com/products/xsh_detail.html" title="Xshell 4">Xshell 4</a> — оболочка для ssh терминалов, чтобы пользоваться всеми виртуалками в разных табах, но в пределах одного окна;</li> <li><a href="http://sourceforge.net/projects/console/" title="Console is a Windows console window enhancement.">Console 2</a> — оболочка для локальных терминалов — cmd, git bash с поддержкой табов;</li> <li><a href="http://www.ghisler.com/" title="Total Commander">Total Commander</a> — самый удобный файловый менеджер; точно удобнее, чем одиночные окна обычного windows explorer; мои <a href="https://gist.github.com/matmuchrapna/5035926" title="Total commander configuration">настройки</a> коммандера;</li> <li><a href="http://www.sublimetext.com/" title="Sublime Text is a sophisticated text editor for code, markup and prose.">Sublime Text</a> — самый лучший редактор, который не отвлекает тебя от написания кода, а только, наоборот, помогает тебе писать его быстрее и эффективнее. Поменять в настройках шрифт на <em>meslo</em> и установить тему «<a href="https://github.com/buymeasoda/soda-theme" title="Dark and light custom UI themes for Sublime Text 2">Soda</a>», и будет красота:<br /> <a href="http://i.imgur.com/J7mitSR.png"><img src="http://i.imgur.com/J7mitSR.png" alt="sublime text + soda theme + meslo" /></a></li> <li><a href="http://git-scm.com/" title="git --everything-is-local">Git</a> — если вы разрабатываете что-либо и не используете гит, то вы <strong>делаете это неправильно</strong>;</li> <li><a href="http://nodejs.org/" title="nodejs">Node.js</a> — будь в тренде! На самом деле, очень полезная штуковина;</li> <li><a href="http://rubyinstaller.org/" title="Ruby">Ruby</a>, <a href="https://github.com/oneclick/rubyinstaller/wiki/Development-Kit" title="Ruby installer for windows">Ruby devkit</a>, <a href="https://rubygems.org/" title="Ruby gems">Rubygems</a>, <a href="http://jekyllrb.com/" title="Jekyll">Jekyll</a> — джекилл, наше всё!</li> </ul> <p>И интерфейсные оболочки для гит и свн: <a href="https://code.google.com/p/tortoisegit/" title="TortoiseGIT">TortoiseGit</a> и <a href="http://tortoisesvn.net/" title="TortoiseSVN">TortoiseSVN</a>.</p> <h2 id="section-2">Личные предпочтения</h2> <ul> <li>Сделать чёрным курсор;</li> <li>Поставить белые обои на рабочем столе;</li> <li>Настроить открытие папок и файлов по одному клику;</li> <li>Настроить терминалы на связку фоновый цвет <code>#555</code>, а шрифт <em>Meslo</em>:<br /> <a href="http://img855.imageshack.us/img855/3728/9931e1ef5e8445a58c08715.png"><img src="http://img855.imageshack.us/img855/3728/9931e1ef5e8445a58c08715.png" alt="xshell + #555 + meslo" /></a></li> <li>Настроить симлинки системных папок (документы, загрузки) на внутренние папки в дропбоксе;</li> <li>Настроить хром на папку дропбоксовую папку загрузок, чтобы при переключении между домашней и рабочей машиной ничего не терялось.</li> </ul> 2013-02-13T00:00:00-08:00 http://vstarkov.ru/markdown-basics <h1 id="markdown">Основы markdown</h1> <ol> <li><a href="#intro">Вступление</a></li> <li><a href="#headings">Заголовки</a></li> <li><a href="#text-formatting">Форматирование текста</a></li> <li><a href="#links-n-images">Вставка ссылок и картинок</a></li> <li><a href="#lists">Списки</a></li> <li><a href="#code">Форматирование кода</a></li> <li><a href="#cite">Цитаты</a></li> <li><a href="#html">Обычный HTML</a></li> </ol> <h2 id="intro"><a href="#intro"> Вступление </a></h2> <p>Маркдаун — самое удобное и интуитивно понятное для редактирования текста, что можно было встретить в интернете. Его используют СтекОверфлоу и Гитхаб, что уже означают повсеместность формата.</p> <p>Сам по себе, маркдаун это свод правил для форматирования текста и транслятор в HTML. На данный момент трансляторов существует великое множество, все они поддерживают оригинальный стандарт, но некоторые вносят в свои трансляторы дополнительные возможности.</p> <p>Например, <a href="http://kramdown.rubyforge.org/"><strong>Крамдаун</strong></a> (используемый в джекиле) создал синтаксис для <a href="http://kramdown.rubyforge.org/syntax.html#definition-lists">списка определений</a> <code>dl</code>; а <strong>ГФМ</strong> (<a href="https://help.github.com/articles/github-flavored-markdown">GitHub Flavored Markdown)</a> взял на себя больше и ввёл много крутых особенностей для создания более удобного сервиса.</p> <p><a href="http://daringfireball.net/">Джон Грубер</a> создал этот инструмент и самый больший интерес для нас представляют две страницы:</p> <ul> <li><a href="http://daringfireball.net/projects/markdown/basics">Основы маркдауна</a></li> <li><a href="http://daringfireball.net/projects/markdown/syntax">Синтаксис маркдауна</a></li> </ul> <hr /> <p><em>В этой статье, я постарался изложить своё видение на изучение основ маркдауна, и то как я его запомнил.</em></p> <p>Код из статьи (её <a href="https://raw.github.com/matmuchrapna-sites/vstarkov.ru/gh-pages/_posts/2013-02-13-markdown-basics.md"><strong>маркдаун-исходник</strong></a> лежит на гитхабе) можно тестировать в онлайн редакторах:</p> <ul> <li><a href="http://stackoverflow.com/">http://stackoverflow.com/</a> — очень удобный редактор с превью и хоткеями</li> <li><a href="http://gist.github.com/">http://gist.github.com/</a> — выбрать формат <code>markdown</code></li> <li><a href="http://markable.in/editor/">http://markable.in/editor/</a></li> </ul> <h2 id="headings"><a href="#headings"> Заголовки </a></h2> <p>Заголовки обособляются хешами (хеш справа для красоты)</p> <pre><code>## Заголовки ## </code></pre> <p>От количества хешей зависит уровень заголовка:</p> <pre><code># Заголовок первого уровня (&lt;h1/&gt;) # ## Заголовок второго уровня (&lt;h2/&gt;) ## ### Заголовок третьего уровня (&lt;h3/&gt;) ### </code></pre> <p><strong>Главный заголовок</strong> можно не выделять хешами, а подчеркнуть <em>двойной линией</em>:</p> <pre><code>Погружение в маркдаун ================================================================================ </code></pre> <p><strong>Второй по главности</strong> заголовок можно не выделять хешами, а подчеркнуть <em>простой линией</em>:</p> <pre><code>Заголовки -------------------------------------------------------------------------------- </code></pre> <h2 id="text-formatting"><a href="#text-formatting"> Форматирование текста </a></h2> <h3 id="section">Абзацы и переносы</h3> <p>Новый абзац в маркдауне определяется по наличию <em>пустой строки</em> перед блоком текста.<br /> Обычные одиночные переносы внутри маркдауна, допустим для поддержания длины строки в 80 символов ни на что не влияют.</p> <p>Для того, чтобы сделать перенос внутри строки, достаточно добавить два пробела перед переносом строки.</p> <p>Точки, это пробелы:<br /> <a href="http://img22.imageshack.us/img22/9095/126a9dad309c445e95405c7.png"><img src="http://img22.imageshack.us/img22/9095/126a9dad309c445e95405c7.png" alt="markdown text editing" /></a></p> <h3 id="section-1">Стилизация текста</h3> <ul> <li>*Жирный текст** — <code>**Жирный текст**</code></li> <li><em>Курсивный текст</em> — <code>*Курсивный текст*</code></li> <li><strong><em>Жирный курсивный текст</em></strong> — <code>***Жирный курсивный текст***</code></li> </ul> <h3 id="section-2">Горизонтальная линия</h3> <hr /> <p>Горизонтальная линия в маркдауне до смешного проста</p> <pre><code>-------------------------------------------------------------------------------- Горизонтальная линия в маркдауне до смешного проста </code></pre> <h2 id="links-n-images"><a href="#links-n-images"> Вставка ссылок и картинок </a></h2> <ul> <li><a href="http://placekitten.com/">Ссылка на котиков</a> — <code>[Ссылка на котиков](http://placekitten.com/)</code></li> <li><img src="http://placekitten.com/g/100/20" alt="Описание картинки с котиком" /> — <code></code></li> </ul> <p><strong>В большом тексте</strong> удобно вставлять ссылки <a href="http://placekitten.com/" title="Cat happens">сносками</a> как в книгах:</p> <hr /> <pre><code>**В большом тексте** удобно вставлять ссылки [сносками][1] как в книгах: ---- [1]: http://placekitten.com/ "Cat happens" </code></pre> <h2 id="lists"><a href="#lists"> Списки </a></h2> <h3 id="section-3">Обычный ненумерованный список</h3> <ul> <li>один</li> <li> <p>два</p> <pre><code> * один * два </code></pre> </li> </ul> <h3 id="section-4">Обычный нумерованный список</h3> <ol> <li>один</li> <li> <p>два</p> <pre><code> 1. один 2. два </code></pre> </li> </ol> <h2 id="code"><a href="#code"> Форматирование кода </a></h2> <h3 id="section-5">Блочное форматирование кода</h3> <p>Для блочного выделения кода достаточно сделать отступ в 4 пробела или один таб. Для такого представления:</p> <pre><code>&lt;ul class="nav"&gt; &lt;li&gt;&lt;a href="/atom.xml"&gt;RSS&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p>Нужно вставить в редактор такой код</p> <pre><code> &lt;ul class="nav"&gt; &lt;li&gt;&lt;a href="/atom.xml"&gt;RSS&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <h3 id="section-6">Строчное форматирование кода</h3> <p>Для строчного выделения <code>кода</code> достаточно обернуть в обратные кавычки:</p> <pre><code>Для строчного выделения `кода` достаточно обернуть в обратные кавычки: </code></pre> <h2 id="cite"><a href="#cite"> Цитаты </a></h2> <blockquote> <p>Мы не поможем людям, делая за них то, что они могли бы сделать сами.</p> </blockquote> <pre><code>&gt; Мы не поможем людям, делая за них то, что они могли бы сделать сами. </code></pre> <h2 id="html"><a href="#html"> Обычный HTML </a></h2> <p>Если что-то нельзя сделать в маркдауне, то используйте обычный HTML. Допустим так:</p> <pre><code>&lt;h2 id="books"&gt;&lt;a href="#books"&gt; Книги &lt;/a&gt;&lt;/h2&gt; </code></pre> 2013-02-11T00:00:00-08:00 http://vstarkov.ru/config-and-restart-of-nginx-and-apache <h1 id="apache--nginx">Настройки и перезагрузка серверов Apache и Nginx</h1> <p>Периодически появляется необходимость в настройке серверов окружения и тут ты понимаешь, что когда ты делаешь это хотя бы раз в месяц, то можешь вспомнить, а когда до этого работал над одним проектом несколько месяцев, то всегда приходится или спрашивать, или искать в гугле.</p> <p>Сегодня мне надоело и я решил сохранить это для себя. Команды терминала и пути актуальны для <em>FreeBSD 8.0</em>.</p> <pre><code>sudo ee /usr/local/etc/nginx/nginx.conf sudo apachectl restart sudo ee /usr/local/etc/apache/httpd.conf /usr/local/etc/rc.d/nginx restart </code></pre> 2013-02-07T00:00:00-08:00 http://vstarkov.ru/big-a11y-digest <h1 id="section">Доступность сайтов (большой сборник)</h1> <p>Я постараюсь выложить и структурировать в этом дайджесте достойные материалы по теме доступности сайтов, которые я собрал для своего <a href="http://www.easychirp.com/" title="Easy Chirp : web accessibility for the Twitter.com website application">доклада</a> на <a href="http://2013.uwdc.ru/">UWDC’13</a> и также как справочник для <em>дополнительного чтения</em>, так как обо всём сразу не удастся рассказать за полчаса, отведённые на доклад (<a href="http://matmuchrapna.github.com/a11y-2013/"><strong>презентация</strong></a> с доклада уже доступна в <a href="https://github.com/matmuchrapna/a11y-2013">репозитории</a> на гитхабе)</p> <p><em>Все материалы упорядочены по шести групам</em>: <a href="#books">книги</a>, <a href="#videos">видеозаписи</a>, <a href="#presentations">презентации</a>, <a href="#articles">статьи</a>, <a href="#blogs">блоги</a>, <a href="#twitters">твиттер-аккаунты</a>. Все материалы на английском языке, поэтом я перевёл названия на русский.</p> <p><em>Вне любой из категорий:</em></p> <ul> <li><a href="http://www.w3.org/Translations/WCAG20-ru/"><strong>WCAG 2.0</strong> на русском</a> — руководство по обеспечению доступности веб-контента на <em>русском языке</em></li> <li><a href="http://www.easychirp.com/" title="Easy Chirp : web accessibility for the Twitter.com website application">Easy Chirp</a> — живое и рабочее приложения для доступа к твиттеру.</li> </ul> <hr /> <h2 id="books"><a href="#books"> Книги </a></h2> <ul> <li><a href="http://diveintoaccessibility.info/">Погружение в доступность</a> — книга Марка Пилгрима отвечает на два вопроса, как и зачем; состоит из вступления и тридцати дней, освещённых со стороны пяти людей со определёнными ограничениями, пользующимися интернетом. Несмотря на небольшое устаревание некоторого количества информации, остаётся одной из самой полезных книг по доступности.</li> <li><a href="http://siteimprove.com/files/how-to-ensure-website-accessibility.pdf">Как обеспечить доступность сайта</a> — достаточно годная 17 страничная книга покрывает основные аспекты.</li> </ul> <h2 id="videos"><a href="#videos"> Видеозаписи </a></h2> <ul> <li><a href="http://vimeo.com/18903451">19% активных интернет-пользователей из-за которых вы будете гореть в аду</a> — видеозапись презентации <a href="http://twitter.com/darkboutique">Артёма Геллера</a>. Прошло два с половиной года, но не в этом дело, так как теория остаётся всё той же.</li> <li><a href="http://www.wimp.com/newdevice/">Инвалидные коляски уступают место новому устройству </a> — окунитесь в атмосферу заботы о людях.</li> <li><a href="http://youtu.be/GmnHY6vNeQM">Accessibility @ Mozilla: Intro</a> — свежее видео с ютуб-канала файрфокса, передающее отношение к доступности среди разработчиков браузера.</li> <li><a href="http://www.youtube.com/user/TommyEdisonXP?feature=watch">Опыт Томми Эдисона</a> — канал от рождения слепого Тома, в котором он рассказывает про свою жизнь, особенно стоит выделить два видео: <a href="http://youtu.be/59YN8_lg6-U">«Рассказывая про цвета слепому человеку»</a> и <a href="http://youtu.be/4uk8pwEHMBE">«Бред, который говорят слепым»</a></li> </ul> <h2 id="presentations"><a href="#presentations"> Презентации </a></h2> <p>В этот раздел я включил полезные, интересные или из разряда <em>«всегда хотели знать, но боялись спросить»</em> презентации. Все они опубликованы на сервисе <a href="http://www.slideshare.net/">слайдшэйр</a>, поэтому помните о возможности посмотреть все презентации понравившегося вам автора, впрочем об этом я позаботился сам и привёл ссылки на тех авторов, у кого есть ещё что-нибудь интересное.</p> <ul> <li><a href="http://www.slideshare.net/cheilmann/mike-davies-ajax-and-accessibility">Аякс и доступность</a> — поверхностная презентация от <a href="http://www.slideshare.net/cheilmann">Кристиана Хейлмана</a>, вводящая в курс дела.</li> <li><a href="http://www.slideshare.net/parisweb/making-chaos-accessible-aaron-leventhal-paris-web-2008">Сделать хаос более доступным</a> от Аарона Левентэ — короткая презентация, дающая представление о основных ограничениях людей (с интересными примерами) и подготавливающая к использования ARIA аттрибутов.</li> <li><a href="http://www.slideshare.net/jared_w_smith/web-accessibility-gone-wild-now-even-more-wilder">Доступность сайтов сошла с ума (теперь ещё больше!)</a> — превосходная презентация от <a href="http://www.slideshare.net/jared_w_smith">Джареда Смита</a> сотрудника <a href="http://webaim.org/">WebAim</a>, в которой он рассказывает про невозможность существования идеального доступного сайта, так как требования и стандарты постоянно меняются и также знакомит с распространёнными заблуждения о доступности.</li> <li><a href="http://www.slideshare.net/jared_w_smith/accessibility-compatibility">Доступность и Совместимость</a> (с людьми) — ещё одна презентация от Джареда, более полно раскрывающая подход к работе над улучшением доступности сайтов.</li> <li><a href="http://www.slideshare.net/jared_w_smith/the-legend-of-the-typical-screen-reader-user-2485093">История типичного пользователя программ для чтения с экрана</a> — Джаред снова рассказывает про доступность, но уже в свете «экранных читалок», на основе опроса в WebAim.</li> <li><a href="http://www.slideshare.net/ivogomes/htmlcss-tips-to-improve-the-accessibility-of-your-websites">HTML и CSS советы для улучшения доступности ваших сайтов</a> — щепотка мифов и много конкретных советов от Иво Гомеса.</li> <li><a href="http://www.slideshare.net/webaxe/how-to-build-an-accessible-web-application">Как создать доступное веб приложение</a> — <a href="http://www.slideshare.net/webaxe">аккаунт</a> <a href="http://www.webaxe.org/">Web Axe</a> подробно и с примерами рассказывает историю создания «Easy Chirp», о котором я говорил в самом начале.</li> <li><a href="http://www.slideshare.net/7mary4/yahoo-hack-university-accessiblie-innovations-and-challenges">Yahoo! Hack University: Инновации и соревнования в доступности</a> — хорошая обзорная презентация от разработчика из Яху <a href="http://www.slideshare.net/7mary4">Теда Дрейка</a>.</li> <li><a href="http://www.slideshare.net/7mary4/html-5-accessibility-9077059">Доступность HTML 5</a> — небольшая презентация Теда, освещающая аспекты доступности в современном стандарте HTML.</li> <li><a href="http://www.slideshare.net/7mary4/common-accessibility-mistakes">Распространённые ошибки доступности</a> — и снова Дрейк расскажет вам, что вы делаете неправильно, почему и как нужно делать на самом деле.</li> <li><a href="http://www.slideshare.net/n8moon/the-yahoo-social-accessibility-lab">Лаборатория доступности Яху</a> — Нэйт Эбрагимун рассказывает про опыт яху в создании и развитии корпоративной группы, направленной на улучшение доступности собственных сервисов.</li> </ul> <p>Второй блок презентаций рассматривает более подробно тему ARIA аттрибутов.</p> <ul> <li><a href="http://www.slideshare.net/maxdesign/a-quick-introduction-to-aria">Быстрое знакомство с WAI-ARIA</a> от <a href="http://www.slideshare.net/maxdesign">Русса Викли</a>.</li> <li><a href="http://www.slideshare.net/iwmw/an-introduction-to-waiaria">Знакомство с WAI-ARIA</a> — более размеренное введение в аттрибуты доступности.</li> <li><a href="http://www.slideshare.net/Shuckle/wai-aria-an-intro">WAI-ARIA - Вступление</a> — не менее полезное, чем предыдущие два, введение в ARIA аттрибуты с отличными примерами.</li> <li><a href="http://www.slideshare.net/AccessiQ/dynamic-and-accessible-web-content-with-waiaria-15509603">Динамическое и доступное содержимое сайта с помощью WAI-ARIA</a> небольшое руководство по внедрению ARIA аттрибутов с конкретными примерами.</li> <li><a href="http://www.slideshare.net/AaronGustafson/progressive-enhancement-with-aria-5099559">Прогрессивное улучшение с ARIA</a> — <strong>огромная и потрясающая</strong> презентация <a href="http://www.slideshare.net/AaronGustafson">Аарона Густафсона</a>; «Мы можем и должны создавать более качественные сайты» — цитата из этой вдохновляющей презентации.</li> <li><a href="http://www.slideshare.net/rajeshlal/accessible-design-how-interactive-design-conference-washington-dc-sept-2729-2012">Доступный дизайн</a> — презентация разработчика из Нокии <a href="http://www.slideshare.net/rajeshlal">Раджа Лалы</a>; Радж раскрывает ещё несколько значений доступности и рассказывает про принципы дизайна, о которых должен помнить дизайнер, чтобы все были счастливы.</li> <li><a href="http://www.slideshare.net/toddkloots/aria-widgets">WAI-ARIA виджеты</a> — <a href="http://www.slideshare.net/toddkloots">Тодд Клутт</a> рассказывает, как вылечить HTML4 до HTML5 с помощью <strike>подорожника</strike> ARIA аттрибутов</li> </ul> <h2 id="articles"><a href="#articles"> Статьи </a></h2> <p>В этом блоке я привожу ссылки на статьи, которые по разным причинам заслуживают внимание.</p> <ul> <li><a href="http://alistapart.com/blog/post/on-alt-text">Аттрибут <code>alt</code></a> — свежайшая статья от Эрика Зельдмана про аттрибут <code>alt</code> у изображений и как правильно его использовать.</li> <li><a href="http://www.nczonline.net/blog/2013/01/29/you-cant-create-a-button/">Ты не можешь сделать кнопку</a> — неплохая ретроспектива подходов к доступности контента.</li> <li><a href="http://css-tricks.com/navigation-in-lists-to-be-or-not-to-be/">Быть или не быть навигации в <code>ul</code></a> — подробный холивар в блоге у Криса Койера.</li> <li><a href="http://laurakalbag.com/labels-in-input-fields-arent-such-a-good-idea/">Названия полей в полях ввода — не лучшая идея</a> — годный пример подтверждения <a href="https://twitter.com/KuraFire/status/203556978075774976/photo/1">правила</a> Фарука Атеса.</li> <li><a href="http://siteimprove.com/blog/2012/12/11/web-developers-create-an-accessible-website.aspx">Веб разработчики: создать доступный сайт</a> — чеклист того, о чём следует помнить разрабатывая «сайт для широкого круга пользователей, а не только для людей пользующихся сайтом, так же как и вы.»</li> <li><a href="http://www.webhostingsearch.com/articles/25-ways-to-make-your-site-more-accessible.php">25 способов сделать ваш сайт более доступным</a> — статья от создателя доступного клиента твиттера Денниса Лембри — хороший список конкретных руководств к действию.</li> <li><a href="http://www.paciellogroup.com/blog/2012/06/html5-accessibility-chops-using-aria-notes/">Замечания по использованию ARIA вместе с HTML5</a> — статья объясняет, когда нужно использовать ARIA аттрибут, а когда можно нативный HTML тег из пятой редакции языка.</li> <li><a href="http://www.marcozehe.de/2011/12/08/social-networks-and-accessibility-a-rather-sad-picture/">Доступность социальных сетей — нерадостная картина</a> — эту статью стоит прочитать, чтобы составить общее впечатление о том, как слепые пользуются социальными сетями, что не так с ними и окунуться в эту атмосферу; автору можно доверять — Марко Зиэ с рождения слеп и пользуется экранными читалками с 1991 года, когда у него появился его первый компьютер, на данный момент он работает инженером по контролю качества в корпорации Мозилла.</li> <li><a href="http://yaccessibilityblog.com/library/easy-fixes-to-common-accessibility-problems.html">Простые решения частых проблем доступности</a> — девять проблем и их решения с букмарклетами для самостоятельной проверки.</li> <li><a href="http://stackoverflow.com/questions/12279113/recommended-wai-aria-implementation-for-navigation-bar-menu">Рекомендуемая WAI-ARIA реализация для меню</a> — Вопрос с кучей отсылок и подробнейший ответ на стековерфлоу.</li> <li><a href="http://www.prostomac.com/2011/08/internet-dlya-nezryachix-i-nemnogo-pro-apple/">Интернет для незрячих. И немного про Apple</a> — получасовой эпизод подкаста с <a href="http://iblind.ru/">Сергеем Усольцевым</a> раскрывает тему голосовых функций на компьютерах и мобильных устройствах Apple — мне было очень интересно послушать живой опыт человека.</li> </ul> <h2 id="blogs"><a href="#blogs"> Блоги </a></h2> <ul> <li><a href="http://a11yproject.com/">The Accessibility Project</a> — совсем недавний проект созданный как открытая прощадка для улучшение интернета в сфере доступности. Обратите (sic!) внимание на опубликованный <a href="http://a11yproject.com/resources.html"><strong>список ресурсов</strong></a>.</li> <li><a href="http://yaccessibilityblog.com/">Yachoo! Accessibility</a> сайт команды специалистов из Яху.</li> <li><a href="http://www.webaxe.org/">WebAxe</a> — блог и подкаст про доступность сайтов.</li> <li><a href="http://www.marcozehe.de/">Marcozehe.de</a> — блог Марко Зиэ.</li> <li><a href="http://www.tiflocomp.ru/">Тифлокомп.ру</a> — русский сайт про технологии для незрячих и слабовидящих.</li> </ul> <h2 id="twitters"><a href="#twitters"> Твиттер </a></h2> <p>Твиттере-аккаунты живых людей или команд, специализирующихся на доступности.</p> <ul> <li><a href="http://twitter.com/MarcoInEnglish">@MarcoInEnglish</a> — Марко Зиэ</li> <li><a href="http://twitter.com/darkboutique">@darkboutique</a> — Артём Геллер</li> <li><a href="http://twitter.com/jared_w_smith">@jared_w_smith</a> — Джаред Смит</li> <li><a href="http://twitter.com/ted_drake">@ted_drake</a> — Тед Дрейк</li> <li><a href="http://twitter.com/AaronGustafson">@AaronGustafson</a> — Аарон Густафсон</li> <li><a href="http://twitter.com/dennisl">@dennisl</a> — Деннис Лембри</li> <li><a href="http://twitter.com/iRajLal">@iRajLal</a> — Радж Лал</li> <li><a href="http://twitter.com/todd">@todd</a> — Тод Клутс</li> <li><a href="http://twitter.com/PayPalInclusive">@PayPalInclusive</a> — PayPal Accessibility</li> <li><a href="http://twitter.com/yahooaccess">@yahooaccess</a> — Yahoo! Accessibility</li> <li><a href="http://twitter.com/EasyChirp">@EasyChirp</a> — Easy Chirp</li> <li><a href="http://twitter.com/webaxe">@webaxe</a> — WebAxe</li> <li><a href="http://twitter.com/AccessiQ">@AccessiQ</a> — Access iQ</li> </ul> 2013-02-05T00:00:00-08:00 http://vstarkov.ru/how-to-find-n-replace-in-big-sql-dump <h1 id="sql-">Как сделать замену строк в большом SQL дампе?</h1> <p><small>Заметка из разряда, чтобы не забыть.</small></p> <hr /> <p>Возникла необходимость поменять вывод заголовков со второго уровня на третий на сайте с большим количеством статей. Дамп занимает больше гигабайта, ни один из редакторов не смог открыть такой большой файл (vim, emacs не пробовал, да). Поэтому пришлось идти в обычный юниксовый терминал и работать в нём; небольшой поиск на подходящую утилиту привёл к релевантному <a href="http://stackoverflow.com/q/4924710/1057730">ответу</a> на стековерфлоу. так и начнём</p> <p>Создаём дамп:</p> <pre><code>mysqldump -uUSER -pPSWD database &gt; db.sql </code></pre> <p>Заменяем открывающие теги и повторяем с закрывающими:</p> <pre><code>find ./db.sql | xargs sed -i -e s/&lt;h2&gt;/&lt;h3&gt;/g find ./db.sql | xargs sed -i -e s/'&lt;\/h2&gt;'/'&lt;\/h3&gt;'/g </code></pre> <p>Заливаем отредактированный дамп базы обратно:</p> <pre><code>mysql -uUSER -pPSWD database &lt; db.sql </code></pre> <p>Все счастливы.</p> <p><strong>Update:</strong> для работы с гзипованным дампом используйте <code>gunzip</code>:</p> <pre><code>gunzip &lt; db.sql.gz | mysql -uUSER -pPSWD database </code></pre> 2013-01-31T00:00:00-08:00 http://vstarkov.ru/required-books-in-library <h1 id="section">Необходимые книги в библиотеке фронтенд разработчика</h1> <p>Недавно я задался вопросом создания собственной библиотеки в нашей компании. Проблемы возникли только на этапе поиска литературы, но с ними я справился, и получившийся список литературы решил опубликовать. Так как список задумывался как сугубо практический для покупки каждого пункта в библиотеку, то цены и ссылки я оставил.</p> <p>Список разделён на четыре секции — HTML, СSS, JavaScript и дизайн. В каждой секции я постарался немного объяснить выбор книг и отсортировать книги по степени важности.</p> <h2 id="html">HTML</h2> <ul> <li><a href="http://www.ozon.ru/context/detail/id/7622650/">Изучаем HTML5. Библиотека специалиста (Реми Шарп, Библиотека специалиста)</a></li> <li><a href="http://www.ozon.ru/context/detail/id/17513568/">HTML5. Рецепты программирования (O&#8217;Reilly)</a></li> <li><a href="http://www.ozon.ru/context/detail/id/19431055/">HTML5 для веб-дизайнеров (A Book Apart)</a></li> </ul> <p>Первая книга мною была незамечена, но рекомендована <a href="http://pepelsbey.net/">Вадимом Макеевым</a>. Её написал <a href="http://remysharp.com/">Реми Шарп</a>, рано или поздно вы всё были на его сайте. Остальные книги в этой категории были выбраны по издательству и после просмотра оглавления были утверждены.<br /> Общая цена: <a href="https://duckduckgo.com/?q=363+%2B+310+%2B+612%3D">363 + 310 + 612 = 1 285 рублей</a>.</p> <h2 id="css">CSS</h2> <ul> <li><a href="http://www.ozon.ru/context/detail/id/3881079/">CSS-каскадные таблицы стилей. Подробное руководство (Эрик Мейер)</a></li> <li><a href="http://chitai-gorod.ru/catalog/book/327333/">CSS ручной работы (Библиотека специалиста)</a></li> <li><a href="http://www.ozon.ru/context/detail/id/7449521/">Сила CSS3. Освой новейший стандарт веб-разработок! (Библиотека специалиста)</a></li> <li><a href="http://www.ozon.ru/context/detail/id/8747299/">Отзывчивый веб-дизайн (A Book Apart)</a></li> <li><a href="http://www.ozon.ru/context/detail/id/19431033/">CSS3 для веб-дизайнеров (A Book Apart)</a></li> <li><a href="http://www.ozon.ru/context/detail/id/15708347/">Сначала мобильные! (A Book Apart)</a></li> </ul> <p>Хочу заметить, что первая книга от <a href="http://meyerweb.com/">Эрика Мейера</a> — создателя reset.css и бесспорный авторитета в мире CSS. Ещё кажутся полезными книги от издательства «A Book Apart».<br /> Общая цена: <a href="https://duckduckgo.com/?q=1159+%2B+419+%2B+354+%2B+610+%2B+648+%2B+612+%3D">1159 + 419 + 354 + 610 + 648 + 612 = 3 802 рублей</a>.</p> <h2 id="javascript">JavaScript</h2> <ul> <li><a href="http://www.ozon.ru/context/detail/id/19677670/">JavaScript. Подробное руководство (O&#8217;Reilly)</a></li> <li><a href="http://www.ozon.ru/context/detail/id/6287517/">JavaScript. Шаблоны (O&#8217;Reilly)</a></li> <li><a href="http://www.ozon.ru/context/detail/id/8798187/">Веб-приложения на JavaScript (O&#8217;Reilly)</a></li> <li><a href="http://www.ozon.ru/context/detail/id/8144634/">JavaScript: сильные стороны (O&#8217;Reilly)</a></li> </ul> <p>Первый манускрипт от отменного автора — <a href="http://www.davidflanagan.com/">Дэвида Флэнагана</a>, остальные книги от O&#8217;Reilly тоже должны быть полезны.<br /> Общая цена: <a href="https://duckduckgo.com/?q=1823+%2B+315+%2B+290+%3D">1823 + 624 + 315 + 290 = 3 052</a>.</p> <h3 id="jquery">jQuery</h3> <ul> <li><a href="http://www.ozon.ru/context/detail/id/6277333/">jQuery. Подробное руководство по продвинутому JavaScript (Иеуда Кац)</a></li> </ul> <p>Что можно добавить к книге про инструмент <a href="http://jquery.org/team/">созданный</a> <a href="http://yehudakatz.com/">автором</a> этого инструмента? — ничего. Эта книга обязательно к прочтению.</p> <h2 id="section-1">Дизайн</h2> <ul> <li><a href="http://www.ozon.ru/context/detail/id/19636870/">Дизайн – это работа (A Book Apart)</a></li> <li><a href="http://www.ozon.ru/context/detail/id/8747236/">Эмоциональный веб-дизайн (A Book Apart)</a></li> <li><a href="http://www.ozon.ru/context/detail/id/16905899/">Умный дизайн. Простые приемы разработки пользовательских интерфейсов (Библиотека специалиста)</a></li> </ul> <p>В секции дизайна я доверился издательству «A Book Apart», серии «Библиотека специалиста» и живым отзывам с <a href="http://happydev.ru/">«HappyDev»</a>.<br /> Общая цена: <a href="https://duckduckgo.com/?q=590+%2B+648+%2B+331+%3D">590 + 648 + 331 = 1 569</a>.</p> <hr /> <p>Побочным эффектом, составления списка стало открытие, что библиотека это недешево совсем — шутка ли, общая цена всех книг <a href="https://duckduckgo.com/?q=1285+%2B+3802+%2B+3052+%2B+1041+%2B+1569">10 749</a> рублей, что немало, и это только немногие хорошие книги.</p> <p><strong>PS.</strong> Чуть не забыл, я же хотел предложить вам самим повыбирать книги на озоне; моими фаворитами были издательство «Манн, Иванов и Фербер» выпустившими русские версии книг серии «<a href="http://www.ozon.ru/context/detail/id/19431034/">A Book Apart</a>» и русские переводы издательства «<a href="http://www.ozon.ru/context/detail/id/3878486/">O’Reilly</a>».</p> 2012-12-25T00:00:00-08:00 http://vstarkov.ru/useless-social <h1 id="section">Почему я деактивировал аккаунты в двух социальных сетях</h1> <p>Я деактивировал учётные записи в двух сетях.<br /> Это были <a href="http://facebook.com/">Фейсбук</a> и <a href="http://vk.com/">ВКонтакте</a></p> <p>Почему?</p> <p>Потому, что я вообще не использовал Фейсбук в последние полгода.<br /> А что насчёт Вконтакте? У меня иногда появлялись проблемы со свободным временем — я полностью тратил его на просмотр мириадов псевдосмешных картинок. Это было болезненно для меня: прокрастинировать вместо какого-либо полезного действия.</p> <p>Я удалился из основных социальных сетей, чтобы сохранить своё время для создания интересных вещей в интернете и чтобы следовать моей любимой цитате:</p> <blockquote> <p>Have less. Do more. Be more.</p> </blockquote> <p>В моём понимании, эта фраза переводится как: «Избавляйся от вещей. Делай больше. Развивайся».</p> <p>Тем временем, без аккаунтов в крупнейших социальных сетях, я по прежнему на связи с моими друзьями через твиттер, почту и старый добрый телефон.</p> 2012-11-14T00:00:00-08:00 http://vstarkov.ru/stackoverflow-css <h1 id="css---stackoverflow">Мои интересные #CSS ответы на Stackoverflow</h1> <hr /> <h2 id="csshttpstackoverflowcoma108818071057730"><a href="http://stackoverflow.com/a/10881807/1057730">Как сделать блок в виде трапеции с помощью CSS?</a></h2> <p><img src="http://img135.imageshack.us/img135/9683/eedea21cb3bc438fb33c80c.png" alt="css trapezium" /><br /> <a href="http://dabblet.com/gist/2868194" data-toggle="modal" data-target="#iframe-modal">Посмотреть демо</a></p> <p>Очень простой пример, два псевдо-элемента наклонённые с помощью <code>transform: skew(25deg)</code>; в другую сторону псевдо-элемент наклоняется отрицательным углом <code>skew(-25deg)</code>.</p> <hr /> <h2 id="textarea-----httpstackoverflowcoma109437211057730"><a href="http://stackoverflow.com/a/10943721/1057730">Как заставить <code>textarea</code> растянуться на всю ширину ячейки?</a></h2> <p><a href="http://dabblet.com/gist/2893830" data-toggle="modal" data-target="#iframe-modal">Посмотреть демо</a></p> <p>Так как <code>box-model</code> у всех элементов формы не стандартные, то они имеют ограниченную ширину. Но если назначить <code>width: 100%;</code>, то внутренние отступы созданные для человечности, растянут <code>textarea</code> шире чем ячейка, поэтому приходится назначать <code>box-sizing: border-box</code></p> <hr /> <h2 id="httpstackoverflowcoma107520401057730"><a href="http://stackoverflow.com/a/10752040/1057730">Как пропорционально уменьшить картинку в процентном отношении от собственных размеров картинки а не от размеров родителя?</a></h2> <p><a href="http://jsfiddle.net/matmuchrapna/JH4B2/2/embedded/result/" data-toggle="modal" data-target="#iframe-modal">Посмотреть демо</a></p> <p>— Первый способ банален: <code>scale: .5</code></p> <p><a href="http://jsfiddle.net/matmuchrapna/dhcDx/23/embedded/result/" data-toggle="modal" data-target="#iframe-modal">Посмотреть демо</a></p> <p>Второй способ более изобретателен. </p> <pre><code>#wrap { overflow: hidden; /* заставляет контейнер, принять размеры оригинальной картинки */ } #wrap img.fake { /* Прячем оригинальную картинку, но без `display: none;` */ float: left; visibility: hidden; width: auto; } #img_wrap img.normal { width: 50%; // так как контейнер, принял размеры оригинальной картинки, то width: 50%, создаст размеры этой картинки, относительно оригинальной } </code></pre> <hr /> <h2 id="httpstackoverflowcoma107286811057730"><a href="http://stackoverflow.com/a/10728681/1057730">Как сделать резиновую кнопку с острым углом с внутреней и внешней тенью</a></h2> <p><img src="http://img832.imageshack.us/img832/8258/664d7b5656434db68cbee8b.png" alt="css button" /><br /> <a href="http://dabblet.com/gist/2777220" data-toggle="modal" data-target="#iframe-modal">Посмотреть демо</a></p> <p><img src="http://i.stack.imgur.com/Huy3r.png" alt="css button flex" /><br /> <a href="http://dabblet.com/gist/2782854" data-toggle="modal" data-target="#iframe-modal">Посмотреть демо резиновой кнопки</a></p> <p>Кнопка делается в шесть шагов:</p> <ol> <li>Создайте элемент &#8216;.triangle&#8217; - он будет обёрткой для настоящего треугольника</li> <li>Назначьте этому элменту <code>position: absolute;</code>, Зафиксируйте <code>width</code> и <code>height</code>:<br /> Красный цвет, только для демонстрации ![step 4][5]</li> <li>Создайте большой квадратый элемент &#8216;.triangle::before&#8217; — он станет настоящим треугольником после 6 шага</li> <li>Поверните .triangle::before&#8217; на 45 градусов (<code>transform: rotate(45deg)</code>).</li> <li>Добавьте внутренних теней.<br /> Результат уже похож, на то, что нам нужно.<br /> ![step3][6]</li> <li>Добавьте <code>overflow: hidden;</code> к обёртке треугольника <strong><em>Та-дам!</em></strong><br /> ![step 5][7]</li> </ol> <p>На внутреннем треугольнике <code>.tag_inner</code> повторяется тот же трюк, но <code>box-shadow</code> должна уже быть обычной.</p> <hr /> <h2 id="httpstackoverflowcoma108794391057730"><a href="http://stackoverflow.com/a/10879439/1057730">Как сделать блок прозрачным, без создания того же эффекта для вложенных элементов?</a></h2> <p><img src="http://i.stack.imgur.com/9luI6.png" alt="css rgba" /><br /> <a href="http://dabblet.com/gist/2867543" data-toggle="modal" data-target="#iframe-modal">Посмотреть демо</a></p> <p>Так как <code>opacity: .2</code> назначать было нельзя, так как не нужен был эффект на вложенных элементах. Также не получается использовать <code>background: rgba(0, 0, 0, .5)</code> для полупрозрачного цвета в качестве фона, так как вопрошающий спрашивает о фоновой картинке. Единственное, что остаётся так это, использовать абсолютно спозицинированный псевдо-элемент с <code>opacity: 0.2</code> и нужно фоновой картинкой.</p> <hr /> <h2 id="font-sizehttpstackoverflowcoma110108161057730"><a href="http://stackoverflow.com/a/11010816/1057730">Как изменить высоту букв не меняя <code>font-size</code>?</a></h2> <p><img src="http://i.stack.imgur.com/CzPN0.png" alt="css scale without font-size" /><br /> <a href="http://dabblet.com/gist/2922712" data-toggle="modal" data-target="#iframe-modal">Посмотреть демо</a></p> <p>Несмотря на всю абсурдность вопроса и мнимую невыполнимость. Решается задача с помощью простеёших <code>scaleY(0.9)</code>.</p> <hr /> <h2 id="httpstackoverflowcoma110128431057730-2httpstackoverflowcoma105618121057730-3httpstackoverflowcoma110100151057730">Как менять размера текста в зависимости от разрешения? <a href="http://stackoverflow.com/a/11012843/1057730"><strong>1</strong></a>, <a href="http://stackoverflow.com/a/10561812/1057730"><strong>2</strong></a>, <a href="http://stackoverflow.com/a/11010015/1057730"><strong>3</strong></a></h2> <p><a href="http://jsfiddle.net/matmuchrapna/2tQ5T/1/embedded/result/" data-toggle="modal" data-target="#iframe-modal">Посмотреть демо</a></p> <p>В этом вопросе, есть все предпоссылки к адаптивной типографике.</p> <pre><code>html { font-size: 62.5%; } body { font-size: 1em;} @media (max-width: 300px) { html { font-size: 70%; } } @media (min-width: 500px) { html { font-size: 80%; } } @media (min-width: 700px) { html { font-size: 120%; } } @media (min-width: 1200px) { html { font-size: 200%; } } </code></pre> <p>Весь трюк в относительных единицах измерения размера текста — <code>em</code>. Но конструкция из вложенных элементов, создаёт очень сложную ситуацию для поддержки этого типографского решения, ввиду того, что размеры текста задаются относительно родительского элемента — и в конце концов, у каждого разработчика появляются ужасные дроби в стилях. Спустя какое-то время я узнал про <a href="http://snook.ca/archives/html_and_css/font-size-with-rem">способ</a> задания <code>font-size</code> через <code>rem</code> — тоже относительные, но относительно корневого значения <code>font-size</code>. То есть примерно так:</p> <pre><code>html { font-size: 62.5%; } body { font-size: 1em;} .lead { font-size: 14px; // фоллбек для IE8- font-size: 1.4rem; } </code></pre> <hr /> <h2 id="httpstackoverflowcoma116682501057730"><a href="http://stackoverflow.com/a/11668250/1057730">Смена цвета меню по диагонали</a></h2> <p><img src="http://i.stack.imgur.com/taSvG.png" alt="css diagonal inverse gradient" /><br /> <img src="http://i.stack.imgur.com/MqL6V.png" alt="css diagonal inverse gradient" /><br /> <a href="http://dabblet.com/gist/3181530" data-toggle="modal" data-target="#iframe-modal">Посмотреть демо</a></p> <p>Главный трюк этого ответа заключается в строчках:</p> <pre><code>-webkit-background-clip: text; -webkit-text-fill-color: transparent; </code></pre> <p>Они позволяют контейнеру передать свой фон тексту внутри него и ограничить этот фон областью текста.</p> <p>После осознания приёма, становится всё очень просто.</p> <ul> <li>Делаем области страницы и меню одинаковыми по площади</li> <li>Создаём наклонный градиент для фона, и повторяем его инвертированную копию для меню.</li> <li>Та-дам!</li> </ul> <hr /> <h2 id="css-httpstackoverflowcoma115753671057730"><a href="http://stackoverflow.com/a/11575367/1057730">Чем лучше сортировать свой CSS код?</a></h2> <p><img src="http://i.imgur.com/3uA59.png" alt="CSScomb" /></p> <p>Дань признательности и уважения <a href="https://twitter.com/miripiruni">Славе Олиянчуку</a> за его инструмент <a href="http://csscomb.ru/">CSScomb</a>.</p> <hr /> <h2 id="httpstackoverflowcoma106250511057730"><a href="http://stackoverflow.com/a/10625051/1057730">Абсолютное позиционирование относительно соседнего элемента?</a></h2> <p>Люблю такие вопросы, так как для того, чтобы ответить на них приходится искать относящиеся к вопросу разделы спецификации и стараться интерпретировать в свете вопроса. Не зря я хотел <a href="/specs/">распечатать спецификации</a>.</p> <hr /> <h2 id="httpstackoverflowcoma109141261057730"><a href="http://stackoverflow.com/a/10914126/1057730">Можно ли сделать блок семантичными вкладками?</a></h2> <p><a href="http://dabblet.com/gist/2881519" data-toggle="modal" data-target="#iframe-modal">Посмотреть демо</a></p> <p>Это решение уже много раз обсуждалось, и мне кажется кроме <strong>pureCSS</strong> и доступности имеет очень много ограничений на использование, так как идеально подходит для вкладок с фиксированным по размерам контейнером для контента, а для всего остального — с натяжкой.</p> <hr /> <h2 id="httpstackoverflowcoma109261961057730-2httpstackoverflowcoma133564011057730-3httpstackoverflowcoma108961251057730-4httpstackoverflowcoma109032211057730">Как вертикально и горизонтально отцентровать блок? <a href="http://stackoverflow.com/a/10926196/1057730"><strong>1</strong></a>, <a href="http://stackoverflow.com/a/13356401/1057730"><strong>2</strong></a>, <a href="http://stackoverflow.com/a/10896125/1057730"><strong>3</strong></a>, <a href="http://stackoverflow.com/a/10903221/1057730"><strong>4</strong></a></h2> <p>Все мы пользуемся <code>.wrap {width: 960px; margin: 0 auto;}</code>. Это позволяет браузеру создать равномерный горизонтальный отступ с каждой из сторон и контейнер получается отцентрированным по горизонтали; этот же трюк можно использовать и для вертикальной позиционирования.</p> <p>Главный трюк в том, что в нормальный поток обычных элементов направлен сверху вниз, поэтому <code>margin-top: auto</code> установлено в ноль. Абсолютно спозиционированные элементы, получают возможность распределять свободное пространство в всех направлениях.</p> <pre><code>.div { width: 100px; // может быть height: 100px; // любым числом position: absolute; // абсолютное позиционирование top:0; // удаление отступов right: 0; // удаление отступов bottom: 0; // удаление отступов left: 0; // удаление отступов margin: auto; // включение равномерного распределения свободного // пространства между границами контейнера и блока } </code></pre> <hr /> <h2 id="fieldset-----filedsethttpstackoverflowcoma110182191057730"><a href="http://stackoverflow.com/a/11018219/1057730">Возможно ли написать стили для <code>fieldset</code> идущим прямо за другим <code>filedset</code>?</a></h2> <p><a href="http://dabblet.com/gist/2924668" data-toggle="modal" data-target="#iframe-modal">Посмотреть демо</a></p> <p>Очередное обращение к спецификации, как к доверенному <a href="http://www.w3.org/TR/CSS2/selector.html#pattern-matching">источнику по селекторам</a>. В данном демо раскрывается потенциал селекторов <code>+</code> и <code>~</code>.</p> <hr /> <h2 id="httpstackoverflowcoma110273481057730"><a href="http://stackoverflow.com/a/11027348/1057730">Как подсветить блок, если нажата ссылка, ведущая на него</a></h2> <p><a href="http://dabblet.com/gist/2928193" data-toggle="modal" data-target="#iframe-modal">Посмотреть демо</a></p> <p>Введение в селектор <code>:target</code> и CSS анимации.</p> <hr /> <h2 id="input---100----1httpstackoverflowcoma112384901057730-2httpstackoverflowcoma112386991057730">Как заставить <code>input</code> растянуться на 100% от ширины родителя? <a href="http://stackoverflow.com/a/11238490/1057730"><strong>1</strong></a>, <a href="http://stackoverflow.com/a/11238699/1057730"><strong>2</strong></a></h2> <p><a href="http://jsfiddle.net/matmuchrapna/uaKZn/1/embedded/result/" data-toggle="modal" data-target="#iframe-modal">Посмотреть демо</a></p> <p>Лучший способ выполнить поставленную задачу с поддержкой IE7.</p> <hr /> <h2 id="border-radius------httpstackoverflowcoma101007631057730"><a href="http://stackoverflow.com/a/10100763/1057730">Хром игнорирует <code>border-radius</code> если дочерние элементы имеют относительное позиционирование</a></h2> <p>Немножко евангелизма. Как оказалось главная проблема автора вопроса была в том, что он использовал неправильный порядок префиксов.<br /> Такой порядок правильный:</p> <pre><code>-webkit-property: value; -moz-property: value; -ms-property: value; -o-property: value; property: value; </code></pre> <hr /> <h2 id="httpstackoverflowcoma105484181057730"><a href="http://stackoverflow.com/a/10548418/1057730">Создание внутренней рамки</a></h2> <p><img src="http://i.stack.imgur.com/78sls.png" alt="double inset box-shadow css" /> <a href="http://dabblet.com/gist/2658508" data-toggle="modal" data-target="#iframe-modal">Посмотреть демо</a></p> <p>Все остальные волонтёры предлагали использовать вложенные элементы. Хотя можно спокойно обойтись двойной внутренней тенью:</p> <pre><code>box-shadow: 0 0 0 9px #ffd28a inset, 0 0 0 11px #FFFFFF inset; </code></pre> 2012-11-12T00:00:00-08:00 http://vstarkov.ru/jekyll-plugins-gh-pages <h1 id="jekyll----github-pages">Как использовать Jekyll с плагинами на github pages?</h1> <p>Предыдущая <a href="/ghpages-sync/">заметка</a> рассказывала про то, как избежать рутины при хостинге своего статичного блога. В ней всё хорошо и у вас не будет проблем, пока вы не захотите расширить функциональность своего «Jekyll» сайта. А это потребуется даже для обычных тегов и категорий; «Jekyll» — очень простой движок. После прикручивания дополнительной функциональности и деплоя сайта на гитхаб. Вы обнаружите, что сайт не работает.</p> <h3 id="github-pages">Проблемы с github pages</h3> <p>Первые же ссылки в гугл поиске выдают ссылки объсяняющие, что github pages не работают с jekyll плагинами. Я подозреваю, что это сделано в целях безопасности.</p> <p>Ссылки, которые помогут нам разобраться с решением проблемы.</p> <ul> <li><a href="https://help.github.com/articles/using-jekyll-with-pages">Using Jekyll with Pages</a></li> <li><a href="http://charliepark.org/jekyll-with-plugins/">Jekyll + Plugins + Github + You</a> via <a href="http://charliepark.org/">charlie park</a></li> <li><a href="http://edhedges.com/blog/2012/07/30/jekyll-with-plugins-hosted-on-github-pages/">Jekyll (with plugins!) hosted on GitHub Pages</a> via <a href="http://edhedges.com/">Eddie Hedges</a></li> <li><a href="http://arademaker.github.com/blog/2011/12/01/github-pages-jekyll-plugins.html">GitHub Pages and Jekyll plugins</a> via <a href="http://arademaker.github.com/">Alexandre Rademaker</a></li> </ul> <h4 id="section">Решение Чарли Пака</h4> <p>Первое решение предлагает разделить блог на две части, то есть поддерживать два разных репозитория — один для исходников блога, второй для результата генерации джекилла. Это жутко неудобно, да и раздражать будет. Другие рещения на порядок лучше и поэтому это решение я не буду приводить здесь.</p> <h4 id="section-1">Решение Эдди Хеджеса</h4> <p>Это решение не такое понятное сразу. Оно предлагает сделать объект коммита, который будет содержать историю только одной папки <code>_site</code>:</p> <pre><code>echo 'description of what we are doing' | git commit-tree dev^{tree}:_site </code></pre> <p>Эта комманда выведет <strong>id</strong> этого коммита, и дальше по этому <strong>id</strong> обновим выбранную для github pages ветку </p> <pre><code>git update-ref refs/heads/master COMMIT_ID </code></pre> <p>После этого надо убедиться, что ветка <code>master</code> имеет только нужные нам файлы:</p> <pre><code>$ git checkout master </code></pre> <p>Как видно, это то, что нам нужно. Так как мы не определили родителя коммита, то вынуждены сделать форсированный пуш на сервер:</p> <pre><code>$ git push -f origin master </code></pre> <p>Но можно, не делать форсированный пуш, если указать родителя коммита в самой первое команде:</p> <pre><code>$ echo 'description of what we are doing' | git commit-tree dev^{tree}:_site -p $(cat .git/refs/heads/master) </code></pre> <p>После этого всё можно оптимизировать до одной строки</p> <pre><code>$ git update-ref refs/heads/master $(echo 'Add commit message here!' | git commit-tree dev^{tree}:_site -p $(cat .git/refs/heads/master)) </code></pre> <h4 id="section-2">Решение Александра Рэйдмэйкера</h4> <p>На мой взгляд самое лаконичное решение.</p> <pre><code>$git checkout source // делайте всё, что вам угодно $ git status / git add / git commit $ jekyll $ checkout master $ cp -r _site/* . &amp;&amp; rm -rf _site/ &amp;&amp; touch .nojekyll $ git status &gt; git add &gt; git commit $ git push -all origin </code></pre> <p>Этот способ привлекателен тем, что у вас только один репозиторий, а для разных версий сайта вы используете, также как и раньше — разные ветки.</p> <p>Самое важное в этой строке: </p> <pre><code>$ cp -r _site/* . &amp;&amp; rm -rf _site/ &amp;&amp; touch .nojekyll </code></pre> <p>Эта комманда составная и состоит из следующих более простых комманд, разделенных знаком <code>&amp;&amp;</code></p> <pre><code>$ cp -r _site/* . // скопировали всё из подпапки в папку родительского уровня $ rm -rf _site/ // удаляет содержимое папки *_site* $ touch .nojekyll // создаёт файл, который сообщает гитхабу не запускать джекилл на своём сервере с помощью посткоммит хука. </code></pre> <p>Александр предлагает создать две ветки: <code>source</code> для исходников блога, и <code>master</code> для результатов работы Джекилла.</p> <h3 id="section-3">Поиск решения</h3> <p>В моём случае, я осознанно использую другую конфигурацию. <code>master</code> — ветка для исходников блога, так как эта ветка по умолчанию главная, а с ней чаще всего и приходится работать, поэтому она и остаётся главной. Для блога я использую зарезервиронную гитхабом ветку <code>gh-pages</code>. Для подобной конфигурации, я и приведу окончательное решение.</p> <p>Убедитесь, что вы в <code>master</code> ветке</p> <pre><code>$ git branch gh-pages * master </code></pre> <p>Если маркер стоит напротив другой ветки, то перейдите в master</p> <pre><code>$ git checkout master </code></pre> <p>В решении Рэйдмэйкера, мне казалось странным запускать джекилл каждый раз, когда надо что-то закоммитить, можно же запустить его один раз в режиме <code>--auto</code> — и он будет постоянно сам перегенерировать контент, обнаруживая изменения. Во-вторых, после комманды</p> <pre><code>$ cp -r _site/* . &amp;&amp; rm -rf _site/ &amp;&amp; touch .nojekyll </code></pre> <p>В папке подготовленной для отправления на сервер, как готовый сайт, оставалось много лишнего материала относящегося к генератору сайта, что с одной стороны приемлемо, но сдругой стороны не красиво.</p> <pre><code>$ git status // посмотрите, что надо закоммитить $ git add // добавьте это в коммит $ git commit // закоммитьте $ git checkout gh-pages &amp;&amp; git merge master // синхронизируем с главной веткой, $ shopt -s extglob // включаем расширенный шелл $ rm !(_site) -r // удаляем все папки, кроме _site $ mv _site/* ./ // перемещаем сгенерированный сайт в корень папки. $ rm _site // удаляем папку для генерации $ git add . $ git commit -m 'converted to flat site' $ git checkout master // перемещаемся в мастер ветку $ git push --all // пушим все изменения вместе со всеми ветками на сервер </code></pre> <h2 id="section-4">Окончательное решение</h2> <p>Теперь, рассмотрим, что можно оптимизировать до одной строчки.</p> <pre><code>$ git status // посмотрите, что надо закоммитить $ git add // добавьте это в коммит $ git commit // закоммитьте </code></pre> <p>Эти строчки, всегда придётся делать руками — их не трогаем.<br /> А всё остальное как мы видим можно сократить.</p> <p>Первый шаг:</p> <pre><code>$ git checkout gh-pages &amp;&amp; git merge master $ shopt -s extglob &amp;&amp; rm !(_site) -r $ mv _site/* ./ &amp;&amp; rm _site $ git commit -am 'converted to flat site' $ git checkout master &amp;&amp; git push --all </code></pre> <p><code>git commit -am 'smth'</code> === <code>git add . &amp;&amp; git commit -m 'smth'</code><br /> Второй шаг:</p> <pre><code>$ git checkout gh-pages &amp;&amp; git merge master $ shopt -s extglob &amp;&amp; rm !(_site) -r &amp;&amp; mv _site/* ./ &amp;&amp; rm _site -r $ git commit -am 'converted to flat site' &amp;&amp; git checkout master &amp;&amp; git push --all </code></pre> <p>Окончательный шаг:</p> <pre><code>$ git checkout gh-pages &amp;&amp; git merge master &amp;&amp; shopt -s extglob &amp;&amp; rm !(_site) -r &amp;&amp; mv _site/* ./ &amp;&amp; rm _site -r &amp;&amp; git commit -am 'converted to flat site' &amp;&amp; git checkout master &amp;&amp; git push --all </code></pre> 2012-10-30T00:00:00-07:00 http://vstarkov.ru/meslo <h1 id="meslo">Meslo</h1> <p>Полгода назад я наткнулся на восторженный комментарий по поводу шрифта <a href="https://github.com/andreberg/Meslo-Font">Meslo</a>. Попробовал его и сейчас не могу понять, как я использовал что-то другое раньше.</p> <p>Meslo — изменённая версия шрифта Menlo от компани Apple, который, в свою очередь, создан из Bitstream Vera Sans Mono.</p> <p>Основными претензиями автора шрифта к родительскому Menlo были стандартный интерлиньяж (межстрочное расстояние) и горизонтальное положение звёздочки. Поэтому Андре эти недочёты и выложил своё творение на гитхаб. </p> <p><em>Cледите за первой строчкой текста:</em></p> <div class="span10 neg-offset1"> <div class="fotorama" data-width="100%" data-autoplay="3000" data-fullscreenicon="true"> <img title="Meslo" src="../img/meslo-html-sample.png" alt="Meslo" /> <img title="Consolas" src="../img/consolas-html-sample.png" alt="Consolas" /> <img title="Courier New" src="../img/courier-new-html-sample.png" alt="Courier New" /> <img title="Lucida Console" src="../img/lucida-console-html-sample.png" alt="Lucida Console" /> </div> </div> <p>Из этих четырёх конкурентов я выбрал Meslo, по следующим причинам:</p> <ul> <li>Courier New отпадает сразу из-за проблем со сглаживанием и страшных засечек.</li> <li>Lucida Console отталкивает от себя склеившимися строками в элементах списка тем, что никак не выделяет ноль, что непростительно для шрифта, который используют для кода.</li> <li>Consolas имеет слишком тяжёлые буквы «g» и «r» и более слабый кернинг (межбуквенное расстояние), чем у Meslo. Более того, он проприетарный для платформы Windows.</li> </ul> <p>Я благодарен шрифту Meslo за потрясающий кернинг, откалиброванное межстрочное расстояние, выделенный ноль и превосходный баланс черного и белого в типографском рисунке.</p> <hr /> 2012-10-11T00:00:00-07:00 http://vstarkov.ru/svn-conflict <h1 id="local-edit-incoming-delete-upon-update-">Как разрешить «local edit, incoming delete upon update» ?</h1> <p>Сегодня столкнулся с такой проблемой, и даже не знал почему она возникла.<br /> Выглядить она примерно так:</p> <pre><code>! C .htaccess &gt; local edit, incoming delete upon update ! C foo &gt; local delete, incoming delete upon update ! C bar &gt; local edit, incoming delete upon update </code></pre> <p>Так происходит из-за того, что файл (к примеру .htaccess) был удалён из репозитория, а я не знал об этом и редактировал или даже удалил этот файл локально — именно это и не нравится SVN. Ниже я приведу помогший мне <a href="http://yuechengshao.blogspot.com/2012/01/svn-local-deleteedit-incoming-delete.html">способ</a> разрешить конфликт версий (не забывайте про бэкапы).</p> <p>В рабочей директории, пересоздайте конфликтный файл:</p> <pre><code>$ touch foo </code></pre> <p>Откатите этот файл (это его удалит)</p> <pre><code>$ svn revert foo </code></pre> <p>Теперь удалите его</p> <pre><code>$ rm foo </code></pre> <p>Это победа! Конфликта нет.</p> <pre><code>$ svn st </code></pre> <h2 id="section">Другой способ разрешения конфликта</h2> <p>&#8217;$ svn resolve &#8211;accept=working PATH&#8217; взято отсюда <a href="http://stackoverflow.com/a/4318394/1057730" title="svn: how to resolve “local edit, incoming delete upon update” message">svn: how to resolve “local…</a> </p> 2012-10-11T00:00:00-07:00 http://vstarkov.ru/ghpages-sync <h1 id="github-pages-c-master-">Как синхронизировать &#8216;github pages&#8217; c &#8216;master&#8217; веткой</h1> <p>После моего переезда с Tumblr на <a href="http://jekyllrb.com/" title="transform your text into a monster">Jekyll</a> стала очевидной проблема двух веток и их синхронизация, так как для хостинга сайта нужно иметь сайт в ветке gh-pages, но в тоже время от master никак не избавишься. И хочется всё таки коммитить посты в master, а gh-pages ветка сама обновлялась и отправлялась на сервер.</p> <p>Существуют несколько очень похожих путей решения проблемы: &#8216;git rebase master&#8217; или &#8216;git merge master&#8217;. Первый способ <a href="http://lea.verou.me/2011/10/easily-keep-gh-pages-in-sync-with-master/" title="Easily keep gh-pages in sync with master">описан</a> в блоге у Lea Verou. Второй способ по сути заключается в замене &#8216;git rebase master&#8217; на &#8216;git merge master&#8217;. </p> <pre><code>$ git add . $ git status // посмотреть какие изменения произошли $ git commit -m 'Some descriptive commit message' $ git push origin master $ git checkout gh-pages // сменить ветку на gh-pages $ git rebase master // синхронизировать gh-pages c master (git merge master) $ git push origin gh-pages // отправить ветку на сервер. $ git checkout master // вернуться в master </code></pre> <p>В этом решении мне не понравилось большое количество строк, выполнении &#8216;git push&#8217; целых два раза для одного коммита. Но самое важное, это я понял механизм работы синхронизации. Ещё одну идею мне подсказал небольшой <a href="http://get.inject.io/n/XxsZ6RE7" title="Git post-commit hook to keep master and gh-pages branch in sync">пост-коммит хук</a> упомянутый в комментариях к посту Lea Verou.</p> <p>После этого я написал своё элегантное (мне кажется):</p> <pre><code>$ git add . &amp;&amp; git commit -m 'Some descriptive commit message' $ git checkout gh-pages &amp;&amp; git merge master &amp;&amp; git checkout master &amp;&amp; git push --all </code></pre> <p>Первая строчка добавляет в коммитит все модифицированные файлы, и коммитит все файлы — это чаще всего и надо сделать когда добавляешь пост в блог. Вторая строчка объединяет в себе четыре команды (предполагается, что в находитесь в master): смена ветки на gh-pages, объединение с master, возврат в мастер, и отправление обеих веток на сервер.<br /> И также я решил использовать &#8216;git merge master&#8217; так как он созраняет историю коммитов.</p> <p>Спасибо интернету за столь элегантное решение проблемы.</p> 2012-07-23T00:00:00-07:00 http://vstarkov.ru/specs <h1 id="section">Спецификации — версии для печати</h1> <p>Однажды я захотел иметь распечатанные версии спецификаций, чтобы читать их когда у меня есть свободное время. После этого я обнаружил <a href="http://webmasters.stackexchange.com">webmasters.stackexchange</a> и соответсвующий вопрос про <a href="http://webmasters.stackexchange.com/questions/14676/what-documentation-exists-for-html-css-and-javascript">спецификации</a></p> <p>Затем я нашёл ссылки на спецификации <a href="http://www.w3.org/TR/CSS21/">CSS 2.1</a>, <a href="http://www.w3.org/TR/html401/">HTML 4</a>, <a href="http://dev.w3.org/html5/spec/single-page.html">HTML5 w3</a> и <a href="http://www.whatwg.org/specs/web-apps/current-work/">HTML 5 WHATWG</a>. Оказывается каждая из стабильных спецификаций (CSS 2.1 и HTML 4) имеют несколько версий для печати. <img src="http://i.stack.imgur.com/B2X2Z.png" alt="enter image description here" /></p> <h2 id="section-1">Список спецификация для печати</h2> <ul> <li><a href="http://www.w3.org/TR/CSS21/css2.txt">CSS 2.1 txt</a></li> <li><a href="http://www.w3.org/TR/CSS21/css2.pdf">CSS 2.1 pdf</a></li> <li><a href="http://www.w3.org/TR/html401/html40.txt">HTML 4.01 txt</a></li> <li><a href="http://www.w3.org/TR/html401/html40.pdf.gz">HTML 4.01 gzipped pdf</a></li> <li><a href="http://www.whatwg.org/specs/web-apps/current-work/">HTML 5 WHATWG single-page</a></li> <li><a href="http://dev.w3.org/html5/spec/single-page.html">HTML 5 W3.org single page</a></li> <li><a href="https://docs.google.com/open?id=0Bz1IKTLF1xFPbVg0ZE9nSDl3NzA">HTML 5 WHATWG (сконвертировано в pdf и загружено в Google Drive)</a></li> <li> <p><a href="https://docs.google.com/open?id=0Bz1IKTLF1xFPUkJ3UEd4TE9iMVE">HTML 5 W3.org (сконвертировано в pdf и загружено в Google Drive)</a></p> </li> </ul> 2012-07-23T00:00:00-07:00 http://vstarkov.ru/css-guidelines <p><strong>Дисклеймер:</strong><br /> &lt;p class="text-warning"&gt; Данный документ является переводом первой версии <a href="https://github.com/csswizardry/CSS-Guidelines">рекоммендаций</a> от <a href="http://csswizardry.com/">Гарри Робертса</a>. После публикации в перевод были внесены изменения для синхронизации с оригинальным репозиторием, из-за чего <a href="https://github.com/matmuchrapna/CSS-Guidelines">актуальную версию</a> перевода можно найти в моём аккаунте на гитхабе.&lt;/p&gt;</p> <h1 id="css---">CSS советы и рекомендации</h1> <p>В начале каждого CSS файла создаётся и поддерживается список содержимого документа, указывающий на разделы файла стилей. Название разделов имеет префикс из <code>$</code>, что означает поиск по фразе <code>$[раздел]</code> вернёт только блок относящийся к секции.</p> <h2 id="section">Синтаксис и форматирование</h2> <p>Мы используем многострочную запись для улучшения последующей работы с системой контроля версий (выявление различий сделанных в одной строке — это тихий ужас), мы упорядочиваем логические свойства и селекторы по группам, а <strong>не</strong> по алфавиту.</p> <p>Мы пишем селекторы в нижнем регистре и разделяем слова дефисом: <code>.thisIsBad {}</code>, <code>.this_is_also_bad {}</code> but <code>.this-is-correct {}</code>.</p> <p>Всегда заканчивайте строку последнего правила в селекторе символом &#8216;;&#8217;, чтобы избежать возможных конфликтов и синтаксических ошибок во время всего использования документа.</p> <p>Для примера предпочитаемого форматирования и структуры CSS просто посмотрите файл <a href="http://github.com/csswizardry/vanilla/blob/master/css/style.css">github.com/csswizardry/vanilla/&hellip;/style.css</a></p> <p><strong>К прочтению:</strong></p> <ul> <li><a href="http://coding.smashingmagazine.com/2011/08/26/writing-css-for-others">coding.smashingmagazine.com/&hellip;/writing-css-for-others</a></li> <li><a href="http://jasoncale.com/articles/5-dont-format-your-css-onto-one-line">jasoncale.com/&hellip;/5-dont-format-your-css-onto-one-line</a></li> </ul> <h2 id="section-1">Комментарии</h2> <p>Комментируйте так много и так часто, насколько вы вообще можете это делать. Если это может понадобиться, то включите в комментарий блок кода разметки, помогающий понять в каком контексте находятся стили.</p> <p>Будьте многословны, не стесняйтесь: CSS будет уменьшен при выкладывании на рабочий сервер.</p> <h2 id="section-2">Отступы</h2> <p>Для каждого уровня вложенности разметки пытайтесь делать соответствующие отступы в стилях. Например: </p> <pre><code>.nav {} .nav li {} .nav a {} .promo {} .promo p {} </code></pre> <p>Также пишите вендорные префиксы так, чтобы значения были в одном столбике, то есть:</p> <pre><code>-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; </code></pre> <p>Это позволяет нам сразу увидеть, что все свойства установлены в <code>4px</code>, но что более важно — так это то, что если наш редактор поддерживает режим редактирования столбцов, то мы можем менять значение сразу во всей колонке значений в один момент.</p> <h2 id="section-3">Создание компонента</h2> <p>При создании нового компонента пишите разметку <strong>до того</strong>, как напишите хоть одну строчку CSS. Это позволяет увидеть какие свойства наследовались и избежать повторного применения избыточных стилей.</p> <h2 id="oocss">OOCSS</h2> <p>При создании компонента старайтесь не повторять себя, также не упускайте из виду принципы OOCSS.</p> <p>Вместо того, чтобы плодить множество уникальных компонентов, попытайтесь распознать повторяющиеся шаблоны дизайна и создать из них абстракции; cверстайте эти абстракции, а затем используйте уточняющие классы для расширения их внешнего оформления.</p> <p>Если вы вынуждены создать новый компонент, то разделите его на структуру и декоративное оформление; сверстайте структуру используя общие классы, тем самым давая возможность использования структуры компонента в других местах вашего проекта, и затем, используя более специфичные классы, оформите компонент в соответствии с требованиями дизайна.</p> <p><strong>К прочтению:</strong></p> <ul> <li><a href="http://csswizardry.com/2011/09/the-nav-abstraction">csswizardry.com/&hellip;/the-nav-abstraction</a></li> <li><a href="http://stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code">stubbornella.org/&hellip;/the-media-object-saves-hundreds-of-lines-of-code</a></li> </ul> <h2 id="section-4">Раскладка</h2> <p>Все компоненты должны быть полностью независимы от ширины; ваши компоненты должны оставаться резиновыми и их ширина должна контролироваться системой модульных сеток.</p> <p>Высота <strong>никогда</strong> не должна назначаться элементам. Высота применяется только на сущности, имевшие размеры <em>до того</em>, как попали на сайт (например, картинки и спрайты). Никогда не устанавливайте высоту на <code>p</code>, <code>ul</code>, <code>div</code>, вообще что угодно. Вы можете добить желаемого эффекта с помощью гораздо более гибкого <code>line-height</code>.</p> <p>Систему модульных сеток следует рассматривать, как структуру сайта. Вы создаёте структуру сайта, а затем наполняете её информацией.</p> <p>Вы никогда не должны применять никаких стилей на ячейку сетки, так как они служат только целям разметки. Никогда, ни при каких обстоятельствах не применяйте свойства меняющие поведение <code>box-model</code> к ячейкам сетки.</p> <h2 id="section-5">Размеры</h2> <p>Мы используем различные методы для задания размеров интерфейса: проценты, пиксели, <code>ems</code>, <code>rems</code> или вообще не задаем единицы измерения.</p> <p><strong>К прочтению:</strong></p> <ul> <li><a href="http://csswizardry.com/2011/12/measuring-and-sizing-uis-2011-style">csswizardry.com/&hellip;/measuring-and-sizing-uis-2011-style</a></li> </ul> <h2 id="section-6">Размеры текста</h2> <p>Мы используем <code>rems</code> (c запасным решением с помошью пикселей только для старых браузеров). Категорически отказывайтесь от пикселей в <code>font-size</code> как это делают обычно. Мы определяем <code>line-height</code> без определения размерностей везде, <strong>кроме</strong> тех случаев когда позиционируем текст в заранее известной высоте.</p> <p>Мы избегаем многоразового определения <code>font-size</code>; для достижения той же цели мы используем предопределённые размеры шрифтов разбитые по классам. Мы можем переделать оригинальные классы вместо определения <code>font-size</code> снова и снова.</p> <p>Перед тем как задать элементу <code>font-size</code>, убедитесь что класс с заданным значением ещё не существует.</p> <p><strong>К прочтению:</strong></p> <ul> <li><a href="http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css">csswizardry.com/&hellip;/pragmatic-practical-font-sizing-in-css</a></li> </ul> <h2 id="section-7">Сокращённая запись</h2> <p>Это может показаться заманчивым использовать правила похожие на <code>background: red;</code> но делая это, мы на самом деле говорим: «Я хочу, чтобы фоном была не одна картинка скролящуюся, спозиционированную вверх и влево и повторяющуюся по X и Y и чтобы цвет фона был красный». В девяти случаях из десяти это не высовет никаких проблем, но в 10% обязательно доставит достаточно неприятностей, чтобы не использовать сокращенные записи. Вместо этого используйте <code>background-color: red;</code>.</p> <p>Например, ситуация с правилом <code>margin: 0;</code> — оно ясное и короткое, но черезчур <strong>специфичное</strong>. Если вы на самом деле хотите сделать отступ снизу от элемента, то гораздо более подходящим будет использовать <code>margin-bottom: 0;</code>.</p> <p>Старайтесь сохранять чёткое представление о свойствах, которые вы устанавливаете и следите за тем, чтобы случайно не сбросить свойства других элементов, используя сокращенную запись. Например, если вы хотите сбросить нижний отступ, то нет никакой необходимости в агрессивном сбрасывании всех отступов с помощью <code>margin: 0;</code>.</p> <p>Сокращённая запись сама по себе хороша, но легко используется неправильно.</p> <h2 id="section-8">Селекторы</h2> <p>Сохраняйте селекторы эффективными, рациональными и переносимыми.</p> <p>Тяжелые, глубоко вложенные селекторы никуда не годятся по ряду причин. Например возьмем <code>.sidebar h3 span {}</code>. Этот селектор основан на вложении и поэтому нет возможности переместить <code>span</code> из <code>h3</code> и из <code>.sidebar</code> — следовательно, нет возможности обеспечить поддержку стилей на должном уровне.</p> <p>Слишком длинные селекторы также вызывают проблемы производительности; чем больше проверок в селекторе (например селекторе <code>.sidebar h3 span</code> имеет три проверки, а <code>.content ul p a</code> — четыре), тем больше работы выполняет браузер.</p> <p>Старайтесь следить, чтобы ваши стили не зависели от вложенности, где это только возможно, а также что ваши селекторы были короткими и легко воспринимаемыеми.</p> <p><strong>Запомните:</strong> Классы на самом деле ни семантичны, ни не семантичны; Они применимы или нет! Перестаньте беспокоиться о «семантике» имён классов и выберите что-нибудь удобное в применении, с расчётом на дальнейшее использование.</p> <p><strong>К прочтению:</strong></p> <ul> <li><a href="http://speakerdeck.com/u/csswizardry/p/breaking-good-habits">speakerdeck.com/&hellip;/breaking-good-habits</a></li> <li><a href="http://csswizardry.com/2011/09/writing-efficient-css-selectors">csswizardry.com/&hellip;/writing-efficient-css-selectors</a></li> </ul> <h2 id="section-9">Слишком специфичные селекторы</h2> <p>Гиперспецифичный селектор это один из ряда <code>div.promo</code>. Скорее всего мы можем достичь тот же самый эффект, используя лишь <code>.promo</code>. Конечно, иногда мы <em>хотим</em> определить класс в зависимости от элемента (например, если у вас есть общий класс <code>.error</code>, который должен выглядеть по разному на разных элементах (например, <code>.error { color: red; }</code> <code>div.error { padding: 14px; }</code>)), но по возможности избегайте этого, где это только возможно.</p> <p>Другим примером слишком специфичного селектора может быть <code>ul.nav li a {}</code>. Как описано выше мы сразу можем выкинуть <code>ul</code>, и так как мы знаем, что <code>.nav</code> это список, то ссылка будет вложена только в <code>li</code>, поэтому мы можем сократить <code>ul.nav li a {}</code> до <code>.nav a</code>.</p> <h2 id="section-10">Производительность</h2> <p>Хоть это и правда, что браузеры только улучшают свои показатели в скорости рендеринга CSS, «Эффективность» — это то, на чём мы можем быть сфокусированы всегда. Короткие селекторы, неиспользование универсального (<code>* {}</code>) селектора и избегание больших комбинаций CSS3 селекторов должно помочь обойти проблемы производительности.</p> <p><strong>К прочтению:</strong></p> <ul> <li><a href="http://csswizardry.com/2011/09/writing-efficient-css-selectors">csswizardry.com/…/writing-efficient-css-selectors</a></li> </ul> <h2 id="section-11">Будьте точны, не делайте обобщений и предположений</h2> <p>Вместо использования селекторов спускающихся по всему DOM-дереву, чаще удобнее добавить требуемому элементу класс. Давайте рассмотрим конкретный пример.</p> <p>Представьте себе промо баннер с классом <code>.promo</code> с текстом внутри и ссылкой призывающей к действию (призывная, далее по тексту). Если будет только один <code>a</code> во всем <code>.promo</code> то можно стилизовать «призывную» ссылку с помощью <code>.promo a {}</code>.</p> <p>Проблема станет очевидна так скоро, как вы добавите простую текстовую ссылку (или любую другую ссылку) в <code>.promo</code> контейнер; только что добавленная ссылка унаследует стили от «призывной» ссылки в независимости от того, хотите вы этого или нет. В этой ситуации будет лучше добавить точный класс (например <code>.cta</code> — аббр. от ‘call-to-action’) ссылке, которую вы хотите стилизовать.</p> <p>Будьте точны, конкретны; указывайте именно тот элемент, который вам нужен, не его родитель. Никогда не предполагайте, что разметка будет неизменной.</p> <h2 id="section-12">Ключевой селектор никогда (как правило) не должен быть селектором тега или основным классом компонента/абстракции</h2> <p>Вы никогда не должны обнаружить себя пишущим селектор, в котором ключевое значение имеет селектор по тегу (например, <code>.header ul {}</code>) или базовый компонент (например, <code>.header .nav {}</code>). Так как вы никогда не сможете гарантировать, что будет только один <code>ul</code> или один <code>.nav</code> в контейнере <code>.header</code>, ключевой селектор слишком расплывчатый.</p> <p>Будет правильнее задать элементу класс, отвечающий на вопрос, что это за элемент — класс указывающий на него и только на него, итак <code>.header .nav {}</code> может быть заменен на <code>.site-nav</code>.</p> <p>Единственное, когда селектор по тегу может быть востребован, это когда ситуация похожа на ту, что описана ниже:</p> <pre><code>a { color:red; } .promo { background-color: red; color: white; } .promo a { color: white; } </code></pre> <p>В данном случае вы <em>знаете</em>, что каждый <code>a</code> в <code>.promo</code> нуждается в пустом правиле, так как в противном случае будет нечитабельным.</p> <p><strong>Пишите селекторы, указывающие на желаемые элементы, а не на те элементы, что уже оказались в разметке.</strong></p> <h2 id="id--">Идентификаторы (ID) и классы</h2> <p>Никогда не используйте ID в CSS, <strong>абсолютно никогда</strong>. Они могут быть использованы в вашей разметке, только для джаваскрипта или обозначения секций документа (fragment-identifiers). Для стилизации используйте только классы. Ни один ID не должен существовать в ваших стилях.</p> <p>Классы предоставляют возможность повторного использования (даже если мы не хотим, но всё равно мы можем) и имеют низкую специфичность, что тоже очень удобно.</p> <p><strong>К прочтению:</strong></p> <ul> <li><a href="http://csswizardry.com/2011/09/when-using-ids-can-be-a-pain-in-the-class">csswizardry.com/&hellip;/when-using-ids-can-be-a-pain-in-the-class</a></li> </ul> <h2 id="important"><code>!important</code></h2> <p>Допустимо использовать <code>!important</code> только на вспомогательных классах. Превентивно добавлять <code>!important</code> удобно и полезно, например если вы знаете, что селектор <code>.error { color: red !important; }</code> всегда должен нуждаетсяв наибольшем приоритете.</p> <p>Не приветствуется использование <code>!important</code> для исправления ошибок, например, чтобы помочь выбраться себе из ситуации с запутанной специфичностью. Переработайте ваш CSS и старайтесь избегать этих проблем рефакторингом ваших селекторов. Сохраняйте ваши селекторы короткими, откажитесь от ID — и ваша жизнь станет проще.</p> <h2 id="section-13">Магические числа и абсолютные значения</h2> <p>Магическое число — число используемое лишь потому, что «это просто работает». Это порочная практика, так как очень редко она работает по какой-либо реальной причине и обычно достаточно недальновидна, негибка и причина самого числа вероятнее всего забудется. Магические числа устраняют симптомы, но не никак не влиют на проблему.</p> <p>Например, использование правила <code>.dropdown-nav li:hover ul { top: 37px; }</code> для сдвига выпадающего пункта меню вниз при наведении на родителя <code>li</code> не принесёт ничего хорошего, так как 37px магическое число. 37px работает только потому, что в этом конретном сценарии (конкретный сайт в определённое время) меню оказалось высотой в 37px.</p> <p>Вместо этого мы должны использовать <code>.dropdown-nav li:hover ul { top: 100%; }</code>, что означает без разницы какой высоты будет <code>dropdown-nav</code> меню, выпадающий пункт меню всегда будет сдвинут на 100% от верхней границы родителя.</p> <p>Каждый раз, когда вы жестко задаёте число подумайте дважды; если вы можете избежать этого, используя ключевые слова или синонимы (например, <code>top: 100%</code> — сдвинуть на 100% от верха) или — даже лучше — не используя никаких элементов измерений, то вы должны избежать использования жестко заданного числа.</p> <p>Каждое установленное вами числовое значение, скорее всего было необязательным.</p> <h2 id="conditional-stylesheets">(Conditional stylesheets)</h2> <p>Использование файлов стилей по большому счёту можно избежать. Исключением может быть необходимость восполнить недостаточную поддержку (например, PNG с альфа–каналом в IE6).</p> <p>Главное правило: вся разметка и <code>box-model</code> правила могут и <em>будут</em> работать без дополнительных файлов стилей, если вы отрефакторите ваш CSS. Это означает, что мы никогда не будем рады, если увидим <code>&lt;!--[if IE 7]&gt; element{ margin-left:-9px; } &lt; ![endif]--&gt;</code> или любой подобный CSS, используемый лишь для того, чтобы «заставить что-то работать правильно».</p> <h2 id="section-14">Отладка</h2> <p>Если вы столкнулись с проблемой в CSS, то <strong>удаляйте куски кода, до того как начать добавлять правила ещё</strong> в попытке решить проблему. Проблема кроется в уже написанном CSS, написать ещё больше стилей — не самое верное решение!</p> <p>Удаляйте куски разметки и стилей, пока проблема не исчезнет, затем определите в какую часть кода закралась проблема.</p> <p>Это бывает достаточно удобно добавить <code>overflow: hidden;</code> на нужный элемент, чтобы избавиться от результатов кривой вёрстки, но <code>overflow</code> сам по себе никогда не был проблемой; <strong>Исправляйте проблему, а не симптомы.</strong></p> <h2 id="section-15">Препроцессоры</h2> <p>Следуя предыдущим советам, вы возможно обнаружите улетучивающуюся потребность в препроцессорах. Если вы всё ещё хотите их использовать, то учитывая всё, что было написано, используйте препроцессоры как дополнение к правилам, а не как альтернативу им.</p> <p>Например, возможность вложенности часто приводит к гипер–специфичным и сильно вложенным селекторам. Давайте рассмотрим наш <code>. nav a {}</code> пример ещё раз:</p> <pre><code>.nav { li { a {} } } </code></pre> <p>Скомпилируется в:</p> <pre><code>.nav {} .nav li {} .nav li a {} </code></pre> <p>Хотя это и очень маленький пример, но он демонстрирует, что множество встроенных «полезных» фич препроцессоров работают против нас и наших идеалов; <code>.nav li a {}</code> может (и должно) быть <code>.nav a {}</code>.</p> <p>Также, миксины и похожие них элементы, учат вас запоминать абстракции — что великолепно — но не учат необходимости использовать их правильно; нет никакой необходимости в абстактном миксине, если вы собираетесь использовать его тысячу раз в файле стилей.</p> <p>Обязательно изучите все тонкости превосходного vanilla CSS и то, где препроцессор может способствовать их использованию, а не препятствовать или отменять их. Изучите недостатки препроцессоров изнутри и затем соедините лучшие стороны обоих, опустив худшие.</p> 2012-07-11T00:00:00-07:00 http://vstarkov.ru/jsfiddle <h1 id="jsfiddlenet">jsFiddle.net</h1> <p>Хочу рассказать про популярный инструмент для демонстрации своих примеров — <a href="http://jsfiddle.net/">jsFiddle</a>. Например, им очень удобно пользоваться на таких сайтах как <a href="http://stackoverflow.com/">Stackoverflow</a>. Я не раз использовал этот сайт для создания узко–специализированных демо для багов. Также он очень уместно использован для проекта <a href="http://www.highcharts.com/">Highcharts</a> в качестве наглядных демонстраций <a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/chart/zoomtype-none/">различных</a> <a href="http://jsfiddle.net/gh/get/jquery/1.7.1/highslide-software/highcharts.com/tree/master/samples/highcharts/title/floating/">опций</a>.</p> <p><img src="http://img716.imageshack.us/img716/1553/df9f77d59cfc47d6bcd6c91.png" alt="jsFiddle" /> </p> <h2 id="section">Использование</h2> <p>В главном окне предлагается три области для ввода (HTML, CSS, JavaScript) и одна область для вывода результатов.<br /> В верхнем сайдбаре есть две главные кнопки “Run” и “Save”.<br /> “Run” — заставляет область результатов обновиться. “Save” — обновиться и увеличить номер версии демо на один пункт.</p> <h2 id="section-1">Настройки демонстрации</h2> <p><img src="http://img825.imageshack.us/img825/6839/3291addb04204f7c8e0fb82.png" alt="jsFiddle sidebar" /> * В первой секции <strong>“Choose framework”</strong> можно выбрать какой фреймворк (jQuery, MooTools, etc.) использовать и подключать ли <a href="http://necolas.github.com/normalize.css/">normalize.css</a>.<br /> * В секции <strong>“Add Resources”</strong> можно подключать сторонние JavaScript библиотеки и CSS файлы.<br /> * Секция <strong>“Info”</strong> позволяет задавать мета­-теги <code>title</code>, <code>description</code> и выбирать <code>doctype</code>.</p> <h2 id="section-2">Кабинет</h2> <ul> <li>В разделе <strong>Dashboard</strong> выводятся все сделанные вами fiddl&#8217;ы.</li> <li>В раздел <strong>Your Public Fiddles</strong> попадают только те работы, в которых вы задали <code>title</code> в панели <strong>Info</strong> настроек fiddl&#8217;a<br /> <img src="http://img207.imageshack.us/img207/8963/ddd70990388541d08f13588.png" alt="Your Public Fiddles" /></li> </ul> <h2 id="section-3">От себя</h2> <p>Советую всем научиться пользоваться этим замечательным ресурсом и показывать свои миниработы с помощью этого проекта. Мне кажется, что это самый лучший проект для этих целей.</p>