The coming of a new year is a great time to imagine what cutting edge, interactive technology we’ll see trending in web app creation. One trend that I hope to see grow ever more popular on Glitch is the use of body and face motion capture. So, it was a real delight to see Rich Yee launch Kalidoface on Glitch. Rich, a full-time visual designer and free-time creative technologist, has been prolific in the Glitch community, collaborating on Whirly Birdie and creating one of my personal favorites, THEREMIX. I reached out to him to talk more about virtual character technology and how he used Glitch to bring it into the browser.

Jenn: For those who are not familiar, can you explain what virtual characters or VTubers are? And why do you think they are such a compelling technology these days? 

Rich: Vtubers, also known as Virtual Youtubers, are part of a rapidly growing genre on platforms like Youtube or Twitch where creators will base their identities around a digital avatar. While the early days of "Vtubing" (mid 2010s) involved a more expensive full body motion capture setup, the genre has slowly shifted towards face tracking connected to Live2D model, a setup better suited towards streaming. Live2D is a popular character animation format found in mobile games. Kalidoface currently uses official Live2D demo models and also allows users to upload their own Live2D models.

This technology has been a super fun way of merging fiction with reality. While there is backstory and lore behind each VTuber, the creator's voices and subtly animated expressions allow for their personalities to shine through, becoming a mix of fantasy and a genuinely human connection. I definitely couldn't have experienced this much character development by just watching seasonal anime.

Kalidoface is cute, but it’s also really powerful - not only letting users create a virtual character, but also communicate with others. What inspired you to create this app? 

Kalidoface aims to bring native-app-like face capture to the browser. Without needing to install anything, I wanted to create an easy way to animate your own avatars and introduce the concept of “Vtubers” to more people. 

In the early days of development, I surprised some coworkers in Zoom calls using Kalidoface + OBS. However, it wasn't until I added one-on-one voice calling that I felt truly immersed in the world I was trying to make. There was just something special about seeing my long time friend as a talking dog while I was a talking cat that made the moment magical. In fact, I've been able to reconnect with old friends who were more willing to chat using Kalidoface over a regular video call. 

How long was the process from getting the idea to sharing it with the world? 

I started playing around with the idea around early October, trying to get a sense of how feasibility and if the web platform was ready. I think I tried over 4 different face detection methods before finally discovering an official Tensorflow solution. From there, it was a grueling process of figuring out the vector math needed to transform a cloud of points into usable values for character rigging. 

The design and UI of the app took up the other half. I wanted a jellymorphic visual design as I was already thinking that I wanted the mascot for the app to be something cute and squishy. I also wanted to be conscious of safe zone for use in streaming. My talented type designer friend helped make the cute logo, icons and custom illustrations while I was in the weeds trying to assemble it all together. It definitely was a tight deadline, but I wanted to be one of the first creators to release a "Vtuber" app for browsers. 

What made Glitch the place you chose to build and share this project?  

Glitch has always been my preferred platform to prototype web experiments. Being able to work from any computer (and sometimes tablet) is super convenient and powerful. Combined with the fact that I'm running a dev server that doesn't take 1-2 minutes to recompile code has made this my go-to setup. I'm currently using Svelte + Snowpack for that sweet Hot Module Refresh life. 

Glitch as a community has been super welcoming and creators on it are always releasing inspiring web experiments. My last 2 projects have also seen successes on Glitch and I saw no reason not to release Kalidoface on it as well. What can I say, I am a Glitch fan!

I imagine building something like this for (and in) the browser wasn’t possible several years ago - what libraries and APIs available today did you use to build Kalidoface? Were there any pain points you hit in the process? 

Definitely! At the core of this project is Tensorflow's Face Landmarks Detection (formerly Facemesh by Google Mediapipe). Their impressive machine learning model tracks 486 facial points + iris detection. Unlike other models, it tracks well even with glasses on. 

Getting Live2D models to render in the browser was also a challenge. The official SDK is super hard to use and mostly in untranslated Japanese. Luckily, a single developer in China is currently working on a plugin that lets developers use the popular graphics library, PIXI.js with the Live2D format. Him and I went through alot of bug reports and feature requests throughout the development of Kalidoface, and even now, the app uses a beta version of Pixi-Live2D-Display. 

