Skip to content

Instantly share code, notes, and snippets.

View vanderhoop's full-sized avatar

Travis Vander Hoop vanderhoop

View GitHub Profile
@vanderhoop
vanderhoop / datadog_core_web_vitals_plus_custom_metric_example.json
Last active June 24, 2022 20:25
JSON starter for tying core web vitals to a custom metric in a DataDog time series visualization
{
"viz": "timeseries",
"requests": [
{
"style": {
"palette": "dog_classic",
"type": "solid",
"width": "thick"
},
"type": "line",

The TMNT Villain Collection

You just learned some of the incredible magic and utility of Backbone Collections. Now it's your turn to put them to practical use.

Directions

  1. Create a Backbone Model called VillainModel
  • Provide the VillainModel with defaults (set to null) for the following attributes
    • id
  • name

Backbone Model Rep

You just learned the magical AJAX-y ease of working with a Backbone model. Now it's your turn to implement a backbone model that you can persist.

Directions

  1. Use Backbone.Model.extend() to create a new constructor function called FootSoldier.
  • Note: there are a number of FootSoldier's in the database. For now, let's assume we're only interested in the FootSoldier with id of 1.
  1. Using your new constructor function, instantiate the FootSoldier.
  2. Use Backbone's convenient .fetch() to retrieve the FootSoldier's data via ajax.

Tinder Templating Continued

Directions

  1. Create a template that generates html in the format below, but allowing for dynamic values to be inserted for the img tag's src attribute, as well as the text of the span tag:
<div class="match clearfix">
  <img src="http://api.randomuser.me/portraits/women/2.jpg" alt=""><span>Sarana</span>
var movies = [
  { title: "Chef", imgURL: "http://cdn5.nflximg.net/webp/9665/11949665.webp" },
  { title: "House of Cards", imgURL: "http://cdn7.nflximg.net/webp/7677/11747677.webp" },
  { title: "His Girl Friday", imgURL: "http://cdn0.nflximg.net/images/0030/2210030.jpg" },
  { title: "Chinatown", imgURL: "http://cdn0.nflximg.net/images/3158/11143158.jpg" },
  { title: "What's Eating Gilbert Grape?", imgURL: "http://cdn9.nflximg.net/webp/1459/8191459.webp" },
  { title: "Robocop (1987)", imgURL: "http://cdn6.nflximg.net/webp/0456/8730456.webp" }
];

Weather Vain Inc.

The year is 2005, and a new technique called AJAX is making waves in the global web development community. It seems this AJAX thing allows developers to use JavaScript to fire off HTTP requests that send and retrieve new information without ever reloading the page.

WeatherVain Inc. is ultra intrigued by AJAX, as they think it will allow users to consume the OpenWeatherMap API to display up-to-date weather information about a given city. You've been tasked with validating their idea.

Directions

  1. Head to the OpenWeatherMap API, and validate that it can be used to retrieve the current weather conditions of a given city.
  2. What data types does the API serve?

Puppy Parallax Process

Answer the questions below in the order they appear:

  1. What DOM node do you want to add a 'scroll' event listener to?
  • Answer: the window object
  1. How can you ensure your 'scroll' event listener is firing?
  • Answer: add a console.log to the event listener's callback function
  1. How can you determine how far the user has scrolled?
  • Answer: $(window).scrollTop(); returns an integer

Get Normalized

Peter Lai thinks you've done a great job on the shopping_db database, but now he wants you to normalize our data, ie split the repetitive parts into their own tables.

Directions

  1. Within shopping_db, create a table, stores for holding your store data. Each store should have:
  • an auto-incrementing primary key of id
  • a name attribute
  • a slogan attribute

CREATING and READING in PSQL

You just learned how to insert (create) records into a table, and how to select (read) records using structured query language. Because these skills are so fundamental, you have been tasked with adding

Exercise Objective

  • build muscle memory for creating and reading records in SQL

Directions

  1. Insert a student into the students table.