dalethedeveloper

#Techniques for Anti-Aliasing @font-face on Windows

It all started with an email from a client: Do these fonts look funky to you? The title is prickly.

The font in question was Port Lligat Sans from Google Web Fonts.

The "prickly" is aliasing caused by lack of hinting

davidensinger

/*
 * a small mixin for easy use of rem with px as fallback
 * usage: @include x-rem(font-size, 14px)
 * usage: @include x-rem(marign, 0 12px 2 1.2)
 * usage: @include x-rem(padding, 1.5 24px)
 *
 * thanks to Eric Meyer for https://github.com/ericam/susy
 * and Hans Christian Reinl for http://drublic.de/blog/rem-fallback-sass-less/
 */
@mixin x-rem($property, $values) {

pistachiomatt

// Stick all your icons in a subfolder in your images folder. Put retina versions in a subfolder of that called "@2x".
$sprites: sprite-map("NAME_OF_SUBFOLDER/*.png");
$sprites2x: sprite-map("NAME_OF_SUBFOLDER/@2x/*.png");

// stolen from 37signals
@mixin retina-media() {
  @media (min--moz-device-pixel-ratio: 1.3),
         (-webkit-min-device-pixel-ratio: 1.3),
         (min-device-pixel-ratio: 1.3),
         (min-resolution: 1.3dppx) {

cferdinandi

/**
 * Test for @font-face support
 * @author Filament Group
 * @link https://github.com/filamentgroup/face-off
 * @param  {Element} win
 * @param  {Null} undefined
 * @return {Boolean}
 */
var isFontFaceSupported = (function( win, undefined ) {

scottkellum

// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.7)
// ----

=e($name)
  @at-root #{&}__#{$name}
    @content
=m($name)
  @at-root #{&}--#{$name}

maxfenton

New computer setup

a/o 2020-05-29

--

Format the drive

1. Restart with Cmd-R or Cmd-D
2. Erase drive / 3x if second-hand
3. Reinstall MacOS

markgoodyear

/*!
 * gulp
 * $ npm install gulp-ruby-sass gulp-autoprefixer gulp-cssnano gulp-jshint gulp-concat gulp-uglify gulp-imagemin gulp-notify gulp-rename gulp-livereload gulp-cache del --save-dev
 */

// Load plugins
var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    cssnano = require('gulp-cssnano'),

benjamincharity

<div>YOLO HOBO</div>

AllThingsSmitty

##Sass Functions Cheat Sheet

1. RGB Functions
2. HSL Functions
3. Opacity Functions
4. Other Color Functions
5. List Functions
6. Map Functions
7. Selector Functions
8. String Functions

paulirish

/* bling.js */
window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
NodeList.prototype.__proto__ = Array.prototype;
NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };