Harry Tran harrytran998

Re: selfies project written in CRA and PWA

Planning of a project
- The project planning is mostly based on Fullstack Project Planning.
  
  For most of my projects, especially recently, I've been following a planning process that helps me breakdown the project into component parts that help me build more efficiently.
React Project Structure
- The project structure is mostly based on React Project Structure Best Practices for Scalable Application.
  
  A react project structure or architecture plays an important role in project maintenance. A good folder structure will help developers in the team easy to locate and easy to relate (ELER).

Translated from https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/, author: Mark Erikson (from Redux team)

A (Mostly) Complete Guide to React Rendering Behavior

Bài viết cung cấp chi tiết về cách mà React render hoạt động, và việc sử dụng Context và Redux ảnh hưởng thế nào tới quá trình render của React.

"Render" là gì

Rendering is the process of React asking your components to describe what they want their section of the UI to look like, now, based on the current combination of props and state.

	{
	"Import type": {
	"prefix": "impt",
	"body": ["import type { $2 } from '$1'"],
	"description": "Import type"
	},
	"Console log": {
	"prefix": "clg",
	"body": ["console.log($1)"],
	"description": "Console log"

	---
	import Layout from '../../layouts/MainLayout.astro';
	import {getLanguageFromFilename, getSlugFromFilename} from '../../languages';

	export async function getStaticPaths() {
	/**
	* This builds up a set of params using the filename (which is always in english) as the slug,
	* and adds a redirect prop to the proper internationalized slug.
	*/
	function getRedirects(allPages) {

	/*
	Made by Elly Loel - https://ellyloel.com/
	With inspiration from:
	- Josh W Comeau - https://courses.joshwcomeau.com/css-for-js/treasure-trove/010-global-styles/
	- Andy Bell - https://piccalil.li/blog/a-modern-css-reset/
	- Adam Argyle - https://unpkg.com/[email protected]/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE

	Notes:
	- `:where()` is used to lower specificity for easy overriding.
	*/

	# Customize BASH PS1 prompt to show current GIT repository and branch.
	# by Mike Stewart - http://MediaDoneRight.com

	# SETUP CONSTANTS
	# Bunch-o-predefined colors. Makes reading code easier than escape sequences.
	# I don't remember where I found this. o_O

	# Reset
	Color_Off="\[\033[0m\]" # Text Reset

	// reference: https://tailwindcss.com/docs/configuration

	let Path = require('path');
	let TailwindUi = require('@tailwindcss/ui')
	let TailwindDebugScreens = require('./plugins/tailwindcss-debug-screens.js'); // customized: https://github.com/jorenvanhee/tailwindcss-debug-screens/issues/3
	let TailwindFilters = require('tailwindcss-filters');

	let defaultTheme = require('tailwindcss/defaultTheme')

	console.log({ 'process.env.NODE_ENV': process.env.NODE_ENV });

	.box {

	background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="500" ><defs><linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%"><stop offset="0%" stop-color="%23ad3" /><stop offset="100%" stop-color="%23add" /></linearGradient></defs><path d="M0 10 C30 28 38 0 64 10 L64 0 L0 0 Z" fill="url(%23grad)"/></svg>'),
	linear-gradient(to bottom right, #de350b, #0065ff);
	}

	export function useEagerComputed() {
	const properties = []

	function eagerComputed(definitions) {
	const computedProps = {}
	for (const key in definitions) {
	const effect = definitions[key]
	properties.push({ key, effect })
	computedProps[key] = function () {
	return this.$data[key]