Our users told us that setting up bots had a bit of a learning curve, so we created a Discord starter bot with an interactive install guide that walks you through every step of the process. Now you can go from idea to bot, faster. It's perfect whether you're a Discord fan who wants to explore the world of bots, an aspiring coder, or both. Through this guide, you'll learn about the tech that makes bots work: APIs, Javascript, Node.js, Botkit, Discord.js and more. But it's only the beginning of your bot journey. This bot was born to remix.  Remixing on Glitch means you get your own copy of the bot to customize as you like.

Steph at Glitch remixed our Starter Kit twice to make two new great bots. The first is Gritty Bot, and features Gritty, the adorable, scary, hairy Philly Flyers mascot.

Want to bless your Discord server with a Gritty gif? Gritty Bot can do it! NHL stats? Gritty Bot is on it.

Want to start a business? Just ask Bizbot for an idea.

This bot has cool ideas like: “The new hot app is all about fixing the in-law's WiFi. Designed by toddlers for toddlers.” Even if that's not a viable business, the real magic is in the fact that it gets data from a Google Sheet. That means you can add stuff to your bot and nosy people looking at your company will think you're working. And maybe you are.

Bizbot and Gritty Bot are remixable, so you could turn Gritty bot into a Phanatic bot (that's the green muppet-like mascot of the Phillies). More tips for customization are in each bot’s Readme.md file and code comments.

No matter which bot you choose to remix, let us know what awesome bot creations you’ve made by tweeting your app to @Glitch.

Discord Bots Starter Kit: Making your first bot, easy

What if you could build your own version of Zoom or Google Hangouts? Using Glitch and OpenTok, the opportunity awaits you! Developer Advocate Garann Means wrote a helpful tutorial in Building a JavaScript Hotline with OpenTok and Node.js. It takes you through all the steps of creating an interactive video chat app on Glitch.

nexmo v1

The idea behind this project is straightforward: if you have a question about, say, JavaScript (and don't we all), you can get connected with a JavaScript expert. They can walk you through all your questions in a live video chat. If you're an expert, you can sign up to get notified by text message when someone needs help. The app works in a browser, so there is no need to install any special software.

Best of all, you can remix it, throw in your OpenTok API keys and start coding your own features. We remixed this app and added a Glitch embed next to the video chat so you can code together on Glitch:

Nexmo + OpenTok + Glitch = Making Communication apps easy

Don't worry, you don't need to set up an entire telecommunications system by yourself. That's because OpenTok is doing most of the heavy lifting. Your Glitch app basically says, "hey, get me a video chat," and OpenTok sets it all up. The app itself is only about 200 lines of code, which primarily  tell OpenTok what to do.

OpenTok is part of Nexmo, Vonage’s API platform for messaging and voice. OpenTok has screen-sharing and recording capabilities as well. Build a Twitch-like app to show your screen, a video, and a live chat all at once. You can record it all so anyone can watch it later.

Nexmo's Developer Blog has more valuable blog posts that explain how to use OpenTok and other Nexmo APIs on Glitch. Each post tells you how they made it and includes a nifty Glitch app. And, just like any public Glitch app, if you're curious you can view the source code, or remix to build your own versions! Test one out and prototype apps with these amazing communications capabilities.

Here’s some of what the Nexmo API family can do:

Verify: Use SMS for customer login and two factor verification

Number Insight: Data visualization of customer sms/phone usage

Messages API: Reach your customers through SMS, WhatsApp and more!

We've collected a few handy posts and apps in our Nexmo Glitch app collection. Have a question or need help? Let us know by tweeting @Glitch, @Nexmo, or posting on our support forums.

Video Chat With OpenTok on Glitch

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

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

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

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.

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

A free, 28-page zine that will help you to learn some of the key concepts needed to create web apps using React.js, including:

Find out how Suz Hinton, Justin Falcone and Florida Elago got into coding.

Must-know advice for those new to React from experienced programmers.

YouGotThisZineReactEdition.pdf

YouGotThisZineReactEditionBWPrint.pdf

YouGotThisZineReactEditionBW.pdf

Making Web Apps with React

A free, 24-page zine that will help you to learn some of the key concepts needed to create web apps using Node.js, including:

Find out how Cassidy Williams, Steve Klabnik and Saron Yitbarek got into coding.

Expert advice for new developers from experienced programmers.

Making Web Apps with Node

Website Starter Kit. Part 1: Intro to HTML

We talk about HTML, what it is, what its limitations are and we cover some actual HTML code that makes up the intro to HTML example website.

Website Starter Kit. Part 2: Intro to CSS

We learn about CSS, classes and how we can use CSS to make our website look nicer.

Website Starter Kit. Part 3: Intro to JavaScript

This video provides an introduction to JavaScript, what it is and how we could use it to add behaviors and functions to our site.

Website Starter Kit. Part 4: Intro to Node

We explain what Node.js is, how web servers work and the types of things you can use Node.js for in your own apps.

How to Make a Website

React Starter Kit. Part 1: Intro to React

Software Engineers who use React every day explain what React is, when you might use it and why.

React Starter Kit. Part 2: React Starter

We take a look at a simple app that uses React, and we introduce the tools and concepts you need to understand it, including Webpack, JSX, components, elements and props.

React Starter Kit. Part 3: React Router

We introduce you to routing, and explain how you can use React Router to add links to additional pages in your app.

React Starter Kit. Part 4: React Redux

We explain how to manage 'state' in your app, and how Actions work with Reducers.

React Starter Kit. Part 5: What's Next?

We suggest some useful add-ons and libraries to try out once you've mastered the basics.

Build a Web App with React

He also serves on the boards of the Electronic Frontier Foundation 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.

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

From idea to code in seconds, build and learn alongside the most creative coders on the Web

Tips & Tutorials

You Might Also Like