The app is currently in beta, so what can we expect next for Kalidoface? 

1) A mascot! I’d love to commission or learn to draw an original character for Kalidoface. I’m thinking something squishy and bouncy. A time-traveling inter-dimensional jellyfish? Maybe that’s too crazy.

2) Stickers and layers! While you could just open up Kalidoface in OBS and customize your streaming scene to have png images/text layered on top, I do want to offer a simple way to add floating stickers (maybe even animated gifs!) to your canvas. There might even be some Kalidoface exclusive stickers!

And of course, bug fixes. If anyone has any more suggestions, feel free to tweet me @yeemachine. I definitely have a long list and exciting list ahead of me.

Shouts out to Rich for teaching us more about vTubers and the tech behind it, and make sure to try out Kalidoface for yourself! If you build or see an app on Glitch that you want us to feature, tell us about it by emailing community@glitch.com.

New year, new *virtual* you: a conversation with Kalidoface creator Rich Yee

To get everyone in the holiday spirits, we asked Nicolas Grenié, a Developer Advocate at Typeform, to write about the really cool puzzle he put together using different technologies to surprise his wife for the holiday. We hope you enjoy the tale as much as we did ☺️

As we are entering the Holiday season, and everything around us is starting to adorn itself with red, white, and green, I want to take a moment to tell you a modern Christmas tale. But first, call dibs on grandma’s rocking chair, place it near the fireplace, tuck yourself in your favorite plaid, and pour yourself some hot cocoa. You can even drop some tiny marshmallows in it. It will be our little secret.

To be honest, this is not exactly a Christmas tale, but more a cuento de Reyes like people call it in Spain, where my wife is originally from. In Spain, people celebrate more the Epiphany or Three Kings Day (Dia de Los Reyes) than Christmas. It’s very similar and respects a traditional end-of-year holiday triptych: a family gathering, too much food, and presents for all. Every year I join my wife and her family to celebrate this special day together.

So on the 6th day of 2020, full of insouciance about the year to come, bellies packed with exquisite jamon and bubbly cava, it was finally time to gather the whole family around the tree and open presents. The younger ones were tearing shiny wrappings joyfully, unveiling many trucks and dolls. Surprisingly, a mystery box was still untouched. It had my wife’s name on it: Rebeca.

As she started opening it, all the shouting stopped, as everyone watched, young and old, in monastic silence. ‘What was in the box?’ It was nothing they had ever seen before. There was an assortment of differently shaped pieces of various colors along with a tiny post-it note.

I don’t know if you like puzzles, but my wife adores them! And it looked like the Kings’ elves played a trick on her. On the post-it, she could see scribbled drawings of a Puzzle piece, an End sign, a Camera, and a Phone. What would you understand if you saw such rebus? It was probably not as crucial as Archimedes’ discovery, but my wife shouted Eureka when she understood what the scribble meant: solve the puzzle first and then take your phone out to take a picture.

Everyone quickly made room at the dinner table. Pushed the dirty plates and flutes away, this puzzle was a serious business. After a couple of minutes, every piece of the puzzle found its place in the masterpiece.

It looks oddly familiar.
As the post-it instructed, my wife diligently took her phone out and aimed at the finished puzzle, ready to discover what’s next.

At this point in the story, I want to pause and take a moment to thank the engineers, designers, and everyone at Apple that contributed to building the iPhone, an incredible piece of hardware. Thanks to their sense of detail and craftsmanship, they gave life to this scrappy homemade puzzle and turned it into an interactive object.

The iPhone camera detected the QR code pointing, which pointed to a URL hosted on Glitch. There was still no sign of an actual present. Eventually, the URL on the Glitch app redirected to a typeform with another enigmatic message.

Looks like elves were jokesters. The whole family, five adults and three kids, were now gathered around the table, curious to discover the next part of the puzzle. The typeform asked the first riddle: If you are running in a race and pass the person in second place, what position are you in?

The group agreed on the same answer in a snap! “Of course! You become first! So easy! Next!”
And they moved on to the next question.  Excited, they responded quickly and unanimously, as I expected, and they quickly moved to the remaining riddles. The second was a popular one on Twitter at the time: Someone's mom has four sons North, East and West. What is the name of the fourth son. Can you guess the name of the fourth son?

