JS Party ā€“ Episode #20

JS Party is back! šŸŽ‰

with Jerod Santo, Safia Abdalla, Nick Nisi, and Christopher Hiller

All Episodes

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.

Featuring

Sponsors

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

Notes & Links

šŸ“ Edit Notes

Transcript

šŸ“ Edit Transcript

Changelog

Play the audio 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]

Amazing.

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 instead of podfading, which is what tends to happen with these kinds of things when the schedule falls apart, we decided last August to just put the show on hiatus, regroup, think about what went well, what didnā€™t go well, and design it a little bit differently. So thatā€™s what youā€™re listening to now. We have not exnayed Alex, Mikeal and Rachel - as I said, theyā€™re part of the show - but we did what you do when youā€™re trying to throw a party every week and you have a hard time getting people to show upā€¦ You just invite more people! So thatā€™s what weā€™ve done - weā€™ve actually expanded our panel, and weā€™re super-excited to have ten regular panelists now instead of three. We think this will very much help us to stay consistent with this show and bring you awesome content and a community party about JavaScript and the web every single week.

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!

Hey, everybody!

Hello!

[04:05] Weā€™re excited to have you guys here today. We want to get to know the new panelists a little bit, but we donā€™t wanna go through a pure ā€œTell us your life storyā€, because we only have three segments hereā€¦ The way weā€™re gonna do that is weā€™re gonna instead introduce you three to us by way of your relationship with JavaScript and with the web. So this first segment I have roughly titled ā€œWhat do we love about JS?ā€ and Iā€™m just now realizing those are also my initials, but please donā€™t tell me what you love about meā€¦ Letā€™s focus on JS, the JavaScript Party.

I have a somewhat humorous side-story - my kids think that JS Party is like ā€œJerod Santo Partyā€, so I havenā€™t broken it to them. But weā€™re gonna have a round-robin style conversation about what we love about JS. I will start, and I will just say that Iā€™m very much punching my impostor syndrome in the face by coming on a JavaScript show, because I have a dirty little secret, which is that I donā€™t really love JavaScript, the language; never really have. But what I do love about it is its ubiquity, how much you can get done, and all of the different things that it enables. Iā€™m a huge lover of the web and the web platform, and I love that JavaScript fits into that awesome triad of HTML, CSS and JavaScript that makes up the web.

So I love that about it. I definitely treat it like a layered cake, and I prefer to sprinkle my JavaScript on topā€¦ But thatā€™s me. Letā€™s hear from Safia. What is it about JS, the web and what have you that you love about it?

Yeah, I think my passion for JavaScript intersects a little bit with some of the things that you mentioned about liking the ubiquity and usability of the language. I do like a lot of the innovations with respect to the things that are happening with the actual grammar and language functionality, that are coming out in ES6, and some of the things that TC39 is proposing.

But my biggest interest in JavaScript is the community and how open everything isā€¦ Especially because over the past couple of months on my blog Iā€™ve been regularly writing about what I call the Code Reading Rainbow Series. Itā€™s where I read open source project code, and try and dissect how it came about and what it does, and learn a little bit more about it by actually reading the code, and I think itā€™s so wonderful that mostly everything on npm is open source, and you can go and take a look into how the tools that you use every day work, and that thatā€™s available to you is so fantastic and wonderful. So the openness is a big factor for me.

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.

[07:57] 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.

Very cool. Alright, Chris, letā€™s pitch it over to you. Youā€™ve been a long-time maintainer of the Mocha libraryā€¦ Tell us about JavaScript and you.

I started off in JavaScript ā€“ I was doing a lot of Python at the time, and this is when jQuery was getting really big, and everybody wanted to add jQuery to their sites and their appsā€¦ So I was working on web apps, and pretty complicated ones. But working in Python so much, I started to kind of really appreciate ā€“ you know, Python puts a lot of constraints on how you write your code; I felt like JavaScript was much more expressiveā€¦ But what I really liked about it is maybe the same reason a lot of people donā€™t like JavaScript - thatā€™s because it doesnā€™t have much of a standard library, or it doesnā€™t really have one at all. It means it was kind of easy to - or at least not as tedious - learn just about all there was to learn, outside of browser APIā€™s at the time.

Python, on the other hand, has such a huge standard library. It was kind of overwhelming to me, and I could never really feel like I had become an expert or mastered Python, simply because I hadnā€™t touched a great portion of that standard library. So thatā€™s kind of how I came to JavaScript and what I really liked about it.

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.

