Todd Wolfson

If there are that many classes to define an element's style, we are doing OOCSS wrong.

The class should never describe the color itself. That usually means we are not abstracting a consistent piece of styling to be reused elsewhere. In this case, we have button--secondary which usually does this theming so we can scrap button--red.

Similarly, button--rounded implies that not all buttons are rounded. This is inconsistent for the design and you should probably talk to your designer about standardizing on that. This means we would put the rounded properties into button itself.

Now, we have simplified the classes and it seems reasonable (although not sure why a secondary action would require a big button).

<a href="#" class="button button--big button--secondary">Button</a>

tl;dr - Nice solution but we are inventing a problem for ourselves instead of solving real ones.

Your code is not cross-browser nor tested. There are talks about introducing setImmediate function and a well-tested library that polyfills it

https://developer.mozilla.org/en-US/docs/Web/API/window.setImmediate

https://github.com/NobleJS/setImmediate

The cheat sheet lacks documentation on their table support

| Header 1 | Header 2     |
| -------- | ------------ |
| Content  | More content |

Ah, I must have been mistaken then. I am glad to hear Ctrl+Enter still works for form submission.

Unfortunately, a quick Google search does not turn up any results. It seems to be something I have picked up over the years.

The solution above should be applicable to any elements inside of a form (e.g. textarea, select, input[type=*]).

That is already the default browser behavior. Ctrl+Enter for Windows/Linux and ⌘+Enter for Mac. There is one requisite: You have to put the form fields in a <form> tag for that to work.

http://plnkr.co/edit/LxhESk?p=preview

I think you are being quite vague and this is for a few reasons:

• You like GitHub
• You lack knowledge of how the design process works

It's all well and good but this is the same problem with your viewpoints onto others. Designers have not really found this as a problem or I am sure they would have posted it by now.

There are Bootstrap theme websites:

• http://bootswatch.com/
• https://wrapbootstrap.com/
• http://littlesparkvt.com/flatstrap/index.html
• http://aozora.github.io/bootmetro/
• http://divshot.github.io/geo-bootstrap/

For designers, they prefer to share mockup tools plugins since the concept of design is on a per-project basis. Compare it to a repository/gem/node module/package. Here are some plugins:

• http://www.balsamiq.com/products/mockups/plugins

If you are interested in learning more about design, here are some books:

• http://www.amazon.com/Design-Everyday-Things-Donald-Norman/dp/0465067107
• http://www.fivesimplesteps.com/products/a-practical-guide-to-designing-the-invisible
• http://www.amazon.com/Universal-Principles-Design-William-Lidwell/dp/1592530079

Just tried yours but it seems to not be event emitting:

On a page like http://api.jquery.com/on/

Works:

var c = $('<i>');
c.on('abc', function () {
    console.log('123');
});
c.trigger('abc');

