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
View core.js
// The core app code
var myApp = (function () {
'use strict';
// Create a public methods object
var methods = {};
/**
* Extend the public methods object
View 1.html
<!DOCTYPE html>
<html>
<head>
<title>1 | Safari Bug</title>
<style type="text/css">
body {
margin: 0 auto;
max-width: 40em;
width: 88%;
View 1.html
<!DOCTYPE html>
<html>
<head>
<title>1 | Safari Bug</title>
<style type="text/css">
body {
margin: 0 auto;
max-width: 40em;
width: 88%;
@cferdinandi
cferdinandi / .eslintrc.js
Last active Aug 5, 2019
My ESLint config (work-in-progress)
View .eslintrc.js
module.exports = exports = {
"env": {
"browser": true,
"es6": true,
},
"plugins": ["es"],
"extends": "eslint:recommended",
@cferdinandi
cferdinandi / recruiter.md
Created Aug 2, 2019
Was I too harsh here?
View recruiter.md

Recruiter Email:

We have reached out to you in the past and wanted to make sure you didn't miss this opportunity with [REDACTED]. We take pride in building a strong culture and making work a place you love to be every day, especially since we spend so much of our lives doing it!

At [REDACTED] we are committed to providing you with a job you love doing everyday and take pride in making sure you are home for dinner. We ask that you come on-site 2 days a week and you can work remotely the rest of the time. However, you might want to come in anyways! Every new team member gets a $500 slush fund towards enhancing the office/workspace (we have 3D printers!), game nights, and team trips. For example, the team is heading to Amsterdam this year!

I would love to tell you more about what we can offer you. When do you have 10-15 minutes to talk?

My Response:

View selectorPerformanceTest.html
<!DOCTYPE html>
<html>
<head>
<title>localStorage Performance Test</title>
</head>
<body>
<ul id="app"></ul>
<script>
View selectorPerformanceTest.html
<!DOCTYPE html>
<html>
<head>
<title>localStorage Performance Test</title>
</head>
<body>
<ul id="app"></ul>
<script>
@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>
You can’t perform that action at this time.