After 40-plus years of making, Adam has solved his fair share of problems. He's also picked up plenty of lessons along the way. Part memoir, part creative toolkit, his book confirms what we've suspected all along: making is messy, and filled with screw-ups. We hope the book will both permit and inspire you to get comfortable, and have some fun on your path to creativity.

At Glitch, we live by those same principles. We don't wait until everything is perfect to begin a project. Like Adam, we use what we have available. And when we need help, we ask our friends. After all, we're creators too.

In fact, earlier this year we collaborated with Adam on the launch of MythBusters Jr., transforming each episode's investigation into its own interactive app. You can find and play all of those apps here. In celebration of his new book, we took the liberty of updating one of our favorites.

Adam Savage's Whoopie Cushion is a  app made for fun and remixing. Remixing it will give you your own working copy here on Glitch, which you can edit however you like. It comes pre-loaded with 3 awesome fart sounds, including one just for Adam!

When it comes to creativity, you can't take yourself too seriously.  gives you the permission slip to become your creative self by helping you find inspiration and follow through on making your ideas a reality.

A Permission Slip from Adam Savage

Whether you like it or not, a battle is being waged between the apps on your smartphone. The ultimate prize? Your attention. “Technology is not neutral,” said Tristan Harris, design ethicist and co-founder of Time Well Spent, in his TED Talk, “and it becomes this race to the bottom of the brain stem of who can go lower to get it.” Over the past few years, Harris has been pivotal in highlighting how apps are often perniciously designed to stake bigger and bigger claims on our attention, to get us hooked, to keep us scrolling. Not for nothing did Netflix claim its competitors were “Facebook, YouTube, and sleep.” This brain hacking has largely worked; we’re glued to our devices. Various studies report that average American adults spend anywhere between two to five hours per day on smartphones. And among the many apps elbowing for our attention is a group that fights extra hard: social media.

But social networking sites aren’t all bad. They do connect people, foster collaborations, and fuel civic participation. They’re fun and engaging. It’s why we have flocked to social platforms, which account for 30% of the time we spend online. But there are offline consequences. While internet addictions have grown in numbers and severity, impacting productivity and creativity, social media itself has proven harmful to users’ mental and psychological well-being, and a fritterer of time and energy.

For one, metrics—likes, comments, friend requests—have gamified platforms like Facebook and Instagram, turning social interaction into a numbers and popularity contest. “It’s a system based on social approval, likes, validation, in views, success in followers,” wrote Essena O’Neill, the one-time Instagram star, in 2015. “It’s perfectly orchestrated self-absorbed judgment.” The bottomless feed of news and notifications exist to keep us scrolling, producing in us dopamine spikes, if not hits to our self-worth and pangs of FOMO (Fear of Missing Out). The effect is a major time-suck. In a single social media session, we could be spending untold hours in a YouTube video wormhole, pursuing validation through Twitter likes, or hate-watching someone’s Instagram story. As Sherry Turkle summed it up in , “Anxiety is part of the new connectivity.”

Christina Cook can sympathize. In 2012, she wearied of Facebook mediating her relationships. “I was living in a constant state of information overload and a vacuum of joy,” she writes me. She chose to completely disconnect for a month and in doing so, regained time, peace, and JOMO, the Joy of Missing Out. Cook’s unplugging formed the foundation for Experience JOMO, which she describes as “a countermovement to our always-on tech addiction.” Through workshops and email prompts, the platform urges a more considered approach to technology and social media in order to rediscover the pleasures and connections of an unplugged life. “In order to experience the joy of missing out, we need to connect deeply with the things that are truly life-giving for us,” she writes, “and they are almost always away from the screen.”

Cook is not alone in her stand against attention-seeking tech. The digital wellness movement has gained steam recently, enjoining people to be mindful of their digital habits. In response to the groundswell, even tech companies have launched features such as Your Time on Facebook and Google Wellbeing to help people get a grip on their tech usage, though it is vital to note that it is in none of these corporations’ interests to get you to log off. Of course, no one is asking that you disconnect completely forever (though if you wish to, godspeed); rather, the advocacy here is to deploy conscious and mindful strategies in tech consumption.

That’s easier said than done, notes Anastasia Dedyukhina, founder of Consciously Digital, considering how we’ve “outsourced more and more of our functions to tech.” Google memorizes our searches, Facebook archives our Moments. Once a digital marketer, Dedyukhina has, in the last four years, committed to the concept of digital minimalism. Where digital tools were once designed to help us with tasks, freeing us up to accomplish more fulfilling endeavors, she says, “we’ve ended up spending more time managing technology.” Her response was to jettison her smartphone for an old-school Nokia, completely eliminating the temptation of apps.

If digital downsizing is too extreme, try a simple habit fix: being intentional. It’s what Leif Hansen practices. He’s been active in the digital wellness space for more than a decade, early on with his 2009 series of SoulTech workshops and lately, with SlowTech, a Facebook group offering tips and support calls to help participants alleviate tech dependencies. “A lot of us feel like we’ve traded the depth for the breadth of a relationship,” he tells me. Hansen’s intentional use of social media means being specific about what he’s using these platforms for. “If I’m clear that I’m going on Facebook because I want to see if there are any events this weekend, then I’m gonna go on, I’m gonna do that, and I’m gonna get off,” he says.

Failing that, Tommy Sobel, CEO and founder of Brick, suggests an easy daily practice: putting your smartphone on airplane or Brick mode for at least an hour a day. That single adjustment is intended to precipitate a series of other behavioral changes, beginning with engagement with the offline world.

Another approach is to make apps work . There are now a number of apps that help to redress the balance and make social media platforms more user-centric. A quick search on Glitch calls up tools that allow you to export the feeds of everyone you follow on Twitter or re-chronologize your Twitter feed, enabling you to reclaim your accounts and profiles. Here are a few more apps that help limit the clutter and distractions of a social media experience:

The first step toward conscious social media use is, well, being conscious of how much you use social media. Apps such as Moment, Flipd, and Forest help users track and limit the amount of time they spend on their smartphones, but for iOS users, Apple’s Screen Time has got you covered. It provides a statistical breakdown of how long you spend on screen and which apps you’re on, plus its iOS 12 update enables you to restrict the time spent on certain apps and schedule downtime away from your phone.

Applying the Marie Kondo creed to the social media space, this app by Julius Tarng urges a mindful clean-up of the accounts you follow on Twitter. Taking you through your follows, it asks if each account “still sparks joy, intrigue, inspiration,” or remains somewhat important to you. Unfollow, declutter, and watch your Twitter feed grow in significance, but not in size.

Last year, realizing that Twitter has become a platform where free expression can often devolve into abuse and outrage, the company detailed its dedication to “create healthier experiences,” while CEO Jack Dorsey has broached a rethink of its Like button. Perhaps a fix is also due for the site’s retweet feature, which at its worst, overloads users’ feeds and amplifies misinformation. Twitter currently allows users to turn off retweets one profile at a time, but here’s a handy app by Julia Evans that turns off all retweets from everyone you follow.

A great aid in intentional social media use, this Chrome extension eliminates all distractions on Facebook by replacing your endless, attention-diverting news feed with a single inspirational or custom quote.

Facebook’s aggregates—the number of likes, amount of comments, size of your friend base—don’t just quantify social connections, but form an addictive element of the platform. It’s why artist Benjamin Grosser built the Facebook Demetricator, an extension that hides all of the site’s numbers, including friend requests, shares, likes, and those red notification flags. (Also check out Grosser’s Twitter Demetricator)

It’s no longer unusual for old, bad, or out-of-context tweets to resurface to haunt a user’s current life or well-being. If you’d like to unburden your Twitter account of its past and move on ahead, here’s a nifty app by Ryan Giglio that will wipe your entire archive in 20 minutes or less.

Aimed at strengthening awareness of our digital habits and weakening social media’s claim on our attention, these apps, alongside the strategies discussed above, work by shifting control from the platforms back into our palms. Try them out and re-empower the way you approach your news feed—which should be an edifying function, not a time vortex. Social media, after all, is not going anywhere. But it’s time to make it work for us and not against us.

Taking Back Social Media

You almost certainly can remember when you first got excited about technology, or about the internet. You discovered that somebody else shared the same eccentric interest as you, or you felt empowered by the idea that you could instantly create things and share them with anyone.

But somewhere along the way, amidst all the great things technology brought us, we started to get a lot more worried about the effect that these apps and devices have on our lives. We started to wonder how trillion-dollar companies would ever consider our needs. And we noticed that, well, a lot of the people creating these technologies hardly come from the same world that the rest of us live in.

As it turns out, these problems are related. And they can be fixed.  shows us how. That’s why we need to stand behind Mouse’s work.

To get just a feel for the challenges we’re facing, swipe through the headlines shared in the app below, and see if you can guess which ones are real challenges that tech faces today, and which ones merely seem plausible.

If you’re not familiar with Mouse, it is an organization that’s been fighting to empower young people and educators to create tech for good. And they didn’t just start doing this in the current moment when everyone is wringing their hands about the big tech companies — they’ve been at this for decades. For 20 years, Mouse has been incredibly effective at empowering young people by helping them learn to create technology. It started, as these things always do, with the goal of serving a particular community, but Mouse is now a nationwide force, with a spectacularly impressive track record of helping young people who are most in need. Mouse also thinks about how to change the whole system, which is why they’ve spent just as much effort in working to reach educators, and to give them the support and resources they need to help kids succeed.

Here’s the most impressive part: It really works.

Almost 90% of students who participate in Mouse’s programs report improved creativity, better problem solving, higher confidence, and stronger team-building skills. 85% feel that they’re better prepared for college. And 83% believe they can make a difference in the world.

By believing that Mouse can change the world for students, we enable students to believe they can change the world for us all.

Mouse students look more like the future than the halls of Silicon Valley. 37.4% are female. 26.9% are African-American. And 29.5% are Hispanic. That diversity is why they’re going to be the right people to enter the tech industry and address the problems, challenges and dangers that today’s tech too often gets wrong. They see bugs in technology that go far beyond the code and software itself, and that reflect bugs in society overall. Mouse’s mission puts it simply, and perfectly:

Now, it’s your turn. Mouse can only do this critical work if we show up to support them. That’s why I’m hoping you’ll celebrate with me at the Diversity in Tech Awards on May 1 at The Bowery Hotel. It’ll be a special night that illuminates the diversity gap in tech and more importantly, demonstrates that we know how to solve the problem. You should pick up your tickets now, and join us at a night that will leave you feeling optimistic and hopeful that a better technological future lies ahead for all of us. (As long as we do our part!)

Mouse, and How Tech Fulfills its Promise

The Stack Overflow Developer Survey has become a staple in the developer community. Now in its 9th year, the survey, which garners around 100,000 responses, captures the opinions of folks who code from around the world. It's an important source of insights into the developer community as a whole.

People share their opinions on a wide range of subjects, from their favorite tech to job preferences, how they got into programming, to how much they're paid. Being such a large and rich dataset makes it a powerful predictor of industry trends and allows us to explore our understanding of how developers work and can help companies hire and engage with developers.

While the anonymized survey results will be available publicly later this year, we wanted to make the current aggregated survey results more accessible. We've created two interactive charts on Glitch that focus on the technology section of the 2019 Developer Survey results.

You can use the apps directly to explore the results in more depth. Or, because they're remixable, you can take a closer look at specific technologies you're interested in by creating your own versions of the apps and visualizing the data in different ways.

Most Loved, Dreaded, and Wanted Technologies

First up, the results for the most loved, dreaded and wanted tech. With this chart, you can see how your favorite technologies stack up against each other by taking a look at the different programming languages, platforms, databases, frameworks, and other tools that developers said they wanted to keep, stop or start using.

Our second project explores the results of the most popular tech overall. Based on six categories of data - languages, platforms, databases, web frameworks, dev environments, and other tools, take a look at which technologies were the most well used across the developer community.

Both of these apps are a way for developers to interact with the data more closely. In fact, you can use the remix buttons above to take these apps and create your own versions of them to play around with the data yourself.

Both of these apps use Chart.js, a JavaScript library for making interactive charts and graphs. If you're not already familiar with Chart.js, then don't worry. We have a tutorial that steps through a real, working project, that you can use to get up to speed.

Then, go ahead and remix the apps to get a copy of the code and data yourself. Both apps have a similar structure:

You can edit public/client.js, public/style.css and views/index.html to change the appearance of the app.

Chart.js is used in client.js to render a chart using data from the app's database.

Reference the Chart.js docs and change the renderChart function in client.js to visualize the data using different types of graphs.

The app starts at server.js and accesses the data in the database through routes (/getLanguages, /getDatabases, etc.)

The apps use SQLite to store the aggregated tech data from the CSV files included in the project.

server.js is where the code lives that creates the database and fills it with the data.

As they've done in the last 8 years, Stack Overflow have committed to releasing the full, anonymized survey results data later this year. But until then, we hope these apps have made the current data more accessible and interactive.

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

Delve Into Developer Survey Results Data

With WebVR you can create immersive, interactive 3D worlds right in your browser. In , we combined how-to videos with remixable, working code examples so you could start learning how to build your own WebVR experiences using A-Frame.

