Skip to content

Instantly share code, notes, and snippets.

View whoisryosuke's full-sized avatar
👾
Going deep with game development

Ryosuke whoisryosuke

👾
Going deep with game development
View GitHub Profile
@whoisryosuke
whoisryosuke / babel-webpack.md
Created January 24, 2019 21:47 — forked from ncochard/babel-webpack.md
The correct way to compile ES6 using babel...

When you create a npm package, remember it might be used in a browser or a server, or even a command line utility… For each package you create, please pay attention at what it will be used for:

  1. Is it going to be used as a dependency to a nodejs application that is not bundled? (e.g. command line utilities)
  2. Is it going to be used as a dependency to a nodejs application that is bundled? (e.g. AWS Lambdas)
  3. Is it going to be used as a dependency to a browser application (always bundled)?.
  • In cases 2) and 3) you want to allow for tree shaking.
  • In cases 1) and 2) you want to benefit from the "ES6"/"ES next" features supported natively by nodejs.
  • In case 3) you also want to benefit from the native support of "ES6" from your browser.

Folder Structure

Motivations

  • Clear feature ownership
  • Module usage predictibility (refactoring, maintainence, you know what's shared, what's not, prevents accidental regressions, avoids huge directories of not-actually-reusable modules, etc)
@whoisryosuke
whoisryosuke / callback.js
Created January 7, 2019 02:39 — forked from jmakeig/callback.js
JSDoc/Documentation.js examples
/**
* A success callback for {@link ResultProvider} that receives the result from
* the {@link documents#probe}.
* @callback documents#probeResult
* @since 1.0
* @param {documents.DocumentDescriptor} document - a sparse document descriptor with an exists
* property that identifies whether the document exists
*/
/**
* Probes whether a document exists; takes a configuration
@whoisryosuke
whoisryosuke / nicetime.js
Created November 27, 2018 20:57 — forked from developit/nicetime.js
nicetime.js
/** Returns a simple relative time string
* @example
* nicetime(new Date()-1e4) == 'Just now' // within the last minute
* nicetime(Date.now()-1e6) == '16m' // within the last hour
* nicetime(Date.now()-1e7) == '2h' // within the last hour
* nicetime('Dec 31, 2014') == '4d' // within the last 7 days
* nicetime('Dec 25, 2014') == 'Dec 25' // over 7 days ago gives a simple date
* nicetime('July 4, 2014') == 'Jul 4, 2014' // over half a year ago adds the year
*/
function nicetime(text) {
/* eslint-disable jsx-a11y/accessible-emoji */
import React, { Suspense, useState } from "react";
import { unstable_scheduleCallback } from "scheduler";
import { unstable_createResource as createResource } from "react-cache";
import {
Combobox,
ComboboxInput,
ComboboxList,
ComboboxOption,
ComboboxOptionText
@whoisryosuke
whoisryosuke / meta-tags.md
Last active September 13, 2018 17:39 — forked from lancejpollard/meta-tags.md
Complete List of HTML Meta Tags

Basic HTML Meta Tags

<meta name="keywords" content="your, tags"/>
<meta name="description" content="150 words"/>
<meta name="subject" content="your website's subject">
<meta name="copyright"content="company name">
<meta name="language" content="ES">
<meta name="robots" content="index,follow" />
<meta name="revised" content="Sunday, July 18th, 2010, 5:15 pm" />

Contributing

When contributing to this repository, please first discuss the change you wish to make via issue, email, or any other method with the owners of this repository before making a change.

Please note we have a code of conduct, please follow it in all your interactions with the project.

Pull Request Process

  1. Ensure any install or build dependencies are removed before the end of the layer when doing a
/**
* In our app, we have a few middleware that generate a string of HTML.
* On occassion it's fine to just use dangerouslySetInnerHTML directly for
* those, but that requires that you have a host node for the innerHTML.
*
* In certain scenarios (like tags in <head />), there's HTML that we need
* to insert directly where it is. This component enables that because
* we replace <raw-text> and </raw-text> with empty strings. Effectively
* making whatever's between <raw-text> and </raw-text> inlined in place.
*
module.exports = {
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader"
}
}
@whoisryosuke
whoisryosuke / Article.js
Created August 17, 2018 20:02 — forked from MaximeHeckel/Article.js
Medium - React "sub-component" - Title sub-component
import React, { Component } from 'react';
import findByType from './findByType';
import css from './somestyle.css';
// We instantiate the Title sub-component
const Title = () => null;
class Article extends Component {
// This is the function that will take care of rendering our Title sub-component
renderTitle() {
const { children } = this.props;
// First we try to find the Title sub-component among the children of Article