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

Welcome to the Glitch Blog ✨

— Glitch Blog

And just like that we’re into a new month! While the internet was busy celebrating Pride, National Selfie Day and National Donut Day, the Glitch community was doing all of the above and working on creating new and inventive ways to internet all of the things. With the added option of our recently released persistent data storage starter apps, June was such a productive month that it keeps getting harder and harder to choose apps and projects to write these roundups! Let’s take a look back at some of our favorite June joints. 

~experiments-os is an online music sequencer that lets you make  tunes in your browser and share them with friends! Created by @Cringe_gaming.

~generate-melodies-magenta uses Magenta.js to generate melodies! Built by @shahu.kareem.

~ai-circus is an entry for the AI Song Contest, and they include a section where you can remix their AI-generated chorus!

~time-invented-humor by @jaked is a Tone.js demo and little beat creator!

~racing-game-handsfree-prototype is a prototype but fun nonetheless - a racing game that only uses hand motion, by@GoingHandsfree.

~what-i-got by @blaine_cook is the superior of the Sublime text editors, as noted recently by the AV Club. 

~bodytype is a really cool way to demo a typeface, created by @diandraelmira.

~forgotten-blinks by @monolesan detects your blinking in order to determine the page opacity.

~thekoinobori by @aboutDavid is a decentralized blogging app, with the name paying homage to our logo’s inspiration. 🎏

~brockly by @khalby786 converts your screenshots to a beautiful browser mockup.

~k8s by @anmaso is a neat UI editor for Kubernetes descriptor files.

~hellmo is ...um, exactly what it sounds like. Created by @outofambit.

~thesis-during-covid is a crowd-sourced collection of online exhibitions, remote festivals, and tools to create them, put together by @xinemata and @lee2sman using Leafy!

~aliciaalonso by @addiellucena2020 is a simple page about a really interesting woman, made on Day 3 of this creator’s #100daysofcode journey.

~wordsearch-generator by @christianp does what it says on the box: generates a wordsearch!

~personality-quiz-sarahv by @sarah.voon38 is an app by a Girls Who Code student which they called out in announcing the new cohort getting started. We love to see all the apps these new coders make on Glitch!

What a way to start the summer! We can’t wait to see what you do next, especially with the new blank Hello apps out there. Thanks for making June an absolute delight! If you have Glitch projects you built or love and want us to feature, share them on the forum, tweet them to us @glitch or email community@glitch.com—we’d love to see your project in our next roundup! ✨

The project featured in this post’s header image is ~lorem-blocksum built by @ker0chan, which lets you generate blocked-out-text content, which the creator made for game designs. 

And just like that we’re into a new month! While the internet was busy celebrating Pride, National Selfie Day and National Donut Day, the Glitch community was doing all of the above and working on creating new and inventive ways to internet all of the things.

Last month on Glitch, the June 2021 edition

We just launched generated static sites! 🎉 This has been an in-flight feature for a long time, and something I’m really excited to finally see out in the world. There are a lot of moving pieces, but the most important thing to take away is this: generated static sites allow you to run a development process and, when you’re done editing, Glitch will run your `npm run build` script and upload that optimized build to the glitch.me domain every project gets free.

The new starter projects were created for remixing. This bumps up our two templates (hello-express and hello-webpage) to four (website, node, react, eleventy) with opinionated and minimal versions of each. Thinking through the technology choices for each starter and choosing the packages that we were endorsing was an exciting challenge, and we were able to build on the incredible work the open-source community has been doing since we last created new starters. Let’s walk through the new starters and what powers them to give you a better idea of how they’ll help you get started building your idea in seconds.

Our previous Node.js starter, hello-express, was in daily use but starting to fall behind modern Node best practices. Looking at the landscape of Node web servers, there was a clear choice: Fastify. The speed gives us the ability to serve more pages, faster, from the glitch containers. It’s also great how easily extensible Fastify is. Having validation built-in didn’t hurt. We are really excited about what Fastify will allow us to build going forward and how to leverage it for Glitch users; plus, we can build Glitch-specific plugins to interface with our asset management, fully-powered terminal, etc., in the future. There isn’t a lot of boilerplate needed to instantly create an API, so we were able to keep both the opinionated and minimal versions of the Node.js starter fairly straightforward.

We’ve had trouble in the past getting the React development process to be performant on Glitch servers, so solving the speed problem was the #1 priority. Fortunately, our team didn’t have to do much of the work here and instead could rely on Vite to do the heavy lifting. It starts immediately, supports TypeScript and JSX, and has hot module reload enabled by default. That significantly reduced the surface area we needed to build ourselves to support a lightning-fast React workflow.

