DEV Community: Gareth Wilson

On Glitch This Week

Gareth Wilson — Fri, 12 Jul 2019 16:12:56 +0000

Glitch This Week is a regular series in which we round-up just some of the amazing projects that fantastic creators have made on Glitch. Here are a few projects that caught our eye this week.

Mix up Synthier Things 🎛️

With the recent release of the third installment of Stranger Things, you might be inspired to try out Eric Wood's "synthier-things" - a web synth that can only play the Stranger Things theme. The synth is made up of a handful of off the shelf web audio components. You can play about with the arpeggiator, oscillator, filter, and attenuator to distort those iconic 80s inspired electronic arpeggios to your heart's content.

Pick Your Fave Queen 💅🏽

If like Keith Kurson, you're a fan of RuPaul's Drag Race then you might enjoy "favorite-queen." Choose your favorite queen from each of the seasons of RPDR, and share your picks on social to see if your friends agree. Choices indeed.

Doodle in the Depths 🐙

Rowan Merewood's "shadowy-depths" is a CSS doodle with a Day of the Tentacle vibe. If you've ever spent time working with the Shadow DOM, I think you can relate.

Rowan MerewoodFollow

Web related things at Google.

Other apps in this week's round-up include a map of reduplicated place names in Australia, a pumped-up audio visualizer, and a WebVR sketch taken directly from a notepad. Check them out!

On Glitch This Week

Gareth Wilson — Wed, 03 Jul 2019 13:29:24 +0000

Glitch This Week is a regular series in which we round-up just some of the amazing projects that fantastic creators have made on Glitch. Here are a few projects that caught our eye this week.

Play Scattergories with Friends ✍🏽

For the lucky among us enjoying a long weekend this week and hanging out with friends and family, Steph Monette's "scatterg" game might come in handy. It's a simple way to play Scattergories. Grab one or more friends, a pen, and a piece of paper. Then use her app to randomly generate a letter, hit play on the timer, and write down words in each of the listed categories.

Remix it to put your own spin on it - change out the categories, or tinker with the rules to make things more interesting.

Map with Me 🌍

"mapwithme" by Javier Arce is a collaborative mapping tool that lets anyone with a Twitter account add interesting places to your map. Crowd-source great places to visit, or poll colleagues for restaurants to try - whatever you want to create a create custom map together for.

Javier Arce

@javier

📍I made a tool that lets you create maps together with your friends… and enemies!

It's called "Map with Me" and you can see how nice it looks in this map of some of the coolest places around Madrid mapwithme.glitch.me

18:31 PM - 26 Jun 2019

23 109

Make Card Art 🃏

Luke Patton's "canvas-cards" is a gallery of card designs created with JavaScript canvas. Updated weekly, it's an ever-growing collection of generative art inspired by math, architecture, nature, and other things.

What's more - each card includes an editable code block that you can tweak to make your own designs, or learn more about how each one works.

