Expression Versus Statement - Stack Overflow

Expression Versus Statement - Stack Overflow

Expression: Something which evaluates to a value. Example: 1+2/x
Statement: A line of code which does something. Example: GOTO 100

In the earliest general-purpose programming languages, like FORTRAN, the distinction was crystal-clear. In FORTRAN, a statement was one unit of execution, a thing that you did. The only reason it wasn't called a "line" was because sometimes it spanned multiple lines. An expression on its own couldn't do anything... you had to assign it to a variable.

1 + 2 / X

is an error in FORTRAN, because it doesn't do anything. You had to do something with that expression:

X = 1 + 2 / X

FORTRAN didn't have a grammar as we know it today—that idea was invented, along with Backus-Naur Form (BNF), as part of the definition of Algol-60. At that point the semantic distinction ("have a value" versus "do something") was enshrined in syntax: one kind of phrase was an expression, and another was a statement, and the parser could tell them apart.

Designers of later languages blurred the distinction: they allowed syntactic expressions to do things, and they allowed syntactic statements that had values. The earliest popular language example that still survives is C. The designers of C realized that no harm was done if you were allowed to evaluate an expression and throw away the result. In C, every syntactic expression can be a made into a statement just by tacking a semicolon along the end:

1 + 2 / x;

is a totally legit statement even though absolutely nothing will happen. Similarly, in C, an expression can have side-effects—it can change something.

1 + 2 / callfunc(12);

because callfunc might just do something useful.

Once you allow any expression to be a statement, you might as well allow the assignment operator (=) inside expressions. That's why C lets you do things like

callfunc(x = 2);

This evaluates the expression x = 2 (assigning the value of 2 to x) and then passes that (the 2) to the function callfunc.

This blurring of expressions and statements occurs in all the C-derivatives (C, C++, C#, and Java), which still have some statements (like while) but which allow almost any expression to be used as a statement (in C# only assignment, call, increment, and decrement expressions may be used as statements; see Scott Wisniewski's answer).

Having two "syntactic categories" (which is the technical name for the sort of thing statements and expressions are) can lead to duplication of effort. For example, C has two forms of conditional, the statement form

if (E) S1; else S2;

and the expression form

E ? E1 : E2

And sometimes people want duplication that isn't there: in standard C, for example, only a statement can declare a new local variable—but this ability is useful enough that the GNU C compiler provides a GNU extension that enables an expression to declare a local variable as well.

Designers of other languages didn't like this kind of duplication, and they saw early on that if expressions can have side effects as well as values, then the syntactic distinction between statements and expressions is not all that useful—so they got rid of it. Haskell, Icon, Lisp, and ML are all languages that don't have syntactic statements—they only have expressions. Even the class structured looping and conditional forms are considered expressions, and they have values—but not very interesting ones.

Lazy Function Definition Pattern

Lazy Function Definition Pattern

var foo = function() {
    var t = new Date();
    foo = function() {
        return t;
    };
    return foo();
};

When foo is called the first time, we instantiate a new Date object and reassign foo to a new function which has that Date object in it's closure. Then before the end of the first call to foo the new function value of foo is called and supplies the return value.

Subsequent calls to foo simply return the value of t that is stored in it's closure. This is a fast lookup and efficient especially if the conditionals used in the previous solutions are many and complex.

Another way of thinking about this this pattern is that the outer function that is first assigned to foo is a promise. It promises that the first time it is run it will redefine foo to a more useful function. The term "promise" loosely comes from Scheme's lazy evaluation mechanism. Any JavaScript programmer really ought to study Scheme as there is more written about functional programming for Scheme then exists for JavaScript.

Enhanced Javascript Lazy Function Definition Pattern

The lazy function definition pattern is pretty simple at heart: you have a function which does some work, caches the results through a closure variable, and then overwrites itself with a new function that simply returns the closure variable. So the first time you run a function will be the only time the function does any work. Each subsequent call is “lazy” and just returns the results of that first call.

css unit: em

http://www.w3.org/TR/CSS2/syndata.html#length-units

The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)

http://css-tricks.com/css-font-size/

