Skip to content

Instantly share code, notes, and snippets.

@henshaw
henshaw / picture-avif-webp.html
Created Jan 28, 2022
Picture element supporting AVIF and WebP image formats
View picture-avif-webp.html
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="description">
</picture>
@henshaw
henshaw / picture-webp.html
Created Jan 28, 2022
Picture element supporting WebP image
View picture-webp.html
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="description">
</picture>
@henshaw
henshaw / open-graph.html
Last active Jun 11, 2022
Open Graph and Twitter Code metadata
View open-graph.html
<meta property="og:type" content="article" />
<meta property="og:title" content="Title of article" />
<meta property="og:description" content="Brief description of article…" />
<meta property="og:url" content="https://coywolf.pro/title-of-article/" />
<meta property="og:site_name" content="Coywolf Pro" />
<meta property="article:section" content="Paid Marketing" />
<meta property="og:image" content="https://coywolf.pro/img/social.jpg" />
<meta property="og:image:secure_url" content="https://coywolf.pro/img/social.jpg" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@coywolf" />
@henshaw
henshaw / topics.js
Created Jan 25, 2022
Google Topics API fetch example
View topics.js
// document.browsingTopics() returns an array of up to three topic objects in random order.
const topics = await document.browsingTopics();
// The returned array looks like: [{'value': Number, 'taxonomyVersion': String, 'modelVersion': String}]
// Get data for an ad creative.
const creative = await fetch('https://ads.example/get-creative', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
@henshaw
henshaw / index.html
Created Dec 10, 2021
Starter RSS email newsletter template for Campaign Monitor
View index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
body { background:#fff;color:#000;padding:1em;margin:0 auto;max-width:600px;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif; }
h2 { font-size:130%;margin: 2rem 0 0 0; }
main p { margin-top:.5rem; }
footer { font-size:80%;color:#666;margin-top:5rem; }
@henshaw
henshaw / del-ins.html
Created Dec 9, 2021
Delete and Insert HTML elements
View del-ins.html
<p>You are a very <del>stinky</del><ins>malodourous</ins> person.</p>
@henshaw
henshaw / bookmark.html
Created Dec 9, 2021
Bookmark link example
View bookmark.html
<p><a href="https://coywolf.pro/glossary/#html-def">HTML</a> is the the language that makes web pages interactive.</p>
@henshaw
henshaw / dfn-glossary.html
Created Dec 9, 2021
Definition element for glossary example
View dfn-glossary.html
<p><dfn id="html-def">HTML</dfn> is the standard markup language for creating web pages.</p>
@henshaw
henshaw / dfn.html
Created Dec 9, 2021
Definition HTML element example
View dfn.html
<p>A <dfn>microphone stand</dfn> is a free-standing mount for a microphone. It allows the microphone to be positioned in the studio, on stage or on location without requiring a person to hold it.</p>
@henshaw
henshaw / dl.html
Created Dec 9, 2021
Definition List HTML example
View dl.html
<dl>
<dt><dfn>Apartment</dfn>, n.</dt>
<dd>An execution context grouping one or more threads with one or more COM objects.</dd>
<dt><dfn>Flat</dfn>, n.</dt>
<dd>A deflated tire.</dd>
<dt><dfn>Home</dfn>, n.</dt>
<dd>The user's login directory.</dd>
</dl>