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 / classes.html
Created June 12, 2023 16:29
https://youtu.be/m4Km0ZxFHvc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Classes</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
@cferdinandi
cferdinandi / code-sandbox-with-highlighting.html
Last active August 31, 2023 15:31
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 / web-servers.md
Created April 29, 2020 12:36 — forked from willurd/web-servers.md
Big list of http static server one-liners

Each of these commands will run an ad hoc http static server in your current (or specified) directory, available at http://localhost:8000. Use this power wisely.

Discussion on reddit.

Python 2.x

$ python -m SimpleHTTPServer 8000
@cferdinandi
cferdinandi / completed.html
Last active August 26, 2023 02:21
Learn the basics of vanilla JavaScript is about 10 minutes. Watch the video at https://www.youtube.com/watch?v=IQn_up6ZUkk, and grab more vanilla JS resources at https://gomakethings.com.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Learn Vanilla JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<style type="text/css">
@cferdinandi
cferdinandi / extend.js
Last active August 17, 2023 23:26
A native JS extend() function.
/**
* Merge defaults with user options
* @private
* @param {Object} defaults Default settings
* @param {Object} options User options
* @returns {Object} Merged values of defaults and options
*/
var extend = function ( defaults, options ) {
var extended = {};
var prop;
@cferdinandi
cferdinandi / index.html
Created March 11, 2021 21:56
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Monster flip card</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
@cferdinandi
cferdinandi / completed.html
Created June 8, 2023 15:28
https://gomakethings.com/how-to-test-if-all-characters-in-a-string-a-unique-with-vanilla-javascript/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>isUniqueString()</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
@cferdinandi
cferdinandi / template.html
Last active June 8, 2023 15:07
https://gomakethings.com/how-to-test-if-all-characters-in-a-string-a-unique-with-vanilla-javascript/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>isUniqueString()</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
@cferdinandi
cferdinandi / diy-jquery.html
Last active June 5, 2023 17:02
https://www.youtube.com/watch?v=5YZwN7eJUdo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery => Vanilla JS</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
@cferdinandi
cferdinandi / completed.html
Created June 5, 2023 14:55
https://gomakethings.com/how-to-reverse-each-word-in-a-string-with-vanilla-javascript/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Secret Message</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>