Creating a Work Portfolio with Heroku, Flexbox and Cloudinary

Sam Brace: Welcome to DevJams. This is where we talk about exciting, interesting, innovative development projects done by members of our Cloudinary community that use Cloudinary in those ways. My name is Sam Brace and I am the director of customer education here at Cloudinary. And joining me for every episode is Becky Peltz, who is our curriculum program manager here at Cloudinary for our developer products.

Becky, always good to have you here.

Becky Peltz: Oh, it’s exciting to be here. This is one of my favorite topics here is working on portfolios.

Sam Brace: I agree. And I mean, obviously of course, having a good portfolio is a huge reason why people get hired for freelance work or contract work, or to be able to get hired as part of a full-time piece of work.

But what’s exciting about what Sean’s done here. Our subject for this program is. He’s developed a portfolio to show off his [00:01:00] work as an illustrator, as an artist, but he was able to do this with a lot of development tools that he learned about by going to a coding bootcamp. And you might be saying yourself, Sam, Becky enough of the coding boot camps.

But gosh, they’re a fantastic, because. We are just finding some of the best up and coming talents in this area between episodes we’ve done with Hannah, who now works at DataDog and Jen who now works at Cloudinary. And now of course, Sean, who I think he actually is still looking for his next spot. So. But it’s where he’s putting himself out there as an amazing artist.

And when it can draw beautiful artwork for professional purposes and he wants to showcase that to the world and he was able to do that

Sam Brace: through lots of various technologies he’s learned about,

Becky Peltz: and it’s exciting to see artists making the transition from. Are what we know as illustration, or when we talked with Jen acting and voice into development, it enriches actually both fields.

Sam Brace: [00:02:00] Absolutely. So let’s get into this let’s show exactly how a good work portfolio is developed and how you can do it. Using some of the tools that are going to be showcased in this all the way from just building things with node and using. Yes. And how to use Cloudinary specs technology, and how to deploy the Heroku.

There’s a lot of really cool insights that happen to be there. I’m actually particularly excited to see what you guys think about the way that he was able to show, how to get alt texts from some of the things that he has uploaded and managed in his Cloudinary account for contextual methods. Pretty slick, how he pulled it off.

And

Becky Peltz: I keep an eye out for how he gets data out of Cloudinary, because he does it using a technique known as fetched delivery, which is great for front end programmers. If you just tag your assets, you can pull them through this fetch system.

Sam Brace: It’s pretty slick. I agree. Definitely agree. So let’s get into it.

Let’s watch the episode. And once we get back, me and Becky have a few takeaways for you. Sean welcome to the program, [00:03:00]

Sean Morgan: right? Thanks for having me.

Sam Brace: So, Sean, I’m really excited to talk to you because there’s a lot of things. I think we’re going to dive into, into this conversation all the way from your experience as a developer, we’re also gonna be talking a lot about your specific portfolio, but I think we’re also gonna have a lot of things that I think developers will be able to extract from this.

Why they probably should have their own portfolio as well. So I think there’s a lot here that we’re going to talk about. I’m excited for it. Hopefully you’re excited for it too. Yeah.

Becky Peltz: And I want to point out to that, Sean, you’re there, our first illustrator that, um, illustrator turned software engineer that we’ve had on this program

Sam Brace: as a good to get.

Yeah. So it is a case where one thing that we have seen in working with. Many types of developers talking to them about their projects. In this podcast, we have seen a lot of them where they have started their career in one [00:04:00] space and then moved to a different space, which is now being a developer in some way.

You started off and you actually are still doing work in this area, but you are a designer. You, as Becky just said, you’re an illustrator. You’re someone that creates art and then you’ve progressed and started bringing on more code related aspects, more automation, more things that are involving API APIs.

Why is that?

Sean Morgan: I find for me, the connection is pretty close. I see them as. Side-by-side analogous. I, uh, in college I had to take a portfolio class to graduate. Um, for illustration, we all had to make our own HTML CSS portfolios from scratch, which is where I first learned anything about coding. Um, but the core of illustration and development I feel for me is [00:05:00] solving a problem, taking it, baby.

Complicated idea. Um, an illustration that could be distilling a book to a cover or a big national chicken campaign into a billboard, um, uh, where with code it’s. I want to make an app that does this very specific thing in this case. Dynamically rendering portfolio. Um, and there’s the big idea. Now I get to do all the fun little noodley, uh, work, uh, that builds up to that.

So

Sam Brace: like, And honestly, again, that’s pretty forward thinking that your school even decided to do that in terms of the curriculum, in my opinion, because I have seen where people that I know that are graphic designers, illustrators, where, when they’re asked to do a portfolio or talking about like a hard bound book or something where we’re trying to show like the textures of the paper and all of these things, where being able to say like, [00:06:00] The web is where people are going to be learning about.

You likely let’s focus on a digital portfolio. I think that’s pretty smart. And as you said, that was your first time touching HTML, touching CSS. What excited you about HTML, CSS, maybe JavaScript. I’m not entirely sure, but what got excited for you about that front end code working on that portfolio project?

Sean Morgan: I was terrified cause I never coded anything before and I was always a. I always assumed there’d be more math. And I was not a math kid, um, case in point I went to art school, uh, to avoid math. We, we, we painted, uh, pine cones for my college math class. Um, so I was terrified at the idea of having to code something.

Cause I didn’t know what that entailed and, uh, I th and it’d be. Coding for a design for illustration. It was so visual centric that [00:07:00] I could see the puzzle pieces. Um, as my instructor, uh, explained it and I wound up just take into it, uh, like a duck, like water, duck to water, if that’s the phrase, um, where I was like, I, it just made sense in a weird way.

Just it tickled my brain just the right way. Click into, yeah, I’ve been doing it ever since.

Sam Brace: I love it. And of course you would have never known that unless you had got an exposure to it. So once again, it kind of shows that if you just give people a taste of something, sometimes they might actually like it.

Right. So I’m glad that someone gave you a taste of code. And now we’re getting to this point where you’re getting to talk to us about all the things that you’re working on.

Becky Peltz: And of course in this for a webcast here, we’re going to see that you’ve gone way beyond the basic HTML, CSS and your coding and react now.

So that’s quite a big leap.

Sean Morgan: That’s a fairly new development, [00:08:00] but yeah,

Becky Peltz: but you did that by going to a bootcamp. So how did that come about?

Sean Morgan: Um, I had been thinking about wanting to do more with. Web design and development. Uh, for a few years now I met some friends who were doing it professionally and I just found, I had a lot of questions.

Like what did that job entail? What did that career look like? And the more I talked to them, the more interesting it sounded. Uh, so I asked a friend of mine, Brett, about how he got his start. Um, and he told me about, uh, the trilogy boot camp. Uh, which this over the summer, uh, as most of us were, I spent pretty much all my time in, uh, in this room and I’m like, I could, I could learn something while I’m here.

So I called up my local university and, uh, asked about a bootcamp and [00:09:00] decided to do it one day and jumped right in.

Sam Brace: And so the portfolio that we’re going to be diving more into, into this episode, was that something that you developed inside of the bootcamp or what, was there certain fundamentals that you were able to take from the bootcamp and apply to this portfolio

Sean Morgan: project?

Yeah, uh, the bootcamp was my first real taste of JavaScript or kind of dynamic web development where. Change things where not everything had to be hard-coded in. So I, uh, One of the last things we learned was react, which I used to build this. And I, I really liked the component-based, um, part of it where I can build out little things and change them and tweak them and move stuff around easily without having to cut whole swaths of code or.

600 lines of code, just to see if one thing was working in at, um,

Sam Brace: I feel like that’s the reason why a lot of people like react. So you’re [00:10:00] echoing a very clear sentiment there. Am I right about that?

Becky Peltz: Definitely. Um, you know, the HTML is essentially a bunch of components. You know, you have your image tag as a component, your give tag and with react or any of the frameworks really, but react is the most popular.

You are building set tags, you know, your own tag, you have your own image tag, you have your own, you know, so that it gives you a lot of power, but it keeps you working within. The framework of HTML and, and all of the, you know, specifications laid down for years about serving it. So, yeah, it’s a, it’s a great way to go.

And like you said, being able to focus on a very small amount of code is way better than dealing with monster code. Yeah. So good education. If, if you’re at the point where you realize that, you know, it’s very.

Sam Brace: So then you you’re working on this project. Well, you’re [00:11:00] learning react as part of the bootcamp in this case.

So then what brings you to say the portfolio? The way that I represent Sean Morgan is going to be with react. What brought you to that? Hi,

Sean Morgan: I’m uh, I try and build a new portfolio every year, just to keep it as fresh as possible. If I have a good year of illustration, I have a bunch of new stuff. Great. If I don’t throw a fresh coat of paint on it for where I send it to a art directors that year.

Um, but I had so many more tools this time. I got to really sit down with a pad of paper and make a note of what, what do I want out of a portfolio site that I hadn’t been able to make myself or haven’t found.

An alternative to, uh, like every year I iterate on it last year I did, um, [00:12:00] I wanted it to scale better, uh, where the images would wrap, um, in a more dynamic way. Uh, so I made individual columns that just went one after the other, uh, as the screen track. That means it was just columns going down. So all my art side to side was hard to place, so I wanted something much more dynamic and I found react and.

CSS. Ooh, uh, Flexbox was the best solution. Sorry, I’m being distracted. So we did detention.

Becky Peltz: Uh, yeah. You know, um, I know I noticed in your code and we’ll look at it that you do have a lot of CSS and you know, a lot of people that going to bootcamp. Happy to learn about JavaScript and HTML, but CSS is kind of like [00:13:00] really, you know, do we really have to go down that path?

But how did you, how do you feel about CSS? What your,