Here’s the scoop: 1em is equal to the current font-size of the element in question. If you haven’t set font size anywhere on the page, then it would be the browser default, which is probably 16px. So by default 1em = 16px. If you were to go and set a font-size of 20px on your body, then 1em = 20px.

Things start to get slightly more complicated with em’s when we start setting up more complex font sizing. Say we need a header with a larger font-size, so we set h1 { font-size: 2em; } That “2″ is essentially a multiplier of the current em value. So if the current em size is 16px, that header tag is going to turn out to be 32px. That math works out cleanly, but you can imagine that it often doesn’t and rounding needs to take place.

The most popular method in working with em values is to set the font-size on the body to 62.5%. Because the default browser font-size is 16px, this makes it 10px (without hard-setting it to 10px, which wouldn’t cascade). Using 10 as a multiplier is much easier than using 16. This way, you need a font size of 18px? Use font-size: 1.8em.

So why both with all this em business when it’s just an abstraction of using pixel values anyway? Three possible reasons:

1. The ARE resizeable in IE 6
2. The relationship to other sizes (elastic width sites)
3. Em’s cascade like a mo-fo

Em’s aren’t just for fonts, it’s a unit of measure that you can use for any other length (height, width, etc). Elastic width sites use em values for everything, which essentially makes the site “zoomable”, meaning that when you bump the font-size up everything bumps up all the way down to the width of the site. Em’s have a direct relationship to each other in this way. If you have a box that is 10em in height, and a font inside that is 1em in size, it will take up exactly 1/10 the height of that box. That exact proportional relationship makes em values a powerful web design technique.

There is one potential concern with em’s, with regards to #3. They do indeed cascade. Every em value is relative to its parents value. If you are using em’s as a straight substitution for pixel values, this can cause problems. For example, you might set both your “p” (paragraph) and “li” (list item) font-sizes to be 1.2em. Looks great for you today, but tomorrow some content is published to the site that has a paragraph inside a list item. Those two values will cascade (1.2 x 1.2) and that list item will be bigger in font-size than any of the others. No way around that, other than removing the tag.

CommonJS effort sets JavaScript on path for world domination

CommonJS effort sets JavaScript on path for world domination

Read-eval-print loop - Wikipedia, the free encyclopedia

Read-eval-print loop - Wikipedia, the free encyclopedia

A read-eval-print loop (REPL), also known as an interactive toplevel, is a simple, interactive computer programming environment. The term is most usually used to refer to a Lisp interactive environment, but can be applied to command line shells and similar environments for Smalltalk, Perl, Scala, Python, Ruby, Haskell, APL, BASIC, J, Tcl, and other languages as well.

In a REPL, the user may enter expressions, which are then evaluated, and the results displayed. The name read-eval-print loop comes from the names of the Lisp primitive functions which implement this functionality:

* The read function accepts a single expression from the user, and parses it into a data structure in memory. For instance, the user may enter the s-expression (+ 1 2 3), which is parsed into a linked list containing four data elements.
* The eval function takes this internal data structure and evaluates it. In Lisp, evaluating an s-expression beginning with the name of a function means calling that function on the arguments that make up the rest of the expression. So the function + is called on the arguments 1 2 3, yielding the result 6.
* The print function takes the result yielded by eval, and prints it out to the user. If it is a complex expression, it may be pretty-printed to make it easier to understand. In this example, though, the number 6 does not need much formatting to print.

The REPL is commonly misnamed an interpreter. This is a misnomer—many programming languages that use compilation (including bytecode compilation) have REPLs, such as Common Lisp and Python.

margin collapse

CSS tutorial - Margin Collapsing

case 1:
16 pixels
A
16 pixels
100 pixels
50 pixels
16 pixels
B
16 pixels

The middle paragraph is 0px high, so its margins are touching. So there are 4 margins touching each other. The gap between A and B is max(16,100,50,16), which is 100 pixels.

case 2:
Negative margins are special and are dealt with as follows:

1. Work out what margins are touching.
2. Ignore all negative margins.
3. Perform the collapse as if there were no negative margins.
4. Select the largest of the negative margins, and subtract it from the computed margin from step 3.

