Monday, Monday, Monday, open wide dev fans, get ready to stuff your face with JavaScript, CSS, Node module, barbecue tips, kit workflows, breakdancing, soft skills, web development, the hastiest, the craziest, the tastiest web development treats, coming in hot, here is Wes, Maracuda, Boss, and Scott, El Toro Loco, Tolinsky. Welcome to Syntax on this Monday, hey, see, treat. We're going to be talking about this neat little site that Wes Boss, my awesome co-host, put together. This is on uses.tech, so check it out if you haven't been there, uses.tech.
We're going to be doing the entire episode talking about the stack that Wes used to make this neat little site and what this site does is it shows you what different members in the tech community are using. My name is Scott Tolinsky, I'm a developer from Denver, Colorado, and with me as always is Wes Boss. Hey, everybody. How's it going?
Good. I'm excited to talk about this uses website. Yeah, uses. And if you have a site like uses that you want to make sure people get to and actually are able to access, you'll want to make sure that you have some sort of error and exception handling tracking on your application.
For that, we use Sentry over at sentry.io over here at Syntax, and we absolutely love Sentry. Sentry is the singular place where you can keep all of your bugs, errors, and exceptions for any type of project that you're using. You can categorize them, catalog them, and attach them to releases as well as users and a whole bunch of other information. I absolutely love doing that.
One of my favorite features about Sentry specifically is that you can tag an issue as being completed, and then you can be alerted if there is some sort of an issue that pops up that's the exact same issue, letting you know that there's a regression in your application and nothing that you thought you fixed. Well, maybe you didn't fix it, and you need to take another look. So one of my favorite features about Sentry is that, but you know me, I never have any regression, so I hardly ever use that feature, even though it's so good. So let's get into the site.
If you have not been there, head over to uses.tech. It's, again, just a neat little site that Wes put together. The first thing you want to do when you hit uses.tech is just find Scott Tolinsky on there and just buy everything that I have so I can get that Amazon referral cash. But now let's talk a little bit about this application, Wes.
We know that you had put together this. We, as the collective internet, know that you put together a repo for stuff that people have used for a long time. You just sort of had this. People could just add their own.
You know, I added my own. I assume that was the, you know, the genesis, the initial idea point for this, and you thought maybe it'd be cooler to be able to search and stuff for this, or was there something else? Yeah, well, I've had like a, so like what uses is, you go to your any domain name, westboss.com forward slash uses, and it will display a list of things that you use. And I initially just made it because people always ask me, like, what font is that?
What theme is that? What monitor is that? And I was like, I don't remember any of these numbers, so let me just direct you to a page that has everything on it. And then, I don't know, a whole bunch of other people started to use the same URL, and it became sort of a thing.
So I made a repo called Awesome Uses that had a list of all of these different pages. And then that list got to be like, I don't know, almost 80, 90 people. And it was just like, not useful, because like, who's going to sit there and click 100 different links? So I thought like, wouldn't it be cool to be able to just collect all this information and put it on a website?
So a couple people had already taken that data and put them into different types of websites. A bunch of people had the idea of people saying, like, I've got a bunch of domain names I can give you. I already bought them, but I never went through on it. But I actually went to one of our sponsors, and I said, hey, Uses.tech was a premium.
.tech was one of our sponsors. It's a premium one. I was like, as part of our upcoming sponsorship package, will you give me this domain name for free? And they said, yes.
So I got Uses.tech domain name from that, which was pretty cool. So the whole idea was just to create a data file. In our case, it's just a JavaScript array with every single person is an object. And inside of that contains a couple pieces of information, their name, obviously the link to their users page, a couple tags, whether they use an iPhone or Android, whether they're on Windows, Mac or PC, or Windows, Mac or Linux, and which country they're from, as well as their Twitter handle.
So just some light data. And then we're able to filter people based on the different tags they're on, which country they're from, and whether they are Mac, Windows, Linux, iPhone, or Android. And then I thought, how hard can this be? Just get an array of data, loop over it, throw some HTML on the page, and call it a day.
And I thought this would be a four-hour, quick little project. And I ended up doing four full days on this thing. So my idea with the show is just to detail the stack behind it and my thoughts behind picking the different things. So first of all, the site is built on Gatsby.
It is a pre-rendered site. What do you call Gatsby sites these days? Static. Fast.
It is a blazingly fast Gatsby website. And the way that works is- It is very fast, though. I joke about that, but it is super fast. Yeah, it's surprisingly, right?
It's not surprisingly, because there's not a lot on it. It's mostly just text. And it's pre-rendered text, right? So it doesn't have to go and fetch that data.
It's already rendered when the user hits the page. So when all of that data lives in data.js, and I did that because I didn't want to have to make some sort of database for people to log in and update their thing. It's just a file on GitHub, and people can pull requests that if they want to change their data, remove themselves, or add themselves. What's the repo for that, by the way?
It's github.com forward slash westboss forward slash awesome dash uses. Cool. And I really like this because it's a simple website, but it has a lot of different parts to it. And it's a great way to learn Gatsby, pulling in data, templating.
There's some GitHub actions in there, which is the first time I've used those, which is pretty cool. Filtering, React contact. It's got everything you want, but simple, right? Like you can look at, hopefully this will be a reference for how do you do these things in probably a larger project.
So Gatsby node is a file that runs during the build, and that will populate your data in the Gatsby GraphQL API. So what happens is that it obviously pulls in all of the people, it loops over each person, and then you register that piece of data as a node in Gatsby, and then that's available via the GraphQL API. And then I also do some light data aggregation. It's called stats.js that will tell me how many people are under the tag developer and how many people are from Canada, which as of time of recording, there are seven Canadians on this website, 41 Americans, only one from Japan, sadly.
So that's what the Gatsby node does. It pulls it in, and then I go ahead and use Gatsby, use static query, which currently I could get away with use static because there was no filtering or anything. I just want to pull them all. I always want to pull them all.
The query is always exactly the same. You have to use the other type of Gatsby query if you want to do it at a page level and you want to filter, although episode of recording after this, we'll talk about some updates to that. What's next? Avatars was kind of a fun thing, so I didn't want to have to have people upload a file or I didn't want to have people to put in their email address so we could use Gravatar.
So I just use the Clearbit API. You ever use this, Scott? I have not. I've only used Gravatar for this kind of thing.
Clearbit. Clearbit is this, I don't know, I think they're a data mining company. Basically, they have information on everybody, and if you give someone an email, they'll give you their name, and it's kind of a bit of a bummer, but they obviously have lots of information about everybody. And one of the things they have is a logo API.
They also have information on Stripe's design system. Whoa! So you can enter in a domain name, like Airbnb or westboss.com, and it will return to you a picture, either a logo or an avatar for that person. And that worked for about 90, 95% of the use cases, and people who didn't have an avatar just have to put an open graph meta tag on their page.
Now, there's a pull request in for this new service called UnAvatar. You ever heard of this? I have not heard of this. You were turned into a late night show host here.
Get this. So UnAvatar is a free service. It's hosted on now.sh, and you can pull someone's avatar based on just a username. It doesn't matter where.
Or from email, or from a domain name, or specifically from GitHub, Gravatar, Instagram, Twitter. It's so cool. So it covers everything for you, where it'll try to do it from here, and if not, it'll try to get it from there. I think this is really cool.
For ever and ever. It was like Gravatar is the option. Like, that's it. Yeah.
Or do it on your own. This uses Gravatar under the hood. And if someone doesn't have a Gravatar, maybe it'll try their Twitter account. If someone doesn't have a Twitter account, it'll try...
It'll actually use this clear bit underneath the hood. And it's open source, so you can host your own, which is cool. So we're going to move to this, which is cool. The one thing it doesn't do is it doesn't resize images for you.
So there's another service called webserve.nl that will resize it on the fly. I'm not sure I would trust this with any sense of information, but for the purposes of resizing Avatar, it seems to work just fine. Yeah, yeah. What else do we hire?
Filtering. So obviously, you can click on one of the tags, and it will filter lists. The way that that works is you click on a tag, and it will set the current tag, or the current country, or the current device, and then it will just take the array of people and filter it down with a radar filter. Yeah.
And then that will trigger re-render in React, and it will render on the page. So that's pretty simple. The kind of interesting thing about that is if you click on the tag CSS, it will highlight that in the profile for each person that you're currently filtering for CSS, and that had to use React context, because information about what is the current tag exists in two totally unrelated sibling components. So what do you do there?
You have to put it in context. I had never used context in Gatsby before, which is pretty cool. But it wasn't any different, was it? I mean, you just had to wrap the page, essentially.
That was it. Yeah, that was the part that I probably could have got away with just wrapping my layout since it's only a single-page website, but the proper way to do it is to put it in Gatsby browser, and then I also needed to put it into Gatsby SSR so that it would render context on the server. Yeah, that's how we do it in my course, the Gatsby course. Yeah, good stuff.
One kind of cool thing about that is I use the ES modules import and export immediately. Have you ever done that? Yeah, that's the first time I've ever had to do that. Immediately.
Yeah, so let me find the code for it real quick. No, I haven't done that. I'm learning a lot here today. I know, it's such a silly little website, but I learned.
I learned a lot. Little things just building this thing. So the syntax export wrap root element from Gatsby browser, what that does is because I needed to wrap this context both in Gatsby browser and in Gatsby SSR, I didn't want to duplicate that code. So the solution to that is you import it from the one module, and then you just export it from the server-side render.
And there's a syntax in JavaScript that will allow you to export and import something in one go, which I thought was pretty nifty. I use this cool package called country emoji. So one of the things that is required is you have to put your country in as an emoji, not as a country code or something like that. But then when you hover over top of the flag, I want it to show you as a tooltip what country that is, right?
And I found out there's no way to get a description of an emoji or of a Unico character in JavaScript. So I use this cool little package called country emoji, where you can give it a string of a country, a country code, or an emoji, and it will return to you the name or the emoji or the country code, depending on what you want. So super handy little package there. Yeah.
By the way, I should say, I'm not saying where you posted this in text for the immediately export. I have used this. I use this in my index.js files that I use when I create internal modules where you export asterisk from I thought you were talking about there's some sort of immediately keyword. I've never heard of it in my entire life.
I was like, oh, immediately, huh? That makes sense that you, if you've got a folder full of things and then you want your index of that folder to be importable, then you can just import everything in your index and immediately export. Is that what you're doing? Yeah.
So essentially, if you want to say, let me grab every single named export from a file and just have that be included in the index, this index is basically export asterisk from the file. Yeah. Oh, so anytime you add an export to one of those files, you don't have to open up the index.js again. Correct.
Yeah. The only time you have to modify the index is when you add a new file to be included into that. That is super handy. I had not thought about that before.
I use that for all of my elements for stuff components. I use that in my hooks folder. I use that in my utilities folder, my global state folder. Use it a lot.
And that way, having an index, you can just import it from the folder, right? Yeah. And get this. With Babel aliases or even TypeScript aliases, you can now just say import grid from elements.
And it's almost as if elements is a package, even though it's just an index on a directory. It's very fancy. Oh, yeah. We should say that.
That is not part of ES ECMAScript. That's part of WebHack or Parcel or something like that. Or Meteor. Yeah.
Yeah. It would be really cool if that was part of the official spec. GitHub Actions, one thing I used here, I didn't code any of these, let me give a shout out to the user who actually did it, is I am Andrew Luca, helped out huge on this, because I had just put a little issue in there to let myself know, I'd like to dive into GitHub Actions at some point and figure out, one, when people submit a pull request, they were submitting incomplete data. Nobody read the instructions.
So they were like, instead of doing a country emoji, they were writing the name of their country. Or instead of just, you're only allowed to put iPhone or Android. And then people were typing like, iPhone, but sometimes I switch to Android, it's a OnePlus, and it's pretty good. I put a dskin on it.
And like, no, that's not what it is. You know? So we introduced these data validation, essentially. So when you have a pull request, it will block the pull request, or it'll fail it, if you do not meet any of the things that we want.
So we said, okay, your country flag must be one of these countries, right? And your device must either say iPhone or Android. It can't say Apple iPhone, and then it will fail. And I use this package called Joy, J-O-I.
You ever use this, Scott? No, I haven't. There's to be gosh darn packages. Yeah, what am I going to do with all these packages?
I had never heard of this before. So it's a schema description language. So essentially, I just took the person object, and I described, similar to how you would write like a type in TypeScript, but you described sort of the validation steps for every single one, and you needed to make sure that their URL had the word use or uses, or we allowed GitHub gist as well, and we needed to make sure that, I don't know, there's a couple, basically just validated all the data that the person pull requested. This was a made for happy, right?
Yeah. Joy, happy, okay. I was going to say, this is the only one I can find. Which is like an express alternative.
Yeah. But it stands alone, so you can use it for, you can use it with anything. So Joy stands alone. Yeah.
Also, Hugo, HugoDF on GitHub submitted a pull request to check if people actually had a page. So we had like 40 people submit their URL. Now, they didn't even have a uses page. They just added those times.
So they're like 404-ing. So he wrote a script that would ping all the URLs, and then block it if it was down, and then take them out, right? Oh, jeez, man. People are resourceful.
I know. It's like, you think that's how it's simple. You just get an array of people and loop over it, and then there's all this like extra steps of stuff that needed to be added to it. Yeah.
So that was the one GitHub action, and the other GitHub action was, so this started as just an awesome list. It was just a readme with a list of people, and I wanted to maintain that list. So this new GitHub action will auto-generate the readme list every single pull request. So you don't have to manually add yourself to the readme if you want to be part of the text list.
Yeah. Go on this repo and look at the code. I think, yeah. Yeah, it's really simple.
You can use Git as well as Node.js in it. It's pretty cool. So one thing that I really enjoyed here was your animated favicon. Yes.
So if you go to the thing, the favicon just says, forward slash uses emoji poop, and it just like every 500 milliseconds, it changes the current letter. And that, I thought, would be just a funny joke, because it would be simple. It would be fun to do. It ended up taking me like four hours, because the way that works is that every 500 milliseconds, I write a letter to a canvas, and then export the canvas to a B64 image, and then dump that into the head of the...
the document and it turns out doing set interval as well as having like a side effect a side effect is i'm literally updating the the head of the document right yeah yeah turns out doing that in react hooks well it's not hard but i had never done it before um and dan aprim has a huge post explaining how to do intervals yeah it was a really good post yeah so i read that whole thing and i learned a lot about that as well i learned that you can write emojis to a canvas and then export them which is pretty cool um the whole thing is done in style components which is good actually i just wrote it in a css file and then somebody else pull requested to move it over because it was one of my like to do things i'm using that esm package we talked about for doing because the sort of a bummer about gatsby is that the gatsby node and the gatsby ssr has to be done in require common js syntax and then the gatsby browser stuff has to be done in esm syntax and then that doesn't allow you to share um wrapped components between your browser and your server side rendered one which sucks so i just use gatsby esm sorry not gatsby just esm package and then i'm totally using es modules all across the board um there's a poor question for agolia search i don't know people are like we should add voting in search and someone's like we should standardize it into like a look at json where like everyone can can like structure their data and then you can search based on like what monitor people have and like i'm like okay this was supposed to be a little over an array yeah so i don't know people want to take it a little further i'm sort of stepping back uh and letting some people uh work on some some fun stuff and uh and whatnot so maybe we'll search on it and finally it's posted on netlify so this is kind of like the nascar we're using all our sponsors well i think that just goes to show you that like you know the people that we have as sponsors on the show are there because we use and enjoy their their material and given the total freedom to pick a stack you still picked our sponsors you know that that says something yeah that's a really good point so it's all hooked up every time there's a pull request it will run the github actions it'll populate the readme it'll deploy to netlify i'm using netlify analytics on here which is a page feature but there's no like google analytics on here but i can see right now there's been 20 000 unique visitors 30 000 page views i'm really keen on dumping google analytics entirely yeah i feel like it just just creates extra that i don't really need and how like i don't really look at google analytics that much i don't look at it for you know what it's i don't know the extra requests even though they're at the end here i don't know i just don't use it enough to have it yeah like the actual features i only use like who where are the people coming from maybe countries it doesn't look like you can get countries or browser info on netlify analytics it just gives you probably the most of the stuff that you want is how many people are visiting how many unique people where are they coming from yeah yeah that's pretty neat so that is the uses.tech uses i should make a website detailing everything i said in this this uh podcast but i don't know it's kind of interesting if you want to check it out learn a few things from it or not um it's at github.com forward slash westboss forward slash awesome dash uses do it yeah really great cool all right anything else out there are you done i'm done i'm done with the episode about your project beautiful all right thanks for tuning in we'll catch you on wednesday peace head on over to syntax.fm for a full workout of all of our shows and don't forget to subscribe in your podcast player or drop a review if you like this show