![[info]](http://l-stat.livejournal.com/img/userinfo.gif){kind=small}
Если вы зашли в этот журнал и что-то сподвигло вас добавить меня в друзья, то вам, наверное, во-первых интересно то, что я пишу, и во-вторых есть что сказать. Так вот, чтобы я не удивлялся каждый раз когда меня добавляют и не вопрошал «Кто это?» напишите хоть что-нибудь о себе в этот пост: кто вы, откуда, почему добавили меня?
Я не хочу работать дома, тут очень много отвлекающих факторов, поэтому, собственно, сабж: как работать?!
Я трижды честно пытался фрилансить, и все три раза завершились полными провалами: один раз я отказывался продолжать работать; один раз я заебался, потому что очень честный; один раз меня кинули.
Я не хочу подробно описывать каждый из случаев, я просто хочу читающим эту статью рассказать несколько рецептов:
1. Всегда требуйте предоплату в размере 50%, не начинайте работу на доверии, что заплатят потом или что деньги уже отправлены (здесь я позволю всё-таки перейти на личности — вот эти друзья меня кинули, хотя их работу я сделал максимально быстро, пожертвовав даже немного своей основной работой).
2. Никогда, нет НИКОГДА не пытайтесь заводить дружеские отношения с вашим заказчиком, иначе некоторые нужные грани стираются.
3. Всегда обозначайте сумму работы и её объёмы, избегайте фраз типа: «Ну в общем вот пара макетов, потом ещё пару дошлю, но они похожи, за всё n рублей» и вообще избегайте доделок после начала работы. «Ещё» не должно быть только со стороны заказчика: ещё макеты = ещё деньги!
4. Оговаривайте браузеры под которые вы верстаете, на это уйдёт 2 минуты (а скопировать отсюда «IE6-8, FF3.5, Opera 10, Google Chrome 3» ещё быстрее). Вёрстка под остальные версии браузеров избыточна и каждый браузер = дополнительные деньги. Иначе заебётесь верстать под Сафари 3, только потому что заказчик, гад, под Маком.
5. Оговаривайте время, в которое вы работаете (это актуально если у вас есть постоянная работа), иначе срочный проект и срочные баги могут застигнуть вас в 1 час ночи или в разгар рабочего дня.
Самое главное, если у вас есть устраивающая вас основная работа, то лучше не фрилансьте (в этом отношении мне совсем недавно стала понятна позиция Студии Лебедева в этом вопросе). Потерять то, что вы имеете гораздо легче, чем приобрести, разрываясь между двух огней. Работайте на текущей работе лучше и интенсивнее и желаемое повышение не заставит себя ждать, если ваш работодатель не идиот, а иначе нужно делать выводы.
Есть ещё одно замечание к вышеописанному методу Сергея: нужно сменить нативную поддержку IE7 и IE8 полупрозрачных png на фильтры, иначе, решившись в 6-ке, баг появится в более старших версиях!
Сегодня у нас скидки на следующие товары:
- Холодильник
- Пылесос
- Стиральная машина
Лично я, каждый раз встречая это, задаюсь вопросом: «Как более семантично заверстать такое?». Т.е как связать пояснительный текст к списку со списком. Раньше я либо забивал, либо обёртывал это каким-нибудь div'ом. А сегодня, подумав, решил что для таких целей, также как и для «Адрес: ул. Крестинского 53Б», как никак лучше подойдёт dl+ (<dl><dt></dt><dd></dd></dl>). Т.е теперь код такой
<dl>
<dt>Сегодня у нас скидки на следующие товары:</dt>
<dd>
<ul>
<li>Холодильник</li>
<li>Пылесос</li>
<li>Стиральная машина</li>
</ul>
</dd>
</dl>
Вечером опробовали с Катюшиком пиратский манчкин на чистом англише, ничего так =) Я, как честный джентельмен.... Ну ладно, она меня сделала =)
<!--[if lte IE 6.5]><iframe></iframe><![endif]-->var myVar = (thatVar % 2 == 0 ? "2px" : "2px");У вас есть похожие примеры?
Дело в том, что у фильтра AlphaImageLoader есть атрибут sizingMethod и у этого атрибута, как я раньше думал, есть два возможных значения: crop и scale. Работа каждого из них мне была понятна, сrop работает как backgroundImage в точке 0 0, а scale растягивает картинку до размеров контейнера. Оказалось что есть ещё и третье значение атрибута sizingMethod — это image (которое используется по умолчанию). image работает как crop, если размеров контейнера хватает чтобы вместить картинку, а вот если контейнер меньше, тот тут начинается волшебство: картинка всё равно покажется полностью, а контейнер не будет при этом растянут. Именно поэтому сработал мой метод с шириной и высотой в 1 пиксель и пустым src, я просто забыл указать в фильтре sizingMethod и применился image.
Конечно же я исправил свою оплошность (после 3-го раза у меня не работал scale) и в этот раз я не буду сюда копировать код, а просто дам вам ссылку на одну из последних версий.
К сожалению полностью побороть проблему !important так и не получилось, потому что если есть селектор:
#my_id {background-image: url('my-image.png') !important;то моим:
* html .g-png-fixed {background-image: none !important;}этот селектор не переопределить из-за того что специфичность первого селектора выше.
Мы с Русланом родили такой метод решения этой проблемы: нужно определить элемент которому не удаётся переопределить бэкграунд (сделать это очень просто: нужно задать background-image и посмотреть тут же изменился ли?), если такое есть, то мы бежим вверх по дереву и у всех элементов с id запоминаем id, а у которых нет — создаём id и запоминаем. Потом в html'е создаём css-правило (делать это я научился во-второй раз) составленное из всех id'шников запомненных нами и получаем самое длинное правило, которое в 99% нас спасёт (а 1% это сверхэкзотический !important внутри атрибута style элемента). Реализация этого решения будет в следующий раз =)
Итак, имеется страница, на ней есть картинки, скроллишь вниз страницы, нажимаешь F5 и часть картинок, которые при скролле вышли из области видимости, пропадает. На поиск причины ушёл час: оказалось что Опере очень не нравятся картинки в inline блоках. Подчеркну, что касается это всех картинок, т.е и вставленных с помощью тега img и правилом background-image! Лечится, как уже можно догадаться, заданием тем же блокам display: inline-block и танцами с бубном хаком для ИЕ6 (для него пишем display: inline).
Но всё-таки один вопрос: а какого вообще хрена? Не даёт мне понять почему этот баг возникает? И кстати, это уже не первый баг Оперы 10-й. Есть мнение (моё) что ребята из Opera Software глядят не в ту сторону, вместо поддержки CSS3 селекторов, прикольных режимов Turbo, и новых охуенных дизайнов лучше бы движок свой отладили, а то от версии к версии баги множатся и не ровен час весь мир верстальщиков будет ругать уже не ИЕ6, а Оперу 10 или какая там будет?
Ant даже поставился но чего то просит JDK (Eclipse'овский не просил), для JIRA нашёл два плагина: «Jira Browser» и «Atlassian JIRA connector». Первый тупо не работает, т.е делаешь Apply сисема говорит: надо перезагрузиться — и вылетает. Запускаешь заново и всё по старому. Со вторым плагином ещё интереснее: когда пытаешься его включить он просит подключить плагин JUnit, которого в списке нет. Судя по этому проблема не новая, и не решенная до сих пор (очень обидно, кстати)! Вот с Zen Coding'ом всё хорошо, большая часть его уже есть, а наличие Killer Feature Live Templates действительно можно создать много чего.
В общем-то мне ещё очень непривычен интерфейс, но упёртость даёт о себе знать: завтра буду добивать Ant, если поставится то можно будет забить на JIRA connector (теоретически конечно, потому что это будет означать опять тонны писем на почту =(((( и попробовать неделю посидеть под WebIde.
А чего в ней вообще такого, спросите вы? Ну, как минимум в ней есть Refactoring и очень хороший Code Assist (Аптане с её багами до него ещё расти и расти, но Аптана пока всё-таки роднее).
P.S. Вспомнил ещё одну странность, почему то WebIde не удаётся подключиться к репозиторию плагинов из Джетстайловской сетки (хотя вроде бы обращается по 80 порту; дома у меня всё нормально и там и там ВайФай), тоже наводит на определённые мысли.
1. Большой экран
2. Есть возможность читать PDF
3. Хорошее звучание музыки и есть место (в гигабайтах) под неё
Кроме iPod и субноута не нашёл пока ничего, но первое дорого, а второе уже великовато.
Может кто знает что-нибудь такое?
Яндекс.Маркет выдаёт http://market.yandex.ru/model.xml?model
Лучше если это будет всё-таки плеер, потому что в телефоне есть ещё телефон, а мне это не очень то нужно, меня устроит любой плеер, если к примеру есть возможность его перепрошить.
Я бросил пить полтора года назад, за это время только один раз сорвался о чём очень сильно жалею до сих пор, но уверен что это было нужно, потому что дало мне понять, что сделал всё правильно. Просто тогда я выпил очень мало, а было мне очень херово! Если не считать того инцидента, то за всё время я больше не пил ни капли алкоголя. И особенно тяжело становится на праздниках и прочих, нет, не от соблазна выпить, а от постоянных уговоров всех вокруг «выпить немножко, это же не страшно». Какие только доводы не приводятся в пользу этого, что ей богу смешно. Сука блять, ну хули ж вам надо то от меня. Нажираетесь, калечите свою жизнь, меня в это не вовлекайте, а!
Отдельный смех это доводы «расслабиться» и мнимого «неуважения». Я расслабляться умею получше других, например, поспать подольше, покушать повкуснее... Кто-то бухает каждые выходные, а мы вот на матч ЦСКА-Манчестер Юнайтед слетали, сможете таким похвастаться? Нет? А мы на всю жизнь получили и детям рассказать не стыдно! А про неуважение это вообще смешно, я уважаю больше других того, кого поздравляют и желаю ему счастья и здоровья. И то и другое можно легко разрушить, нажравшись один раз и совершив глупость. И хорошо что с вами этого не произошло, молодцы, продолжайте дальше... Всё равно я буду прав и некоторые уже об этом знают!
Не надо меня лечить! Кулаков (директор JetStyle) хорошо сказал: алкоголь относится к нехорошим вещам, которые я сам не употребляю, но не осуждаю других (не буквально, но как-то так). Я не мешаю вам убивать себя, а вы не мешайте мне!
.myclass {behavior:expression((function(){})(this)читается WebKit (Chrome, Safari) браузерами и стили после ней браузер не воспринимает и, соответственно, не применяет. Опытным путём было установлено, что проблема в этой конструкции в символах "{" и "}", которые в сумме вызывают какие-то метаморфозы в браузерах, причём если убрать "{", то баг исчезает, а если "}", то остаётся. Естественно, наличие ";" в конце правила, тип селектора (т.е даже если это будет селектор для ИЕ, вроде * html [selector]), тип правила (например предварение правила "//" или "_") ситуации НЕ исправляют!
Особенно знание этого полезно людям, любящим объединять все стили в один файл, не вынося стили для ИЕ в отдельный файл, и использующим star-hack и иже с ним!
Ant это тулза для автоматизации задач по сборке ПО (так говорит Википедия)
И внезапно мне написали по поводу одной из последних вёрсток, что у них там что-то не получается собрать картинки с css'ками воедино (а собирали тоже Ant'ом). Оно и понятно, ведь только я, как верстальщик, знаю как между собой взаимодействуют стили и картинки. Ну я и взял и написал по примеру в Техногрете (я не буду здесь писать то же самое, что есть там, зачем дублировать?) свой первый Ant сценарий, который склеивал css'ки и в ту же папку копировал все картинки. И так мне это понравилось... Что я стал изучать дальше.
Вообще, несмотря на то что есть книжки на-английском по Ant'у, у него очень неплохая документация и большей частью я при постановке задачи находил решение именно там (ну и Гугл там в помощь), главное знать что именно хотеть. Например мне нужно было, чтобы в проекте все CSS'ки клеивались в одну, т.е нужно было прошарить все папки, найти внутри все CSS'ки и склеить их в одну. Вот как это написать на Ant'е:
<project name="Build CSS" default="concat-css">
<target name="concat-css">
<echo>Concatenating files</echo>
<concat destfile="build/all.css">
<fileset dir="./dev" includes="**/*.css"/>
</concat>
</target>
</project>
Всё достаточно понятно. Относительно файла с этим сценарием мы сканируем папку dev, находим там все CSS'ки и склеиваем их в файл build/all.css. В html'ке теперь достаточно подключить только этот файл, а не следить за перемещениями, добавлениями новых файлов — этим теперь занимается Ant.
А теперь допустим, что нам надо какие-то файлы подключить сначала, а какие-то в самом конце.
<project name="Build CSS" default="concat-css">
<target name="concat-css">
<echo>Concatenating files</echo>
<concat destfile="build/all.css">
<filelist dir="./dev">
<file name="base.css" />
</filelist>
<fileset dir="./dev" includes="**/*.css" excludes="base.css"/>
</concat>
</target>
</project>
Теперь первым в all.css будет идти содержимое файла base.css (в нём я обычно сбрасываю дефолтные стили и создаю какие-то дефолтные), а затем содержимое всех остальных.
Осталось добавить копирование всех картинок в ту же папку и мы получим готовый сценарий (в качестве бонуса я не стал резать свой сценарий и в нём ещё есть генерация стилей для IE, но эту часть я скоро перепишу уже)
<project name="Build CSS" default="build-lib">
<property name="base.dir" value="./dev"/>
<property name="dest.dir" value="./build"/>
<description>
Builds all CSS files and copies images
</description>
<target name="build-lib" depends="delete-dest-dir, concat-css, concat-css-to-ie, copy-images" description="Builds all CSS files and copies images"></target>
<target name="delete-dest-dir">
<delete dir="${dest.dir}" />
</target>
<target name="concat-css">
<echo>Concatenating files</echo>
<concat destfile="${dest.dir}/all.css">
<filelist dir="${base.dir}">
<file name="base.css" />
</filelist>
<fileset dir="${base.dir}" includes="**/*.css" excludes="base.css, **/*.ie.css" />
</concat>
</target>
<target name="concat-css-to-ie">
<echo>Concatenating files to IE</echo>
<concat destfile="${dest.dir}/all.ie.css">
<fileset dir="${base.dir}" includes="**/*.ie.css" />
</concat>
</target>
<target name="copy-images">
<echo>Copying images</echo>
<copy todir="${dest.dir}">
<fileset dir="${base.dir}">
<include name="**/*.gif" />
<include name="**/*.jpg" />
<include name="**/*.png" />
</fileset>
<mapper type="flatten" />
</copy>
</target>
</project>К сожалению, всё это требует запуска при каждом изменении и иногда может подвесить систему (например minify для JavaScript'а), поэтому нужно выбрать приоритетные задачки и только их поставить в Автоматическую сборку.
Но меня всё равно не устраивало моё же решение. Во-первых, вторая реализация увеличила количество кода, и от этого надо было избавляться как-то. Решение было заложено в самой же реализации, я почему-то создавал дополнительные стили для класса, указываемого всем элементам (так я борол невозможность из JavaScript'а переопределить !important правило), хотя нужно было этот стиль написать дальше в файле, а элементам просто присваивать класс.
Во-вторых, меня не устраивала необходимость указывать путь к файлу z.gif и то что это делалось через JavaScript в теге head как-то так: <script>var z_gif = "[path_to_z.gif]/z.gif"</script> (это нужно для img элементов, чтобы вместо непофикшенной картинки была пустота). Для начала я попытался решить эту проблему в лоб и указал путь в expression'е. Но так как вообще этот z.gif указывается для src картинки и путь должен быть относительно открытого html-документа или абсолютным, то идея провалилась из-за невозможность создать абсолютный путь из expression'а. Бросив эти попытки, я стал думать дальше. Следующим шагом я попробовал не указывать src, но тогда вокруг картинки появлялась несуразица (незагруженная картинка отображается в IE6 соответствующим значком). А потом я зачем-то попробовал указать картинке (<img>) ширину и высоту в 1 пиксель и это сработало. Т.е непофикшенная картинка не отображается, но левый верхний пиксель пофикшенной становится темнее (на самом деле до картинки в 1х1 ужимается исходная картинка и мы это видимо). Ну а тут дело уже было за малым: нужно было сделать так, чтобы на месте картинки была пустота, а для этого подошло просто не указывание src и картинка пофикшена без z.gif.
* html .g-png24 {
behaviour:expression(
(!this.fixedPNG?
(function(el){
var fixSrc = "", sizingMethod = "crop";
if (el.tagName.toLowerCase() == "img") {
fixSrc = el.src;
el.style.width = 1;
el.style.height = 1;
el.src = "";
}
else {
var tmpImg = new Image();
tmpImg.src = el.currentStyle.backgroundImage.split('\
if (parseInt(tmpImg.width) == 1 || parseInt(tmpImg.height) == 1 || el.className.indexOf('g-png-24__scaled')
sizingMethod = "scale";
}
fixSrc = el.currentStyle.backgroundImage.split('\
el.className += " g-png-fixed";
}
el.runtimeStyle.filt
el.fixedPNG = true;
})(this):'')
);
}
* html .g-png-fixed {
background-image: none !important;
}
Теперь нужно всего лишь подключить файл с фиксом (желательно через CC) и указывать нужным элементам класс g-png24 и ВСЁ!
Если вам не нравится моё решение, то можете воспользоваться решением Виталия Харисова, он использует дополнительный элемент для фикса, хотя само решение легче. Также можно воспользоваться iePngFix, говорят что там даже есть поддержка background-repeat, но я в общем-то научился обходиться без него, а универсальность iePngFix говорят (опять же) иногда подводит при большом количестве картинок и часть из них так и остаётся непофикшенными.
try{
document.execCommand("BackgroundImag
}
catch(e) {}
Так вот, это может стать источником проблем в Opera 10: почему-то именно из-за этого в ней появляется вверху отступ для body где-то в 10 пикселей, который никак не пофиксить. Как оказалось эта конструкция портить работу JS в Опере и она начинает глючит, вывод: нужно как-то определять браузер перед этим, например через jQuery'вский
$.browser или вот так:
var m = document.uniqueID
&& document.compatMode
&& !window.XMLHttpRequest
&& document.execCommand;
try{
if(!!m)
{
m("BackgroundImageCache", false, true)
}
}
catch(oh){};
ну и самый оригинальный способ (это писать в CSS):
html {filter: expression(document.execCommand("Backgrobackground-image: "none".Сложность решения этой проблемы в том, что из JavaScript'а никак не присвоить ключ !important и никак не достучать до того, использовался ли !important или нет. Это естественно меня не остановило и я стал экспериментировать.
Сначала я пробовал достучаться до currentStyle, вместо style, но вредный IE6 не даёт этого сделать ни в какую. Потом я пробовал создавать рядом второй элемент, копируя в него все стили, кроме backgroundImage, а его задавать, но !important свойство перекрывало и это. Затем я пришёл к тому, что нужно генерить в html-документ тег style, в котором прописывать
background-image: none !important для определённого класса, задаваемого всем фиксируемым. Но, создавая доп.элемент до этого, я обнаружил, что для того чтобы поставить его рядом с текущим, нужно ждать дозагрузки родителя (а в момент expression'а его ещё не существует в DOM-дереве). Затем правда я обнаружил, что на момент отрабатывания expression'а уже создан head и можно запихать стили в него.Вторая проблема была в том, что создавая тег <style> через
document.createElement('style'), нельзя потом написать ему .appendChild(document.createTextNode()) и .innerHTML=. Пробившись 2 часа я обнаружил, что писать нужно .styleCheet.cssText =, собственно говоря, после этого всё заработало! Теперь мой expression выглядит так:
* html .g-png24 {
behaviour:expression(
(!this.fixedPNG?
(function(el){
if (el.tagName.toLowerCase() == "img") {
el.runtimeStyle.filt
el.src = z_gif;
}
else {
var sizingMethod = "crop";
var tmpImg = new Image();
tmpImg.src = el.currentStyle.backgroundImage.split('\
if (parseInt(tmpImg.width) == 1 || parseInt(tmpImg.height) == 1 || el.className.indexOf('g-png-24__scaled')
sizingMethod = "scale";
}
el.runtimeStyle.filt
el.className += " g-png-fixed";
if (!document.getElementById('g-fixed')) {
var style = document.createElement('style');
var rules = document.createTextNode('.g-png-fixed {background-image: none !important}');
style.type = 'text/css';
style.id = "g-fixed";
style.styleS
document.getElem
}
}
el.fixedPNG = true;
})(this):'')
);
}
Enjoy...
ps.Интересно, стоит выносить это на Хабру?