Sean Morgan: I love it. I was like, I think it’s just the designer and may I like, like, I want to get very noodley with how things look, specific, colors, fonts, just every little thing I can tweak. I want to tweak. So I love

Becky Peltz: playing around. It is really fun. Um, I know I will go out to like code pen and just look at people’s projects.

Cause they do amazing things out there with CSS. And, uh, this is a lot of.

Sam Brace: So talk to me more about Flexbox because maybe this is the first time that some people that are watching this program are familiar with it. What exactly is it and why did it help when you’re trying to display many different types of art?

Because of course you’re not developing all of your paintings, all of your illustrations in the exact same way. They’re not all landscaped. They’re not all poured through it. Sometimes they’re going to be of different sizes. Why did that help with that [00:14:00] portfolio project?

Sean Morgan: So. Back back in the before times, uh, the solution would be to use floats, which, uh, never work the way you think they’re supposed to suddenly something will be behind something or everything will just stack on top of each other and they never work.

And then it’s a lot of trial and error. So Flexbox, I can. Set everything to just start floating or start flowing from left to. Right. And it will break onto a new line. Every time it’s hit the width it’s scales, um, with the window size. Um, and I can also affect how I want things to be spread apart. Do I want everything to be justified?

So everything will just go edge to edge. It will vary the space in between. I can have just space on the end. Um, I can get really specific with what, how I want things to look and how I want things to be [00:15:00] spaced out and played with, um, which. It’s just so, so much fun and so, so much easier than it used to be.

Sam Brace: Well, it seems like also it’s a pretty naturally helpful tool because now, I mean, of course we work for Cloudinary, me and Becky. So we’re going to be talking about Cloudinary just a little bit here, but it seems like a natural tie to say, like, if I want these images to all splay right away, if I’m handling it easily through deployment delivery with Cloudinary, you still have to worry.

Okay. How did he all arrange himself nicely on the page? And so it was kind of like, these are playing nicely together. You handled the image delivery aspect. So now Flexbox takes care of how everything’s spaced and set up.

Sean Morgan: And I also don’t have to worry about, yeah, the sizing, um, everything will thumbnail down to a specific height, um, when it full screen.

So no longer. Cropping images and essentially creating, you know, new lit new [00:16:00] little or images. Part of it, piece of art. Um, I can just have like a full landscape next to a portrait and they’ll build, just have the same height and the width can be whatever it needs to be.

Sam Brace: And I, what you have here, of course, because you’re artists that has a portfolio.

So the way that I look at this is that you of course, want to be able to show your full width, full height piece of art. You want people to see the intricate detail of what you’ve gone and drawn or what you’ve designed. So it’s not like you can just go in and just, Hey, like, Hey, here’s some thumbnails.

Like he might be able to do if like you’re doing something for e-commerce or if you were, I mean, even just a developer doing a portfolio, you want them to get into the artistic detail that it’s there. So it makes a lot of sense that you need to be able to dive into full size and doing that with Flexbox with Cloudinary seemed like it makes perfect sense to me.

And I’m really glad that you did it the way you did.

Becky Peltz: Yeah. And then you’ve also used Lightbox. So you’re able to give us [00:17:00] a nice big picture on just where they click. And I don’t know if you want to bring up the portfolio and have a look at carriers

Sean Morgan: can do

Becky Peltz: that. We can see what we’re going to be talking about.

Sean Morgan: All right. So here we are. Uh, if I scroll down, we can see. Yeah. So it’s all a done. Uh, Flexbox so I just had everything justified to the left side and, uh, equally spread apart. Um, and if I let’s do inspect and we start to already, you can see once it shrinks down a bit, uh, it automatically just everything just, you know, breaks as it needs to, to fit.

And at a certain point, it hit, we’ll get to a break point where it’ll be. You’re ready. Yeah.[00:18:00]

Becky Peltz: Yeah. That looks great. And you’re able to keep the aspect ratios that you, that you created. You’re not having to like turn everything into a template and sort of picture. Yeah. Nice. Yeah. And then you can carry yourself through it with the light box. So that looks really good. Um, and yeah, this is all done this, so, so I guess if we wanted to start talking about your full stack, what you used.

Um, so starting on the server side, uh, what did, what did you use you want to share? Sure.

Sean Morgan: So, um, for this, I made everything in react JS, uh, really nice, uh, JavaScript framework. I use the, create a react app, a tool in my console, pretty much build out everything I need to start off with. I’m [00:19:00] including here on the server side setting, uh, the port it’s going to run on when I’m testing it locally, um, using express to do all my routing.

So. Reacts. So you chill the page.

Becky Peltz: Yeah. You have a note express app. And um, and then, um, this actually you deployed on Heroku. Do you want to talk a little about that using no to express on Heroku?

Sean Morgan: Yeah, I just I’ve, uh, it’s how we, uh, deployed full-stack applications in, uh, the bootcamp, but I just it’s. They worked so well together.