<p style="margin-bottom:-5px;">A</p>
<p style="margin-top:100px;margin-bottom:-50px;"></p>
<p>B</p>

16
A
-5
100
-50
16
B
16

Step 2, ignoring the negative margins:
16
A
100
16
B
16

Step 3: The gap between A and B is max(100,16), which is 100 pixels.
Step 4, subtracting the largest negative margin:
Max(5,50) is 50.
100 - 50 = 50
So the resulting gap between A and B is 50 pixels.

case 3:
<div style="margin-top:10px">
<div style="margin-top:20px">
A
</div>
</div>

There are two margins touching each other: 10 and 20 pixels. The resulting margin will be max(10,20), which is 20 pixels.

The question is; where does the 20 pixels appear:
1. Before the outer DIV?
2. Before the inner DIV but inside the outer DIV?

(In other words, if the background of the outer DIV is red, and the background of the inner DIV is white, should any red be visible?)

The answer is quite simple; the resulting margin always appears as far out as possible - outside the outermost element whose margin is taking part in the collapse. Even though the margin that gets "used" is the one from the inner DIV, it appears outside the outer DIV. So it seems to appear in the wrong place.
The solution to the unwanted gap, is to make sure the margin collapse cannot happen. The way to do that is to make sure the 0 pixel top margin of the DIV and the 16 pixel top margin of the paragraph cannot touch each other. This is where the box model becomes useful. It is possible to remove the margin of the paragraph, but it is also possible to manipulate the DIV to insert something between the paragraph's top margin, and the DIV's 0 pixel top margin. The way to do that is to add a top padding or top border of at least 1 pixel of height onto the DIV, since they sit between the two margins.

Minz Meyer's Researchkitchen - CSS - Auto-height and margin-collapsing
关于float元素的margin collapse问题 - web k(客)~ - JavaEye技术网站

A List Apart: Articles: Alternative Style: Working With Alternate Style Sheets

A List Apart: Articles: Alternative Style: Working With Alternate Style Sheets

Style sheets can be associated with documents using a list of link elements in the head. There are three different relationships external style sheets can have with the document: persistent, preferred, and alternate.

Persistent
These style sheets are always enabled (they are always “on”) and are combined with the active style sheet. They can be used for shared rules common to every style sheet. To make a style sheet persistent, the rel attribute is set to “stylesheet” and no title attribute is set.

To make the style sheet paul.css persistent, the following link element would be included in the head:

<link rel="stylesheet" type="text/css" href="paul.css" />

Preferred
These style sheets are enabled by default (they are “on” when the page is loaded). They can then be disabled if the user selects an alternate style sheet.

To make a style sheet preferred, the rel attribute is set to “stylesheet” and the style sheet is named with the title attribute.

Several preferred style sheets can be grouped together by giving them identical title attributes. These grouped style sheets are then all enabled and disabled together. If more than one group of preferred style sheets are declared, the first group takes precedence.

To make paul.css preferred, a title attribute is added, giving the default style a name.

<link rel="stylesheet" type="text/css" href="paul.css" title="bog standard" />

Alternate
These style sheets can be selected by the visitor as alternatives to the preferred style sheet. This allows the visitor to personalize a site and choose his or her favorite scheme. They can also be used for accessibility.

To specify an alternate style sheet, the rel attribute is set to “alternate stylesheet” and the style sheet is named with a title attribute. As with preferred sheets, these style sheets can also be grouped together by giving them identical title attributes.

Using the previous example again; to make paul.css into an alternate style sheet, the keyword “alternate” is added to the rel attribute.

<link rel="alternate stylesheet"
type="text/css" href="paul.css"
title="wacky" />

Note that these relationships only apply to external style sheets which are included using the link element.

example http://fantasai.inkedblade.net/

<link rel="stylesheet" href="site-style/base/content.css">
<link rel="stylesheet" href="site-style/swirls/content.css" title="Swirls" type="text/css">
<link rel="stylesheet alternate" href="site-style/elerentia/content.css" title="Elerentia" type="text/css">

thead, tfoot, tbody order

Tables in HTML documents

