MyFreeWeb.ru

CSS-сетки (CSS grid systems) - это же фиксированная разметка! Размеры элементов в пикселях - как 2002! Я не могу увеличить страницу и просто читать - нужно прокручивать. Не могу уменьшить окно и просто читать - нужно прокручивать. Зачем?

Я представляю вам альтернативу... Invisible CSS framework!

Я пользовался масштабируемой версткой довольно долго, и решил отделить основу. Не повторяй себя (Don't Repeat Yourself), да?

<aside class="sideleft">
My cool sidebar.
</aside>
<section class="withls"> <!-- that means "with left sidebar" -->
Lorem ipsum dolor sit amet...
</section>

В Invisible есть сброс (CSS reset), настройки шрифтов, основные margin'ы, 50/50 и стандартный 2/3-колоночный макет (layout не совсем «макет», но слова лучше я не нашел. разметка?). Он модульный и написан на CleverCSS, а собирается pake.

Качать здесь, пользуйтесь на здоровье - public domain. А еще можно забрать исходники из Bazaar'а ( bzr branch lp:invisible ) и собрать самому - например, с меньшим количеством модулей (для сборки нужны clevercss и cssutils).

Я таки изобрел make. Да, тот самый, которым собирают программы. Make, cmake, rake, а теперь Pake.

Фишка в том, что Pakefile'ы пишутся на YAML. Это действительно простой и приятный язык, не зря же Google использует его для описания приложений в App Engine (:

Например, очень простой Pakefile:

default:
  python:
    print 'Hell-o-world'
  shell:
    uname -a

Или очень сложный:

vars:
  flags: -a

uname:
  shell:
    uname %{flags}

default:
  target: uname

Документация расположена на pake.myfreeweb.ru, сам проект на Launchpad, а всякие пузомерки - на Ohloh. bzr branch lp:pake и вперед ;)

Ох, кажется, я сделал свой первый jQuery-плагин =)

Он называется JACG: Just Another Corners&Gradients (просто еще одни углы и градиенты), и он просто работает.

Фишка в том, что он старается быть как можно более нативным и использовать самые лучшие технологии, доступные на запущенном браузере (например, в Opera <= 10.10 используется SVG-градиент и на нем же уголки, а в 10.50 - SVG-градиент и CSS-уголки. CSS-уголки и градиенты на Firefox >= 3.6, CSS-уголки и градиенты картинкой - тоже мое приложение - на 3.5 и ниже). Код появился в моих личных проектах. Когда я стал его использовать сразу в двух, решил сделать плагином, а не копипастом.

Оно все размещено в проекте на Launchpad - код, багтрекер и все такое. А еще есть страничка на jQuery, там можно скачать плагин и проголосовать за него. Но качать лучше Bazaar'ом, чтобы потом обновлять удобно было и вообще, VCS же. bzr branch lp:jacg

Не секрет, что в разработке Django-приложений нет ничего особенного. Точнее, не требуется ничего лишнего. Django - это Python. Значит, нужен текстовый редактор и консоль. И конечно же браузер - но это уже для тестирования. Но для того, чтобы писать было удобно, нужно IDE. Или продвинутый редактор. Emacs - очень продвинутый редактор ;)

Вот так выглядит мой Emacs - ничего лишнего, все нужное. Проверка синтаксиса делается с помощью Flymake + pyflakes (или pylint, pychecker), но не это главное. То, о чем я хочу рассказать - это сниппеты. Как? Легко.

Yasnippet - это оно. Ставить надо полную версию, а не bundle, который в одном файле. Но там же нету сниппетов для Django! Не вопрос - я все сделал. bzr branch lp:django-mode, читаем README, делаем и наслаждаемся. В комплекте еще режим для шаблонов и функции для вставки i18n тегов (C-c C-t в питоновом коде "_(%выделенное%)", в html-шаблонах "{% trans "%выделенное%" %}").

А можно еще скачать мой конфиг (Yasnippet в комплекте же). Короче, чтобы меньше всего париться и получить готовый IDE:

sudo port install tidy # или apt-get, если на Debian/Ubuntu. У меня OS X ;)
sudo pip install pyflakes # easy_install - уныл, но тоже работает
cd ~/Dropbox
bzr branch lp:django-mode
bzr branch lp:~lol2fast4u/+junk/emacs-dir emacs
echo "(add-to-list 'load-path \"~/Dropbox/emacs\") (load-file \"~/Dropbox/emacs/config.el\")" > ~/.emacs

Первую команду, кстати, можно пропустить.

Допустим, нам нужно использовать один скрипт для нескольких страниц (а это делать нужно, ибо экономия HTTP-запросов. по поводу того, что "качать только что надо сейчас" - ну все равно же кеш). Как определить разные действия в зависимости он страниц?

Да очень просто.

<head> ... <meta name="internal" content="mainpage" /> </head>

if (window.rel == 'mainpage') {
     $('#sidebar').removeClass('noJs').slideDown();
}
else if (window.rel == 'comments') {
     $('.comment').addClass('js');
}

Но самая фишка в том, что умеют шаблоны Django ;) в index.djhtml:

