The party is back! In this episode, we talk about what we love about JS, Tabler and admin UI’s, and shoutouts to some of our favorite projects and people.
Rollbar – Our error monitoring partner. Rollbar provides real-time error monitoring, alerting, and analytics to help us resolve production errors in minutes. To start resolving errors in minutes, and deploying with confidence - head to rollbar.com/changelog
Fastly – Our bandwidth partner. Fastly powers fast, secure, and scalable digital experiences. Move beyond your content delivery network to their powerful edge cloud platform. Learn more at fastly.com.
Linode – Our cloud server of choice. Deploy a fast, efficient, native SSD cloud server for only $5/month. Get 4 months free using the code
changelog2018. Start your server - head to linode.com/changelog
- Request For Commits #15: Maintaining a Popular Project and Managing Burnout
- The Web Log of Safia Abdalla
- buunguyen/octotree: Code tree for GitHub
- Dark GitHub style
- GitHub Dark as a userscript
- Userscripts to add functionality to GitHub
- Jack Lukic the creator of Semantic UI (Jerod)
- Alexandru Maier, the awesome human behind all of our transcripts (Jerod)
Click here to listen along while you enjoy the transcript. 🎧
“And we back, and we back, and we back… This ain’t no intro, it’s the entree/ We turn in Thursdays, into a partay…” And that’s all I’ve got. [laughter]
Should I attribute Chance The Rapper, or should I just act like I made that all up?
I think you should attribute Chance The Rapper, in the spirit of open source.
Very good. Thank you, Chance for those wonderful rhymes that I killed, and then co-opted for JS Party. Hi, everybody! It’s JS Party! We are back. Your ears are not fooling yourself, we are here. Thank you for the shout-outs in the chat room for the amazing rap skills. Maybe we should put that in our sound pack and sell it on our future merch store, Adam; just an idea.
We’re happy to have you back. You may not recognize my voice - that’s because I haven’t been on JS Party since episodes -1, -2 and 0, I guess, if we’re backwards-indexing the array, to meet the original hosts; you might remember my voice from then, or you may know me from the Changelog, but I’m here today to help relaunch JS Party. We are super excited.
You may be wondering where’s Alex, where’s Mikeal, where’s Rachel… Have no fear, they’re very much part of the party, but as we get into it, I want to go a little meta and talk about the show a little bit before we get into the show, so we can set some expectations and talk about what does version two, the second iteration of JS Party is going to be like, what to expect, where we’ve been and where we’re headed. So we started JS Party with a cast of three: Alex, Rogers – excuse me; sorry Mikeal… Alex Sexton, Mikeal Rogers, Rachel White, and it was a great show. We’ve put together 19 or 20 awesome episodes, but we’ve struggled a little bit near the end with scheduling, because we had lots of busy people, and we picked Friday afternoons as the record time, which I think was a bit of a death knell.
So in addition to Alex, Mikeal and Rachel, who are very much on the panel still, and you’ll hear them in the upcoming episodes - in fact, Rachel will be on next week… Mikeal had a baby recently, so he’ll be gone for a little while, and Alex also waiting in the wings… We’ve also added Suz Hinton, Feross Aboukhadijeh, Kevin Ball, Michael Jackson of the React Podcast, which is a Changelog partner podcast… As well as today’s list of panelists, which I’ll introduce now.
We have Safia Abdalla, which you may know as CaptainSafia on the internets… We have Chris Hiller, aka b0neskull, and we have Nick Nisi, aka NickNisi. Nick, we’re gonna have to work on your nickname, buddy.
So Safia, Nick, Chris, say hi!
Very cool, and we should say I first met Safia about a year ago at OSCON. Was that in Austin…?
And at the time, you had released a bunch of NPM modules, specifically a lot of command line tools that were very much popular amongst developers. Ever since then, I’ve been following your blog and you write quite prolifically; I can barely read them as fast as you can put them out. How do you get that done?
I’ve just been trying to get myself into a habit of committing to things and building a lifestyle around consistency. One of the big things that I wanted to do was to become a better writer and start holding myself accountable to publishing blog posts three times a week - on Mondays, Wednesdays and Fridays. So it’s part me hoping to learn new things and expand my knowledge as a developer, part me trying to become more disciplined and committed to a particular project, and then part wanting to become a better writer.
[00:07:57.01] I have a lot of people who have asked me about how I’ve been doing the blogging thing over the past couple of months, and I think I might probably just write a blog about that and share it out next week, or something, so… Stay on the lookout for that.
I was writing apps for the web for quite a while, and I got heavily into Angular. This was Angular 1, Angular 0.9 or what have you, and I started to have a lot of fun with that, but eventually I kind of burned out on that sort of thing, and I just really wanted to focus on Node. I love Node, working with – Mocha is a project that a lot of people use for web, but it’s originally and primarily for testing Node. Node is just so much fun to write.
Sure. So I came to the language pretty soon after college. My first real job was writing Java, but it was not very fun at all. It didn’t make me like Java at all, so I was looking for something else to do, and nobody else on the project really wanted to do anything with the front-end, but they really wanted this custom rich text editor, but an in-line rich text editor; it was basically like an input field that you could put rich text in… So I started off with Prototype JS and kind of learning that, playing around with it and getting it working, and then eventually porting it over to jQuery.
Yeah. It was really boring in the pre-ES5 days, which was nice. So it really helped with ES3 and the awkwardness of that version
Yeah, the fluent API – coming from Python, there was no sort of API in Python like that. I’d never seen anything like that. That was completely new. It was probably completely new for a lot of people, and I just thought it was awesome.
Yeah, that’s a great point.
It deems itself an admin panel made simple, so it very much fits into the category of providing different widgets and components for people to use when they’re building dashboards, admins, what have you. This one has a whole bunch of stuff in it, which is impressive to me. It’s built on top of Bootstrap 4, which I think is the most recent Bootstrap that was just recently released, but I don’t follow Bootstrap super close, so I could be wrong on that.
Yeah, it is.
[00:20:00.29] It is. And I think they call that Bootstrap 4 because it took 4 years to write… Isn’t that the case?
Oh, I’m not sure about that. I just know it’s the newest one and it kind of took a while to get there.
Yeah, that was a little bit of a joke, but…
…I don’t think it took four years, but I think it definitely was notoriously long development between three and four. So this is on the latest Bootstrap, and – yeah, let’s just open up the conversation around Tabler. If you’re listening, click through the show notes, have a look at it. I’d like to ask the panel, what do you all think about this project? Pros, cons, would you use it, what have you…?
So it does look interesting. I’m looking through some of the components that it provides, and some of them do feel like they would be part of just like a standard user interface or UI framework. They’ve got things like Alerts, which are a part of Bootstrap just standardly, and avatars, which I think you can do with Bootstrap pretty easily (maybe I’m wrong about that), and tags, and things like that.
I think some of it might be UI components that you could get elsewhere pretty easily, but I think the fact that it’s focused on admin panels is interesting, because I tend to think that sometimes when a project, even if some of its functionality overlaps with another project’s, if the context it’s written in is aimed at a certain problem, then it becomes a little easier to use it to tackle that problem than other projects.
That’s interesting, I didn’t even consider the fact that since it’s built on Bootstrap, maybe the big question up front is “What does this add, in addition to Bootstrap?” Why wouldn’t I just use Bootstrap directly, and kind of cobble together what I want - although ‘cobble’ has kind of a bad connotation… But put together the pieces the way I like them to, versus reaching for something that sits on top. So that’s an interesting point, I didn’t think from that perspective.
I’m not a huge Bootstrap user, so I think I was having the same issue with understanding the separation between what Bootstrap provides and what this provides on top of it… And I was digging through the source code a little bit and it definitely looks nice, and is something I would definitely take inspiration to.
I think in the past when I’ve had to work on things like admin panels, I was either using stuff that was already available in the project that I was coming onto, or developing something specifically for that project, and probably ended up duplicating some of the things that this would have provided, just because I didn’t really know about it… But it is interesting.
Yeah, good points. Chris, what about you? Did you take a look at this and have thoughts?
[00:24:20.02] That kind of opens up two larger questions that I often have for people, or even for myself… When you see something built on Bootstrap, or even just *insert UI framework here*, take Bootstrap out of it specifically; let’s say built on X, where X is a Bootstrap or Foundation, or a Semantic UI, or what have you - there’s probably more, I can’t think of them… Is that a selling point for y’all, or is that actually like “Ugh…”
I think it depends. Some people do use Bootstrap and Foundation, and they’re really good at using those tools effectively and introducing some aspects of their product’s brand to it… But there’s some where it’s definitely easy to tell that although they used the tools to help speed up the development process, they didn’t extend upon them.
I agree. When I’ve tried to throw Bootstrap onto an app, it has not been easy. But starting with Bootstrap - yeah, that’s the way to go.
And I wonder how true that will remain in the future with things like CSS Grid. That’s like the primary use case of Bootstrap for me in the past. I wonder how prevalent it will be in the future with that, but I think that they could definitely adopt CSS Grid into the product and then enhance it in some way.
I looked at the components - they have maps, icons, they have a blog, which I think to me is a big component. I would think of maybe the individual posts inside of a blog are kind of these little cards that look somewhat like Pinterest. When I see the word “components”, I think “Isn’t being able to just wrap–” maybe I just wanna grab specifically their map component and just insert it into what I have going, without any other [unintelligible 00:26:55.07] about namespace conflicts, or blah-blah-blah… Hasn’t that been somewhat of the promise of Web Components, and does anybody know the state of Web Components? I’m very ignorant in this space, but I’m just thinking, wouldn’t these be nice here if I could just grab a single one and throw it onto my website, versus buying into the Tabler stuff?
Yeah, I was thinking the same thing, that it would be more useful in the apps that I typically write if I could pick and choose, and it was as easy as just dropping in a custom element and using that. I’m not sure of the state of Web Components though, I haven’t been playing with them too much yet.
I think that’s a common question–
What’s the state of Web Components, yeah… [laughter] I knew we had a JS Party about Web Components, but that was a year ago, so a lot changes in time. And sometimes a lot doesn’t change, but we hope it does.
[00:27:52.13] Okay, last question on this front - so we’ve talked about the UI framework… And definitely this is garnered towards admins and dashboards, so aside from this particular project, I guess a two-part question would be – the first part is do you all build admins on the regular, or is that something that for your job or your interest is not something you do very often?
Then part B would be if you do build admins, what’s your usual go-to, how do you build them out, and would this change that at all?
Yeah, I’m currently having to build what I guess would be considered an admin panel on Zarf, which is a side-project that I’ve been working on building out.
Tell everybody about Zarf real quick.
Zarf is basically a content marketplace for short-form work, so it’s stuff that takes you 30 minutes to two hours to read, and it’s generally produced by award-winning or experienced writers in the fiction/non-fiction space, and I’ve been working on building it out for a little bit.
One of the big things is that writers on the platform sell their work, since it’s a marketplace, and the admin panel in my case is the interface that writers would go to to figure out “How many posts did I sell this month? How much money did I make?” all of that stuff.
One of the things that actually made me nervous when I went to the Tabler dashboard example they have - and I understand that it’s a demo and the purpose is to show all of the different things that you can do with Tabler… But often times, and I’ve seen this in a couple of products, admin panels quickly get way out of hand. It starts off displaying the key metrics that matter to the administrator or privileged user or the product that you’re selling, and then the scope expands, and you’ve got this really messy panel with lots of information on in, and people only look at one part of it, and you built out this UI that isn’t really useful… So that’s another thing that I’m trying to be conscious about as I’m working on redesigning that panels - what is it that people exactly need that should be up front and center, and what can I hide away behind a couple of pages, so it doesn’t turn out to be just a total mess and overwhelms the user?
The kitchen sink.
That reminds me of that line from Jurassic Park, where the scientists were too busy asking whether they could, and didn’t ask themselves whether they should, right?
That’s kind of us with dashboards… We’re like “Well, look what I can do with all these widgets”, and we just throw together this craziness, and it’s like “Is this useful?” [laughs]
Dashboards are everybody’s weak spot.
Right? Oh, they’re so pretty…
So in terms of tooling for your admin, do you just write everything yourself, or do you use any sort of stock stuff?
I don’t. What I settled on as the basic minimum requirement that writers would need to know about is a table sorted chronologically by time on a monthly basis, and it just shows a column for how much they sold, how much they earned in revenue, and then how much their cut was after those sales. That’s worked so far. I haven’t had anybody complain too much about it, but I’m looking to change that experience.
So in that case, for the entire interface I’m using another CSS toolkit called Tachyons, which is way lighter than Bootstrap or Foundation, and it doesn’t have – it’s got a different style to it, I’ll put it that way. So I’m not doing anything fancy with the dashboard, and I think that’s almost fine. One of the big reasons that writers, when I talk to them, are going to the dashboard anyway is they come with a question that’s like “How much money did I make this month? What should I expect in my bank account?” And that’s what they wanna be able to get really quickly, and then everything else is kind of nice to have, but not totally necessary, so I’ve deprioritized it.
Nick and Chris?
Yeah, I end up working on a lot of client work, and with that, they either have these well thought out designs that I’m implementing in an environment where they already have dependencies and I don’t really bring in a whole lot of my own stuff, so it’s kind of writing from scratch in a lot of ways sometimes… Or they have their own component library that they’ve built out, and we tend to use that; that might be, in some cases, built on Bootstrap on other things. So this is definitely inspiring, but I don’t know how much it would be used by clients that I typically work with.
I’m not working in the web much anymore… But I do collect some numeric metrics, I do some automation stuff and have lots of numbers. There’s an app called Grafana, which basically is a tool for creating dashboards of numeric time series data and that sort of thing. I mean, it would seem to me that there has to be something out there that works kind of like Grafana, where they give you all these components and then all you have to do is plug in the data, and then the user can actually go in and design what widgets appear on the dashboard. You don’t have to actually – it’s not static. Maybe you could set up a default set of widgets that a new user would see, and then they can go and say “Oh, I’m gonna create my own.”
I’ve seen a lot of systems like that, I don’t know if there’s a good one that is kind of general purpose. Grafana can’t be used for something like this, simply because it only works with numbers pretty much, so it’s kind of awkward to do anything else.
Cool. Let’s wrap up by just saying thanks to (I believe he’s) @CodeCalm on Twitter for putting Tabler out there for people to use and enjoy if that’s something that will suit them. He dubs it a “Premium and open source dashboard template with responsive and high-quality UI”, and then he emphasizes “For free”, which we all love that side of open source as well. So check out Tabler if you haven’t, and we’ll call it a wrap.
For segment three today, we are going to give some shout-outs. These are kind of like your traditional picks, except for they can focus on a person, it could be a project, it could be anything that you think deserves it, and we’re not limiting ourselves to one… And I think that’s good, because I’m looking at our list and it looks like you all had a bunch of them, so this will be good.
Let’s start with Safia - who would you like to give a shout-out to in this show?
[00:35:57.04] Sure, so I want to give a shout-out to a person, and then a project. The person is I want to give a shout-out to - my shout-out is actually long overdue… His name is Jeremiah; his handle is @Fishrock123 on Twitter, and I think GitHub as well.
A couple months back I was doing a series on my blog where I read parts of the Node codebase and tried to answer questions about how built-in modules are registered, how the main process is initialized, how different modules work… And Jeremiah did a really wonderful job of providing feedback on where I misunderstood some things, and help me make my blog posts more accurate, so shout-out to him for that.
The second is a project that I discovered recently, that is going to be super helpful if you’re working with React and ElasticSearch. It’s a project called ReactiveSearch, which is a good name for it. It’s basically a set of React UI components that allow you to configure search bars, category filters, range filters and paginated paginated result pages for data that you have indexed on ElasticSearch. Super useful for that, really well documented and lots of great examples, so… Shout-out to those two.
Very cool. Nick…
Yeah, I have two projects, both kind of related to GitHub. The first is Octotree, under GitHub user buunguyen. It just adds a file drawer to GitHub while you’re looking at projects, so that you can quickly look at what files are in there, quickly navigate the files… It’s just really pleasant, and it works in Chrome, Firefox and Safari.
Then the other project, kind of in the GitHub theme, is Octobox. I don’t like that when you automatically get subscribed – when you somebody adds you to a project, you automatically get subscribed to it and you get just bombarded with GitHub emails for that project… So I’ve filtered all the GitHub emails out of my inbox, and instead I use this project called Octobox, which is kind of a dashboard - also to tie back to our previous segment - so that I can see what notifications I’m getting on all the different projects, I can filter by the projects that I’m subscribed to, and just handle those notifications in a much more friendly way than just blowing up my inbox.
Good stuff. Big fan of Octobox. I had never heard of Octotree, so that’s very cool… Alright, Chris, you’re up.
My shout-outs are also GitHub-related. I don’t think I use any website more than I use GitHub, so my GitHub is really tricked out, because I installed a bunch of extensions, and stuff. There is a user on GitHub, Mottie - I don’t know this person, but they made a user style. If you’re familiar with user styles, there’s extensions you can install for your browser - one of them is Stylish, another one is Stylist (there might be more) - that allow you to apply and share custom CSS that will overlay popular websites. There is one called GitHub Dark, and it’s like a dark theme for GitHub, and it’s really awesome.
He always on top of this thing, so whenever GitHub changes any UI component, the same day he’s gonna make sure it looks right in the style.
And there’s also an associated userscript called GitHub Dark script. What that is basically extra configuration and settings for GitHub dark, and you can do all sorts of cool things like change your background, or change your syntax highlighting… And that is actually a userscript, like Stylish and user styles and that sort of thing. These are Greasemonkey and Tampermonkey extensions; you may have heard of that.
[00:40:21.18] Greasemonkey is originally a Mozilla plugin. Tampermonkey is the Chrome analog. GitHub Dark script works with that, and you load the extension and then you can put whatever userscript you want in it. There’s the GitHub Dark scripts, there’s extra user scripts that do all sorts of just little tweaks, kind of like the GitHub Refined Chrome extension; I know a lot of people really like that extension, and I do, too.
The cool thing is that GitHub Dark works with GitHub refined, and that’s all styled as well, so it looks great. And so does Octotree. Octotree also has a dark style. Awesome work.
Very cool. Well, before I get into my shout-outs, I have to say that I’m over here with a grin, ear-to-ear, because one of the things that we do at Changelog is we do Changelog news and we do podcasts, and our news is all about what’s fresh and new, covering projects, linking up interesting things, linking to Safia’s blog once a week, probably… Stuff like that. So this is like a little bit of our job, what we do, and so I’m over here basically saving draft posts as you guys point me to interesting things… So you’ll probably be seeing these featured on Changelog news; it’s like I’m cheating at life right now… These are awesome picks. Very good.
By the way, if you don’t subscribe to Changelog News, check us out - Changelog.com, and you’ll see the news feed right there. You can subscribe via email, RSS, you can follow us on Twitter… It all funnels out. You can even follow us on Micro.blog, which you may have never even heard of, but you can follow us there… So check that out.
Let’s get into my shout-out. I’m shouting out to two people. One of them is the person’s last project, so I wanna give a shout-out and a big thank you to Jack Lukic. I can’t remember if that’s how you say his last name; we’ve had him on the Changelog before, and I think I actually gave him a shout-out when I guest-hosted on GoTime during their #FreeSoftwareFriday portion, which is very similar.
Jack is a guy who was the original creator of Semantic UI, so I thought it was appropriate with our admin and UI template conversation around Tabler, because we use Semantic UI for our admin here at Changelog, and also I use it on a bunch of client projects. It’s been a tool in my toolkit for years, and I very much appreciate it. It’s helped me make lots of money over the years, it’s helped me build things fast, and this is a project that I think has helped so many people, it’s amazing. Over 40,000 stars on GitHub, over 4,000 forks, and it’s very much been kind of a project headed up by a single person, that has been through different states of activity, and it’s been interesting to watch Jack manage the issues, which have climbed up to almost 600 now; he has 69 pull requests… So you can see how maybe he’s even a little bit drowning under the weight of it all. I’ve kept up with Jack over the years, and he’s been trying to find different ways of sustainability and what have you, so I just like to mention him when we have a chance to shout-out people as somebody who has helped me a lot in my life, and I think has helped a whole lot of other people as well… So shout-out to Jack.
[00:43:41.01] The second shout-out for me is to another person - this is Alexandru Maier, which you probably haven’t heard of… Alexandru tirelessly transcribes our podcast. This very show right here – in fact, Alexandru, you may be transcribing this in a few weeks… Hi, thank you for all your hard work. You make our transcripts awesome. Each one of our episodes gets transcribed, and he writes it in markdown, puts it up on GitHub, and then we suck them into the website from there, so they can be contributed to by the community on GitHub.
We have I think over 30 people who have gone in and fixed things up, add links, help Alexandru out, but he does a really awesome job, especially around jargon. He’s not a technical person necessarily - in the sense of developer technical, but when he hears a word that he doesn’t understand, he actually goes and looks it up and gets the proper nouns right, and figures out the jargon, and does a really great job. That’s why we love working with him and that’s why we still do not let computers do our transcriptions yet. Eventually, Alexandru, they may catch up with you, but not yet… So shout-out to you, and thank you for all your hard work.
Nothing but that I’m super-excited that this is back, and that I get to be a part of it, and I’m really interested to see what conversations happen over the next couple of months, and what things are shared.
If you haven’t yet, go to changelog.com/jsparty, you’ll see the avatars of all of our panelists; you can click on those, follow them on Twitter, engage with them… Also, follow @JSPartyFM, and please, tell a friend. We’ll talk to you all next week!
Our transcripts are open source on GitHub. Improvements are welcome. 💚