Skip to content

Instantly share code, notes, and snippets.

View joaocunha's full-sized avatar
⚡
Web Performance

João Cunha joaocunha

⚡
Web Performance
134 followers · 178 following
View GitHub Profile
@joaocunha
joaocunha / How To Hide The Select Arrow On Firefox.md
Last active December 10, 2023 13:05
How to hide <select> dropdown's arrow in Firefox when using "-moz-appearance: none;".

This is no longer a bug. I'm keeping the gist for historical reasons, as it helped to get it fixed. Make sure to read the notes by the end of the post.

How to remove hide the select arrow in Firefox using -moz-appearance:none;

TL;DR (or, the fix)

  1. Set -moz-appearance to none. This will "reset" the styling of the element;
  2. Set text-indent to 0.01px. This will "push" the text a tiny bit[1] to the right;
@joaocunha
joaocunha / how to screencapture and make animated gifs or whathaveyou.md
Created November 5, 2015 18:10 — forked from paulirish/how to screencapture and make animated gifs or whathaveyou.md
Screencapture and animated gifs

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 / launchaco.css
Created March 1, 2018 01:04
<style>
.mailchimp-input {
border-radius: 0;
border-bottom: 1px solid #757575;
margin: 0 0 12px 0;
}
.mailchimp-input:focus {
border-color: #000000;
}
@joaocunha
joaocunha / launchaco.js
Created March 1, 2018 01:04
<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>
@joaocunha
joaocunha / keybase.md
Created August 25, 2016 18:56

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:

@joaocunha
joaocunha / vunit_example.html
Last active February 4, 2016 18:58
vUnit.js example
<head>
<!-- Add vUnit.js to the head if you want to avoid FOUC -->
<script src="path/to/vunit.js"></script>
<!-- Instantiate vUnit.js passing a CSSMap with properties you want to play with -->
<script>
new vUnit({
CSSMap: {
// The selector (vUnit will create rules ranging from .selector1 to .selector100)
'.vh_height': {
@joaocunha
joaocunha / modernizr-retina-test.js
Created November 27, 2013 13:46
Modernizr test for retina / high resolution / high pixel density.
/**
* Modernizr test for retina / high resolution / high pixel density
*
* @author Joao Cunha
* @license MIT
*/
Modernizr.addTest('hires', function() {
// starts with default value for modern browsers
var dpr = window.devicePixelRatio ||
@joaocunha
joaocunha / sublime-text-paste-indent-shortcut.json
Last active December 28, 2015 16:09
Sublime Text Paste & Indent Shortcut
// Replaces pasting with paste and indent.
// Add to [Preferences → Key Bindings - User] file
// MAC
{ "keys": ["super+v"], "command": "paste_and_indent"},
{ "keys": ["super+shift+v"], "command": "paste" }
// Windows/Linux
{ "keys": ["ctrl+v"], "command": "paste_and_indent"},
{ "keys": ["ctrl+shift+v"], "command": "paste" }
@joaocunha
joaocunha / console-time.sublime-snippet
Last active December 28, 2015 16:08
Sublime Text Snippet - console.time()
<snippet>
<content><![CDATA[
console.time(${1:'timer'});
$SELECTION$0
console.timeEnd(${2:'timer'});
]]></content>
<tabTrigger>ctime</tabTrigger>
<scope>text.html,source.js</scope>
<description>console.time()</description>
@joaocunha
joaocunha / console-log.sublime-snippet
Last active December 28, 2015 16:08
Sublime Text Snippet - console.log()
<snippet>
<content><![CDATA[console.log($SELECTION$0);]]></content>
<tabTrigger>clog</tabTrigger>
<scope>text.html,source.js</scope>
<description>console.log()</description>
</snippet>