It’s just so easy to, uh, create Heroku app push Heroku main, uh, integration is a super

Becky Peltz: CLI nice. Isn’t it? Hiroko CLI here, you can have a really clear. Understanding of the model, how, you know, you’ve got get hub that you’re pushing [00:20:00] too. And then you’ve got Heroku that you’re pushing to

Sean Morgan: and you can link the two together, which for this one I did.

Uh, so whenever my get hub is updated, um, Heroku will automatically rebuild my, uh, app on the Heroku side.

Becky Peltz: Okay, great. Yeah. So, so, so here at the very back end, you’ve got the note express and then you’re, you’re basically just going to pull. You have a public path pulling index HTML. We’ll look at that. So this is where you’re going to start moving into your front end.

Yeah.

Sean Morgan: So, uh, again, this is largely just the reactive boilerplate. Uh, it doesn’t really start getting fun till we get into, uh, app JS, but, uh, yeah, so, uh, but like, you know, uh, my title, my head or all that stuff is here and then the body. Goes into the room for anybody

Becky Peltz: that didn’t know the react is [00:21:00] going to just take everything you put and apply it to that route ID.

So that’s basically all your, your rendering there. Uh, so yeah, let’s go to, let’s go into app JS. Uh,

Sean Morgan: so, uh, here’s. Pretty much everything, uh, more or less, um, like we were talking about everything’s really clean. Like I have my, you know, uh, the return is all that’s rendered. So my header, my light box, all that, uh, different components, uh, that have the different code.

Um, but just starting from the top, uh, All those different components, uh, from within my code, I use the Axios package to make my call to Cloudinary.

Becky Peltz: Yeah. That’s, that’s an interesting one. I, I see like, uh, there on line 12, you’re using a react hook you with to make your fetch call and you’re using Axios too.[00:22:00]

How did you choose Axios? I mean, cause like there’s a lot of alternatives there for Ajax.

Sean Morgan: Yeah. It’s just the one I was, I become most familiar with. Uh, I’ve done much and more robust full-stack applications. I’ve done much longer, uh, and more complicated, uh, pull push requests. But, uh, as this is right now, all I need is to.

Pull all the data from Cloudinary. So just a simple, uh, async await with Axios, uh, allows me to do that. Yeah.

Becky Peltz: And that’s an interesting call you make there in, in Cloudinary. That’s our, we’ve got, you’ve got, if you could see that list in there, that’s our list delivery type. So instead of delivering, uh, an image or a video where you’re going to deliver a list, Yeah.

Do you want to talk about, about how that works? Like how, how that [00:23:00] went like that name illustration. Jason, where does that illustration come in?

Sean Morgan: So the illustration that Jason, uh, list is, um, uh, the illustration is, uh, the tag for my, uh, Cloudinary database. So anything that I tied with that is being WhatsApp.

I pulled out here and being added to my image state. So on load, uh, the page, well, Penn Cloudinary pull everything from that list back to the front end, uh, which will then be mapped over and rendered to the page.

Becky Peltz: Yes. Yeah. So, so essentially, um, how did you get your images up into clouds?

Sean Morgan: I can show you that right now.

Um, so I, uh, just created my list. We can go in here. Um, [00:24:00] I’m just doing a simple drag and drop, add a new image. Um, manage. Is that what I want? Yes. Illustration tag. Okay.

Becky Peltz: Yeah. So that’s, so by adding that tag, you’re automatically going to pull it with your, with your Axios call to the list state P list delivery.

Sean Morgan: Yep. I can add a title and a description,

and now all of this data will be available, uh, in.

I should have done it, right. If it’s safe. Nope. Still there. Okay. And all that data will be available in the light box as an alt tag. So

Becky Peltz: it’s very dynamic. Then you just do your [00:25:00] upload, you tag it and now it’s going to pull it nice. Yeah. Yeah. And if you, if you wanted to leave it out, you could just remove your tag and then it was.

I wouldn’t come forward. Exactly.

Sam Brace: I like the way that you’re using tags here, because in a lot of cases, when we talk to other people that use clot and URI, they always think of tags on those as internal, not necessarily external. So thinking about it to say like, oh, if I need to find all of my illustrations within it, like almost like as a digital asset management system, or just as a way for you to find things for your own list purposes.

But the fact that. Taking those tags and using those for external display. So that way it dynamically updates, as long as you apply a tag. Um, I think it’s a really good use case to think about it for developers, because now it ensures that when you have new content, as long as your tagging system has been set up the right way, your website can continually be updated with the freshest, newest stuff.

So, yeah. Very good workshop.

Becky Peltz: Yeah. [00:26:00] I think that is, that is really cool. And then, um, I think let’s maybe take a look at your index dot JS. So, or your app JS is set up to do the fetching and lay out your components what’s going

Sean Morgan: on. So, um, again, this is mostly a high Rosie, um, uh, reactive. Boiler plate. Um, the app, uh, here is the app jazz.

