alexilyaev

The blog post on Next.js 9.3

export async getStaticProps

• Runs at build time only, meaning if there’s no getInitialProps, the page will be served as a static file (no SSR).
• Can pass data to the page component as props.
• In development runs on every request

export async getStaticPaths

alexilyaev

ESLint with Prettier Setup

Basically, when using Prettier, all ESLint styling rules should be disabled.
This can be done with eslint-config-prettier.

See .eslintrc.js example below.
In prettier.config.js you can use anything you want (see example below).

Now the tricky part is how to run them...
Usually ESLint should run first, then Prettier.

alexilyaev

/**
 * Convert a time string to a decimal value
 *
 * @param {string} argv e.g. 142h13m, 142 h 13 min
 */
function run(argv) {
  const query = argv[0];

  const [, hours, minutes] = query.match(/\s*(?:(\d+)\s*h)?\s*(?:(\d+)\s*m)?/)
  let decimal = 0;

alexilyaev

'use strict';

const _       = require('lodash');
const winston = require('winston');
const checker = require('license-checker');
const chalk   = require('chalk');

const licensesWeAreOKWith = `
  MIT,
  MIT*,

alexilyaev

Canvas - Ping Pong

Just playing with Canvas

A Pen by Alex Ilyaev on CodePen.

License.

alexilyaev

<svg width="500" height="300" viewBox="0 0 500 300">
  <!-- Define components -->
  <defs>
    <g id="tape">
      <rect width="450" height="200" fill="#222"
            stroke="#aaa" stroke-width="5"/>
    </g>
    
    <g id="wheel">
      <circle cx="50" cy="50" r="50"

alexilyaev

module.exports = {
  config: {
    // default font size in pixels for all tabs
    fontSize: 16,

    // font family with optional fallbacks
    fontFamily: '"Fira Code", Monaco, Menlo, "DejaVu Sans Mono", "Lucida Console", monospace',

    // terminal cursor background color and opacity (hex, rgb, hsl, hsv, hwb or cmyk)
    cursorColor: 'rgba(248, 28, 229, 0.8)',

alexilyaev

Deploying a subfolder to GitHub Pages

Sometimes you want to have a subdirectory on the master branch be the root directory of a repository’s gh-pages branch. This is useful for things like sites developed with Yeoman, or if you have a Jekyll site contained in the master branch alongside the rest of your code.

For the sake of this example, let’s pretend the subfolder containing your site is named dist.

Step 1

Remove the dist directory from the project’s .gitignore file (it’s ignored by default by Yeoman).

alexilyaev

• .ignore
• BashSupport
• Css Alphabetical Rearranger
• GFM
• Markdown Support
• Presentation Assistant

alexilyaev

No more IIFE

• WebPack wraps each requireed code with a function, so there's no need to wrap our code with an IIFE

/**
 * Good
 */