Skip to content

Instantly share code, notes, and snippets.

View francisrupert's full-sized avatar

Francis Rupert francisrupert

View GitHub Profile
@paulirish
paulirish / what-forces-layout.md
Last active April 24, 2024 01:42
What forces layout/reflow. The comprehensive list.

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
@adamjohnson
adamjohnson / publickey-git-error.markdown
Last active April 18, 2024 01:00
Fix "Permission denied (publickey)" error when pushing with Git

"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
@MelbourneDeveloper
MelbourneDeveloper / Stuff That Software Developers Do.md
Last active April 15, 2024 12:30
Stuff That Software Developers Do

Stuff That Software Developers Do

This is a list of stuff that the average software developer does from week to week

Coding

  • Code design
  • Refactoring
  • Algorithms
  • Profiling
  • Code reviews
  • Building frameworks
@scottjehl
scottjehl / anchorinclude.js
Created May 20, 2011 17:04
Anchor-include Pattern
/*
* anchor-include pattern for already-functional links that work as a client-side include
* Copyright 2011, Scott Jehl, scottjehl.com
* Dual licensed under the MIT
* Idea from Scott Gonzalez
* to use, place attributes on an already-functional anchor pointing to content
* that should either replace, or insert before or after that anchor
* after the page has loaded
* Replace: <a href="..." data-replace="articles/latest/fragment">Latest Articles</a>
* Before: <a href="..." data-before="articles/latest/fragment">Latest Articles</a>
@remy
remy / details.js
Created April 18, 2010 22:28
Add <details> support - includes stylesheet
/**
* Note that this script is intended to be included at the *end* of the document, before </body>
*/
(function (window, document) {
if ('open' in document.createElement('details')) return;
// made global by myself to be reused elsewhere
var addEvent = (function () {
if (document.addEventListener) {
return function (el, type, fn) {
@stowball
stowball / wp8-ie10-fix.js
Last active April 17, 2022 19:09
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
(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);
}
})();
@CaptainN
CaptainN / jquery.mobile.just-touch.js
Created March 29, 2012 20:06
Just touch events for jQuery
// This is a combination of two modified files from jQuery Mobile,
// jquery.mobile.vmouse.js and jquery.mobile.event.js
// They were modified to only provide the touch event shortcuts, and
// avoid the rest of the jQuery Mobile framework.
// The normal jQuery Mobile license applies. http://jquery.org/license
//
// This plugin is an experiment for abstracting away the touch and mouse
// events so that developers don't have to worry about which method of input
// the device their document is loaded on supports.
//
@eirikbacker
eirikbacker / addEventListener-polyfill.js
Created June 3, 2012 19:30
addEventListener polyfill for IE6+
//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}
@murtaugh
murtaugh / 1. single-line.html
Last active April 21, 2021 16:23
Blockquote patterns for ALA
<figure class="quote">
<blockquote>It is the unofficial force—the Baker Street irregulars.</blockquote>
</figure>
@jasesmith
jasesmith / atom-vertical-file-tabs.less
Last active December 10, 2020 01:18
For vertically stacked open file tabs, put this in your `./atom/styles.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;