Skip to content

Instantly share code, notes, and snippets.

View kevnk's full-sized avatar

Kevin K kevnk

20 followers · 19 following
View GitHub Profile
@kevnk
kevnk / gist:16fcf799b3ce277dc40b9039758cdf31
Created April 9, 2024 15:30
keybase.md
### Keybase proof
I hereby claim:
* I am kevnk on github.
* I am kevnk (https://keybase.io/kevnk) on keybase.
* I have a public key ASC8jx4OIKgjnjFGjW52pn1z9w9goVqKKpCFqC7Bp8uBKQo
To claim this, I am signing this object:
@kevnk
kevnk / index.css
Last active October 14, 2024 15:53
grayscale.design css default scale for darkmode
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer utilities {
/* Grayscale Design palette: https://grayscale.design/app?lums=93.87,82.28,68.67,49.10,40.20,32.78,13.29,9.31,6.30,2.62,1.30,0.52&palettes=%239c2733,%23b79de7,%2331c264,%236ab2d9,%23352220&filters=0%7C0,0%7C0,0%7C0,0%7C0,3.8%7C8.7&names=red,purple,green,blue,brown&labels=,,,, */
:root {
--grayscale-50: 248 248 248;
--grayscale-100: 234 234 234;
--grayscale-200: 216 216 216;
@kevnk
kevnk / alpinejs-parallax.js
Last active January 16, 2025 03:01
Parallax directive for alpinejs
/**
* Installation and setup:
* 0. Install AlpineJS: `npm i -S alpinejs`
* 1. Make sure AlpineJS is running by adding `x-data` attribute on opening `<body>` tag
* 2. Add `x-parallax="path/to/image.jpg"` on element to add parallax bg image
*
* PS. this code was partially generated from ChatGPT 4
*/
// Helper function to load an image and return its natural dimensions
@kevnk
kevnk / alpinejs-aos.js
Created April 27, 2023 17:44
AOS for AlpineJS
/**
* Installation and setup:
* 0. Install AlpineJS: `npm i -S alpinejs`
* 1. Install AOS (we're just using their CSS): `npm i -S aos`
* 2. Make sure AlpineJS is running by adding `x-data` attribute on opening `<body>` tag
* 3. Add `x-aos:fade-up` on element to add animation
* 4. Override defaults (500ms duration and 'ease-out-cubic' easing) by passing object of options in the expression:
* eg. `x-aos:fade-up="{duration:2000,easing:'linear'}"`
*/
@kevnk
kevnk / Emmet.sublime-settings
Created June 3, 2022 15:09
Emmet snippets for Tailwind CSS
{
"config": {
"stylesheet": {
"options": {
"stylesheet.between": "-",
"stylesheet.after": " ",
"stylesheet.intUnit": "",
},
"snippets": {
// "": "sm:",
@kevnk
kevnk / color.js
Created May 31, 2022 17:55
Converting web color formats in javascript - Used on https://grayscale.design
export function hexToRGB(hex) {
let r = 0;
let g = 0;
let b = 0;
if (hex.length === 4) {
r = `0x${hex[1]}${hex[1]}`;
g = `0x${hex[2]}${hex[2]}`;
b = `0x${hex[3]}${hex[3]}`;
} else if (hex.length === 7) {
r = `0x${hex[1]}${hex[2]}`;
@kevnk
kevnk / AuthServiceProvider.php
Last active May 26, 2022 14:32 — forked from paulofreitas/AuthServiceProvider.php
Extending the default EloquentUserProvider (Laravel 9)
<?php
namespace App\Providers;
use App\Auth\UserProvider;
use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;
class AuthServiceProvider extends ServiceProvider
{
/**
@kevnk
kevnk / _variables.scss
Created November 14, 2019 01:06
Golden Ratio setup for bootstrap
$gr: 1.61803398875;
$spacer: 1.25rem !default;
$spacers: (
0: 0,
1: $spacer / $gr / $gr / $gr,
2: $spacer / $gr / $gr,
3: $spacer / $gr,
4: $spacer,
@kevnk
kevnk / gist:5683fd0c5a9c5623d49c9ca10aea794e
Created May 25, 2017 14:53
Verifying that "16tuy8poTZy5eDcbjseWWkm63AP2QhJeTN.id" is my Blockstack ID. https://onename.com/16tuy8poTZy5eDcbjseWWkm63AP2QhJeTN
@kevnk
kevnk / flatten.js
Last active November 7, 2016 18:54
Flatten Array
/**
* Takes a nested array and flattens it. Default use is for a nested array of integers
* But can be used for nested arrays with any type of value by passing in custom mapping and/or filtering functions
* @param {Array} arr The nested array to be flattened
* @param {Function} mapIt Function to map each value
* @param {Function} filterIt Function to filter out unwanted values left over from the mapping
* @return {Array} Returns empty array if `arr` is invalid
*/
export default function flatten(arr, mapIt=Number, filterIt=Number.isInteger) {
let result = []