.ltag__user__id__171489 .follow-action-button { background-color: #0030b3 !important; color: #ffffff !important; border-color: #0030b3 !important; }

Luke Patton

/lkpttn

lkpttn

Other apps in this week's round-up include an app that turns you into a Roman, a themeable illustration using Material Components, and a Coding Train project to learn about data and APIs in JavaScript. Check them out!

On Glitch This Week

Gareth Wilson — Fri, 28 Jun 2019 15:31:09 +0000

Glitch This Week is a regular series in which we round-up just some of the amazing projects that fantastic creators have made on Glitch. Here are a few projects that caught our eye this week.

Make Art with Friends 🖼️

As Vidhi Bagadia, creator of "inter-art-ivity", says: "creativity is best crafted together." Which is what I love about it. You can create art with friends, or indeed, random strangers on the internet. Pick a color, enter your name, and then paint your masterpiece alongside others. You can even download a copy of it too.

Play Diversity Pandering Bingo ⭕

"diversity-pandering-bingo" by Geoff is an interactive version of Rani Molla's crowd-sourced bingo board, dedicated to the weak excuses tech companies use to explain why they’re not more diverse yet.

It's an accompaniment to her article "Why women in tech are being Photoshopped in instead of hired", that dives into the diversity reports of tech companies over the last 5 years to see what's changed, or more accurately what hasn't changed.

Get Started with Zdog 🐶

Zdog is Metafizzy's 3D JavaScript engine for canvas and SVG. It enables you to design and render simple 3D models on the Web, bringing the simplicity of vector illustration to 3D. You can see the types of things you can make with it here. Then use Derek Reynolds's project "zzzdog" to get started making your own fun scenes with it.

Derek ReynoldsFollow

Other apps in this week's round-up include a Good Omens game, a SpongeBob Squarepants search engine, and a Sesame Street music app. Check them out! And don't miss Michael Fairchild's curated list of digital accessibility resources.

On Glitch This Week

Gareth Wilson — Fri, 21 Jun 2019 14:56:02 +0000

Glitch This Week is a regular series in which we round-up just some of the amazing projects that fantastic creators have made on Glitch. Here are a few projects that caught our eye this week.

An Optical Illusion ✨

You might have seen that brown ball optical illusion doing the rounds on Twitter. Yeah, this one.

// Detect dark theme var iframe = document.getElementById('tweet-1139533381597847555-429'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1139533381597847555&theme=dark" }

Well, Kate Beard re-created it in WebVR. Her delightfully named project "tripping-balls" is a virtual recreation that you can walk around to try and understand just how the illusion works.

Just Jam! 🎹🤖

"ml-jam" by Pablo Samuel Castro features an in-browser keyboard and drum machine. Using Magenta.js, it allows you to jam with machine learning models in real-time and without having to train a thing.

How it works is explained in the accompanying blog post, but it's a way for musicians to make use of machine learning during live performances.

Try Lodge.js ⛰️

Jesse von Doom made lodge.js to make working with bite-sized functionality much simpler. It brings consistency in interaction to the little workflows we often reinvent — modals, quick forms, embeds, and even checkout flows.

It's a single lightweight library that simplifies modal content and enables secure synchronization of events between windows.

Other apps in this week's round-up include a typing game, an interactive art piece, and a crash course in electronics. Check them out!

On Glitch This Week

Gareth Wilson — Fri, 14 Jun 2019 16:08:00 +0000

Glitch This Week is a regular series in which we round-up just some of the amazing projects that fantastic creators have made on Glitch. Here are a few projects that caught our eye this week.

Get Doodling

Lingdong Huang's "doodle-place" is a virtual world inhabited by user-submitted, computationally-animated doodles. Anyone can draw something, which then gets automatically animated before being added to a wireframe world populated with other folk's doodles.

Of course, this is the internet, so the user-submitted doodles are frequently phallic. But it's a lot of fun nonetheless 😅

Make a Zine

We love zines at Glitch - we've even made a few of our own. So I will admit to having something of a soft spot for "zine-machine" by Rowan Merewood.

It's a template for making zines that you can read online or print, cut, and fold to make your own physical version. You know, to read IRL. This voodoo is achieved through a print-specific CSS grid layout. But by remixing the template, you're a big chunk of the way along to making your own zine.

.ltag__user__id__71348 .follow-action-button { background-color: #161616 !important; color: #FFFFFF !important; border-color: #161616 !important; }

Rowan Merewood

Web related things at Google.

rowan_m rowan-m https://merewood.org

Celebrate Emoji Makers

If your workplace is anything like mine, your group chat is a whole lot of custom emojis. Well, it seems that the Financial Times is a lot like that too, at least judging from Bren Brightwell's app, "ft-emoji-league". It's a league table for Slack workspace custom emojis, listing the names of folks who have created the most. You can remix it, swap a few variables, and see who has a little too much time on their hands in your office.

Other apps in this week's round-up include an online multiplayer world made entirely of emojis, a favicon that shows a page preview, and a minimal i18n library. Check them out!

On Glitch This Week

Gareth Wilson — Thu, 06 Jun 2019 13:18:57 +0000

Glitch This Week is a regular series in which we round-up just some of the amazing projects that fantastic creators have made on Glitch. Here are a few projects that caught our eye this week.

Make Art for Github's Contribution Graph

GitHub's Contribution Graph is controversial. Some see it as a useful way of visualizing activity, while for others it's an anxiety-inducing thing that promotes over-committing. Whatever your view, Lindsey Bieda's new project "github-contribution-graph-art-generator", lets you make it whatever you want it to be. Create a pixelated image from which a script is generated that you can use to make your GitHub contribution graph look however you want.

// Detect dark theme var iframe = document.getElementById('tweet-1134843405178064896-181'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1134843405178064896&theme=dark" }

Pixelate Your Images

While we're on pixel art, try out "pixelator" by Jarrod Overson. Drag-and-drop an image into the app and it'll pixelate it. Then tweak the hue, resolution, luminance, and saturation to perfect your pixelated masterpiece.

Create Your Own Gutenberg Blocks

Automattic, the team behind Wordpress, created "gutenberg-block-kit" - the fastest way to get started building blocks for the Gutenberg block editor.

Gutenberg is the fancy new editor in Wordpress that's based around blocks of content, like paragraphs and pull quotes or embedded YouTube videos and tweets, rather than free-form text. It comes with a bunch of pre-made blocks but you can create your own too, and that's where "gutenberg-block-kit" comes in. Remix the project and develop your block, then download your block as a WordPress plugin to use on your own site.

If you're new to block development, there's a handbook with tutorials to help you get started.

Other apps in this week's round-up include a Twitter video ripper, a sports scores app, and a TI-83 BASIC program viewer. Check them out!

Oh, and ICYMI: Twilio's Phil Nash put together a MediaRecorder API tutorial using this handy "web-recorder" app on Glitch.

An introduction to the MediaRecorder API

Phil Nash for Twilio ・ Jun 3 '19

#javascript #web

On Glitch This Week

Gareth Wilson — Fri, 31 May 2019 15:02:57 +0000

Glitch This Week is a regular series in which we round-up just some of the amazing projects that fantastic creators have made on Glitch. Here are a few projects that caught our eye this week.

Rock, Paper, Scissors V2.0

Inspired by a tweet, Jez Swanson created "rock-paper-scissors-two" - a strategic variant of the rock-paper-scissors hand game. This simple tweak adds a new element to the game, and takes the mind-games when playing to a whole new level! 👊✋✌

Yuji Kosugi ✊🖐✌️2️⃣

@yujiberra

Rock Paper Scissors 2.0, playtested at @gaemzmu the other day:
* Play rock paper scissors
* When you win, move the coin in the track corresponding to the move you used towards you by one space
* To win the game, win with a move whose coin is already on your side of the board

04:34 AM - 26 May 2019

1286 3811

.ltag__user__id__2105 .follow-action-button { background-color: #0030b3 !important; color: #ffffff !important; border-color: #0030b3 !important; }

Jez 🌺

/jezzamonn

jezzamonn

Scrollbar Pong

Neal Agarwal is a prolific creator on Glitch. His projects often creatively re-use a browser element, like the URL bar, or the console. His latest creation continues this trend with a remake of the classic arcade game Pong, but using native scrollbars!

.ltag__user__id__ .follow-action-button { background-color: #19063A !important; color: #dce9f3 !important; border-color: #19063A !important; }

[Deleted User]

Embrace Rejection

Margarita Noriega's project "acute-toast" procedurally generates rejection letters using Kate Compton's Tracery library. Though strangely fun, at times the results are a little too on point 😅

Other apps in this week's round-up include a VR cash cannon, a live video block puzzle, and a string emojifier. Check them out!

On Glitch This Week

Gareth Wilson — Wed, 22 May 2019 14:45:31 +0000

Glitch This Week is a regular series in which we round-up just some of the amazing projects that fantastic creators have made on Glitch. Here are a few projects that caught our eye this week.

Create Your Own Pac-Man Game

As the name suggests "figma-pacman" by Gleb Sabirzyanov is a Pac-Man game that you can customize in Figma. With a copy of the Figma file, you can customize the game's level design and then upload it to the app to play. Gleb created a pink heart-shaped Pac-Man level and another one in the shape of the Figma logo, while Ali Salah made a Twitter Vs. Social Media version. What level will you create?

Gleb Sabirzyanov

@zyumbik

Figma Pacman Game! 💜 Customize the @figmadesign file and play your Figman game in only five minutes:

✨ Design your own levels. 🕹
✨ Make your own characters. 🐄
✨ Create puzzling mazes and challenge others!
✨ Add your friends into the game! 👫

→ figma-pacman.glitch.me 🍪

14:30 PM - 16 May 2019

11 40

Make Twitter More Accessible

Cole Gleason is a Ph.D. student researching accessibility technology for people with vision impairments. He created "tweet-a11y-stats" - a tool to tell Twitter users how many of their photos are accessible for users who are blind. Currently, only around 0.1% of photo tweets on Twitter have an image description, but image descriptions are critical for people with vision impairments to access visual content on Twitter as the descriptions get read by screen reader or Braille display software. Cole's app provides a useful reminder to build or maintain the habit of making sure content is accessible by all when sharing on Twitter.

Get Started with Local Storage

Kelly Lougheed, a Computer Science teacher created "hello-local-storage" so her students could get started with storing info in the browser using local storage. You can use it too by remixing the app and checking out the commented source code to see how it works.

.ltag__user__id__18149 .follow-action-button { background-color: #1C0BBA !important; color: #FFFFFF !important; border-color: #1C0BBA !important; }

Kelly Lougheed

JavaScript/Python developer

kellylougheed

Other apps in this week's round-up include a Game of Thrones soundboard, a sparkly real-time web chat, and a 3D visualization of CSS named colors. Check them out!

On Glitch This Week

Gareth Wilson — Fri, 17 May 2019 11:06:30 +0000

Glitch This Week is a regular series in which we round-up just some of the amazing projects that fantastic creators have made on Glitch. Here are a few projects that caught our eye this week.

Learn about Sorting Algorithms

Kicking us off this week, we have Gaeel Bradshaw-Rodriguez's project "quilted-koala" - a cute project to learn about sorting algorithms. Gnome, Bubble, Slow, Oust, Swapping Oust, and Optimised Oust algorithms are compared. You can see each working, with stats listing the number of checks, moves, and operations each has performed so you get an idea of their efficiency. Then take a look at the source code to understand how to implement each one.

Take Care of Yourself

"three-good-things" is an app that helps you to take care of your mental health.

Created by QA Analyst Desi Rottman, the app puts her own self-care ritual in to practice, helping you to remember to write down or share three good things in your life each day. "They can be things that happened the day before, things I'm looking forward to, good experiences I had, or even things as trivial as coffee", explains Desi. "Some days it's harder than others, and on those days, it feels like the most important thing to do."

.ltag__user__id__142493 .follow-action-button { background-color: #FADADD !important; color: #363636 !important; border-color: #FADADD !important; }

Desi

she/her. bug hunter. UI/UX copywriter. I want to make the internet more usable and accessible.

desilove desirottman http://www.desidoes.dev

Create Your Own Font

Javier Arce created "enfont-terrible", a truly "terrible" font foundry. Upload a font and then use the app to create your own weird OpenType fonts based on it.

Other apps in this week's round-up include a musical aquarium, a pixel art to Excel converter, and a Phish setlist generator. Check them out!

On Glitch This Week

Gareth Wilson — Tue, 30 Apr 2019 15:41:06 +0000

Glitch This Week is a regular series in which we round-up just some of the amazing projects that fantastic creators have made on Glitch. Here are a few projects that caught our eye this week.

Learn about Modulators

First up is José Blanco Perales' project "modulation-viz". It's an interactive visualization that shows how different modulators affect the parameters of a signal carrier. It can help you to learn how the modulation of a periodic wave works by seeing the impact of turning different modulators on and off. Better yet, it's written in pure JavaScript and you can view the source if you want to get stuck into the math.

Try Out KV Storage

Chrome is experimenting with a new feature known as built-in modules, and the first one they're shipping is an asynchronous key/value storage module called KV Storage. It's a proposed replacement for the simple yet slow localStorage. How it works is explained in this blog post, but the demo app "rollup-built-in-modules" shows how you can try out the built-in KV Storage module in your own apps.

Created by Google Web Platform engineer Philip Walton, the demo's bundled with Rollup so it uses progressive enhancement and falls back to using the KV Storage polyfill for browsers that don't yet support KV Storage natively.

Add Empathy to Design

Olesya Chernyavskaya created "mood-ai-design", a design experiment that seeks to imbue a design with empathy through the use of AI and a camera to determine your mood using face-api.js.

By detecting one of 7 emotions (happy, surprise, neutral, sad, fear, angry and disgust), Olesya's prototype alters the words, tone, and colors of the rendered web page in response. It's an interesting way of seeing if we can "humanize design" by giving it the ability to sense our emotions and change the content based on it.

Other apps in this week's round-up include a fun take on 2048, a zombie survival game in the URL bar, and a way to make music with your face. Check them out!

On Glitch This Week

Gareth Wilson — Fri, 26 Apr 2019 09:09:16 +0000

Glitch This Week is a regular series, in which we round-up just some of the amazing projects that fantastic creators have made on Glitch. Here are a few projects that caught our eye this week.

Svelte 3 Starter

Svelte is a component framework, like React or Vue, that compiles to vanilla JS. This week saw the release of version 3, which packed in a significant overhaul. The result is great performance, smaller bundles, as well as the built-in style encapsulation and declarative transitions. If you're excited to try it out, then check out Tom Wilson's "svelte-v3" - a quickstart project that will get you up and running with Svelte 3 quickly - remix the project and start editing src/App.html.

Tom WilsonFollow

/twilson63

Humor Detecting AI

Next up we have "humboto-humor-ai" by Tanya Brassie. Using next-generation technologies, the app has "endowed Hümbōto Ai with a brain capable of recognizing humor". Upload an image and see what humor rating it gets. Then try viewing the source to understand the true depth of this AI tech ;)

Model-Viewer Tester

"model-viewer-tester" is a handy app by Mr.doob that enables you to easily test how your models look like in model-viewer, a web component for rendering interactive 3d models on the web and in AR. Drag and drop a GLB or embedded GLTF file to check it out.

Ooh, and a bonus app! While Glitch is primarily focused on Node.js, other back-ends do work. So I thought I'd throw in this great Python project "datasette-csvs" by Simon Willison. He got Datasette, his tool for exploring and publishing data, up and running on Glitch. As Simon writes in this blog post, the result is you can "drag-and-drop in a CSV file and watch it get served by Datasette on Glitch just a few seconds later," making it easy to turn CSV files into a browseable interface and JSON API.

Check out the other featured projects in this week's round-up on Glitch.

On Glitch This Week

Gareth Wilson — Thu, 18 Apr 2019 13:18:49 +0000

Hey everyone, this is the first post in what will become a regular "Glitch This Week" series, in which we round-up just some of the amazing projects that fantastic creators have made on Glitch this week.

Chaos Equations

Inspired by a math art video on YouTube, design technologist Jered Danielson created "chaos-equations". It's a real-time visualization and animation of dynamic chaos equations. While the GUI is built with React, the visualizations are hardware accelerated and rendered with WebGL via Three.js.

SponCron

Writing Cron expressions can be a little bit tricky. The right order of values to get the timing I want is always something I have to look up. But "sponcron" by Anna Bialas and Thang might change that. It spontaneously generates a cron expression along with its human-readable form, so you can see and learn from the results different values create.

Play Board Template

Lastly, Emily Withrow and John Keefe from the Quartz Bot Studio created "playboard-template". It helps facilitate user testing for interactive audio experiences and accompanies a blog post they wrote about rapid prototyping for voice apps like those used on Alexa and Google Home devices. With it, you can design voice conversations and flows before getting mired in technical implementation challenges.

I hope these apps will help you with your own code projects. Check out the other featured projects in this week's round-up on Glitch.