And the final one came from a riddle site for kids:

Black inside
Black outside
So as my heart
Black wood
Who am I?

You should have seen their face when the typeform said: “Whoops, you only have 0 correct answers... Start over.” The elves were definitively the sneaky kind and didn’t make it easy. The adults sat down. They started getting out pens and papers to draw things and put their heads together, trying hard to figure out where and how they went wrong. They were at it for more than an hour, trying one possibility after another. 

In this whole din, no one noticed that my 9-year old nephew, Victor, had found all the correct answers on his own. However, no one stopped to look up and hear him out. Only after they had run out of options, they turned, meekishly, to the little one. And when they realized that the typeform accepted his answers - all 3 - as correct, the tenor of excitement suddenly changed direction to him. 

Until the iPhone rang and an SMS popped on the screen. There were muffled grumblings wondering if it was another puzzle. The text message only contained a link. It opened a Wallet file. Finally the end!
Indeed! It was tickets to see KISS End of the Road World Tour at the Oracle Arena in Oakland.

Sure, I could have just printed these tickets out and handed it to my wife in an envelope—a bow and wrapping paper around for the sake of anticipation. But we would not have had this family experience, where everybody contributed and participated. This experience created lifetime memories for all the people in the room. Of course, the concert was a blast! The show was on March 6th. On March 7th, the Shelter In Place started in the Bay Area. This concert is the last anything we attended in 2020.

Technology does not need to be all serious; it can also spark joy around you and give life to the silliest ideas you may have. I hope you can explore those ideas and build more meaningful hacks!

Check out this tutorial on the Twilio blog to learn how this gift was put together! Here are the answers to the riddles: second, What, an olive.

How Technology Helped Building A Meaningful Gift Experience

We asked co creators Richard Yee and Alex Tomlinson to share the story behind their new variable font, Whirly Birdie. This fun, flexible, and retro-inspired typeface launched a few weeks ago and it’s just getting started. As one of the most whimsical sites we’ve seen built on Glitch this year, this project should delight web developers and designers alike.

What was the inspiration for this project? How did you take this from concept to launch? 

A: We wanted to make a website as fun as we think the font is. Our idea was to create a “whole world” out of a font, and I think we got pretty far! There’s a clock made out of a font, a bookshelf, and we even hijacked your cursor- so that’s a font too! And, of course, our process involved Glitch at every step! Almost every element on the page began as a separate sketch on Glitch. I guess you could say our process was creating a whole bunch of neat little sketches utilizing the font, and then seeing what made sense together.

R: Yup, we wanted to make something cool combining each of our specialities. Alex is always drawing fonts. I'm always tinkering with weird web tech. We both use Glitch day to day, so this collab was bound to happen at some point! This project was a “playground” in the truest sense of the word. While we started with a loose plan, I think our multiple tangents on Glitch have allowed us to make something super fun.

What stack did you use to make the project? Tell us about the tools, libraries, and frameworks you used. 

A: I think it was all Glitch and Svelte. Unless there is something Richard isn’t telling me about!

R: Svelte was a real gem of a find this year for me as a developer. Just its base configuration was super powerful. Didn't need a separate state manager nor an animation library. Svelte had most of them ready out of the box. It was also very versatile. I could utilize all the powers of a framework without forcing Alex to adopt it when collaborating. There's nothing wrong with vanilla javascript, and I'm glad we could keep some of that workflow with Svelte.

How do you explain what a variable font is and its benefits for web developers and designers? 

A: I think the best way to explain variable fonts to web developers is simply: they're fonts with variables! Depending on what a typographer has drawn in their font, you can use variables to output different weights, sizes, or even animations from a font. The main benefit for designers is the creative freedom. They basically get to co-pilot a font’s design. The main benefit for developers is the ease of using variable fonts. Not much has changed in the CSS, except now you only have to import a single file! You do have this new "font-variation-settings”. Maybe Richard can convince developers better than I can?

R: I definitely expect variable fonts to mature in the near future. The major draw would probably be cross-browser compatibility and stability. Chrome has seen some weird glitches, no pun intended, with how it renders variable fonts. Edge cases for sure, and I'm sure their teams are doing their best to fix all bugs coming in. We actually submitted a variable font bug we found while developing this website and they rolled out a fix last month! 

