Skip to content

Instantly share code, notes, and snippets.

View joaocunha's full-sized avatar
Web Performance

João Cunha joaocunha

Web Performance
View GitHub Profile
<style>
.mailchimp-input {
border-radius: 0;
border-bottom: 1px solid #757575;
margin: 0 0 12px 0;
}
.mailchimp-input:focus {
border-color: #000000;
}
<script>
// Translate the inputs
window.setTimeout(function() {
Array.from(document.getElementsByClassName('mailchimp-input')).map(function(input) {return input.placeholder = 'Insira seu e-mail';});
}, 1);
</script>

Keybase proof

I hereby claim:

  • I am joaocunha on github.
  • I am joaocunha (https://keybase.io/joaocunha) on keybase.
  • I have a public key whose fingerprint is 1FA1 F398 7C20 4D71 B362 9F1E 2BB9 8199 0A70 3081

To claim this, I am signing this object:

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

  1. Launch quicktime player
  2. do Screen recording

screen shot 2014-10-22 at 11 16 23 am

@joaocunha
joaocunha / .zshrc
Created November 5, 2015 18:10 — forked from SlexAxton/.zshrc
My gif workflow
gifify() {
if [[ -n "$1" ]]; then
if [[ $2 == '--good' ]]; then
ffmpeg -i $1 -r 10 -vcodec png out-static-%05d.png
time convert -verbose +dither -layers Optimize -resize 600x600\> out-static*.png GIF:- | gifsicle --colors 128 --delay=5 --loop --optimize=3 --multifile - > $1.gif
rm out-static*.png
else
ffmpeg -i $1 -s 600x400 -pix_fmt rgb24 -r 10 -f gif - | gifsicle --optimize=3 --delay=3 > $1.gif
fi
else
@joaocunha
joaocunha / Grep.js
Last active August 29, 2015 14:24 — forked from nicdaCosta/Grep.js
/*
Grep.js
Author : Nic da Costa ( @nic_daCosta )
Created : 2012/11/14
Version : 0.2
(c) Nic da Costa
License : MIT, GPL licenses
Overview:
Basic function that searches / filters any object or function and returns matched properties.

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?

This is where any fun you might have been having ends. Now it’s time to get serious and talk about rules.

Writing CSS is hard. Even if you know all the intricacies of position and float and overflow and z-index, it’s easy to end up with spaghetti code where you need inline styles, !important rules, unused cruft, and general confusion. This guide provides some architecture for writing CSS so it stays clean and ma

* {
font-size: 12pt;
font-family: monospace;
font-weight: normal;
font-style: normal;
text-decoration: none;
color: black;
cursor: default;
}
@joaocunha
joaocunha / gulp-error-handling.js
Last active August 29, 2015 14:15
Basic error handling capabilities for gulp
var gulp = require('gulp');
var paths = {
src: 'src',
dist: 'dist'
};
// ---------------------------------------
// BASIC ERROR HANDLING
var gutil = require('gulp-util');
var notify = require('gulp-notify');

LESS Coding Guidelines

Medium uses a strict subset of LESS for style generation. This subset includes variables and mixins, but nothing else (no nesting, etc.).

Medium's naming conventions are adapted from the work being done in the SUIT CSS framework. Which is to say, it relies on structured class names and meaningful hyphens (i.e., not using hyphens merely to separate words). This is to help work around the current limits of applying CSS to the DOM (i.e., the lack of style encapsulation) and to better communicate the relationships between classes.

Table of contents