Skip to content

Instantly share code, notes, and snippets.

View sass_and_less_compared.markdown

Sass/Less Comparison

In this document I am using Sass's SCSS syntax. You can choose to use the indented syntax in sass, if you prefer it, it has no functional differences from the SCSS syntax.

For Less, I'm using the JavaScript version because this is what they suggest on the website. The ruby version may be different.

Variables

@chriseppstein
chriseppstein / tracer.rb
Created May 3, 2009
Tracing ruby method calls
View tracer.rb
module Tracer
def trace(method)
method, ending = split_method_name(method)
define_method "#{method}_with_trace#{ending}" do |*arguments|
puts "called #{self.class}##{method}#{ending}(#{arguments.map(&:inspect).join(', ')})"
returning(send("#{method}_without_trace#{ending}", *arguments)) do |v|
if block_given?
yield self, v
end
puts "#{self.class}##{method}#{ending} => #{v.inspect}"
@chriseppstein
chriseppstein / 0_selector_hacks.scss
Created Sep 14, 2011
This gist demonstrates some uses of the new sass feature: Passing content blocks to mixins.
View 0_selector_hacks.scss
@mixin ie6 { * html & { @content } }
#logo {
background-image: url("/images/logo.png");
@include ie6 { background-image: url("/images/logo.gif"); }
}
View 0_namespacing.scss
mymodule {
@at-root {
.#{&}-header { ... }
.#{&}-footer { ... }
.#{&}-body {
a { ... }
span { ... }
p { ... }
}
}
@chriseppstein
chriseppstein / pgp_public_key.txt
Created Apr 17, 2018
PGP public key for security@linkedin.com
View pgp_public_key.txt
-----BEGIN PGP PUBLIC KEY BLOCK-----
mQINBFhrJiwBEADCAf2/KIky7iVU+OnU16vXs9yewnevPCkKTNwWfcPbmxGGiN/n
DAAUOxJ62XiXC5MKVThr2od9kl/VtBI9IYtAqXCQ/hA9yTUJ47/ZcM55RQqyiwjP
DWjZXzp5V2P+/Ny3nyST1Z7/kH6GlFZ6+nPOkeQSQyYjwqPqwz2UZL0h+rZHTlzE
edGlilStHFOuwdqfsDZtb0qGaXT7AN1BPmn9ulzNG/8lcssIGio3/xLJ5fLCfoqx
Qb0iZPtiOCiPSJwM484a8JgHrwmsoBlOJmJ6tZc9HohU4OFgZyCwnxE0fTcNvuDt
+JDCNCumpoa8/6x7U0eIg2ghJ9EDRliy1O5VxHLttOz/I+1guEedk/EcOx/5Q1Zz
BPdJuBrB2ryJ1GDEJi+Cy3MCI48VTc3/4toGarGyH/gaVWOfFt1QJAaXPPFkij5Y
egfAy6yQYY0uYGml65VK0QdsRuZESjAYkXcUpdOiGdrUp77JwgNEuMmBZ7Q1d3jn
@chriseppstein
chriseppstein / DependenciesInPublicAPIs.md
Last active Jun 23, 2021
If you keep getting "Two different types with this name exist, but they are unrelated." from TypeScript, here's what you need to do to fix it.
View DependenciesInPublicAPIs.md

Two different types with this name exist, but they are unrelated.

I'm a little slow, so maybe everyone else already realized this, but after struggling for almost a year with periodic "Two different types with this name exist" error from typescript, I've realized it is actually really helpful error and it highlights a real problem that I've failed to understand until this week.

I've been working around this issue by making sure that my libraries with common dependencies are always on the same version for some of our shared library dependencies. This works because package managers dedup the same version of a dependency. But when the versions diverge you get different instances of the library. In this mode, Good Guy TypeScript is telling us "Hey you're comparing values and types from different instances of the same library and that's a Bad Idea."

View grandparent_mixin.scss
@function up-to($list, $index) {
$l: ();
@each $e in $list {
@if length($l) < $index {
$l: append($l, $e, list-separator($list));
}
}
@return $l;
}
@chriseppstein
chriseppstein / semantic_summary.rb
Created Jul 27, 2012
This ruby script will summarize the html5 semantic structure of a webpage so that you can more easily ensure the page is correct.
View semantic_summary.rb
#!/usr/bin/env ruby
require 'rubygems'
require 'nokogiri'
require 'open-uri'
url = ARGV[0]
class Document < Nokogiri::XML::SAX::Document
SEMANTIC_CONTAINERS = %w(body article section nav aside hgroup header footer)
COUNT_ELEMENTS = %w(p a)
View color_shifted.scss
@function color-shift($color, $amount: 10%) {
@return if(lightness($color) > 50%,
darken($color, $amount),
lighten($color, $amount))
}
$my-bg-color: #333;
$my-fg-color: #c00;
.shifted {
View controllers.application\.js
import Controller from '@ember/controller';
export default class ApplicationController extends Controller {
appName = 'Ember Twiddle';
}