We live in the age of the API. Data is (for better or worse) a commodity, and it's big business to offer data as a service via APIs. Even still, some useful data just isn't available online via a developer-friendly API.

Let's say there's a website with some useful data on it. Maybe it's the hours of a restaurant, a list of products, or the latest breaking news. This site doesn't have a traditional API, but then again, what is HTTP? We ask for a page, and get an HTML response. That's practically an XML API right there! We may just have a way to get that data with a program after all.

Finding information in HTML is easy when you're in a browser — the contents of an element are one document.querySelector away, and if you're using jQuery, it's as easy as $, with extra tools to boot! We are off to the races.

One more snag awaits us. Because of the web's strict same-origin policy, we (reasonably, yet irritatingly) can't just fetch the contents of another web page from our page without permission. We know that node (or even curl) for that matter would have no problem, so we can code up a little server that fetches the page for us. But node doesn't know how to parse HTML, and even if it did, where's my snazzy jQuery for slicing and dicing the results!

📦 cheerio's npm listing
📖 cheerio documentation

Let's for the moment pretend this site dosn't have an RSS feed (it totally does). I'd love to get a list of the latest posts for display in a widget. Okay, no RSS, but what does the HTML look like?

Clean and easy to read! I see a flat container zine-items, full of zine-item elements. A zine-item looks something like this.

<a href="/culture/the-web-is-30-hbd/" class="zine-item">
    <div class="mask-container">
      <img class="zine-item-mask mask mask-1 mask-3" src="...">
    </div>
  <div class="zine-item-meta">
    <h1 class="zine-item-title">
      The Web Is 30. Whether That's Young or Old Is up to Us.  
    </h1>
    <p class="zine-item-tag">
      On the Blog
    </p>
  </div>
</a>


We've got the URL of the post, the title of the post, and some category metadata. Now we know what we're looking for, we can deploy cheerio!

Here's the full working demo. Feel free to click around- we'll break it down below.

We're demoing this library by building a tiny app that grabs posts from the Glitch Culture Zine. The app is based on the basic express starter, with the addition of request to assist with fetching data from a URL, and of course cheerio. We're serving a minimal HTML page, with a script that fetches data from our server at the URL /glitch-culture. I'm not going to go too deep into the client side; after fetching the list of posts, we're just making some list items and populating them with data.

The core of our example is in server.js, specifically the handler for app.get('/glitch-culture'). When the client requests this URL, the following happens:

let $ = cheerio.load(body); 
let itemElements = $('.zine-item');
let itemList = [];

for (let i = 0; i < itemElements.length; i++) {
  let item = itemElements.eq(i);

  let title = item.find('.zine-item-title').text().trim();
  let tag = item.find('.zine-item-tag').text().trim();

  let url = item.attr('href');

  itemList.push({
    title, tag, url
  });
}


Fetch the HTML: we use the request library to fetch the HTML from https://glitch.com/culture/, and we receive it in a callback function.

Load the HTML into cheerio: Unlike jQuery in the browser, where $ is just available, on the server we need to tell cheerio what $ is even searching. To do this, the HTML response is fed into cheerio.load, and for familiarity's sake, the loaded document is saved to a variable named $. After this point, we can query the HTML as if it was in a jQuery-enabled page!

Grab the list of zine-items: This is pure classic jQuery-style querying – $('.zine-item') gets us our list.

Extract the information from each item: The title and metadata were text inside an element, so .text() gets us that. The URL comes from the href attribute on the item link, so that calls for .attr('href')

Send the list as JSON: Express provides the handy response.json() method, which we provide with our extracted data:

[
  {
    title: "Episode 286: Alanna Marshall",
    tag: "Revision Path",
    url: "/culture/revisionpath-alanna-marshall/"
  },
  {
    title: "Make Your Data Work for You With CSV Parsing",
    tag: "Starter App",
    url: "/culture/make-your-data-work-for-you-with-csv-parsing/"
  },
  // and so on
]


The starter app uses cheerio to convert some HTML into JSON, but once you've got the data, the power is yours! Remix the app and build your own page scraper. Why not monitor prices on your favorite online store? Liberate data trapped in HTML tables! Watch for sneaky changes to your senator's Wikipedia page! Scraping is the "first API", and cheerio makes it easy.