Now, in partnership with Mozilla, we're kicking off a week of WebVR experiments that build on that starter kit and showcase what's possible with WebVR. Each of this week's 7 examples, created by VR expert and Glitch creator Andrés Cuervo, is a unique experience that will teach and inspire you to go further with building VR experiences.

Join us every weekday this week to see another incredible VR example.

We started the week on Monday with 3 VR experiments:

Motion capture is used in films all the time. But getting motion capture data into VR scenes has historically been pretty difficult. Thankfully Three.js — the framework that A-Frame is built on — has an example to support BVH, a common motion capture data format. This means we can take free motion capture data — like from the CMU Graphics Lab Motion Capture Database — and all of a sudden we can add a character pirouetting, running, or cartwheeling across the floor! Try clicking around in this scene to switch between a few different motion capture files represented as dancing blue sphere mapped onto the data.

This scene combines an example by Don McCurdy from the A-Frame documentation on shaders with loading 3D models and textures — basically, this project is a tour of a few types of files you'll want to load into your VR scenes! If you haven't encountered shaders before they're programs that tell your computer what color to display on the screen, making them the core of how we create graphics like the deforming sphere in the scene. Using shaders we can create custom programmatic visuals like fire, water, sand, or other complex materials where just a picture of the texture would be insufficient. If we have assets we'd like to use instead of dynamic shaders though we can place those into our VR world as well! A-Frame makes it easy to add 3D models (like the walls of the scene) and 360 images for the sky using only a couple lines of code, like <a-obj-model> and <a-a-sky>.

There are some basic 3D shapes I expected A-Frame to come with: boxes, spheres, cones, etc. But I wasn't expecting the intriguing torus knot. These shapes are essentially toruses (the mathematical name for a "doughnut" shape) that have twists in them (making them knots) determined by two parameters we call p and q. You don't need to know any of the math that goes into these shapes in order to start playing around with the shapes in A-Frame though — they're built-in! We use another built-in — the animation component — to animate the winding shapes, creating a corkscrew effect & a swirling/overlapping knot effect.

That said, check out this link from Wolfram MathWorld about torus knots if you're curious about the math going into these shapes!

On Tuesday, we built on the Winding Knots example above. We're going to use torus knots but we'll also introduce the template and layout components. While we're not animating the p and q parameters this time, we're animating the scale of our torus knots. The layout component is useful because it can generate rings of torus knots rather than us having to specify the positions of each knot in the ring individually. We use the template component to repeat this in a for-loop, creating concentric circles of torus knots!

Finally, we add an animation delay to our scale animation that's determined by what number ring we're on. This means ring 1 will start animating slightly after ring 0, ring 2 slightly after ring 1, and so on — this ends up with an effect that looks like waves of pulsing torus knots. It's amazing seeing how a little bit of code can generate a whole scene around the viewer!

On Wednesday we took a closer look at generating patterns. This one starts by picking a random number from 0 to 1, if it's less than 0.5 it writes down a \, otherwise it writes down a /. Now do this 100's more times — or get a computer to do it for you! That's what the original 10PRINT BASIC program did, and out of that simple process you can get some really beautiful patterns that look like mazes, walls, or tapestries. This project recreates the effect using some flat geometry in A-Frame with clever tilting. See the README and the code in the project for more details!

Thursday had us creating optical illusions, like those sidewalk chalk optical illusion paintings. You have to view them from a certain angle in order to get the stretched images to create the illusion of depth. The painting shown in the VR scene below is similar to those, only it was painted in the 1500's! You can watch a video of the real life painting that helped me figure out how to animate the painting in the A-Frame scene. Open up the scene and move around the scene to see it for yourself and then take a look at the code — it's a small amount of code for such a cool effect!

The images and assets we've worked with in rest of these projects have all been static, so for this final project I want to show how easy it is to include dynamic content. What does that mean? Well let's say we want to add a random image of a dog onto a bunch of objects we have in A-Frame. We can use an API that serves random images of dogs, like the random image search functionality from Unsplash, to load a new image of a dog and then use that as a texture in our scene. This project demonstrates how to do that by extending our previous torus knot project, and adds some extra animation flair.

So there you have it! 7 projects, each demonstrating an in-depth use of A-Frame. From using motion capture data, to adding in animations and dynamic content, you can use these building blocks to build and extend your own VR experiences.

Master WebVR With a Week of Experiments

Just over a year ago, "Code Monkey" and Ravelry co-founder, Cassidy Forbes created "webcomicname-mashup". An app that enables you to make your own versions of the popular Webcomic Name comic strips.

