DavidWells

Aligning images

This is a guide for aligning images.

See the full Advanced Markdown doc for more tips and tricks

left alignment

acdlite

// getComponent is a function that returns a promise for a component
// It will not be called until the first mount
function asyncComponent(getComponent) {
  return class AsyncComponent extends React.Component {
    static Component = null;
    state = { Component: AsyncComponent.Component };

    componentWillMount() {
      if (!this.state.Component) {
        getComponent().then(Component => {

timotgl

# How to uninstall Razer Synapse 2 ( https://www.razerzone.com/synapse-2 )
# on OS X (10.11-10.13) (El Capitan, Sierra, High Sierra)
# without using Razer's official uninstall tool.

# Tested on OS X 10.11.5 in July 2016.
# Edited with additional steps for later OS X versions,
# contributed by commenters on this gist.

# Step 1: In your terminal: stop and remove launch agents
launchctl remove com.razer.rzupdater

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

xjamundx

This is the follow up to a post I wrote recently called From Require.js to Webpack - Party 1 (the why) which was published in my personal blog.

In that post I talked about 3 main reasons for moving from require.js to webpack:

1. Common JS support
2. NPM support
3. a healthy loader/plugin ecosystem.

Here I'll instead talk about some of the technical challenges that we faced during the migration. Despite the clear benefits in developer experience (DX) the setup was fairly difficult and I'd like to cover some of the challanges we faced to make the transition a bit easier.

domenic

Auto-deploying built products to gh-pages with GitHub Actions

This is a set up for projects which want to check in only their source files, but have their gh-pages branch automatically updated with some compiled output every time they push.

A file below this one contains the steps for doing this with Travis CI. However, these days I recommend GitHub Actions, for the following reasons:

• It is much easier and requires less steps, because you are already authenticated with GitHub, so you don't need to share secret keys across services like you do when coordinate Travis CI and GitHub.
• It is free, with no quotas.
• Anecdotally, builds are much faster with GitHub Actions than with Travis CI, especially in terms of time spent waiting for a builder.

pironim

#!/bin/bash
#
# Pre-commit hooks

# Check branch name
BRANCH_NAME_LENGTH=`git rev-parse --abbrev-ref HEAD | grep -E '^t[0-9]{2,16}\_.*_[A-Za-z]{2,2}$' | wc -c`

if [ ${BRANCH_NAME_LENGTH} -eq 0 ] ; then
  echo -e '\E[37;44m'"\033[1mERROR\033[0m in pre-commit hook: vim /export/web/.git/hooks/pre-commit"
  echo "Branch name should be like t00000_blah_blah_CA - brand is two letters"

jjmu15

// Determine if an element is in the visible viewport
function isInViewport(element) {
  var rect = element.getBoundingClientRect();
  var html = document.documentElement;
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || html.clientHeight) &&
    rect.right <= (window.innerWidth || html.clientWidth)
  );

mobilemind

# delete local tag '12345'
git tag -d 12345
# delete remote tag '12345' (eg, GitHub version too)
git push origin :refs/tags/12345
# alternative approach
git push --delete origin tagName
git tag -d tagName

anzeljg

Introduction

An introduction to curl using GitHub's API

The Basics

Makes a basic GET request to the specifed URI

curl https://api.github.com/users/caspyin