Блог для начинающих веб разработчиков. 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

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

generic levitra walgreens
brand name cialis for sale
buy viagra over counter new york
viagra buy in tesco
hvor meget koster viagra

пт, 2019-02-01 14:05

www.cornhole4u.com www.distanceinstitute.us www.rijf.org maczfuneralhomes.com abbeyroadsalon.net www.keepmyinfosafe.org indiansocialstudy.com cmc-biologics.net www.jrpstyle.net illumineanalytics.com jialansd.com theriverbendcafe.com www.hudsonmedicalproducts.com www.pkeithlaw.com dnselite.com www.rentcasabonita.com depressionrxvideo.com lamconsulting.com citydoo.com d2v.dmarz.com lzy.sandiegocountyrecorder.net gaga.okidatatonercartridges.com solonegro.com atdhe.bloodassurance.com apparelstaffing.com www.jasmineconcept.com orangeultralight.org fho.publicitylink.com mailprocessing.com cht-avenue.com knightsbridgeboutique.com pureandsimplelifestyles.com web-site-guarantee.com doctordigit.com www.jmprojects.com njuskalo.de www.decisionsdecisions-inc.com ezvuaccess.com ekeynumber.com www.khorayef.com squab.nationwidetaxinc.com invescoeurope.info whycats.com

вс, 2019-02-03 14:23

how to vape cbd e liquid
http://cannabisoil-cannabidiol.com - cannabidiol oil
how to use cbd oil for pain
cannabidiol oil
- cbd medical abbreviation
cbd vape oil

пт, 2019-02-22 00:09

cbd insomnia
http://cbdvapejuice1.com - cbd vape pen
cbd oil benefits for skin
cbd vape juice
- cbd oil near me
1000 mg cbd oil concentrate

пн, 2019-02-25 17:05

canadian pharmacy viagra 20mg last post
http://xlviagracan.com - viagra for sale viagra 10 mg effectiveness board index
viagra for sale - viagra and alcohol interaction username
can ed be reversed

ср, 2019-02-27 23:13

trial of viagra women
http://xlviagragen.com - viagra for men
viagra 5mg canada you cannot reply to topics in this forum
generic viagra for sale
- how viagra works
ed and diabetes

GarzandNic
ср, 2019-03-13 12:52
Комментировать