nathanacurtis

$space-inset-default = 16px 16px 16px 16px;
$space-inset-xs = 4px 4px 4px 4px;
$space-inset-s = 8px 8px 8px 8px;
$space-inset-m = 16px 16px 16px 16px;
$space-inset-l = 32px 32px 32px 32px;
$space-inset-xl = 64px 64px 64px 64px;
$space-stack-default = 0 0 16px 0;
$space-stack-xs = 0 0 4px 0;
$space-stack-s = 0 0 8px 0;
$space-stack-m = 0 0 16px 0;

marcysutton

NOTE: This is no longer an experiment! You can use the accessibility inspector in Chrome Devtools now, including a fantastic color contrast inspection tool. Read more: https://developers.google.com/web/updates/2018/01/devtools#a11y

---

Just like any good element inspector helps you debug styles, accessibility inspection in the browser can help you debug HTML and ARIA exposed for assistive technologies such as screen readers. There's a similar tool in Safari (and reportedly one in Edge) but I like the Chrome one best.

As an internal Chrome experiment, this tool differs from the Accessibility Developer Tools extension in that it has privileged Accessibility API access and reports more information as a result. You can still use the audit feature in the Chrome Accessibility Developer Tools, or you could use the aXe Chrome extension. :)

To enable the accessibility inspector in Chrome stable:

nathanacurtis

# Choices

color :
  white : &color-white "#FFFFFF"
  black : &color-black "#262626"
  neutral :
    20 : &color-neutral-20 "#222222"
    90 : &color-neutral-90 "#EEEEEE"
  blue:
    50: &color-blue-50 "#2196F3"

pzi

helpers do
  # Acts as a thin wrapper for image_tag and generates a srcset attribute for regular image tags
  # for usage with responsive images, supports middleman's asset_path helper.
  #
  # image_set_tag 'pic_1980.jpg', { 'pic_640.jpg' => '640w', 'pic_1024.jpg' => '1024w', 'pic_1980.jpg' => '1980w' }, sizes: '100vw', class: 'my-image'
  #
  # => <img src="/assets/ants_1980.jpg" srcset="/assets/pic_640.jpg 640w, /assets/pic_1024.jpg 1024w, /assets/pic_1980.jpg 1980w" sizes="100vw" class="my-image">
  #
  def image_set_tag(source, srcset = {}, options = {})
    srcset = srcset.map { |src, size| "#{asset_path(:images, src)} #{size}" }.join(', ')

devonharless

Product/User Definition

• How are you understanding customer needs?
• What are the top things users want?
• Where do new users come from?
• Who is going to be your first paying customer?
• What resistance will they have to trying your product and how will you overcome it?
• How does your product work in more detail?
• How will customers and/or users find out about you?
• How are you meeting customers?
• What do you understand about your users?

murtaugh

<figure class="code">
<pre><code class=“language-markup”>&lt;meta charset="utf-8"/></code></pre>
<figcaption>A UTF-8 encoding declaration should appear at the beginning of every &lt;head&gt; element.</figcaption>
</figure>

malarkey

When times get tough and people get nasty, you’ll need more than a killer smile. You’ll need a killer contract.

Used by 1000s of designers and developers Clarify what’s expected on both sides Helps build great relationships between you and your clients Plain and simple, no legal jargon Customisable to suit your business Used on countless web projects since 2008

…………………………