We just looked at that’s what’s been rendered. Uh, the one thing I added here is the simple Lightbox package. I downloaded it and added it around my app. So all images that are rendered within my app can be affected by, uh, my light

Becky Peltz: box. That’s really neat. I mean, that’s one really great thing about working in react.

Isn’t it is there so many people developing and it, you can find. Libraries and get [00:27:00] that functionality. Um, that’s really nice now. Um, what about line 17? We’ve talked about that a little. You get that with your create rack, create react app. You’re going to get the, uh, core web vitals, uh, computing kind of built in.

Yeah. So what’s going on there though. We’re here, we’re making a call to, to a function and not function. You’re importing it. So, and again, I think if we looked at, if we opened up that report, yeah. This is just boiler plate from, from react. Right. You don’t have to write any code for this and you can see it’s doing get CLS, get FID.

These are all of the new Google. Webcore vitals, you know, to help them figure out whether you’re a good UX designer and whether they want to like, recommend your page, therefore getting [00:28:00] your, your, your stuff ranked higher for SEO. So, so, so what happens? What can we see? I mean, we talked a little about trying to console log that

Sean Morgan: yeah.

We, uh, where it was that, so yeah. Threw in a console log there. So. I can refresh this just in case sometimes the council likes Meredith autumn. Yeah. I see that. Yeah.

Becky Peltz: Yep. So if you look at those, we can get the numbers. And then, um, of course like, um, some of these I’ve noticed will show up right away in some later they’re basically like it’s like firing an event for Google.

They, they kind of, you get that. When it’s available, but those numbers you can now, like, it makes it really easy as a developer to immediately look at those numbers. And then you can kind of go check on the, what, what Google is looking for to see if you’re staying in bounds. [00:29:00] So it’s kind of a neat, neat thing about that.

Create reg. Yeah. Yeah, I’m glad.

Sean Morgan: Thank you for showing me that now. Now I know

Becky Peltz: after I saw your code, I didn’t realize that react was doing that. So that it’s kind of a two way learning there.

Sam Brace: I’d love to dive a little bit more into the images that you are showing here. So I know one of the things that people do.

Commonly look at when they’re deploying any type of project, especially a site like this, because you want it to load as quickly as possible. What are you doing to make sure those images are loading quickly? We’re optimized for the overall user’s browser of advice, anything like that?

Sean Morgan: So, um, yeah, this has always been a problem for me because you know, my art’s precious and I don’t want to.

Make it too small. So, uh, thankfully CloudOne area is able to help with this, uh, is in Lightbox. No, it is. [00:30:00] Yeah.

Becky Peltz: Your JS. I think you’ve got,

Sean Morgan: I think I, yep, there we are. So, uh, here’s where, uh, we’re actually rendering a picture, uh, and we have the Cloudinary call, uh, and we’re using a Cloudinary is a. F auto and Q auto to, uh, adjust, uh, to, uh, my website accordingly and make it look as good as possible without me having to worry too

Becky Peltz: much about it.

Yeah. I mean, so the Q out or you get some compression, um, but, but with Cloudinary kind of checking to make sure your image will still look good. Yeah. And then F auto, you going to get whatever that, whatever the browser likes best, you know, the format when P yeah.

Sam Brace: Yeah. And what’s neat about what I think you’re showing here, Sean, is that this is automatically appending that list because you know, everything you’re going to be using are going to be images.

You know, that you’re going to be uploading it and you know, that you [00:31:00] want to make sure that you’re adding those two transformations on it. So then when you’re doing either a programmatic upload or like when you showed doing the upload into the media library, it automatically appends F auto queue out of thanks to what you’re doing here, image JS, because then it just grabs whatever the public ID.

As the alt based on what you were able to bring through for the metadata, and if you have a tags. So once again, this was smart. So very good job because now, regardless of how you decide to upload, you’re ensuring that certain parameters and certain checks are being done along the way. So I think this is also something that hopefully more people that are working with Cloudinary, um, are looking at it and saying, oh, I can get something from this.

So good job on.

Becky Peltz: No y’all tag is really important. And, and a lot of times it’s something that people just leave out because PE you know, they don’t, it’s not a priority, but I noticed when you do your upload, you go immediately in and enter your information for alt and, and make it available. Um, [00:32:00]

Sean Morgan: I’m the fact that Cloudinary has gives me the option to do that.

And I can, uh, when I call my state, which is returning a bunch of data, Um, you know, I can drill down into it to get, uh, like the public ID is, uh, what I’m calling when I render the image, but I can also go and get my custom alt tags. So that renders each time as well.

Becky Peltz: Hey, you know, we can actually look at that data if you want.

Um, if you go back to where you make the Axios call, uh,

Yeah. If you grabbed that string and just pre it with HTTPS colon in your browser, we should be able to actually see the data that you’re. So if we just go to a browser

Sean Morgan: yeah. There we go. Okay. [00:33:00]