That said, by baking animations directly into variable icon fonts, it removes the need for a library like lottie.js just to create animated SVGs. It's a super powerful spec, and most importantly, it was super easy to animate! 

What are some of your predictions or favorite trends in web development and design? 

A: I predict that Whirly Birdie and Whirlybats will take over the web, and you won’t be able to read a sentence without seeing an animated airship or UFO. My favorite trend in web design is DIY web design. Anything where you can tell someone designed or coded something themselves and didn’t just defer to some Bootstrap theme or Material Design generator.

R: I definitely feel there's a trend for more bespoke gestures and performance that you would typically find in a native app. That said, I'm a big fan of progressive web apps, which are just websites that you can launch from an icon on your mobile homescreen. It frees you of the browser frame, giving you something that really does feel native. Needless to say, I have whirlybirdie.com installed on my phone. On trends in development, I'm a fan of what Svelte is doing to change up the JS landscape. Having most of the work done on the compiler and not the client is a nice shift in philosophy. 

What’s your best advice for creators looking to make something and sell it online? Any lessons learned the hard way or best practices to share? 

A: Sell it yourself! A big part of the reason I decided on creating a standalone website for this font is that so many “graphic design marketplaces” are abysmal and depressing places. “Products priced 90% lower than yours are more likely to sell!” and “We are now taking 50% of your sales, because we are so devoted to making our service the very best for you! :)” are the sad realities of selling your soul to those places. As for lessons learned the hard way: we had the purchase button in low-contrast pale blue color when the site launched and we switched it to a nice green—and I swear it has impacted our sales. 

R: Market your work and be confident about sharing! Whether it be on social media channels, aggregator sites, or even the @glitch twitter account, I think it's important to be active in seeking out specific communities that would be excited for your new product/website/project. Sharing process work is also a good way to generate interest. Alex was fairly on point promoting Whirly Birdie throughout our development cycle. 

What’s next after Whirly-Birdie? Are you working on more fonts or projects? 

A: That implies Whirly Birdie ever ends! I like to think of it as a living, breathing project. Since launch I’ve stealthily added at least 5 Whirlybat icons, and likely even more by the time someone reads this! As for future font projects, I think there is still so much to explore with variable fonts.

R: Would love more font collabs and maybe branching out even further. For now, I'm headed back to more experimental tinkering. I'm currently making a face-tracking web app for virtual live streamers. Hope to launch it early next year!

We asked co creators Richard Yee and Alex Tomlinson to share the story behind their new variable font, Whirly Birdie. This fun, flexible, and retro-inspired typeface launched a few weeks ago and it’s just getting started. As one of the most whimsical sites we’ve seen built on Glitch this year, this project should delight web developers and designers alike. 

What does it take to create and launch a font? A Q&A with the Whirly Birdie creators 

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

Starting today, Glitch members with paid subscriptions can easily control who accesses their code and who sees live projects. 

We’ve made sharing your app easier than ever. Control who has access and who can edit a project all without having to build some complicated authentication system for your project.

Here are just a handful of things you can do with this feature:

Stay in stealth mode until launch. Developer advocates can build demos and keep them private until the big announcement. 

Share code with students or workshop attendees. From classrooms to conferences, you can control who sees assignments and projects.

Build internal tools. Whether you’re prototyping a new feature or using Glitch for your latest greatest Slack integration, create apps with your colleagues in mind.

Interview candidates. We’ve heard from teams who use Glitch to evaluate new team members. Now it’s even easier to share code examples with potential hires.

Grow your own private blog or newsletter. Have something you want to save for your inner circle? Share your best ideas with a select audience.

Build a project and hit the “Share” button in the top left just like you normally would. You’ll see a new pop up with a drop down menu where you can set your project’s sharing settings. 

Public is the default setting, which makes your project visible and its code remixable for everyone 

Private limits both your code and live site to project members

Private Code keeps the live site visible, but restricts code to project members 

We’ve eliminated the ability to join projects with share links and instead, are now asking project owners to explicitly invite collaborators via email. This implementation is more secure and gives projects owners greater visibility into who has access. 

Current free users with “private” projects will still have their code only visible to members of their project. However, changing a project from private to public on a free account can’t be reversed. 

