Skip to content

Instantly share code, notes, and snippets.

View TimonVS's full-sized avatar

Timon van Spronsen TimonVS

View GitHub Profile

FWIW: I (@rondy) am not the creator of the content shared here, which is an excerpt from Edmond Lau's book. I simply copied and pasted it from another location and saved it as a personal note, before it gained popularity on news.ycombinator.com. Unfortunately, I cannot recall the exact origin of the original source, nor was I able to find the author's name, so I am can't provide the appropriate credits.


Effective Engineer - Notes

What's an Effective Engineer?

@jonathansick
jonathansick / query.graphql
Last active January 20, 2024 07:58
GitHub GraphQL repo commit history query
{
repository(name: "sickvim", owner: "jonathansick") {
ref(qualifiedName: "master") {
target {
... on Commit {
id
history(first: 5) {
pageInfo {
hasNextPage
}
@sloanlance
sloanlance / git-temporary-ignore.md
Last active March 19, 2025 23:27
git: A couple ways to temporarily ignore changed or new files without altering .gitignore.

There are times notifications aren't wanted about either a changed repo file or a new file that needs to be added to the repo. However, adding the name of the file to .gitignore might not be a good option, either. For example, locally-generated files that other users aren't likely to generate (e.g., files created by an editor) or files of experimental test code might not be appropriate to appear in a .gitignore file.

In those cases, use one of these solutions:

  1. If the file is a changed repo file

    Use the command:

    git update-index --assume-unchanged "$FILE"

@thevangelist
thevangelist / my-component.spec.js
Created August 4, 2016 13:06
The only React.js component test you'll ever need (Enzyme + Chai)
import React from 'react';
import { shallow } from 'enzyme';
import MyComponent from '../src/my-component';
const wrapper = shallow(<MyComponent/>);
describe('(Component) MyComponent', () => {
it('renders without exploding', () => {
expect(wrapper).to.have.length(1);
});
@Rich-Harris
Rich-Harris / service-workers.md
Last active September 4, 2025 09:45
Stuff I wish I'd known sooner about service workers

Stuff I wish I'd known sooner about service workers

I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.

I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.

Use Canary for development instead of Chrome stable

Chrome 51 has some pretty wild behaviour related to console.log in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.

@gaearon
gaearon / connect.js
Last active June 20, 2025 00:32
connect.js explained
// connect() is a function that injects Redux-related props into your component.
// You can inject data and callbacks that change that data by dispatching actions.
function connect(mapStateToProps, mapDispatchToProps) {
// It lets us inject component as the last step so people can use it as a decorator.
// Generally you don't need to worry about it.
return function (WrappedComponent) {
// It returns a component
return class extends React.Component {
render() {
return (
@subfuzion
subfuzion / curl.md
Last active September 1, 2025 16:24
curl POST examples

Common Options

-#, --progress-bar Make curl display a simple progress bar instead of the more informational standard meter.

-b, --cookie <name=data> Supply cookie with request. If no =, then specifies the cookie file to use (see -c).

-c, --cookie-jar <file name> File to save response cookies to.

import React from "react";
import { render } from "react-dom";
const ParentComponent = React.createClass({
getDefaultProps: function() {
console.log("ParentComponent - getDefaultProps");
},
getInitialState: function() {
console.log("ParentComponent - getInitialState");
return { text: "" };
@paulirish
paulirish / what-forces-layout.md
Last active August 28, 2025 15:03
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
@kottenator
kottenator / simple-pagination.js
Created July 13, 2015 20:44
Simple pagination algorithm
// Implementation in ES6
function pagination(c, m) {
var current = c,
last = m,
delta = 2,
left = current - delta,
right = current + delta + 1,
range = [],
rangeWithDots = [],
l;