Skip to content

Instantly share code, notes, and snippets.

View cferdinandi's full-sized avatar

Chris Ferdinandi cferdinandi

1.8k followers · 2 following
View GitHub Profile
@cferdinandi
cferdinandi / index.html
Created January 21, 2025 04:25
https://gomakethings.com/how-would-you-share-state-between-web-components/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ecomerce Platform</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
@cferdinandi
cferdinandi / index.jquery.html
Last active January 13, 2025 17:52
Watch the tutorial for this source code at https://www.youtube.com/watch?v=TnQ0ooEMRqc
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Lettering.js Examples</title>
<meta name="description" content="A jQuery Plugin that allows you to style each individual letter and more.">
<meta name="author" content="Dave Rupert">
@cferdinandi
cferdinandi / index.html
Last active December 23, 2024 14:55
Source code for this article: https://gomakethings.com/testing-dom-manipulation/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Mocha Tests</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/mocha/mocha.css" />
</head>
<body>
<div id="mocha"></div>
@cferdinandi
cferdinandi / calculator.js
Last active January 1, 2025 18:10
Source code for https://gomakethings.com/dont-test-implementation-details/
const calculator = (function () {
/**
* Remove non-numeric strings from the array
* @param {Array} nums The original array
* @return {Array} The cleaned array
*/
function cleanNumbers (nums) {
let cleaned = [];
for (let num of nums) {
@cferdinandi
cferdinandi / calculator.js
Created December 13, 2024 16:10
Read the article for this code at https://gomakethings.com/tdd-for-javascript-with-buildless-mocha-and-chai/
const calculator = (function () {
/**
* Add two or more numbers together
* @param {...Numbers} nums The numbers to add together
* @return Number The total
*/
function add (...nums) {
let total = 0;
for (let num of nums) {
@cferdinandi
cferdinandi / calculator.js
Created December 12, 2024 16:25
The lesson for this code can be found at https://gomakethings.com/organizing-javascript-tests/
const calculator = (function () {
/**
* Add two or more numbers together
* @param {...Numbers} nums The numbers to add together
* @return Number The total
*/
function add (...nums) {
let total = nums.length ? nums.shift() : 0;
for (let num of nums) {
@cferdinandi
cferdinandi / calculator.js
Created December 6, 2024 19:52
Buildless testing proof-of-concept - ESM version https://gomakethings.com/buildless-testing/
/**
* Add two or more numbers together
* @param {...Numbers} nums The numbers to add together
* @return Number The total
*/
function add (...nums) {
let total = nums.length ? nums.shift() : 0;
for (let num of nums) {
if (Number.isNaN(num)) continue;
total = total + num;
@cferdinandi
cferdinandi / calculator.js
Last active December 11, 2024 14:14
Buildless testing proof-of-concept - IIFE version https://gomakethings.com/buildless-testing/
/**
* Add two or more numbers together
* @param {...Numbers} nums The numbers to add together
* @return Number The total
*/
function add (...nums) {
let total = nums.length ? nums.shift() : 0;
for (let num of nums) {
if (Number.isNaN(num)) continue;
total = total + num;
@cferdinandi
cferdinandi / code-sandbox.css
Created December 3, 2024 21:09
YouTube tutorial: https://youtu.be/mFvC5TVZEP8
/**
* @section General Code Styles
*/
code,
kbd,
pre,
samp {
font-family: Menlo, Monaco, "Courier New", monospace;
font-size: 0.875em;
@cferdinandi
cferdinandi / index.html
Created November 22, 2024 21:28
Progressively Enhanced Web Components. Watch the tutorial: https://youtu.be/Ir70eirsVJ4
<!DOCTYPE html>
<html>
<head>
<title>Toggle Password</title>
<style type="text/css">
body {
margin: 1em auto;
max-width: 30em;
width: 88%;