5 ms·

All The Cheat Sheets An Up To Date Web Designer Needs: CSS3, HTML5 and jQuery

248 points by kevinwdavid 15y ago

pault 15y ago
Tangentially related: I have found http://dochub.io http://dochub.io to be absolutely indispensable for JS, DOM, and CSS.
- jenius 15y ago
  yeah agreed - way easier to type what you want than scan like 10 pages to try to find it
prolepunk 15y ago
For those who get disproportionately pissed at scribd for requiring facebook account in order to print or download pdf version of the document, here's an alternative link. Jquery 1.4.2 cheat sheet http://www.nostalgic.nl/assets/nostalgic/documenten/jQuery-Visual-Cheat-Sheet-1.4.2.pdf http://www.nostalgic.nl/assets/nostalgic/documenten/jQuery-V...
bcjordan 15y ago
Hmm... at one point I came across a really nice physical laminated HTML / CSS / JS cheat sheet but haven't been able to find it since. Would anyone happen to know what I'm talking about and where to get it?
- moggie 15y ago
  Possibly the one produced by Visibone? http://www.visibone.com/ http://www.visibone.com/
- GuiA 15y ago
  O'reilly used to print their own as well, iirc.
rjernigan 15y ago
DZone has a large set of professional cheat sheets called Refcardz, including HTML5, CSS, and jQuery. http://refcardz.dzone.com http://refcardz.dzone.com Also check out http://cheatsheets.org/ http://cheatsheets.org/
bengarvey 15y ago
If only this was in HTML5 and CSS3 instead of PDF.
gnufied 15y ago
Honest Question - How do you guys use these cheat sheets? Take large print outs and keep on desk? Just keep the electronic copy somewhere easily accessible? Printout and hang it on the wall?
- dhimes 15y ago
  When I use them, I have printout available. Usually stored in file folder (so shrink-to-print if necessary). I'm interested in what other people say.
- astine 15y ago
  I have cheat sheets hanging on the wall of my cubicle at work. They're printed out on regular letter sized paper; larger sheets are printed on multiple pages and taped together.
- LukeShu 15y ago
  I've always felt... awkward about them too. I usually print out a copy on regular 8.5"x11" paper, and keep it next to my computer for a few days. A few days later when it either gets buried or knocked off, I know it all by then. I'll keep an electronic copy, in case I do something else for a while, and come back to it, but then it usually doesn't even warrant a print out.
  - hbhanu 15y ago
    It usually depends on what it's a cheat sheet about - I always keep an electronic copy, but specific ones get pinned to my cubicle walls. These are the two big ones that I keep up at all times. I don't always use the VI/VIM one (a lot of the keystrokes become ingrained after repeated use, but when I have to switch environments, the transition back is always smoother with it). VI/VIM: http://michael.peopleofhonoronly.com/vim/ http://michael.peopleofhonoronly.com/vim/ RegEx: http://www.addedbytes.com/cheat-sheets/regular-expressions-cheat-sheet/ http://www.addedbytes.com/cheat-sheets/regular-expressions-c...
- baby 15y ago
  bookmark them with appropriate title, and when I need one I just type the appropriate tags in the address bar of firefox.
tferris 15y ago
Cheat sheets are really great and I bookmark all of them but somehow I never use them (or find the bookmark again). I rather google "<language> <topic>" which works best for me. Are you using them actually? Printing them all out or using them as wallpapers??
- LukeShu 15y ago
  The most common type of reference sheet I use, is just a table of values that don't have a real meaning, for example I have bookmarked a table of ANSI terminal escape codes, and this table of Bash string operations: http://tldp.org/LDP/abs/html/refcards.html#AEN22587 http://tldp.org/LDP/abs/html/refcards.html#AEN22587
