Skip to content

Instantly share code, notes, and snippets.

Chris Ferdinandi cferdinandi

Block or report user

Report or block cferdinandi

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@cferdinandi
cferdinandi / localStoragePerformanceTest.html
Last active Jun 3, 2019
Testing localStorage performance
View localStoragePerformanceTest.html
<!DOCTYPE html>
<html>
<head>
<title>localStorage Performance Test</title>
</head>
<body>
<script>
// Number of items to store
var count = 10000;
View routing-and-spas.md

If you build a JavaScript app with more than one page or view, you'll probably need a way to determine which UI or layout to show based on the URL. That's routing.

The problem with single-page apps

Single-page apps (or SPAs as they're sometimes called) serve all of the code for an entire multi-UI app from a single index.html file.

They use JavaScript to handle URL routing with real URLs. For this to work, you need to:

  1. Configure the server to point all paths on a domain back to the root index.html file. For example, todolist.com and todolist.com/lists should both point to the same file.
  2. Suppress the default behavior when someone clicks a link that points to another page in the app.
@cferdinandi
cferdinandi / performance.html
Last active May 21, 2019
Testing DOM injection performance with a few different techniques. https://gomakethings.com/testing-dom-injection-performance-with-vanilla-js/
View performance.html
<!DOCTYPE html>
<html>
<head>
<title>DOM Injection Performance Testing</title>
</head>
<body>
<div id="app1"></div>
<ul id="app2"></ul>
View code.css
/**
* @section Code
* Styling for code and preformatted text.
*/
code,
kbd,
pre,
samp {
font-family: Menlo, Monaco, "Courier New", monospace;
@cferdinandi
cferdinandi / who-is-driving-refactor.html
Created Jan 30, 2019
A refactor of the vanilla JS Who's Driving app.
View who-is-driving-refactor.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Who should drive?</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Styles -->
<style type="text/css">
@cferdinandi
cferdinandi / rss-to-email.html
Created Jan 24, 2019
My RSS => Email template for MailChimp. This is designed to be as close to plain text as possible, with some light styling for syntax highlighting powered by Hugo and Chroma.
View rss-to-email.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!-- This is a simple example template that you can edit to create your own custom templates -->
<!--[if gte mso 15]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG />
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
@cferdinandi
cferdinandi / README.md
Created Jan 17, 2019
GitHub repo project template from https://learnvanillajs.com.
View README.md

Project Details

Use the GitHub API to get a list of repositories for a user and list them on a web page.

Bonus: Display the last three commits for each repository below it.

Considerations

  • How many repositories will you list? All of them, or a just the last few?
@cferdinandi
cferdinandi / README.md
Created Jan 17, 2019
Find a Pet app project template from https://learnvanillajs.com.
View README.md

Project Details

Use the Petfinder API to get a list of available pets from a shelter and display them on a web page.

Bonus: Dynamically create filters for things like age, gender, breed, and type of animal, and let users filter out pets that don't match their criteria.

Quick heads up: The Petfinder API is buggy and poorly maintained, so you may run into some hiccups along the way.

Considerations

@cferdinandi
cferdinandi / README.md
Last active Apr 27, 2019
Monsters! game project template from https://learnvanillajs.com.
View README.md

Project Details

Build a game inspired by the movie Monsters, Inc. and loosely based on the old PC game Minesweeper.

Create a three-by-four grid of 12 doors. When the user clicks a door, they'll find one of their monster friends. But behind one door is a human sock. These are dangerous and should be avoided at all costs. Finding it means you lose the game.

If the user finds all 11 monster friends without stumbling onto the sock, they win!

Note: SVG files for the monsters, sock, and door have been included for you.

@cferdinandi
cferdinandi / README.md
Created Jan 17, 2019
Randomize app project template from https://learnvanillajs.com.
View README.md

Project Details

Write an app that randomly picks an option for a list of choices. Users should be able to add and delete items from the list.

Bonus: Save the list between sessions.

Considerations

  • Can users edit items in the list, or only add and delete them?
  • How will you choose a random item from the list?
You can’t perform that action at this time.