For those unfamiliar, Webcomic Name parodies the relatable 3-panel comic format. There's the setup, things happen, but they always end with the same little celebration of failure: 'oh no'. But don't let the simple format fool you. The comic's gloomy reflections on life have a self-conscious charm and wit that can be both funny and thought-provoking.

"Webcomicname-mashup" puts Norris' back catalog of comic strips to work. You can generate a random comic, or carefully click through the panels until you settle on your own 'oh no' masterpiece.

 Norris remarks. From reflections on our productivity-sapping obsession with gadgets to poignant comments on the state of discussions of identity and gender, the results can be en pointe.

And today, Norris' has something else to be proud of. Webcomic Name is now available in paperback with the release of . Published by Andrews McMeel, it brings together all the series’ greatest hits as well as dozens of never-before-seen comics.

Landing just after April Fools day, the timing of the book's launch is apt as Webcomic Name is the result of an April Fools joke itself. In 2015, Norris faked that 'Dorris McComics', another Norris web comic creation, was becoming a trite relatable comic with 8 updates per day.  Norris tells us. And of course the internet loved it. Norris has been creating hilarious, cliche-filled, blob-based works of art ever since.

Inspired to create your own? Norris leaves us these suitably dour words of encouragement: "Anyone can become an internet artist, the bar has never been lower!"

An Addictive Generator For 'Oh No' Comics? Oh Yes!

Leaflet is a JavaScript library for making interactive web maps. This library allows you to create a map container, add a base map, and add interactive features on top of the map — plus panning and zooming. The base map is made of tiles, or small images that each represent a specific geographic location. The interactive features, or “data layer,” consists of geospatial vector data — points, lines, and polygons with associated geographic information. Collectively, this kind of map is known as a slippy map.

For the Leaflet Starter App, we created a map showing neighborhood boundaries in Portland, Oregon. In Portland there are neighborhood coalitions as well as neighborhood associations, so the data is styled based on which neighborhood coalition the association belongs to. It also has interactive elements — neighborhood associations are highlighted when hovering over them, and popups show the name of the neighborhood association when clicked.

In the next section, we describe how the code in this app works. Feeling comfortable with the app? Skip down to “” and get started!

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

The data for this map comes from the City of Portland as a GeoJSON file. GeoJSON is a specific flavor of JSON that is used to describe geographic vector features (points, lines, and polygons). We downloaded this file and then uploaded it to the assets directory in our Glitch app so we can request the data with JavaScript when creating the map.

index.html contains the main structure of the page as well as any additional files the app needs to run effectively. In the <head> section we add links to the Leaflet JavaScript and CSS files and in the <body> we add an empty <div> with id="mapid”.

In order for the map to render, the <div> element housing it must have a height. We can make the height responsive by setting html and body to height:100% and then giving #mapid a percentage value for height.

html, body {
  height: 100%;
  width: 100vw;
}

#mapid {
  margin-top: 5em;
  height: 50%;
}


script.js is where we actually make the map, add layers to it, and add event handlers to make the map interactive. First things first — we have to make a map!

The file starts by creating a L.map object, which takes two parameters: the id of the <div> where the map should live on the page, and an optional object to specify more options. In this case, we tell the map to put itself in the ”mapid” <div> and set the map’s initial center point and zoom level to center on Portland.

// make the map
let map = L.map("mapid", {
  center: [45.55, -122.65], // latitude, longitude in decimal degrees (find it on Google Maps with a right click!)
  zoom: 10 // can be 0-22, higher is closer in
});


Now we start adding things to the map, with the base map tiles up first. For this map we are using the Stamen Toner tileset (lite version). We create an L.tileLayer, point it to the URL of the tile server, and add it to the map.

// add the basemap tiles
L.tileLayer(
  "https://stamen-tiles.a.ssl.fastly.net/toner-lite/{z}/{x}/{y}@2x.png"
).addTo(map); // remember, `map` is pointing to the `L.map` object


At this point, we have a map that pans and zooms around and a base map to look at while you pan around. Great! But that’s not the point of our map — the point of our map is to show neighborhood associations in Portland. But before we add the data, we have to do a little bit of setup work by defining some event handlers.

Event handlers are functions that respond to events on the page. These are defined before we load in the data so they can be attached to the data layer and triggered on specific events. We create four event handler functions: highlightFeature, resetHighlight, zoomToFeature, and onEachFeature, which attaches the other three functions to specific mouse events as they relate to the data on the map.

