profile
viewpoint

alan-mj-lin/Sporeas 1

TJC projection webapp for service use.

hchiam/anonymous-input 1

Desktop app powered by Electron. For personal teaching use.

hchiam/apps-script-samples 1

Apps Script samples for G Suite products.

hchiam/AssistantAppWorkshop 1

Use Actions on Google, Dialogflow, and Firebase to create a to-do application with a conversational UI.

hchiam/bible-verse-listener 1

Bible Verse Listener (a Node.js server that detects verse location and shows the words)

hchiam/boilerplate-mochachai 1

A boilerplate from the freeCodeCamp curriculum.

hchiam/ccc 1

Conversational Code Creator

hchiam/chat-app-fcc-react-redux 1

Learning to build a chat app with React and Redux, using a FCC tutorial.

issue commentalan-mj-lin/Mafia

Sidebar to read top to bottom or bottom to top?

https://material-ui.com/components/snackbars/

alan-mj-lin

comment created time in 17 hours

PR opened alan-mj-lin/Mafia

Reviewers
top-to-bottom (minus auto-scroll) for #16 (plus centering)

the centered alternative to https://github.com/alan-mj-lin/Mafia/pull/17

+17 -20

0 comment

4 changed files

pr created time in 18 hours

push eventalan-mj-lin/Mafia

hchiam

commit sha 97ababa5428537a779cc04f8d7a1cf5990f0addf

center the popup

view details

push time in 18 hours

create barnchalan-mj-lin/Mafia

branch : hc/style-2-center

created branch time in 18 hours

PR opened alan-mj-lin/Mafia

Reviewers
top-to-bottom (minus auto-scroll) for #16
+10 -3

0 comment

3 changed files

pr created time in 18 hours

push eventalan-mj-lin/Mafia

hchiam

commit sha eba59bfe5122e6fec701ed3be8c8952fdfd5fa01

