Skip to content

Instantly share code, notes, and snippets.


Pascal Duez pascalduez

View GitHub Profile

Everything I Know About UI Routing


  1. Location - The location of the application. Usually just a URL, but the location can contain multiple pieces of information that can be used by an app
    1. pathname - The "file/directory" portion of the URL, like invoices/123
    2. search - The stuff after ? in a URL like /assignments?showGrades=1.
    3. query - A parsed version of search, usually an object but not a standard browser feature.
    4. hash - The # portion of the URL. This is not available to servers in request.url so its client only. By default it means which part of the page the user should be scrolled to, but developers use it for various things.
    5. state - Object associated with a location. Think of it like a hidden URL query. It's state you want to keep with a specific location, but you don't want it to be visible in the URL.
peter-leonov / react-redux_v5.x.x.js
Last active Dec 12, 2018
react-redux connect() typings based on Sam's Goldman example
View react-redux_v5.x.x.js
// see here for details
S = State
A = Action
OP = OwnProps
SP = StateProps
DP = DispatchProps

I bundled these up into groups and wrote some thoughts about why I ask them!

If these helped you, I'd love to hear about it!! I'm on twitter @vcarl_ or send me an email

Onboarding and the workplace

  • How long will it take to deploy my first change? To become productive? To understand the codebase?
  • What kind of equipment will I be provided? Will the company pay/reimburse me if I want something specific?
trueadm / adopt-syntax.js
Last active Jul 15, 2020
Adding a the "adopt" keyword to the JSX syntax
View adopt-syntax.js
// I'm suggesting we add a new "adopt X from <Y />" syntax to the JSX language
// it would de-sugar to render prop children, but look and read better than
// what we currently have. For example:
// 1.
// this sugar
function MyComponent(props) {
adopt foo from <Bar />;
return <div>{foo}</div>;
loganfsmyth / .babelrc
Created Dec 1, 2017
Short description of Babel's config merge for `.env`
View .babelrc
sourceMaps: false,
comments: false,
plugins: [
["plg-one", {}],
["plg-two", {opt: false}],
env: {
development: {
sourceMaps: true,
View example-c.js
// Option C:
// this implementation has a small amount of overhead compared to (a) and (b)
const React = require('react');
const counterState = React.createStateReducer({
initialState: props => ({
counter: 0,
divRef: React.createRef(),
reducer: (action, state) => {


CSS for Components


/* Counter.css */
@import Button from './Button.css';
threepointone /
Last active Apr 4, 2020
why css purists will love glam

I made a little styling lib called glam

(some features are in development)


let's start off with the simplest use case. we'll make an 'index.html' page, and assume we've setup our js bundler to output bundle.js

samthor / safari-nomodule.js
Last active Aug 7, 2020
Safari 10.1 `nomodule` support
View safari-nomodule.js
* Safari 10.1 supports modules, but does not support the `nomodule` attribute - it will
* load <script nomodule> anyway. This snippet solve this problem, but only for script
* tags that load external code, e.g.: <script nomodule src="nomodule.js"></script>
* Again: this will **not** prevent inline script, e.g.:
* <script nomodule>alert('no modules');</script>.
* This workaround is possible because Safari supports the non-standard 'beforeload' event.
* This allows us to trap the module and nomodule load.
srdjan / 100+ different counter apps...
Last active Jul 18, 2020
More than 100 different counter applications...
View 100+ different counter apps...
100+ different js counter applications...
You can’t perform that action at this time.