let geojson; // this is global because of resetHighlight

// change style
function highlightFeature(e) {
  let layer = e.target; // highlight the actual feature that should be highlighted
  layer.setStyle({
    weight: 3, // thicker border
    color: "#000", // black
    fillOpacity: 0.3 // a bit transparent
  });
}

// reset to normal style
function resetHighlight(e) {
  geojson.resetStyle(e.target);
}

// zoom to feature (a.k.a. fit the bounds of the map to the bounds of the feature
function zoomToFeature(e) {
  map.fitBounds(e.target.getBounds());
}

// attach the event handlers to events
function onEachFeature(feature, layer) {
  layer.on({
    mouseover: highlightFeature, // a.k.a. hover
    mouseout: resetHighlight, // a.k.a. no longer hovering
    click: zoomToFeature // a.k.a. clicking
  });
}


Because the neighborhood association data we’re using is in a different file, it must be retrieved asynchronously. This ensures that all of the data has been loaded before trying to use it (in this case, add it to the map). For the most part, you’re going to want to leave this section alone, except to change the URL so it matches your data. The important thing to know here is that once the data is loaded, the doThingsWithData function is called.

// get the data
fetch(
  "https://cdn.glitch.com/4e131691-974a-4b1f-95e5-47137b94043d%2FNeighborhood_Boundaries.geojson?1553538254953" // this URL is provided in the assets directory
)
  .then(function(response) {
    return response.json();
  })
  .then(function(json) {
    // this is where we do things with data
    doThingsWithData(json);
  });


(If you're interested to know more about how we're loading the data, you can read more about using Fetch)

doThingsWithData is where we (yup you guessed it) add the data to the map. In this case, we want to style the neighborhood associations based on their neighborhood coalition (a coalition consists of multiple neighborhood associations). To do that, we create a variable colorObj and assign to it the returned value from assignColors — an object assigning each unique coalition to a color.

// create an object where each unique value in prop is a key and
// each key has a color as its value
function assignColors(json, prop) {
  // from ColorBrewer http://colorbrewer2.org
  let colors = [
    "#a6cee3",
    "#1f78b4",
    "#b2df8a",
    "#33a02c",
    "#fb9a99",
    "#e31a1c",
    "#fdbf6f",
    "#ff7f00",
    "#cab2d6",
    "#6a3d9a",
    "#ffff99",
    "#b15928"
  ];
  let uniquePropValues = []; // create an empty array to hold the unique values
  json.features.forEach(feature => { // for each feature
    if (uniquePropValues.indexOf(feature.properties[prop]) === -1) { 
      uniquePropValues.push(feature.properties[prop]); // if the value isn't already in the list, add it
    }
  });
  let colorObj = {}; // create an empty object
  uniquePropValues.forEach((prop, index) => { // for each unique value
    colorObj[prop] = colors[index]; // add a new key-value pair to colorObj
  });
  return colorObj;
}


The second part of doThingsWithData adds the data to the map with L.geoJSON by passing the data as the first parameter. The second parameter is an optional object containing additional specifications — we use it here to set the style for each feature and add the event handlers. We then call two methods on the L.geoJSON layer — bindPopup, which adds a popup to each feature, and addTo(map) which adds the layer to the map.

// once the data is loaded, this function takes over
function doThingsWithData(json) {
  // assign colors to each "COALIT" (a.k.a. neighborhood coalition)
  let colorObj = assignColors(json, "COALIT");
  // add the data to the map
  geojson = L.geoJSON(json, {
    // both `style` and `onEachFeature` want a function as a value
    // the function for `style` is defined inline (a.k.a. an "anonymous function")
    // the function for `onEachFeature` is defined earlier in the file
    // so we just set the value to the function name
    style: function(feature) {
      return {
        color: colorObj[feature.properties.COALIT], // set color based on colorObj
        weight: 1.7, // thickness of the border
        fillOpacity: 0.2 // opacity of the fill
      };
    },
    onEachFeature: onEachFeature // call onEachFeature
  })
    .bindPopup(function(layer) {
      return layer.feature.properties.NAME; // use the NAME property as the popup value
    })
    .addTo(map); // add it to the map
}


assets is where we add the GeoJSON data file

index.html contains an empty <div> with id=“mapid”

style.css gives our ”mapid” <div> a height

script.js creates the map, adds the base map layer and data layer, and adds interactive elements/event handlers (popups, highlighting, zooming)

