For our latest newsletter, I interviewed head of product, Jesse von Doom, who not only made this beautiful collection of colors in text happen, but he also created this well-commented demo on Glitch that walks you step by step through making a gradient header with different colored links. 

I asked him a few questions about the process, but we couldn’t fit it all into the newsletter, so please enjoy our newest series on the blog: This Was Too Big to Fit in Our Newsletter.

Color is a great tool for communicating a lot of nuance in any design. If pictures are worth a thousand words color has to be worth a few hundred at least. At Glitch we work with a wide, bright palette. We’re really intentional about the meaning behind it. We want the first impression of Glitch to be welcoming, optimistic, and lightweight. 

If you look at the Glitch homepage you’ll notice colors chosen for the header are the two main colors in the Glitch logo. On the page the logo itself is tiny, so the header is a call-back while the colors chosen for the links themselves are some of the brightest in our palette. So the idea was to be big and bold in how we invite people to build with Glitch, but to use color to reinforce that our community is inclusive, friendly, playful, and helpful.

(All of this is really valid, but also I just really love rainbows.)

How did you make having two headers shown as one accessible?

This part was super important — we’re technically using two headers to make the effect work. One with the main gradient text, and another mostly-invisible header for the links. It’d be a really bad experience for people using screen readers if the header were read twice, so we hide the header without links from screen readers using the `aria-hidden` attribute. 

What was the most challenging part of making it all work?

Getting two slightly different bits of text to wrap identically at all responsive screen sizes is a lot of attention to detail. So it meant explicitly setting a lot more CSS properties than usual, and adding a few extra spans to make sure each header matches the other’s footprint exactly. And with a header it’s also worth paying attention to a few other typographic bits like wrapping commas with links, etc. 

Shouts out to Jesse for making that magic happen. And because his demo is on Glitch, you can poke around the code and remix it for yourself! If you make a project with rainbows, text or otherwise, let us know by tweeting @glitch or send us an email at community@glitch.com. 🌈

This Was Too Big to Fit in Our Newsletter: How We Got Rainbows on the Homepage

The WebXR community has been building all sorts of amazing immersive experiences on Glitch, as well as fun, low-barrier learning projects you can use to start trying these techniques out yourself. In this tutorial, we’re going to walk you through creating a virtual festive greetings card you can share with your friends! It’s totally free, and all you need is the regular web browser you already have. You’ll be using A-Frame, a framework for building VR apps for the web–the team and community have built a ton of handy apps you can remix and edit surprisingly easily. 

Remixing will create your own copy of the project–it’ll open in the editor and you’ll see the preview of the app on the right.

Take a quick look at what’s in the project–there’s not much there! We’re mainly going to be working in index.html, so open the file for editing.

Hit the Format This File button at the top of the editor to format your code–this is going to make it easier to read and work with!

Near the top of the HTML you’ll see the A-Frame script being imported–this is all you need to start working with the framework. Now look at the page body, where you’ll find the markup representing the A-Frame entities and components. Take a minute to compare the elements in the markup with what you see displayed in the preview.

The initial scene includes a box, sphere, cylinder, plane, and sky. We’re going to edit these to make them festive and add a little animated interactivity. You don’t need a VR headset for any of what we do in this tutorial, but it is fun to view in one if you have it (even a cardboard viewer on your phone)!

We’ll include images you can use in your project below but feel free to use your own–if you make a nice version you want to show off please let us know! You'll also find all of the pics in the final ~festive-aframe demo project embedded near the end of the tutorial.

Let’s start by adding a night sky background for our festive scene. Save this image:

In your Glitch project, upload it into assets. Once uploaded, select it and copy its URL.

In your HTML, find the sky element, remove the color="#ECECEC" attribute and replace it with a src attribute using your uploaded image URL as the value, so it’ll look something like this:

<a-sky src="https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/nightsky.png?v=1639737437152"></a-sky>

Let’s also make the plane under the shapes look wintery. Save this snowy pic and upload it into assets:

Replace the plane element color attribute with a src attribute using the URL for your uploaded snow pic (make sure you remove the color attribute or it will tint the image):

src="https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/snow.jpg?v=1639740045726"

Let’s turn the box into a parcel. Take a look at the a-box element, which is a primitive shape. The attributes specify the box position, rotation, and color (this is just a hex value like you’ll see in HTML and CSS): 

