Полезные хитрости кодинга: То, что приходится каждый день искать в Интернете…

Форматирование CSS

Частенько сталкиваюсь с тем, что приходится разбираться в чужом коде. И каждый раз он написан по-разному. Особенно это касается языков, не предусматривающих строго форматирования (вроде Ruby или Python’а).

Для того, чтобы ускорить и упростить понимание плохо “отинденченного” чужого кода, удобно пользоваться бьютифайерами (от англ. beautify – украсить). Они расставляют отступы в соответствии с индустриальными стандартами, и читать код становиться гораздо проще.

Для CSS я нашел такой сервис онлайн – Format CSS online (онлайн форматирование CSS): достаточно просто вставить код CSS, сделать пару настроек и получить на выходе отформатированный CSS. Обратите внимание, что сервис воспринимает только валидный код, т.е. всякие хаки для IE и пр. не очень стандартные вещи будут скорее всего потеряны.

Регулярные выражения Ruby

Недавно столкнулся с проблемой: в Ruby достаточно сложно составлять регулярные выражения. Особенно сложно составлять их правильно.

К счастью, в Интернете для этого есть целый спектр сервисов для тестирования регулярных выражений. Один из них – это Rubular.

Сервис тестирования регулярных выражинй

Сервис тестирования регулярных выражинй

Исчезающие подписи в полях ввода

Какой Веб-проект обходится без полей ввода? А какие поля ввода – без подписей?

Наиболее распространенный способ оформления подписей у полей ввода – это делать их непосредственно в самих полях, окрашивая чуть менее выразительным цветом, чем основной текст. Например, вот так:


Поле ввода со скрывающейся подписью

Я перепробовал много решений, но в итоге пришел к красивому, а самое главное – валидному решению, не требующему хаков.

Для начала оформляем все поля ввода в DIV-контейнеры:

Потом определяем для них CSS:

.input-field {
	position: relative;
}

.input-field label {
	position: absolute;
	left: 2px;
	top: 2px;
	*top: 4px;
	*left: 4px;
}

Этот код исключает метки из разметки и располагает их прямо в полях ввода. Не забываем указывать меткам нужный цвет. Отступы left, top тоже можно подбирать по вкусу. И, конечно, лучше всего этот код работает, если предварительно сбросить лишние параметры CSS по-умолчанию.

И последний компонент новогоднего пирога – это код на JS, который непосредственно скрывает текст подписи, когда в поле ввода что-то есть: текст или курсор.


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

Включить вывод всех ошибок PHP в браузер

Многие хостинги сконфигурированы в production-режиме, так что в них совершенно правильно отключен вывод ошибок PHP в окно браузера. Но при разработке зачастую неудобно каждый раз проверять error_log в поисках ошибок. Особенно, когда к хостингу нет доступа через shell.

В этом случае поможет код, позволяющий включить вывод ошибок в браузер:

error_reporting(E_ALL);
ini_set("display_errors", 1);

Главное не забывайте его впоследствии убирать. Наличие такого кода может послужить дырой в безопасности Вашего веб-приложения.

Расположить элемент по центру по горизонтали

Есть несколько способов расположить DIV по центру родительского элемента.

Самый простой, присвоить ему следующий CSS-стиль:

div {
	width: 100px;
	margin: 0 auto;
}

Далее »

Сброс параметров CSS по-умолчанию для всех браузеров

Для меня любая верстка начинается с “вешалки” – с CSS-кода, который призван сбросить все параметры, принятые по-умолчанию у разных браузеров.

Эти разные “умолчания” приводят к тому, что такие элементы как списки, поля ввода, таблицы, изображения могут получить лишние границы, margin’ы и padding’и. Причем это варьируется от браузера к браузеру.

Именно для того, чтобы таких сюрпризов в ходе верстки не образовалось, я включаю в начало своего CSS-файла следующий код:

/* v1.0 | 20080212 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}

* авторство сохранено

После применения этого CSS все элементы выглядят во всех распространенных браузерах одинаково. И от этого уже можно спокойно отталкиваться в собственной верстке.

Страница 2 из 2«12