Does not work: =(

var c = $([]);
c.on('abc', function () {
    console.log('123');
});
c.trigger('abc');

Am I missing something?

auto gc is automatically run. However, git gc only really takes action when there are too many loose objects (over 7000). For more info, you can refer to the git manual.

http://git-scm.com/book/en/Git-Internals-Maintenance-and-Data-Recovery

git distinguishes references from file paths via --. The following plucks the file from 4 commits back and stages it.

git checkout HEAD~4 -- file.html

It is becoming more common to steer away from jQuery animations altogether and go with progressive enhancement of CSS3 transitions.

The beauty behind this thought is that a website is not required to look the same in all browsers.

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

Then, there are the added benefits of:

• No jQuery flickers (sometimes heights will flicker when completing an animation)
• No excess worries (e.g. "Does it work right in IE6?")

Instructing people to use one method while not using another without any explanation does not do the community any good. Please stop and explain the purpose of this pro-tip.

For the record, both the unary + operator and bitwise operators | coerce variables to numbers on a base 10. This works for most cases unless the number needs to be interpretted as binary. In that case, you may also use parseInt with the radix (base) of 2 to interpret it.

If you are going to use parseInt without specifying a radix, beware that it will attempt to do octal if the number begins with 0 and otherwise fall back to base 10. This is why most people say it is best to always specify a radix with parseInt. I use + since it is simpler and has the same effect.

This is great for 3rd party scripts (e.g. a bookmarklet). However, if you use this for a web application, it will turn into a nightmare.

Imagine testing a page and everything looks good. Then, going to another page, returning the original, and everything is misaligned.

It is not an unlikely scenario that dynamically loaded page-specific CSS will accidentally collided with other CSS.

The IDE/text editor make sense on a per-computer basis. However, if you are doing any collaborative work, things like .DS_Store and *.orig should be placed into every project.

It is more effort across all persons to have a common set up like this than it is on a per-project basis especially if those people are strangers (e.g. GitHub).

Here are some other cool ASCII related webpages:

• http://nkwiatek.com/experiments/ascii
• http://idevelop.ro/ascii-camera/
• http://dchang.mit.edu/artwork/
• http://artpacks.org/
• http://tllabs.io/asciistreetview/

Ah, okay. I don't think they have a method for that. You might want to consider create a pull request for that. It would be nice to see that as a flag on git summary (e.g. git summary --lines).

@viniciusgama I do not think it does. I am semi-clear and semi-unclear of the purpose of your protip. Can you provide more of an explanation?

There is git-extras which has the git summary command which does the same as the above with percentages.

https://github.com/visionmedia/git-extras

This is also a great use case for the subtree alternative to Git Submodules (since submodules are often a pain during merge/rebase).
http://git-scm.com/book/en/Git-Tools-Subtree-Merging

git remote add docs git@github.com:USER/REPO.wiki.git
git fetch docs
git checkout -b docs docs/master
git read-tree --prefix=docs/ -u docs

The purpose of your protip is vague, confusing, and not giving everyone the full story.

First, I have no idea why you are coercing a DOM node to an integer.

Second, if you want to coerce something to a number, you have the unary operator available which is more expressive. This does have the drawback of not truncating to an integer.

var b = +'1837727366484959938'; // 1837727366484959938
var b = +'1.5'; // 1.5

Lastly, as @couto pointed out, while numbers are 64-bit loating point in JS, the bitwise operators coerce those numbers in 32-bits.
As a result, you run into cases where you exceed 2^31, 2147483648 and entire into one's compliment territory.

Math.pow(2, 31) | 0; // -2147483648
(Math.pow(2, 31) - 1) | 0; // 2147483647

References:

https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Operators/Bitwise_Operators

http://www.amazon.com/JavaScript-Definitive-Guide-Activate-Guides/dp/0596805527/

I agree with @zhuangya . This is a volatile copy and should be avoided.

var a = [1, 2, 3],
    b = a.splice(0);
console.log(a); // [] - empty array since all members have been transferred to b
console.log(b); // [1, 2, 3] - transferred members of a

...and toggle = toggle ^ 1 (xor 1) which can be rewritten as

toggle ^= 1;

Also, toggle = 1 - toggle;

You chose a slow implentation, use a faster one:
http://blog.stevenlevithan.com/archives/faster-trim-javascript

Site is down as of March 26, 9PM PDT =(

@manojlds Ah, correct you are (I just tried it too).

I think I must have misread my git status one time and considered that my lesson learned.

I agree with the git add -u comments. It is an alias for git add --update. Here is a snippet from the man git-add page:

-u, --update

Only match <filepattern> against already tracked files in the index rather than the working tree. That means that it will never stage new files, but that it will stage modified new contents of tracked files and that it will remove files from the index if the corresponding files in the working tree have been removed.

If no <filepattern> is given, default to "."; in other words, update all tracked files in the current directory and its subdirectories.

I personally prefer git add -A (--all) as well which is

git add -A = git add . && git add -u

This means it adds all modified files and untracked files.

-A, --all

Like -u, but match <filepattern> against files in the working tree in addition to the index. That means that it will find new files as well as staging modified content and removing files that are no longer in the working tree.

If you delete files, you will also need to do git add ..

I prefer to use git add -A which does git add . && git add -u.

You also could do something similar to Modernizr which adds classes to the HTML tag.

http://modernizr.com/docs/#features-css

This allows for usage like

// If the page does not support media queries
<html class="no-media-queries">
// via js document.documentElement.className += 'no-media-queries'

// Hook in via CSS
.no-media-queries .my-object {
  // Normal styles for object
}

You can hook into that via something like Zakas' media query tool or Modernizr's variant.

http://www.nczonline.net/blog/2012/01/03/css-media-queries-in-javascript-part-1/

http://modernizr.com/docs/#mq

There is also git-extras which has git delete-submodule.

I would love to see this PR'd onto https://github.com/visionmedia/git-extras

There are also node_modules built specifically for this purpose.

npm install -g serve
serve
# Server now running at localhost:3000
# with automatic Jade + Stylus rendering

[grunt][grunt] also has a serve task but in the transition to 0.4 there are a few too many steps to follow to get this set up.

[grunt]: https://github.com/gruntjs/grunt/

Fun fact: Cheatsheet does not include all of GFM including tables and strikethrough.

https://github.com/chjj/marked/pull/74

https://github.com/chjj/marked/issues/53

It sucks that there is so much noise here that there are repeat protips =( I posted a similar one a while ago.
https://coderwall.com/p/klr_pq

Glad to see this feature is being found in other places too though =)

GitHub takes it one step further by adding a few developer nicities such as fences for code and inline code.

http://github.github.com/github-flavored-markdown/

For example, `this is inline code` and

```

This is multi-line

fenced code.

You can specify language at the start via "```js" or whatever language you are using.

```

Reminds me of http://whatthekeycode.com/