Skip to content

Instantly share code, notes, and snippets.

View luismartinezs's full-sized avatar
😄
Always learning

Luis Martinez Suarez luismartinezs

😄
Always learning
29 followers · 49 following
View GitHub Profile
@luismartinezs
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
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
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
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
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
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
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
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
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
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">