One way Vite achieves these incredible speeds is by bundling all of your dependencies (in ~glitch-hello-react they are: React, Wouter and react-helmet-async) with ESBuild. ESBuild is an extremely fast JavaScript bundler written in Go. Most likely you aren’t changing your dependencies nearly as much as your code, so it can do that once and only build again when you add a new dependency or upgrade the version.

When you close the editor and stop working on your site, it runs the Vite build process in the background which creates an optimized bundle with Rollup. That means you can take advantage of the wild world of Rollup plugins. We serve this fast production bundle at your free glitch.me domain until you start working in the editor again.

Static site generators are all the rage today, and for good reason. Eleventy cares about speed, ease of use, and—most importantly—the experience of someone browsing your site. When you run the Eleventy build script, it takes all of your files and creates a bundle that can be loaded by those still using AOL dialup. (Please let us know if you are still using AOL dialup!)

The Eleventy starters list is a scoreboard with Lighthouse scores, pushing Eleventy builders to make a performant site that anyone on any connection can view. As website bundles get more and more bloated, Eleventy pushes for as little JavaScript as possible, and uses it only where you need it.

Our  ~glitch-hello-eleventy starter has support for blog posts in Markdown, beautiful styling, and instructions for adding more complexity if you need it. The minimal template was built by the Eleventy team.

Along with support for Eleventy, we’re supporting all of the Eleventy projects that others have built. Want a high-performance blog with image optimizations and analytics? Check out eleventy-high-performance-blog. Something a little more designed, that uses Tailwind CSS and a JS framework (Alpine.js)? Try 11ta.

These are just our starters using the new generated static site functionality. You can apply the same concepts to a Vue site, or Svelte! Any code you can run in the build script that outputs to a build folder can take advantage of this new functionality. Just add this configuration to your package.json:

"glitch": {
  "projectType": "generated_static"
},

That will tell Glitch to treat your project as a generated static site so you have a development environment when you want it, and a production site on your glitch.me domain when you’re done.

So, why not remix one of these starters and create a new project right now? 

Glitch engineer, Keith Kurson, discusses the tech stack and opinions behind our new lineup of Glitch starter apps

A closer look at the new Glitch starter apps

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

Whether you just discovered Glitch or you're a long-time user, here's a rundown of five features everyone should have on their radar. We try to keep things simple and fun, but there's a lot of power under the 'hood that enables all kinds of creators, from beginners to experienced professionals.

You might have already discovered Rewind, Glitch’s version control system, but did you know that a Glitch project is also its own Git repo?

And it gets better - in addition to giving you a commit system, you can import/export to Github. Import a project from Github for a great starter project experience. Then export your Glitch project to Github if you need an external repository for your code.

Need console access? We’ve got you covered.

Fire up your Glitch project in the editor. Click the “Tools” button located on the left side of the editor to reveal the Tools menu. Then, click “Terminal.” Presto - a fully functional console ready for your commands.

You’ve probably discovered the Glitch editor’s built-in “Format This File.” We use the fabulous Prettier library for this, and have the default options applied. 

Want to do even more? Use a .prettierrc JSON configuration file in your project to set your own preferences.

Hosting a project with API tokens, passwords, or other sensitive information? You can (and should!) store private data securely inside the .env file. It’s a secure environment config section of your project, and only invited collaborators are able to see the contents.

If you need help using Glitch or want to see a new feature added, head to the support forum where you'll find some of the friendliest, most creative coders on the web. And after you've made something awesome, share it with us via email or tag on on Twitter @glitch. 

Get the Most out of Glitch with These Four Pro Tips

Last week we showed how our community has been using WebXR to create new worlds and tell stories in 3D. There’s a lot to be said, though, about how much you can create with only two dimensions. The Glitch community has not only been showing what can be done with a little bit of JavaScript and map tiles, but they’re changing the way we think about maps entirely! These projects don’t just help us get to a place, but they tell compelling stories as well.

Let’s take a look at some of our recent favorites.

Carta Marina, a map of fantastical Nordic sea creatures

Creator @mapsmania has been making some of the coolest interactive maps ever! Some are location-based like their interactive history of the London tube, but some like ~carta-marina guide us through art and history in a really unique way. Every map enthusiast would enjoy their blog, Maps Mania.

Waking and Sleeping, a world map of wakedness

This real-time map of users tweeting “good morning” and “good night” across the world does what most maps don’t do: remind us that we’re not alone. Its creator, creative technologist @bookwormgirl910, describes the project as “a reflection on world interconnectedness and our daily waves and flares of activity and wakedness across the globe.” I recommend you check out the about page of the project to learn how it works and what limitations Katherine faced around languages and geotagging with the Twitter API in particular.

