Skip to content

Instantly share code, notes, and snippets.

View EduardoAC's full-sized avatar

Eduardo Aparicio Cardenes EduardoAC

25 followers · 20 following
View GitHub Profile
@EduardoAC
EduardoAC / minify-cookie-id-hash-only.js
Created November 20, 2025 12:07
Minify through using ID hashmap to prevent long query parameters
@EduardoAC
EduardoAC / minify-cookie-keys-only.js
Created November 20, 2025 12:04
Minify example to show how to minify example using cookie dsTa
@EduardoAC
EduardoAC / minify-cookie-keys-values.js
Last active November 20, 2025 12:02
Minify cookie script for keys and value for cURL request example
@EduardoAC
EduardoAC / measure-cookie-size.js
Last active November 20, 2025 12:31
Meaure cookie size and reporting from cURL request
@EduardoAC
EduardoAC / cache-poisoning-prevention
Created October 27, 2025 18:35
Cloud Function - CloudFront Cache poisoning prevention
function handler(event) {
var request = event.request;
var allowed = ["accept", "accept-encoding", "if-none-match", "if-modified-since", "user-agent", "range"];
var sanitized = {};
for (var h in request.headers) {
if (allowed.indexOf(h) !== -1) sanitized[h] = request.headers[h];
}
request.headers = sanitized;
request.uri = request.uri.replace(/\/+/g, "/");
return request;
@EduardoAC
EduardoAC / table-comparing-react-vue-dynamic-components.md
Created March 29, 2025 16:04
DEX: Dynamic components React HoC vs Vue.JS slots comparison -Comparing Vue.js and React Approaches
Feature Vue.js (Slots & Dynamic Component) React (Render Props, JSX, HOCs)
Customization Explicit via slots or dynamic components Implicit via JSX or render props
Flexibility Very flexible (structured slots) Flexible, but requires setup
Type Safety Maintains type integrity JSX elements can be mixed types
Performance Direct rendering, no extra function calls Render props and HOCs add slight overhead
Best For Deep component customization Conditional rendering inside components
@EduardoAC
EduardoAC / radiobuttongroup.reactAsHigherOrderComponent.tsx
Last active March 29, 2025 15:40
Using Higher-Order Components (HOCs) - A more advanced pattern in React is to wrap the RadioButtonGroup with an HOC that injects label customization logic
export function withCustomLabel(Component: ReactNode) {
return (props) => {
const modifiedOptions = props.optionList.map((option) => ({
...option,
label: <CustomElement labelText={option.label} />,
}));
return <Component {...props} optionList={modifiedOptions} />;
};
};
@EduardoAC
EduardoAC / radiobuttongroup.reactAsRenderProp.tsx
Last active March 29, 2025 15:39
Using Render Props - To explicitly define how the label is rendered, we can provide a render function as a prop
export function RadioButtonGroup({ optionList, renderLabel }: RadioButtonGroupProps) {
return (
<div className="radio-button-group">
{optionList.map((option) => (
<div
key={option.value}
disabled={option.disabled}
className={selected === type.value && 'option--active' || ''}
>
{option.icon && <span className={`icon-${option.icon}`} />}
@EduardoAC
EduardoAC / radiobuttongroup.reactNodeAsProp.tsx
Last active March 29, 2025 15:40
Using ReactNode as a Prop - The simplest way to customize the label is to pass a ReactNode (JSX element) instead of a string.
export function RadioButtonGroup({ optionList, selected }: RadioButtonGroupProps) {
return (
<div className="radio-button-group">
{optionList.map((option) => (
<div
key={option.value}
disabled={option.disabled}
className={selected === type.value && 'option--active' || ''}
>
{option.icon && <span className={`icon-${option.icon}`} />}
@EduardoAC
EduardoAC / RadioButtonGroup.slotComponent.vue
Last active March 29, 2025 15:38
Using a Slot - We use a slot inside the RadioButtonGroup, allowing the parent component to control how label is rendered.
<template>
<div class="radio-button-group">
<div
v-for="option in optionList"
:key="option.value"
:disabled="option.disabled"
:class="{ 'option--active': selected === type.value }"
>
<div v-if="type.icon" :class="type.icon" />
<slot :labelText="option.label">