We’re spending a lot of time thinking about how to better enable groups of users on Glitch and what collaboration looks like in a professional setting. Since we launched our paid tier in the spring, we’ve seen lots of individual creators build more powerful apps and also introduce Glitch into some of their professional workflows - from hiring and onboarding team members to prototyping new features and internal tools. We’ll share more on this front as our roadmap evolves.

If you have any fun or interesting projects you’re building using today’s news, feel free to tag us on Twitter or email community@glitch so we can share with the community! 

Starting today, Glitch members with paid subscriptions can easily control who accesses their code and who sees live projects.

The easiest way ever to control who you share your app with

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

We’re taking a break from our weekly round up of noteworthy apps to share a post written by Mads Hartmann, the Engineering Manager for our platform team. From time to time, we’ll post articles written by Glitch employees that give you a sneak peek into some of the behind-the-scenes work that goes into making Glitch go and grow. 

Over the past year, Mads has written a multi-part series about observability at Glitch and the tools and processes we’ve implemented to make the site more reliable. The most recent post goes into a deep dive on SLO-based alerts - challenges with our previous on-caller system and an excerpt of our internal tech spec. There’s also a getting started guide that’s a good primer if you’re not familiar with SLOs or want to learn more about what goes into their implementation.

“We’re hoping that by implementing SLOs - and alerting on them - we’ll be able to improve communication during incidents, reduce the toil on on-callers, and help improve our reliability in a way that’s meaningful to our users.”

Read the full post here. And if you want to work alongside talented and thoughtful engineers like Mads, we’re hiring. 

Adopting SLO-based alerting on Glitch

Throughout the election season, we saw data from a small number of states captivate the attention of a global audience. Social media feeds were a constant stream of numbers and maps; it was nearly impossible to make sense of it all in real-time. Instead of getting overwhelmed, Daniel Flanagan created Too Close to Call, a Glitch project that does all the marginal math needed to follow close races in competitive states. I reached out to Daniel, a recent college graduate and freelance visual effects artist, to talk about his process and the aftermath of creating a popular app during, and for, such an energizing national moment.

Jenn: With every election there are lots of maps and data–I, for one, often get overwhelmed. What drove you to create your own app among all that noise?

Daniel: That feeling of data overload is exactly what drove me to make this app.  I knew the election was going to come down to a handful of states, but once early counts confirmed as much, I, and I’m quoting myself here, “was annoyed with constantly searching” a whole map of the country when only a few states were relevant.

Add to that the fact that all these maps would only tell you which way the state was leaning and maybe a percentage/vote count if you selected a specific state, it was a pain to find the information that was truly relevant.  I wanted to know how close each state’s race was: 200 votes or 200,000 votes?

I do appreciate the work that goes into all those maps, I follow a few of their developers on Twitter and I think they knocked it out of the park.  My little app is not possible without all their work and the ease with which those maps convey the state of the race at a glance is incredibly valuable.  In this case I just wanted a more concise version of only the data I found relevant.

You mentioned in the support forum that you hold a degree in political science! Do you often build apps that are politics related, or was this a special opportunity for you?

I did yes. Technically it's a minor in political science but I definitely got more out of my poli sci classes than any others.  To be honest, I don’t build all that many apps in the first place, this sort of user-facing development is a hobby more than anything else.

I build things around stuff that interests me, and to say that I was interested in this election would be an understatement.  The challenging thing with anything political is the fact that everyone comes to it with their own politics.  I’m not looking to make something that drives people apart, or even something that affirms someone’s beliefs; the interesting projects to me are the ones that provide the opportunity to bring understanding and context to an area, as Malcolm Gladwell would say, otherwise overlooked or misunderstood.

This was a special opportunity for numerous reasons, chiefly because it allowed me to channel my election energy into something productive.  I was also excited to be working with real-time live data, that’s not something I get to do often.

How long was the process from getting the idea to sharing it with the world?

I had the idea as I was scrolling through Twitter that morning and set up the project on Glitch shortly thereafter.  I didn’t get to start in earnest until lunch around noon, and my work on this project was sporadic throughout the day as I was working on, well, work.  I’d say it probably got 4-5 hours of dedicated attention throughout the day. I took a look at my commit history and it looks like the first commit was at 10am, the UI was done by about 2pm, I made a commit noted “Functional Prototype” just before 5pm, and I shared it on Twitter an hour later at 6:03pm. So from commit to tweet we’re looking at 8 hours and 3 minutes. 