Supertall Vacancies, a story of NYC housing in the shadows of luxury vacancies

This interactive map by @apr2136 and collaborators at Columbia’s Points Unknown takes a look at both commercial and residential real estate in Manhattan and vacancy trends from recent years, and even gives a literal voice to doormen who have witnessed the impact of luxury housing surplus firsthand. 

If you have a story to tell, it’s clear from the above projects that using maps is a great way to get your readers interested. And with Glitch, you can have something running in seconds–you can remix all of the above awesome map projects and more in our collection of storytelling maps. The collection also includes some apps that can get you started with the JavaScript libraries that these creators used for their own projects:

Leaflet.js, a lightweight and open source library for creating apps that are mobile friendly. We created this Guide to Leaflet including remixable apps to get you up and running.

Mapbox, a location data platform that lets you build powerful location-based apps on the web. They’re on Glitch at @mapbox and have posted some great apps to get you started!

We can’t wait to see what you create and what stories you tell–we’d love for you to let us know about them! If you have Glitch projects you’d like us to feature, tweet them to us @glitch or email community@glitch.com! ✨

The project featured in this post's header image is ~lhh by @darzhz

Worlds to Explore: Storytelling with Maps

With all of the physical dance clubs closed, people are looking to emerging digital venues for entertainment and community. One of those is Club Quarantine, a queer online rave that hosts shows on Zoom every night of the week. 

On April 27th, live coder Lil Data performed a set at Club Quarantine while creative coder Cabbibo controlled the visuals through a Glitch project. They were nice enough to answer some of my questions about the performance via Twitter and email.

Have you ever done a remote live show before? What was the experience like, how does it differ and how is it similar to a show at a venue?

Lil Data: I've been doing remote works and working with themes of telematic intimacy for almost as long as Lil Data has existed since 2014. When I was at SXSW 2015 playing the first big PC Music Showcase I simultaneously had a remote interactive installation happening as part of an Algorave at Access Space, Sheffield, UK.

That piece is still online — for the audio to work you need to perform some user gestures before the page finishes loading. The page features a grid of words which when clicked turn into their opposite (good turns to evil, etc) and flip the generative music that's running on the page. It's like a jukebox but operates at the abstraction level of a track rather than a music catalogue. 

The word-music mappings came from an interactive essay I did for DIS Magazine (RIP). The mappings are mirrored across all viewers, so the webpage was projected in the venue walls in Sheffield and the audience were controlling the music via their phones. I was also viewing the live stream and the webpage from Austin, Texas, watching and hearing as people collectively played this web-based multiplayer musical instrument. Initially people tended to press all the buttons, but after a surprisingly short time a collective sensibility and stability emerged.

Lil Data x Cabbibo Live Coding @ Club Quarantine x Namasenda Dare Pre-Party 27/4/20

For me, it doesn't make sense to differentiate shows as IRL versus URL, what's important is the atmosphere created by the context and audience, and on my side the depth of flow I am able to access.

Performing to me is like being an energy conduit channeling through a membrane that varies in thickness depending on those factors I just mentioned. If I'm really in the moment that membrane disappears and everything becomes attuned, and everyone mutually senses each other's attunement, and this feeling is the same for me wherever I play.

I definitely felt attunement and transparency when playing this show for Club Quarantine, even more than I've felt at some IRL shows. Their use of Zoom as a jumbotron, and how hyped and dressed up and gorgeous everyone is, made it really intimate for me and gave me permission to express myself. 

Even more special in this case was Cabbibo live coding a website via Glitch based on a sketch by Mr.doob, where people could control little avatars on screen that you can see in the video. We first did an interactive together for my Sup EP in 2014 (also still live, buried in data.pcmusic.info), and I was supposed to be visiting Cabbibo last month but my trip got cancelled. So this was important for us to do something in spite of the pandemic.

How did you decide on what music to play? Did you make any decisions because of the virtual venue?

Lil Data: This show was celebrating Namasenda's new single Dare AM/PM on PC Music, and I was playing first, so my set was designed to welcome everyone and get them excited for Hannah Diamond who was playing after me. Namasenda and me share a love for euro trance, dance pop, nightcore, generally anything fast and bouncy with high-pitched vocals, so I did live edits of Venga Boys and Special D specially for her.

Another edit I did was of GAIKA whose music I adore, plus edits of Charli XCX's new singles Forever and Claws which are both really amazing, along with a re-edit of my Vroom Vroom edit which is a crowd pleaser. I had to put this set together really fast but was quite pleased with it in the end, had a couple of hiccups so only uploaded about half to YouTube in the end. This was my first live stream since the pandemic began and it was great so I'm up for doing more, although I really want to go beyond video streaming and explore ways of streaming computation itself.

