webpack config

https://github.com/Microsoft/TypeScript-Babel-Starter

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: __dirname,
    filename: "app.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
            plugins: [
              [
                "@babel/plugin-transform-runtime",
                {
                  regenerator: true
                }
              ]
            ]
          }
        }
      }
    ]
  },
  target: "node",
  node: {
    __dirname: false,
    __filename: false
  },
  externals: {
    fs: "commonjs fs"
  },
  mode: "development"
};

Data Validation using Decorator in Typescript

In index.html we have

<form>
  <input type="text" placeholder="Course Title" id="title" />
  <input type="text" placeholder="Price" id="price" />
  <button type="submit">Submit</button>
</form>

and inside our ts (transpiled into js file and link it into our index.html), we write:

enum Validation {
  required = "required",
  positive = "positive"
}

interface ValidatorConfig {
  [property: string]: {
    [validatableProp: string]: Validation[]; //e.g., [Validation.required, Validation.positive]
  };
}

const registeredValidators: ValidatorConfig = {};

function Required(target: any, propName: string) {
  //we don't have propertyDescriptor for property, it exists only for methods
  registeredValidators[target.constructor.name] = {
    ...registeredValidators[target.constructor.name],
    [propName]: [Validation.required]
  };
}

function Positive(target: any, propName: string) {
  registeredValidators[target.constructor.name] = {
    ...registeredValidators[target.constructor.name],
    [propName]: [Validation.positive]
  };
}

function validate(obj: any) {
  const objValidatorConfig = registeredValidators[obj.constructor.name];
  if (!objValidatorConfig) {
    return true;
  } else {
    let validated = true;
    for (const prop in objValidatorConfig) {
      for (const validator of objValidatorConfig[prop]) {
        if (validator === (Validation.required as string)) {
          console.log("run?");
          validated = validated && obj[prop].trim().length > 0;
        }
        if (validator === (Validation.positive as string)) {
          validated = validated && obj[prop] > 0;
        }
      }
    }
    return validated;
  }
}

class Course {
  @Required
  public title: string;

  @Positive
  public price: number;

  constructor(t: string, p: number) {
    this.title = t;
    this.price = p;
  }
}

const courseForm = document.querySelector("form")!;
courseForm.addEventListener("submit", e => {
  e.preventDefault();
  const titleEl = document.getElementById("title") as HTMLInputElement;
  const priceEl = document.getElementById("price") as HTMLInputElement;
  const title = titleEl.value;
  const price = +priceEl.value;
  const newCourse = new Course(title, price);

  if (!validate(newCourse)) {
    alert("Invalid input, please try again!");
    return;
  }

  console.log(newCourse);
});

Wordpress Study Notes

Extension in VSCode

• I install beautify for cleaning up the indentations of both php and html code at the same time.
• I also install PHP Intelephense to give auto completion on html tag.

Prelude

Hierarchy of wordpress php files: Assume that we have a post type called "program", as registered by using

 
<?php 
function university_post_types()
{
  //Program Post Type
  register_post_type("program", array(
  'supports' => array('title', 'editor'),
  'rewrite'=>array('slug'=>'programs'),
  'has_archive' => true,
  'public' => true,
  'labels' => array(
  'name' => 'Programs',
  'add_new_item'=>'Add New Program',
  'edit_item'=>'Edit Program',
  'all_items'=> 'All Programs',
  'singular_name' => 'Program'
  ),
  'menu_icon' => 'dashicons-awards'
  ));
}

add_action("init", "university_post_types");
?>

inside \wp-content\mu-plugins\*.php  (mu stands for "must-use") , then we get:

in our dashboard. This is a kind of customized post type, therefore we will create a php file that is dedicated to customizing post of type "program".

php installation

1. Follow the link to install php
   https://www.youtube.com/watch?v=4_-12QSaaFg
2. Following this to install xampp:
   https://www.youtube.com/watch?v=TjFRTkw6GDQ
3. visual studio plug-in that I have used:
   1. phpfmt - PHP formatter
   2. Format HTML in PHP
   refer to my config file sent in gmail

Factory Design Pattern in Typescript

Javascript is not enough to implement ordinary factory design patternt that I want to mimic from C#, therefore I try to do it on Typescript, though nested class declaration is still not that straight forward in typescript:

class Point {
  x: number;
  y: number;

  private constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }

  static Factory = class {
    static pointXY(x: number, y: number) {
      return new Point(x, y);
    }
    static pointPolar(r: number, theta: number) {
      return new Point(
        r * Math.cos((theta * Math.PI) / 180),
        r * Math.sin((theta * Math.PI) / 180)
      );
    }
  };
}

now we can create our point by calling

const pt = Point.Factory.pointXY(10, 20);