What made Glitch the place you chose to build and share this project?

For any project or idea that requires a web server, Glitch is always my first choice.  I don’t quite understand how Glitch is able to provide so much for free but I’m not complaining.  Glitch containers allow for websocket connections, terminal access, and persistent storage, all while abstracting the infrastructure away from me. Aside from the technical, I feel like my kind of app development, small, one-off experiences fits so well within the Glitch community.  I’ve come across so many awesome small projects on Glitch and being a part of that is something that’s hard to find on the internet.

Did you know how you were going to build the app when you got started or did those decisions come to you as you were coding? For instance, did you go into the process knowing you’d be using WSJ data?

I didn’t start this app until I had the Wall Street Journal data source, which I didn’t even find myself, it came across my Twitter feed courtesy of Paul Miller. I knew when I started this was going to be a Flask based Python app because I’m super familiar with that setup and how it interacts with Glitch.  I built out the UI first, and comparing what it looks like now to a sketch in my notebook, I can confidently say that I built exactly what I set out to build.

Updating the data went through a few design ideas:  First I thought I’d have the data be filled out server-side and sent to the client using Flask’s built-in Jinja templates.  The biggest benefit to that approach was not having to write JavaScript.  JavaScript is a great language and it powers a lot of what I do, but I really don’t like writing it.

Eventually I came to my senses and decided the flexibility of being able to update the data without a full page reload was worthwhile.  I did that with a Flask endpoint and a fairly simple client JavaScript file.  Ironically I built in this flexibility and didn’t take advantage of it until I started getting some feedback on the app.

Once you shared the app, it really took off! How was it received, and did you need to make changes to the app in response to the reception? Was there anything you would have done differently given more planning and time?

It was so exciting, and a little frightening, to see this app take off.  It was a crash course in social media virality for me; I tweeted it to my 81 followers and to date it’s reached 3,000 unique users totaling more than 7,000 page views.

The reception was awesome, it was great to see so many people using it, and it turned out a lot of people were looking for something to cut out all the noise for them.  One of my best friends sent me a photo of the app on his company’s office flat screen and told me how the app flickered as they refreshed it.  Conveniently, I had built in the flexibility to have the app update the data automatically, I just hadn’t implemented it.  That’s where the two minute refresh countdown came from.

In response to comments on Twitter I added the electoral vote counts, the map color changes, and the minimize maps toggle.  I also added PWA (Progressive Web App) capabilities after I kept losing the tab on my phone.

I enjoyed the time pressure, knowing that at any moment it could become irrelevant was a motivator to get it done.  The one thing I wish I did was cache the data and show some sort of trend line from it.  Even something as simple as showing which direction the vote margin was trending would have been awesome.  There’s a similar app another group of developers made that was brought to my attention by people commenting on my app on Twitter that I think does that really well.

This week I’ve been a part of an awesome Glitch ✕ Twitter collaboration on an in-browser Jeopardy board.  I adapted an old API of mine that allows a frontend developed by Patrick Weaver and Trent Willis to pull clues from previously aired episodes of Jeopardy.  You can check out my API, the gameboard, and the Twitter thread.

Other than that I’ve got a lot of ideas but no concrete plans as of yet.  Maybe something similar to this app for the upcoming Georgia Senate runoff elections. Although answering these questions for the Glitch blog is making me think that maybe I want to have my own blog 👀.

Thanks to Daniel, who should most definitely start his own blog, for telling his story and for building Too Close to Call on Glitch! If you build or see an app on Glitch that you want us to feature, tell us about it by emailing community@glitch.com.

Throughout the election season, we saw data from a small number of states captivate the attention of a global audience. Social media feeds were a constant stream of numbers and maps; it was nearly impossible to make sense of it all in real-time. Instead of getting overwhelmed, Daniel Flanagan created Too Close to Call, a Glitch project that does all the marginal math needed to follow close races. 

I reached out to Daniel, a recent college graduate and freelance visual effects artist, to talk about his process and the aftermath of creating a popular app during and for such an energizing national moment.

Too Close to Call: A conversation with creator Daniel Flanagan

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

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

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

Recent Posts