Becky Peltz: Yeah. So here’s what, yeah. So here’s what the data that your Axios is returning and it shows. That you’re picking up, not just public ID, but a lot of information about the image and then the alt and the caption.

So this is like really a nice compact set of data that anybody would need. You know, if they’re going to show an image. So nice. I like that.

Sam Brace: And one thing that I was also inspired by Sean with your project, but also kind of on your outlook on life was that this is somewhat tied to a project that I know that you’re working on called a hundred days of code.

And of course that’s not your project. It’s a kind of an overall thing that’s happening. We’re asking. To code for least one hour a day, to make sure that they’re improving, making sure that they’re getting used to new technologies, maybe trying new things. Um, it almost feels like I know like the NFL hazards play outside for 60 minutes thing.

[00:34:00] In some ways that’s a coding equivalent of. Um, but why did you subscribe to that? And also, why did you decide to be so transparent with the work that you’re doing with a hundred days of code with the portfolio, but also sharing all that through markdown files on your get hub?

Sean Morgan: Uh, peer pressure, right? We, uh, I, we had just finished, uh, the bootcamp and some of us were looking for ways to, uh, encourage each other.

Especially now that we’re all on the job hunt it’s, uh, sometimes can be easy. It’s easy to be demoralized. So having a way to check in with each other and create new projects and have friends to bounce ideas off of, and kind of keep that. Class community together was a large part of it,

Sam Brace: thinking back to it.

Cause now we’re, we’re getting close to, you know, you’ve gone through many days of this project. [00:35:00] Is there any like specific learnings you’re like, oh, because of this happening on this day, I was able to apply this for my portfolio. Like any things that you’ve had from learnings experiences going through that type of a practice,

Sean Morgan: relying on my community and friends a lot more.

Um, I think the thing I learned about. I’ve learned the most, uh, is, uh, I’m sometimes I’m not smarter than my coat. Like I think I know what it’s supposed to be doing and it won’t do it. And, uh, I’ll bang my head against the keyboard to try and figure that out because I made it clear that. I know what’s wrong.

And sometimes I just need to like reinstall my packages because something wasn’t working, I think on this app, um, this app specifically, I spent three days trying to debug something and ultimately it just came down to remove my node modules. NPM installed. And then it just [00:36:00] worked.

Becky Peltz: Java’s challenging too, because if you, you know, if you make a typo, it can still sort of work, but you know, something major’s missing.

I noticed when I was reading your 100 days of code, that what I saw was you were sort of doing the rubber ducky thing, you know, where are you in the morning? If I describe my problem, even if it’s just to myself, it’s somehow helps to. Put it in context and get a solution. If I

Sean Morgan: can, if I can put something into words, then it’s not as big and a morphous and scary.

It’s just a big

Becky Peltz: idea. Yeah. Yeah. I think, I think, you know, that kind of blogging or logging your, your issues is really good, but sometimes like, I’ll just. Talk to somebody even who’s not even technical about a problem, I’m having this technical. And of course, they’re just staring at me blankly, but just my ability to just put into words, what I’m dealing with, I [00:37:00] ended up solving.

So anyway, good practice.

Sam Brace: Now, if I do a control F on your a hundred days of code GitHub markdown file, that you’ve shared wonderfully where the world, if, and I was searched for Heroku, I get six details. That. So Heroku has been part of your life for the past hundred or so days. Talk about working with Heroku.

Talk about that. And of course, what does that mean when you’re telling this to other developers? Like it, your experiences working with that type of a service, especially knowing that it’s going to be a react based project that you’ve had done, it’s involved in Cloudinary it’s involving, you know, express for middleware purposes.

How does Heroku play and all of that? Sorry,

Sean Morgan: largely. It’s so damn convenient. Um, okay. Rosie, you really need to stop. I know. Um, I mean, that’s largely why I continue to use it and it’s [00:38:00] a great way to get something. Just get something out there quick. Um, with, since react, you know, runs off a local host, I can tweak and play with it all.

I want. I’ll know what it’s going to look like when it’s deployed and I know how it’s going to interact. Um, but I can only do so much with that on my side. And, um, I know for another app I’ve been working on, I’ve been playing with things and if things aren’t working necessarily correct, and I want some help.

If I have it deployed, it’s easier for people to go in and play with it. Especially when I have like sensitive data or dot NV that I don’t want to share. If it’s deployed that stuff’s still working in the background and people can go and, you know, help me with it, uh, easier instead of me having to send a big file dump to

Sam Brace: them.

[00:39:00] That’s a really good reason for it because I mean, I’ve personally done that as well. I wish I just had an easy way to show you this and then yup. You deploy it through something is like, you know, lightweight, flexible, like Roku, then it makes it now, you know, you have a URL attached to it. So at least in the glass for people to get your hands on it.

