aristretto

Resources & cool Links

• PhantomCSS - Visual/CSS regression testing with PhantomJS.
• WraithJS - A responsive screenshot comparison too.
• Hologram - A markdown based documentation system for style guides.
• Cortana - Nice theme for Trulia's Hologram styleguide generator.
• CSSCombJS - CSS coding style formatter.
• Rizzo - Lonely Planet's living style guide. Really, really neat!
• A Maintainable Styleguide - Great article by @ianfeather about how he built Rizzo.
• CSSTest - The why and how of CSS testing.
• Flexbox Cheatsheet - by @JoniTrythall.

aristretto

Contract Killer

The popular open-source contract for web designers and developers by Stuff & Nonsense

• Originally published: 23/12/2008
• Revised date: 13/08/2014 by @aristretto
• Original post

---

aristretto

// Create REM values with PX fall back
//
// Generate a REM with PX fallback from 
// $baseFontSize. Enter the desired size based
// on pixels in numerical form. Supports shorthand.
//
// Forked from: http://codepen.io/thejameskyle/pen/JmBjc
//
// @author Greg Rickaby
// @since 1.0

aristretto

@mixin transparent($color, $alpha) {
  $rgba: rgba($color, $alpha);
  $ie-hex-str: ie-hex-str($rgba);
  background-color: transparent;
  background-color: $rgba;
  filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#{$ie-hex-str},endColorstr=#{$ie-hex-str});
  zoom: 1;
}

aristretto

cat /path/to/img.png | openssl base64 | tr -d '\n' | pbcopy

aristretto

var arr = [1,1,2];
var arr = arr.filter(function (v, i, a) { return a.indexOf (v) == i }); // dedupe array

aristretto

Array.prototype.clean = function(deleteValue) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] == deleteValue) {         
      this.splice(i, 1);
      i--;
    }
  }
  return this;
};

aristretto

/*

* more helpful links
* http://www.w3.org/TR/CSS2/generate.html#scope
* http://quirksmode.org/css/css2/counter.html
* http://www.impressivewebs.com/css-counter-increment/

*/

/* decimal counters (basic, default) */

aristretto

$placeholders: '-webkit-input-placeholder',
               '-moz-placeholder',
               '-ms-input-placeholder';

@mixin placeholder {
  @each $placeholder in $placeholders {
    
    @if $placeholder == "-webkit-input-placeholder" {
      &::#{$placeholder} {
        @content;

aristretto

// truncate URIs in a more elegant way
String.prototype.truncateURI = function(n, backup){
  
  var len = this.length;
  var self = this.toString();
  var max_len  = (n||30);
  var fallback = (backup||"website")
  
  var patt = /^(https?\:\/\/)?(www\.)?([a-z0-9\-\_]+)([a-z\.]{2,})+([a-z0-9\-\_\#\/ ]+\/)?([a-z0-9\-\_\#\/]+\.?[a-z0-9]+)?/i
  /*** PATTERN BREAKDOWN ***