Skip to content

Instantly share code, notes, and snippets.

View asvny's full-sized avatar
🎯
Focusing

Annamalai Saravanan asvny

🎯
Focusing
View GitHub Profile
@asvny
asvny / native-create-element.js
Created August 19, 2018 14:52 — forked from sergiodxa/native-create-element.js
Example implementation of the same API of React.createElement but using native DOM elements
// use JSX with el instead of React.createElement
/** @jsx createElement */
const Children = {
only(children) {
if (children.length > 1 || children.length === 0) {
throw new Error('The children must have only one element');
}
return children[0];
}
@asvny
asvny / focus.js
Created August 29, 2018 01:29
Autofocus for all HTML Elements
(_ => {
const target = document.documentElement;
// config object
const config = {
attributes: true,
attributeOldValue: true,
characterData: true,
characterDataOldValue: true,
childList: true,
@asvny
asvny / catch.ts
Created August 31, 2018 02:41
Catch decorator in typescript
function Catch(E, callback) {
return function (target, key: string, descriptor: PropertyDescriptor) {
if(descriptor === undefined) {
descriptor = Object.getOwnPropertyDescriptor(target, key);
}
var originalMethod = descriptor.value;
descriptor.value = function () {
try {
@asvny
asvny / useFocusTrap.jsx
Created October 26, 2018 04:55
FocusTrap - React Hook
// Based on https://hiddedevries.nl/en/blog/2017-01-29-using-javascript-to-trap-focus-in-an-element
import React, { useRef, useEffect } from 'react';
const KEYCODE_TAB = 9;
function useFocusTrap() {
const elRef = useRef(null);
function handleFocus(e) {
@asvny
asvny / FocusTrap.js
Created October 27, 2018 06:26
FocusTrap custom component using LitElement
import {
html,
LitElement
} from "https://unpkg.com/@polymer/[email protected]/lit-element.js?module";
const KEYCODE_TAB = 9;
class FocusTrap extends LitElement {
constructor() {
super();
// used to retrieve template content
const templates = new Map;
// used to retrieve node updates
const updates = new WeakMap;
// hyperHTML, the nitty gritty
function hyperHTML(chunks, ...interpolations) {
// if the static chunks are unknown
@asvny
asvny / App.js
Created November 20, 2018 20:53 — forked from ryanflorence/App.js
import React, { Suspense, useState } from "react";
import { unstable_createResource as createResource } from "react-cache";
import {
Combobox,
ComboboxInput,
ComboboxList,
ComboboxOption
} from "./Combobox2.js";
function App({ tabIndex, navigate }) {
@asvny
asvny / example.jsx
Created May 21, 2019 11:29 — forked from bvaughn/LICENSE.md
Advanced example for manually managing subscriptions in an async-safe way using hooks
import React, { useMemo } from "react";
import useSubscription from "./useSubscription";
// In this example, "source" is an event dispatcher (e.g. an HTMLInputElement)
// but it could be anything that emits an event and has a readable current value.
function Example({ source }) {
// In order to avoid removing and re-adding subscriptions each time this hook is called,
// the parameters passed to this hook should be memoized.
const subscription = useMemo(
() => ({
import SwiftUI
import Combine
class MyDatabase: BindableObject {
let didChange = PassthroughSubject<MyDatabase, Never>()
var contacts: [Contact] = [
Contact(id: 1, name: "Anna"), Contact(id: 2, name: "Beto"),
Contact(id: 3, name: "Jack"), Contact(id: 4, name: "Sam")
] {
@asvny
asvny / modern-reset.css
Created October 11, 2019 00:03
Modern reset
/* Box sizing rules */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Remove default padding */
ul[class],
ol[class] {