What kind of changes did you make during the show?

Cabbibo: Part of the show, for example, it was just emojis on a white background, but then I would push something that would make it so the background would clear [and] everyone’s movements turned into drawings. 

Then [I] would push a change so it would glitch the background while people were moving around or change the background color and pattern, or make it so everyone’s emojis were different sizes or whatever.

How did you decide what to do for the visuals? Did emojis, glitches, etc. come to mind immediately or was there a lot of experimentation?

Cabbibo: [We] tried a few different things, sort of starting with Mr. doob’s multiplayer sketchpad. The more we did it the more we a) wanted it to feel like a party and b) wanted to fit as many people as possible, but also didn’t know if it would work at all, so [we] wanted to make it fun even if no one was there. 

From there it was just like “what set of emojis should we use?” and “what will make people get excited for what’s next?” For me it was also like “how the heck do I use the Canvas API?” so I sort of coded up a few things to parameterize beforehand, but ended up making the glitch effect for the first time during the show.

Check out Lil Data, Cabbibo and Club Quarantine to keep up with their upcoming projects and shows.

Virtual Dance Clubs Are Creating New, Thriving Communities

The code for this tutorial is available on GitHub. You can also check out the live demo of the app on Glitch

The first endpoints of the new Twitter API are out and waiting for you to explore and build apps with in order to understand what’s happening in the public conversation.

This tutorial will walk you through how to build your own real-time Tweet streaming app using the filtered stream endpoints and Tweet annotations to listen for Tweets based on your own topics of interest.

After building the app, you will learn about how it can be applied to some real-life examples to inspire you to get started such as.

Discovering new music videos: Imagine a dashboard that lets you see the music videos being shared across Twitter

Finding remote developer job openings: Imagine creating a remote developer job listings app with remote developer job openings being shared across Twitter

Learning about personal finance and savings: Surface public conversations about personal finance and savings happening on Twitter

To get started here’s what you will need:

You must have an approved developer account, and have activated the new developer portal experience. If you don’t have one already, you can apply for one. Access is available with active keys and tokens for a developer App that is attached to a Project created in the developer portal. 

A Bearer Token from your App in the Twitter developer portal.

Npm (This is automatically installed with Node. Make sure you have npm 5.2 or higher.)

First, install Node.js. Check out the Downloads section from Node’s website and download the source code or installer of your choice. Alternatively, if you are running on a Mac you can install the Node package using the Brew package manager

Open a terminal window and bootstrap your React app using create-react-app by using npx. 

npx create-react-app real-time-tweet-streamer

After create-react-app has finished executing, change to the newly created real-time-tweet-streamer directory and replace the scripts block in your package.json with the following script block in your package.json. These lines will provide a command shortcut to concurrently run your client and server backend code in development or production as needed.

