Skip to content

Instantly share code, notes, and snippets.

View cferdinandi's full-sized avatar

Chris Ferdinandi cferdinandi

1.9k followers · 2 following
View GitHub Profile
@cferdinandi
cferdinandi / terminal-cheat-sheet.txt
Last active June 18, 2025 18:33
Terminal Cheat Sheet
# Terminal Cheat Sheet
pwd # print working directory
ls # list files in directory
cd # change directory
~ # home directory
.. # up one directory
- # previous working directory
help # get help
-h # get help
@cferdinandi
cferdinandi / htaccess
Created May 13, 2025 14:01
Gzip setup for .htaccess, taken from the old HTML5 Boilerplate template
# ----------------------------------------------------------------------
# | Compression |
# ----------------------------------------------------------------------
<IfModule mod_deflate.c>
# Force compression for mangled `Accept-Encoding` request headers
# https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html
<IfModule mod_setenvif.c>
@cferdinandi
cferdinandi / share-wc.css
Created May 28, 2025 16:59
Watch the tutorial: https://youtu.be/1WFM4j1Q2wE
/**
* Don't show button until JavaScript is instantiated
*/
share-me:not(:defined) {
display: none;
}
/**
* Visually hide an element, but leave it available for screen readers
* @link https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css
@cferdinandi
cferdinandi / accordion-group.css
Created June 3, 2025 16:11
Watch this tutorial: https://youtu.be/2k-iYzWZu2w
accordion-group {
background-color: #f7f7f7;
border-radius: 0.25em;
display: block;
margin-block-end: 1.5em;
padding: 0.5em 1em;
width: 100%;
}
accordion-group [accordion-trigger] {
@cferdinandi
cferdinandi / code-sandbox-with-highlighting.html
Last active May 29, 2025 15:15
https://gomakethings.com/how-to-add-syntax-highlighting-to-code-as-a-user-types-in-realtime-with-vanilla-javascript/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Code Sandbox</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*,
@cferdinandi
cferdinandi / index.html
Created April 1, 2025 18:01
Watch the tutorial on YouTube: https://youtu.be/v-3O0MCl41k
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Toast Library</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
@cferdinandi
cferdinandi / index-bs.html
Last active May 13, 2025 04:47
Watch the tutorial at https://youtu.be/_gZjjg0xu9A
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-SgOJa3DmI69IUzQ2PVdRZhwQ+dy64/BUtbMJw1MZ8t5HZApcHrRKUc4W0kG879m7" crossorigin="anonymous">
<style type="text/css">
body {
margin: 1em auto;
@cferdinandi
cferdinandi / 1-scroll.html
Created May 7, 2025 03:16
Watch the tutorial: https://youtu.be/Kws6l0Rp1Yg
<!DOCTYPE html>
<html>
<head>
<title>Smooth Scroll</title>
<style type="text/css">
body {
margin: 1em auto;
max-width: 30em;
width: 88%;
@cferdinandi
cferdinandi / count-up-display.js
Created March 12, 2025 15:56
Watch the tutorial for this code: https://youtu.be/Ap26IwDVOV8
customElements.define('count-up-display', class extends HTMLElement {
/**
* The class constructor object
*/
constructor () {
// Gives element access to the parent class properties
super();
@cferdinandi
cferdinandi / attribute-utilities.css
Last active April 15, 2025 18:06
Watch the tutorial: https://youtu.be/kKdH6QLQGFk
.button-favorites[aria-pressed="true"] {
background-color: #ff4136;
border-color: #ff4136;
color: #ffffff;
}