And yeah, it may not be something more than just showing proof of concept or testing, but that’s the wonder of Roku, right? Yeah. Now Becky, we’ve had actually a lot of different types of developers on this program. And so like with Sean showing. That he was doing all of this with w with Heroku. I know we’ve also had projects we’ve shown where they’re doing deployment and hosting with Netlify.

Is there any, like, based on your experience, is there any situations where you’ve you should use one versus the other?

Becky Peltz: Well, yeah, I think, well, Heroku has been around a lot longer, like, um, I’ve taught in a boot camp before and was probably like five years ago. And that was the go-to place. That was the go-to [00:40:00] place to deploy because, you know, It’s easy to deploy just front end, but if you’re trying to deploy full stack, you need a server.

You need a place to put your environment variables Hiroko makes it really easy. Netlify is a little newer and it has brought in the ability to write serverless functions. So basically you can write AWS Lambda in and deploy it for free. So when I think about. So here’s here’s where, like where I’ve used Heroku, uh, because Heroku is full stack and web.

If I want to, if I have a form, a multi-part form where I want to push up a image, you know, to be processed as a multi-part form, I can’t do that in a serverless function on Netlify. So I use her. Uh, Roku’s great. I can use Malter. I can, you know, set up and we have, we can do remote functions in Cloudinary that help with our [00:41:00] transformations.

And right now I just use Heroku it’s free and I can do anything I want because it’s full stack. I can’t do that on a serverless function. And Netlify right now, if I was using the Lambda and AWS, I could go through the API gateway and I could push up a image, but, but I can’t do it in, in now. So sometimes the go-to place is Heroku for me.

Um, but I’m starting to really enjoy playing with a serverless function. So I highly recommend that if you decide, you want to get into that, Netlify, you can deploy for free. It has a similar kind of, um, It’s CLI and you could hook it up to get hub and push, push your stuff out there. So there are, there are some differences and I think it’s all kind of an evolutionary process.

And so depending on these case

Sam Brace: that I loved it, the various use cases and of course deployment where you’ve done a Shaun makes perfect sense. [00:42:00] So once again, good job. Um, so now that you’ve got a portfolio out there and I also, once again, I really liked the approach that you’re taking, like redo it every year, try to incorporate new things you’ve learned.

Try to, as you said, put a fresh coat of paint on it. Not all. Visually, but maybe based on what’s deploying it, what’s putting in all of the bells and whistles and functions. So this is great. So it could be a case where next year you decide not to use react or something along those lines. Did I get that right?

Yeah. That’s perfect. Yeah. So now that you’ve got your portfolio out here and we want people to see it, hopefully this program attracts more business for you in this way. Other than the portfolio, where should people be going to learn more about what you’re up to? Is there any particular platforms you’re really active on?

Is there any social media networks you’re really active on, um, feel free to use this chance to promote yourself?

Sean Morgan: Um, [00:43:00] so, uh, my main websites are, uh, Sean Morgan designs.com, uh, which is mostly my web development stuff. And Sean Morgan illustration, which is a trembling illustration.com, which is now hosting, uh, my portfolio here.

Um, then that I’m a get hub is, uh, inside Shawn’s head. And, uh, now these days I’m mostly just on LinkedIn.

Becky Peltz: I got you on LinkedIn. So yeah, no, that works pretty good. Yeah.

Sean Morgan: I’m, I’m enjoying that. I’m enjoying that more and more.

Sam Brace: Excellent. Sean, thank you so much. And like, like I said, right at the beginning, I was sure we would get a lot of great nuggets of knowledge out of this.

And I feel like I at least have a dozen now. So thank you again for your time. And I can’t wait to see what you do next with. Ever-growing development career. So keep it up. Thank you very much. [00:44:00]

Becky Peltz: Yeah. Thank you.

Sam Brace: Sean has a lot of amazing qualities and of course, every one of our guests on DevJams does, but there are some key things that I really want to emphasize in this episode with Becky here.

First being. If we take a look at what illustration is, of course you’re looking at all the fine details. Exactly. All of the beautiful colors and the gradients and the shading that’s taking place with art like that. But it’s still it’s to say that you can’t optimize it. You can change the formats for sure.

You can do a little bit of light compression to be able to make sure that content loads as quickly as possible, but still shows off all of the beautiful aspects of the art. So I think it’s showing that someone like Sean. Yes, he has development shops. Yeah. Obviously was able to do some cool things by building the portfolio the way that he did.

In general, I think showing your art as an illustrator at full within Heights, taking up so much [00:45:00] bandwidth ultimately is doing a disservice to you, your art and the people that want to be a part of it. So I love the fact that Sean took the time to do a little bit of compression in format.

Becky Peltz: I totally agree.

It’s really tipping a hat to the medium. This, when you’re on the internet, you know, there are sort of rules that, that can make it a better place. And one of them is optimization and the fact that he used F auto Q auto and relied on Cloudinary to kind of help out with that, get the kind of trade off between smaller, but still looks good.

I was really impressed just to see that he, he added that to his URL. So that was really a pleasant surprise.