<TABLE>
<THEAD>
<TR> ...header information...
</THEAD>
<TFOOT>
<TR> ...footer information...
</TFOOT>
<TBODY>
<TR> ...first row of block one data...
<TR> ...second row of block one data...
</TBODY>
<TBODY>
<TR> ...first row of block two data...
<TR> ...second row of block two data...
<TR> ...third row of block two data...
</TBODY>
</TABLE>
TFOOT must appear before TBODY within a TABLE definition so that user agents can render the foot before receiving all of the (potentially numerous) rows of data. The following summarizes which tags are required and which may be omitted:

* The TBODY start tag is always required except when the table contains only one table body and no table head or foot sections. The TBODY end tag may always be safely omitted.
* The start tags for THEAD and TFOOT are required when the table head and foot sections are present respectively, but the corresponding end tags may always be safely omitted.

Dan Pink談令人驚訝的動機科學

Dan Pink談令人驚訝的動機科學

Autonomy, the urge to direct our own lives.
Mastery, the desire to get better and better at something that matters.
Purpose, the yearning to do what we do in the service of something larger than ourselves.

css3: box-sizing

css3: box-sizing

此特徵可改變元素預設的矩形格子模型（box model）其計算高與寬的方法。這是 CSS3 建議的特徵。IE8 使用 box-sizing；Safari, Chrome 用 -webkit-box-sizing；Firefox 用 -moz-box-sizing。可設的值有：

1. content-box：矩格的寬與高只包括內容，不含內緣（padding），邊線（border），外緣（margin）。此為預設值。
2. padding-box：矩格的寬與高包括內容加上內緣。CSS3 無此項，只有 Firefox 支援此項。
3. border-box：矩格的寬與高包括內容加上 內緣與邊線。

google font api

http://code.google.com/intl/zh-TW/apis/webfonts/docs/getting_started.html#Quick_Start
usage

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
    <style>
      body {
        font-family: 'Tangerine', serif;
        font-size: 48px;
      }
    </style>
  </head>
  <body>
    <h1>Making the Web Beautiful!</h1>
  </body>
</html>

firefox

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=_jMq7r9ahcBZZjpP8hftNA') format('truetype');
}

ie6:

@font-face {
  font-family: 'Tangerine';
  src: url('http://themes.googleusercontent.com/font?kit=_jMq7r9ahcBZZjpP8hftNA');
}

google font directory
@font-face generator

一生必嚐【台北信義】穆記小吃牛肉麵館

一生必嚐【台北信義】穆記小吃牛肉麵館

＜穆記小吃牛肉麵館＞
地址：台北市信義區吳興街239號(近台北醫學大學)
電話：02-2723-9372
營業時間：11:00-21:00
價目：斤餅包牛肉$100、紅燒半筋半肉麵（小）$170
推薦：斤餅包牛肉$100

24 ways: Transitional vs. Strict Markup

24 ways: Transitional vs. Strict Markup

The names reveal what they are about: Transitional DOCTYPEs are meant for those making the transition from older markup to modern ways. Strict DOCTYPEs are actually the default – the way HTML 4.01 and XHTML 1.0 were constructed to be used.

A Transitional DOCTYPE may be used when you have a lot of legacy markup that cannot easily be converted to comply with a Strict DOCTYPE. But Strict is what you should be aiming for. It encourages, and in some cases enforces, the separation of structure and presentation, moving the presentational aspects from markup to CSS. From the HTML 4 Document Type Definition:

Elements that are not allowed in Strict DOCTYPEs
* center
* font
* iframe
* strike
* u

Attributes not allowed in Strict DOCTYPEs
* align (allowed on elements related to tables: col, colgroup, tbody, td, tfoot, th, thead, and tr)
* language
* background
* bgcolor
* border (allowed on table)
* height (allowed on img and object)
* hspace
* name (allowed in HTML 4.01 Strict, not allowed on form and img in XHTML 1.0 Strict)
* noshade
* nowrap
* target
* text, link, vlink, and alink
* vspace
* width (allowed on img, object, table, col, and colgroup)

Content model differences
An element type’s content model describes what may be contained by an instance of the element type. The most important difference in content models between Transitional and Strict is that blockquote, body, and form elements may only contain block level elements. A few examples:

