Skip to content

Instantly share code, notes, and snippets.

@nireno
nireno / tailwind-rem-scaling.js
Last active December 13, 2023 16:02
Rem Scaling for TailwindCSS config
/**
* Adapted from [deanmcpherson](https://github.com/tailwindlabs/tailwindcss/discussions/1611#discussioncomment-1959522).
* Scales all rem values for the given theme object.
* @param {Object} theme - The theme object containing the values to be scaled.
* @param {number} from - The original value to scale from.
* @param {number} to - The target value to scale to.
* @returns {Object} - The modified theme object with scaled rem values.
*
* @example
* const defaultTheme = require('tailwindcss/defaultTheme');
@nireno
nireno / ReactHotToast.res
Last active October 12, 2023 18:28
Rescript-ReactHotToast
module Toaster = {
@react.component @module("react-hot-toast")
external make: (
~position: option<string>=?,
~reverseOrder: option<bool>=?,
~gutter: option<int>=?,
~containerClassName: option<string>=?,
~containerStyle: option<ReactDOMRe.Style.t>=?,
~toastOptions: option<{..}>=?,
) => React.element = "Toaster"
@nireno
nireno / DecodingWithDecco.res
Last active June 13, 2023 23:22
Decoding optional and default values with decco ppx in rescript
module RequiredField = {
@decco
type t = {value: string}
}
module RequiredFieldWithDefault = {
@decco
type t = {
@decco.default("fallback")
value: string,
@nireno
nireno / base64_image-placeholder.html
Last active October 12, 2023 18:24
Base64 data image placeholder in react with tailwind aspect-ratio plugin
<!-- https://play.tailwindcss.com/D6b5GejsrZ -->
<div class="aspect-[16/9] p-12">
<img
class="h-full w-full border-2 border-black object-cover"
alt="image placeholder"
src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mO89x8AAsEB3+IGkhwAAAAASUVORK5CYII="
/>
</div>
@nireno
nireno / removeUrlAuthority.js
Last active December 13, 2022 19:01
Removes the authority (the scheme, hostname, and port) from a URL
function removeUrlAuthority(url) {
var urlObject = new URL(url);
var path = urlObject.pathname;
var query = urlObject.search;
var fragment = urlObject.hash;
return path + query + fragment;
}
@nireno
nireno / AccordionItem.res
Last active December 13, 2022 20:16
Rescript Animated Accordion Item
open Belt
@get
external getClientHeight: Dom.element => int = "clientHeight"
let useClientHeight = () => {
let ref: React.ref<Js.Nullable.t<Dom.element>> = React.useRef(Js.Nullable.null)
(ref, ref.current->Js.Nullable.toOption->Option.map(el => el->getClientHeight))
}
@nireno
nireno / rich-text-content.css
Created September 1, 2022 23:04
Generic Rich Text Content Styles
.content {
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
@nireno
nireno / rich-text-boilerplate.html
Last active September 1, 2022 23:07
Boilerplate html useful for testing css styles against common rich text editor markup
<h1>HyperText Markup Language</h1>
<p>The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.</p>
<h2>History</h2>
<h3>Development</h3>
<img class="alignleft" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c8/Tim_Berners-Lee_April_2009.jpg/340px-Tim_Berners-Lee_April_2009.jpg" />
<p>In 1980, physicist Tim Berners-Lee, a contractor at CERN, proposed and prototyped ENQUIRE, a system for CERN researchers to use and share documents. In 1989, Berners-Lee wrote a memo proposing an Internet-based hypertext system.[3] Berners-Lee specified HTML and wrote the browser and server software in late 1990. That year, Berners-Lee and CERN data systems engineer Robert Cailliau collaborated on a joint request for funding, but the project was not formally adopted by CERN. In his personal notes[4] from 1990 he listed[5] "some of t
@nireno
nireno / ApolloFetchResult.re
Last active February 3, 2021 21:25
Unwrap/Map Apollo Client response promise into a Future
open! Utils;
type t('a) =
Js.Promise.t(
Belt.Result.t(
ApolloClient__React_Types.FetchResult.t__ok('a),
ApolloClient__ApolloClient.ApolloError.t,
),
);
@nireno
nireno / npm_install_latest.sh
Created May 31, 2020 01:56
Update all outdated npm packages to @latest
# /bin/bash
npm outdated \
| tail --lines=+2 \
| awk '{print $1"@latest"}' \
| xargs -d '\n' npm install