Skip to content

Instantly share code, notes, and snippets.

View jmmcduffie's full-sized avatar

Jeremy McDuffie jmmcduffie

33 followers · 34 following
View GitHub Profile
@sarahdayan
sarahdayan / modifiers.scss
Last active September 2, 2024 22:01
Sass Modifiers Mixin
// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----
// Sass modifiers mixin by Sarah Dayan
// Generate All Your Utility Classes with Sass Maps: frontstuff.io/generate-all-your-utility-classes-with-sass-maps
// http://frontstuff.io
// https://github.com/sarahdayan
@jamescmartinez
jamescmartinez / slack_delete.rb
Last active May 28, 2024 15:00
This Ruby script will bulk remove all Slack files older than 30 days. Just add your API token from https://api.slack.com/web#authentication into the token quotes at the top of the file.
require 'net/http'
require 'json'
require 'uri'
@token = ''
def list_files
ts_to = (Time.now - 30 * 24 * 60 * 60).to_i # 30 days ago
params = {
token: @token,
@bradfrost
bradfrost / gist:59096a855281c433adc1
Last active September 4, 2023 15:01
Why I'm Not A JavaScript Developer

Answering the Front-end developer JavaScript interview questions to the best of my ability.

  • Explain event delegation

Sometimes you need to delegate events to things.

  • Explain how this works in JavaScript

This references the object or "thing" defined elsewhere. It's like "hey, thing I defined elsewhere, I'm talkin' to you."

  • Explain how prototypal inheritance works.
@bobbygrace
bobbygrace / trello-css-guide.md
Last active May 15, 2024 16:01
Trello CSS Guide

Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”

You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

@averyvery
averyvery / application.rb
Last active May 27, 2024 07:35
Inline CSS or JS in Rails
config.assets.precompile += [
# precompile any CSS or JS file that doesn't start with _
/(^inline[^_\/]|\/[^_])[^\/]*.(js|css)$/,
...
@p3t3r67x0
p3t3r67x0 / pseudo_elements.md
Last active September 19, 2024 12:31
A CSS pseudo-element is used to style specified parts of an element. In some cases you can style native HTML controls with vendor specific pseudo-elements. Here you will find an list of cross browser specific pseudo-element selectors.

Styling native elements

Native HTML controls are a challenge to style. You can style any element in the web platform that uses Shadow DOM with a pseudo element ::pseudo-element or the /deep/ path selector.

video::webkit-media-controls-timeline {
  background-color: lime;
}

video /deep/ input[type=range] {
@matijs
matijs / vanilla-click-handler.js
Last active May 2, 2021 02:47
;(function(handlers) {
if (!handlers) {
throw new Error('Nothing to handle');
}
document.documentElement.addEventListener('click', function(event) {
var handler = event.originalTarget.getAttribute('data-handler');
if (!handler) {
// nothing to do
return;
@straup
straup / upload.js
Created September 22, 2014 13:21
// See also: http://www.aaronland.info/weblog/2014/09/22/desire/#upload
function upload_init(){
$("#upload-form").submit(function(){
try {
var photos = $("#photo");
var files = photos = photos[0].files;
@tmaeda1981jp
tmaeda1981jp / Gruntfile.js
Created June 30, 2014 01:51
My livereload setting.
/*jslint white: true, nomen: true, maxlen: 120, plusplus: true, node: true, */
/*global module:false, */
'use strict';
module.exports = function(grunt) {
grunt.initConfig({
connect: {
@grorg
grorg / gist:6732841
Last active November 30, 2018 18:52
Why does animating left paint more often than translateX?
As asked by John on Twitter: https://twitter.com/johnallsopp/status/383461909640384512
"wow. Animate change to left via CSS, ~500 paint/reflow events. Animate translateX - 16!"
Answering here because it's a long response and I'm too slack to have a
blog/tumble/plus/facebook/myspace.
NOTE: This answer is out of date. See comment below.
The easy answer is that changing left causes relayout, which triggers a repaint, while