Skip to content

Instantly share code, notes, and snippets.

Francis Rupert francisrupert

  • USDA-FSA via SAIC
  • Kansas City, MO
View GitHub Profile
@jasesmith
jasesmith / atom-vertical-file-tabs.less
Last active Apr 12, 2019
For vertically stacked open file tabs, put this in your `./atom/styles.less`
View atom-vertical-file-tabs.less
atom-workspace-axis.vertical atom-pane {
flex-direction: row;
.tab-bar:not(:empty) {
box-shadow: inset -1px 0 0 #181a1f;
resize: horizontal;
height: auto;
display: block;
padding-right: 1px;
padding-bottom: 3em;
min-width: 14em;
@caseywatts
caseywatts / 0.md
Last active May 1, 2019
heroku flip bookmarklet
View 0.md
@paulirish
paulirish / what-forces-layout.md
Last active Jul 9, 2020
What forces layout/reflow. The comprehensive list.
View what-forces-layout.md

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
@flohei
flohei / search.html
Last active Oct 28, 2016
An example search page for Jekyll running the jekyll-lunr-js-search plugin.
View search.html
---
layout: default
permalink: /search/
---
<!--
http://10consulting.com/2013/03/06/jekyll-and-lunr-js-static-websites-with-powerful-full-text-search-using-javascript/
-->
<div class="home">
@adamjohnson
adamjohnson / publickey-git-error.markdown
Last active Jul 8, 2020
Fix "Permission denied (publickey)" error when pushing with Git
View publickey-git-error.markdown

"Help, I keep getting a 'Permission Denied (publickey)' error when I push!"

This means, on your local machine, you haven't made any SSH keys. Not to worry. Here's how to fix:

  1. Open git bash (Use the Windows search. To find it, type "git bash") or the Mac Terminal. Pro Tip: You can use any *nix based command prompt (but not the default Windows Command Prompt!)
  2. Type cd ~/.ssh. This will take you to the root directory for Git (Likely C:\Users\[YOUR-USER-NAME]\.ssh\ on Windows)
  3. Within the .ssh folder, there should be these two files: id_rsa and id_rsa.pub. These are the files that tell your computer how to communicate with GitHub, BitBucket, or any other Git based service. Type ls to see a directory listing. If those two files don't show up, proceed to the next step. NOTE: Your SSH keys must be named id_rsa and id_rsa.pub in order for Git, GitHub, and BitBucket to recognize them by default.
  4. To create the SSH keys, type ssh-keygen -t rsa -C "your_email@example.com". Th
@stowball
stowball / wp8-ie10-fix.js
Last active Jul 8, 2020
Microsoft's stop-gap solution to fix IE 10 & 11's viewport on Windows Phone 8. I've also added another condition so it won't run on other browsers that spoof the user agent. Details: http://mattstow.com/responsive-design-in-ie10-on-windows-phone-8.html
View wp8-ie10-fix.js
(function() {
if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode("@-ms-viewport{width:auto!important}")
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
})();
@murtaugh
murtaugh / 1. single-line.html
Last active May 17, 2020
Blockquote patterns for ALA
View 1. single-line.html
<figure class="quote">
<blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
</figure>
@voidfiles
voidfiles / app_net_grids.md
Created Aug 15, 2012
How App.net uses YUI3 grids
View app_net_grids.md

How you can create a responsive grid system using YUI3 grids and SASS

This is a quick rundown of how and why we use YUI3 grids at App.net

As far as I can tell there are three types of CSS grids: a static-width pre-defined grid, a flexible-width pre-defined grid, and a generative grid. In the first two grids (pre-defined width), you basically decide how many columns you have across the screen, and then create blocks in any multiple of those. This pattern often looks like "span-4", "span-6", "pull-10", "push-5", etc. You find this style in popular frameworks like Bootstrap and Blueprint.

The third way, the generative/recursive grid system, doesn't seem to be as popular as the others. I am not entirely sure why, because the generative grid can pack more punch in less lines. In this vein is there is OOCSS and YUI3 CSS Grids.

@voidfiles
voidfiles / yui_grid.scss
Created Aug 15, 2012
YUI3 Grids as a SASS mixin
View yui_grid.scss
@mixin yui_grid($namespace:'') {
/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
*/
.#{$namespace}yui3-g {
letter-spacing: -0.31em; /* webkit: collapse white-space between units */
@eirikbacker
eirikbacker / addEventListener-polyfill.js
Created Jun 3, 2012
addEventListener polyfill for IE6+
View addEventListener-polyfill.js
//addEventListener polyfill 1.0 / Eirik Backer / MIT Licence
(function(win, doc){
if(win.addEventListener)return; //No need to polyfill
function docHijack(p){var old = doc[p];doc[p] = function(v){return addListen(old(v))}}
function addEvent(on, fn, self){
return (self = this).attachEvent('on' + on, function(e){
var e = e || win.event;
e.preventDefault = e.preventDefault || function(){e.returnValue = false}
e.stopPropagation = e.stopPropagation || function(){e.cancelBubble = true}
You can’t perform that action at this time.