git done: delete current branch checkout to main.
git config --global alias.done '!f() { git checkout main && git branch -D @{-1}; }; f'
# Delete branches starting with branchName sko/
git branch -D `git branch --list 'sko/*'`Avoiding conflicts between variables, function parameters, and column names.
- params:
_paramName. - variables:
letVariableName (letPascalCase). - columns: snake_case.
DROP FUNCTION test_func_one(text, int, timestamptz);
create or replace function test_func_one(
_desc text,
_col1 int,
_created_at timestamptz
)
returns table
(
id int,
col1 int,
description text,
created_at timestamptz
)
as
$$
declare
letId int;
begin
insert into tests(col1) values (_col1) returning id into letId;
insert into tests2(tests_id, description, created_at) values (letId, _desc, _created_at);
return query select tests.id, col1, tests2.description, tests2.created_at
from tests
join tests2 on tests.id = tests2.tests_id;
end;
$$ language plpgsql security invoker;
To revalidate cache pass Authorization header with some random token. when making request to otherwise cached content.
https://vercel.com/docs/concepts/edge-network/x-vercel-cache#revalidated.
Authorization: ${Random token}
When refactoring from JS to TS, some utility functions cannot be refactored directly to TS due to many JS components using the util function (can't import TS in JS edit: CAN import TS in JS). We can still type such JS utility function with JSDoc and TypeScript interfaces/types
// Define type in some ts file eg) userModel.ts
interface User {
id: number;
name: string;
email: string;
}// User from userModel.ts is referenced.
/**
* Fetch User
* @param {number} id
* @return <Promise<User>>
*/
export const getUser = (id) => fetch(`/user/${id}`);// In /types/window.shim.d.ts
export {};
declare global {
interface Window {
Kakao: any | KakaoType;
}
}node_modules 잘 지우기. (tested but with latest npm, message appears that cache clean is done automatically)
rm -rf node_modules
npm cache clean --force
This happens when SSRed page hydrates in client side. Eventhough computed value is not altered. It's a bug simply return a origial value that depends on resolved promise then used in computed value;
// In setup();
// This will cause [Vue warn]: Write operation failed: computed value is readonly. AND
// things will not render properly when loading page initially.
const data = useFetch(async () => fetch('something'))
const computedData = computed(() => unref(data).someValue)
return {
computedData
}
// Fix by returning data (even if it is not used in a template).
// Warning still would exist in dev mode but will render properly.
const data = useFetch(async () => fetch('something'))
const computedData = computed(() => unref(data).someValue)
return {
data,
computedData
}watch with immediate: true option, runs in SSR with pending: false, and data: null or initial value which in most cases null (tested).
Eventhough in SSR fetched Data is available in template, any logic using fetched Data has null value, yet pending fetchState has value false (has fetched). So if the logic only checks fetchState.pending === false this will lead to null getter error if fetchedData's property is accessed.
computed works as expected in SSR.
const postDetailRef = ref(null)
useFetch(async () => {
postDetailRef.value = await getPostDetail({id: 123})
})
watch([postDetailRef, () => fetchState.pending], ([postDetail, pending]) => {
pending // would be false. (fetch is complete)
postDetail // would be null in SSR, but has fetched value in CSR pre populated.
// hence; below will lead to error in SSR.
if(pending === false) {
postDetail.someProperty // getting property of null (or initial value) -> Error
}
}, {immediate: true})
// watch without immediate does not run in SSR, and runs in CSR with fetchedData prepopulated from SSR.Child page component mounted by NuxtChild does not rerender on route change by default. Page Component mounted by Nuxt does rerender by default. Also key prop of Child Page is not propagated to NuxtChild, nor to Nuxt.
watchEffect runs immediately, and in server, watch doe not run immediately, it runs only when deps change (does not run in server unless immediate: true option is given).
https://stackoverflow.com/a/71657414/10709491
// Jupyter notebook by itself is primarily designed to run in local server. It's just a Web interface to
// Kernel running in OS. Only code is sent to server as string? and runs heavy computation in server using
// locally available GPUs and stuff.
// Hence in order to make use of jupyter notebook as a service, using docker with each container running
// say... 10 jupyter notebooks with different port. Maybe API route based on user name to ip:containerPort ?
// Then firing up extra docker in advance to handle possible increase in users. (hmm how many ports per com?)
// Add custom JavaScript in
~/.jupyter/custom/custom.js
// Listen to Events
Jupyter.events.on('EVENT_NAME', function(evt, data) {
});
// search EVENT_NAMEs by find all search in IDE,
.trigger(
// No proper docs available for events, reference;
// https://docs.jupyter.org/en/latest/contributing/ipython-dev-guide/js_events.html
define([
"require",
'base/js/events'
], function (require, events) {
var all_events = [
'app_initialized.DashboardApp',
'app_initialized.NotebookApp',
];
events.on(all_events.join(' '), function (evt, data) {
console.log('[evt]', evt.type, (new Date()).toISOString(), data);
});
});
ref: https://github.com/ipython-contrib/jupyter_contrib_nbextensions/issues/664#issuecomment-232630072
// Helpful event discussion
https://github.com/jupyter/notebook/issues/2321
// Helpful example
https://github.com/jupyter/notebook/issues/3862
// Inspect stuff widget
https://github.com/jupyter-widgets/ipywidgets/blob/master/docs/source/examples/Variable%20Inspector.ipynb
// code in child iframe
parent.postMessage({ messageName: 'SOME_EVENT_NAME', data: { ...SOME_DATA } }, "http://parent.com"); /** OR * */
// code in parent
window.addEventListener('message', event => {
if(event.origin != "CHILD_ORIGIN") {
return;
}
const message = event.data.messageName;
const data = event.data.data;
doStuff(message, data)
})// code in parent
const iframe = document.querySelector("iframe");
iframe.contentWindow.postMessage({ messageName: 'SOME_EVENT_NAME', data: { ...SOME_DATA } }, "http://child.com");
// code in child iframe
window.addEventListener('message', function(event) {
if(event.origin != "PARENT_ORIGIN") {
return;
}
const message = event.data.messageName;
const data = event.data.data;
doStuff(message, data)
});text-overflow: ellipsis; normally works only if the element has a explicit width, flex element usually do not specify width.
By giving flex container min-width: 0, containing flex element can have css prop of text-overflow: ellipsis without explicitly setting width to the element.
.row {
display: flex;
// solution
min-width: 0;
}
.col1 {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
// for element that needs to always show.
.col2 {
flex-shrink: 0;
}- AMD64 = Intel 64-bit architecture = x86_64 = x64
- Most popular til 2020.
- One of Manufacturers of Intel chip is AMD => AMD64
- ARM64 = AArch64 => (M1, M2 = Apple Silicon Serires), (Rasberry Pi), (Surface Pro), (AWS EC2 ARM64)
- ARM = "Advanced RISC Machine” and “RISC” = “Reduced Instruction Set Computer.”, where IntelChip is "CISC" = "Complex Instruction Set Computre"
- Install software that supports ARM64 arch for Apple Silicons
- Considered future arch.