Rajika Imal rajikaimal

Terms

start up time: the time from "the command is executed" to the time "load event is triggered in browser".
root HMR time: the time from "the root file is changed" to the time "that file is executed in browser".
leaf HMR time: the time from "the leaf file is changed" to the time "that file is executed in browser".
cold start: the dependency optimization cache is deleted before each run
hot start: the dependency optimization cache exists by each run

Summary

Using sapphi-red/performance-compare@81e8bd2bb1192566ff18f284fd78691d2d417c0d.

Next.js client-only SPA example

Made this example to show how to use Next.js router for a 100% SPA (no JS server) app.

You use Next.js router like normally, but don't define getStaticProps and such. Instead you do client-only fetching with swr, react-query, or similar methods.

You can generate HTML fallback for the page if there's something meaningful to show before you "know" the params. (Remember, HTML is static, so it can't respond to dynamic query. But it can be different per route.)

Don't like Next? Here's how to do the same in Gatsby.

Note:

When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.

Gettings started writing a ESLint rule

First, take a look at the ESLint rule documentation. Just skim it for now. It's very long and boring. You can come back to it later.

ESLint rules works on the AST (Abstract Syntax Tree) representation of the code. In short, this is a tree structure that describes the code in a very verbose form. ESLint walks this tree and rules can subscribe to be notified when it hits a specific node type, like a Literal type, which could be the "hello" part of const welcome = "hello";.

Go ahead and play around with some code in AST Explorer (Make sure the parser is espree). It's a great tool!

Here are some good articles on the subject (ignore the scaffolding parts):

https://insideops.wordpress.com/2015/12/08/creating-custom-rules-for-eslint/

Code is clean if it can be understood easily – by everyone on the team. Clean code can be read and enhanced by a developer other than its original author. With understandability comes readability, changeability, extensibility and maintainability.

General rules

Follow standard conventions.
Keep it simple stupid. Simpler is always better. Reduce complexity as much as possible.
Boy scout rule. Leave the campground cleaner than you found it.
Always find root cause. Always look for the root cause of a problem.

Design rules

A curated list of AWS resources to prepare for the AWS Certifications

A curated list of awesome AWS resources you need to prepare for the all 5 AWS Certifications. This gist will include: open source repos, blogs & blogposts, ebooks, PDF, whitepapers, video courses, free lecture, slides, sample test and many other resources.

	# -----------------------------------------------------------------------------
	# AI-powered Git Commit Function
	# Copy paste this gist into your ~/.bashrc or ~/.zshrc to gain the `gcm` command. It:
	# 1) gets the current staged changed diff
	# 2) sends them to an LLM to write the git commit message
	# 3) allows you to easily accept, edit, regenerate, cancel
	# But - just read and edit the code however you like
	# the `llm` CLI util is awesome, can get it here: https://llm.datasette.io/en/stable/

	gcm() {

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

	package src.LinkedList;

	public class LinkedList {
	public Node head;
	public int listCount;

	public LinkedList(){
	head = new Node(0);
	listCount = 0;
	}