"scripts": {
  "start": "npm run development",
  "development": "NODE_ENV=development concurrently --kill-others \"npm run client\" \"npm run server\"",
  "production": "npm run build && NODE_ENV=production npm run server",
  "client": "react-scripts start",
  "server": "node server/server.js",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

After updating the scripts section, your package.json should now look as follows.

Next, remove all files within the src/ subdirectory. 

Then, create a new file within the src/ subdirectory called index.js. The code for this file will be as follows.

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";

ReactDOM.render(<App />, document.querySelector("#root"));

Connecting to the filtered stream endpoints requires you to authenticate using a bearer token from your app in the Twitter developer portal. To utilize your bearer token, you will need to have the following environment variable set. You can do so by issuing the following command in your terminal window assuming you are using bash as your shell. Replace <YOUR BEARER TOKEN HERE>, including the left and right angle brackets, with your bearer token.

export TWITTER_BEARER_TOKEN=<YOUR BEARER TOKEN HERE>

First, you will need to get started with implementing the Node server, which will be responsible for making the actual requests to the Twitter API. This Node server will serve as a proxy between your browser-based React client and the Twitter API. On your Node server, you will need to create API endpoints that connect to the filtered stream endpoints. In turn, requests from your React client will be proxied through to your local Node server. 

Before you go any further, cd to the project root directory and install the following dependencies

npm install concurrently express body-parser util request http socket.io path http-proxy-middleware request react-router-dom axios socket.io-client react-twitter-embed

Next, while still within your project root directory, create a new subdirectory called “server” and a new file within that subdirectory called “server.js”. 

This source code file will contain all of your backend logic for connecting to and receiving Tweets from the filtered stream endpoint. The contents of your server.js file will be as follows.

Filtering Tweets on the filtered stream endpoint using rules

Filtered stream has two endpoints, a streaming endpoint, to receive data and a rules endpoint that is used to create and delete rules. The filtered stream endpoints require you to define search queries called rules, in order for it to know what kind of Tweets to send to you. Rules allow you to narrow down to only the Tweets you are looking for by using a set of operators. You will see some example use cases and corresponding rules you can use later once you finish building the app.

The other filtered stream endpoint is the streaming endpoint, which uses a simple GET connection. Once a connection is established, Tweets are delivered in JSON format through a persistent HTTP streaming connection. You will only receive Tweets matching your rules while connected to the stream. 

The next step is to work on the following React components

App.js - The parent component that be will, in turn, render all other components

NavBar.js - Displays the navigation bar for navigating between the Tweet feed and managing rules

Tweet.js - Displays a Tweet on the page 

TweetFeed.js - Renders multiple Tweet components at once in a “feed” like fashion

Rule.js - Renders an individual rule on your stream

RuleList.js - Renders multiple Rule components and displays an input field to add a rule

ErrorMessage.js - Renders any status or error messages to the screen

Spinner.js - Renders a loading indicator for any pending API calls

Now you will need to get started with creating the React components. Under your /src subdirectory, create a directory called “components”. The source code files above will be stored in this new directory. First, create the parent most component of the application. This component will be responsible for rendering all other components.

import React from "react";
import { BrowserRouter, Route } from "react-router-dom";

import Navbar from "./Navbar";
import TweetFeed from "./TweetFeed";
import RuleList from "./RuleList";

class App extends React.Component {
  render() {
    return (
      <div className="ui container">
        <div className="introduction"></div>

        <h1 className="ui header">
          <div className="content">
            Real Time Tweet Streamer
            <div className="sub header">Powered by Twitter data</div>
          </div>
        </h1>

        <div className="ui container">
          <BrowserRouter>
            <Navbar />
            <Route exact path="/" component={RuleList} />
            <Route exact path="/rules" component={RuleList} />
            <Route exact path="/tweets" component={TweetFeed} />
          </BrowserRouter>
        </div>
      </div>
    );
  }
}

export default App;


Next, create the component for the navigation bar.

import React from "react";
import { NavLink } from "react-router-dom";

const Navbar = () => {
  return (
    <div className="ui two item menu">
      <NavLink to="/tweets" className="item" target="_blank">
        New Tweets
      </NavLink>
      <NavLink to="/rules" className="item" target="_blank">
        Manage Rules
      </NavLink>
    </div>
  );
};

export default Navbar;


Next, create the parent component for rendering all job listings.

import React, { useEffect, useReducer } from "react";
import Tweet from "./Tweet";
import socketIOClient from "socket.io-client";
import ErrorMessage from "./ErrorMessage";
import Spinner from "./Spinner";

const reducer = (state, action) => {
  switch (action.type) {
    case "add_tweet":
      return {
        ...state,
        tweets: [action.payload, ...state.tweets],
        error: null,
        isWaiting: false,
        errors: [],
      };
    case "show_error":
      return { ...state, error: action.payload, isWaiting: false };
    case "add_errors":
      return { ...state, errors: action.payload, isWaiting: false };
    case "update_waiting":
      return { ...state, error: null, isWaiting: true };
    default:
      return state;
  }
};

const TweetFeed = () => {
  const initialState = {
    tweets: [],
    error: {},
    isWaiting: true,
  };

  const [state, dispatch] = useReducer(reducer, initialState);
  const { tweets, error, isWaiting } = state;

  const streamTweets = () => {
    let socket;

    if (process.env.NODE_ENV === "development") {
      socket = socketIOClient("http://localhost:3001/");
    } else {
      socket = socketIOClient("/");
    }

    socket.on("connect", () => {});
    socket.on("tweet", (json) => {
      if (json.data) {
        dispatch({ type: "add_tweet", payload: json });
      }
    });
    socket.on("heartbeat", (data) => {
      dispatch({ type: "update_waiting" });
    });
    socket.on("error", (data) => {
      dispatch({ type: "show_error", payload: data });
    });
    socket.on("authError", (data) => {
      console.log("data =>", data);
      dispatch({ type: "add_errors", payload: [data] });
    });
  };

  const reconnectMessage = () => {
    const message = {
      title: "Reconnecting",
      detail: "Please wait while we reconnect to the stream.",
    };

    if (error && error.detail) {
      return (
        <div>
          <ErrorMessage key={error.title} error={error} styleType="warning" />
          <ErrorMessage
            key={message.title}
            error={message}
            styleType="success"
          />
          <Spinner />
        </div>
      );
    }
  };

  const errorMessage = () => {
    const { errors } = state;

    if (errors && errors.length > 0) {
      return errors.map((error) => (
        <ErrorMessage key={error.title} error={error} styleType="negative" />
      ));
    }
  };

  const waitingMessage = () => {
    const message = {
      title: "Still working",
      detail: "Waiting for new Tweets to be posted",
    };

    if (isWaiting) {
      return (
        <React.Fragment>
          <div>
            <ErrorMessage
              key={message.title}
              error={message}
              styleType="success"
            />
          </div>
          <Spinner />
        </React.Fragment>
      );
    }
  };

  useEffect(() => {
    streamTweets();
  }, []);

  const showTweets = () => {
    if (tweets.length > 0) {
      return (
        <React.Fragment>
          {tweets.map((tweet) => (
            <Tweet key={tweet.data.id} json={tweet} />
          ))}
        </React.Fragment>
      );
    }
  };

  return (
    <div>
      {reconnectMessage()}
      {errorMessage()}
      {waitingMessage()}
      {showTweets()}
    </div>
  );
};

export default TweetFeed;

Next, create the child component for the previous component that renders an individual Tweet. 

import React from "react";
import { TwitterTweetEmbed } from "react-twitter-embed";

const Tweet = ({ json }) => {
  const { id } = json.data;

  const options = {
    cards: "hidden",
    align: "center",
    width: "550",
    conversation: "none",
  };

  return <TwitterTweetEmbed options={options} tweetId={id} />;
};

export default Tweet;


Next, create the component responsible for rendering all the rules on our stream as well as displaying input controls for creating new rules. In this case, we will only be using one rule.

import React, { useEffect, useReducer } from "react";
import axios from "axios";
import Rule from "./Rule";
import ErrorMessage from "./ErrorMessage";
import Spinner from "./Spinner";

const reducer = (state, action) => {
  switch (action.type) {
    case "show_rules":
      return { ...state, rules: action.payload, newRule: "" };
    case "add_rule":
      return {
        ...state,
        rules: [...state.rules, ...action.payload],
        newRule: "",
        errors: [],
      };
    case "add_errors":
      return { ...state, rules: state.rules, errors: action.payload };
    case "delete_rule":
      return {
        ...state,
        rules: [...state.rules.filter((rule) => rule.id !== action.payload)],
      };
    case "rule_changed":
      return { ...state, newRule: action.payload };
    case "change_loading_status":
      return { ...state, isLoading: action.payload };
    default:
      return state;
  }
};

const RuleList = () => {
  const initialState = { rules: [], newRule: "", isLoading: false, errors: [] };
  const [state, dispatch] = useReducer(reducer, initialState);
  const exampleRule = "from:twitterdev has:links";
  const ruleMeaning = `This example rule will match Tweets posted by 
     TwtterDev containing links`;
  const operatorsURL = "https://developer.twitter.com/en/docs/twitter-api/tweets/filtered-stream/integrate/build-a-rule";

  const rulesURL = "/api/rules";

  const createRule = async (e) => {
    e.preventDefault();
    const payload = { add: [{ value: state.newRule }] };

    dispatch({ type: "change_loading_status", payload: true });
    try {
      const response = await axios.post(rulesURL, payload);
      if (response.data.body.errors)
        dispatch({ type: "add_errors", payload: response.data.body.errors });
      else {
        dispatch({ type: "add_rule", payload: response.data.body.data });
      }
      dispatch({ type: "change_loading_status", payload: false });
    } catch (e) {
      dispatch({
        type: "add_errors",
        payload: [{ detail: e.message }],
      });
      dispatch({ type: "change_loading_status", payload: false });
    }
  };

  const deleteRule = async (id) => {
    const payload = { delete: { ids: [id] } };
    dispatch({ type: "change_loading_status", payload: true });
    await axios.post(rulesURL, payload);
    dispatch({ type: "delete_rule", payload: id });
    dispatch({ type: "change_loading_status", payload: false });
  };

  const errors = () => {
    const { errors } = state;

    if (errors && errors.length > 0) {
      return errors.map((error) => (
        <ErrorMessage key={error.title} error={error} styleType="negative" />
      ));
    }
  };

  const rules = () => {
    const { isLoading, rules } = state;

    const message = {
      title: "No rules present",
      details: [
        `There are currently no rules on this stream. Start by adding the rule 
        below.`,
        exampleRule,
        ruleMeaning,
      ],
      type: operatorsURL,
    };

    if (!isLoading) {
      if (rules && rules.length > 0) {
        return rules.map((rule) => (
          <Rule
            key={rule.id}
            data={rule}
            onRuleDelete={(id) => deleteRule(id)}
          />
        ));
      } else {
        return (
          <ErrorMessage
            key={message.title}
            error={message}
            styleType="warning"
          />
        );
      }
    } else {
      return <Spinner />;
    }
  };

  useEffect(() => {
    (async () => {
      dispatch({ type: "change_loading_status", payload: true });

      try {
        const response = await axios.get(rulesURL);
        const { data: payload = [] } = response.data.body;
        dispatch({
          type: "show_rules",
          payload,
        });
      } catch (e) {
        dispatch({ type: "add_errors", payload: [e.response.data] });
      }

      dispatch({ type: "change_loading_status", payload: false });
    })();
  }, []);

  return (
    <div>
      <form onSubmit={(e) => createRule(e)}>
        <div className="ui fluid action input">
          <input
            type="text"
            autoFocus={true}
            value={state.newRule}
            onChange={(e) =>
              dispatch({ type: "rule_changed", payload: e.target.value })
            }
          />
          <button type="submit" className="ui primary button">
            Add Rule
          </button>
        </div>
        {errors()}
        {rules()}
      </form>
    </div>
  );
};

export default RuleList;


Next, create the child component of RuleList.js responsible for displaying a single rule and deleting a rule.

import React from "react";

export const Rule = ({ data, onRuleDelete }) => {
  return (
    <div className="ui segment">
      <p>{data.value}</p>
      <div className="ui label">tag: {data.tag}</div>
      <button
        className="ui right floated negative button"
        onClick={() => onRuleDelete(data.id)}
      >
        Delete
      </button>
    </div>
  );
};

export default Rule;


Next, create a component for displaying any status or error messages.

import React from "react";

const ErrorMessage = ({ error, styleType }) => {
  const errorDetails = () => {
    if (error.details) {
      return error.details.map(detail => <p key={detail}>{detail}</p>);
    } else if (error.detail) {
      return <p key={error.detail}>{error.detail}</p>;
    }
  };

  const errorType = () => {
    if (error.type) {
      return (
        <em>
          See
          <a href={error.type} target="_blank" rel="noopener noreferrer">
            {" "}
            Twitter documentation{" "}
          </a>
          for further details.
        </em>
      );
    }
  };

  return (
    <div className={`ui message ${styleType}`}>
      <div className="header">{error.title}</div>
      {errorDetails()}
      {errorType()}
    </div>
  );
};

export default ErrorMessage;


Finally, create a component to display a loading indicator during any pending API calls.

import React from "react";

const Spinner = () => {
  return (
    <div>
      <div className="ui active centered large inline loader"></div>
    </div>
  );
};

export default Spinner;

The final step is to proxy requests from your client to your backend server. To do this, from within your src/ directory, create a new file called “setupProxy.js” and add the following code.

const { createProxyMiddleware } = require("http-proxy-middleware");

// This proxy redirects requests to /api endpoints to
// the Express server running on port 3001.
module.exports = function (app) {
  app.use(
    ["/api"],
    createProxyMiddleware({
      target: "http://localhost:3001",
    })
  );
};


You can now start up both the server and client by going to the project root directory and typing the following.

After this command completes, your default web browser should automatically launch and navigate to http://localhost:3000. You will then be taken to the rules management section of the app.

Now that you have an app in place to listen for any kind of Tweet you want, let’s walk through some real-life examples of how this app can be used such as

Learning about personal finance and savings

For each of the examples and accompanying rules listed below, you can navigate to the rules section of the app and simply copy and paste the rule into the input field to add it to your stream. Once the rule has been added, it will take  effect within seconds and only Tweets matching the criteria of that rule will be sent to you.

In this first example, let’s say you are interested in finding remote developer job 

openings. To surface these kinds of Tweets, you can use the following rule.

(developer OR engineer) remote (context:66.961961812492148736 OR context:66.850073441055133696)

To understand what this rule is doing, you can break it down into two parts. The keywords part and the Tweet annotations part.

The keywords part of the rule will match Tweets containing the keywords “developer” or “engineer” and the keyword “remote”. These keywords alone will certainly match Tweets containing remote developer job postings, but it will also match on irrelevant Tweets. For example, the Tweet below will match this rule.

https://twitter.com/EraserFarm/status/1220013392766947332

Since this is not the desired Tweet, you need to take this rule a step further. Though this rule matches irrelevant Tweets, it is also successful in matching Tweets with actual job postings. For example, the rule you have so far will also result in matching the Tweet below.

https://twitter.com/plataformatec/status/1225460423761317888

Tweet annotations: Using context operators

The challenge you have now is, though you are receiving Tweets containing job postings you will still have to go through irrelevant Tweets. If only there was a way to only match on Tweets that contain job postings as best as possible. Are there operators you can use in your rule that only match these relevant Tweets? 

Fortunately, this is where the power of Tweet annotations comes in. Take a closer look at an example Tweet object payload that was sent for this Tweet on your filtered stream endpoint. Within the payload, the nested “context_annotations” field is present. Context annotations are delivered as a “context_annotations” field in the payload. These annotations are inferred based on the Tweet text and result in the domain and/or entity labels, which can be used to discover Tweets on topics that may have been previously difficult to surface. Note, that these fields will only be included if data is present since not all Tweets will contain this data. 

      "context_annotations": [
        {
          "domain": {
            "id": "66",
            "name": "Interests and Hobbies Category",
            "description": "A grouping of interests and hobbies entities, like Novelty Food or Destinations"
          },
          "entity": {
            "id": 961961812492148736,
            "name": "Recruitment",
            "description": "Recruitment"
          }
        },
        {
          "domain": {
            "id": "66",
            "name": "Interests and Hobbies Category",
            "description": "A grouping of interests and hobbies entities, like Novelty Food or Destinations"
          },
          "entity": {
            "id": "850073441055133696",
            "name": "Job search",
            "description": "Job search"
          }
        }
      ],

To match on the domain and entity ids within the context_annotations field, you can use the “context” operator. The “context” operator can be used to instruct your filtered stream endpoint to match on Tweets containing specific domain and entity names. Here’s what that would look like.

(context:66.961961812492148736 OR context:66.850073441055133696)

The operators above follow the format “context:<domain id>.<entity id>”. As seen in the example payload above, the domain id 66 represents the “Interests and Hobbies Category”. The entity ID 961961812492148736 represents the “Recruitment” entity and the entity ID 850073441055133696 represents the “Job search” entity. For a complete list of domains, the Tweet annotations docs contain a table with 50+ domain names.

With the operator explanation out of the way, this 2nd part of the rule matches Tweets containing the entity names “Recruitment” or “Jobs search”.

In summary, taking both parts of this rule together, it will match on Tweets that contain the keywords “developer” or “engineer” and the keyword “remote”, but only if those Tweets also contain the entity names “Recruitment” or “Jobs search”

If you need new music video suggestions, you can start by using a simple rule that matches on Tweets containing the keywords “song” and “YouTube”. You will also want Tweets that actually link out to external videos

Taking a closer look at the payload of this Tweet, you see that it has some annotations on it that can help you match more relevant Tweets. Notice the Annotation with an entity label of “Pop” and a domain name of “Music Genre”

     "context_annotations": [
        {
          "domain": {
            "id": "10",
            "name": "Person",
            "description": "Named people in the world like Nelson Mandela"
          },
          "entity": {
            "id": "871815676998033408",
            "name": "Ally Brooke",
            "description": "Ally Brooke"
          }
        },
        {
          "domain": {
            "id": "54",
            "name": "Musician",
            "description": "A musician in the world, like Adele or Bob Dylan"
          },
          "entity": {
            "id": "871815676998033408",
            "name": "Ally Brooke",
            "description": "Ally Brooke"
          }
        },
        {
          "domain": {
            "id": "55",
            "name": "Music Genre",
            "description": "A category for a musical style, like Pop, Rock, or Rap"
          },
          "entity": {
            "id": "810938279801470977",
            "name": "Pop",
            "description": "Pop"
          }
        }
      ],

To make this rule better and narrow down your Tweets to be even more relevant, you can update your rule as follows.

song youtube has:links context:55.810938279801470977

This will take the original rule you used a step further by narrowing down to only the Tweets that are labeled with the Music Genre domain label and the Pop entity label.

As a final example, let’s say you are interested in learning about personal finance and you can be savvier about your spending and savings. You also only want original Tweets that contain links to online articles to learn more. 

Going through a similar process as you did with earlier examples if you simply add the following rule, only Tweets containing the words “personal”, “finance” and “savings” will be sent to you.

Taking a look at one of the Tweet payloads, the nested annotations contains an entity label about personal finance that will help you narrow down your Tweets to the most relevant ones

 "annotations": {
          "context": [
            {
              "context_domain_id": 66,
              "context_domain_id_str": "66",
              "context_domain_name": "Interests and Hobbies Category",
              "context_domain_description": "A grouping of interests and hobbies entities, like Novelty Food or Destinations",
              "context_entity_id": 847888632711061504,
              "context_entity_id_str": "847888632711061504",
              "context_entity_name": "Personal finance",
              "context_entity_description": "Personal finance"
            },

Using the context operator to match on Tweets containing this label, you can revise your rule to look as follows

The first endpoints of the new Twitter API are out and waiting for you to explore and build apps with in order to understand what’s happening in the public conversation.

This tutorial will walk you through how to build your own real-time Tweet streaming app using the filtered stream endpoints and Tweet annotations to listen for Tweets based on your own topics of interest.