Skip to content

Instantly share code, notes, and snippets.

View semantic-html-example-2.html
<div class="btn" onclick="alert('something')">do something</div>
View semantic-html-example-1.html
<div class="btn" onclick="alert('something')">do something</div>
<a href="#" class="btn" onclick="alert('something')">do something</a>
<button type="button" class="btn" onclick="alert('something')">do something</button>
@nwtn
nwtn / .bash_aliases
Last active Dec 3, 2015
packup — manage file managers
View .bash_aliases
packup() {
# apple software update
printf "\n~~Apple Software Update~~\n\n"
sudo softwareupdate --install --all
# ruby gems
printf "\n\n~~Ruby Gems~~\n"
printf "\n~gem update~\n"
sudo gem update
@nwtn
nwtn / gist:7032904
Last active Dec 25, 2015
art direction grouping in src-n syntax
View gist:7032904

The viewport-url parts of the src-n syntax are confusing. What about replacing them with something like this?

 <img ad-1 = "v1-small.jpg, v1-large.jpg"
      ad-2 = "v2-small.jpg, v2-large.jpg"
      src-1 = "(min-width: 400px) v1-small.jpg"
      src-2 = "(min-width: 600px) v1-large.jpg"
      src-3 = "(min-width: 1000px) v2-small.jpg"
      src-4 = "(min-width: 1200px) v2-large.jpg" alt="urgh" />

First, define art direction groups. This says that v1-small.jpg and v1-large.jpg are identical, except for size/scaling; the two images in ad-2 are art directed differently than those in ad-1. Furthermore, order implies size: the browser can trust that within each ad-N group, smaller images are listed before large ones.

@nwtn
nwtn / object_embed_fallback.html
Last active Oct 12, 2015
picture fallbacks (object, embed, img)
View object_embed_fallback.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>&lt;picture&gt; with different fallbacks</title>
</head>
<body>
<h1>&lt;picture&gt; with different fallbacks</h1>
<p>Don't forget to check which resources are loaded, regardless of what is displayed.</p>