cofohhttp://www.cofoh.com
enCSS-On-Diet Developer Guidehttp://www.cofoh.com/css-on-diet--developer-guide
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><h1>Introduction</h1>
<p><em>CSS-On-Diet</em> is a CSS Preprocessor with quite unique features.
By intention it should be easy to use and fast to learn.
Other preprocessors seems to be focusing on adding new functions to <em>CSS</em>
making the learning processes bit complicated and time consuming.
<em>CSS-On-Diet</em> focuses on writing <em>CSS</em> faster.
Actually it not only makes writing, but also changing and reading it faster.</p>
<p>Lets use <em>COD</em> as a shortcut for <em>CSS-On-Diet</em> in following text. This document applies to
<a href="http://www.cofoh.com/css-on-diet-1.5"><em>COD Specification Version 1.5</em></a>,
which is technical and detailed document. This Developer Guide is more human friendly version.</p>
<p>For more information check out
<a href="http://www.cofoh.com/css-on-diet"><em>COD Website</em></a>.</p>
<h1>Installation and usage</h1>
<p>As of current (1.5) version of
<a href="http://www.cofoh.com/css-on-diet-1.5"><em>COD Specification</em></a>,
we deliver only command line tool.
It's written in Python, and called <strong>cod</strong>.
We have plans for making windows application which will be easier to install.</p>
<p>Please note that COD files have <em>.cod</em> extension in their name and should be named like
that for editors support.</p>
<p>To check if <strong>cod</strong> is already installed try to check out version:</p>
<pre><code>cod -v
</code></pre>
<p>To install <strong>cod</strong> command line tool you have few choices. Lets start from most simple:</p>
<ol>
<li><p>If you are using <a href="http://www.sublimetext.com/">Sublime Text Editor</a>, just type</p>
<pre><code>CSS-On-Diet
</code></pre>
<p>in the Install Package box. The <em>COD</em> editor plugin includes <strong>cod</strong> command line tool,
and it's connected to the editor's build system. So when you save file with <em>.cod</em> extensions,
syntax will be highlighted and file will be compiled to <em>CSS</em> when build command is executed.</p>
<p>Note that Package Controller which provides Install Package box has to be installed separately
from <a href="https://sublime.wbond.net/installation">here</a>.</p></li>
<li><p>If you have installed Python (default for Linux and MacOS), just use
<a href="https://pip.pypa.io/en/latest/installing.html">pip installator</a>.</p>
<pre><code>pip install CSSOnDiet
</code></pre>
<p>That's recommend and most flexible way. On some systems <em>pip</em> command is not installed by
default. You have to <a href="https://pip.pypa.io/en/latest/installing.html">install it</a> first.</p></li>
<li><p>You can also download latest <em>COD</em> package from <a href="http://www.cofoh.com/css-on-diet">our website</a>,
unpack it like this (or other way you prefer):</p>
<pre><code>tar xfvz CSSOnDiet-1.5.tar.gz
</code></pre>
<p>get inside unpacked directory and execute:</p>
<pre><code>python setup.py install
</code></pre></li>
</ol>
<p>Note that only 1st choice doesn't require Python. Sublime Text Editor has embedded Python
runtime. But it doesn't give you access to <strong>cod</strong> script on system level, just from that editor.</p>
<h2>Usage</h2>
<p>Command line tool <strong>cod</strong> preprocesses <em>COD</em> files:</p>
<pre><code>cod input.cod -o output.css
</code></pre>
<p>Add -m argument to minify your <em>CSS</em>:</p>
<pre><code>cod input.cod -o output.css -m
</code></pre>
<p>Check out more options from help message:</p>
<pre><code>cod -h
</code></pre>
<h1>Formatting</h1>
<p>In order to make <em>CSS</em> writing faster colons and semicolons in <em>COD</em> are not needed. It was always
annoying for me to put colon after every first word and semicolon at the end of the line. Why to
use colons and semicolons if they are always at the same position?</p>
<pre><code>display: none;
display none;
display: none
display none
</code></pre>
<p>In <em>COD</em> all 4 lines above have the same meaning. If you question that feature will lets write <em>CSS</em>
faster, I agree that's not big time saver. But wait for the next chapter, when you will learn more
about <em>COD</em> mnemonics. Just to have a quick look, compare this line:</p>
<pre><code>dis no
</code></pre>
<p>to this:</p>
<pre><code>dis: no;
</code></pre>
<p>That's 25% less characters. And not need to remember two more tokens is quite relief for my brain.</p>
<p>Optional semicolons put one restriction to our code: every <em>COD</em> declaration has to be on a separate
line. The newline character is replaced by semicolon in the final <em>CSS</em>. But there is a way to put
more declarations on a single line: just use semicolon in that case:</p>
<pre><code>display none; padding 0
</code></pre>
<p>For the price of extra semicolon (which is not extra in <em>CSS</em> anyway) we have two declaration on a
single line.</p>
<p>On the other hand, one line sometimes can be not enough for writing long declaration. You may want
to spread it across multiple lines to keep better visibility:</p>
<pre><code>background-image:
linear-gradient(
to right,
#fffdc2,
#fffdc2 15%,
#d7f0a2 15%,
#d7f0a2 85%,
#fffdc2 85%
);
</code></pre>
<p>Unfortunately that code is not valid in <em>COD</em>. Every line is treated as a single declaration. In that
situation use escape character '\' just before new line to join lines before proper preprocessing
will take place:</p>
<pre><code>background-image: \
linear-gradient( \
to right, \
#fffdc2, \
#fffdc2 15%, \
#d7f0a2 15%, \
#d7f0a2 85%, \
#fffdc2 85% \
);
</code></pre>
<p>Just remember that '\' has to be exactly before a new line. Any spaces after will make it invalid.</p>
<h2>Comments</h2>
<p>In <em>COD</em> we can use two types of comments. Standard <em>CSS</em> comments /&#42; &#42;/ and single line comments //.
The single line comment starts from the // sequence and finishes at the end of line.
The standard <em>CSS</em> comments can be nested, unlike in pure <em>CSS</em>.</p>
<pre><code>/* comment /* inside another comment */ Still comment! */
</code></pre>
<p>That's very useful if you want to comment out code which already has comments in it.</p>
<pre><code>/*
li {
/* background: black; */
background: white;
}
*/
</code></pre>
<h1>Mnemonics</h1>
<p>Mnemonics (abbreviations) are the sugar of <em>COD</em> preprocessor. The whole idea to create <em>COD</em> was
born when I was playing with <a href="http://emmet.io/">Emmet</a>. As you may know <em>CSS for Emmet</em> allows you
to type in your editor as few characters as possible to write <em>CSS</em> (Emmet is an editor plugin).
Because it's so useful for so many people why not use that all along <em>CSS</em> development? It's faster
to type in, faster to modify (very often change just one letter), and even faster to read it.</p>
<p>Mnemonics are available for</p>
<ol>
<li>properties names</li>
<li>declaration values</li>
<li>size units</li>
</ol>
<p>Here are the lists of all mnemonics: <a href="http://www.cofoh.com/css-on-diet-LATEST#Properties">CSS-On-Diet
Mnemonics in the Specification</a></p>
<p>Every property mnemonic is 3 letters long. As you will start using them you will find few patterns
in their construction. Those patterns can faster your learning process significantly:</p>
<ul>
<li><p>Most often mnemonic is equal to first 3 letters of a property name</p>
<pre><code>col = color
wid = width
</code></pre></li>
<li><p>If a property has more than one words in its name, first letters from every word are used</p>
<pre><code>lih = line-heigh
les = letter-spacing
pal = padding-left
</code></pre></li>
<li><p>Shorthand properties (like background, font, padding, margin, etc.) have '-' hyphens in their names:</p>
<pre><code>pa- = padding
ba- = background
</code></pre></li>
<li><p>That hyphen character is changed to letter when we deal with not shorthand version</p>
<pre><code>par = padding-right
bai = background-image
</code></pre></li>
<li><p>'border' has two hyphens because it is the most complicated property</p>
<pre><code>b-- = border
bb- = border-bottom
bbc = border-bottom-color
bir = border-image-reapet
</code></pre></li>
</ul>
<p>Mnemonics for values are just 2 letters long. Usually they are constructed from first two letters,
but not always.</p>
<pre><code>no = none
rx = repeat-x
bh = both
db = double
</code></pre>
<p>Units mnemonics are only one letter and there is 6 of them. But even small change
(p = px, e = em) saves lot of typing when doing it over and over.</p>
<p>Here are the 3 lists of all mnemonics: <a href="http://www.cofoh.com/css-on-diet-LATEST#Properties">CSS-On-Diet
Mnemonics in the Specification</a></p>
<h1>Medias</h1>
<p>Media breakpoints is the feature which was added recently, but I'm quite proud of it. It's the
biggest time saver in nowadays <em>CSS</em> development. Responsive Web Design is a must, no many will dare
to denied that. Copying your declarations together with selectors just to place it in the right
@media rule is a huge time waste. And is so hard to keep eye on all versions of your declarations.</p>
<p>Other preprocessors allows nesting media queries. That solves the readability problem. <em>COD</em> also
let us to write media specific declaration nested in ordinary rule.</p>
<pre><code>p {
col #000000
les 2p
les 3p @Medium
les 4p @Big
}
</code></pre>
<p>But except that <em>COD</em> reduces required text to minimum, by extracting media breakpoints and using
just names for breakpoints.</p>
<pre><code>@cod-media {
Medium screen and (min-width : 480px)
Big screen and (min-width : 768px)
}
</code></pre>
<p>Media breakpoint definition is written one per line in @cod-media rule. First word a breakpoint
name, here Medium and Big. Rest of the line is a breakpoint definition which will be used in the
final @media rule.</p>
<p>Breakpoints usage doesn't need much explanation. Just put the breakpoint name at the end of the declaration and your are ready.
Above code produces following <em>CSS</em>:</p>
<pre><code>p {
color: #000000;
letter-spacing: 2px;
}
/** Breakpoint: Medium **/
@media screen and (min-width : 480px) {
p {
letter-spacing: 3px ;
}
}
/** Breakpoint: Big **/
@media screen and (min-width : 768px) {
p {
letter-spacing: 4px ;
}
}
</code></pre>
<p>Breakpoints are expanded at the end of the file, in the order they were declared. The name of
the breakpoint can include letters, digits, underscore and hyphen and it's case sensitive.</p>
<h1>Defines</h1>
<p>The most advanced (hope still easy to learn) feature are the defines. That what's behind variables,
mixins and macros/functions.</p>
<p>A define is a word which will be replaced by other word, multiple words, or any text at all.
Defines are declared in @cod-define rule, which is similar to already presented @cod-media. The rule
consist of declarations, one per line, where first word is a name and the rest of it is a define
body:</p>
<pre><code>@cod-define {
BRAND-COLOR #431255
boxspace 10p 20p
}
</code></pre>
<p>Declared define can be used in any place of <em>COD</em> file (even before it's declaration):</p>
<pre><code>p {
col BRAND-COLOR
ma- boxspace
}
</code></pre>
<p>Notice that you don't have to use '$' or any special character like in other preprocessors.
Although defines has to be surrounded by no words characters. A word in <em>COD</em>
consists of digits, letters, underscore and hyphen.</p>
<p>Defines can be use inside other defines</p>
<pre><code>@cod-define {
A 10p
B A+3p
}
</code></pre>
<p>In that case only earlier declared defines are taken under consideration. Unlike everywhere else,
inside @cod-defines they don't have to be whole words, but longer defines have precedence over
shorter</p>
<pre><code>@cod-define {
BAC black
BACGROUND red
BRAND_BG BACGROUNDish
}
</code></pre>
<p>In the above example BRAND&#95;BG will be expanded to "redish" color, not "blackGROUNDish".</p>
<p>Here is an example of a mixin:</p>
<pre><code>@cod-define {
mixme mal 10p; pal 5p
}
</code></pre>
<p>Because define body is always just one line long, semicolon is needed in our code. Although we can
use escaping character '\' before new line to join lines</p>
<pre><code>@cod-define {
mixme mal 10p;\
pal 5p
}
</code></pre>
<p>That works, you can write one define on multiple lines, but semicolon is still needed.
'\' just joins lines, before real preprocessing.</p>
<p>Because somebody may want to write mixin with curly braces in it (is it still called mixin??),
like this:</p>
<pre><code>@cod-define {
mixme { mal 10p; pal 5p }
}
</code></pre>
<p>The finale '}' in @cod-define has to be always on a separate line, to distinguish it with internal '}' characters.</p>
<p>Macros (functions) are defines with arguments:</p>
<pre><code>@cod-define {
Ocean rgb(67,12,168,_ARG1_)
}
p {
bac Ocean(0.50)
}
</code></pre>
<p>Define name doesn't need any special signature to be a macro.
Just in places where arguments will be expanded use <em><em>ARG1</em></em>, <em><em>ARG2</em></em>, <em><em>ARG3</em></em>, etc. That's all.</p>
<h1>Includes</h1>
<p>Including others files from <em>COD</em> file merges everything, resulting in a single <em>CSS</em> output. That
means a single HTTP request comparing to native @import rule.</p>
<pre><code>@cod-include {
file1.cod
dir1/dir2/file2.css
}
</code></pre>
<p>Every line represents a file path. Spaces at the beginning and ending are removed, but inside the line are preserved.</p>
<pre><code>@cod-include {
directory/file with spaces.cod
}
</code></pre>
<p>Eventually file path can be quoted.</p>
<pre><code>@cod-include {
"dir/file.cod"
}
</code></pre>
<p>Included files are put in @cod-include place in the final <em>CSS</em>. <em>COD</em> doesn't have problem when you
make an include loop. For example A includes B, B includes C and C includes A. For every file <em>COD</em>
computes <a href="http://en.wikipedia.org/wiki/Hash_function">a hash code</a> and only unique files are
included. So when you have two identical files but with different names, only first one will be
included.</p>
<p>File paths are searched relative to parent file. That means relative to file which includes current
file. If such file doesn't exist, include directories given for example as a command line -I
argument are checked.</p>
<pre><code>cod -I includedir,path/to/includes file1.cod
</code></pre>
<p><em>COD</em> windows applications have easier ways to set up those paths.</p>
<h1>Arithmetics &amp; RGBA</h1>
<p>In the current version <em>COD</em> supports following operators: +, -, &#42;, /, (). To use them, whole
expression cannot contain spaces but has to be surrounded by spaces or new lines:</p>
<pre><code>word 10+2 20-3word
</code></pre>
<p>will be translated to</p>
<pre><code>word 12 20-3word
</code></pre>
<p>As you can see only the middle part is a correct expression.</p>
<p>If any of the operator arguments contains a dot in any number result will be real number. Otherwise it will be integer:</p>
<p>21/5.0
21/5</p>
<p>will produce:</p>
<p>4.2
4</p>
<p>If at least one of the arguments contains <em>COD</em> unit (px, p, em, e, ...) result will also have that unit</p>
<pre><code>20px+10 30+10%
</code></pre>
<p>gives:</p>
<pre><code>30px 40%
</code></pre>
<p>Unfortunately in the current version <em>COD</em> units cannot be converted from each other, so <em>COD</em> compiler will
use first founded unit. So expression:</p>
<pre><code>2+3px+4in
</code></pre>
<p>give rather useless value of</p>
<pre><code>9px
</code></pre>
<h2>Hexadecimal RGBA</h2>
<p>One more handy feature. <em>COD</em> has fast way to write rgba() colors. Instead of normal 6 position color notation:</p>
<pre><code>#430CA8
</code></pre>
<p>add two more hex digits for alpha channel</p>
<pre><code>#430CA8CC
</code></pre>
<p>That gives us 8 bit resolution (256 possible alpha levels).
Generated <em>CSS</em> code will look like this:</p>
<pre><code>rgba(67,12,168,0.8)
</code></pre>
<p>The result alpha value is rounded to 3 digits after dot, so:</p>
<pre><code>#430CA8FD
#430CA8FE
#430CA8FF
</code></pre>
<p>will produce:</p>
<pre><code>rgba(67,12,168,0.992)
rgba(67,12,168,0.996)
rgba(67,12,168,1)
</code></pre>
</div></div></div>Sat, 21 Jun 2014 08:46:14 +0000Tomasz Wyderka130 at http://www.cofoh.comhttp://www.cofoh.com/css-on-diet--developer-guide#commentsCSS-On-Diet - easy and fast CSS preprocessorhttp://www.cofoh.com/css-on-diet
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><div class="cod-info">
<div class="pure-g">
<div class="mission-box pure-u-1 pure-u-sm-1-3">
<div class="mission mission1 animated flipInX">
Like <a href="http://emmet.io">Emmet</a> for CSS, but not limited to any editor
</div>
</div>
<div class="mission-box pure-u-1 pure-u-sm-1-3">
<div class="mission mission2 animated flipInX">
Easy to learn and use preprocessor
</div>
</div>
<div class="mission-box pure-u-1 pure-u-sm-1-3">
<div class="mission mission3 animated flipInX">
Write, change and read CSS much faster
</div>
</div>
</div>
<!--
<h1>We are reducing repetitiveness from web designers work</h1>
-->
<div class="cod-main-grid pure-g">
<div class="cod-examples pure-u-1 pure-u-lrg-2-5">
<div class="social-links-box">
<a href="/css-on-diet-LATEST">
<img src="/sites/all/themes/cofohshow/specification.png"
title="Specification"
alt="Css-On-Diet Technical Specification">
</a>
<a href="https://pypi.python.org/pypi/CSSOnDiet">
<img src="/sites/all/themes/cofohshow/python.png"
title="PyPI"
alt="Css-On-Diet python package on PyPI">
</a>
<a href="https://twitter.com/cssondiet">
<img src="/sites/all/themes/cofohshow/twitter.png"
title="Twitter"
alt="Css-On-Diet Preprocessor on Twitter">
</a>
<a href="http://github.com/wyderkat/css-on-diet">
<img src="/sites/all/themes/cofohshow/github.png"
title="GitHub"
alt="Css-On-Diet Preprocessor on GitHub">
</a>
</div>
<h2>Use old CSS</h2>
<div class="code-snippet">
<pre>
<span>.element {</span>
<span class="name">letter-spacing</span><span>: </span><span class="digit">2px</span><span>;</span>
<span class="name">background-color</span><span>: </span><span class="constant">#1C6BA0</span><span>;
}</span>
</pre>
</div>
<p>If all your CSS declarations are on separate lines you don't have to change
anything</p>
<h2>Remove colons</h2>
<div class="code-snippet">
<pre>
<span>.element {</span>
<span class="name">letter-spacing</span><span> </span><span class="digit">2px</span>
<span class="name">background-color</span><span> </span><span class="constant">#1C6BA0</span>
<span>}</span>
</pre>
</div>
<p>In <b class="fullname">CSS-On-Diet</b> colons and semicolons are optional</p>
<h2>Use mnemonics</h2>
<div class="code-snippet">
<pre>
<span>.element {</span>
<span class="name">les</span><span> </span><span class="digit">2p</span>
<span class="name">bac</span><span> </span><span class="constant">#1C6BA0</span>
<span>}</span>
</pre>
</div>
<p>Common CSS keywords have mnemonics. Parameters are 3 letters
long, values 2, and units just 1 letter (<a href="/css-on-diet-LATEST#Properties">The list</a>)</p>
<h2>Medias Breakpoints</h2>
<div class="code-snippet">
<pre>
<span class="special1">@cod-media {</span>
<span class="var">tablet</span><span> </span><span class="constant">(min-width: 768px)</span>
<span class="special1">}</span>
<span>.element {</span>
<span class="name">les</span><span> </span><span class="digit">2p</span>
<span class="name">les</span><span> </span><span class="digit">3p</span> <span class="var">@tablet</span>
<span>}</span>
</pre>
</div>
<p>Responsive Web Design was never so easy and intuitive</p>
<h2>One line comments</h2>
<div class="code-snippet">
<pre>
<span>.element {</span>
<span class="name">les</span><span> </span><span class="digit">2p</span><span class="comment"> // why not 3?</span>
<span class="name">bac</span><span> </span><span class="constant">#1C6BA0</span><span class="comment"> // deep ocean</span>
<span>}</span>
</pre>
</div>
<p>No need to remember to close those comments</p>
<h2>Nested comments</h2>
<div class="code-snippet">
<pre>
<span>.element {</span>
<span class="comment">/*</span>
<span class="comment">les /*3p*/ 2p</span>
<span class="comment">*/</span>
<span class="name">bac</span><span> </span><span class="constant">#1C6BA0</span>
<span>}</span>
</pre>
</div>
<p>Now you can comment out code with other comment inside. Finally...</p>
<h2>Arithmetics</h2>
<div class="code-snippet">
<pre>
<span>.element {</span>
<span class="name">les</span><span> </span><span class="digit">3p-1</span>
<span class="name">bac</span><span> </span><span class="constant">#1C6BA0</span>
<span>}</span>
</pre>
</div>
<p>CSS needs calculations. That's more than sure.</p>
<h2>Short RGBA</h2>
<div class="code-snippet">
<pre>
<span>.element {</span>
<span class="name">les</span><span> </span><span class="digit">3p-1</span>
<span class="name">bac</span><span> </span><span class="constant">#1C6BA0F1</span>
<span>}</span>
</pre>
</div>
<p>Just two more digits and you have transparency with your color</p>
<h2>Variables</h2>
<div class="code-snippet">
<pre>
<span class="special1">@cod-defines {</span>
<span class="var">sp2014</span><span> </span><span class="digit">3p-1</span>
<span class="var">ocean</span><span> </span><span class="constant">#1C6BA0F1</span>
<span class="special1">}</span>
<span>.element {</span>
<span class="name">les</span><span> </span><span class="var">sp2014</span>
<span class="name">bac</span><span> </span><span class="var">ocean</span>
<span>}</span>
</pre>
</div>
<p>Defines are like variables. Write it once and use it anywhere.
Stay <a href="http://en.wikipedia.org/wiki/Don%27t_repeat_yourself">DRY</a>!</p>
<h2>Mixins</h2>
<div class="code-snippet">
<pre>
<span class="special1">@cod-defines {</span>
<span class="var">sp2014</span><span> </span><span class="digit">3p-1</span>
<span class="var">ocean</span><span> </span><span class="constant">bac #1C6BA0_ARG1_ ;\
bai url("fish.png")</span>
<span class="special1">}</span>
<span>.element {</span>
<span class="name">les</span><span> </span><span class="var">sp2014</span>
<span></span><span class="var">ocean(F1)</span>
<span>}</span>
</pre>
</div>
<p>Mixins can be anything placed anywhere. Arguments give them programming power.</p>
</div><!-- cod-examples -->
<div class="cod-not-examples pure-u-1 pure-u-lrg-3-5">
<img class="cod-logo img-rwd" src="/sites/all/themes/cofohshow/cod_logo.png" alt="Css-On-Diet, fast and easy CSS Preprocessor">
<div class="cod-not-examples-grid pure-g filling">
<div class="pure-u-1 pure-u-med-3-5 cod-documentation">
<h2>Easy to read and write</h2>
<p><b class="shortname">COD</b> (<b class="fullname">CSS-On-Diet</b>) files are much shorter than normal CSS. 3 letters mnemonics
are much faster to write, much faster to modify and much faster to read!
</p>
<h2>Easy to remember</h2>
<p>Unlike other preprocessors, <b class="fullname">CSS-On-Diet</b> doesn't require learn
new syntax or programming structures. <b class="shortname">COD</b> mnemonics are so easy to remember that
you will know them well after 1 hour of testing.</p>
<h2>Why mnemonics</h2>
<p>Playing with
<a href="http://docs.emmet.io/css-abbreviations/">Emmet for CSS</a>
I realized that abbreviations should be used for every step of editing.
Not only to create CSS keyword, but also for modifying and moving it as a text.
</p>
<h2>Preprocessors</h2>
<p><b class="fullname">CSS-On-Diet</b> is a
<a href="http://en.wikipedia.org/wiki/Preprocessor">preprocessor</a>.
It prepares (preprocesses) CSS files.
When it does that, it adds some new features. They are
many good preprocessors. But <b class="fullname">CSS-On-Diet</b>
focuses on simplifying designers work. No programming skills are needed to
use it and time to learn it is quick. Even so,
<b class="fullname">CSS-On-Diet</b> has most of the well known preprocessors
features and some revolutionary solutions (like mnemonics, nested comments,
RGBA, text variable).
</p>
<h2>Documentation</h2>
<ul>
<li><a href="/css-on-diet--developer-guide">Developer Guide</a> - whole article about all nuances.</li>
<li><a href="/css-on-diet-LATEST">Technical Specification</a> - compressed knowledge describing all mnemonics and features</li>
<li><a href="http://www.slideshare.net/wyderkat/css-preprocessors-for-designers">CSS preprocessors for designers</a> - slideshare based on COD</li>
</ul>
<h2>Editors integration</h2>
<ul>
<li>
<a href="https://sublime.wbond.net/packages/CSS-On-Diet">
<img src="/sites/all/themes/cofohshow/sublime.png"
title="Sublime Text"
alt="Css-On-Diet package for Sublime Text">
</a>
For <a href="http://www.sublimetext.com/">Sublime Text</a> ver. 2 and 3
we have packages for Linux, Mac and Windows. Inside except <b>syntax
highlither</b> and <b>build system</b> our preprocessor is included.
You don't have to install it separately! Just type
<b>CSS-On-Diet</b> in
<a href="https://sublime.wbond.net/packages/CSS-On-Diet">Sublime Package Control</a>
or manually from
<a href="https://github.com/wyderkat/css-on-diet--sublime-text">Github repo</a>.
</li>
<li>
<a href="https://www.npmjs.org/package/grunt-cssondiet">
<img src="/sites/all/themes/cofohshow/grunt.png"
title="Grunt"
alt="Css-On-Diet plugin for Grunt">
</a>
We have also plugin for <a href="http://gruntjs.com/">Grunt</a> building tool.
To install it type <b>npm install grunt-cssondiet --save-dev</b>
or go to
<a href="https://www.npmjs.org/package/grunt-cssondiet">npm package</a>.
The build task is called "cssondiet".
</li>
<li><a href="http://www.vim.org">Vim</a> syntax highlither is available from our
<a href="https://github.com/wyderkat/css-on-diet">main Github repo</a>
</li>
</ul>
<!-- TODO
May help developers but it does not help designers.
From my experience it has been more of a hassle than a time saver.
Hard to troubleshoot CSS bugs.
It adds a level of complexity.
A level of abstraction that didn’t exist.
It adds maintenance complexity.
It requires a compiler.
-->
</div><!-- cod-documentation -->
<div class="pure-u-1 pure-u-med-2-5 cod-download">
<h2>Case Tracker</h2>
<p>Please use our
<a href="node/add/casetracker-basic-case/43?destination">Case Tracker</a>
if you find a bug or you need some new functionality.
</p>
<h2>Command line tool</h2>
<p>
This is original (first) <b class="fullname">CSS-On-Diet</b> implementation
and it's free, available with source code. You can <i>fork</i> it on
<a href="http://github.com/wyderkat/css-on-diet">GitHub</a>.
<h3>Installation</h3>
<p>If you are using Sublime Text Editor, then just type
<pre class="code-snippet">CSS-On-Diet</pre>
in the Install Package box.
Our preprocessor is embedded and connected to build system.
</p>
<p>
If you have Python on your system (installed by default on Mac and Linux)
just use
<a href="https://pip.pypa.io/en/latest/installing.html">pip</a>:
<pre class="code-snippet">pip install CSSOnDiet</pre>
</p>
<p>Alternatively download our package, and follow instructions in
the README.md file.
<table class="pure-table">
<tr>
<td><a title="Download" href="/f/CSSOnDiet-1.6.tar.gz">
<img class="img-rwd" src="/sites/all/themes/cofohshow/icon_download.png" alt="Download Css-On-Diet command line (oryginal) tool">
</a>
</td>
<td>ver. 1.6</td>
<td>15 July 2014</td>
</tr>
</table>
</p>
<p>And <a href="casetracker">here is the casetracker list</a>
for this project.
</p>
<!-- TODO Product Box -->
</div><!-- cod download -->
</div><!-- cod not examples grid-->
</div><!-- cod not examples-->
</div><!-- cod-main-grid -->
</div><!-- cod-info -->
</div></div></div>Wed, 26 Mar 2014 16:16:06 +0000Tomasz Wyderka42 at http://www.cofoh.comhttp://www.cofoh.com/css-on-diet#commentsAdvanced RegEx tutorial for Pythonhttp://www.cofoh.com/advanced-regex-tutorial-python
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>
Regular Expressions (RegEx) are powerful programmer's tool. With one line of text we can accomplish
what would require 100 lines of normal code. Unfortunately RegEx are very
complicated. And it's not easy to become fluent with RegEx syntax. Maybe because the
documentation is usually short and too detailed. Maybe because all RegEx tutorials
in the net are for beginners. Anyway, here is my compressed tutorial about "advanced" Regular
Expressions for <a href="http://docs.python.org/2/library/re.html">Python</a> programming language. Enjoy!
</p>
</div></div></div>Tue, 11 Mar 2014 06:29:22 +0000Tomasz Wyderka32 at http://www.cofoh.comhttp://www.cofoh.com/advanced-regex-tutorial-python#commentsNaming Standard not only for Pythonhttp://www.cofoh.com/content/naming-standard-not-only-python
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>
This is cunning naming convention. I've created it for <b>Python</b> at first, but it can be easily applied to other languages. The
key characteristict is in fast distinction between types of the names.
<b>class</b>,
<b>function</b>,
<b>object</b> or
<b>constant</b> name can be spotted right away.
</p>
<h3>Rules:</h3>
<div class="code-samples">
<div class="pure-g-r">
<div class="pure-u-1-2">
<div class="column-1-2">
<p>
Callable names (functions and classes) use underscore <b>_</b> between words
</p>
</div>
</div>
<div class="pure-u-1-2">
<div class="column-1-2">
<pre>get_value()</pre>
</div>
</div>
</div>
<div class="pure-g-r">
<div class="pure-u-1-2">
<div class="column-1-2">
<p>
Functions names are build from at least two words. Second word can be as simple as <b>it</b>.
</p>
</div>
</div>
<div class="pure-u-1-2">
<div class="column-1-2">
<pre>paint_it()</pre>
</div>
</div>
</div>
<div class="pure-g-r">
<div class="pure-u-1-2">
<div class="column-1-2">
<p>
Classes start from the <b>a</b>/<b>an</b> article and have short names
</p>
</div>
</div>
<div class="pure-u-1-2">
<div class="column-1-2">
<pre>class a_car:</pre>
</div>
</div>
</div>
<div class="pure-g-r">
<div class="pure-u-1-2">
<div class="column-1-2">
<p>
( If a class has just one instance (object) in whole project/file than the same name for object is very OK )
</p>
</div>
</div>
<div class="pure-u-1-2">
<div class="column-1-2">
<pre>engine = an_engine()</pre>
</div>
</div>
</div>
<div class="pure-g-r">
<div class="pure-u-1-2">
<div class="column-1-2">
<p>
Variables names don't have any word separators. All small letters.
</p>
</div>
</div>
<div class="pure-u-1-2">
<div class="column-1-2">
<pre>i, x
holder
tmpjar</pre>
</div>
</div>
</div>
<div class="pure-g-r">
<div class="pure-u-1-2">
<div class="column-1-2">
<p>
Objects have class's name in it
</p>
</div>
</div>
<div class="pure-u-1-2">
<div class="column-1-2">
<pre>mycar = a_car()
bluecar = this_returns_a_car()</pre>
</div>
</div>
</div>
<div class="pure-g-r">
<div class="pure-u-1-2">
<div class="column-1-2">
<p>
Global variables (constants) have all capitals and no words separators.
</p>
</div>
</div>
<div class="pure-u-1-2">
<div class="column-1-2">
<pre>CONTAINER
DEFAULTPORT</pre>
</div>
</div>
</div>
</div>
</div></div></div>Sun, 22 Sep 2013 13:19:41 +0000Tomasz Wyderka28 at http://www.cofoh.comhttp://www.cofoh.com/content/naming-standard-not-only-python#commentsCode Upstairs - browsing source code at functions levelhttp://www.cofoh.com/code_upstairs
<div class="field field-name-field-prebody field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"><p>Readability of source code is decreasing when project is getting bigger. The
aim of this tool is to make code more easily readable and understandable.
In other words it is trying to put big projects more under control.</p>
<p>Normally readability of long single function is preserved by using indentation of
code lines. This plugin provides kind of <em>indentation</em> at higher level -
<em>indentation</em> of whole functions.</p>
<p>User can see fairly easily how current function is dependent upon others. He
will also get structure of all functions in code in a tree layout if code is clearly
implemented. So therefor <em>Code Upstairs</em> is also kind of quality controller.</p>
<p><em>Code Upstairs</em> is a programmer editors plugins.</p>
<h2>Vim plugin</h2>
<h3>Installation</h3>
<p>Unpack <code>cu-vim-VERSION.tgz</code> and the content of extracted <code>code_upstairs-VERSION</code> directory move
to your <code>~/.vim/</code> or whole directory to Pathogen corner.</p>
<p>Current version <em>Code Upstairs</em> works only with <strong>C</strong> and <strong>Python</strong>.
For <strong>C</strong> you need to have installed <code>cscope</code> and
for <strong>Python</strong> you need <code>cscope</code> along with <code>pycscope</code></p>
<p>Vim has to be compiled with <code>python</code> support.</p>
<h3>Usage</h3>
<p>Open some file of your project and call:</p>
<pre><code>:CUinit &lt;directory&gt;
</code></pre>
<p>where <code>&lt;directory&gt;</code> is the root of your project.
If skipped current directory will be used.</p>
<p>Statusline will appear if it was disabled, and you can see
functions structure there,
but only when cursor is in some function body.</p>
<p>To turn off <em>Code Upstairs</em> use:</p>
<pre><code>:CUshutdown
</code></pre>
<h3>Statusline</h3>
<p>Functions structure is shown in statusline.
Because of limited space statusline is divided to layers.
Following layers are shown in order from left to right:</p>
<ul>
<li><strong>(-)</strong> layer showing original vim statusline (like filename and cursor position)</li>
<li><strong>(P)</strong> layer with parents of current function. Parent is a function from
which current function is called.</li>
<li><strong>(S)</strong> siblings layer shows functions which are on the same level with
current function looking from parent perspective (Frankly saying siblings are
<strong>pure child functions</strong> of parent function, check out next layer!)</li>
<li><strong>(C)</strong> children layer shows <strong>pure child functions</strong> of current function.
<strong>Pure child function</strong> is a function which is called only from one parent. </li>
<li><strong>(XX)</strong> (where <code>XX</code> is a number) layer shows children functions in distance
<code>XX</code> from current function. Those are not <strong>pure child
functions</strong>, they have more than one parent and therefore theirs calls are
distributed over code. Distance <code>XX</code> tells how far they are distributed.
Further functions distances can mean not clear implementation or code design.</li>
</ul>
<h3>Keybindings</h3>
<p>Default keybindings can be change using variables given in parenthesis.</p>
<ul>
<li><code>&lt;space&gt;.</code> and <code>&lt;space&gt;,</code> will switch layer forward and backward.
(<code>CUkeyNextLayer</code> and <code>CUkeyPrevLayer</code>)</li>
<li><code>&lt;space&gt;m</code> and <code>&lt;space&gt;n</code> will switch function in a layer forward and
backward. (<code>CUkeyNextFunction</code> and <code>CUkeyPrevFunction</code>)</li>
<li><code>&lt;space&gt;b</code> will jump to function definition (<code>CUkeyJumpToFunction</code>)</li>
<li><code>&lt;space&gt;v</code> will jump back (<code>CUkeyJumpBack</code>)</li>
<li><code>&lt;space&gt;/</code> will highlight function name in vim window (<code>CUkeyHighlightFunction</code>)</li>
</ul>
<h2>Gedit and Geany editors plugin</h2>
<p>As for today Vim plugin is the only one which (somehow) works...
Plugins for Gedit and Geany are under development. They are graphical widgets,
so should be much more user friendly.</p>
<h2><em>Code Upstairs</em> Project Houses</h2>
<ul>
<li><a href="http://www.vim.org/scripts/script.php?script_id=4498">vim plugin at vim.org</a></li>
<li><a href="http://github.com/wyderkat/code_upstairs">at github</a></li>
<li><a href="http://www.cofoh.com/code_upstairs">at my website</a></li>
</ul>
</div></div></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"></div></div></div>Mon, 01 Apr 2013 15:38:27 +0000Tomasz Wyderka27 at http://www.cofoh.comhttp://www.cofoh.com/code_upstairs#commentsMetallic Bottle - editor color scheme (for Geany and Gedit)http://www.cofoh.com/metallic_bottle
<div class="field field-name-field-prebody field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even"><p>Metallic Bottle is colour scheme for programmers editors. It has white background and matches very common GTK theme called "Radiance". For now there is only version for Gedit and Geany editor, but maybe it will be ported to others too.</p>
<p>I've created Metallic Bottle because I couldn't find anything which looked good in my GTK theme - Radiance. But it should looks good in other bright GTK themes too.</p>
<p>Metallic Bottle characterizes small differences between colours. For example Comments and Strings look similar but different in the same time.</p>
</div></div></div><div class="field field-name-field-image1 field-type-image field-label-hidden"><div class="field-items"><div class="field-item even"><a href="http://www.cofoh.com/sites/default/files/screenshot-geany.png"><img typeof="foaf:Image" src="http://www.cofoh.com/sites/default/files/styles/page_width_940/public/screenshot-geany.png?itok=DGub6TXy" width="618" height="764" alt="" /></a></div></div></div><div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p><strong>Installation on Geany</strong></p>
<p>Copy file <a href="http://github.com/wyderkat/mettalic_bottle/blob/master/geany/metallic_bottle.conf">geany/metallic_bottle.conf</a> to ~/.config/geany/colorscheme directory.</p>
<p><strong>Installation on Gedit</strong></p>
<p>Copy file <a href="http://github.com/wyderkat/mettalic_bottle/blob/master/gedit/metallic_bottle.xml">gedit/metallic_bottle.xml</a> to ~/.local/share/gtksourceview-3.0/styles directory (create gtksourceview-3.0 and styles subdirectories if missing).</p>
<p><strong>Download</strong></p>
<p>Metallic Bottle can be found <a href="http://github.com/wyderkat/metallic_bottle">HERE on GitHub</a></p>
</div></div></div>Fri, 08 Mar 2013 08:00:39 +0000Tomasz Wyderka26 at http://www.cofoh.comhttp://www.cofoh.com/metallic_bottle#commentsReadable Python http://www.cofoh.com/readable-python
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><p>
Python code is easily readable. But nothing is perfect and you can make even
that code more clean. Here you can find my best two techniques for Python code.
What about <a href="http://www.python.org/dev/peps/pep-0008/">PEP8</a>? I
really don't find it useful...
</p>
<div class="pure-g">
<div class="pure-u-1 pure-u-lrg-1-2">
<div class="column-1-2">
<h2>My name is</h2>
<p>
Python has this special word - <b>self</b> - which is the reference to the
object on which current method was invoked. It is not only useful but in most
cases necessary to have it!
</p>
<p>
In most languages this word is a constant, like in <i>C++</i> keyword
<b>this</b>. But in Python it can be any arbitrary word, just need to be first
on the method's parameters list. Despite that freedom in choosing name,
everybody follows kind of standard using word <b>self</b>.
</p>
<pre>
def method1( self , x, y ):
</pre>
<p>
I don't think it is bad decision. Quite similar to <b>this</b> in length and
meaning. But in <i>Python</i> it has to be typed more often than in <i>C++</i>.
So why not to use shorter word? I want to propose new <b>trend</b> and use word
<b>me</b> instead of
<i>self</i>.
<pre>
def method1( me , x, y ):
</pre>
It simply works for my projects better. Distinct in meaning and half shorter in
length. Usage statistics of variables named <b>me</b> are quite small, so we
can take it for that purpose.
</p>
</div>
</div>
<div class="pure-u-1 pure-u-lrg-1-2">
<div class="column-1-2">
<h2>White power</h2>
<p>
Lets look at this code:
<pre>
run(objX, param1, x, y)
</pre>
Typical function call.
Now lets change formatting:
<pre>
run( objX, param1, x, y )
</pre>
Change is small, somebody can say cosmetic, but readability is highly improved
(in my opinion). Less time is needed looking for the first parameter.
</p>
<!--
<p>
Now lets look at this:
<pre>
run( get( objX, y ), opt( objX, y ), x )
</pre>
We can use more spaces to indicate nesting levels.
<pre>
run( get( objX, y ), opt( objX, y ), x )
</pre>
</p>
-->
</div>
</div>
</div>
</div></div></div>Sun, 03 Mar 2013 16:40:51 +0000Tomasz Wyderka25 at http://www.cofoh.comhttp://www.cofoh.com/readable-python#commentsWhite shell - whitespace in bash for C programmerhttp://www.cofoh.com/white-shell
<div class="field field-name-body field-type-text-with-summary field-label-hidden"><div class="field-items"><div class="field-item even" property="content:encoded"><br/>
<p>
I will try to explain how to use whitespace characters and
quoting in shells like <i>bash</i>. I'm programming in <i>Python</i>, <i>C</i>,
<i>Java</i>, <i>Perl</i> and other <i class="normal">normal</i> computer
languages. And I've found myself many times in a big problem just doing simple
things in the <i>shell</i>. Why? I hope not because I'm bad programmer:)
</p>
<h3 class="chapter">
Rule no. 1
</h3>
<p>
Basic things we programmers need to know about
shell languages can be very different from languages we are using on daily basis.
The most important is this:
</p>
<p><cite>In shell everything is a string!</cite></p>
<p>
Not like for example in <i>C</i> where string is only text inside <b
class="quote">""</b> (double quotes) or stored under <i>char*</i> variable
name. In shell everything is a string.
</p>
<p>
Lets check out this on the variable assignment example:
</p>
<pre>
X="hello"
</pre>
<p>
Variable <i>X</i> is storing string now,
but line below is exactly the same:
</p>
<pre>
X=hello
</pre>
<p>
Frankly saying X is also a string. You can try:
</p>
<pre>
echo X
</pre>
<p><i onClick="this.innerHTML='<pre> X</pre>';" ><u>... click here to see output</u></i></p>
<p>
just if added <b class="quote">$</b> (dollar sign) shell will get string from
memory storied before.
</p>
<pre>
echo $X
</pre>
<p><i onClick="this.innerHTML='<pre> hello</pre>';" ><u>... click here to see
output</u></i></p>
<pre>
X=hello
hello=X
echo $X $hello
:)
</pre>
<p><i onClick="this.innerHTML='<pre> hello X</pre>';" ><u>... click here to see output</u></i></p>
<p>
So what we need <b class="quote">""</b> quoting for? In this case for nothing.
But when you type
</p>
<pre>
X="hello world"
</pre>
<p>
is different than
</p>
<pre>
X=hello world
</pre>
<p> <i onClick="this.innerHTML='<pre> world: command not found</pre>';" ><u>... click here to see output</u></i> </p>
<p>
Shell needs to know where starts every command argument (main duty of
shell is invoking commands). So by default white spaces are separators for
command name and arguments. In conclusion we need quoting to suppress this
behavior.
</p>
<p>
Another proof that everything is a string is here:
</p>
<pre>
X="hello"" ""world"
</pre>
<p>
Because everything is a string so string concatenation is as basic as letter
itself (in words you put letter after letter, you concatenate them, don't you
?). In our example we have three quoted strings joined together.
</p>
<p>
But something unacceptable in <i class="normal">normal</i> programming
languages here is legal:
</p>
<pre>
X=hello" ""world"
</pre>
<p>
BTW, try also this funny looking command:
</p>
<pre>
"hello world"
</pre>
<p><i onClick="this.innerHTML='<pre> hello world: command not found</pre>';" ><u>... click here to see output</u></i></p>
<p>
Yes, this line is a ordinary command. Another proof that everything is a string.
</p>
<p>
Furthermore, the most common source of problems is in understanding how quotes
are treated.
</p>
<p>
When we write:
</p>
<pre>
X="hello world"
</pre>
<p>
into memory, under the name <b>X</b> string <b>hello world</b> is copied.
Quotes are not stored into memory!
</p>
<p> So command </p>
<pre>
echo $X
</pre>
<p><i onClick="this.innerHTML='<pre> hello world</pre>';" ><u>... click here to see output</u></i></p>
<p> works OK, but not like people thing it works. Variable is expanded
to one string which is then again split in spaces positions. So
that command has two arguments </p>
<ol start="0">
<li>echo</li>
<li>hello</li>
<li>world</li>
</ol>
<p>To test that try this:</p>
<pre>
X="hello world"
echo $X
</pre>
<p><i onClick="this.innerHTML='<pre> hello world</pre>';" ><u>... click here to see output</u></i></p>
<p> There is no difference in output because space between words are added by
<i>echo</i> command, it was not taken from the string.<p>
<p> So how to save those extra spaces? Quotes are not stored, so we need
to used them again, when we reach for variable from memory: </p>
<pre>
X="hello world"
echo "$X"
</pre>
<p><i onClick="this.innerHTML='<pre> hello world</pre>';" ><u>... click here to see output</u></i></p>
<p> I know, that invocation looks silly. </p>
<p> Actually, that extra quoting is the most common problem when working with
file names containing spaces. For example try execute this command somewhere
along files with spaces in names</p>
<pre>
for f in *; do ls "$f"; done
</pre>
<p><i onClick="this.innerHTML='<pre> My Documents\n My Music</pre>';" ><u>... click here to see output</u></i></p>
<p>And now try without double quotes. </p>
<pre>
for f in *; do ls $f; done
</pre>
<p><i onClick="this.innerHTML='<pre> ls: cannot access My: No such file or directory\n ls: cannot access Documents: No such file or directory\n ls: cannot access My: No such file or directory\n ls: cannot access Music: No such file or directory</pre>';" ><u>... click here to see output</u></i></p>
<p> Many gurus say that we should always double quote variable </p>
<pre>
"$variable"
</pre>
<p> because we never know if spaces are inside. Sounds logical. Just those
extra two character to type in... </p>
<h3 class="chapter">
Quoting
</h3>
<p> Everything in shell is a string we proved earlier. So quoting mechanism has
to be different than in <i>normal</i> languages. </p>
<ul>
<li>
<p> First we have single quotes </p>
<pre>
echo 'I "have" 10$!'
</pre>
<p><i onClick="this.innerHTML='<pre> I &quot;have&quot; 10$!</pre>';" ><u>... click here to see output</u></i></p>
<p> Everything inside is allowed and treated as a character. </p>
</li>
<li>
Escaping character <b>\</b> pretty much like in other languages:
<pre>
echo I\ \"have\"\ 10\$!
</pre>
<p><i onClick="this.innerHTML='<pre> I &quot;have&quot; 10$!</pre>';" ><u>... click here to see output</u></i></p>
</li>
<li>
Double quotes
<pre>
echo "I 'have' 10$!"
</pre>
<p><i onClick="this.innerHTML='<pre> I \'have\' 10</pre>';" ><u>... click here to see output</u></i></p>
<p>
Spaces are preserved but variables like that special <b>$!</b> are
expanded. Single quotes inside double quotes are ordinary characters too.
</p>
<pre>
echo "I \"have\" 10\$!"
</pre>
<p><i onClick="this.innerHTML='<pre> I &quot;have&quot; 10$!</pre>';" ><u>... click here to see output</u></i></p>
<p>
As you can see escaping character <b>\</b> works here like outside quotes.
</p>
</li>
</ul>
<h3 class="chapter">
Can you repeat/eval, please?
</h3>
<p>Shell execution procedure is pretty naive. Not only everything is a string,
but also these <p><cite>strings are read by shell just once.</cite></p> For
example if under one variable we want store name of other variable and reach for
its value, it's too much for shell. This case is like pointers from C or
reference from other languages.
<pre>
USER_A=tom
USER_B=geoff
USER_C=anna
CURRENT='$USER_B' # without single quotes it would be just value copy
echo $CURRENT
</pre>
<p><i onClick="this.innerHTML='<pre> $USER_B</pre>';" ><u>... click here to see output</u></i></p>
</p>
We can notice that expansion of variables occurred only one time. How about telling shell to redo code interpretation one more time:
<pre>
eval echo $CURRENT
</pre>
<p><i onClick="this.innerHTML='<pre> geoff</pre>';" ><u>... click here to see output</u></i></p>
<p>
This is equivalent to two steps. First:
</p>
<pre>
cmd = shell_reparse_line("echo $X_POINTER");
</pre>
<p><i onClick="this.innerHTML='<pre> This is pseudo/C code. No shell output here:)</pre>';" ><u>... click here to see output</u></i></p>
<p>
Then variable <i>cmd</i> is executed as normal command:
</p>
<pre>
echo $X
</pre>
<p><i onClick="this.innerHTML='<pre> hello</pre>';" ><u>... click here to see output</u></i></p>
<p>
Exactly what we need.
</p>
<p>
More useful example:
<pre>
SILENT_MODE='> /dev/null 2>&1'
eval ls $SILENT_MODE
</pre>
which is equivalent to:
<pre>
ls > /dev/null 2>&1
</pre>
</p>
<p>Without <i>eval</i> we have errors. Special characters are parsed only
once, like expanding variables.</p>
<pre>
SILENT_MODE='> /dev/null 2>&1'
ls $SILENT_MODE
</pre>
<p><i onClick="this.innerHTML='<pre> ls: cannot access >: No such file or directory\n ls: cannot access 2>&1: No such file or directory\n /dev/null</pre>';" ><u>... click here to see output</u></i></p>
<p>
Very nasty and common is case which needs both techniques: proper quoting
strings with spaces and late <i>eval</i>uation.
</p>
<p>
For example:
</p>
<pre>
DIR="My Music"
COMMAND="ls $DIR"
sudo $COMMAND
</pre>
<p><i onClick="this.innerHTML='<pre> ls: cannot access My: No such file or directory\n ls: cannot access Music: No such file or directory</pre>';" ><u>... click here to see output</u></i></p>
<p>
this doesn't work because we missed quoting of <i>$DIR</i> content. Lets try again
</p>
<pre>
DIR="My Music"
COMMAND="ls '$DIR'"
sudo $COMMAND
</pre>
<p><i onClick="this.innerHTML='<pre> ls: cannot access \'My: No such file or directory\n ls: cannot access Music\': No such file or directory</pre>';" ><u>... click here to see output</u></i></p>
<p>
Do you see slight difference in the outputs? Quoting of strings is parsed just
once, at the beginning, so quotes stored in variable don't work. How it should
looks?
</p>
<pre>
DIR="My Music"
COMMAND="ls '$DIR'"
eval sudo $COMMAND
</pre>
<p><i onClick="this.innerHTML='<pre> My Music';" ><u>... click here to see output</u></i></p>
<p>
In conclusion, we need to <b>eval</b> again:
<ul>
<li>variables</li>
<li>control shell characters</li>
<li>quotes itself (but they are kind of control characters)</li>
</ul>
</p>
<h3 class="chapter">
Conclusions
</h3>
<p>
The first requirement for shell was to interpret human commands/needs
and communicate with system (OS) kernel. If this is true and systems became
more complex, shell functionality needed to grown. In a current version most
shells are fully functional programming languages... But still they need to
interpret human commands/behavior. So maybe this is reason why so simple
platform (I mean <i>shell</i>) is so complicated in nuances of work/execution. Not
mention that every shell is slightly different from each other!
</p>
<p>I hope we've cleared something... a little... Unfortunately many aspects of
shell code interpretation will be still not easy to understand. This is because
every shell is little different from each other. And interactive mode is
different than shell script rules. And of course documentation is too long and
too complicated... But I believe we've discussed most misleading and fundamental
things.</p>
</div></div></div>Wed, 10 Oct 2012 12:07:49 +0000Tomasz Wyderka21 at http://www.cofoh.comhttp://www.cofoh.com/white-shell#comments