* text and images are not allowed immediately inside the body element, and need to be contained in a block level element like p or div
* input elements must not be direct descendants of a form element
* text in blockquote elements must be wrapped in a block level element like p or div

HTML元素的默认样式 | Javascript is dancing

HTML元素的默认样式 | Javascript is dancing

在surfing过程中，在淘宝UED的《Reset CSS研究（八卦篇）》中得知了如何查阅给予gecko内核的浏览器的HTML默认样式的清单的方式（只需要在gecko内核的浏览器中的地址栏中输入：resource://gre/res/html.css即可），下面提供了我在Firefox3.6.4版本中获得的HTML.css清单。将它代码高亮，有助于阅读，同时由于篇幅问题，对于webkit内核的浏览器、IE6的HTML默认样式，仅提供一个url链接：《webkit内核的HTML.css(Chrome,Safari)》，《gecko内核的HTML.css(Firefox)》，《ie6的默认样式》，《HTML4默认样式》，《CSS1默认样式》，《IE6、7、8默认样式对比列表》，《CSS2.1 User Agent Style Sheet Defaults》，《Mozilla quirk.css》，《Symbian default CSS》。

各种浏览器之间对HTML元素默认的样式的不统一性，正是YUI reset css、HTML5 Reset Stylesheet以及Eric Meyer’s CSS reset被提出来的必要性。

更多参考：《踏上寻找webkit内核渲染HTML的默认样式之路》，《HTML默认样式和浏览器默认样式》，《Reset CSS研究（八卦篇）》，《Really Undoing html.css》，《SUNThink》，《CSS Compatibility and Internet Explorer》，《Cascading Style Sheet Compatibility in Internet Explorer 7》，《HTML5 Boilerplates》，《Eric Meyer’s CSS reset》，《YUI reset css》，《Mozilla all default Stylesheets》，《Webkit WebCore》

http://css-class.com/test/css/defaults/UA-style-sheet-defaults.htm

2010.... - ▃吃高雄▅San Antonio安多尼歐水岸歐式美食

2010.... - ▃吃高雄▅San Antonio安多尼歐水岸歐式美食

Button, button: Microsoft Internet Explorer sends form button content, not value

Button, button: Microsoft Internet Explorer sends form button content, not value

