Skip to content

Instantly share code, notes, and snippets.

View danielmascena's full-sized avatar
🎯
Focusing

Daniel Mascena danielmascena

🎯
Focusing
View GitHub Profile
@joakimbeng
joakimbeng / router.html
Last active March 15, 2024 06:18
A really simple Javascript router
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Building a router</title>
<script>
// Put John's template engine code here...
(function () {
// A hash to store our routes:
@ebidel
ebidel / fancy-tabs-demo.html
Last active March 8, 2024 23:08
Fancy tabs web component - shadow dom v1, custom elements v1, full a11y
<script src="https://unpkg.com/@webcomponents/custom-elements"></script>
<style>
body {
margin: 0;
}
/* Style the element from the outside */
/*
fancy-tabs {
margin-bottom: 32px;
@andywer
andywer / _readme.md
Last active March 7, 2024 05:52
React - Functional error boundaries

React - Functional error boundaries

Thanks to React hooks you have now happily turned all your classes into functional components.

Wait, all your components? Not quite. There is one thing that can still only be implemented using classes: Error boundaries.

There is just no functional equivalent for componentDidCatch and deriveStateFromError yet.

Proposed solution

Strings

String.prototype.*

None of the string methods modify this – they always return fresh strings.

  • charAt(pos: number): string ES1

    Returns the character at index pos, as a string (JavaScript does not have a datatype for characters). str[i] is equivalent to str.charAt(i) and more concise (caveat: may not work on old engines).

@gaearon
gaearon / index.html
Last active January 26, 2024 11:25
Add React in One Minute
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Add React in One Minute</title>
</head>
<body>
<h2>Add React in One Minute</h2>
<p>This page demonstrates using React with no build tooling.</p>
@learncodeacademy
learncodeacademy / generators.md
Last active January 7, 2024 11:58
What are Javascript Generators?

##what are generators##

  • They're pausable functions, pausable iterable functions, to be more precise
  • They're defined with the *
  • every time you yield a value, the function pauses until .next(modifiedYieldValue) is called
var myGen = function*() {
  var one = yield 1;
  var two = yield 2;
  var three = yield 3;
 console.log(one, two, three);
@mathewmariani
mathewmariani / binary.js
Created May 18, 2016 23:22
A quick look at signed and unsigned integers in JavaScript.
var UInt4 = function (value) {
return (value & 0xF);
};
var Int4 = function (value) {
var ref = UInt4(value);
return (ref > 0x7) ? ref - 0x10 : ref;
};
var UInt8 = function (value) {
@adactio
adactio / sectioningcontenttest.html
Created November 12, 2011 12:19
Illustration of sectioning content and the outline algorithm in HTML5.
<!DOCTYPE html>
<html lang="en">
<title>Sectioning Content test</title>
<h1>This is an h1</h1>
<p>That h1 is the heading for the body (a sectioning root).</p>
<div>
<h1>This is another h1</h1>
<p>That h1 is inside a div so it is no different than the first h1.</p>
</div>
<section>
@jcgregorio
jcgregorio / How_to_use.html
Last active July 17, 2023 14:44
HTML Templating using the HTML <template> element and exactly 100 lines of JS. A cleaned up version of this code is now available at https://github.com/jcgregorio/stamp/.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<script src="templating.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<template id=t>
@nuxodin
nuxodin / HTMLFormElement-HTMLInputElement.reportValidity.js
Last active January 7, 2023 19:52
Polyfill for reportValidity()
/* Copyright (c) 2016 Tobias Buschor https://goo.gl/gl0mbf | MIT License https://goo.gl/HgajeK */
if (!HTMLFormElement.prototype.reportValidity) {
HTMLFormElement.prototype.reportValidity = function() {
if (this.checkValidity()) return true;
var btn = document.createElement('button');
this.appendChild(btn);
btn.click();
this.removeChild(btn);
return false;