Hung Ton tonthanhhung

OpenCode notification plugin

Shows desktop notifications with a summary of what the agent last said:

Place AGENTS.md in ~/.config/opencode/AGENTS.md
Place notification.ts in ~/.config/opencode/plugin/notification.ts

Pure ESM package

The package that linked you here is now pure ESM. It cannot be require()'d from CommonJS.

This means you have the following choices:

Use ESM yourself. (preferred)
Use import foo from 'foo' instead of const foo = require('foo') to import the package. You also need to put "type": "module" in your package.json and more. Follow the below guide.
If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
Stay on the existing version of the package until you can move to ESM.

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.

I heard some points of criticism to how React deals with reactivity and it's focus on "purity". It's interesting because there are really two approaches evolving. There's a mutable + change tracking approach and there's an immutability + referential equality testing approach. It's difficult to mix and match them when you build new features on top. So that's why React has been pushing a bit harder on immutability lately to be able to build on top of it. Both have various tradeoffs but others are doing good research in other areas, so we've decided to focus on this direction and see where it leads us.

I did want to address a few points that I didn't see get enough consideration around the tradeoffs. So here's a small brain dump.

"Compiled output results in smaller apps" - E.g. Svelte apps start smaller but the compiler output is 3-4x larger per component than the equivalent VDOM approach. This is mostly due to the code that is usually shared in the VDOM "VM" needs to be inlined into each component. The tr

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

Problem

I have two Github accounts: oanhnn (personal) and superman (for work). I want to use both accounts on same computer (without typing password everytime, when doing git push or pull).

Solution

Use ssh keys and define host aliases in ssh config file (each alias for an account).

How to?

Generate ssh key pairs for accounts and add them to GitHub accounts.

	<!DOCTYPE html>
	<html>

	<head>
	<script data-require="[email protected]" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
	<script data-require="tether@*" data-semver="1.4.0" src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
	<link data-require="[email protected]" data-semver="4.0.5" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
	<script data-require="[email protected]" data-semver="4.0.5" src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>
	<script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react.min.js"></script>
	<script data-require="react@*" data-semver="15.5.0" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.0/react-dom.min.js"></script>

	function removeVietnameseTones(str) {
	str = str.replace(/à\|á\|ạ\|ả\|ã\|â\|ầ\|ấ\|ậ\|ẩ\|ẫ\|ă\|ằ\|ắ\|ặ\|ẳ\|ẵ/g,"a");
	str = str.replace(/è\|é\|ẹ\|ẻ\|ẽ\|ê\|ề\|ế\|ệ\|ể\|ễ/g,"e");
	str = str.replace(/ì\|í\|ị\|ỉ\|ĩ/g,"i");
	str = str.replace(/ò\|ó\|ọ\|ỏ\|õ\|ô\|ồ\|ố\|ộ\|ổ\|ỗ\|ơ\|ờ\|ớ\|ợ\|ở\|ỡ/g,"o");
	str = str.replace(/ù\|ú\|ụ\|ủ\|ũ\|ư\|ừ\|ứ\|ự\|ử\|ữ/g,"u");
	str = str.replace(/ỳ\|ý\|ỵ\|ỷ\|ỹ/g,"y");
	str = str.replace(/đ/g,"d");
	str = str.replace(/À\|Á\|Ạ\|Ả\|Ã\|Â\|Ầ\|Ấ\|Ậ\|Ẩ\|Ẫ\|Ă\|Ằ\|Ắ\|Ặ\|Ẳ\|Ẵ/g, "A");
	str = str.replace(/È\|É\|Ẹ\|Ẻ\|Ẽ\|Ê\|Ề\|Ế\|Ệ\|Ể\|Ễ/g, "E");

	## How to hide API keys from github ##

	1. If you have already pushed commits with sensitive data, follow this guide to remove the sensitive info while
	retaining your commits: https://help.github.com/articles/remove-sensitive-data/

	2. In the terminal, create a config.js file and open it up:

	touch config.js
	atom config.js