If you require buttons with HTML content, you can use the same trick in the name= field of a <button> tag. However, if your users are using Exploder 6, you still cannot use multiple <button> tags in a single form because it moronically sends all buttons in the form, not just the one which was pressed! (Note that this doesn't happen with multiple <input type="submit"> buttons—that would be too consistent for Microsoft.) This has been fixed in Exploder 7, but unless you don't care about users who have yet to “upgrade” to that piece of…software, you're going to have to stay away from <button> entirely.

Using Multiple "buttons" Elements in IE6

CSS hack for IE8 Standards Mode

CSS hack for IE8 Standards Mode
All IE versions, including IE8 Standards Mode:

.test { color: blue\9 }

Scheme 程序语言介绍之一

Scheme 程序语言介绍之一

Scheme 的前身是 Lisp。和 Scheme 一样，这也是一门诞生在 MIT 人工智能实验室的语言。据说 Lisp 在程序语言的族谱上，班辈仅次于 Fortran，是第二古老的语言。但和 Fortran 不同，Fortran 经常被大名鼎鼎的计算机科学家批评，作为反面教材，这些计算机科学家当中有著名的图灵奖获得者 Edsger Dijkstra。而 Lisp 和 Scheme 恰恰相反，它们常被计算机科学家作为正面例子，一个优秀作品的例子。赞扬 Lisp 的人当中有 Smalltalk 和图形用户界面的发明人之一 Alan Kay。

Lisp 由图灵奖获得者 John McCarthy 发明。据说一开始 McCarthy 只想把这门他正在设计的语言的语法的设计，往后拖一拖，等到后面有趣的工作做完了，再回头来给这门基于 Lambda 演算的程序语言加上为数学家们所熟悉的语法。可是 McCarthy 的一个学生很快发现，直接在还没有正式语法的抽象语法里面写程序，感觉非常好。就用不着一个正式的语法了。于是 Lisp 诞生了。Lisp 重要的特征就是：第一，基于 Lambda 演算的计算模型；第二，加上 List processing，这也是 Lisp 名称的由来；第三，直接在抽象语法里面工作，这是非常特别的。前两个重要特征，是 McCarthy 天才的设计，第三个特征则是有趣的巧合。

又过了十多年，还在 MIT 人工智能实验室，不过这次不是 McCarthy，而是两个更年轻的计算机科学家。Guy Steele, Jr. 和他的老师 Gerald Sussman 合作对古典 Lisp 做了两个重要改进。一是把 Lisp 从 Dynamic scope 变成了 Lexical scope。现在大家熟悉的几乎所有的语言都是 Lexical scope，所以大家见怪不怪了。后来 Steele 成为 Common Lisp 设计的主力，Common Lisp 把 Scheme 的 Lexical scope、还有其它一些由 Scheme 所创造的特征，都加入到主流 Lisp 语言当中，Dynamic scope 终于成为了历史。Steele 和 Sussman 做的另一个主要改进是把 Continuation 这个概念引入到程序语言里面。这样一门新的程序语言就此诞生。他们按照人工智能实验室的传统，把它命名为 Scheme。

Steele 和 Sussman 发明了 Scheme 以后，写了份 Report on Scheme。后来经过修改，又 发布了 Revised Report on Scheme，这样不停的 Revise 下去。根据大师们历史悠久的找 乐子的光荣传统，这一系列的 Report 被依次命名为 R2RS、R3RS、R4RS 和目前最新的 R5RS。现在还没有听说 R6RS 的消息。R4RS 是 IEEE 制定的 Scheme 语言标准的基础。 R5RS 比起这个 IEEE 标准，主要增添了"卫生（Hygenic）"的 Macro 支持。

传统 Lisp 的 Macro，在 R5RS 的作者们看来，有严重的缺陷，这促使他们在 R5RS 中发明了"卫生"的 Macro。可是这个卫生的 Macro，反过来又遭到了传统 Lisp 支持者的严厉批评。

Lambda
如果不是专门研究 Lambda 演算的理论，Lambda 对于今天的程序员来说，几乎是个透明而不可见的概念。实在是太普通，都很难把它说的有趣一点，或者看上去深奥一点。因为所谓Lambda，其实就是表达了区区一个"函数"的概念而已。不过，在 Scheme 里面，Lambda 还是表达了两个值得注意的重要特征。第一个，就是广泛的允许匿名对象的存在。这很难说 和正宗的 Lambda 演算的理论有特别的联系，它更像是由 Lambda 演算的理论所衍生出来的编程风格。第二个特征，就是所谓的高阶函数。这个特征和 Lambda 演算理论息息相关。高阶函数是 Lambda 演算理论的精髓，是由 Lisp 首先介绍到程序语言这个世界的。也是大量的现代语言，比如流行的 Python 当中一个似乎是不那么引人注目的特征。

高阶函数(high order function)
高阶函数有两点内容。第一是让函数对象成为程序语言当中所谓"第一等公民"。我们所说 程序语言当中的"第一等公民"，指的是可以对这样的数据对象进行赋值、传递等操作。就 像我们可以对整数型变量所做的那样。如果函数对象也是程序语言当中的第一等公民，我们 就可以像上面列举的 Python 的例子那样，把函数对象在变量之间进行赋值和传递等操作。
高阶函数的第二点内容是像下面这样。既然函数本身，就像整数或者浮点数那样，成了我们 所谓"第一等公民"，我们当然就希望可以像以前能够做的那样，在我们需要的时候，把所 有这些"第一等公民"，拿在手上揉来揉去、捏来捏去，无论它们是整数型数据、或者是浮 点型数据、还是函数型数据。我们要把它们这样变换过来，再那样变换过去。把这些"第一 等公民"放到我们的变换函数里面，对它们进行任意的、我们所需要的各种各样的操作。换 句话说，我们可以像对待整数和浮点型数据那样，把函数本身也作为某个函数的输入数据和 输出数据。也就是说，我们的函数可以对函数本身进行操作。这些可以操作别的函数的函数 的地位不就是更高级了吗？这就是所谓"高阶"这个词的由来。