Speaker 1: Hello, everyone, Welcome to an episode of your own I
Speaker 1: hope today. I'm Gussie and I'm joined on the panel
Speaker 1: by Page.
Speaker 2: Hey, everybody and t J.
Speaker 1: Everyone awesome, and our guest today is Billian Magida. Hi,
Speaker 1: Di dear, Hi, let's talk about maybe you telling us
Speaker 1: a bit about yourself, why you're famous, what you do development,
Speaker 1: and yeah, that kind of stuff.
Speaker 3: Okay, I'm not sure famous. Okay. My name is Dillion
Speaker 3: and I'm from Nigeria, a software engineer and a technical writer.
Speaker 3: Currently work at this dot and I write on a
Speaker 3: lot of publications, a lot of organizations. I write with
Speaker 3: free cood, CAUMP, I write with Lord Rocket and a
Speaker 3: few other places. And I think that's the basic about me.
Speaker 1: So, in terms of your writing, is there any kind
Speaker 1: of things or topics you like writing about or enjoy.
Speaker 3: Mostar As a software engineer, I write about or I
Speaker 3: love writing about everything I learned, but mostly I write
Speaker 3: about web development because that's my speciality. And I also
Speaker 3: have a major focus on the front end. So you'll
Speaker 3: find a lot of articles around front end technologies, frameworks,
Speaker 3: practices around frame around front end generally cool.
Speaker 1: So one of the articles you wrote about recently was
Speaker 1: about building a source Paul gats Bie, and maybe we
Speaker 1: could maybe look at that a bit. So in terms
Speaker 1: of gats be itself, for people that maybe don't know
Speaker 1: about gasp, you can maybe talk about gats to itself
Speaker 1: as a platform and what you can do with it.
Speaker 3: Okay, gads b is a React framework, is built based
Speaker 3: on React. And the beauty of gads B that I
Speaker 3: know is that it's a static generator. Two, it's just
Speaker 3: for building or use for generating static sites. So you
Speaker 3: have your or you have your javascripts, you have every
Speaker 3: of your assets, and then they're just compound together to
Speaker 3: create those static sites and then busily about gat to
Speaker 3: be again is it uses graph Quo, which means within
Speaker 3: your pages, you can query notes that I created inside
Speaker 3: of your application or from other plugins, so you can
Speaker 3: query those notes and then build your application based on
Speaker 3: those notes.
Speaker 2: So I'm pretty familiar with gatsby. I actually built my
Speaker 2: own personal website with it, and one thing that I've
Speaker 2: noticed about it is that it really it takes advantage
Speaker 2: of the plug in ecosystem that has kind of sprung
Speaker 2: up around it. It seems like whatever you might need
Speaker 2: in terms of links or Google fonts, or analytics or whatever.
Speaker 2: There's probably a gasty plug in for it. But I've never,
Speaker 2: certainly never really looked under the hood of the plugins
Speaker 2: to see how they're built. So I'd love to hear
Speaker 2: how you you know, how you got started, what you
Speaker 2: needed that there wasn't a plugin for, and then how
Speaker 2: you went about building one and adding it into the ecosystem.
Speaker 3: Okay, yeah, I forgot to mention that gadsby has a
Speaker 3: very large plug in ecosystem. Almost, if not every everything
Speaker 3: you need links images the team. The team at gads
Speaker 3: b they are also creators of some of these plugins,
Speaker 3: and they optimize the sites in various ways. So for
Speaker 3: me before what I had been using plugins right from
Speaker 3: when I started, because even when you're starting, you're already
Speaker 3: starting based on one or two of the most important
Speaker 3: plugins that are necessary for building your site, or one
Speaker 3: of which is the gads be transformer too, there are
Speaker 3: a few very important ones when starting off. So when
Speaker 3: I started, I started installing plugins and I got the
Speaker 3: most everything I need. Like, if I needed something, all
Speaker 3: I just have to is go online such a gads
Speaker 3: bee this, and then there is a plugin for it.
Speaker 3: So my first attempt at creating a plug in was
Speaker 3: I didn't really need to do something. I just wanted
Speaker 3: to explore plugins. I just wanted to create a plugin
Speaker 3: of my own. And the first one I created was
Speaker 3: for I don't know if you're familiar with Depth Too, blogging
Speaker 3: platform for majorly web or regioly software engineers. So on
Speaker 3: Depth Too. When writing articles using the markdown, you can
Speaker 3: there's something they call liquid tags. So liquid tags are
Speaker 3: a beautiful way to embed services on your on your blog,
Speaker 3: so you can embed twits, you can embed code pens,
Speaker 3: and instead of you know, going onto code pen and
Speaker 3: then copying the embedded code, you just use this liquid tag.
Speaker 3: Start with a calibrase and with the calibrese then the
Speaker 3: code pen and then maybe the link of the code pen,
Speaker 3: and then in the built blog it has the embedment
Speaker 3: of that code pen. So when I saw that, I
Speaker 3: I was building my gats peer application, my own personal blog,
Speaker 3: and I wanted to embed all of these services too.
Speaker 3: So instead of going online to copy the embed code,
Speaker 3: I thought about creating my own liquid bags, but for
Speaker 3: gads be applications. So it was while doing that I
Speaker 3: discovered how how interesting or how fascinating it was when
Speaker 3: during your own pluggins. Yeah, that was my first experience
Speaker 3: with creating my own plugging.
Speaker 1: Oh, I mean I first came across Gatsby. I think
Speaker 1: it's a couple of years ago when I was doing
Speaker 1: that typical thing of a developer trying to do a
Speaker 1: new blog, and you get more excited about the process
Speaker 1: right of doing the development and creating a blog. And
Speaker 1: one of the things I struggled with back then was
Speaker 1: understanding how it all works. And maybe it's probably changing now.
Speaker 1: I'm guessing in terms of new material and new tutorials,
Speaker 1: but in terms of getting started, how easy is it now?
Speaker 1: Just say, in terms of some he wants to build
Speaker 1: a blog right and page as we already, but how
Speaker 1: easy do you think it is now in terms of
Speaker 1: getting a blog up there and getting started content and
Speaker 1: everything else.
Speaker 3: Well, with a lot of bloggings created and a lot
Speaker 3: of templates created of course by the community, it's very easy.
Speaker 3: In fact, if you do not have a design of
Speaker 3: your own, you can just go to the Gatsby side
Speaker 3: and you can just duplicate the templates, have it's in
Speaker 3: your own name, and then you have your blog already.
Speaker 3: So it's very very easy. And a lot of templates
Speaker 3: are still they're still being created for blogs, for e
Speaker 3: commerce websites, for a lot of other use cases.
Speaker 2: Yeah, I would. I would definitely say that that is
Speaker 2: the case. On the Gatsby website. They even have a
Speaker 2: thing that they call Starters, which is hundreds of gas
Speaker 2: starter websites that people have built, and they're for everything.
Speaker 2: There's ones that work for blogs, there's ones that are
Speaker 2: set up for e commerce, there's ones that are The
Speaker 2: one that I used was called an Advanced Starter, and
Speaker 2: it has a whole bunch of stuff built into it
Speaker 2: or already kind of I guess, set up plugins for
Speaker 2: SEO and plugins for sharing, and plugins for discuss if
Speaker 2: you want to have comments. But what I really liked
Speaker 2: about that one in particular was even though it had
Speaker 2: all of this kind of configuration set up, it had
Speaker 2: no styles, so you were able to then completely take
Speaker 2: control of how you wanted it to look. And really
Speaker 2: I added a bunch of stuff, I removed a bunch
Speaker 2: of plugins that I didn't care about. So there's there's
Speaker 2: something for everybody, regardless of what you're looking for. There's
Speaker 2: ones that are set up to run on aws. There's
Speaker 2: ones that have authentication. There's ones that integrate with different
Speaker 2: CMS systems already. There's if you if you can tell
Speaker 2: like what you're looking for, or if there's some you know,
Speaker 2: buzzwords that you're trying to hit, you can probably find
Speaker 2: it as a category under these starters. So it's really
Speaker 2: really helpful in that regard. Yeah, the gats B side
Speaker 2: is pretty cool, although I know that next is like
Speaker 2: really gunning for them in addition to its server side
Speaker 2: rendering and its ability to be flexible enough to be
Speaker 2: a full application as well. So it'll be interesting to
Speaker 2: see how they continue to compete with each other and
Speaker 2: improve because of it.
Speaker 4: I'm curious too, So the blog post you wrote is
Speaker 4: about a source plug in, so is source there referring
Speaker 4: to the content itself? It's going to drive like a blogger.
Speaker 4: I'm curious what sources in this context?
Speaker 3: Okay, source context of SOX plugging is our quality feature.
Speaker 3: Oh it technique. It's just a technique for pulling content
Speaker 3: from various sources, so you can either pull locally or
Speaker 3: pull externally from another website from an EPI. That's just
Speaker 3: what the SCE means.
Speaker 4: The gotchet so it would be like I want to
Speaker 4: use gas By to build my site, but the content
Speaker 4: itself is in wherever right, some other platforms some of
Speaker 4: the a p I.
Speaker 1: Okay, so I'm guessing this is all kind of part
Speaker 1: of the jam stack, right. I feel like funtended and
Speaker 1: fun tend them. I think so with regards to the
Speaker 1: whole kind of ecosystem, I know that page mentioned next
Speaker 1: what is it? What are the options out there? And
Speaker 1: why does gats before you stand out compared to next
Speaker 1: years or other thing? It's got to be used for
Speaker 1: this kind of thing.
Speaker 3: Oh well, when you look at next years, in my
Speaker 3: own experience, next year is more performance or specifically for
Speaker 3: server side rengering. Of course it does start excite generation.
Speaker 3: But when you look at Gatsby and next year is
Speaker 3: in my experience, if you want static static assets at
Speaker 3: the end of the day, Gatsby has a lot of
Speaker 3: support for that. I mean that is even their their
Speaker 3: main their main product. But when you're looking at server
Speaker 3: side rendering, then you can go next years. So of
Speaker 3: course you hear a lot of arguments about next years
Speaker 3: doing all that gats It does. But in GADS with defense,
Speaker 3: I will say gads we has a lot of things
Speaker 3: that makes them exceptional. Once it comes to static side generator,
Speaker 3: one of which is the source plug in, and then
Speaker 3: another is the plug plugging ecosystem, you see a lot
Speaker 3: of plugging. So if you're doing static sites, in my opinion,
Speaker 3: next years doesn't come as closed as Gatsby. But once
Speaker 3: you're doing anything server side, then next year stakes doing.
Speaker 1: Oh yeah, I'm looking at the gas library right now
Speaker 1: and the website it says you've got more than twenty
Speaker 1: one hundred product for actually building your different websites. So
Speaker 1: clearly a lot of work has gone into the community
Speaker 1: to So if somebody wanted to learn how to create
Speaker 1: the first plug in and what you give them based
Speaker 1: on your own experience and what they've gone through so far.
Speaker 3: Well creating a plugging first, It depends on what you
Speaker 3: want to do. There are transformer plugins transformed plugging as
Speaker 3: the name as name means, it's just you're transforming an asset,
Speaker 3: you're transforming data, you're transforming and image. There are also
Speaker 3: source plugins, and those are the two common ones. I
Speaker 3: don't know if there are any other category. So, and
Speaker 3: the guard beside has documentation on this. You can try
Speaker 3: some advanced stuff too, but that would heavily depend on
Speaker 3: how you understand the way these plugins work. So if
Speaker 3: your greatness source plugging, there is a there is. They're
Speaker 3: just basic information you need and and the rest is
Speaker 3: up to you. There are optional tools you can use.
Speaker 3: There are optional methods that the Gatsby to expose this
Speaker 3: if you're interested in them. But then at the very
Speaker 3: basic level, the documentation provides enough information that you need
Speaker 3: in creating any plugging, except you're trying to do something
Speaker 3: that they were in prepared for.
Speaker 2: So, Dillian, I'm looking at your personal website now, did
Speaker 2: you build this with Gatsby?
Speaker 3: Yes, that's my very first experience with Gatsby.
Speaker 2: Nice. I would have been disappointed if it had been
Speaker 2: anything else, I think. So, I see on your about
Speaker 2: me page that you're actually the founder of a thing
Speaker 2: called the Web for five. Can you tell us a
Speaker 2: little bit about what that is.
Speaker 3: The word for five was a platform I created specifically
Speaker 3: for writing my own articles. And the reason I created
Speaker 3: that was delion Miki. That it's called my personal website
Speaker 3: wasn't exactly a blog, like. It's my own personal space
Speaker 3: for writing stuff. So I can write about personal life
Speaker 3: stories and I can also write about articles so I
Speaker 3: needed this other space where it to be strictly web
Speaker 3: development articles, no personal story. And then also I was
Speaker 3: hoping that I would get authors, guest authors that will
Speaker 3: join me on that platform. And the reason why it's
Speaker 3: named web for five years, I wanted to really demystify
Speaker 3: web topics there. Although people commonly misunderstand me. They think
Speaker 3: that it's meant for five year olds, but it's that's
Speaker 3: not possible. But the main idea was just demystifying it
Speaker 3: to this smallest level that anybody could understand.
Speaker 2: That's very cool, so kind of like I'm five on Reddit.
Speaker 3: Yeah, that's it nice.
Speaker 4: I like this actually quite a bit because you're you're
Speaker 4: covering I'm just looking. So we put the link to
Speaker 4: it in the show notes. But things like document fragment
Speaker 4: and the dom parameters and arguments, substring and slice methods
Speaker 4: of strings, like these are topics that I think are
Speaker 4: super valuable and you don't see covered very often, right, Like,
Speaker 4: this isn't a super hip or trendy thing to cover,
Speaker 4: but it's actually super useful. So this is kind of
Speaker 4: a I'm sort of fascinated by the site of people
Speaker 4: looking through.
Speaker 3: That was goal. My goal is to touch all those
Speaker 3: small topics that you really don't see often and sometimes
Speaker 3: they exist, but you're not just outwagh that there is
Speaker 3: something like this. It just creating websites.
Speaker 4: Yeah, the file input field and depth. I think I
Speaker 4: need to bookmark this one. These are like the I
Speaker 4: swear like that's one of the great and horrible things
Speaker 4: about the web is like there's all these little like
Speaker 4: nooks and crannies for things that have been around for
Speaker 4: a while, and some of them are just completely shrouded
Speaker 4: in mystery that we just try to ignore. But sometimes
Speaker 4: you need to know some of this stuff.
Speaker 1: Yeah, I mean I definitely second that because we I
Speaker 1: think it's the thing where once you've been in coding
Speaker 1: for a while, we forget that sometimes that kind of
Speaker 1: basic elements and always that will cover it. Or maybe
Speaker 1: you might have used it in a project briefly or
Speaker 1: don't fully understand how it can be used elsewhere and
Speaker 1: the power of a particular feature set or whatever. So
Speaker 1: I mean, in terms of you're writing, then how do
Speaker 1: you decide what you write and what your process? Do
Speaker 1: you do an outline first and then maybe working for
Speaker 1: a few weeks, do you have like a calendar that
Speaker 1: you have your articles that you're writing about and how
Speaker 1: to kind of go about the process of if you're
Speaker 1: writing for various blogs and websites.
Speaker 3: I have one. I have my personal trailok board where
Speaker 3: I dropped my arctical ideas. So this icol inspirations. They
Speaker 3: come sometimes when I find when I experience a bog
Speaker 3: and then I go on Google and then maybe it
Speaker 3: takes me a lot of time in finding the solution.
Speaker 3: So when I finally get the solution, I write about
Speaker 3: it so that anyone using anyone who experiences the same
Speaker 3: now has an article that clearly covers that bog. Then
Speaker 3: some other inspirations when I discover some tools I never
Speaker 3: knew existed, or some APIs, maybe dumb APIs I never
Speaker 3: knew existed. Once I come about them, I try to
Speaker 3: just I just try to let the public know that
Speaker 3: such tool exists and this is how to use them.
Speaker 3: And a very good example was the web share API.
Speaker 3: I never knew there was a web share API. Whenever
Speaker 3: I wanted to add sharing features to my applications, I
Speaker 3: have to go to Twitter and copy the template RL
Speaker 3: and go to LinkedIn. But when I discovered the webshare API,
Speaker 3: the navigator, how it connects with your mobile applications and
Speaker 3: giving you access to share on WhatsApp, on Facebook. I
Speaker 3: wrote about it, and I think till now I think
Speaker 3: that's my highest viewed article because when I hear it
Speaker 3: on Sweeter, people were like, wow, so this existed. So
Speaker 3: sometimes when I discover amazing twos like that, I write
Speaker 3: about them. And then sometimes I write about articles that
Speaker 3: I want to learn. I want to know how they work.
Speaker 3: So maybe in my workplace or maybe I'm just going
Speaker 3: around the internet and I see, for example, the fragments.
Speaker 3: When I saw the document Fragments, I really didn't know
Speaker 3: how they worked. So I had it on my board
Speaker 3: that I was going to write about it, and then
Speaker 3: that caused me to make a lot of research and
Speaker 3: then I find a little bit about it.
Speaker 2: That's very cool. I'm still clicking around on your website.
Speaker 2: You have you have written for a bunch of publications,
Speaker 2: like you said, log Rocket, dev Dotto Vonage. So I'm
Speaker 2: curious how did you get in with those publications or
Speaker 2: free code Camp. Did you submit articles to them? Did
Speaker 2: they come to you with it? Like? How how does
Speaker 2: that go for anybody who would be interested in potentially
Speaker 2: writing for things like this in the future.
Speaker 3: Well sometimes I've had one occasion where they came to me,
Speaker 3: but for most others, I'm the one applying. And the
Speaker 3: reason why I love writing in various places is I
Speaker 3: don't just want to have my contents in one place.
Speaker 3: I believe frequent Camp has their own audience, log Rocket
Speaker 3: has their own audience, so, you know, an attempt to
Speaker 3: reach out to everyone's audience. Then I try to spread
Speaker 3: my contents around. But for anyone trying to apply some
Speaker 3: of them, they have their right for our speech. Freqal
Speaker 3: campus years, log Rocket has years, associates, and few other
Speaker 3: places I have they have theyears. And sometimes when your
Speaker 3: articles want someone to cover your articles somewhere, they reach
Speaker 3: out and they're like, okay, so your article here and
Speaker 3: I would love you to write for us, and this
Speaker 3: is what we have if you're interested.
Speaker 1: Awesome. And in terms of your article so far, are
Speaker 1: there anyones that are kind of highlights to you beside
Speaker 1: the oaring API you've done or log Rocket trapic Cote
Speaker 1: Camp And how is that kind of benefited maybe your
Speaker 1: your career and let you maybe have more exposure and
Speaker 1: learning even more than you already.
Speaker 3: My favorite article at this point. The one on the
Speaker 3: top of my head is one of the first article
Speaker 3: I wrote for log Crockets, and it was understanding cues
Speaker 3: in no GS. And the inspiration behind the article was
Speaker 3: I learned about queues from a tutorial was watching, and
Speaker 3: then when I went on line to find out more information,
Speaker 3: I discovered that at that point I couldn't find any article.
Speaker 3: Even up to the second such result of Google, I
Speaker 3: couldn't find any article that was specifically for no gsq's
Speaker 3: apart from the one in the note documentation. So I
Speaker 3: wrote about it. And when I wrote about it, I
Speaker 3: realized that people didn't even know that People didn't even
Speaker 3: know that they were accused like this in no GS
Speaker 3: and even up to you now, I still get feedbacks
Speaker 3: from friends and they're like, Okay, I went on Google
Speaker 3: or searching for no gsq's and your article came out first.
Speaker 3: So for me, it gave me a lot of understanding.
Speaker 3: It made me understand a lot of how NUGS works,
Speaker 3: how it handles asynchronous operations, from reading files to making
Speaker 3: API requests. It made me understand more like the in
Speaker 3: depth of no GS. And also I believe with that
Speaker 3: article it has made a lot of people online know
Speaker 3: how NUGS works on that wood.
Speaker 4: Okay, so I'm totally guilty. I do not know what
Speaker 4: no gsqs are and now I'm very curious. So could
Speaker 4: you explain what like no jsqs are and like why
Speaker 4: your average developer like, like what knowledge that could help
Speaker 4: you do well?
Speaker 3: Looking at it from the top le, they may really
Speaker 3: not help you because when you go to no years,
Speaker 3: you just call your APIs, you just radio files. You
Speaker 3: just perform every of these as synchronous operations, and you
Speaker 3: really don't care how no year has handled them. All
Speaker 3: your concern about is no years eventually handles them. But
Speaker 3: the article is relevant when you really want to know
Speaker 3: how no JS works, and maybe in some cases where
Speaker 3: you're trying to understand why this operation was completed before
Speaker 3: this other operation, then the article be of good health
Speaker 3: because the relevance of cues is no JS expects you
Speaker 3: to do a lot of asynchronousity, and the cues is
Speaker 3: just its own way of ensuring that there are no conflicts.
Speaker 3: It's its own way of ensuring It's just like a
Speaker 3: law or a policy that guides how asynchronous operations are
Speaker 3: handled in no years, So you really may not need
Speaker 3: it for development, but maybe for interviews or maybe just
Speaker 3: understanding how Nutchas walk that school be very relevant.
Speaker 4: Yeah, I can see that because I've definitely written, like
Speaker 4: usually when I touch nodes stuff, it's like quick, one
Speaker 4: off scripts to do something, and so there's definitely been
Speaker 4: times where it's like I do not know what's happening here,
Speaker 4: but like, as long as my script finishes and does
Speaker 4: what it needs to do, it's like great, right, But
Speaker 4: I could totally see how once like you're writing things
Speaker 4: that need to stick around and be like production ready, Like,
Speaker 4: I can see why you might need to know that
Speaker 4: rather than just hoping for the best. So I'm curious, Actually,
Speaker 4: you mentioned that you balk about things that just come
Speaker 4: up and you run across. I'm curious what your day
Speaker 4: job is, because you seem to run across some absolutely
Speaker 4: fascinating set of topics because I've found it very interesting
Speaker 4: just seeing the things you've come up with. So I'm curious,
Speaker 4: like what your day job is, what sort of things
Speaker 4: you work on, because this is pretty interesting stuff.
Speaker 3: But well, before I, before I got working at my
Speaker 3: current company, I was a freelancer and I didn't really
Speaker 3: have many clients, so it's just past now project. So
Speaker 3: then I didn't really have much doing. I could just
Speaker 3: get an idea and in a week I would make
Speaker 3: my research and I would write. Then when I got
Speaker 3: my job my articles, I started writing articles during weekends,
Speaker 3: so I didn't really have much time during the week,
Speaker 3: or if I had any time, I would just you know,
Speaker 3: write them pieces by pieces by pieces till the final
Speaker 3: till the final version. But mostly I shift them to
Speaker 3: weekends so I could just wake up on Saturday and
Speaker 3: then go to my board and see something I pick up,
Speaker 3: and between Saturday and Sunday, I have them waiting and
Speaker 3: then I share them during the week.
Speaker 1: Looking on your profile, also, you're building something called Schoolmark.
Speaker 3: Yeah, it's my own small startup.
Speaker 1: Cool cool Yeah, So I mean it says it's an
Speaker 1: online market for business. Moment in the German schools. Maybe
Speaker 1: maybe just how you were about building it and as well.
Speaker 3: Okay, so in Nigeria you have a lot of online markets,
Speaker 3: online stores, but I discovered I and my partner we
Speaker 3: discovered that for all of these stores, there's really okay,
Speaker 3: the main inspiration was right from our university. Before we finished.
Speaker 3: We discovered that when people want to go about advertising
Speaker 3: their products. They share with friends, they share on their
Speaker 3: worsapp statues. There really was no formal way of advertising
Speaker 3: their products around the school. And of course, when I'm
Speaker 3: sharing my product on my worsapp statues, it's only my
Speaker 3: mutual contact gets to see those products. For non mutual
Speaker 3: contacts to never know unless my friends helped me share
Speaker 3: that status. So me and my partner, we we found
Speaker 3: the need to create an online store, even though it
Speaker 3: had the same services, same features, like every of these
Speaker 3: online stores, wanting to create a own online store that
Speaker 3: would be specifically for schools. So say you're in school
Speaker 3: and you have a small business that you are making
Speaker 3: a life off with, then you can just go to
Speaker 3: that space and then have your products there. And then
Speaker 3: the beauty about school Mat too is we are still
Speaker 3: working on We're still hoping for the platform to get
Speaker 3: very recognized such that once you step into when in
Speaker 3: school and you want to buy something online, you don't
Speaker 3: have to ask questions. You just go to school Mat.
Speaker 3: So it's an online store having most of the features
Speaker 3: you find online and other stores, but specifically for schools.
Speaker 4: Cool and.
Speaker 2: Well, that's very cool, and of course my first question
Speaker 2: is what tech stack are you using for it?
Speaker 3: Okay, I'm using next Ja yes on the front end,
Speaker 3: amusing next Jase and typescript on the front end, and
Speaker 3: amusing no Gears and Mongo or Mongos for the back end.
Speaker 1: Also, you've got both gus next Experience in and about.
Speaker 3: Yeah, I do.
Speaker 2: So how has it been so far? Is it? Is
Speaker 2: it live so that people can start trying it out?
Speaker 3: Yeah, it's actually live. We are at the stage of
Speaker 3: promoting and marketing because we we haven't really gotten the
Speaker 3: recognition that we're looking for, but we are. We don't
Speaker 3: expect an instant recognition, so we are going gradually depending
Speaker 3: on the resources that we have.
Speaker 1: That's awesome, very cool, And I'm guessing in terms of
Speaker 1: the front end aspect of it, how did you go
Speaker 1: about planning and the architecture, the kind of component design
Speaker 1: and are using mid docs, moll backs for managing the
Speaker 1: state or how come together?
Speaker 3: Okay, so the architecture was very influenced by how in
Speaker 3: my crorent company we worked on a project where we
Speaker 3: use next years extensively, and before working on that project,
Speaker 3: the site was just built with React. So of course
Speaker 3: I had some SEO problems where my pages weren't properly indexed.
Speaker 3: So when I saw how next gas was used immediately
Speaker 3: after the project, so I just took all of that experience,
Speaker 3: the architecture, the way the files were arranged. I just
Speaker 3: took all of that experience to revamping the whole site.
Speaker 3: So that was it for state management. I don't have
Speaker 3: much state management going on, just state within components. I
Speaker 3: don't have global state management. I haven't found the NEEDI
Speaker 3: yet for that. Maybe I'm not doing things the right way,
Speaker 3: but I haven't found the NEEDI yet. For that. I
Speaker 3: used the SSR as I need, and then I do
Speaker 3: the front end navigations and speed management as I also need.
Speaker 2: I don't think that there's anything wrong with not having
Speaker 2: pulled in reducts or another state management tool. We had
Speaker 2: Mark Ericksson on the podcast a few weeks ago, and
Speaker 2: he's one of the creators or one of the maintainers
Speaker 2: of reducts now, and one of the things that we
Speaker 2: talked pretty extensively with him about was the fact that
Speaker 2: people are jazzed to pull reducs in at the earliest
Speaker 2: possible time that they see they might need it, and
Speaker 2: usually it's way too soon in the project, and a
Speaker 2: lot of times it's very unnecessary and something like context
Speaker 2: would suit their needs just fine. So I think you're
Speaker 2: doing the right thing by not over engineering this early on.
Speaker 3: Actually at the point I'm wanting to have reducs in.
Speaker 3: But the way next years is built, or do we
Speaker 3: build next years app? Sometimes he's very had well. In
Speaker 3: my experience, he's very hard having shared stuff like shared functions,
Speaker 3: especially when you're doing serva arrangering stuff, because every page
Speaker 3: when you're doing serva arrangering, every page has its own
Speaker 3: server arrangering feature where you can pull from the server
Speaker 3: or have things statically. So if you're trying to have
Speaker 3: a maybe a higher order component or something shared with
Speaker 3: next Year, sometimes it comes off very difficult, and in
Speaker 3: order to avoid that stress, you just leave it till
Speaker 3: maybe you very much need.
Speaker 2: It makes sense to me.
Speaker 1: So you mentioned that you took some learnings from your
Speaker 1: current role next Years. Maybe what kind of things are
Speaker 1: talking about in terms of the structure of your application?
Speaker 1: What tips did you kind of get from your next
Speaker 1: sist us?
Speaker 3: And Okay, so with my little experience of next Years,
Speaker 3: I didn't really know how to work with get service props,
Speaker 3: which is the function for doing server rendering reading pages,
Speaker 3: so I didn't really know how to work with that
Speaker 3: and are regarding folder structure, all I did was have components,
Speaker 3: folder and maybe a vieusfold that we have all of
Speaker 3: the pages. I also saw how Typescript was used before
Speaker 3: while using typescript. Before I only know of okay number string,
Speaker 3: I didn't really know of interfaces, I didn't really know
Speaker 3: of types. So I also how Typescript was used extensively
Speaker 3: in the project such that even your intelligence shows you
Speaker 3: the props of a component and it warns you instantly
Speaker 3: when you violiate any of the types you have declared.
Speaker 3: So the three main things I learned was how to
Speaker 3: perform server side rendering operations which get server side props
Speaker 3: and folder structure, knowing how to properly have your comp names,
Speaker 3: have your containers and then have your pages, and the typeescript.
Speaker 3: That was where I lend a lot of the Typescript
Speaker 3: knowledge that I used today for interfaces for prop types.
Speaker 3: Before I use prop types, react, prop types, sport. Now
Speaker 3: I use typescript for everything.
Speaker 4: Awesome and remind me it's been a while since I've
Speaker 4: touched next Day. As the get server side props is
Speaker 4: that I'm trying to remember exactly what that does. Is
Speaker 4: that like get data from your server so that it
Speaker 4: could be like almost like statically injected. Am I remembering
Speaker 4: that right?
Speaker 3: Yes, you're getting You're getting data from your SAVA and
Speaker 3: then you can inject that data as props to your
Speaker 3: page components.
Speaker 4: Okay, so then when I refresh or when I like
Speaker 4: request my components, I'll get back like markup that doesn't
Speaker 4: have to go get the data because the data is
Speaker 4: already kind of exactly.
Speaker 3: That's the beauty of next years. You get it even
Speaker 3: before the page shows on the web browser.
Speaker 4: Okay, cool?
Speaker 1: I mean, is there anything else you want to maybe
Speaker 1: talk about that that we haven't talked about yet.
Speaker 3: Or well I was hoping i'ld hear more on the
Speaker 3: gads bieceus plugging. Sure, sure, okay, So, like I said,
Speaker 3: the gads be source plugging allows you to pull contents
Speaker 3: from various sources. Could be locally and it could be
Speaker 3: from an API. As long as there's a service providing
Speaker 3: those contents, you can pull them and then your site
Speaker 3: creates those static assets based on what you have pulled.
Speaker 3: So with the source plugging, for example, you're building a
Speaker 3: website like the article I wrote towards using hash node.
Speaker 3: So say you're building your own blog. You want to
Speaker 3: have your own blog with your own styles, with your
Speaker 3: own header, with your own navigation. But then you have
Speaker 3: a lot of articles already on hash node and you
Speaker 3: don't want to rewrite all of them again. So like
Speaker 3: I showed in the article, you can create your source
Speaker 3: plug in and you can use hash notes API to
Speaker 3: pull your articles through that API. And when you pull
Speaker 3: it through the IPI, you create GRAPHQR nodes from the
Speaker 3: data you have pulled. And then after creating graph car notes,
Speaker 3: let's say in the blog path, in the block page
Speaker 3: of your website, you can use graph cr to pull
Speaker 3: all of those articles you've written and then you can
Speaker 3: display them on the front end, so you can display
Speaker 3: that on the front end and then add it to
Speaker 3: whatever articles you're going to write on your own space.
Speaker 3: So that's the way it works. The graph your API
Speaker 3: is the gap PAPI is a graph your API. So
Speaker 3: you use a graph cr service or a graph cr
Speaker 3: library to cureerate that API, and then you get the
Speaker 3: articles and then you display them on your website. And
Speaker 3: then the way got we also works is once you
Speaker 3: add any article to hashnote, you would have to rebuild
Speaker 3: your website so that it pulls the fresh data coming
Speaker 3: from hashnote. And you can also create a tool, if possible,
Speaker 3: such that once you write an article and it goes
Speaker 3: to hashnote, a build is automatically run on your own
Speaker 3: website so that it pulls the fresh data.
Speaker 4: So hashnote I think it came up in a previous
Speaker 4: episode as well, but I think it's basically like a
Speaker 4: blogging platform, right, I'm curious, with a very large community,
Speaker 4: I'm curious what is the advantage of writing say on
Speaker 4: hashnote versus just like having a bunch of markdown files
Speaker 4: in the same repo as your actual gats B side.
Speaker 3: The reason I don't see any difference. The only difference
Speaker 3: I see is distress involved in having to pull every
Speaker 3: of those articles. Tress involved in having to write or
Speaker 3: copy and paste every of those articles in your own space.
Speaker 3: So instead of going through that a source plug, it
Speaker 3: would be a very handy.
Speaker 4: Too, saying like if you already had things that hasal
Speaker 4: it's far easier to pull them. Then I see, like
Speaker 4: manually create mark damn files.
Speaker 1: Yeah, okay, yeah, last time I looked to dimestack or
Speaker 1: building sites using these tools. One thing I saw was
Speaker 1: that a lot of people saying, having your data I
Speaker 1: think like either WordPress or hashald in this in this instance,
Speaker 1: or I think other sides like content full, I think,
Speaker 1: and then using a toolet CAATs which I just pull
Speaker 1: it later and basically allow you to keep your content
Speaker 1: and kind of back end if you like in WordPress,
Speaker 1: but then your front end is and reacts, and I'm
Speaker 1: guessing with them with gats that line of thinking is
Speaker 1: being quite heavily moted, I imagine, and is being targeted
Speaker 1: as okay if you have your stuff, like like you
Speaker 1: have a national for example, and you go into a company.
Speaker 1: Because for me, I'm thinking more in my first job
Speaker 1: for a developer ours a journalist, and I know that
Speaker 1: back then we would write our stories and like a
Speaker 1: same as system. But then because we had no kind
Speaker 1: of control in terms of how the funding looked, and
Speaker 1: because the tools then were quiet kind of archaic and
Speaker 1: quiet old, we couldn't maybe take advantage of the newer
Speaker 1: things that you're allowed to like react, angler and netview whatever.
Speaker 1: So I'm guessing with a gats be tool, if I
Speaker 1: had a a blog or a complete website in WordPress,
Speaker 1: for example, I could use GATS being to basically pull
Speaker 1: that data out of WordPress and then using GATS we
Speaker 1: be able to make it maybe use the tools that
Speaker 1: GUTS we have that maybe I might have an old system.
Speaker 3: Yes, but that will also depend on how much information
Speaker 3: Press releases. So what Press mainly release texts through the IAPI,
Speaker 3: They may release images, so depending on the types of
Speaker 3: data that they release, that would determine what you can
Speaker 3: pull and use on your own platform.
Speaker 4: Yeah, and I think it's pretty It's a pretty commonplace
Speaker 4: thing to have content not in markdown files because we
Speaker 4: on this color are all developers and like tossing markdown
Speaker 4: files and like a GitHub repos like seems like no
Speaker 4: big deal. But Carl you mentioned like journalism, like most
Speaker 4: places that write content, the people that write it or
Speaker 4: review it or edit it don't want to manually update
Speaker 4: markdown files or like they have tools for writing, for editing,
Speaker 4: for processing, for proof reading, all these types of things.
Speaker 4: They have these platforms for this. So I like the this.
Speaker 4: This is like an appealing workflow to me because then
Speaker 4: the developers that are working on the site can just
Speaker 4: use your plugin or use whatever gats be workflow to
Speaker 4: just pull it in from those other platforms that are
Speaker 4: probably more familiar or more suited to hold to other
Speaker 4: people that aren't like the React developer persona.
Speaker 3: And the benefits when you look at CMS is with
Speaker 3: CMS you can manage drafts. You can also if possible,
Speaker 3: add reviews or maybe add comments. You can invite someone
Speaker 3: tols look at something. But if you are doing everything
Speaker 3: as a markdown, the only way you can manage draft
Speaker 3: is if you haven't pushed the master yet, because once
Speaker 3: you push the matter, it appears on your website. So
Speaker 3: I think that's the benefit of CMS is handling your
Speaker 3: your every of those assets, some veios and then just
Speaker 3: pulling them into yourn application.
Speaker 2: Yeah. I mean, as long as you're probably more than
Speaker 2: one person working on a site or working writing articles,
Speaker 2: you're probably going to want some sort of a headless
Speaker 2: CMS like WordPress content or yeah, WordPress content for sanity,
Speaker 2: there's it seems like there's a new one every day.
Speaker 2: But personally, I'm one of those developers who wants complete
Speaker 2: control over my content because most of my content right
Speaker 2: now is on Medium, to be completely honest, and I've
Speaker 2: realized that while that's great for generating new readership and
Speaker 2: reaching people. If Medium went down tomorrow, I would be
Speaker 2: completely out of luck for all the hours and words
Speaker 2: that I have put on that website. So I'm actually
Speaker 2: in the process of taking all of my Medium articles
Speaker 2: very slowly and making them into markdown files that I
Speaker 2: have complete control over. So now if GitHub goes down,
Speaker 2: then I'm out of luck. But then pretty much the
Speaker 2: rest of the Internet will be out of luck with me,
Speaker 2: so we'll all be starting over from scratch at that point.
Speaker 2: But yeah, that's the I guess the biggest drawback is
Speaker 2: that you're depending on somebody, some source outside of yourself
Speaker 2: for holding onto that valuable content that you've made.
Speaker 4: It's the page. What you need to do is you
Speaker 4: need to write a Gatsbee played again that scrapes Medium
Speaker 4: right and turns it into markdown files. It's clearly right
Speaker 4: that that sounds not that bad.
Speaker 2: I mean, there it could be that also sounds like
Speaker 2: it would take me probably twice or four times the time.
Speaker 3: Then just cop I believe there should be a Ghatspie,
Speaker 3: so it's pluggin for Medium already there is.
Speaker 4: I should just say page like hours and hours of
Speaker 4: her life potentially.
Speaker 1: Right now. For my blog, which has been neglected heavily,
Speaker 1: sadly and needs a lot of love. And I've been
Speaker 1: inspired that page is efforts actually to make her make
Speaker 1: her blog look much much nicer. Am using ego at
Speaker 1: the moment, which is obviously in the one Boy. I
Speaker 1: think I think it's a built using go if I'm correct,
Speaker 1: and yeah, and I've been thinking about I need to
Speaker 1: change it and also shift my content from death Dorto
Speaker 1: at the moment, which is where I'm when I do
Speaker 1: blog by write on there. But I also want to
Speaker 1: have my own space on the internet. And initially I
Speaker 1: was quite skeptical of Gatsby because I felt like it
Speaker 1: just was adding a lot more, adding a lot of quickity.
Speaker 1: But I think having talking to you did it, and
Speaker 1: also seeing pages work, I think I might give it
Speaker 1: a go now actually, and and see where it takes me,
Speaker 1: and hopefully I'm able to come back maybe in a
Speaker 1: few months time and say, yeah, it's worked.
Speaker 2: I've done it, so if it makes you feel any better, Carl,
Speaker 2: I've been working on this blog since April of last
Speaker 2: year on nights and weekends and when I had free time,
Speaker 2: so it took me quite a while. Until I felt
Speaker 2: confident enough with it, you know, looking decent, functioning on
Speaker 2: mobile and desktop, to where I finally pushed it live
Speaker 2: into production, which was the beginning of March. So yeah,
Speaker 2: don't feel bad at all. This has been a long
Speaker 2: time getting to this point where it looks pretty good.
Speaker 2: So it might be a few more months.
Speaker 3: Then. With personal websites is you're never just satisfied. You
Speaker 3: want to have a bookmark feature, you want to have
Speaker 3: darc moved, and until you do all of these, you
Speaker 3: don't want to probably it.
Speaker 2: And then you see something cool on someone else's site
Speaker 2: and you're like, oh, I shouldn't have that too, Yeah,
Speaker 2: how did they do that?
Speaker 4: That is funny? Like I'm jealous somehow jealous of everybody
Speaker 4: else's personal website, but I always think my own is trash, right,
Speaker 4: Like Kilian, I noticed you you have on your site
Speaker 4: you're like about page. You have just a fun little
Speaker 4: animation on your profile picture which I saw that I
Speaker 4: was like, oh, that's super cool. I should totally do
Speaker 4: that or steal that, or I should have cool ideas
Speaker 4: like that awesome.
Speaker 1: So I think we can probably shift into the pig
Speaker 1: position now and just it's basically a section where we
Speaker 1: just choose either something we've seen on nine eighteen article
Speaker 1: or maybe books have been cool that you want to
Speaker 1: share with them everyone else. So maybe Paige can start
Speaker 1: of us with the picks this week.
Speaker 2: Absolutely so my pick for this week is for everyone
Speaker 2: who has batteries that power vehicles. It could be a
Speaker 2: car battery, maybe a boat, motorcycle, anything like that. And
Speaker 2: it's actually a battery charger slash conditioner. So if you've
Speaker 2: ever noticed, sometimes if you haven't started something up for
Speaker 2: a while, it'll have a hard start. That's usually because
Speaker 2: the battery has built up some acid in it that's
Speaker 2: making it difficult to start, or it just needs really
Speaker 2: to be put through its paces. And there's a product
Speaker 2: called Optimate which does high performance battery chargers, and because
Speaker 2: my husband has a company with equipment, he's quite familiar
Speaker 2: with these. But this is a great little tool and
Speaker 2: you can attach it to any type of battery, car battery,
Speaker 2: like I said, a lawnmower, really anything that has kind
Speaker 2: of a typical battery set up, and this little attachment
Speaker 2: will run the battery through its paces and basically break
Speaker 2: up any acid that it might have that's making it start. Hard.
Speaker 2: It will just kind of bring it back to almost
Speaker 2: like new conditions if it was a brand new battery
Speaker 2: and it's you know, depending on which one you get,
Speaker 2: it can range anywhere from about forty bucks to you
Speaker 2: can get ones that can do all sorts of different
Speaker 2: sizes of batteries twelve volt, twenty four volts and larger
Speaker 2: for commercial use. For you know, a few a couple
Speaker 2: hundred dollars, but it's been really great for extending the
Speaker 2: life of my own car's batteries and for some of
Speaker 2: the equipment that he has but hasn't turned on for
Speaker 2: a while. So if you ever need something like that,
Speaker 2: I would definitely recommend checking out these optimate chargers because
Speaker 2: they're they're pretty legit.
Speaker 4: Problem too with VON equipment because our lawn stuff only
Speaker 4: you only need it for like five six months out
Speaker 4: of the year here, so when we started back up,
Speaker 4: it's constantly an issue like who knows what the battery's
Speaker 4: going to do.
Speaker 2: So, yeah, that's exactly what this kind of stuff is
Speaker 2: built for. When they work really well, awesome.
Speaker 1: Let's go to TV.
Speaker 4: I'm going to pick a framework called remotion. It's this
Speaker 4: I just saw it a couple of weeks ago, and
Speaker 4: it's basically a framework that lets you build programmatic videos
Speaker 4: and React. So probably the best example I can think
Speaker 4: of is like, if you're a Spotify user, you might
Speaker 4: know that they give you like this little visualization of
Speaker 4: the songs you listen to in the last year. But
Speaker 4: so it's like a video file, but like it's unique
Speaker 4: to the person. So the framework is for building videos
Speaker 4: with React, but it's not like a video editor, so
Speaker 4: it's not like an iMovie sort of thing. It's basically
Speaker 4: like you're creating a set of animations and at the
Speaker 4: end tool turns it into an MP four video file.
Speaker 4: So it's it's kind of cool because you're making videos,
Speaker 4: but you can use like React so you can like
Speaker 4: dynamically bring in data for driving this video, which is
Speaker 4: something like you'd never do in something like iMovie or
Speaker 4: something like that. So I'm going to link to the framework,
Speaker 4: and I'm also going to link to a chat I
Speaker 4: did with the guy behind it, because it's one of
Speaker 4: those things that like it sounded cool, but it didn't
Speaker 4: click for me, and then when I saw him actually
Speaker 4: like use the thing, it sort of blew my mind
Speaker 4: a little bit. So I'll recommend that and I'll toss
Speaker 4: it in the show notes.
Speaker 1: Yeah, I'm looking at the website. It sounds wow cool
Speaker 1: actually in videos, definitely check it out. Awesome And yeah
Speaker 1: my pics for today. The first one is there's a
Speaker 1: newslesa which is jam stacked and it basically gives you
Speaker 1: the latest news in the kind of gamstack ecosystem. So
Speaker 1: it has articles on how to do things and Gatsby
Speaker 1: has stuff about x JS basically over the kind of
Speaker 1: jumps like key kind of besk issues, right, So it's
Speaker 1: quite cool if you want to be if you want
Speaker 1: to be up to date with the latest news in
Speaker 1: Downstack's world. And the second and more fun pick is barbecues.
Speaker 1: So over here in the UK we have been allowed
Speaker 1: to actually meet outside because we've been in lockdown since
Speaker 1: December last year, and only I think two weeks ago
Speaker 1: they actually allowed us to meet outside in up to
Speaker 1: six people at a time. And I had a barbecue
Speaker 1: this weekend just to finally celebrate being able to come
Speaker 1: up in the open and have the social life and
Speaker 1: this in these kind of strange times we're in. And
Speaker 1: I've got a link to a video that has on
Speaker 1: YouTube about basically how to have barbecues in terms of
Speaker 1: how to clean a barblagol because that's the one thing
Speaker 1: I really hate is cleaning afterwards. And I've been basically
Speaker 1: trying all kind of techniques using baking, soda, vinegar, soaking
Speaker 1: it in more gar, soaking it and putting it in
Speaker 1: the newspapers, peeling a grill with an onion, or before
Speaker 1: you was doing a barbecues and potatoes to actually make
Speaker 1: the grow not stick to the meat. So basically, yeah,
Speaker 1: if you if you're looking forward to the barbecues this summer,
Speaker 1: that video can help you on your way. So that's
Speaker 1: for me, let's go to do it. And what for
Speaker 1: us this week?
Speaker 3: Okay, I didn't prepare for this, but recently, that was Monday,
Speaker 3: I looked into side press. You are testing the framework.
Speaker 3: I've heard a lot of good things about it. I've
Speaker 3: had a lot of people say it's useful end to
Speaker 3: end testing. But the reason why I haven't used it
Speaker 3: before was I didn't really know what to test. So
Speaker 3: in where I work, we're working on a I made
Speaker 3: some changes and then I had to write some tests
Speaker 3: for those changes, and in the presse of writing those tests,
Speaker 3: I realized or I discovered a few things that I
Speaker 3: could also test for on my own website. So I
Speaker 3: top Cypress on Monday, and I love development experience of Cypress.
Speaker 3: It's with it presents you a Chrome instance, and on
Speaker 3: that Chrome instance, you can literally see each and every process,
Speaker 3: or each and every step of the test that feels
Speaker 3: all that passes. You can also take snapshots of when
Speaker 3: this particular test passed and this particular test failed. So
Speaker 3: if there's anyone who haven't tried it yet and you're
Speaker 3: looking and getting into UI testing, UI testing, then you
Speaker 3: should check out Cypress.
Speaker 2: Oh.
Speaker 1: I think we actually had an episode, was it two
Speaker 1: or three weeks ago? So we were actually spoke to
Speaker 1: a developer actually about testing in depth as well, and
Speaker 1: I think we touched upon Cypress, the Selenium and other
Speaker 1: different tools as well.
Speaker 2: So yeah, I'm a huge fan of Cypress. My team
Speaker 2: is is it. It's so easy to get started with.
Speaker 2: That's a great teck awesome.
Speaker 1: So if anyone wants to get in touch with you, Delian,
Speaker 1: either online or through Twitter, is that what what's your
Speaker 1: hard on Twitter? And what's your website where people can
Speaker 1: kind of get in touch to say hi, ask questions.
Speaker 3: I think I can share it in the chat section
Speaker 3: that's Twitter and.
Speaker 1: Who as well for anybody else wants to have a
Speaker 1: look at it.
Speaker 3: Yeah, I think there's only two relevant ones.
Speaker 1: Most reallyvant Well, thank you so much for your time today,
Speaker 1: and then we would appreciate it, and thank you for
Speaker 1: hoping we see that gets to be actually is an
Speaker 1: option now on the bit on the on the on
Speaker 1: the edge, and then page push me a bit. But
Speaker 1: now if you probably push me, I'll be americ at that.
Speaker 3: Thank you very much for the invitation. So it's nice
Speaker 3: sharing all of this, and.
Speaker 1: Thank you one and we'll see you again next time.
Speaker 3: Thank you later.