Skip to content

Instantly share code, notes, and snippets.

View AzrizHaziq's full-sized avatar
😀
Happy

Azriz Jasni AzrizHaziq

😀
Happy
View GitHub Profile
@cayter
cayter / LICENSE
Last active November 9, 2025 11:12
Drizzle ORM Type-Safe Repository With PgTable
MIT License
Copyright (c) 2022-present, cayter
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
@phortuin
phortuin / postgres.md
Last active August 18, 2025 04:04
Set up postgres + database on MacOS (M1)

Based on this blogpost.

Install with Homebrew:

$ brew install postgresql@14

(The version number 14 needs to be explicitly stated. The @ mark designates a version number is specified. If you need an older version of postgres, use postgresql@13, for example.)

@sindresorhus
sindresorhus / esm-package.md
Last active December 5, 2025 20:00
Pure ESM package

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:

  1. 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.
  2. If the package is used in an async context, you could use await import(…) from CommonJS instead of require(…).
  3. Stay on the existing version of the package until you can move to ESM.
@tannerlinsley
tannerlinsley / createCrudHooks.js
Created November 29, 2020 06:39
A naive, but efficient starter to generate crud hooks for React Query
export default function createCrudHooks({
baseKey,
indexFn,
singleFn,
createFn,
updateFn,
deleteFn,
}) {
const useIndex = (config) => useQuery([baseKey], indexFn, config)
const useSingle = (id, config) =>
@francisrstokes
francisrstokes / StateDispatcher.js
Last active November 10, 2024 13:37
Redux without redux - sharing state and one way data flow using only standard react
import React from 'react';
export class StateDispatcher extends React.Component {
constructor(props) {
super(props);
this.state = props.state || {};
this._dispatch = this.dispatch.bind(this);
}
dispatch(action) {
@Component({
selector: 'app-sticky-header',
template: `<ng-content></ng-content>`,
styles: [ ... ]
})
export class StickyHeaderComponent implements AfterViewInit {
private isVisible = true;
ngAfterViewInit() {
const scroll$ = fromEvent(window, 'scroll').pipe(
enum VisibilityState {
Visible = 'visible',
Hidden = 'hidden'
}
enum Direction {
Up = 'Up',
Down = 'Down'
}
@paulirish
paulirish / what-forces-layout.md
Last active December 5, 2025 10:45
What forces layout/reflow. The comprehensive list.

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics
  • elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
@jareware
jareware / SCSS.md
Last active October 21, 2025 14:22
Advanced SCSS, or, 16 cool things you may not have known your stylesheets could do

⇐ back to the gist-blog at jrw.fi

Advanced SCSS

Or, 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.

I've been using SCSS/SASS for most of my styling work since 2009, and I'm a huge fan of Compass (by the great @chriseppstein). It really helped many of us through the darkest cross-browser crap. Even though browsers are increasingly playing nice with CSS, another problem has become very topical: managing the complexity in stylesheets as our in-browser apps get larger and larger. SCSS is an indispensable tool for dealing with this.

This isn't an introduction to the language by a long shot; many things probably won't make sense unless you have some SCSS under your belt already. That said, if you're not yet comfy with the basics, check out the aweso

@datagrok
datagrok / git-branch-simplify.md
Last active April 16, 2024 17:26
How to simplify the graph produced by git log --graph

Ideas for improvements to git log --graph

I will maybe someday get around to dusting off my C and making these changes myself unless someone else does it first.

Make the graph for --topo-order less wiggly

Imagine a long-running development branch periodically merges from master. The git log --graph --all --topo-order is not as simple as it could be, as of git version 1.7.10.4.

It doesn't seem like a big deal in this example, but when you're trying to follow the history trails in ASCII and you've got several different branches displayed at once, it gets difficult quickly.