Very good. I think itā€™s interesting, your statement about JavaScript being relatively small in terms of the breadth of the language. Like you said, the standard library is very much lacking. I came to JavaScript from a Perl, then Ruby, and a little bit of a Python background, as well as just learning that I hated C and C++ at the time; I learned that, and I was like ā€œOkay, not thatā€¦!ā€ And I actually had the opposite reaction - whereas you thought ā€œOh, this is great, I can actually master this!ā€ ā€¦a lot of people like that about Go, where Go is very easy to learn in terms of the breadth or the scope of the language proper, I was looking for the batteries; I would routinely get frustrated because of the lack of the things Iā€™m used to in a standard library. So itā€™s just interesting that we have both found the same thing, but reacted kind of viscerally in different directions. But Iā€™m a big fan of Mocha, so thank you for all your work on that over the years. We should say Chris was on Request for Commits ā€“ somebody in the chat give us the episode number; weā€™ll include it in the show notes, a great episodeā€¦ All about sustainability, and Mocha, and the softer side of open source. That is definitely a must listen, so go back and check that out.

[12:09] Alright, Nick, letā€™s turn to you - I could introduce you, Nick, probably pretty well, because weā€™ve actually known each other for a long time as co-organizers of the Nebraska JavaScript conference (NEJS Conf), which by the way, the CFP is still open on that, but closing soonā€¦ There we go, RFC #15; thank you, chat room. So check that out if you wanna listen to Chris talk about the softer side of Mocha.

But Nick, fellow Omahan, fellow JavaScript person, co-organizer of NEJS Confā€¦ I actually donā€™t even know your story with regards to JavaScript, so letā€™s hear it.

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.
I liked that a lot more than Java, so I stuck with it. I just grew to really like the language. I started attending a lot of meetups in Omaha on JavaScript and dynamic languages, and just really kept learning.

I think what Chris was saying, about it being really a small language that you can really wrap your head around - I think that was one big appeal to me to stick with itā€¦ And then why I love it - kind of following along the same lines as Safia and you, Jerod, with its ubiquityā€¦ I think that itā€™s great that if youā€™re working on a project that touches the web, it probably has JavaScript in there somewhere, which means that itā€™s kind of the unifying language in a lot of ways. That also means that developers who primarily develop in other languages get to bring their experience and their methodologies to this language, which for better or worse, I think improves the language. It brings a lot of different ideas. So yeah, I also think that itā€™s an approachable language for teaching people to code.

Letā€™s emphasize the effect of jQuery. Chris, I see youā€™ve put in the chat that you wanna mention jQueryā€™s API, and I think most people would agree that prior to jQuery - Iā€™m not even sure the years involved here, but maybe like ā€™03-ā€˜04 - when did jQuery become prominentā€¦ But prior to that, JavaScript really did suck. I mean, there wasnā€™t much to like about it, mostly not because of the language, which hadnā€™t really changed in a long time, but because of the DOM APIā€™s were so difficult to use. So jQuery very much I think moved JavaScript to a place where it was lovable, finally. Do you guys agree?

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.

I think I came into client-side JavaScript probably a little bit later than everybody else, since Iā€™m youngerā€¦ So I was definitely a part of that generation that at the beginning grew up thinking that jQuery and JavaScript were pretty much the same thing, because at that point it had such a strong hold on client-side JavaScript development in general.

[16:12] I remember when I first started to actually write DOM manipulating code in vanilla JavaScript, I was like ā€œWhat is going on here? This is so different, and clunkier.ā€ So yeah, the API was so attractive that I think it definitely drew a lot of people who otherwise would have been deterred by the vanilla API for interacting with the DOM, into JavaScript, and then kind of like provided a smooth place to take off from into other parts of the language.

Yeah, just to emphasize the learnability side of it real quickā€¦ The fact is that the industry has very much moved beyond jQuery as standard; a lot of the reason is because the browsers have made those APIā€™s betterā€¦ You know, querySelectorAll() and what have youā€¦ A lot of the quirks have been worked out, and thereā€™s other ways of building production-scale applications. But when it comes to teaching, we still have been very involved in introducing people to the web and building for the web, and we still use jQuery and teach it just because at that point it doesnā€™t matter whatā€™s JavaScript and whatā€™s jQuery; itā€™s getting people to realize how manipulable the web is, and how jQueryā€™s API focusing on the CSS selectors as the way of getting into it, while youā€™re already teaching them CSS, right? So theyā€™re learning the CSS selectors, and now letā€™s use CSS selectors to grab elements and manipulate them very easily by calling one-word functions. Thereā€™s really still no more powerful way to get somebody excited about learning JavaScript and the web than just showing them what jQuery can do.

