WebReflection

Handy Custom Elements' Patterns

^{Photo by Ricardo Gomez Angel on Unsplash}

This gist is a collection of common patterns I've personally used here and there with Custom Elements.

These patterns are all basic suggestions that could be improved, enriched, readapted, accordingly with your needs.

tyler-dot-earth

#!/usr/bin/python
# -*- coding: utf-8 -*- 
'''
This is a little script to download every song from every playlist
if your Google Play Music account. Songs are organized as follows:
    <playlist>/<artist>/<album>/<song>.mp3

I Highly recomend putting this file in your %USER%\Music folder
before running.

jinwoo

const fastify = require('fastify');
const fastifyAutoPush = require('fastify-auto-push');
const fs = require('fs');
const path = require('path');
const {promisify} = require('util');

const fsReadFile = promisify(fs.readFile);

const STATIC_DIR = path.join(__dirname, 'static');
const CERTS_DIR = path.join(__dirname, 'certs');

tspecht

import PropTypes from 'prop-types';
import React from 'react';
import {Pager} from 'react-bootstrap';
import gql from 'graphql-tag';
import {graphql} from 'react-apollo';


const PokemonQuery = gql`
  query Pokemons($trainerID: Int!, $first: Int, $after: String) {
    pokemons(trainerID: $trainerID, first: $first, after: $after) {

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 => {

diegoconcha

###Redux Egghead Video Notes###

####Introduction:#### Managing state in an application is critical, and is often done haphazardly. Redux provides a state container for JavaScript applications that will help your applications behave consistently.

Redux is an evolution of the ideas presented by Facebook's Flux, avoiding the complexity found in Flux by looking to how applications are built with the Elm language.

####1st principle of Redux:#### Everything that changes in your application including the data and ui options is contained in a single object called the state tree

staltz

How to show migration guides in GitHub Markdown

Use the diff code highlighting tag.

  ```diff
  - foo
  + bar

Example:

ManuelPeinado

package com.github.manuelpeinado.toolbartest;

import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.View;

pburtchaell

/**
 * VH and VW units can cause issues on iOS devices: http://caniuse.com/#feat=viewport-units
 * 
 * To overcome this, create media queries that target the width, height, and orientation of iOS devices. 
 * It isn't optimal, but there is really no other way to solve the problem. In this example, I am fixing 
 * the height of element `.foo` —which is a full width and height cover image.
 *
 * iOS Resolution Quick Reference: http://www.iosres.com/
 */
 

antonioOrtiz

var gulp = require('gulp'),
    sass = require('gulp-ruby-sass'),
    gulpif = require('gulp-if'),
    usemin = require('gulp-usemin'),
    uglify = require('gulp-uglify'),
    gutil = require('gulp-util'),
    concat = require('gulp-concat'),
    plumber = require('gulp-plumber'),
    browserify = require('gulp-browserify'),
    minifyHTML = require('gulp-minify-html'),