Блог для начинающих веб разработчиков. HTML, СSS, Jquery, Drupal и другое.

→ Четыре совета для приятной работы с кодом.

Опубликовано: 24 июля 2012

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

Итак, четыре полезных совета для приятной работы с кодом.

1. Шрифт. Так уж принято, что в программировании обычно используется моноширинный шрифт. Это действительно важно, ведь в таком типе гарнитуры все символы имеют одинаковую фиксированную ширину, что помогает избежать ошибок в работе. Однако, самый распространённый шрифт Courier New используемый с давних времён для работы с кодом в ОС Windows выглядит не слишком красиво и приятно. C приходом Windows 7, на замену ему появился новый моноширинный шрифт для работы с кодом, под названием Consolas. На мой взгляд, он выглядит намного симпатичнее Courier New. Нет причин более использовать Courier, пора уже заставить ваш редактор отказаться от старого шрифта. Разницу между Colonas и Courier New хорошо видно из изображения ниже.

если в вашей системе нет данной гарнитуры, то её можно скачать на microsoft.com

2. Сглаживание.

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

Те, кто успел поработать и в Windows и в OS X наверное заметили разницу в сглаживании текста. На макинтошах шрифты выглядят более плавно и они приятнее на глаз. Маленькая утилита  gdpp позволяет управлять сглаживанием шрифтов в Windows. Архив этой программы по ссылке ниже уже настроен так, чтобы текст в Windows выглядел так же, как и в OS X, попробуйте - вам понравится! Скачать программу можно здесь.

3. Zen Coding - Упрощённый ввод тегов.

Верстая HTML страницы, помимо структуры приходится вводить много вспомогательных элементов, например расставить правильно закрывающие теги, кучи кавычек с атрибутами class, id, копировать и вставлять одинаковые строки кода и т.п.

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

div#page>div.logo+ul#navigation>li>a

И нажав стандартную комбинацию "CTRL+," Вы получите:

<div id="page">
        <div class="logo"></div>
        <ul id="navigation">
                <li><a href=""></a></li>
        </ul>
</div>

Если вы знаете CSS, то уже поняли, что Zen Coding преобразовывает выражения, построенные согласно правилам CSS в HTML код. Кроме того можно легко и быстро создавать группы одинаковых элементов используя звёздочку, например:

ul.menu>(li>a)*4

выведет:

<ul class="menu">
	<li><a href=""></a></li>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
	<li><a href=""></a></li>
</ul>

Более подробно о Zen Coding можно посмотреть в видео ниже. Вот страничка проекта в Google Code, там можно скачать этот плагин для разных редакторов, количество поддерживаемых редакторов очень велико.

4. Glass2k - полупрозрачность окон Windows 

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

И таких программ есть много. Например, маленькая и простая утилита Glass2k, в установке не нуждается, и состоит всего из одного файла. При запуске программы, кликая на какое-либо окно правой кнопкой мыши, можно выбрать степень его прозрачности, как показано на рисунке ниже, либо можно использовать сочетания клавиш Ctrl+Shift+[0-9]:

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

На сегодня всё, думаю эти инструменты будут вам полезны, или хотябы просто интересны. Советов получилось всего четыре, а какие бы инструменты вы добавили? Поделитесь в комментариях!

Спасибо за внимание, приходите ещё.

Поделиться:
Комментарии

Сглаживание считаю лишним. От него глаза больше устают.

Zen coding подскажи подключается к notepad++?

сб, 2013-02-02 20:53

Да, Zen Coding есть почти для всех редакторов, вот ссылка.

Faraday
ср, 2013-02-06 20:32

Why viewers still make use of to read news papers when in this technological globe everything is accessible on web?

My web-site ... no coding membership site

ср, 2018-07-04 01:04

zen coding уже не актуально. используйте emmet.

blitz_v
пт, 2014-02-07 12:54

Спасибо за совет об Glass2k, как раз искала что-то подобное для Picsel Perfect)

Ирина
сб, 2014-09-06 13:10

про полупрозрачность окон....огонь)

игор
пт, 2015-01-16 17:18

Доброе время суток.
Хочу предложить Вам обменяться постовыми с моими сайтами
http://steve-pavlina.ru/ или http://favicon-generator.ru/ .
Как Вы на это смотрите?

Стив
ср, 2015-02-04 23:08
Комментировать