Yeah, thatā€™s a great point.

Next, letā€™s look at a specific project. Itā€™s always fun to find specific projects out there, especially ones that have general-purpose use, or maybe even a certain level of depth or the things theyā€™re providing are impressiveā€¦ And tease it apart a little bit - take a look at it, talk about its pros and its cons, and thereā€™s so many projects in the JavaScript space that itā€™s very difficult to even keep up with them. But we found a project this week which I think hit Changelog news ā€“ maybe it was last week, but it was one of the more popular things that we logged on Changelog news, which is called Tabler. Weā€™ll pass a link to Tabler into the chat, so everybody can check it out.

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.

[20:00] 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ā€¦

Oh, okay.

ā€¦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.

I guess one thing that I would be looking at is how it would fit in with the rest of the code that Iā€™m using. Looking at the head, itā€™s bringing in RequireJS, and all of the small JavaScript files that it has are written in AMD JavaScriptā€¦ So just kind of thinking about that, thinking about how I would integrate it in with a larger codebase.

Yeah, good points. Chris, what about you? Did you take a look at this and have thoughts?

I kind of have similar concernsā€¦ I use Bootstrap 3. Itā€™s been a while since Iā€™ve touched Bootstrap, but as I recall, there are basically two parts; I donā€™t know if thatā€™s still true, but thereā€™s the JavaScript part, and the CSS part. You probably want the CSS part if youā€™re using Bootstrap, and the JavaScript part is people will write their own implementation to work with the CSS in whatever framework that people tend to useā€¦ So does this want you to use Bootstrapā€™s JavaScript, are there adapters for frameworks, or how does that work? This is better suited to a more server-side rendered appā€¦ But definitely, if Iā€™m going to build a dashboard, Iā€™ll definitely take a closer look at this.

[24:20] 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.

In my opinion, they should be used as starting points, and they should be customized. I think the great thing about Bootstrap is they have a page where before you download the CSS and JavaScript assets you can configure things like the fonts you wanna use, and the colors and stuff like that. And thatā€™s a great way to add your own brand identity to the standard framework, but so many people donā€™t do that, so it doesnā€™t look very original. I think it depends on how you execute it and how you leverage the flexibility of the tools.

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.

[27:52] 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ā€¦

They are.

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.

[32:14] Keep it simple.

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.

[34:58] to [35:30]

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?

[35:57] 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.

[40:21] 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.

[43:41] 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.

Okay, anything else before we wrap this show up? Anybody have anything they would like to plug, or a thought they would like to share with the JavaScript community?

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.

Yeah, in that regard, I wanna talk a little bit about whatā€™s coming down the road and what we want this show to be, because this is very much a relaunch, and itā€™s not yet what we want it to be. Weā€™ve always set out to build a place where we can all come together and discuss and have fun, and really (what we say is) celebrate JavaScript and the web, and the community around itā€¦ So weā€™re doing our best to provide that. We have switched days, so if youā€™re listening to this recorded from the feed, we now record Thursdays at 1 PM Eastern, which is 10 AM Pacific, I believe. I always have to check every timezone, because I can never rememberā€¦ But basically, on Thursdays, lunch hour in the U.S. We make it live, so come to Changelog.com/live, come hang out in our Slackā€¦ We want this to be a conversation, and not just amongst those of us here with microphones.

We also have a place for you to sound off and tell us what you wanna hear on this show. You can do that in a few ways. First of all, we have a ping repo on GitHub, which lives at github.com/thechangelog/ping. You can open an issue there; we have a JS Party label, so you can let us know that this suggestion or feedback or show idea is about JS Partyā€¦ And tell us what you wanna hear, because itā€™s our goal to bring three segments to you every single week, and we donā€™t really care what goes in that segment, so it doesnā€™t have to be the same thing every week. We want it to be conversations that we all wanna have, so please let us know what you would like to hear. You can also hit us up on Twitter at @JSPartyFM, and you can follow all of our awesome panelists - like I said, there will be a group of ten, and we hope to create a Cheers-like environment, if anybody remembers that show where everybody knows your name, and thereā€™s regulars, and itā€™s not always the same people that are at the bar, but itā€™s always people that you like and always people who are uplifting, and always people that have strong opinions and expertise about JavaScript. Thatā€™s what weā€™re trying to do.

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!

Thanks!

Changelog

Our transcripts are open source on GitHub. Improvements are welcome. šŸ’š

Player art
  0:00 / 0:00