Luis Martinez Suarez luismartinezs

😄

Always learning

Frontend web developer

luismartinezs / react-import-on-interaction.jsx

Created August 26, 2023 09:33

React Import on interaction #react #performance

	// Source https://www.patterns.dev/posts/import-on-interaction
	import React, { useState, createElement } from "react";
	import MessageList from "./MessageList";
	import MessageInput from "./MessageInput";
	import ErrorBoundary from "./ErrorBoundary";

	const Channel = () => {
	const [emojiPickerEl, setEmojiPickerEl] = useState(null);

	const openEmojiPicker = () => {

luismartinezs / render-count.jsx

Last active December 15, 2022 14:42

render count #react

	function useLogCount(msg) {
	const count = useRef(1);
	useEffect(() => {
	console.debug(msg, count.current);
	count.current++;
	});
	}

luismartinezs / Input.html

Last active October 23, 2022 12:21

Input with error #a11y

	<input type="email" name="email" id="email" aria-invalid="true" aria-errormessage="err1" />
	<span id="err1">error: Enter a valid email address</span>

luismartinezs / FormattedMessage.tsx

Last active October 13, 2022 07:20

FormattedMessage #react-intl

	<FormattedMessage
	id="foo"
	defaultMessage="To buy a shoe, <a>visit our website</a> and <cta>buy a shoe</cta>"
	values={{
	a: chunks => (
	<a
	class="external_link"
	target="_blank"
	href="https://www.example.com/shoe"
	>

luismartinezs / dialogs.html

Last active September 7, 2022 17:07

Dialogs #a11y #html

	<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog -->

	<dialog open>
	<p>Greetings, one and all!</p>
	<!-- method="dialog" closes dialog on form submit -->
	<form method="dialog">
	<button>OK</button>
	</form>
	</dialog>

luismartinezs / landmarks.html

Last active September 5, 2022 13:31

Landmarks page example #a11y

	<!-- https://scottaohara.github.io/landmarks_demo/ -->
	<!DOCTYPE html>
	<html lang="en-us" class="no-js">
	<head>
	<meta charset="utf-8" />
	<title>Landmarks Demonstration</title>
	<meta name="viewport" content="width=device-width, initial-scale=1" />
	<script>
	// remove no-js and add 'js' to the HTML
	document.documentElement.className =

luismartinezs / notifications.html

Last active October 23, 2022 12:31

A11y notifications #a11y #html #js

	<!-- https://www.w3.org/WAI/tutorials/forms/notifications/ -->

	<!-- Use notifications to provide user feedback after a user action -->

	<!-- 1. Using main heading -->
	<h1>3 Errors - Billing Address</h1>
	<h1>Thank you for submitting your order.</h1>

	<!-- 2. Using page title -->
	<title>3 Errors - Billing Address</title>

luismartinezs / labels.html

Last active September 4, 2022 19:04

Label form controls #a11y #html

	<!-- https://www.w3.org/WAI/tutorials/forms/labels/ -->

	<!-- simple labels -->
	<label for="firstname">First name:</label>
	<input type="text" name="firstname" id="firstname" />

	<!-- Cases where label text is hidden -->

	<!-- Hide label text with CSS -->
	<style>

luismartinezs / progress.html

Last active September 4, 2022 15:03

Progress bar #a11y #html

	<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#accessibility_concerns -->

	<!-- OPTION A -->

	<label
	>Uploading Document: <progress value="70" max="100">70 %</progress></label
	>

	<!-- OPTION B -->

luismartinezs / select.html

Created September 4, 2022 14:50

Select with grouped options #a11y #html

	<!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup -->

	<label for="dino-select">Choose a dinosaur:</label>
	<select id="dino-select">
	<optgroup label="Theropods">
	<option>Tyrannosaurus</option>
	<option>Velociraptor</option>
	<option>Deinonychus</option>
	</optgroup>
	<optgroup label="Sauropods">