background preloader

Cheat Sheet

Cheat Sheet
Download cheat sheet as printable PDF A5 Syntax Child: > nav>ul>li Sibling: + div+p+bq Climb-up: ^ div+div>p>span+em^bq div+div>p>span+em^^bq Grouping: () div>(header>ul>li*2>a)+footer>p (div>dl>(dt+dd)*3)+footer>p Multiplication: * ul>li*5 Item numbering: $ ul>li.item$*5 h$[title=item$]{Header $}*3 <h1 title="item1">Header 1</h1><h2 title="item2">Header 2</h2><h3 title="item3">Header 3</h3> ul>li.item$$$*5 ul>li.item$@-*5 ul>li.item$@3*5 ID and CLASS attributes #header .title form#search.wide p.class1.class2.class3 Custom attributes p[title="Hello world"] td[rowspan=2 colspan=3 title] [a='value1' b="value2"] Text: {} a{Click me} <a href="">Click me</a> p>{Click }+a{here}+{ to continue} <p>Click <a href="">here</a> to continue</p> Implicit tag names .class em>.class ul>.class table>.row>.col All unknown abbreviations will be transformed to tag, e.g. foo → <foo></foo>. Alias of html:5 <! a a:link a:mail abbr acronym, acr base basefont br frame hr bdo bdo:r bdo:l col link link:css link:print link:favicon link:touch link:rss link:atom meta meta:utf img c

Related:  Code / Web Developmentdeveloppeur

Set Up Persistence with DevTools Workspaces   Set up persistent authoring in Chrome DevTools so you can both see your changes immediately and save those changes to disk. Chrome DevTools lets you change elements and styles on a web page and see your changes immediately. By default, refresh the browser and the changes go away unless you've manually copied and pasted them to an external editor. fancybox - Touch enabled, responsive and fully customizable jQuery lightbox script Combination of jQuery, CSS transitions to spice up the way modal window opens. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque auctor nibh eu nibh scelerisque malesuada. Morbi mollis eleifend turpis. Mauris consequat convallis volutpat.

“Right click and save as” needs to go away For a long time it has been standard practice to ask visitors to “right click and save as” when downloading a file that the browser itself is capable of rendering, but where doing so is not desirable. One reason for doing this is to spare people from the annoying experience of accidentally clicking a link to a 25 MB PDF, which subsequently launches a browser plugin that of course crashes while trying to download and display the file. From a UX perspective though, adding instructions on how to click a link is not optimal, and feels like a hack. Not to mention that lots of people are literally afraid of the right mouse button. My mother is anyway. Luckily there’s a correct way of doing this now, though it hasn’t seen widespread adoption yet:

Learn coffeescript in Y Minutes CoffeeScript is a little language that compiles one-to-one into the equivalent JavaScript, and there is no interpretation at runtime. As one of the succeeders of JavaScript, CoffeeScript tries its best to output readable, pretty-printed and smooth-running JavaScript codes working well in every JavaScript runtime. See also the CoffeeScript website, which has a complete tutorial on CoffeeScript. Got a suggestion? API Directory Skip to main content <div id="usermenus-desktop"><div class="usermenus hidden-xs"><ul class="menu"><li class="first leaf pull-left text-uppercase"><a href="/faq#Write_For_PW">Write for us</a></li><li class="first leaf pull-left text-uppercase"><a href="/user/register?destination=apis/directory">Become member</a></li><li class="last leaf pull-left text-uppercase"><a href="/user/login?

Serving your resume over curl like a badass · a flash of light and a distant boom I thought it would be an appropriate use of time to make my resume viewable on the command line. Requirements Optional Design Composition - 15 Things You Can't Afford NOT to Know The composition is one of the six crucial elements of design. Without a strong and solid design composition, everything starts falling apart. In this article, we will give you 15 tips on how to strengthen your composition – no matter if it’s photography, illustration or any graphic design project. We also prepared a beautiful collection of designs in the end, for your inspiration. Enjoy! 1.

WAI-ARIA Overview Quick links: WAI-ARIA, User Agent Implementation Guide, FAQ See also FAQ: What is the current status of WAI-ARIA development? Introduction

Related:  meztli