Skip to content

Instantly share code, notes, and snippets.

View elycruz's full-sized avatar

Ely De La Cruz elycruz

View GitHub Profile
@elycruz
elycruz / modal-dialog-custom-backdrop.js
Last active February 18, 2024 01:58
Modal dialog '::backdrop' replacement.
View modal-dialog-custom-backdrop.js
/**
* Custom modal "backdrop" animation replacement, until `::backdrop` animations are supported.
*/
document.body.innerHTML = `
<style>
body {
display: grid;
place-content: center;
}
@elycruz
elycruz / from_cow_to_cow.rs
Last active April 29, 2023 03:11
Single threaded "filters" pattern
View from_cow_to_cow.rs
/**
* Single threaded "filters" patterns.
*/
use std::borrow::{Cow, Cow::*};
pub type Filter<'a, T> = &'a dyn Fn(Cow<'a, T>) -> Cow<'a, T>;
fn filter<'a>(filters: &'a [Filter<'a, str>], value: Cow<'a, str>) -> Cow<'a, str> {
filters.iter().rfold(value, |agg, f| f(agg))
}
@elycruz
elycruz / form_controls_example.rs
Last active April 25, 2023 21:48
Example of declaring a vector with a complex data type, with nested smart pointers, and generics.
View form_controls_example.rs
use core::fmt::Formatter;
/**
* The goal of this example is to show a way to have algebraic types and generics
* represent a collection of structs that can each have their own types and
* additionally be structurally different from each other.
*
* Question: Are there less "typeful"/verbose ways of acheiving the same this?
*/
use core::fmt::{Display, Debug};
use std::borrow::Cow;
@elycruz
elycruz / material-icon-font-as-web-component.js
Created February 2, 2023 07:11
Example showing how to wrap an icon font as a web component (example adapted for browser 'snippets'/console).
View material-icon-font-as-web-component.js
// Note: in real world example things would work slightly differntly:
// ----
const matSymStyleSheet = new CSSStyleSheet();
// Load css for custom 'x-icon' element - In realword scenario css can be loaded using import assertions, and/or,
// directly via app facilities (sass, webpack, etc.).
fetch('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200')
.then(res => res.text())
.then(css => matSymStyleSheet.replace(`
${css.replace('.material-symbols-outlined', ':host .material-symbols-outlined')}
@elycruz
elycruz / dialog-in-right-hand-drawer-layout.js
Created January 30, 2023 13:58
dialog element in 'right-hand' drawer layout
View dialog-in-right-hand-drawer-layout.js
document.body.innerHTML = `
<style>
html, body {
margin: 0;
padding: 0;
font: normal 1rem Arial, Sans-serif;
}
dialog {
margin: 0;
padding: 0;
@elycruz
elycruz / dom-parser-xml-example.js
Created November 26, 2022 22:04
Basic usage of `DOMParser` (for XML)
View dom-parser-xml-example.js
const {log} = console,
groupContent = '.'.repeat(5).split('').reduce((agg, _, i) => {
return agg + `<item>` +
`<title>Item ${i}</title>` +
`</item>`;
}, ''),
docContent = `<group>${groupContent}</group>`,
@elycruz
elycruz / dialog-as-tooltip-and-dialog.js
Created August 11, 2022 18:10
Example showing the use of `dialog` elements in different contexts
View dialog-as-tooltip-and-dialog.js
document.body.innerHTML = `
<style>
.with-overlay {
display: inline-block;
border: 1px solid;
}
.with-overlay {
position: relative;
}
@elycruz
elycruz / flags_with_bitwise_ops.js
Last active September 16, 2022 19:08
Flags system using bitwise operators and binary numerals (in javascript).
View flags_with_bitwise_ops.js
/**
* Storing flags in one variable and checking for
* enabled/disabled states using
* bitwise operators.
* @author elycruz
* @reference:
* - https://www.youtube.com/watch?v=RRyxCmLX_ag
* - https://www.youtube.com/watch?v=6hnLMnid1M0
*/
@elycruz
elycruz / custom-input.js
Created July 18, 2022 22:54
Custom Input - Using Using Web Components Platform (and es2023)
View custom-input.js
const isset = x => x !== null && x !== undefined,
{log, error} = console,
xInputName = 'x-input',
xInputStyles = `
:host {
background-color: green;
}
@elycruz
elycruz / console_ani_keyframes_with_display_none.js
Created September 9, 2021 23:40
Animation keyframes with `display: none;`.
View console_ani_keyframes_with_display_none.js
/**
* Exploring animation keyframes with display `none` etc.
*/
document.body.innerHTML = `
<style>
@keyframes slide-in {
0% {
display: none;