Skip to content

Instantly share code, notes, and snippets.

🎯
Focusing

Andrea Giammarchi WebReflection

🎯
Focusing
Block or report user

Report or block WebReflection

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
View static.email.public.index.recaptcha.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>A Static Email Form Example + reCAPTCHA</title>
<link rel="stylesheet" href="css/index.css">
<script defer src="//unpkg.com/static.email"></script>
<script defer src="js/index.js"></script>
<!-- this script, after all others, will bring in reCAPTCHA -->
View static.email.public.js.index.recaptcha.js
// nullify the global reference while instrumenting the form
StaticEmail = (function (StaticEmail) {
// we don't know when window.recaptcha will be called,
// so we use a promise to simplify our workflow
var captcha = new Promise(function (resolve) {
window.recaptcha = function () {
// resolve passing the widget id along
resolve(
grecaptcha.render('recaptcha', {
// the SITE KEY reCAPTCHA provided
View static.email.public.js.index.js
// nullify the global reference while instrumenting the form
StaticEmail = (function (StaticEmail) {
contact.addEventListener('submit', function (event) {
event.preventDefault();
var from = contact.from.value.trim();
var md = contact.md.value.trim();
if (from && md) {
contact.submit.disabled = true;
StaticEmail({
path: '/api/paperboy',
View static.email.public.css.index.css
html, body {
box-sizing: border-box;
font-family: sans-serif;
}
h1 {
font-size: 1.2em;
text-align: center;
}
View static.email.public.index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>A Static Email Form Example</title>
<link rel="stylesheet" href="css/index.css">
<script defer src="//unpkg.com/static.email"></script>
<script defer src="js/index.js"></script>
</head>
View differential-js-loader.md

This is an alternative to the Modern Script Loading tchnique, that doesn't need to wait for the load event.

Compatibility

This technique has been successfully tested down to IE9.

<!DOCTYPE html>
<html lang="en">
<head>
@WebReflection
WebReflection / setup.md
Last active Sep 19, 2019
Personal coding setup
View setup.md
@WebReflection
WebReflection / inline-js-modules.js
Last active Oct 10, 2019
PoC: How to inline ES modules
View inline-js-modules.js
const env = {
m1: `import {func} from './m2.mjs'; console.log(func());`,
m2: `export function func() { return 'abc'; }`
};
const inlineModule = (env, text) => `data:text/javascript;base64,${
btoa(inlineModules(env, text))
}`;
const inlineModules = (env, text) => text.replace(
View why-i-use-web-components.md

Why I use web components

This is some sort of answer to recent posts regarding Web Components, where more than a few misconceptions were delivered as fact.

Let's start by defining what we are talking about.

The Web Components Umbrella

As you can read in the dedicated GitHub page, Web Components is a group of features, where each feature works already by itself, and it doesn't need other features of the group to be already usable, or useful.

You can’t perform that action at this time.