Skip to content

Instantly share code, notes, and snippets.

View matthew-ia's full-sized avatar

Matthew Alicea matthew-ia

View GitHub Profile
@matthew-ia
matthew-ia / .gitignore
Created January 4, 2024 01:49
Git Ignore (Cayo)
node_modules
.DS_Store
.cayo
dist
@matthew-ia
matthew-ia / Box.svelte
Created December 17, 2023 21:20
Utility Classes as Properties Pattern (Svelte)
<script>
export let top = true;
export let bottom = true;
export let right = true;
export let left = true;
</script>
<div class:top class:bottom class:left class:right>
<slot/>
</div>
@matthew-ia
matthew-ia / _tokens.scss
Last active October 1, 2023 00:08
Sass Design System Concept
// COLOR
// ────────────────────────────────────
$colors: (
'red.100': #FFF5F5,
'red.200': #FBD0D0,
'red.300': #EF5D5D,
'brick.100': #FFF7F5,
'brick.200': #FED9CD,
'brick.300': #E5653C,
'orange.100': #FFF6F0,
@matthew-ia
matthew-ia / syntheticFilterClick.js
Last active June 23, 2023 17:29
Synthetically Click Filters Buttons (Hijack Filter Button Functionality)
/*
Synthetically Click Filters Buttons
For this snippet, some definitions:
- Filter Button – a particular filter button element that exists with the main Filter Panel
– Fit Button – a button below the fit banner, that when clicked, applies the corresponding fit's filter
Using synthetic clicks of the filter buttons within the Filter Panel, to modify the current filter state.
The standard filter buttons use the data-href attribute which is parsed and passed to an Ajax call to update the
@matthew-ia
matthew-ia / switch-by-function.svelte
Last active March 29, 2022 13:47
Render a Svelte component using a switch pattern
<script>
import A from './a.svelte';
import B from './b.svelte';
import C from './c.svelte';
// assuming `state` prop is managed externally and passed into this component
export let state;
function component(current) {
switch(current) {