Deerua about Coding @ deer.org.ua

Январь 2010

27 января 2010, 17:46 13 дней назад

Утилиток нужных пост: CSS и JS уменьшаторы (minifier)

Последнее время часто пользуюсь, и так же часто не могу найти рабочие сайты. То домен пропал, то домен украли, то тупо сайт лежит. По этому сделал два зеркала для себя (если кому-то ещё пригодится, я не против ;) + любимый сайт для сжатия скриптов.

CSS Formatter and Optimiser (csstidy 1.3)

Dean Edwards p.a.c.k.e.r 3.1

JS Compressorrater

2 комментария

Теги: css, javascript, УПП tools

26 января 2010, 18:56 14 дней назад

CSS: СЕО-колонка :)

SEO-колонка спросите вы? Ничего тут страшного нет. Это просто колонка которая идёт за контентом. По сути контент поисковик видит сразу, и сайт более СЕО-дружен ;)

<html>
	<head>
		<title>Column page</title>
	</head>
	<body>
		<div class="wrapper">
			<div class="content">
				<span>text</span>
			</div>
			<div class="sidebar">
				<span>text</span>
			</div>
		</div>
	</body>
</html>

Как же сделать колонку?

указываем длину текстового блока (для чтения рекомендовано не больше 600px на 14й фонт)
указываем блоку маржин с нужной стороны в длину колонки
оба летают слева, а у колонки левый маржин 100%

В цсс всё выглядит вот так

.wrapper {
	width: 960px;
	margin: 0 auto;
	clear: both;
	position: relative;
	zoom: 1;
}
.wrapper span{
	display: block;
	margin: 30px;
}
	.content{
		float: left;
		margin-left: 230px;
		width: 730px;
		position: relative;
	}
	
	.sidebar{
		margin-left: -100%;
		width: 230px;
		float: left;
		}

Работает даже в ИЕ, проблем нет (нужно только добавить доктайп), а для правой колонки:

колонка: маржин справа -длина колонки
контент: маржин справа длина колонки

.rightcolumn 
	.content{
		margin-left: 0;
		margin-right: 230px;
	}
.rightcolumn 
	.sidebar{
		margin-left: -230px;
	}

Посмотреть Пример

ps: всё просто и не сложно ;) Релейтивы и зум 1 — кажись не надо ;) но пускай полежат.

3 комментария

Теги: css

21 января 2010, 12:36 19 дней назад

CSS: outline такой outline — или делаем равномерный фон для текста

Если навесить фон на текст, он будет выглядеть довольно просто, но если строки начинают переносится, фон пересекается не особо красиво… Что бы нам помочь, сделано свойство в CSS outline. О нём писал ранее, в статье о CSS debag’e.

Что же за зверь такой, этот outline — это внутренний бордер элемента, который не влияет на параметры длины элемента… Параметры такие же как у бордера

* { outline: #outline-color   outline-style outline-width px }

Для примера посмотрим на текст с разными свойствами:

Просто перенос	line-height: 90%	outline: 1px solid red	font-family: ’Calibri’
HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО

Вывод, вопрос «можно решить»:

через line-height, но когда у текста паддинг выглядит не очень
через подстановку другого фонта, и опять паддинг
с помощью outline. Казалось бы, задача решена, но есть одно но, или даже два — это старые ИЕ и тупая Опера, которая с этим свойством делает что хотит. Ещё иногда в ФФ при больших значениях падинга текста, и аутлайне, появляются артефакты, но они лечатся с помощью -moz-outline-offset (достаточно указать смещение на полпихеля)

Есть ещё одна проблема, фон картинкой будет выглядеть ужасТно. Что же делать с толпой недобраузеров и фоновой картинкой? Тут приходится хитрить. Для этого можно просто использовать 3 спана (position: relative;), 2 которых смещены друг от друга в разные стороны + кастомный фонт

3 spans (left: -5px, 5px, -2.5px)	всё + line-height: 95%	background-image	background-attachment: fixed
HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО	HELLO СЛОВЕЧКО
Тут всё круто	line-height делает прикольній декор	фон едет на следующей строке	fixed — правит это всё, но не для ИЕ6-7 (нужен expression)

Итого мы имеем:

.smaple, .sampleB {
	font-size: 18px;
	font-family: 'Calibri', 'Trebuchet MS'; 
	line-height: normal;
}
.sample span {
	position: relative;
	background: red;
	color: white;
	left: -5px;
}
	.sample span span {left: 5px;}
	.sample span span span {left: -2.5px;}
	
.sampleB span {
	position: relative;
	background: transparent url('bg.png') 0 0 fixed repeat;
	left: -5px;
}
	.sampleB span span {left: 5px;}
	.sampleB span span span {left: -2.5px;}

ps: по материалам chikuyonok.ru — Серёге привет!

Комментировать…

Теги: css

18 января 2010, 12:52 22 дня назад

minijQuery 0.0.2a (each, onclick, onmouse*) + demo with ZeroClipboard

Всем привет :)

По нужде добавил обработчики мыши (клик, влёт, вылет) и функцию обработки селектора — в простонародье each(). Рание немного модифицировал селектор + расширил обработку параметров, что бы можно было работать с each ;)

Работает each() вот так:

u$("#chars td").each(function(){
	u$(arguments[0]).onmouseover(function(){
		alert(arguments[0].tagName);
	});
});

