Skip to content

Instantly share code, notes, and snippets.

View Mix-Liten's full-sized avatar
❤️

Mix-Liten Mix-Liten

❤️
5 followers · 32 following
View GitHub Profile
@Mix-Liten
Mix-Liten / style.css
Created November 22, 2023 08:17
A new approach to container and wrapper classes
.content {
--gap: clamp(1rem, 6vw, 3rem);
--full: minmax(var(--gap), 1fr);
--content: min(75ch, 100% - var(--gap) * 2);
--popout: minmax(0, 2rem);
--feature: minmax(0, 5rem);
display: grid;
grid-template-columns:
[full-start] var(--full)
@Mix-Liten
Mix-Liten / style.css
Created November 15, 2023 09:46
reset <img> style
/* old way */
img {
display: block;
max-width: 100%;
}
/* new way */
img {
max-width: 100%;
height: auto;
@Mix-Liten
Mix-Liten / Notepad.md
Last active September 12, 2023 14:43
Open an editable page on browser

  1. Text editor

    data:text/html;charset=utf-8;base64,PGh0bWwgY29udGVudGVkaXRhYmxlPjx0aXRsZT5Ob3RlcGFkPC90aXRsZT48Ym9keSBvbmxvYWQ9ImRvY3VtZW50LmJvZHkuZm9jdXMoKSIgc3R5bGU9ImZvbnQtZmFtaWx5OkNvbnNvbGFzLCdDb3VyaWVyIE5ldycsbW9ub3NwYWNlLEFyaWFsLHNhbnMtc2VyaWY7Zm9udC1zaXplOjE2cHg7bGluZS1oZWlnaHQ6MS41O3BhZGRpbmc6MjBweDtiYWNrZ3JvdW5kLWNvbG9yOnJnYig0MCw0Miw1NCk7Y29sb3I6cmdiKDI0OCwyNDgsMjQyKSIgc3BlbGxjaGVjaz0idHJ1ZSI+PC9ib2R5PjwvaHRtbD4=

    or

    data:text/html;charset=utf-8,<html contenteditable><title>Notepad</title><body onload="document.body.focus()" style="font-family:Consolas,'Courier New',monospace,Arial,sans-serif;font-size:16px;line-height:1.5;padding:20px;background-color:rgb(40,42,54);color:rgb(248,248,242)" spellcheck="true"></body></html>

  2. Code editor, You can customize the language field in the following list

@Mix-Liten
Mix-Liten / symmetricEncrypt-web.js
Created August 24, 2023 10:31
Symmetric Encryption in Web environment
class SymmetricEncryptor {
#key
/**
* Create a new SymmetricEncryptor instance.
* @param {string} key - The base64-encoded encryption key.
*/
constructor(key) {
/**
* The encryption key.
* @type {Uint8Array}
@Mix-Liten
Mix-Liten / symmetricEncrypt-node.js
Last active August 24, 2023 10:31
Symmetric Encryption in Node.js
const { createCipheriv, createDecipheriv, randomBytes } = require('crypto')
/**
* A class for symmetric encryption and decryption using AES-GCM.
*/
class SymmetricEncryptor {
#key
/**
* Create a new SymmetricEncryptor instance.
* @param {string} key - The base64-encoded encryption key.
@Mix-Liten
Mix-Liten / style.css
Created August 9, 2023 02:31
Basic Fade In/Out CSS
/* default DOM */
/* <div class="hide">...</div> */
/* show */
/* el.classList.replace('hide', 'show'); */
/* hide */
/* el.classList.replace('show', 'hide'); */
.show {
@Mix-Liten
Mix-Liten / vercel.json
Created May 6, 2023 09:17
when deploy project that include backend server to Vercel, should need this configuration file.
{
"version": 2,
"builds": [
{
"src": "./index.js",
"use": "@vercel/node"
}
],
"routes": [
{
@Mix-Liten
Mix-Liten / Contrasting_Text.html
Last active January 7, 2023 03:58
Methods for Contrasting Text Against Backgrounds
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
html,
body {
margin: 0;
padding: 0;
@Mix-Liten
Mix-Liten / react-Typed_Polymorphic_Components.tsx
Created May 29, 2022 10:20
import React from "react";
type AsProp<C extends React.ElementType> = {
as?: C;
};
type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
/******************************************
** Not Support Refs version type utility **
@Mix-Liten
Mix-Liten / _Utility.js
Last active May 29, 2022 10:19
JS Utility Functions
function randomNumberBetween(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min)
}
/**
* example: sleep(1000).then(() => { ...doSomeThing })
*/
function sleep(duration) {
return new Promise(resolve => {
setTimeout(resolve, duration)