ejur4s’s gists

ejur4s / focusable.js

Created February 3, 2020 23:31

https://zellwk.com/blog/keyboard-focusable-elements/

	/**
	* Gets keyboard-focusable elements within a specified element
	* @param {HTMLElement} [element=document] element
	* @returns {Array}
	*/
	function getKeyboardFocusableElements (element = document) {
	return [...element.querySelectorAll(
	'a, button, input, textarea, select, details,[tabindex]:not([tabindex="-1"])'
	)]
	.filter(el => !el.hasAttribute('disabled'))

ejur4s / attributes.css

Created February 3, 2020 22:02 — forked from emmabostian/attributes.css

	Seven different types of CSS attribute selectors

	// This attribute exists on the element
	[value]

	// This attribute has a specific value of cool
	[value='cool']

	// This attribute value contains the word cool somewhere in it
	[value*='cool']

ejur4s / article.html

Created January 17, 2020 13:14

	<article>

	<header>
	<h1>Article title</h1>
	<time datetime="2019-12-03">December 3, 2019</time>
	</header>

	<section aria-label="quick summary">
	<p>...</p>
	</section>

ejur4s / breadcrumbs.html

Created January 17, 2020 11:39

	<nav aria-label="breadcrumbs">
	<ol>
	<li>
	<a href="/">Home</a>
	</li>
	<li>
	<a href="/parent">Parent</a>
	</li>
	<li>
	<a href="/parent/current" aria-current="location">Current</a>

ejur4s / reset-motion.css

Created January 11, 2020 06:37

	/*
	1 - Hat tip Nick/cssremedy (https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/#comment-1700170)
	*/
	@media screen and
	(prefers-reduced-motion: reduce),
	(update: slow) {
	* {
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important; /* 1 */
	transition-duration: 0.001ms !important;

ejur4s / logical-operations.css

Created January 9, 2020 02:54

ejur4s / tokens.css

Last active February 11, 2020 20:28

ejur4s / template.html

Last active December 28, 2019 17:54

Accessible HTML template (source: https://majder.com/semantic-markup/)

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="description" content="This is a website of a non existing company.">
	<link rel="shortcut icon" href="./favicon.ico">
	<title>Company name</title>
	<script src="https://unpkg.com/[email protected]/package.js"></script>
	</head>

ejur4s / center-animated-link.scss

Last active December 22, 2019 06:11

	/*
	1 - fallback for older browsers that do not support transformation
	*/
	.link {
	position: relative;
	color: #000;
	text-decoration: none;

	&:before {
	content: "";

ejur4s / keybase.md

Created March 5, 2017 04:22

I hereby claim:

To claim this, I am signing this object:

Eimantas ejur4s