make error message always show regardless of scroll (#16)

view details

hchiam

commit sha a2baa1e83cee3fdda18f2c09f6d84c1b696cc35a

fix text contrast

view details

hchiam

commit sha 60a4f561fc9c62b00eb66501ca92c3abc0bce478

make top to bottom: #16

view details

hchiam

commit sha fa608a3fed3846455df0580cd4a0c5a6162a8bf4

make error message stay longer: 5s

view details

push time in 18 hours

create barnchalan-mj-lin/Mafia

branch : hc/style-2

created branch time in 19 hours

delete branch alan-mj-lin/Mafia

delete branch : hc/style-1

delete time in 19 hours

issue commentalan-mj-lin/Mafia

Sidebar to read top to bottom or bottom to top?

We can make the error message display:sticky or display:fixed for now, and then at the same time maybe put the other messages in a custom component that I can style with custom CSS to do the auto scroll for you. Unless you want to research some react library or component that does what we want for the non-error messages

alan-mj-lin

comment created time in 19 hours

issue closedalan-mj-lin/Mafia

smaller card size to fit more people on screen

So you don't have to scroll down to see your role. Try fixing this in pure CSS.

closed time in a day

hchiam

issue closedalan-mj-lin/Mafia

highlight your player's card

Just to make it intuitive to tell which card is yours. This is a follow-up to #11 .

Try fixing this in pure CSS. Maybe even reorder your card to the top with pure CSS, give than JSX already indicates which one is your player. I made this a separate issue/ticket in case it involves a lot of JSX.

closed time in a day

hchiam

issue closedalan-mj-lin/Mafia

fix sidebar messages going off-screen

The user has to think of scrolling to see the latest messages. It should just show up without extra effort on the user's part, so they can focus on other actions.

To fix this, we could:

  1. add messages to the top of the list instead of to the bottom, or
  2. auto-move all messages up (same as auto-scroll to bottom) (sounds like we're going with this one), or
  3. only show the last few messages.

These are technically possible with pure CSS, but it's much cleaner if we edit the JSX/HTML instead.

closed time in a day

hchiam

issue closedalan-mj-lin/Mafia

general styling

@alan-mj-lin I assume you're leaving general styling to me, but here's my thoughts: Overall darker theme (instead of so much white). We could make the page darker when it's night (requires some indication of state in the HTML or JSX so I can apply styles).

closed time in a day

hchiam
PullRequestReviewEvent

pull request commentHouse-on-a-Rock/tjc-scheduling-web

St/react query

a good amount of these file changes is purely difference in prettier formatting. kinda bloats our pull requests artificially and makes it harder to focus on necessary changes

There was an update to VS Code last month that lets you make auto-formatting on save limited to lines that you changed. We could try using that going forward.

ooo that's really interesting, but both that solution as well as the prettier solution requires users to adhere to some sort of rules anyways.

I just tried it out yesterday and it doesn't seem to work very well for me anyways.

showduhtung

comment created time in a day

pull request commentHouse-on-a-Rock/tjc-scheduling-web

St/react query

another problem I'm having is that my sample size doesnt have enough data to test these functions as thoroughly as I'd like. for example, in this case, currently the list has 2 members. So it's difficult to see if the function is working correctly or if it's just working for 2 members. There's also a data fetching bug somewhere that's making it difficult to test them out, so these files may still need more work in the future

sounds good to me

showduhtung

comment created time in a day

startedhchiam/learning-semaphores

started time in a day

push eventhchiam/learning

Howard Chiam

commit sha 2cb46359df6520711c668cac4430e708e4abca9f

semaphores

view details

push time in a day

push eventhchiam/learning-semaphores

Howard Chiam

commit sha e5d320220dabc5fbff2411eb42cbd062b9b933ea

Update README.md

view details

push time in a day

create barnchhchiam/learning-semaphores

branch : master

created branch time in 2 days

created repositoryhchiam/learning-semaphores

Learning semaphores

created time in 2 days

Pull request review commentHouse-on-a-Rock/tjc-scheduling-web

St/react query

 export const Members = () => {     email: string,     password: string,   ) => {-    setIsAddUserDialogOpen(false);     if (shouldAdd && firstName && lastName && email && password && isValidEmail(email)) {       dispatch(onAddMember(firstName, lastName, email, password));     }+    setIsAddMemberDialogOpen(false);   }; -  const handleRowClick = (event: React.MouseEvent<unknown>, row: MemberStateData) => {+  const handleRowClick = (+    event: React.MouseEvent<unknown>,+    { userId: id }: MemberStateData,+  ) => {     event.stopPropagation();-    const selectedIndex = selectedRows.indexOf(row.userId);-    let newSelectedRows: number[] = [];-    if (event.ctrlKey) {-      if (selectedIndex === -1) {-        newSelectedRows = [...selectedRows, row.userId];-      } else if (selectedIndex === 0) {-        newSelectedRows = selectedRows.slice(1); // all but first row-      } else if (selectedIndex === selectedRows.length - 1) {-        newSelectedRows = selectedRows.slice(0, -1); // all but last row-      } else if (selectedIndex > 0) {-        newSelectedRows = [-          ...selectedRows.slice(0, selectedIndex),-          ...selectedRows.slice(selectedIndex + 1),-        ];-      }-    } else {-      if (selectedIndex === -1) newSelectedRows = [row.userId];-      else-        newSelectedRows = [-          ...selectedRows.slice(0, selectedIndex),-          ...selectedRows.slice(selectedIndex + 1),-        ];-    }-    // dispatch(onLoadUser(row));-    setSelectedUser(row);-    setSelectedRows(newSelectedRows);+    setLastSelected(id);+    const updatedRows: number[] = event.shiftKey+      ? makeNewRows(lastSelected, id, data)+      : [id];+    selectedRows.includes(id)+      ? setSelectedRows(selectedRows.filter((rowId) => !updatedRows.includes(rowId)))+      : setSelectedRows([...selectedRows, ...updatedRows]);

I see you've made the function handleRowClick cleaner, but can you explain how this works?

showduhtung

comment created time in 2 days

Pull request review commentHouse-on-a-Rock/tjc-scheduling-web

St/react query

+import { MemberStateData } from '../../../store/types';++export function makeNewRows(start: number, end: number, data: MemberStateData[]) {+  let newRows: number[] = [];+  let startPushing: boolean = false;+  const vectoredData: MemberStateData[] = start < end ? data : data.reverse();++  for (let i = 0; i < vectoredData.length; i++) {+    if (startPushing) {+      newRows.push(vectoredData[i].userId);+      if (vectoredData[i].userId === end) break;+    }+    if (vectoredData[i].userId === start) startPushing = true;+  }

Do we want to exclude the start row? How about this?

  for (let i = 0; i < vectoredData.length; i++) {
    if (vectoredData[i].userId === start) startPushing = true; // so start index is included?
    if (startPushing) {
      newRows.push(vectoredData[i].userId);
      if (vectoredData[i].userId === end) break;
    }
  }
showduhtung

comment created time in 2 days

Pull request review commentHouse-on-a-Rock/tjc-scheduling-web

St/react query

 export const Members = () => {     email: string,     password: string,   ) => {-    setIsAddUserDialogOpen(false);     if (shouldAdd && firstName && lastName && email && password && isValidEmail(email)) {       dispatch(onAddMember(firstName, lastName, email, password));     }+    setIsAddMemberDialogOpen(false);   }; -  const handleRowClick = (event: React.MouseEvent<unknown>, row: MemberStateData) => {+  const handleRowClick = (+    event: React.MouseEvent<unknown>,+    { userId: id }: MemberStateData,+  ) => {     event.stopPropagation();-    const selectedIndex = selectedRows.indexOf(row.userId);-    let newSelectedRows: number[] = [];-    if (event.ctrlKey) {-      if (selectedIndex === -1) {-        newSelectedRows = [...selectedRows, row.userId];-      } else if (selectedIndex === 0) {-        newSelectedRows = selectedRows.slice(1); // all but first row-      } else if (selectedIndex === selectedRows.length - 1) {-        newSelectedRows = selectedRows.slice(0, -1); // all but last row-      } else if (selectedIndex > 0) {-        newSelectedRows = [-          ...selectedRows.slice(0, selectedIndex),-          ...selectedRows.slice(selectedIndex + 1),-        ];-      }-    } else {-      if (selectedIndex === -1) newSelectedRows = [row.userId];-      else-        newSelectedRows = [-          ...selectedRows.slice(0, selectedIndex),-          ...selectedRows.slice(selectedIndex + 1),-        ];-    }-    // dispatch(onLoadUser(row));-    setSelectedUser(row);-    setSelectedRows(newSelectedRows);+    setLastSelected(id);+    const updatedRows: number[] = event.shiftKey+      ? makeNewRows(lastSelected, id, data)

Won't lastSelected and id be the same after setLastSelected(id)? Would it make sense to put it after?

    const updatedRows: number[] = event.shiftKey
      ? makeNewRows(lastSelected, id, data)
      : [id];
    setLastSelected(id); // set this after?
showduhtung

comment created time in 2 days

PullRequestReviewEvent

Pull request review commentHouse-on-a-Rock/tjc-scheduling-web

St/react query

+import { MemberStateData } from '../../../store/types';++export function makeNewRows(start: number, end: number, data: MemberStateData[]) {

This took me a while to understand. Is this helper function used to update an array of selected row IDs? How about we rename it to makeNewSelectedRows or getUpdatedRowSelection or updateRows or updateSelectedRows?

export function updateSelectedRows(start: number, end: number, data: MemberStateData[]) {
showduhtung

comment created time in 2 days

PullRequestReviewEvent

pull request commentHouse-on-a-Rock/tjc-scheduling-web

St/react query

a good amount of these file changes is purely difference in prettier formatting. kinda bloats our pull requests artificially and makes it harder to focus on necessary changes

There was an update to VS Code last month that lets you limit formatting to changed code

showduhtung

comment created time in 2 days

startedAllenDowney/LittleBookOfSemaphores

started time in 4 days

startedAllenDowney/ThinkBayes

started time in 4 days

startedRich-Harris/degit

started time in 5 days

startedhchiam/hchiam

started time in 5 days

push eventhchiam/hchiam

Howard Chiam

commit sha 7d1aa58050223277f1e930392b218d8fc57fd517

add @hchiam/deps

view details

push time in 5 days

push eventhchiam/learning-js

Howard Chiam

commit sha de944ecad177bd5ffa5faefaaa33bd0833237e96

add another example

view details

push time in 8 days

push eventhchiam/learning-js

Howard Chiam

commit sha 167f605db6f74b9a630cc9a9e3654fc28ca5b3ae

correction

view details

push time in 8 days

push eventhchiam/learning-js

Howard Chiam

commit sha a1438460ee18753662fdf38338ff2dc4686fe6a2

Create queue-stack-push-pop-shift-unshift.js

view details

push time in 8 days

push eventhchiam/learning-js

Howard Chiam

commit sha 166bd9dd972839d282246ce6f879ad79f45319f4

Update array-fill.js

view details

push time in 8 days

push eventhchiam/learning-js

Howard Chiam

commit sha d4e8ba2716fa516beaa49c31b78d279c3ff388f4

Create array-fill.js

view details

push time in 8 days

push eventhchiam/learning-graphql

Howard Chiam

commit sha 6267e710150719c2a423db5eb324dbd105601d3b

link to example usage with React and Apollo

view details

push time in 9 days

push eventhchiam/learning-firestore

Howard Chiam

commit sha b6393972947ca4693d4b25d85b6207abe0e96713

tutorial link

view details

push time in 9 days

PR opened phuoc-ng/this-vs-that

addEventListner -> addEventListener

Just fixing a minor typo. This is a great resource!

+3 -3

0 comment

1 changed file

pr created time in 9 days

push eventhchiam/this-vs-that

hchiam

commit sha 8a5bb5ffa7da5d395a5062a6b12434686a410d8f

addEventListner -> addEventListener

view details

push time in 9 days

push eventhchiam/learning-tailwind-css

Howard Chiam

commit sha 4af5d89a06ec8ee0fd3fbedc7001a25f6b6a3662

add quora explanation

view details

push time in 9 days

fork hchiam/this-vs-that

What is the difference between ___ and ___ in the front-end development?

https://thisthat.dev

fork in 9 days

startedphuoc-ng/this-vs-that

started time in 9 days

push eventhchiam/learning-firestore

hchiam

commit sha 3cb94612dccfe1465f4ae0a24d56842d3c2bff1d

rephrase slightly shorter

view details

push time in 9 days

push eventhchiam/learning-firestore

hchiam

commit sha 9691dec33b70e2c7da5f0890f924695648ac87c6

add link to repo with Vue + Firebase

view details

push time in 9 days

push eventhchiam/web-accessibility-course-notes

Howard Chiam

commit sha f147b6451ee2726fbb4eea03e6d17b8a1cbc5746

draw without a touchpad/stylus

view details

push time in 9 days

push eventhchiam/web-accessibility-course-notes

Howard Chiam

commit sha 3bbf04358c98df9318bf8d5dd121d263df9986e9

what to say instead of "click here"

view details

push time in 9 days

startedhchiam/learning-firestore

started time in 9 days

push eventhchiam/learning

Howard Chiam

commit sha 9796c5499798c6a173755d33fd0611dba56ca520

Firestore

view details

push time in 9 days

push eventhchiam/learning-reactjs

hchiam

commit sha 93583d0e1a1cafa9101e2544140014fd9fd3c3ef

link to firestore repo

view details

hchiam

commit sha 2b1e7b280128d6f8985e79255d3459412bfbf9e6

add more notes on hooks

view details

push time in 9 days

push eventhchiam/learning-react-apollo

hchiam

commit sha 910e96ee02cf0064b704d9ba4ad1670627af9f04

link back to react repo

view details

push time in 9 days

create barnchhchiam/learning-firestore

branch : master

created branch time in 9 days

created repositoryhchiam/learning-firestore

created time in 9 days

push eventhchiam/learning-js

hchiam

commit sha 45f467fba0964b2147054207a6d435986752a2b4

add catch to promise, add note, autoformat

view details

push time in 9 days

push eventhchiam/draw-with-mouse-and-spacebar

Howard Chiam

commit sha a6145640406be107ca07a94f65df8015f110a18f

list out other key options

view details

push time in 11 days

push eventhchiam/draw-with-mouse-and-spacebar

Howard Chiam

commit sha d260a333f680e2da2a3bbf4a8c1406ddfeaafa89

surge.sh demo

view details

push time in 11 days

push eventhchiam/draw-with-mouse-and-spacebar

hchiam

commit sha 56ff83f9e6db02530edd747814ba49eaff4f572d

yarn sass beforehand

view details

hchiam

commit sha 461b89c3f8ae033bbde91b257a9a50b81cf3828c

link to learning-yarn

view details

push time in 11 days

push eventhchiam/draw-with-mouse-and-spacebar

hchiam

commit sha 6b8c98c1f30d5ffcb9313768649681ef7abc49b6

demo script

view details

push time in 11 days

push eventhchiam/draw-with-mouse-and-spacebar

hchiam

commit sha 461c3f0ea74b892fa073ebf914ccf414c0fc4a4d

https://stackoverflow.com/questions/3902635/how-does-one-capture-a-macs-command-key-via-javascript/3922353#3922353

view details

push time in 11 days

push eventhchiam/learning

Howard Chiam

commit sha b0b0c28ce3c378ec7b0e19dba0707ac7fb1a2b5a

AVIF

view details

push time in 11 days

startedhchiam/learning-avif

started time in 11 days

push eventhchiam/learning-avif

Howard Chiam

commit sha 318bda17ceeb1b779e9f670f7793f57efd4399e3

link to my main learning repo

view details

push time in 11 days

push eventhchiam/learning-gh

Howard Chiam

commit sha 7770da369d55e8832ca16bd4367b9fa51e999e5f

words before 3rd link so it doesn't look like link wraparound

view details

push time in 11 days

push eventhchiam/learning-gh

hchiam

commit sha 0805e2688b546dbddf7e05593f878347824c5bde

Example workflow all using `gh`

view details

push time in 11 days

push eventhchiam/learning-avif

hchiam

commit sha 5d27c5959b79da947ed1011f7c7e254273864fef

one-sentence summary

view details

push time in 11 days

create barnchhchiam/learning-avif

branch : master

created branch time in 11 days

created repositoryhchiam/learning-avif

created time in 11 days

push eventhchiam/learning-js

Howard Chiam

commit sha 1179585ddc5e98886876eb695bfbcac218cb9638

Chrome dev tools tricks for more productive debugging

view details

push time in 11 days

push eventhchiam/learning-js

Howard Chiam

commit sha 2b1ea6a73ee996f05772e276c8f90296fede556e

Create console-time.js

view details

push time in 11 days

push eventhchiam/learning-js

Howard Chiam

commit sha b3ee14823737cc63aa515499f6251a308910a271

Create console-group.js

view details

push time in 11 days

push eventhchiam/learning-js

Howard Chiam

commit sha 71a307dfa069d31de0dba288d159fac1afd541de

Create console-styled.js

view details

push time in 11 days

push eventhchiam/learning-powershell

Howard Chiam

commit sha dc781f01366541ceec6ffc0fb34ccfcf8037d1e0

add beep command

view details

push time in 12 days

push eventhchiam/sourcefetch-server

hchiam

commit sha 9ae311c72e6930413fa537c70cb08ba85770a115

also call wakeUpServer() at 0s

view details

push time in 13 days

push eventhchiam/sourcefetch-server

hchiam

commit sha d6bfb9c12437c262b998560980964b73d825451a

make demo keep glitch server awake

view details

push time in 13 days

push eventhchiam/_2DNote

hchiam

commit sha 98d600509d21653b89234614bc01dcc170bfdad6

1.9.1

view details

push time in 14 days

created taghchiam/_2DNote

tag1.9.1

Potential: power 2D apps that people can use together, regardless of vision capabilities? https://codepen.io/hchiam/full/eYYdVeX

created time in 14 days

release hchiam/_2DNote

1.9.1

released time in 14 days

push eventhchiam/_2DNote

hchiam

commit sha 8f7f86e7814d01f5c9cc408287d816eb5c7de7e8

inline badges

view details

push time in 14 days

push eventhchiam/_2DNote

hchiam

commit sha fca643f7a6ced3237221ed29b41795848ce00500

correct link in npm badges

view details

push time in 14 days

push eventhchiam/learning-js

Howard Chiam

commit sha 9da790de16cfc6905148c4e824ce4b83b092d97c

correct distinct

view details

push time in 15 days

push eventhchiam/learning

Howard Chiam

commit sha aa9840c7767e1404e3b079d93ad6b2c38f6e323b

React + Apollo + GraphQL

view details

push time in 15 days

startedhchiam/learning-react-apollo

started time in 15 days

push eventhchiam/learning-yarn

hchiam

commit sha 8e36306516cc009ea904003f5bf2985296881995

auto-formatting

view details

hchiam

commit sha 7bbd672c649c7c3d358ea591cc3a691111abba8c

add init command

view details

push time in 16 days

push eventhchiam/learning-react-apollo

hchiam

commit sha 1e070214b29401d4af48e6ef8287d0a03da3d289

ran yarn init and yarn command

view details

push time in 16 days

push eventhchiam/learning-react-apollo

hchiam

commit sha a7b40b33b6047fd4e5798fb2faddf57784ccb327

typo

view details

hchiam

commit sha 5f9a8c86d85b96f32b79491a4315ce96e14bf394

learning-yarn repo link

view details

push time in 16 days

push eventhchiam/learning-react-apollo

hchiam

commit sha 88347c09255acb1c260230673f34c06bbba59659

remove collapsible heading formatting symbols

view details

push time in 16 days

push eventhchiam/learning-react-apollo

hchiam

commit sha 025fefe6c849f93c70aca79a34bfd1dadb7f5fce

add more client functions

view details

push time in 16 days

push eventhchiam/learning-react-apollo

hchiam

commit sha a253798a5d038b69773050b0f78efa8c04e398dc

ways to refetch queries

view details

push time in 16 days

push eventhchiam/learning-react-apollo

hchiam

commit sha 74423f0c19b0db3dfb1b5489fa0924d6f4b903be

notes on the ways to override Apollo cache

view details

push time in 16 days

push eventhchiam/learning-react-apollo

hchiam

commit sha 333eae682a88126643b1aad29abe77ff4fb7c4ed

add example code

view details

push time in 16 days

push eventhchiam/learning-react-apollo

hchiam

commit sha 02ce3d1bfc4e49056df53986fd36c8b50a95650c

add link to GraphQL learning repo

view details

push time in 16 days

push eventhchiam/learning-react-apollo

hchiam

commit sha d898f4e4d2ae236887f1d85a83acf8bb9ebb0720

add Apollo setup + adjust heading levels

view details

push time in 16 days

push eventhchiam/learning-react-apollo

hchiam

commit sha 212a1b2e945c9f373e748482218750911dfc8270

FE = frontend; BE = backend

view details

push time in 16 days

push eventhchiam/learning-react-apollo

hchiam

commit sha f6f0b8d6954405b973491eea49942e1b9a8d2660

quick summary notes

view details

push time in 16 days

create barnchhchiam/learning-react-apollo

branch : master

created branch time in 16 days

push eventhchiam/learning-reactjs

hchiam

commit sha 21485cf26071eb2b420c63981ff212706a6c4c7d

link to new learning repo

view details

push time in 16 days

created repositoryhchiam/learning-react-apollo

created time in 16 days

push eventhchiam/learning-cucumber

dependabot[bot]

commit sha 5d1618b436949e78abd95369801482c550c090c5

Bump yargs-parser from 13.1.1 to 13.1.2 Bumps [yargs-parser](https://github.com/yargs/yargs-parser) from 13.1.1 to 13.1.2. - [Release notes](https://github.com/yargs/yargs-parser/releases) - [Changelog](https://github.com/yargs/yargs-parser/blob/master/docs/CHANGELOG-full.md) - [Commits](https://github.com/yargs/yargs-parser/commits) Signed-off-by: dependabot[bot] <support@github.com>

view details

Howard Chiam

commit sha 72a849aada48e66c49cc07d9c9e7498d6612e491

Merge pull request #3 from hchiam/dependabot/npm_and_yarn/yargs-parser-13.1.2 Bump yargs-parser from 13.1.1 to 13.1.2

view details

push time in 16 days

more