Skip to content

Instantly share code, notes, and snippets.

Avatar

Dawid Karabin hinok

View GitHub Profile
@ebidel
ebidel / download_chrome41.js
Last active Apr 19, 2020
For when you need to test your site in Google Search (Chrome 41).
View download_chrome41.js
/**
* Copyright 2018 Google Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
@bvaughn
bvaughn / index.md
Last active Dec 4, 2020
How to use profiling in production mode for react-dom
View index.md
@dvdbng
dvdbng / vim-heroku.sh
Last active Oct 29, 2020
Run vim in heroku updated 2017
View vim-heroku.sh
mkdir ~/vim
cd ~/vim
# Staically linked vim version compiled from https://github.com/ericpruitt/static-vim
# Compiled on Jul 20 2017
curl 'https://s3.amazonaws.com/bengoa/vim-static.tar.gz' | tar -xz
export VIMRUNTIME="$HOME/vim/runtime"
export PATH="$HOME/vim:$PATH"
cd -
View server.js
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './components/App';
import {flushServerSideRequires} from 'react-loadable';
let app = express();
let webpackStats = require('./output-webpack-stats.json');
@tkh44
tkh44 / Animation.jsx
Last active Feb 5, 2020
react-router v4 animated with data-driven-motion
View Animation.jsx
import React from 'react'
import { BrowserRouter as Router, Route, Link, Redirect, matchPath } from 'react-router-dom'
import { Motion } from 'data-driven-motion' // https://github.com/tkh44/data-driven-motion
const WOBBLY_SPRING = { stiffness: 200, damping: 15, precision: 0.1 }
const AnimationExample = () => (
<Router>
<div>
<ul>
@thevangelist
thevangelist / my-component.spec.js
Created Aug 4, 2016
The only React.js component test you'll ever need (Enzyme + Chai)
View my-component.spec.js
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);
});
@markerikson
markerikson / appEntryPoint.js
Last active Nov 23, 2020
Webpack React/Redux Hot Module Reloading (HMR) example
View appEntryPoint.js
import React from "react";
import ReactDOM from "react-dom";
import configureStore from "./store/configureStore";
const store = configureStore();
const rootEl = document.getElementById("root");
@zachleat
zachleat / rwdurl
Last active Feb 5, 2019
A command line utility to open a url with a bunch of different screen widths (and organize the windows).
View rwdurl
# My Chrome developer profile is in the `Profile 1` directory, make sure to update with yours.
# Best on an ultra wide monitor.
function rwdurl() {
open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(0,0);window.resizeTo(320,1395);window.location='$1';</script></body></html>"
open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(330,0);window.resizeTo(480,1395);window.location='$1';</script></body></html>"
open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(815,0);window.resizeTo(640,1395);window.location='$1';</script></body></html>"
open -n -g -a "Google Chrome" --args --new-window --profile-directory=Profile\ 1 --app="data:text/html,<html><body><script>window.moveTo(1460,0);window.resizeTo(800,1395);window.location='$1';</script></body></html>"
open -n
@paulirish
paulirish / what-forces-layout.md
Last active Dec 5, 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
@rikukissa
rikukissa / POST.md
Last active Jan 27, 2020
Unit testing Angular.js app with node.js, mocha, angular-mocks and jsdom #angular.js #testing
View POST.md
title slug createdAt language preview
Unit testing Angular.js app with node.js, mocha, angular-mocks and jsdom
unit-testing-angular-js-app-with-node
2015-07-05T18:04:33Z
en
Majority of search result about unit testing Angular.js apps is about how to do it by using test frameworks that run the tests in a real browser. Even though it's great to be able to test your code in multiple platforms, in my opinion it creates a lot of boilerplate code and makes it hard to run the tests in, for instance a CI-server.

Testing Angular.js app headlessly with node.js + mocha

Lean unit tests with minimal setup

You can’t perform that action at this time.