+9
большая тёрка
Тёрка в тагах
Большая Тёрка / Мысли /
Личная лента
-
olegchir
ыыыть!
Gitlab
Node.js server automatic reloading without nodemon (grunt + watch task + grunt-shell-spawn)
Прячем говнокод
Познал всю офигительность генерации HTML вместо написания руками.
Короче, из-за хлама в HTML код быстро становится нечитаемым.
Так как устранить нечитаемую часть невозможно, хочется ее куда-нибудь спрятать с глаз долой.
Из-за чего я сегодня попробовал конвертнуть всё в JADE.
Это оказалось совсем не так легко, как вначале представлялось.
Но зато сразу стало действительно понятно, что происходит!Читать далееНапример, вот пустая страница, у которой есть заголовок с логотипом компании и адресом/телефоном, и прибитый к низу футер:
Замечаем, что адрес/телефон сцентрированы по вертикали и горизонтали.
(По вертикали - по высоте заголовка, по горизонтали - внутри некоей ячейки шириной 300 пикселей, которая стремится быть как можно правее. Почему 300 пикселей? Потому что нужна фиксированная ширина, а для мелкой ширины нужно ориентироваться на 630 и 750 пикселей. Откуда взялось это, особенно 630 - отдельный разговор :)
Вот как это выглядит в JADE->HTML:extends layout include whcenter block content body div#sticky_footer_body_wrap: div#adjust_width_to_device nav#top-navbar div#top-navbar-brand img#brand-img(src="/public/images/logo.png") div#top-navbar-phone: +fwhcenter("300px") div г. Новосибирск, ул. Большевистская, 109к1 div тел/факс: b (383) 251-01-18 div#sticky_footer: div#adjust_width_to_device div footer content
И замечаем, что тут нету никакого мусора, обеспечивающего центрирование.
Внимание на +fwhcenter("300px"), выделенный жирным шрифтом. Оно как раз и делает центрирование по ширине ячейки 300 пикселей.
Благодаря тому, что в строчку в JADE можно писать очень много тэгов, эту надпись можно свободно писать к чему угодно - и оно автоматически сцентрируется. Не боясь, что код превратится в кашу из тэгов.
В определении fwhcenter эта особенность писать много тэгов по горизонтали очень помогает:mixin fwhcenter(inner_width, outer_width) if block if outer_width div.whouter(style="width:#{outer_width};"): div.whmiddle: div.whinner(style="width:#{inner_width};") block else div.whouter(style="width:#{inner_width};"): div.whmiddle: div.whinner(style="width:#{inner_width};") block else
В одну строчку написан весь мусор по созданию центрированного блока.
Как видим, JADE умеет параметрические миксины, включая переменное количество параметров и проверку на их наличие, а также интерполяцию строк.
Ну и кому интересно, что же такое стили whouter, whmiddle, whcenter. Есть два файла с их определениями, один относится ко старым браузерам, другой к новым.
Я решил не генерить LESS'ом несколько вариантов проекта для разных браузеров, т.к. код в основном кроссплатформенный. Поэтому центрирование подключаются динамически, втупую вот так:link(rel="stylesheet", type="text/css", href="/public/stylesheets/src/fwvh-centerer-modern.css") | <!--[if lte IE 7]> | <link rel="stylesheet" type="text/css" href="/public/stylesheets/src/fwvh-centerer-compat.css"></link> | <![endif]-->
В варианте для современных браузеров это выглядит так:.whouter { display: table; position: absolute; height: 100%; width: 100%; } .whmiddle { display: table-cell; vertical-align: middle; } .whinner { margin-left: auto; margin-right: auto; }
В варианте для устаревших браузеров это выглядит так:.whouter { display: inline-block; top: 0; } .whmiddle { display: inline-block; top: 50%; position: relative; } .whinner { display: inline-block; top: -50%; position: relative; }
Зачем вообще старые браузеры, если Twitter Bootstrap не умеет браузеры до IE10? Мы побеспокоились об этом заранее и на старых бразуерах кое-что отображается.| <!--[if lt IE 9]> | <script type="text/javascript" src="/public/javascripts/vendor/other/html5shiv.js" ></script> | <script type="text/javascript" src="/public/javascripts/vendor/other/es5shim.js" ></script> | <script type="text/javascript" src="/public/javascripts/vendor/other/respond.min.js" ></script> | <![endif]-->
В результате видим что код стал более прозрачным, писать его быстрее и удобней.
Недостатком JADE/LESS/итп является время на декомпиляцию в случае ошибки, но в данном случае это время незначительно по сравнению с возможностью активной генерации тонн говнокода с помощью параметрических миксинов.
- Шаблоны для настройки nginx для проксирования nodejs+express
Вот тут показывают нужность этого дела: http://stackoverflow.com/questions/9967887/node-js-itself-or-nginx-frontend-for-serving-static-files
Читать далееНастройка nginx показалась даже почти удобной
Эти два файла работают поверх дефолтного убунтового конфига
Симлинк на этот файл в /etc/nginx/hosts-enabled
Можно раскомментить static_fallback и отдать, например, в какой-нибудь другой инстанс нодыupstream new.asterelectro.my { server 127.0.0.1:3000; } server { server_name new.asterelectro.my; root /my/sites/asterel3; location ~ ^/(public/) { root /my/sites/asterel3; access_log off; expires max; #try_files $uri @rw_static_fallback; } #location @rw_static_fallback { # rewrite ^(.*)$ /static-fallback$1 last; #} location / { proxy_pass http://new.asterelectro.my/; proxy_redirect off; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; proxy_set_header Host $http_host; proxy_set_header X-NginX-Proxy true; proxy_set_header Connection ""; proxy_http_version 1.1; proxy_cache one; proxy_cache_key asterel3$request_uri$scheme; } error_log /var/log/nginx/asterel3.log; access_log /var/log/nginx/asterel3.log; }
Симлинк на этот файл в /etc/nginx/conf.d
Раскомменчивать по мере необходимости, наблюдая в tail -f /var/log/nginx/error.log ошибки типа duplicated optionproxy_cache_path /var/cache/nginx levels=1:2 keys_zone=one:8m max_size=300; proxy_temp_path /var/tmp; #default_type application/octet-stream; #sendfile on; #keepalive_timeout 65; #gzip on; gzip_comp_level 6; gzip_vary on; gzip_min_length 1000; gzip_proxied any; gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript gzip_buffers 16 8k;
Установка Gnome3 и как потом от него избавиться
Помогите придумать кошерный алгоритм поиска пути?
Yii2 1970
Люди едят кактус. Не шутка. Колятся, плачут, но едят.
Если тут есть юристы...
Утреннее-обеденное
