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 October 23, 2024 16:33
How to extend a Web Component with Custom Events. Watch the tutorial here: https://youtu.be/fCXUwkei0uk
<!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
Created October 7, 2024 17:53
My ConvertKit newsletter template...
<style>
#message-content {
margin: 0;
padding: 0 18px 10px;
max-width: 640px;
}
#message-content img {
max-width: 100%; height: auto;
}
#message-footer {
@cferdinandi
cferdinandi / README.md
Created October 7, 2024 17:39
A PHP endpoint for posting to Bluesky

Bluesky PHP endpoint

A PHP endpoint for posting to the Bluesky API.

On Bluesky...

  1. Click Settings.
  2. Click App Passwords.
  3. Click the Add App Password button.
  4. Give it a name, then click Create App Password.
@cferdinandi
cferdinandi / resume-structure.md
Created September 28, 2024 14:47
https://leanwebclub.com

Resume Structure

There are two different ways to structure a resume:

  1. Chronological
  2. Project-Based

A chronological resume focuses on the places you've worked. Right after your Summary of Qualifications, you include a reverse-chronological list of places you've worked, including your job title, summary of your work, and some bullet points with key tasks and outcomes.

Job Title, Company Name, Start Date - End Date

@cferdinandi
cferdinandi / index.html
Created September 24, 2024 17:05
Video tutorial: https://youtu.be/xopiDHsNXtQ
<!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 / react.html
Created July 31, 2024 16:46
Can I add state-based UI to a Web Component? Watch at https://youtu.be/yBENeFs_dKs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Tick Tac Toe | React</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: sans-serif;
@cferdinandi
cferdinandi / index.html
Created July 31, 2024 14:11
Appending content inside the constructor() of a Web Component.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Web Component Example</title>
<style>
body {
margin: 1em auto;
@cferdinandi
cferdinandi / index.html
Created July 12, 2024 16:27
Light + Shadow DOM together... https://gomakethings.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Basic Setup</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
margin: 0 auto;
@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 {