kamleshchandnani

const AWS = require('aws-sdk');
const Busboy = require('busboy');

const BUCKET_NAME = '';
const IAM_USER_KEY = '';
const IAM_USER_SECRET = '';

function uploadToS3(file) {
  let s3bucket = new AWS.S3({
    accessKeyId: IAM_USER_KEY,

kamleshchandnani

Let's assume we have following line in our HA proxy file:
reqrep ^([^\ :]*)\ /api/v1/api-name/(.*) \1\ /staging/path-name/\2
Here is our sample domain:
https://example.com/api/v1/api-name/

The goal here is to rewrite /api/v1/api-name/ to /staging/path-name/ leaving anything else unchanged.

Breaking the Regex and understanding in parts:
There are basically 3 parts in the regex:

kamleshchandnani

const Link = styled.a`
  color: ${(props) => props.theme.color.blue};
  text-decoration: none;
  cursor: pointer;

  &:hover {
    color: ${(props) => props.theme.color.blueDark};
  }

  &:focus {

kamleshchandnani

const Link = styled(
  ({
    color, // spread out props and don't pass them down
    children,
    ...props
  }) => (
    <a {...props}>
      {children}
    </a>
  ),

kamleshchandnani

import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';

const styles = {
  borderRadius(props) {
    if (props.shape === 'bluntEdged') {
      return props.theme.borderRadius;
    }
    if (props.shape === 'sharpEdged') {

kamleshchandnani

import React from 'react';
import PropTypes from 'prop-types';
import { Helmet } from 'react-helmet';
import GalleryContainer from './GalleryContainer';

const ampCarousel = [{
  async: '',
  'custom-element': 'amp-carousel',
  src: 'https://cdn.ampproject.org/v0/amp-carousel-0.1.js',
}];

kamleshchandnani

import logger from 'utils/logger';

const allowedOrigins = [
  __CONFIG__.hostUrl,
  `${__CONFIG__.hostUrl.replace('-', '--').replace('.', '-')}.cdn.ampproject.org`,
  `${__CONFIG__.hostUrl}.amp.cloudflare.com`,
  'https://cdn.ampproject.org',
];

const corsMiddlewareAmp = (req, res, next) => {

kamleshchandnani

UPDATE: A better way! (August 2015)

As pointed out by @johntyree in the comments, using git reflog is easier and more reliable. Thanks for the suggestion!

 $ git reflog
1ed7510 HEAD@{1}: checkout: moving from develop to 1ed7510
3970d09 HEAD@{2}: checkout: moving from b-fix-build to develop
1ed7510 HEAD@{3}: commit: got everything working the way I want
70b3696 HEAD@{4}: commit: upgrade rails, do some refactoring

kamleshchandnani

<script> async, defer, async defer, module, nomodule, src, inline - the cheat sheet

With the addition of ES modules, there's now no fewer than 24 ways to load your JS code: (inline|not inline) x (defer|no defer) x (async|no async) x (type=text/javascript | type=module | nomodule) -- and each of them is subtly different.

This document is a comparison of various ways the <script> tags in HTML are processed depending on the attributes set.

If you ever wondered when to use inline <script async type="module"> and when <script nomodule defer src="...">, you're in the good place!

Note that this article is about <script>s inserted in the HTML; the behavior of <script>s inserted at runtime is slightly different - see Deep dive into the murky waters of script loading by Jake Archibald (2013)

kamleshchandnani

Bundling Design Systems/Component Libraries

First of all you need to decide who will be your target consumers based on the following:

1. They have the same environment(webpack config, babel config) setup as you where you built your design system(this is mostly possible if you use monorepos/same configs where all the teams share the same environment).

2. They don't have the same environment which is the case when you work in bigger teams and you want to distribute your design system as any other npm package which is already built and can be used directly.

If your use case falls under case no. 1 then you can just compile the source babel src -d build and leave the bundling to the consumer projects tools(webpack/rollup)