alishalisha

Checking the State of Your States

If applicable, make sure your design component accounts for all these states. This is basically copied from the Nine States of Design Medium article. 😛

• Initial state: What happens before your component does anything? Maybe it’s the first time a user sees it. Maybe it’s not activated yet. Essentially, the component exists but hasn’t started.
• Loading state: Have you accounted for when a user will be waiting for something to happen? What does that look like?
• Empty state: Your component has initialized, but it’s empty. No data. No Items. Now may be a good time to get the user to act (“Do this thing!”), or to reward them (“Good job, everything is taken care of”).
• One state: You have some data. On an input, this may be after the first keystroke. In a list, it might be when you have one item (or one left).
• Some data state: This is usually what you think

timknight

$xs: ( max:  767px );
$sm: ( min:  768px );
$md: ( min:  992px );
$lg: ( min: 1200px );
$sm-only: ( min: map-get($sm, min), max: map-get($md, min) - 1 );
$md-only: ( min: map-get($md, min), max: map-get($lg, min) - 1 );

@mixin breakpoint($map) {
  $query: "";
  @if map-has-key($map, min) { $query: append($query, "(min-width: #{map-get($map, min)})") }

youngbrioche

module ImagesHelper
  # Acts as a thin wrapper for image_tag and generates an srcset attribute for regular image tags
  # for usage with responsive images polyfills like picturefill.js, supports asset pipeline path helpers.
  #
  # 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| "#{path_to_image(src)} #{size}" }.join(', ')

Jakobud

// Bootstrap Mid-Small - col-ms-* - the missing grid set for Bootstrap3.
//
// This is a hack to fill the gap between 480 and 767 pixels - a missing range
// in the bootstrap responsive grid structure.  Use these classes to style pages
// on cellphones when they transition from portrait to landscape.
//
// Contains:
//   Columns, Offsets, Pushes, Pulls for the Mid-Small layout
//   Visibility classes for the Mid-Small layout
//   Redefined visibility classes for the Extra Small layout

jlong

// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----

//
// map-fetch($map, $keys)
//
// An easy way to fetch a deep value in a multi-level map. Works much like
// map-get() except that you pass multiple keys as the second parameter to

andyl

.col-ms-1,
.col-ms-2,
.col-ms-3,
.col-ms-4,
.col-ms-5,
.col-ms-6,
.col-ms-7,
.col-ms-8,
.col-ms-9,
.col-ms-10,

isaacs

echo 'export PATH=$HOME/local/bin:$PATH' >> ~/.bashrc
. ~/.bashrc
mkdir ~/local
mkdir ~/node-latest-install
cd ~/node-latest-install
curl http://nodejs.org/dist/node-latest.tar.gz | tar xz --strip-components=1
./configure --prefix=~/local
make install # ok, fine, this step probably takes more than 30 seconds...
curl https://www.npmjs.org/install.sh | sh