The position is represented by x, y, and z values–the z can be tricky to get accustomed to when you start learning to work in 3D so you might like to play around with the values later to get a sense of how they work.

The rotation is represented as around the x, y, and z axes (known as pitch, yaw, and roll)–again, messing around with these in your own project is the best way to get to grips with them.

You’ll notice that the shapes have light and shade added automatically–this is due to the default lighting, but you can change it.

Instead of a block color, let’s give the box a pattern asset to make it look like a parcel. Save this image:

Upload it into your assets also and copy the URL.

Back in index.html, remove the color attribute and instead add one for the image source, with the asset URL as it’s value–it should something look like this:

src="https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/wrapping.png?v=1639738100571"

Keep hitting the Format This File button as you edit the file to make it easy to see your changes.

Your preview should update with the new pattern!

Let’s turn the cylinder into a tree. Make it a cone shape by changing the opening and closing tags from a-cylinder to a-cone. Tweak the size–the cone accepts an attribute to set the bottom radius, so change radius to radius-bottom, leaving the value at 0.5.

<a-cone
    position="1 0.75 -3"
    radius-bottom="0.5"
    height="1.5"
    color="#FFC65D"
    ></a-cone>

OK so far so good, but it doesn’t really look like a tree yet–we’ll use another image asset for that, so save it:

Upload it in your assets like before, copying the URL. Back in the HTML remove the color attribute and replace it with a src attribute that looks like this:

src="https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/tree-pattern.png?v=1639737942800"