<head>
     ...
     <meta name="internal" content="{% block pagerel %}unknown{% endblock %}" /> {# For Javascripts, etc. #}
</head>

И в наследующих шаблонах ставим все как надо. Например, post.djhtml: {% block pagerel %}blogpost{% endblock %}

Git - одна из самых известных распределенных систем контроля версий (DVCS), изначально созданная для разработчиков ядра Linux. Из-за последнего, она работает на патчах. Патчи, патчи, везде патчи.

В централизованных VCS каждый contributor (как бы перевести нормально??) присылал патч одному из committer'ов, который применял его вручную. Git создавался для облегчения всего этого.

А DVCS создавались для борьбы с патчами. Именно так, да. Любой пользователь создает свою ветку или форк, работает в ней как хочет, а когда все готово - создает merge directive (или pull request), то есть просит объединить ветки. Скажете, что в Git/GitHub так можно? Да, через жопу, но можно, но пользователи Git все равно патчи патчат.

Но самое главное, что бесит в Git - он работает только по одной модели (shared working tree, "общее рабочее дерево"). То есть в папке есть одно рабочее дерево и можно переключаться между ветками командой switch. Такая модель использования придает скорости и занимает меньше места на диске. Но в то же время она абсолютно неудобна в использовании. Вывод? Только для больших проектов.

В Mercurial то же самое, но слегка проще. А вот в Bazaar такой способ работы сильно опционален. rebase - вообще плагин (: Directory is a branch - это очень правильная идеология. Потому что с ее помощью можно сделать то же shared WT, только каждую ветку можно будет просто посмотреть файловым менеджером (не залезая в .скрытые_папки), а можно работать с простыми ветками, если проект небольшой. Вот так вот.

С новым годом, который уже два дня как наступил. Вы все уже начитались этих поздравлений в своих Google Reader'ах и прочих читалках, да и вообще везде. Но не смотря на название, псот совсем о другом.

PyMarkup - это python-модуль для создания разметки. Делается он не столько для простоты, сколько для интеграции с приложением. шаблоны больше не нужны ;)

Идея давно уже лежала в моем Evernote (пользуясь случаем, поздравляю их с 2 миллионами пользователей!), но вот только недавно я взялся за реализацию. Пока оно умеет блоки, картинки и ссылки в виде Python'овых объектов преобразовывать в XHTML... Короче, скоро будет больше и все такое. Документация тоже будет, да.

А теперь напишем скрипт, например 1.py:

import pymarkup as p
spam = [p.e.Text('Welcome to TestSite.'),
        p.e.Image('/logo.png', 'logo', id='logo')]
spam.append(p.e.Block(id='wrapper'))
spam.append(p.e.Snippet('<p>This is a test!</p>', parent='wrapper'))
eggs = [p.e.Title('Test')]
print p.Markup(spam, eggs).render('xhtml')

<?xml version="1.0" ?>
<!DOCTYPE html
  PUBLIC '-//W3C//DTD XHTML 1.1//EN'
  'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>
            Test
        </title>
    </head>
    <body>
        Welcome to TestSite.
        <img alt="logo" id="logo" src="/logo.png"/>
        <div id="wrapper">
            <p>This is a test!</p>
        </div>
    </body>
</html>

Python'ист, Ruby'тель, Perl'овик! Ретвитни, добавь в закладки, поделись на фейсбуке, короче сделай эту картинку популярной!

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

Но как быть с играми? Да, при знании jQuery (а он намного проще ActionScript!!) можно сделать простую игру ;)

Пример - сборка АК, подсказал один товарищ. Надо не так много: средство против лени, фото разобранного автомата (идите в гугл!), графический и текстовый редакторы, нормальный браузер (Safari, Chrome или Firefox).

Я не буду подробно расписывать каждую строчку - скажу лишь, что с помощью jQueryUI мы придаем деталям draggable и создаем цели, куда они droppable. Тут сильно не доделано все - можно деталь поместить не в то место и отображается все это только в консоли. Доработаете и сделаете таймер - будет вам игра :)

<!DOCTYPE HTML>
<html><head><title>AK Game</title>
<script src="http://myfreeweb.ru/media/mfwjs/jquery.1.3.2.min.js" type="application/x-javascript"></script>
<script src="http://myfreeweb.ru/media/mfwjs/jquery-ui-1.7.2.custom.min.js" type="application/x-javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.piece').draggable({ cursor: 'crosshair' });
$('#t_2').droppable({ drop: function(event, ui){
console.log('dropped to 2'); } });
$('#t_3').droppable({ drop: function(event, ui){
console.log('dropped to 3'); } });
$('#t_4').droppable({ drop: function(event, ui){
console.log('dropped to 4'); } });
});
</script>
<style type="text/css">
.target { position: absolute; }
#t_2 { margin: 55px 0px 0px 215px; width: 120px; height: 150px; }
#t_3 { margin: 10px 0px 0px 277px; width: 177px; height: 22px; }
#t_4 { margin: 5px 0px 0px 100px; width: 128px; height: 32px; }
</style></head>
<body>
<div id="ak">
  <div class="target" id="t_2"></div><div class="target" id="t_3"></div><div class="target" id="t_4"></div>
  <img src="1.png" alt="включи картинки!"/>
</div>
<img src="2.png" id="2" class="piece" alt="включи картинки!"/>
<img src="3.png" id="3" class="piece" alt="включи картинки!"/>
<img src="4.png" id="4" class="piece" alt="включи картинки!"/>
</body></html>

Все вебмастера знают о том, как прятать целые страницы от поисковых роботов (robots.txt, meta-теги). Но далеко не все догадываются, что можно запрещать индексирование текста/анкора/добавление в сниппет определенной части страницы.

Это очень полезно, если в сниппеты попадают информационные ссылки и всякие копилефты из подвала, а еще... если индексируется пример статьи, который каждый раз разный (юзер кликает, а там такого нет). Примеры из личного опыта ;)

Итак, все просто для Google. У остальных вряд ли есть что-то подобное.

где %s - index, anchor, snippet или all. Смотря что нужно отключить.
Например:

Официальная документация - здесь.