For this challenge, you have several options. Each challenge concerns a different part of the map — if you’re feeling up to it, try all of them!

Make the popups look pretty — add some styling, change the names to title-case, etc.

Some Portland neighborhoods have overlapping boundaries — the dataset used in this map has these areas as separate polygons. Use styling to make it clear that these are overlap areas.

Change out the GeoJSON file for a file of your choosing, ideally in a different location. Think about what might be different between the two datasets. (Data.gov is a great place to find GeoJSON data!)

Leaflet has some special things you can do when adding markers to a map. Add some point data and do some cool marker stuff.

After you’ve made your super radical map, submit it using the form below. We are so looking forward to checking out your amazing work! If you have any questions or need help, reach out on Twitter @glitch or via our support forums.

Make a Web Map with Leaflet

At the Museum of Modern Art exhibition “New Order,” art and technology are having a major love-in. The show surveys how the time-honored bond between the two fields has evolved in the new millennium, arraying works that explore and expand the creative possibilities of today’s technologies. There’s a self-playing video game by Ian Cheng, a digital simulation of Jeff Koons’  by Mark Leckey, and Tauba Auerbach’s series of 116 3D-printed geometric objects. In these and more, the digital has been made physical; TIFF and AVI files are given tangible form. They are machine-generated realities.

Of course, it’s not as if art and technology are siloed disciplines. For generations, they have been in collaboration and confrontation, pushing and upending the other’s boundaries.  says Michelle Kuo, the exhibition’s organizer and the Marlene Hess Curator of Painting and Sculpture. 

Change is already on its way. Where traditional artists would wield a brush, sculpting knife, or camera, the 21st century affords artists tools from artificial intelligence to 3D printing to virtual reality, enabling them to create in innovative and novel ways. Advancing technologies have dared art to take new risks and art has responded in kind. Once, the interaction between art and technology triggered ethical and moral questions. For example, how can a machine be an artist? Lately though, it’s broaching the richer issue of artistry itself. It asks: can a machine be creative?

It’s an inquiry sparked by the emergence of algorithmic or AI art, the practice of employing code, data, and machine learning systems to generate pieces of art. These Generative Adversarial Networks have been producing such works for a few years now, but it’s only recently that AI art has found itself smack in the middle of the art (and art-buying) world. Last October, an algorithm-generated portrait, “Edmond de Belamy, from La Famille de Belamy,” went under the hammer at Christie’s and sold for a cool $432,500. Created by French collective Obvious, it was the first-ever AI portrait to go on auction, and its sale spawned headlines variously celebrating and worrying about its implications for art-making.

Should artists be worried about their jobs? Not at all, says Obvious’ Gauthier Vernier.  he tells me.  The products of this union will naturally be curiosities, half-manmade and half-machinemade. After all, in making “Edmond,” the AI model, like the human that built it, acts as producer and creator, significantly blurring the lines between artist and technology. Here and elsewhere, AI doesn’t just facilitate the artist, but also, imitates.

That’s not to say it can create.  says Gauthier,  What these algorithms and machines do, inventively and unpredictably, is generate.

Generative art is not new: art, music, and poetry created by an independent system has been around long before computers existed. In the 1950s, the likes of Vera Molnár and Ellsworth Kelly were devising strict procedures with rules and instructions that determined how their visual art turned out. The ‘60s ushered in computer art pioneers from Frieder Nake to Manfred Mohr to Roman Verostko, who latterly coined the term algorists, as in algorithm artists. And notably, from the ‘70s, musician Brian Eno began experimenting with generative music—what he called “putting in motion something and letting it make the thing for you”—yielding 1991’s , 2017’s , and apps like Bloom and Trope.

Eno has not only been visionary and perceptive about the field, but is drawn to the questions it raises: “Who actually composes music like this? Can you describe it as composition exactly when you don’t know what it’s going to be?” At the same time, he remains in thrall to generative music’s promise—likening its vast “multi-centered” nature to the internet, and urging a reconsideration of the artist’s function.  he’s said, 

Making good on that inheritance, today’s generative artists understand how their role is shifting alongside technology. Digital artist Sean Catangui tells me,  His generative work, such as Line Tree, C-mum, and Randomized Form, emerged from his desire to enhance his ideas through programming. In the process, they gleaned him an appreciation of code and computer as expressive mediums. These projects, he says, “made me feel like the machine was alive.”

