Skip to content

Instantly share code, notes, and snippets.

Chris Ferdinandi cferdinandi

View GitHub Profile
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 Jan 17, 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?
@cferdinandi
cferdinandi / README.md
Created Jan 16, 2019
Todo list app project template from https://learnvanillajs.com.
View README.md

Project Details

Write a todo list app. Users should be able to create lists, add items to each one, and mark items as complete.

Considerations

  • How will you store items and associate them with different lists?
  • How will you manage routing for the different UIs?
  • Can users edit or delete items, or only mark them as complete?
@cferdinandi
cferdinandi / README.md
Created Jan 16, 2019
Countdown timer app project template from https://learnvanillajs.com.
View README.md

Project Details

Write an app that counts down to 0 from a time (say, five minutes).

Considerations

  • How frequently should you update the UI as you countdown?
  • How do you format the time?
  • What happens when the timer hits 0?
@cferdinandi
cferdinandi / README.md
Created Jan 16, 2019
Mirror text project template from https://learnvanillajs.com.
View README.md

Project Details

Write a script that shows content typed into the textarea#content field in the #preview-content element.

Bonus: Convert the content from markdown to HTML using an open source plugin like MarkedJS.

Considerations

  • How do you handle line breaks?
  • How can you structure the script to support additional fields without having to change the code?
You can’t perform that action at this time.