Sam Brace: I agree. I mean, I gotta say, I feel like F auto and Q auto it’s like, it’s kind of like peanut butter and chocolate, like separately. They’re good. But like when you put them together, it’s like, oh, oh my goodness.

Becky Peltz: I see it as a sort of internet sophistication when someone throws in, you [00:46:00] know, formatting and quality optimization.

Sam Brace: Oh, absolutely. And the fact that he was able to do that, it’s, it’s, it’s this case where he knows it’s always going to work. It’s going to be the right format. It’s going to be the right level of compression for that.

Browser for devices. So it’s it, it hits that sweet spot, just like when you have a little bit of chocolate and peanut butter in the same way it hits that sweet spot. So yeah, I, I think he, what he did was great. Um, but it definitely shows that there’s nobody that’s. A little bit of compression, a little bit of format.

I think it’s definitely where Sean is. You know, he needs to show off his work, you need to sell his work. So it definitely proves that to be true. And I think to that same extent, I think one thing that Sean, I think Jen is also another good example of this. And I also think Hannah is a good example of this, the three bootcamp students that we’ve profiled in programs so far, is that.

These were people that had had schooling for other things, but then went back to learn [00:47:00] more about software development and to know how to code. And I think you’re, it’s never too late. It’s never a point where you say like, well, I’m too far along in this process, everybody can benefit from just understanding the way the web works.

Technology is something that’s not really going anywhere, obviously. So being able to know. How will the inner components of this work and how to make it benefit for your project, your side project, whatever it is, is a huge win for someone like Sean and others. So I think just take the time to learn how to code if you haven’t done so already, it’s, you’re going to be able to be so much more impactful for the projects you want to actually.

Becky Peltz: I agree. And I, I really liked his comment that, you know, he studied, he was, has a bachelor of fine arts. He studied art in college math. Wasn’t part of a big part of his curriculum. And he was afraid that getting into coding might involve a lot of math. He had his math class in college and via involved painting pine Combs, you know, so his, he, [00:48:00] there was a little bit of that math anxiety and fear involved, but he overcame that and found that.

You know, he, he was able to use his natural skills in the coding world. So I was, I’m happy to see that.

Sean Morgan: Yeah. I

Sam Brace: mean, it really does show and I think this highlights, that third point that we do have is that a lot of people in Shaun included, like where they sometimes blend in coding with things like science and math.

I mean, obviously stem, right? I mean, science, technology, engineering, math, but in the same sense, it is where. There’s a lot of artistic aspects to coding. It’s where it can be a creative endeavor. You’re building something from scratch is allowing for your voice to be seen. I mean, I know that there’s programmers that I know personally that talk about how beautiful somebody’s code is in the way that they write it.

And that’s something that sometimes you hear used in the same way as like how beautiful that painting is or how beautiful that sculpture is. It can [00:49:00] be a creative endeavor. So it is. If you see yourself as a creative person, you might be surprised at how much you actually love the code. Once you start figuring out how to do so.

Becky Peltz: Well, I, I have a background of doing a lot of just kind of serious business coding. And, and later on, I, I had found myself in an art installation coding for that, and, you know, You know, basic, you know, browser type coding, but it turned out to be an art project. And I was kind of really amazed that I could cross over that way.

So it’s, it’s a very nice for both the arts and the sciences to come together on. And coding is a great way to do that.

Sam Brace: I completely agree. If you’ve enjoyed this program and you’ve enjoyed everything that Becky and myself and Sean has shared with you in this program, there are a few things we’d love for you to do.

And the first is to tell somebody about the program, whether it’s on social media or just [00:50:00] in, you know, a slack message to your colleagues saying, check out this. We’d love for you to share this. And if you do so, and you can tell us, Hey, this is how I shared it. Then send that over to us. If you just send it via our support channels, then our support team will actually increase your Cloudinary plan by one credit for every time that you share this and tell us about it.

And that helps with this getting a little bit more bandwidth, a little bit more room for storage to help with those next projects that you have. And of course, If you are listening to this in a certain place, but you want to know where else to go. Of course, we’re on apple music and Google podcasts, and we’re also on Spotify.

We also on YouTube as well as the Cloudinary Academy. So there are plenty of places where. If you are saying I’d liked this, but I’d like to do it where I like to listen to podcasts or watch podcasts. We are on pretty much every platform and place you can think of. So keep liking and subscribing and all the other things you can do to let us know that you had a good time [00:51:00] wherever you choose to consume your content.

Becky, anything else to tell our audience before we let them go to her big thing that they’re going to be working on, or the next thing they have.

Becky Peltz: Well, I’m just hoping that people are out there finding interesting projects and looking at what other people are doing and certainly building out their own portfolio.

It’s something you can work on all the time.

Sam Brace: I agree. Excellent point. Keep searching for that awesome thing, everybody. Thank you again. And we’ll see you again for the next episode of DevJams.