And the machine is alive all over Glitch. You’ll find it in other generative artworks such as Matt DesLauriers’ Retro Album Covers, n–schedé’s algorithmic objects and landscapes, and Anders Hoff’s many interactive forms. With these pieces, the artists may have constructed the machines and models, but as they stir and run, it’s their generative efforts that exceed expectations and hold unending surprises. “I might be just as happy to discover some unexpected behaviour and explore that instead,” writes Hoff. “Overall, this means that the process is continuous, exploratory, and never really complete.”

In the lo-fi, early days of computer art, practitioners endeavored to define and describe what exactly it was they were doing. Just observe how the 1976 anthology  offers a trove of phrases such as “creative processing” (from Mohr) or “scientific aesthetics” (Hiroshi Kawano). Whatever they were, all pretty much suggested that the alliance between art and science works both ways. If technology is made a part of art, art might also be embedded into technology to realize what Kawano termed “the science of human art.”

Or to arrive at Jenn Schiffer’s . Marrying art and code, the application does as it says on the tin and produces iterations of the painter’s post-Impressionist compositions. (As she also points out, Mondrian’s logical, progression-based pieces are ripe fruit for programming languages.) This is just one part of Schiffer’s broader  project, a series of similar generators emulating the works and styles of artists including René Magritte, Henri Matisse, and Mary Cassatt. In doing so, she’s turned material art into intangible Javascript—a process directly opposite of that happening at MoMA’s “New Order”.

That script, then, might itself serve as an art form. Chad Weinard, Mellon Manager of Digital Initiatives at Williams College Museum of Art, dubs it “code as its own form of creative writing.” He arrived at that idea after witnessing poet Lillian-Yvonne Bertram’s adaptation of Allison Knowles’ computer poem “A House of Dust.” Originally built with FORTRAN language, the piece is a constantly shifting entity, its lines randomly generated and connected. Weinard responded with his own iteration, populated with collection data from the museum.

Representing an interaction between data, algorithms, and chance, his quatrains are also woven with a collected history and a history of collecting. 

And future humans will find not only art in our code, but art criticism, particularly in Omayeli Arenyeka’s creation, Art Connoisseur. The Twitter bot raids Artsy for images of art, then generates commentary on each with hit-or-miss accuracy and a snarky, knowingly pretentious tone. “Ooh, it’s minimalism without mortality,” is just one brassy example. Though somewhat tongue-in-cheek, the app underscores the abiding gap between art and its interpretation, if not the pitfalls of allowing a machine to evaluate art.

So how should we deal with such machine-generated realities? Generative and AI art are awesome to behold, but neither are intended to be measurements of any machine’s creativity. Rather, as Kawano once wrote, their immense potential and varied products offer only an “artificial creativity.” Perhaps computer-generated works do more by simply broaching and challenging notions of creativity and authorship, presenting a tension between artist and tool that resolves nothing, but offers us the opportunity to interrogate everything. Which, really, is the point of art anyway.

Just like the open-ended nature of generative art, the ever-evolving relationship between art and technology can only continue to astonish as it brings forth yet more revelatory artifacts, arguments, and possibilities.  says Weinard.  That exchange bodes well for the future of both fields. All we have to do is set it in motion.

When Art Meets Algorithm

Probot is a framework for building Github Apps. You can have Probot handle GitHub chores - and even help with project management and community-building tasks like polls, sharing, and welcoming new contributors. Check out a list of some of the great Probots people have built on their Featured Page.

But how do you get your very own GitHub Probot? Glitch is the perfect place to make one, and now it's easier than ever. We teamed up with the Probot community to update our "Hello World" Probot app.

Before today, getting started with Probot required some time and attention to detail. You had to go back and forth between Glitch and GitHub over and over again. With the updated Probot Hello World you can do all of the setup with the click of a button. No more copying keys or webhooks, and the "app manifest" (see app.yml) configures permissions for you.

That means more bots to do your bidding! What can they do? We spun up a couple of popular ones on Glitch to give you some ideas:

Probot WIP- makes sure you don't accidentally merge code that's WIP!

Probot Todo- turns todos in your code into new issues so you don't forget about that "@todo" buried in some random file

We also created a new one just for Glitch! Open an issue here in this GitHub project and you'll get a special welcome message featuring rainbow text and cats.

OK, maybe rainbow text and cats aren't for every project, but it's a good starting place for a bot that can welcome new users or make images programmatically.

Inspired to make your own Probot on Glitch? Check out some of the community built picks in our Probot Collection. And if you domake a cool Probot, then be sure to share it with us by tweeting us at @Glitch.

Meet Your GitHub BFF: Probot the Robot

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