Skip to content

Instantly share code, notes, and snippets.

@cferdinandi
cferdinandi / drive.html
Created July 2, 2024 16:11
Can you customize Web Components without a framework!? Tutorial here: https://youtu.be/OAfoK5MTS5Q
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pick at Random</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="pick-at-random.css">
</head>
@cferdinandi
cferdinandi / index.html
Created June 25, 2024 16:14
Can you build a modern web app using only vanilla Web Components in 2024? Watch part 2 tutorial on YouTube: https://youtu.be/6pttzPPtiFA
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pick at Random</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
@cferdinandi
cferdinandi / index.html
Last active June 20, 2024 17:00
Can you build a modern web app using only vanilla Web Components in 2024? Watch the tutorial on YouTube: https://youtu.be/2S4-42vjZwY
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Pick at Random</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
@cferdinandi
cferdinandi / index.html
Last active June 11, 2024 16:01
How to build a show-hide Web Component. Watch the tutorial: https://youtu.be/HgI03y6DYoI
<!DOCTYPE html>
<html>
<head>
<title>Show/Hide</title>
<style type="text/css">
body {
margin: 1em auto;
max-width: 30em;
width: 88%;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My First Web Component</title>
<style>
body {
margin: 1em auto;

Ceasefire Script: Palestine

Want to call your US Senators and Represenatives and urge them to do more to stop the genocide in Palestine?

Here's a script you can you use.

  1. Look up your congress members here: https://www.congress.gov/members/find-your-member
  2. Call them on the numbers listed, and read the script below.

Script

@cferdinandi
cferdinandi / preact.html
Created October 16, 2023 15:40
Reef vs. Preact Performance Test - https://reefjs.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Preact</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Event Delegation</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin: 1em auto;
@cferdinandi
cferdinandi / index.html
Created September 12, 2023 02:09
Two-way data-binding and reactivity. https://gomakethings.com/sotb/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Data Binding</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin: 1em auto;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Web Components</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin: 0 auto;