Let’s turn the sphere into a snowglobe–first we’ll need to make it look like glass. Save this opaque PNG (it's there, honest, right-click or control+click below):

Upload it into your project assets as before. This time we’re going to use it as a texture, so we’ll add a new section to the A-Frame scene to store assets–near the top of the code inside the a-scene:

<a-assets>
    <img
      id="glass"
      src="https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe.png?v=1639738756848"
    />
</a-assets>

Now we can use the id to specify this image as a texture. In the opening tag of your sphere element, remove the color attribute and instead add a material attribute:

material="transparent: true; src: #glass"

Let’s rotate the image a little so that the gradient hits a nice spot within the view–add a rotation property to the sphere element:

Let’s put a photo inside it–we’ll use a cylinder, so add a new shape after the sphere:

<a-cylinder
    radius="1.23"
    position="0 1.25 -5"
    rotation="0 90 90"
    width="4"
    height="0.1"
    geometry="segmentsRadial:64"
    ></a-cylinder>

We set the positioning to make the cylinder appear inside the sphere, and the radius is slightly smaller than the globe so that the glass is visible around it.

You can use your own photo if you’d like to personalize the snowglobe, but feel free to use any of these cute twemoji pics:

Upload your picture into assets and copy the URL again. You can include the twemoji pics using these URLs if you like instead:

Santa https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-santa.png?v=1639740868189

Sloth https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-sloth.png?v=1639740872078

Heart https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-heart.png?v=1639740879770

Smiley https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-smile.png?v=1639740883742

Chick https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-chick.png?v=1639740887359

Fish https://cdn.glitch.me/04d3158d-1c2b-4dc5-ae7f-4f046499a21b/globe-fish.png?v=1639740891328

Add your pic URL to the cylinder as src attribute:

Let’s give the snowglobe a base too–add another cylinder shape after the one you added for the photo:

<a-cylinder
    radius="1"
    position="0 0.15 -5"
    width="4"
    height="0.2"
    color="#cdcdcd"
    geometry="segmentsRadial:64"
    ></a-cylinder>

Now let’s add a message you can customize. 3D text is tricky in VR, so we’ll keep it simple and just use 2D–this time we’ll use an entity, which is a core A-Frame technique you’ll see much more of if you continue learning. The attributes represent A-Frame components, specifying the entity detail.

<a-entity
    text="color:white; value: HAPPY HOLIDAYS!"
    position="3.2 4 -4"
    scale="10 10 1"
    ></a-entity>

Change the text to read whatever you like! You may need to tweak the position to make it stay in the center of the display–experiment with the values!

OK so we have a nice looking scene, but it isn’t interactive yet. Let’s add some animated effects on the shapes when the user looks at them.

First we need a camera, add it near the top inside the scene markup:

<a-entity camera look-controls position="0 1.7 0">
    <a-entity cursor="fuse: true; fuseTimeout: 500" position="0 0 -1">
    </a-entity>
</a-entity>


The camera defines the user perspective on the scene, with look controls and a fuse cursor that will allow us to detect when the user is looking directly at a shape. 

Let’s make the tree rotate when the user looks at it, by adding an animation attribute to the cone element:

animation="property: rotation; from: 0 0 0; to: 0 360 0; dur: 5000; easing: easeOutCubic; loop: false; startEvents: fusing;"

We specify the property to animate, which is the rotation. Then we state the positions to rotate from and to, which is a change of 360 around the y axis. We set duration and easing properties, and set the animation not to repeat. We use the startEvents property to trigger the animation when the user looks at the shape.

You can simulate moving around the scene in the preview by clicking and dragging it, so drag the view so that the tree is in the center of the page (or look if you’re using a headset!)

Let’s do something similar with the parcel but we’ll make it expand a little. Add a slightly different animation to the box element:

animation="property: scale; from: 1 1 1; to: 1.1 1 1.1; dur: 1000; dir: alternate; easing: easeInElastic; loop: 2; dir:alternate; startEvents: fusing;"

We use the scale property and loop the animation twice, with alternate direction so that it returns to its original size each time. We also use elastic easing for a bouncy effect.

Let’s also give the snowglobe pic a little animation. Add it to the cylinder that has your uploaded photo displayed in it:

animation="property: rotation; dir: alternate; from: 0 50 90; to: 0 130 90; dur: 5000; loop: true; easing: linear;"

This is similar to the tree but it doesn’t rotate all the way around, just back and forth slightly to give a sense of the globe being a 3D shape.

As a final effect let’s animate the sky, making it continually rotate slowly:

animation="property: rotation; to: -360 0 0; dur: 100000; easing: linear; loop: true;"

Your scene should be looking pretty festive by now–share it with your friends!

Make sure you try it on a VR headset if you have one–just enter the URL for your Glitch app in the browser, e.g. https://festive-aframe.glitch.me

If you want to keep learning, try tweaking the different entities and property values in your project!

OK so we had some fun making a few light edits to the A-Frame base project to make a daft greetings card, but the WebXR community makes some seriously amazing immersive experiences on Glitch. Check out ~xrxmas for a cool snowing effect.

For inspiration check out the playlist of WebXR projects on Glitch. If you have a VR device remember to visit your apps on it–including a cardboard viewer on your phone! We’ve been delighted to see the WebXR development on Glitch and are excited to reveal some editor enhancements in the new year to help support the projects this community of creators is producing!

The WebXR community has been building all sorts of amazing immersive experiences on Glitch, as well as fun, low-barrier learning projects you can use to start trying these techniques out yourself. In this tutorial, we’re going to walk you through creating a virtual festive greetings card you can share with your friends! It’s totally free, and all you need is the regular web browser you already have. You’ll be using A-Frame, a framework for building VR apps for the web, and the team and community have built a ton of handy apps you can remix and edit surprisingly easily.

Make a VR greetings card in just a few steps

Although Glitch is a really powerful platform where you can build full-stack web apps, I also find that one of its simplest, most straightforward features has some pretty amazing potential.

You can easily create and maintain a group-edited collection of Markdown files on Glitch, almost like a Google Docs for Markdown. Once you do, there's a huge set of possibilities of what you can do with those files

If you're here, you already know what Markdown is — it's a way of formatting plain-text files so that they can consistently be parsed into rich text or HTML if you'd like. I've been using Markdown since John Gruber first created it almost 2 decades ago, and it's been amazing to see it become so ubiquitous that many more technical users just assume it's going to be available wherever they want to write.

Markdown also has a few key advantages over the ways that people commonly write together as part of teams or workgroups. In a tool like Google Docs, as good as it is, there are some pretty significant constraints:

There's no built-in formatting styles for code, or even for blockquotes.

You can't just use HTML even if you know it

Copy & paste can still be annoying in the same way that Microsoft Word is frustrating, bringing over unexpected styles or formatting

None of these by itself is a huge problem, but all of them together can be really annoying and frustrating. Meanwhile, trying to edit Markdown files alongside other people is... weirdly hard? You could use a whole complex git-based workflow, but that seems like overkill, and we're spoiled by being used to edit together in Google Docs and Figma and all our other tools that let us collaborate in realtime.

So, the answer to easily editing Markdown files while working together on them as easily as sharing a Google Doc? Glitch!

Take the piece that you're reading right now: I wrote it right on Glitch, and then I could easily share it with my coworkers so they could read over it and offer edits or suggestions if they wanted. It works just like sharing in any other app, without having to go through the complexity of git. And now if I don’t want my notes to be readable by everybody on the Internet, I can just set sharing to be private, and only the people I invited can read what I’ve written.

Now, if I want to undo changes, or go back to an earlier version, I still have git under the hood, automatically saving all my edits as I go. If I want to get really fancy, I can even hook up other tools to my Markdown files on Glitch because it's all accessible as a completely standard git repository. But I don't have to do any of that stuff unless I want to.

And best of all, any people I invite in to share this Glitch project can also create and share their own Markdown files that we all maintain together. If we want to make a knowledge base or a documentation manual together, it's easy enough for a brand new user to jump in, and advanced enough for any coder to feel fully comfortable building on top of. There are even niceties like a fancy little button that will automatically format your file and keep it looking neat and clean.

Of course, since Glitch lets you create and run full-stack apps, the sky's the limit when it comes to using the Markdown files you make on Glitch. If you want, you can build (or import from GitHub) a static site generator, and publish your Markdown files as web pages. You could use the built-in git support to synchronize the repo to another hosting platform or publishing tool. You could write scripts to process your Markdown and output it in any format you want, or to submit it to another platform's APIs. You could even build another Glitch app that uses your documents as data that it works from.

The key thing is, it's just code. You can do anything any standard coding environment lets you do, but it's just easier to get started writing and creating and previewing your Markdown files.

So, if you're looking for an easy way to create and share documents together, and Google Docs isn't a good fit because it's not designed for plain text files, keep Glitch in mind as part of your toolkit. (And let us know if you find good uses for it with your team!)

Although Glitch is a really powerful platform where you can build full-stack web apps, I also find that one of its simplest, most straightforward features has some pretty amazing potential.

You can easily create and maintain a group-edited collection of Markdown files on Glitch, almost like a Google Docs for Markdown. Once you do, there's a huge set of possibilities of what you can do with those files

If you're here, you already know what Markdown is — it's a way of formatting plain-text files so that they can consistently be parsed into rich text or HTML if you'd like. I've been using Markdown since John Gruber first created it almost 2 decades ago, and it's been amazing to see it become so ubiquitous that many more technical users just assume it's going to be available wherever they want to write.

A Google Docs for Markdown

2020 is winding down, but industry events are far from over. And unlike previous years where attending a conference might require getting on a plane or spending all of that professional development budget, online events make attending easier than ever. 

If you’re a developer - especially one interested in javascript, open source, or general web dev - here are some upcoming dates and happenings to put on your radar. 

Advent of Code - December 1-25, Asynchronous

Already under way, Advent of Code, is a series of daily coding challenges that makers of all skill levels can participate in and use any programming language to solve. Similar to #100daysofcode, you can use advent of code to test your speed, sharpen new skills, or participate in a little friendly community competition. The first 100 entries each day get added to a leaderboard. 

Github Universe - December 8-10, 9 - 1:30 PST

With four distinct tracks, you’re sure to find something that piques your interest at this year’s virtual event. The developer track is tailored to open source contributors and maintainers, the enterprise track is for senior leaders and decision-makers, the play track is for creative coders, and last but not least, the university track is for students and teachers. 

If you’re interested in general trends related to open source and the broader developer landscape, add the keynote to your calendar (12/8, 12 PM EST and check out this year’s State of the Octoverse report. 

Learn about updates coming to Chrome and watch speakers share protips on the latest tools and best practices for web devs. We’re looking forward to seeing some really well-produced videos; Googlers working on Chrome have impressed us in years past with their talk, both virtual and in-person. Request a free invite and keep your eyes peeled for some Glitch apps that might make an appearance!

You Got this (from your couch) - January 15 - 16

Kick off the new year with some fresh takes on how to find work-life bliss. The You Got This conference series is dedicated to helping you develop "core skills needed for a happy, healthy work life." The upcoming conference in January is split into paid workshops on Friday (£40 per workshop or £90 for the full day) and free sessions on Saturday, the 16th. The topics are all related to 7 overarching themes: professional development, self care, working with others, ethics in tech, self advocacy, how to best support your teams as managers and diversity, and accessibility & inclusion. Free tickets available here. 

Node Congress - February 18 - 19 (Call for speakers open!)

If you want to spend two days focused on all-things Node, this event is for you. The full schedule hasn’t been published yet, but you can reserve a free ticket today. And if you have something you want to share with the community, you have until January 10 to submit a speaker proposal. 

According to the official website, MozFest is “a unique hybrid: part art, tech and society convening, part maker festival, and the premiere gathering for activists in diverse global movements fighting for a more humane digital world.” Organizers recently made the call to shift from Amsterdam to a virtual event this spring. We attended last year and loved being surrounded by thousands of developers who were just as passionate about making a better, healthier Internet as we are. Call for speakers is officially closed and the schedule should be posted in the beginning of January.

2020 is winding down, but industry events are far from over. And unlike previous years where attending a conference might require getting on a plane or spending all of that professional development budget, online events make attending easier than ever. 

If you’re a developer - especially one interested in javascript, open source, or general web dev - here are some upcoming dates and happenings to put on your radar.

Upcoming Developer Events and Happenings

Over the summer we announced fast and free static sites on Glitch, providing you a way to create and share simple webpages that never go to sleep. Static sites are great for ambitious client-side apps, landing pages for educational demos, compelling artworks from code - basically any project that needs only HTML, CSS and client-side JavaScript to come to life! Some of you have reached out asking how to turn your full-stack JavaScript apps into static sites so you can save on Project Hours and keep your projects awake for free, so I’m going to show you how to get started. 

Glitch distinguishes between a static and full-stack site by watching for any of three simple configuration files:  package.json,  requirements.txt and glitch.json. Those two last files are for configuring apps built in other experimental-to-Glitch languages; for this tutorial I’m going to focus on full-stack JavaScript apps using Node.js, which are configured in package.json. If you’re not familiar with the anatomy of a Node app, you can check out our free zine on Making Web Apps with Node!

To get started, you’ll need a full-stack app that’s running all of its important code on the client-side. For this tutorial I created ~full-stack-to-static, whose server-side code only contains routes for where the client side files are. 

The first thing I do is remove the server-side files and see what breaks and troubleshoot from there. So, I remove package.json, letting Glitch know that this should be a static site. Then I remove server.js, and .env since they will not be run without package.json.

Going to the app view, I see that something looks very wrong. Instead of my index.html content, I see a file listing like this:

This is because my index.html file is still in a“views” folder. Renaming“views/index.html” to“index.html” moves that file in the root of my project and fixes that.

I can now see index.html rendering but I now get errors when trying to load my stylesheet and JavaScript. This is because they are inside a“public” folder but my index.html references them as if they were in the root of my project - something my server-side code had handled before. I can fix this either by updating links in index.html to add the“public/” directory, or by renaming“public/style.css” and“public/script.js” to“style.css” and“script.js”. In this example, I did the latter and now my static site is looking great. Here's an embed of the final result:

Now I have a project that does basically the same thing it was doing before, but it stays awake and it doesn’t count towards my Project Hour limits. I recommend you take a look at your Project Dashboard and see if you have any full-stack projects using up Project Hours that could be refactored to static sites! And for all your projects that need to be full-stack apps, just remember as always that Glitch gives you 1000 free Project Hours each month to run your apps, and subscribers can lift those limits if you need even more.

The project featured in this post's header image is ~iris-cockroach by @potch. Have a project you want us to feature? Tweet them to us @glitch or email community@glitch.com!

Over the summer we announced fast and free static sites on Glitch, providing you a way to create and share simple webpages that never go to sleep. Static sites are great for ambitious client-side apps, landing pages for educational demos, compelling artworks from code - basically any project that needs only HTML, CSS and client-side JavaScript to come to life! Some of you have reached out asking how to turn your full-stack JavaScript apps into static sites so you can save on Project Hours and keep your projects awake for free, so I’m going to show you how to get started...

Going from Full-stack to Static

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

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.

Tips & Tutorials

You Might Also Like