Шпаргалки для разработки

Мар 19

Давно хотел запостить кучу крайне полезных шапргалок по html, css, javascript.

Итак:

HTML 5

read all »

Web     56 Comments

ZenCoding – плагин для верстки

Фев 02

Наткнулся тут в ридере на статейку.
Есть такая штука, зовется ZenCoding.
Что делает:
Например надо вбить шапку

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ru">
<head>
 <title></title>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<body>

</body>
</html>

Делается это одной командой:

html:4t

а вот так можно забить выпадающий список:

select>option#item-$*3
<select name="" id="">
<option value="" id="item-1"></option>
<option value="" id="item-2"></option>
<option value="" id="item-3"></option>
</select>

Крайне удобная штука.
Я юзаю gedit, плагин для него можно слить тут

Web     2 Comments

Вертикальный текст в html

Сен 24

Когда я делал карту сайта, захотелось отобразить заголовки категорий вертикально. Но ни html, css пока сделать такого не позволяют. Хотя нет, css позволяет задать порядок расположения слов для языков, у которых порядок написания справа налево и сверху вниз (китайский например), но для кирилицы это не пойдет.
Как еще можно сделать текст вертикальным? Можно обрезать слово по буквам и разместить их в столбик. Можно применить javascript.
Есть еще один способ – создать картинку на лету из svg. read all »

Web     11 Comments

Карта сайта – какая у вас?

Сен 23

Карты сайта обычно у всех одинаковы – это простыня со списком ссылок, которых чем больше – тем лучше. Считается, что так лучше в плане сео. И хотя для ботов уже давно делают свою карту, в xml, многие продолжают делат как раньше.Особенно часто для вп используют плагин dagon sitemap generator.

Но можно все сделать красиво. Нашел вот примерчик, как можно сделать красивую карту сайта.

slickmap-css-sitemap

Данный пример хорошо подходит для коммерческого сайта, а вот для блога переделать его проблемно. Особенно, если постов много и категорий.
Немного поколдовав, я сделал вот такую карту сайта с использованием jQuery . Под осликами наверно не будет корректно отображаться.
sitemap read all »

Web, Wordpress     18 Comments

Скрыть/показать несколько элементов – примеры jQuery

Сен 19

Одновременно выводит несколько скрывающихся/появляющихся блоков. Я использовал при создании своей карты сайта.

// Andy Langton's show/hide/mini-accordion - updated 18/03/2009
// Latest version @ http://andylangton.co.uk/jquery-show-hide

// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {

// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='Show';
var hideText='Hide';

// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append(' (<a href="#">'+showText+'</a>)');

// hide all of the elements with a class of 'toggle'
$('.toggle').hide();

// capture clicks on the toggle links
$('a.toggleLink').click(function() {

// change the link depending on whether the element is shown or hidden
$(this).html ($(this).html()==hideText ? showText : hideText);

// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');

// return false so any link destination is not followed
return false;

});
});

Section one: a div with a paragraph

You can show/hide an entire div by giving it a class of «toggle». Links and other child elements will work fine too. The element directly before this one is a heading, so it gets a show/hide link appended.

Section two: single paragraph

A single paragraph can be hidden by giving it a class of toggle too. I can’t help but be impressed by how easy it is to use jquery – even for someone with limited programming and javascript experience like me. Again, the preceding element is a heading.

Now: a list

  • You can even hide a list
  • Just give the <ul> the toggle class
  • This time the preceding element is a paragraph

    • Подсмотрел тут

Web, Wordpress     5 Comments

Календарь в стиле iCal для архивов в wordpress

Сен 09

Давно пылится в черновиках красивый примерчик для календаря. В оригинале календарь под хтмл, я приладил для вордпресса, на страницу архивов по месяцам.
Вот тут можно посмотреть календарь в действии, скрин
calendar read all »

Wordpress     13 Comments

Регулярка для многострочного HTML кода

Июн 30

Например, если

<TAG1>

<TAG2>

<TAG3>

$pageHTML = preg_replace("/\n/", "", $pageHTML);
$pageHTML = preg_replace("/\r/", "", $pageHTML);
Web, Скрипты     0 Comments

10 полезных кроссбраузерных свойств CSS.

Май 19

Небольшой обзор полезных качеств некоторых CSS свойств

1.Overflow

Его итак все знают. Включает прокрутку, если содержимое не влазиет в блок. Однако есть у него замечательное качество – данное свойство может растянуть блок без обтекания(float).

Проблемы иногда бывают в огнелисе – элементы сжаты по высоте, для исправления нужно выставлять обтекание. Обтекание может принести проблем при auto высоте или при естесственно отпозиционированных элементов.

Таким образом, используя overflow:hidden; для блочных элементов, можно растянуть элемент по высоте без выставления обтекания.
read all »

Web     4 Comments

Верстка: Дивы,таблицы, как надо и как не надо

Апр 24

Давно лежит в черновиках у меня статейка про прелести и ужасы обоих подходов в верстке. Когда то, давным-давно, никто даже и не загонялся по поводу каких-то дивов, верстали таблицами и все было гуд. Я сам так делал.

Вроде все просто, посмотрел на дизайн, накинул мысленно сетку таблицы, разрезал, разверстал. Проблема возникала, когда требовалось разверстать сложный диз, там таблица а в ней еще таблица а в ней еще таблица и т.д. Вобщем, ужас.

С дивами вроде проще – можно и стиль прописать без излишнего кода и понятно будет для чего этот див. Но иногда их очень трудно отпозиционировать относительно друг друга. Сейчас уже мне в дивах намного проще сверстать.
read all »

Web     42 Comments

Ускоряем загрузку сайта

Апр 20

Краткий смысл статьи – кешируйте все, что только можно. Некоторые вещи конечно мелочи, но именно мелочи делают профессионала профессионалом. read all »

Web     10 Comments
« Previous Entries