Harry Tran harrytran998

## [lang]slash[slug].astro
---
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) {

## reset.css
/*
  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/open-props@1.3.16/normalize.min.css / https://codepen.io/argyleink/pen/KKvRORE

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

## Frontend development best practices (React.js).md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                harrytran998
                / Frontend development best practices (React.js).md
            
            
              Created
              March 23, 2022 00:59
                — forked from anton-karlovskiy/Frontend development best practices (React.js).md
            
          
    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).


## react-rendering.md

      
              1 file
            
          
              3 forks
            
          
              0 comments
            
          
              4 stars
            
          
                harrytran998
                / react-rendering.md
            
            
              Created
              March 23, 2021 13:33
                — forked from tuhuynh27/react-rendering.md
            
              
                A (Mostly) Complete Guide to React Rendering Behavior
              
          
    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.


## .bash_aliases
#  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

## tailwind.config.js
// 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 });

## eager-computed-options-alt.ts
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]

## prepare-commit-msg.sh
#!/bin/bash

#
# Inspects branch name and checks if it contains a Jira ticket number (i.e. ABC-123).
# If yes, commit message will be automatically prepended with [ABC-123].
#
# Useful for looking through git history and relating a commit or group of commits
# back to a user story.
#

## README.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                harrytran998
                / README.md
            
            
              Created
              December 28, 2020 07:48
                — forked from lopspower/README.md
            
              
                Hexadecimal color code for transparency
              
          
    Hexadecimal color code for transparency


How to set transparency with hex value ?

For example, you want to set 40% alpha transparence to #000000 (black color), you need to add 66 like this #66000000.
Download This sample on Google Play Store


## mime.html
<html>
<head>
    <script type="text/javascript" src="/jquery.min.js"></script>
    <title>Mime type checker</title>
    <script>
        $(function () {
            var result = $('div#result');
            if (window.FileReader && window.Blob) {
                $('span#submit').click(function () {
                    var files = $('input#file').get(0).files;
	---
	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/open-props@1.3.16/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 });
	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]
	#!/bin/bash

	#
	# Inspects branch name and checks if it contains a Jira ticket number (i.e. ABC-123).
	# If yes, commit message will be automatically prepended with [ABC-123].
	#
	# Useful for looking through git history and relating a commit or group of commits
	# back to a user story.
	#
	<html>
	<head>
	<script type="text/javascript" src="/jquery.min.js"></script>
	<title>Mime type checker</title>
	<script>
	$(function () {
	var result = $('div#result');
	if (window.FileReader && window.Blob) {
	$('span#submit').click(function () {
	var files = $('input#file').get(0).files;