Skip to content

Instantly share code, notes, and snippets.

View ackvf's full-sized avatar
🏡
Remote Fullstack Node.js / Frontend React.js

Qwerty (Vítězslav Ackermann Ferko) ackvf

🏡
Remote Fullstack Node.js / Frontend React.js
View GitHub Profile
@ackvf
ackvf / ComponentWithGenerics.ts
Last active October 9, 2024 10:57
React utils
// Jan 2023
/**
* Provides better intellisense for JSX Components at call-site by allowing them to accept additional generics.
*
* In some cases it also switches `onChange` handler from `(value: string) => void` to `(event: HTMLInputEvent<..>) => void`
* to be used with `useFormState()` hook's e.g. `onInputChange` which accepts `EventStub` (`(ev: { target: { name, value }}) => void`).
*
* @example
* interface FormState {a, b}
*
@ackvf
ackvf / README.md
Last active November 5, 2024 20:00
TS/JS utility functions

TS/JS utility functions

other gists
🔗 TypeScript type toolbelt
🔗 React utils


  • accessTrap - Object and Array Proxy to count number of property accesses to map used/unused properties. It maintains referential stability using a caching mechanism to not disrupt React.js render flow.
@ackvf
ackvf / README.md
Last active November 8, 2024 04:04
Bookmarklets and script snippets
@ackvf
ackvf / README.md
Last active September 19, 2024 11:44
TypeScript type toolbelt
@Merott
Merott / tailwind-colors-as-css-variables.md
Last active November 12, 2024 12:19
Expose Tailwind colors as CSS custom properties (variables)

This is a simple Tailwind plugin to expose all of Tailwind's colors, including any custom ones, as custom css properties on the :root element.

There are a couple of main reasons this is helpful:

  • You can reference all of Tailwind's colors—including any custom ones you define—from handwritten CSS code.
  • You can define all of your colors within the Tailwind configuration, and access the final values programmatically, which isn't possible if you did it the other way around: referencing custom CSS variables (defined in CSS code) from your Tailwind config.

See the Tailwind Plugins for more info on plugins.

@jennyknuth
jennyknuth / README.md
Last active September 23, 2024 19:12
Transform an SVG into a data URI—best practice

How to transform an SVG into a data URI

by Jenny Knuth, based on the work of Chris Coyier and Taylor Hunt

A data URI is a nice way to include a web resource without needing to make an HTTP request. Chris Coyier explains the technique nicely in Probably Don't Base64 SVG.

While a PNG might use Base64 encoding, for SVG, there is a better way.

Taylor Hunt's experiments led to this solution for optimizing SVGs in data URIs:

"So the best way of encoding SVG in a data URI is data:image/svg+xml,[actual data]. We don’t need the ;charset=utf-8 parameter (or the invalid ;utf8 parameter…), because URLs are always ASCII."

Demo:

Spoiler warning

Spoiler text. Note that it's important to have a space after the summary tag. You should be able to write any markdown you want inside the <details> tag... just make sure you close <details> afterward.

console.log("I'm a code block!");
@jevakallio
jevakallio / reactiveconf-slam-poetry.md
Last active July 7, 2021 19:57
#ReactiveConf 2017 Lightning Talk Submission: JavaScript Slam Poetry

TL;DR: If you want to see me perform a spoken word poem about JavaScript in front of 1000 people (and on video), please ⭐ star this gist. If you're on mobile, you'll need to request desktop site.

JavaScript Slam Poetry

Javascript! Slam! Poetry!

@gaearon
gaearon / slim-redux.js
Last active May 5, 2024 15:14
Redux without the sanity checks in a single file. Don't use this, use normal Redux. :-)
function mapValues(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
result[key] = fn(obj[key], key);
return result;
}, {});
}
function pick(obj, fn) {
return Object.keys(obj).reduce((result, key) => {
if (fn(obj[key])) {
@postcog
postcog / doskey.mac
Created April 18, 2015 20:42
my doskey macro file (aka alias) for windows (7) command line shell environment
;============================== loading on startup ===============================
;= create a cmd link with the following target :
;= %comspec% /k "(doskey /macrofile=%userprofile%\doskey.mac)"
;============================= File listing enhancements ============================
alias_old=IF ".$*." == ".." (doskey /macros) ELSE (IF /I "$1" == "SAVE" (doskey /macros $g "%USERPROFILE%\doskey.mac" & ECHO Aliases SAVED) ELSE (IF /I "$1"=="LOAD" (doskey /macrofile="%USERPROFILE%\doskey.mac" & ECHO Aliases LOADED & doskey /macros) ELSE (doskey $*)))
alias=IF ".$*." == ".." (doskey /macros) ELSE (IF /I "$1" == "SAVE" (doskey /macros $g "%USERPROFILE%\doskey.mac" & ECHO Aliases SAVED) ELSE (IF /I "$1"=="LOAD" (doskey /macrofile="%USERPROFILE%\doskey.mac" & ECHO Aliases LOADED & doskey /macros) ELSE (IF /I "$1"=="EDIT" (notepad %userprofile%\doskey.mac) ELSE (IF /I "$1"=="EDIT2" (notepad2 %userprofile%\doskey.mac) ELSE (doskey $*)))))
alias_=IF ".$*." == ".." (doskey /macros) ELSE (IF /I "$1" == "SAVE" (doskey /mac