Обращаться к передаваемому обжекту пока через arguments[0], в планах сделать через this, но там нужно сделать хитрые манипуляции + свой собственный eval() через добавление к заголовку джаваскрипта с контентом самой функции ;)

Для примера прикрутил к предыдущей статье ZeroClipboard, что бы при клике Копировать содержимое ячейки ;) Там всё просто:

создаём объект типа ZeroClipboard.Client()
через each() вешаем на onmouseover() обработчик
дальше уже ZeroClipboard вешает свой флешовый click() по срабатыванию которого и происходит копи-в-буфер

3 комментария

Теги: javascript framework minijQuery

15 января 2010, 18:25 25 дней назад

HTML CharCodes for special symbols (Spanish, Italian, German, French)

Есть проекты разны-вкусны, делаешь его на англицком и руссише, а тут клиент бац и говорит что нужно ещё пару-тройку европеских ленгвиджей, а CMSка то windows1251 и точить ой как лень под UTF8 всё и везде. Вместо желанных умляутов, клиент в лучшем случаи увидит букву без точек, запятых, а что ещё хуже знаки вопроса.

Простой выход — помахать дороговизной переработки, и объяснить то-сё, а можно просто сделать через ВИЗИВИГ реплейсы непонятных символов в альтернативные спецсимволы, а в простых инпутах заставить вставлять вместо тех символов спец-коды.

Пример таблички (бабосики):

Display	Friendly Code	Numerical Code	Hex Code	Description
€	€			Euro
₣		₣	₣	Franc
₧		₧	₧	Peseta
₤			₤	Lira

Посмотреть список char-codes для
Spanish, Italian, German, French

1 комментарий

Теги: html

15 января 2010, 17:19 25 дней назад

minijQuery, habraAlert fix %)

О, делал УТФ8 проектик, а тут мои скриптики перестали работать + некоторые крохотные правочки.

Сделал их в юникс кодировочке, а не дос ;)

ps: новый Джиквери 1.4 шикарен, скорость фантастическая… Вот ещё материальчики

Комментировать…

Теги: javascript framework minijQuery

14 января 2010, 15:34 26 дней назад

Чудестная новость — вышел jQuery 1.4 (малышу 4 года)

Появилось много нового и интересного.
Главная особенность, он стал ещё быстрее (куда уж больше ;)

Посмотреть списочек нового, можно прям на его сайте.

Почитать удобную шпаргалку по 1.4 можно здесь
Перенёс её себе, а то вдруг сайт помрёт ;)

Посмотреть шпору

ps: так же, в честь дня рождения и выхода новой версии стартанул проект посвящённый последней, читать здесь

Комментировать…

Теги: jquery

13 января 2010, 16:28 27 дней назад

CSS3: text-shadow

Везде уже модные крутые браузеры, которые хорошо поддерживают CSS3 (часть), картинок на сайтах скоро вообще не будет для декорации и выделения фонтов. Начнём с мелкого, рассмотрим text-shadow:

span{text-shadow: #color left top blur;}

По сути всё просто, указываем цвет, и отступы. Если указать минусовой отступ, тень поедет в другую сторону. Так же есть параметр blur, который тень размывает ;)

Выглядит довольно приятно
Простая тень
Обратная тень
Размазанная тень

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

Код примера выше, выглядит вот-так

.fire {
	text-shadow:0 0 4px white, 
		0 -5px 4px #ff3, 
		2px -10px 6px #fd3, 
		-2px -15px 11px #f80, 
		2px -25px 18px #f20;
}

зы: владельцы говнобраузеров ничего не увидят.

1 комментарий

Теги: css3

12 января 2010, 13:51 28 дней назад

Javascript API load from google ;)

<!-- Always need this javascript -->
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
	// Джикверюшка
	google.load('jquery', '1.3.2');
	google.load('jqueryui', '1.7.2');
	//other examples
	google.load('mootools', '1.2.1');
	google.load('prototype', '1.6.0.3');
	google.load('scriptaculous', '1.8.2');
	google.load('mootools', '1.2.1');
	google.load('dojo', '1.2.3');
	google.load('swfobject', '2.1');
	google.load('yui', '2.6.0');

</script>

Почитать доки (EN)

PS: каникулы кончились? :))

1 комментарий

Теги: google, javascript

24 декабря 2009, 17:33 более месяца назад

Javscript: MD5 и пример использования (gravatar)

MD5 — 128-битный алгоритм хеширования, лалала, который нельзя взламать простым компом за пару лет ;)

Сам алгоритм запутан и немного ужасен, сделанных (готовых реализаций) найти через гугл очень просто, их там очень много, но смысл одинаковый и результат тоже ;)

Посмотреть пример скрипта MD5

Есть сервис аватаров gravatar.com, в котором каждый может хранить на каждый свой мейл по 1 аватару. Работает давно и надёжно.

Как же получить с него нужный аватар? Для этого достаточно к урлу http://www.gravatar.com/avatar/ добавить MD5 хэш емейла и параметр s которым мы указываем размер ;)

md5 = MD5(mail.value);
var gravatar = 'http://www.gravatar.com/avatar/';
var sURL = gravatar + md5;
var sParams = (s != '') ? 's=' + s : '';
sURL += (sParams != '') ? '?' + sParams : '';
avatar.src = sURL;

Посмотреть Пример

1 комментарий

Теги: javascript, md5

Предыдущие заметки		Следующие заметки
←	Ctrl	→

Deerua about Coding

Блог о кодинге, автор Deerua

coding, javascript, css, html, php, jquery, mysql, deerua