qoomon

Conventional Commit Messages

See how a minor change to your commit message style can make a difference.

Tip

Have a look at git-conventional-commits , a CLI util to ensure these conventions and generate verion and changelogs

Commit Message Formats

Default

stephenwil

export const withContext = <P extends {}>(Component: React.ComponentType<P>) =>
  class WithContext extends React.PureComponent<P & IAppContext> {
    render() {
      return (
        <AppContext.Consumer>
          {(context: any) => <Component {...this.props} {...context} />}
        </AppContext.Consumer>
      );
    }
  };

iamstarkov

import React, { PropTypes } from 'react';
import cn from 'classnames';

const Button = ({
  classes,
  children,
  tag: Tag,
  block,
  active,
  disabled,

joshbuchea

Semantic Commit Messages

See how a minor change to your commit message style can make you a better programmer.

Format: <type>(<scope>): <subject>

<scope> is optional

Example

crittermike

/* global gapi */

const API_KEY = 'YOURAPIKEYHERE';

import React, { Component } from 'react';

class App extends Component {

  loadYoutubeApi() {
    const script = document.createElement("script");

jesperorb

Handle CORS Client-side

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain outside the domain from which the first resource was served. This is set on the server-side and there is nothing you can do from the client-side to change that setting, that is up to the server/API. There are some ways to get around it tho.

Sources : MDN - HTTP Access Control | Wiki - CORS

CORS is set server-side by supplying each request with additional headers which allow requests to be requested outside of the own domain, for example to your localhost. This is primarily set by the header:

Access-Control-Allow-Origin

remarkablemark

JavaScript Classes - ES5 vs ES6

An example that shows the difference between creating a JavaScript class and subclass in ES5 and ES6.

Reference

paulirish

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

davidrapin

alias killws="ps -Alf |grep -i webstorm |grep -v grep |awk -F' ' '{print \$4}' |xargs kill -9 "

itsmattsoria

SHORTCUTS

Key/Command	Description
Tab	Auto-complete files and folder names
Ctrl + A	Go to the beginning of the line you are currently typing on
Ctrl + E	Go to the end of the line you are currently typing on
Ctrl + U	Clear the line before the cursor
Ctrl + K	Clear the line after the cursor
Ctrl + W	Delete the word before the cursor
Ctrl + T	Swap the last two characters before the cursor