Screen scraping is super useful, but not all website owners love the idea of people grabbing the information off their pages. It's always a good idea to check a website's terms and conditions before running any automatic scrapers against their content, to be sure you're not getting yourself on someone's naughty list. Also, remember to be polite! If you're requesting data off a website repeatedly, you could be overwhelming ther server or slowing the site down for other visitors.

Scrape the Data You Need with Cheerio!

d3-dsv is a JavaScript library for parsing and serializing CSV files. In the case of this library, "parsing" means "convert this CSV to JSON format" and serialize means "convert this JSON to CSV." In the case of this app, we are using the parsing portion to turn a CSV into JSON, where we can then transform and analyze the data further.

For the d3-dsv Starter App, we created a tool that will parse an input CSV (a file from the user's machine) and provide a few basic transforms/analyses. The output from the main d3-dsv parsing function is an array of JSON objects, each one representing a row in the CSV. From there, this app can do several things with the input data: it can count the rows in the CSV, it can list the fields in the CSV, and it can sort the resulting JSON by selected field.

In the next section, we describe how the code in this app works. Feeling comfortable with the app? Skip down to "" section!

The code powering this app is in index.html, style.css, and script.js.

index.html contains the initial scaffolding of the app -- the main structure for the elements on the page. (Note: other page elements will be added later via JavaScript in script.js, but we can place the elements we know we want to be on the page when it loads directly into index.html.)

The <head> section of index.html imports a few files that will be needed to make the app work: style.css for styling, script.js for the app functionality, and d3-dsv (d3-dsv.v1.min.js) for CSV parsing.

<link rel="stylesheet" href="/style.css">

<script src="/d3-dsv.v1.min.js"></script>

<script src="/script.js" defer></script>

The index.html <body> contains mostly-empty <div> elements. These are included for styling the data with CSS, which is contained in the style.css file (described below). The one additional thing we add in index.html is an input element for the CSV file upload -- this must be on the page at load time because adding a CSV file is what triggers the rest of the app!

style.css contains styling information for the page. In this app, the CSS includes styling for the JSON output (black background with white text), the "choose file" prompt, the buttons, and every other visible element you see on the page. The @media rule is a "media query" that collects some information and sets style rules based on that information. In this case, it changes the layout of the page based on how wide your browser window is so it looks good on both mobile or desktop.

@media (min-width: 768px) {
  .row {
    display: flex;
    width: 75%;
    height: 75%;
  }
}


The JavaScript in this app is  -- when an  fires on the page, it triggers a certain piece of code. When you check a box on a web page? A "click" event is fired. Pick from a dropdown menu? A "select" event is fired. In this app, where different things are happening to the data depending on what button is pressed, it makes sense to have individual functions that are triggered when an event happens on the page.

At the beginning of the file, we declare two variables: json and output. json does not get assigned a value and output is set to point to the json-output HTML element. These variables exist outside of the scope of of any function, so their values can be updated and/or shared across all of the functions. This is helpful for updating the json value when new files are added and for using output without typing document.getElementById('json-output') every time we want to access that element.

let json; // will hold the parsed JSON
let output = document.getElementById("json-output"); // for easy access to this element


The rest of the file contains a set of functions that are triggered by page events or are called from within other functions. The following table lists the names of the functions in this app, what they do, and what behavior triggers or calls them.

In the very last line in the file, we add an event listener to the <input> element -- on a "change" event, call loadFile(). The "change" event happens when the user selects a CSV file.

document.getElementById("input").addEventListener("change", loadFile);


When the loadFile() function is called, the "change" event itself (represented by an object) is passed into the function as a parameter. This is especially useful for us, because information about the file that was loaded is included in the event object. Once we have the file, we can make sure it's actually a CSV.

// this function is called when a "change" event happens on the "input" element in the HTML
function loadFile(event) {
  output.innerHTML = ""; // make sure to clear the output when getting a new file
  let file = event.target.files[0]; // the "change" event itself gets passed to this function
  
  // make sure the file is a CSV
  if (file.type !== "text/csv") {
    printToOutput("This app can only take CSV files!");
    return; // stop trying to do the other stuff in this function
}


Once the file is good to go, we use the FileReader to read the file in the browser. We define an  to be called when our instance of FileReader reads the file, and inside the file we parse the CSV data to JSON with d3-dsv, call printToOutput with that parsed JSON, and call addButtons() to add additional operations to the page (count rows, get fields, sort by).

// read the file with FileReader
  const reader = new FileReader();
  reader.onload = function(e) {
    // this function is called when the reader reads the file
    // use d3-dsv to parse the CSV
    json = d3.csvParse(e.target.result, d3.autoType); // see https://github.com/d3/d3-dsv#autoType
    printToOutput(JSON.stringify(json, null, 4));
    addButtons();
  };
  // reader reads the text of the file, triggering the "onload" function
  reader.readAsText(file);
} // the end of loadFile()


This function uses d3-dsv via d3.csvParse() to transform the CSV into JSON. d3.csvParse() takes two parameters: the CSV string to be transformed, and an optional function to do something special when transforming. In this case, we use  as the second argument. This is a special function provided by d3-dsv that will try to automatically infer the value type for each field and coerce that value in each row. For example, if there is a Year value in the data with values "2017", "2018", and "2019", using d3.autoType will coerce those values to 2017, 2018, 2019.

For more detailed information on each of the callback functions, see the code comments in the project.

Our challenge to you is to take the d3-dsv starter app and extend it to do a few extra things:

Add a toggle to sort the data by field ascending instead of descending (currently the code only sorts descending)

Add a function to "pivot" an input CSV when the rows and columns are flipped in the data (example "flipped" dataset) – be sure to add a button and an event handler that calls the function!

Update the app to accept  kind of delimiter-separated values (semicolons, tabs, etc.) instead of just CSV

Update the app to pull data from an API in addition to adding a local file

After you've made the app your own, submit it using the form below. Please send us a link even if you couldn't get it to work or it's not your favorite thing — we want to see it!

Make it your own using the suggestions above

See your super cool work highlighted on the live stream!

We can't wait to see what you make. If you have any questions or need help, reach out to us on Twitter @glitch or post your question in the support forums.

Make Your Data Work for You With CSV Parsing

The web just turned 30, and it's having a quarter-life crisis. But if it's having a quarter-life crisis at 30, the outlook for our future is bleak: The written word is thousands of years old. The printed word is nearly 600 years old. The web? The web, if it's going to be what we need it to be as a society, is barely a baby.

Since its invention in the bowels of a nuclear research laboratory in 1989, the web has changed dramatically.

It started open, and creative. You literally had to create it! Now we're surrounded by billion-dollar startups that want to do anything but let us actually be a part of the web. Instead, these companies want us to experience the web like we watch TV.

Take a look at the earliest webpage we know still exists, created by the web's creator Tim Berners-Lee:

Notice anything? It's simple. So simple that if you've never looked at the source code of a website before, you probably still have a sense of what's going on. But take a look at the code of your favorite social network now, and you'll see it's very different. It's complex. It's not user-friendly. And that means we're in the dark about our own future, and the future of our web.

If we're going to make sure that the web is for everyone, it helps to take a quick spin through the last 30 years:

GeoCities launched in 1994. Millions of people could express themselves online for the first time in an easy way. If you're a certain age, you probably remember it looking a little something like this:

The first "social" media was in full force by the end of the 90's. What was the social web like in 1999? If you don't remember, or just want a little trip down a LiveJournal rabbit hole, we went there:

Ten years later, people were finding each other to share code and ask questions about code. One thing led to another and JavaScript use skyrocketed.

At the very same time as the people who made the web were becoming closer, the web was actively becoming harder to make. It was becoming less open and less accessible. App stores and "walled garden" social networks kept users from tinkering or getting messy under the hood.

Here’s where we’re at: The web is 30 years old and it’s in crisis. So what do we do? We’re signing The Web Foundation's Contract for the Web, and we encourage you to do so too. It's a roadmap for building a web that can serve everyone as a public good. But that’s just the first step.

It’s up to us to take things into our own hands, to make sure that the web isn’t a thing that happens  us, to make sure that it’s something we create. At Glitch, we’re helping to power it, but the responsibility for creating the web we want is on you, too.

So take back some control of your social networks. Or start a new app yourself, even if you're brand new to coding.

The Web Is 30. Whether That's Young or Old Is up to Us.

Chart.js is a JavaScript library for making interactive charts and graphs. It provides tools for creating eight different types of charts with any data you want, each with a bunch of customizations to make them pretty, functional, and informative.

For our Chart.js Starter App, we created a bar chart and a pie chart showing population data by continent (courtesy Wikipedia).

The code powering this app is in three files: index.html, style.css, and script.js. These three files work together to create the interactive chart experience on the page.

index.html contains the scaffolding of the app — the main structure for the elements on the page. This includes a div element for each chart with an empty canvas element inside of it:

index.html also contains a link to the Chart.js library in the head section of the document. This link must be included in order to use any of the Chart.js functionality in our app.

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.bundle.js" defer></script>

style.css contains styling information for the page. This is where the purple border around the charts is defined as well as the positioning rules for the div elements that contain the charts.

canvas {
  border: 1px solid purple;
}

.chart-container {
  position: relative;
  height: 40%;
  width: 100%;
  max-width: 600px;
  margin: 10px;
}


script.js is where the chart logic lives. The file starts with a data variable that houses an object containing continents and their populations.

// create an object with world population data
const data = {
  'Africa': 1216,
  'Asia': 4436,
  'Europe': 738,
  'North America': 579,
  'Oceania': 39.9,
  'South America': 422
};


While it is common to store data in an object like this (with key-value pairs representing data points), sometimes a JavaScript library will require the data to be structured in a different way in order for it to do its job — in this case, make a chart. Chart.js expects the data to be broken into two arrays, or lists: a list of the "labels" for the data (the keys in the data object) and a list of the "data" associated with those labels (the values in the data object).

If we were to type out these arrays manually, it would look like this:

const continents = ['Africa', 'Asia', 'Europe', 'North America', 'Oceania', 'South America'];
const populations = [1216, 4436, 738, 579, 39.9, 422];


But instead of copy-pasting these arrays directly into the code, in this app we create them dynamically from the data object. This way, if the data changes in the future, the only thing that has to be updated is the data object and the arrays will automagically contain the correct information.

To create these arrays from the data object, we can use some of JavaScript's built-in functionality. Object.keys will return an array of the keys in an object — in this case, an array of continents names, which is what we want for continents. Then, we run a forEach loop over the continents array and add each continent's population value to a separate array called populations.

// create an array of continents to use as labels for the charts
const continents = Object.keys(data);
// now continents = ['Africa', 'Asia', 'Europe', 'North America', 'Oceania', 'South America']

// create an array of populations to use as data values by looping
// through the continents and adding each new value to the array
const populations = [];
continents.forEach((continent) => {
  populations.push(data[continent]);
});
// now populations = [1216, 4436, 738, 579, 39.9, 422]


Now that the data is in a good format, it's time to make some charts! For the first chart, we create a variable bar (but it could be called anything) and set it to target the HTML element where we want to place the chart. In this case, it's the canvas element with id barChart. Then we create a new Chart and tell it where it's going to live on the page by passing bar as the first parameter.

// initialize a chart and put it in the 'barChart' div
const bar = document.getElementById('barChart').getContext('2d');
const barChart = new Chart(bar, { /* ... */ });


barChart needs more information than just where it's supposed to go in the HTML to make the chart we want. The second parameter to Chart is an object that contains all of the options we want to be included in our chart. These include:

data -- an object containing the data for drawing the chart

The structure for this object is defined in the Chart.js documentation. Note that the value of an object can itself be another object!

In this chart, we want to specify the data to be visualized. Inside the data object, we set the value of labels to the continents array and define a dataset with populations as the data being charted. We also add styling information, like the color of the bars, the color of the borders, and how wide the borders should be. Lastly, we include options to make sure that the bar chart starts its y-axis at 0.

// initialize a chart and put it in the 'barChart' div
const bar = document.getElementById('barChart').getContext('2d');
const barChart = new Chart(bar, {
  type: 'bar', // make it a bar chart
  data: {
    labels: continents, // use the array of continents as labels
    datasets: [{
      label: 'Population (in millions)',
      data: populations, // use the array of populations to draw bars
      backgroundColor: 'rgba(255, 99, 132, 0.2)', // make the bars translucent red
      borderColor: 'rgba(255, 99, 132, 1)', // make the borders of the bars opaque red
      borderWidth: 1 // set the border width to 1 pixel
    }]
  },
  options: {
    // the y-axis should start at 0
    scales: {
      yAxes: [{
        ticks: {
          beginAtZero:true
        }
      }]
    },
  }
});


The last bit of script.js creates a pie chart, which is a similar process to creating a bar chart. Can you spot the differences?

// initialize a chart and put it in the 'pieChart' div
const pie = document.getElementById('pieChart').getContext('2d');
const pieChart = new Chart(pie, {
  type: 'pie', // make it a pie chart
  data: {
    labels: continents, // use the array of continents to label each 
    datasets: [{
      data: populations, // use the array of populations to draw pie slices
      // set each pie slice to a translucent color
      backgroundColor: [
        'rgba(255, 99, 132, 0.2)',
        'rgba(54, 162, 235, 0.2)',
        'rgba(255, 206, 86, 0.2)',
        'rgba(75, 192, 192, 0.2)',
        'rgba(153, 102, 255, 0.2)',
        'rgba(255, 159, 64, 0.2)'
      ],
      // set the border of each pie slice to the same color as the background
      // of the slice but opaque
      borderColor: [
        'rgba(255, 99, 132, 1)',
        'rgba(54, 162, 235, 1)',
        'rgba(255, 206, 86, 1)',
        'rgba(75, 192, 192, 1)',
        'rgba(153, 102, 255, 1)',
        'rgba(255, 159, 64, 1)'
      ],
      borderWidth: 1 // set border width to 1 pixel
    }]
  }
});


index.html is where we create the skeleton for what's going to appear on the page

style.css includes styling information for the page

script.js is where the data is defined and charts are created

Like all Glitch apps, you can remix the Chart.js Starter App and customize it to your heart's content. But for those of us who are just learning to code, it can be hard to get started — especially with a library we've never used before! That's where our challenge comes in.

We challenge you to a footrace... around the world!

Just kidding. Our challenge to you is to take the Chart.js starter app and give it your own personal spin. In particular, we are looking to see if you can do any of the following:

Replace the data in the starter app with data you find fun or interesting. (If you don't have a dataset in mind, check out Awesome Public Datasets to get some inspiration!)

Change the chart colors to match your favorite color palette — bonus points if you add a link to your color inspiration in the README!

Use the same data (populations by continent or your own) to create a different type of chart and add it to the page

Add custom chart behavior using Chart.js Configurations

If you have any questions or need help, reach out to us on Twitter @glitch or post your question in the support forums.

Feeling stuck? Fear not! Here are some tips and tricks to help you get started.

For this exercise, try to find simple data with just a few data points. More than 10 data points on either of these charts will make them hard to read!

You may have to convert your data from CSV to an object. For this project, there should be few enough data points that you can convert it manually by typing your data in the object format. If you want to automate the conversion process, you can do so by finding a CSV-to-JSON converter online.

To find some color inspiration, check out Color Hunt to see thousands of color palettes.

Get Started with Dataviz Using Chart.js

A new generation of headsets and sensors on our mobile phones are making virtual reality more accessible than ever. But learning how to create your own VR experiences can be tricky. We created the WebVR Starter Kit with Mozilla using A-Frame to walk you through creating your first VR experience, regardless of your prior coding experience.

By combining how-to videos with working code examples that you can remix, you can learn the theory and go straight to trying it out yourself.

To guide you, we’ve enlisted the help of WebVR experts: Jenn Schiffer, Director of Community Engineering at Glitch, melissa mcewen, Developer Education at Glitch, and Jake Loeterman, Software Engineer at Kickstarter.

Jenn and Melissa explain what WebVR is, when you might use it, and how you can create your own experiences with it. While Jake tells us about how he started using WebVR.

We take a look at how you can use A-Frame to create your own WebVR experiences. Using our 3D planetarium starter app, “starter-aframe”, we learn about the main components of a WebVR scene and Jake tells us how he goes about planning his own scenes.

We show you how to add assets like 3D models to your scenes and introduce you to the A-Frame inspector to experiment with updating your scene without code. While Jake tells us about the cool things he’s used in his own WebVR creations.

We explain how animation works in A-Frame using mix-ins by showing you how we made the planets orbit the Sun in our example app, “starter-aframe-animated”.

We suggest some more advanced things, like using JavaScript in your scenes, that you can try out once you’ve mastered the basics.

To learn more, check out the A-Frame Docs. If you get stuck, just raise your hand.

Learn to create VR experiences with the WebVR Starter Kit

A new generation of headsets and sensors on our mobile phones are making virtual reality more accessible than ever. But learning how to create your own VR experiences can be tricky. We created the WebVR Starter Kit with Mozilla using A-Frame to walk you through creating your first VR experience. By combining how-to videos with working code examples that you can remix, you can learn the theory and go straight to trying it out yourself.

WebVR Starter Kit. Part 1: Intro to WebVR

WebVR Starter Kit. Part 2: A-Frame Starter

We take a look at how you can use A-Frame to create your own WebVR experiences. Using our 3D planetarium starter app, "starter-aframe", we learn about the main components of a WebVR scene and Jake tells us how he goes about planning his own scenes.

Try it out re-using the app featured in this video:  

WebVR Starter Kit. Part 3: A-Frame Concepts

We show you how to add assets like 3D models to your scenes and introduce you to the A-Frame inspector to experiment with updating your scene without code. While Jake tells us about the cool things he's used in his own WebVR creations.

WebVR Starter Kit. Part 4: A-Frame Animation

We explain how animation works in A-Frame using mix-ins by showing you how we made the planets orbit the Sun in our example app, "starter-aframe-animated".

WebVR Starter Kit. Part 5: Extending A-Frame

We suggest some more advanced things, like using JavaScript in your scenes, that you can try out once you've mastered the basics.

Jenn Schiffer - Director of Community Engineering, Glitch

Melissa McEwen - Developer Education, Glitch

Jake Loeterman - Software Engineer, Kickstarter

An Intro to WebVR

Adam Savage is BACK and on the case with his six  co-hosts for the three hour finale of MythBusters Jr on Wednesday, Feb 6  at 8p on SCIENCE

MythBusters Jr    Space Special

"In space, no one can hear you scream." True or False?

Adam and the MBJr's set out to test this famous tagline from the 1979 sci-fi classic  — does sound transmit in the vacuum of space? With “vacuum” being the key here, the MBJr’s build a vacuum chamber that will be used throughout the episode.

With Adam’s guidance, they also build an analog “voice box”. They test sound results outside the chamber, but quickly realize that the device works by moving air, an interesting conundrum to be overcome in a vacuum. They then test the sound transmission in the vacuum chamber using microphones to record the results.

Can a fire extinguisher be used as a jetpack in space?

Sandra Bullock made this maneuver famous in the movie  when her character used a fire extinguisher to make a space jump from her capsule to a distant space station. Is this possible?

Adam and the MBJr's conduct a number of small scale experiments using CO cartridges in a vacuum chamber to observe results. Propulsion seems possible, but could you actually use a fire extinguisher to navigate between two points in the zero G vacuum of space?

They scale up the idea by constructing a hovercraft-type device to be used on an ice rink to achieve as frictionless a simulation as possible.

Try it out! 👩🏻‍🚀💨
Blast through the cosmos and avoid space junk to get to the escape pod! Can you make it in time before your fire extinguisher runs out?

Glitch is the friendly community where you'll build the app of your dreams. Glitch lets you instantly create, remix, edit, and host an app, bot or site, and you can invite collaborators or helpers to simultaneously edit code with you.

Episode 9: Deep Space Hollywood

MythBusters Jr    Bug Special

The Big Stick: Can a bug glue-trap trap a human runner?

If you had a human-scaled bug trap, would you be able to run across it?

First up, Adam and the MBJr's demonstrate the properties of the sticky stuff in question, without hurting any innocent bugs (or Adams!) Next, the MBJr's split into teams and learn about adhesive and cohesive forces and how glues work. They come up with the strongest, safest formula they can, set up their human-scaled bug trap, and take a run at it!

Is spider silk really as strong as steel?

While a spider is not technically a “bug”, they’re definitely cousins. Bugs and spiders are both in the arthropod family and that’s good enough for us — these eight-legged silk spinners are just too cool to ignore.

It’s been said that the silk of the golden orb spider is twice as strong as Kevlar and five times as strong as steel. Is this really true? The MBJr's set out to stage multiple, precision one-to-one tensile strength tests to see how this miracle silk really stands up to the strongest materials humans have to offer.

A“maze”ing Ants: An ant won't walk across a line of chalk. True or False?

It’s a classic household remedy: you can stop ants from traipsing into unwanted areas by drawing a line of chalk across their path. Does this really work? Consultation with an entomologist quickly leads to the procurement of a few ant colonies housing the best species of ants available for this test.

The MBJr's study the ant's normal activity up close and personal with macro photography. Small-scale tests are conducted with condensed sugar water set at a distance from the ants to observe how they locate the sweet food source. Once the route to the sugary treat is established, the MBJr’s draw a line of chalk in the ant's path and chart the results!

Try it out! 🐜🐜
Draw lines of chalk to keep the ants at bay and away from your burgers!

Episode 8: Bug Special

MythBusters Jr    Breaking Bad

 Magnet Caper: Is it possible to use a monster junkyard magnet to erase a room full of data on computer hard drives through a concrete wall?

It’s a famous scene from one of Adam’s favorite shows, . When potentially incriminating evidence on a computer hard drive is placed a police station’s evidence room, Walter White pulls up in a panel van and uses a powerful junkyard magnet to wipe the drives inside. In the process, it pulls over shelves, sending metal objects flying, and almost tips over the van itself.

Is that a real world possibility or just television fantasy?

The MBJr's will set out to test this myth to the very last detail! Along the way, they'll study the amazing power of magnets and even stage a spectacular collision between two extremely powerful neodymium magnets.

Furniture Barricade: Can you barricade a room by blocking an unlocked door with furniture? Or can the old “chair under the door knob” technique work too?

We’ve all seen it in cartoons, TV shows and the movies: our hero is on the run from a bad guy and tries to block the door with a chair jammed under the door knob or by using pieces of furniture. Can this really work?

It seems like common sense: the heavier the object blocking the door, the more effective it will be. But even lighter objects could work if they’re put in the proper configuration! The MBJr's test floor material and learn about friction, drag, and resistance as they test scenarios with a huge stunt man to obtain their results.

Try it out! 📄✂
Can you move the shredder to the documents in a room of magnetized furniture? Oh, it won't be as easy as you think!

Episode 10: Breaking Bad Blow-Up

Anil Dash is CEO of Glitch, and the host of Function, a podcast exploring how technology shapes culture and society. 

He also serves on the boards of Stack Overflow and the Data & Society Research Institute, and was formerly a contributing editor of WIRED. He’s been blogging since 1999 and won’t stop telling people about that one time he was on the Desus and Mero late-night show.

Maurice Cherry is Glitch's creative strategist.

Incidents

The Workers Who Keep the Web Safe in an Unsafe World

Animal Crossing Helped Me Get Back to Real Life

New Rules of the Classroom: Remote Teaching in the Age of Covid-19

Better Tech: Why We Need Calm Technology Now More Than Ever

Function with Anil Dash

Open World is a fiction anthology podcast about how science and technology serve as a backdrop for imagining a better future, helping us envision the positive influence that science and tech can play in a real future. 

Open World is produced by Keisha "TK" Dutes and hosted by critically-acclaimed podcaster Rose Eveleth, for Glitch. By speaking to the pressing concerns of our times through love, friendship, community, compassion, and sustainability, the host will help listeners imagine new ways forward into a future that is less scary and more positive, and something we can start working on constructively.  

Open World launches weekly episodes in Spring 2020. Want to contact the show? Email youropenworld@glitch.com.

Open World

Shift Shift Forward is a podcast that showcases everything that makes Glitch the best place to create on the web. We’ll talk to some of our top creators, explore cool apps, and even hear from the people who work at Glitch!

Shift Shift Forward

Celebrating the makers, creators and coders who shine.

Recent Posts