gbog 15y ago
My preferred was visibone.com but sadly it is not including the latest techs.
freshhawk 15y ago
Has anyone found this site actually useful? As in, you wouldn't have been able to find this information, in a format as nice as this, when you needed it? This site just looks like SEO spam to me. But it is number 5 on the 1st page of HN so maybe I'm wrong.
ChessMess 15y ago
My favorite in the day was gotAPI (http://www.gotapi.com/html http://www.gotapi.com/html) because you could quickly type what you were looking for. Sadly they have not kept up.
ilaksh 15y ago
The designer is supposed to be an expert in all of this stuff? I thought he was supposed to be an expert in graphic design? I remember a time, many years ago, when if you wanted to edit a graphical user interface, you would use a graphical user interface to do that. Since the interface you are editing is graphical. I have been manually doing this CSS / HTML stuff for many years, but I think that it would make about 100x more sense if we used the CSS/HTML just as a format for the editing and display tools to store and retrieve the data. I actually think the biggest reason we are still doing it by hand is that people (like myself) are afraid that someone will think they aren't a real programmer if they use a GUI. After all, programmers write ASCII codes, and if you're not doing that, you're not programmer. Right?
- drivebyacct2 15y ago
  Dreamweaver, Frontpage, and a dozen other random tools I've used that proclaim to reduce the code associated with design are that way --->. Let us know if you find anything that works for anything non-trivial. Or anything trivial for that matter.
  - kateray 15y ago
    http://scrollkit.com http://scrollkit.com! very flexible in terms of design, though not made for liquid layouts. (disclosure: my project) let me know if there's anything you want it to do that it doesn't.
  - ilaksh 15y ago
    I pretty much couldn't seriously get into Dreamweaver or Frontpage because of the stigma attached.. I would never be able to admit that I used them. But some people definitely use Frontpage and Dreamweaver.. you are saying they just don't work?
drivebyacct2 15y ago
By time I've looked something up on these I could have "Ctrl+T ?<whatever>"d it or use dochub or one of a bunch of others that do the same thing. Is it the physical presence that makes people love these so much? They seem far less usable as a horizontal PDF than more... digital and accessible means.
sbarre 15y ago
The HTML5 security cheatsheet was an enlightening read.. Glad to see most of the vulnerable browsers are older than old..

248 points by kevinwdavid 15y ago

pault 15y ago

Tangentially related: I have found http://dochub.io http://dochub.io to be absolutely indispensable for JS, DOM, and CSS.

jenius 15y ago
yeah agreed - way easier to type what you want than scan like 10 pages to try to find it

prolepunk 15y ago

For those who get disproportionately pissed at scribd for requiring facebook account in order to print or download pdf version of the document, here's an alternative link. Jquery 1.4.2 cheat sheet http://www.nostalgic.nl/assets/nostalgic/documenten/jQuery-Visual-Cheat-Sheet-1.4.2.pdf http://www.nostalgic.nl/assets/nostalgic/documenten/jQuery-V...

bcjordan 15y ago

Hmm... at one point I came across a really nice physical laminated HTML / CSS / JS cheat sheet but haven't been able to find it since. Would anyone happen to know what I'm talking about and where to get it?

moggie 15y ago
Possibly the one produced by Visibone? http://www.visibone.com/ http://www.visibone.com/
GuiA 15y ago
O'reilly used to print their own as well, iirc.

rjernigan 15y ago

DZone has a large set of professional cheat sheets called Refcardz, including HTML5, CSS, and jQuery. http://refcardz.dzone.com http://refcardz.dzone.com Also check out http://cheatsheets.org/ http://cheatsheets.org/

bengarvey 15y ago

If only this was in HTML5 and CSS3 instead of PDF.

gnufied 15y ago

Honest Question - How do you guys use these cheat sheets? Take large print outs and keep on desk? Just keep the electronic copy somewhere easily accessible? Printout and hang it on the wall?

dhimes 15y ago
When I use them, I have printout available. Usually stored in file folder (so shrink-to-print if necessary). I'm interested in what other people say.
astine 15y ago
I have cheat sheets hanging on the wall of my cubicle at work. They're printed out on regular letter sized paper; larger sheets are printed on multiple pages and taped together.
LukeShu 15y ago
I've always felt... awkward about them too. I usually print out a copy on regular 8.5"x11" paper, and keep it next to my computer for a few days. A few days later when it either gets buried or knocked off, I know it all by then. I'll keep an electronic copy, in case I do something else for a while, and come back to it, but then it usually doesn't even warrant a print out.
- hbhanu 15y ago
  It usually depends on what it's a cheat sheet about - I always keep an electronic copy, but specific ones get pinned to my cubicle walls. These are the two big ones that I keep up at all times. I don't always use the VI/VIM one (a lot of the keystrokes become ingrained after repeated use, but when I have to switch environments, the transition back is always smoother with it). VI/VIM: http://michael.peopleofhonoronly.com/vim/ http://michael.peopleofhonoronly.com/vim/ RegEx: http://www.addedbytes.com/cheat-sheets/regular-expressions-cheat-sheet/ http://www.addedbytes.com/cheat-sheets/regular-expressions-c...
baby 15y ago
bookmark them with appropriate title, and when I need one I just type the appropriate tags in the address bar of firefox.

tferris 15y ago

Cheat sheets are really great and I bookmark all of them but somehow I never use them (or find the bookmark again). I rather google "<language> <topic>" which works best for me. Are you using them actually? Printing them all out or using them as wallpapers??

LukeShu 15y ago
The most common type of reference sheet I use, is just a table of values that don't have a real meaning, for example I have bookmarked a table of ANSI terminal escape codes, and this table of Bash string operations: http://tldp.org/LDP/abs/html/refcards.html#AEN22587 http://tldp.org/LDP/abs/html/refcards.html#AEN22587

gbog 15y ago

My preferred was visibone.com but sadly it is not including the latest techs.

freshhawk 15y ago

Has anyone found this site actually useful? As in, you wouldn't have been able to find this information, in a format as nice as this, when you needed it? This site just looks like SEO spam to me. But it is number 5 on the 1st page of HN so maybe I'm wrong.

ChessMess 15y ago

My favorite in the day was gotAPI (http://www.gotapi.com/html http://www.gotapi.com/html) because you could quickly type what you were looking for. Sadly they have not kept up.

ilaksh 15y ago

The designer is supposed to be an expert in all of this stuff? I thought he was supposed to be an expert in graphic design? I remember a time, many years ago, when if you wanted to edit a graphical user interface, you would use a graphical user interface to do that. Since the interface you are editing is graphical. I have been manually doing this CSS / HTML stuff for many years, but I think that it would make about 100x more sense if we used the CSS/HTML just as a format for the editing and display tools to store and retrieve the data. I actually think the biggest reason we are still doing it by hand is that people (like myself) are afraid that someone will think they aren't a real programmer if they use a GUI. After all, programmers write ASCII codes, and if you're not doing that, you're not programmer. Right?

drivebyacct2 15y ago
Dreamweaver, Frontpage, and a dozen other random tools I've used that proclaim to reduce the code associated with design are that way --->. Let us know if you find anything that works for anything non-trivial. Or anything trivial for that matter.
- kateray 15y ago
  http://scrollkit.com http://scrollkit.com! very flexible in terms of design, though not made for liquid layouts. (disclosure: my project) let me know if there's anything you want it to do that it doesn't.
- ilaksh 15y ago
  I pretty much couldn't seriously get into Dreamweaver or Frontpage because of the stigma attached.. I would never be able to admit that I used them. But some people definitely use Frontpage and Dreamweaver.. you are saying they just don't work?

drivebyacct2 15y ago

By time I've looked something up on these I could have "Ctrl+T ?<whatever>"d it or use dochub or one of a bunch of others that do the same thing. Is it the physical presence that makes people love these so much? They seem far less usable as a horizontal PDF than more... digital and accessible means.

sbarre 15y ago

The HTML5 security cheatsheet was an enlightening read.. Glad to see most of the vulnerable browsers are older than old..