Angular Setup And Workflow - AiA 370
Chuck, Lucas, and Subrat join this panelist episode to talk about setup and workflow for working in angular apps. They begin by discussing their thoughts on Visual Studio Code. Additionally, they tackle its features and VS code extensions that make working with angular apps easier.
Show Notes
Chuck, Lucas, and Subrat join this panelist episode to talk about setup and workflow for working in angular apps. They begin by discussing their thoughts on Visual Studio Code. Additionally, they tackle its features and VS code extensions that make working with angular apps easier.
On YouTube
Sponsors
- Chuck's Resume Template
- Developer Book Club starting
- Become a Top 1% Dev with a Top End Devs Membership
Links
Picks
- Charles - Sushi Go Party!
- Charles - TriDot Triathlon Training - Community - Facebook
- Charles - Bike computer
- Charles - Bone conduction headphones
- Lucas - Pouches and Cubes | Peak Design Official Site
Transcript
Charles Max_Wood:
Hey, welcome back to another episode of Adventures in Angular. This week on our panel, we have Lucas Paganini. We also have Subra Mishra.
Subrat_Mishra:
Hello.
Charles Max_Wood:
I'm Charles Max Wood from Top End Devs. And this week, we're going to talk through our setup and workflow for working on Angular apps. Just to get us started, it seems like most of the people I talk to these days are using Visual Studio code. And I was just curious if you guys are using something else or if that's kind of the way we're going to frame this as far as the IDE or text editor goes.
Subrat_Mishra:
I think feature should now become more than just an IDE. It has everything in it. You have a lot of functionality, a lot of extension. But if I say myself, I have started from Sublime. Sublime text, I think old days that I was doing with Django in Python. So at that time, Sublime was popular then slowly moved to VS Code. Currently due to TypeScript support, which is default in VS Code and a lot of extension, I am using mostly VS Code.
Lucas_Paganini:
Yep, me too. Like currently, just VS Code for everything. I did use Sublime Text for a while and I still have that installed just because sometimes if I want to open a very, very large CSV or XML file, which sometimes some websites give me and I want to open them, like I just can't do that on VS Code because it just... crashes completely. So for those reasons, I still have sublime text. But for my everyday development workflow is 100% VS Code.
Charles Max_Wood:
Gotcha. Yeah, I use VS code as well, but most of the time I'm not writing angular. So I don't know how much input I'm going to have on this, but.
Subrat_Mishra:
What about you Charles for back end?
Charles Max_Wood:
So for backend, I'm usually writing Ruby on Rails and I'm using VS code. So I just installed the Ruby extension. It does the Ruby language service. It's magic. Yeah, my son, he's taking some computer programming classes in high school. Anyway, he's supposed to be able to do it all at school, right? Cause they don't want to count on the kids having to get tech support at home. Um, but he has the benefit of having me around and I'm not afraid to go figure it out. Um, they're doing C plus plus and C sharp and we've installed those language extensions as works great. Which is one of, yeah, it's one of the reasons I really like it is cause, um, you can usually find a syntax, um, extension and a language service extension and then. VS code just kind of does the rest of the work for making it easy to figure stuff out.
Subrat_Mishra:
Yeah, I think mostly if you ask personal use, a lot of people, maybe 90% people, I'm just exaggerating like the number, maybe they are using VS code, but I saw in some company who IntelliJ license or some license
Charles Max_Wood:
Mm-hmm.
Subrat_Mishra:
they as they bought the license of suppose pro members if we supports Angular we supports react we supports TypeScript they like their developer are using IntelliJ and
Charles Max_Wood:
Mm-hmm.
Subrat_Mishra:
I what I thought is they are what IntelliJ is doing all the extension free extension What we what we have in VS code like suppose spell correction or to? auto and tag a lot of things they are slowly implementing that to their to their pipeline as well so that's the one thing but i'm not saying that intelligence copying that but it seems like that so
Charles Max_Wood:
Yep. Yeah, it makes sense. Um, I also know some people use WebStorm, which is also written by JetBrains similar to IntelliJ. Um,
Subrat_Mishra:
yeah
Charles Max_Wood:
I don't, right?
Subrat_Mishra:
Mm-hmm.
Charles Max_Wood:
Uh, one of
Subrat_Mishra:
Mm-hmm.
Charles Max_Wood:
my
Subrat_Mishra:
Mm-hmm.
Charles Max_Wood:
coworkers uses RubyMine, which is the Ruby IDE that's written by JetBrains.
Subrat_Mishra:
Mm-hmm. Mm-hmm. Mm-hmm. Mm-hmm.
Charles Max_Wood:
I mean,
Subrat_Mishra:
Mm-hmm.
Charles Max_Wood:
it's,
Subrat_Mishra:
Mm-hmm.
Charles Max_Wood:
it's
Subrat_Mishra:
Mm-hmm.
Charles Max_Wood:
fancy and it, it, you know, it does some stuff, I guess, a little more
Subrat_Mishra:
Mm-hmm.
Charles Max_Wood:
seamlessly than VS code does,
Subrat_Mishra:
Mm-hmm.
Charles Max_Wood:
but most of the time I just,
Subrat_Mishra:
Mm-hmm.
Charles Max_Wood:
I don't need
Subrat_Mishra:
Mm-hmm.
Charles Max_Wood:
it.
Subrat_Mishra:
Mm-hmm. Mm-hmm.
Charles Max_Wood:
And
Subrat_Mishra:
Mm-hmm.
Charles Max_Wood:
I
Subrat_Mishra:
Mm-hmm.
Charles Max_Wood:
reach
Subrat_Mishra:
Mm-hmm.
Charles Max_Wood:
for
Subrat_Mishra:
Mm-hmm.
Charles Max_Wood:
the
Subrat_Mishra:
Mm-hmm.
Charles Max_Wood:
command
Subrat_Mishra:
Mm-hmm. Mm-hmm.
Charles Max_Wood:
line
Subrat_Mishra:
Mm-hmm.
Charles Max_Wood:
pretty frequently.
Subrat_Mishra:
Mm-hmm. Mm-hmm. Mm-hmm. Mm-hmm. Mm-hmm.
Charles Max_Wood:
And that's what I find these other systems typically will give you that maybe VS code doesn't give you as readily as far as like, hey, here's a button you can hit to do whatever you're going to do. Is that, you know,
Subrat_Mishra:
Mm-hmm. Mm-hmm.
Charles Max_Wood:
I just go to the command line and run an NPM command as opposed to, you know, in their system, there's a button that does it.
Lucas_Paganini:
Yeah,
Charles Max_Wood:
So.
Lucas_Paganini:
actually, I recently learned a lot of new, a lot of very interesting features on VS Code. Like one of them being something very close to what you're mentioning, which is defining custom tasks that can be run. And it's
Charles Max_Wood:
Uh-huh.
Lucas_Paganini:
really interesting because VS Code can just put them in the command line. So for example, the command palette. from VS Code, so you can just, you can give names to your tasks and your tasks can depend on others. So for example, that problem with parallelization on tasks that could work on Windows and Linux and Mac, like if you just use VS Code to document the scripts that you want to run and you call the task from the VS Code task manager, then it can do with all that. to you for free, like it can deal with the differences in the operating systems, which I thought was really interesting. I don't know if I'm explaining myself very clearly here, but it's basically, there's a JSON where you can define all the scripts that you want other developers to be able to run in your particular project. And then VS Code understands that JSON, and it adds that... as commands to the command palette on VS Code.
Charles Max_Wood:
Oh, interesting.
Subrat_Mishra:
Mm-hmm.
Lucas_Paganini:
Yeah.
Subrat_Mishra:
I think this makes sense if you are doing as a developer in a team a new developer comes in you just need to send him or her the JSON file and they put it everything set up they just need
Lucas_Paganini:
Exactly.
Subrat_Mishra:
to change something according to what they like and that's all not much thing
Lucas_Paganini:
I was actually opening up one
Subrat_Mishra:
Uh
Lucas_Paganini:
project
Subrat_Mishra:
huh.
Lucas_Paganini:
here just to know exactly how can you define this file. So basically you need to have a.vscode folder
Subrat_Mishra:
Uh
Lucas_Paganini:
on the root
Subrat_Mishra:
huh.
Lucas_Paganini:
of your repository and then
Subrat_Mishra:
Uh huh.
Lucas_Paganini:
inside of that.vscode folder you create a file called tasks.json and then from there you can just define an array of all the tasks that you want to have available in your project. And so each task can have a label, detail, which would be like a description, an array of other tasks that this task depends on. And you can also say how it should execute the other tasks that it depends on. So for example, you could say that it depends on is a parameter and you can say that it's parallel. So it knows that it can run the dependent tasks in parallel and wait for them to be done until it starts this one.
Subrat_Mishra:
Hmm
Charles Max_Wood:
Interesting. Yeah, this is some of the stuff that I really want to start doing in more depth. And in particular, so one of the things I'm adding to top-end devs is I'm going to start doing 10-minute videos on here's how you do a thing. Eventually, I'd like to do one on Angular. So if somebody wants to start putting that series together, let me know. But one of them that I'm planning on doing is Visual Studio Code. And so this is the kind of tip that I would put in there. Hey, do you have these common things you want to do? You know, this is how you set it up. And if I remember right, you can also bind those key bindings, can't you?
Lucas_Paganini:
Yep, yep, you can also do that. So since they become commands on VS Code, you can just keep bind them just like any other command in the VS Code command palette. Yep.
Subrat_Mishra:
hmm pretty cool
Lucas_Paganini:
Yeah, and like there's also a property that is called problem matcher. I haven't used that, so I can't really be sure if that's what it was intended to do, but I was looking at the description of this property and it seems that it's like an array of regular expressions that you can give to the task on VS Code. And then every time that a problem happens, on your terminal or on the extensions that you're using. And VS Code matches the error message from that problem with the regular expression that you gave. It can give the developers the suggestion to run that task. So if you do that properly, you can create like a really nice onboarding experience where if somebody forgets to like start the database and then it's gonna generate the particular error message and then VS Code can understand that and show a pop-up like, hey, maybe you forgot to run the database. If you click here, then I can run this task for you.
Subrat_Mishra:
So is it by default or we need some extension to add it?
Lucas_Paganini:
No, it's just by default. You just need to create a folder.vscode and then inside of it a file tasks.json. And then there's like a particular format to that JSON file. But other than
Subrat_Mishra:
Въем.
Lucas_Paganini:
that is natively supported by VS Code.
Charles Max_Wood:
That's really cool. So what kinds of things do you have in there?
Lucas_Paganini:
Well, from the project that I am using as an example, which is the only project that was using that so far because our developers discovered this thing pretty recently, what we have here is running the front end, running the front end alpha version, running the front end with server-side rendering, running the backend, and then there's like one that... runs everything with server-side rendering and runs everything without server-side rendering. So it's just a task that depends on others and when you run that it calls the other tasks. So they're basically just using that for the serve scripts. So instead of just having an npm serve ssr, npm serve regular, npm serve alpha, npm serve alpha ssr. then we can have that in the tasks JSON. Some of these tasks they also have as npm scripts, but it's just that honestly, npm scripts, they get so convoluted. There are just so many things that we put on npm scripts that sometimes I get lost on what are the most important ones. So I like that the most important tasks are defined in tasks.json. And also, maybe there are things that you want to run and you don't want to depend on NPM for whatever reason. You can just put them
Charles Max_Wood:
Mm-hmm.
Lucas_Paganini:
on tasks.json.
Charles Max_Wood:
That makes sense. I would imagine you can also add it to the NPM. Right, so that you have the NPM task and then just have that in your. TaskSot, Jason. And then it's NPM run whatever.
Lucas_Paganini:
Um, I got a bit confused. Now, you mean like from the task.json running on an npm script? Is that it?
Charles Max_Wood:
Yes.
Lucas_Paganini:
Okay, yeah, like actually there's even like native support for that on the task.json. So for example, when you define the task, there's a property called type, and you can say that the type is npm. And then if you say that, you don't need to write npm run. You just say that the type is npm, and then in the script property, you just say the part that would go after npm run. So for example, you want a task that runs npm run serve. You can give it the property type npm script serve. Pretty cool. Pretty cool.
Charles Max_Wood:
Yeah.
Lucas_Paganini:
I think
Subrat_Mishra:
Yeah,
Lucas_Paganini:
that
Subrat_Mishra:
I think.
Lucas_Paganini:
VS
Charles Max_Wood:
So do
Lucas_Paganini:
Code
Charles Max_Wood:
you guys.
Lucas_Paganini:
kind of dominated the space of IDEs for web development lately.
Subrat_Mishra:
Yeah.
Lucas_Paganini:
People don't even have any confusions about that. I had some colleagues that were using IDEs from JetBrains, but they just gave up because the community support on VS Code, the amount of extensions that you get there, like... is just something that you can't compete with. You can do something that is faster, but still, like we're talking about milliseconds, so people are mostly preferring the user experience and the features. So even though VS Code is technically slower than some ID, some other IDEs, it's faster in the sense of... having more features, like it's faster for the community to build things on it. So it ends up winning.
Subrat_Mishra:
Yeah, one downside I can say about VS Code which was I faced in my old laptop as I think I have less RAM and inferior i5 processor. So in that when I was opening multiple VS Code window, so it was taking a lot of RAM and a lot of CPU. which was not the case of maybe IntelliJ or Eclipse. So that was, but I think nowadays, if you have a newer laptop and it is not at all slow.
Charles Max_Wood:
Yeah, I haven't had any performance issues, but, and my MacBook's a few years old, so I don't know. I don't know what would cause that.
Subrat_Mishra:
Yeah, I think by looking VS code, we can say that how powerful JavaScript can be like using and which runs in machine so efficiently. So maybe people like if you discuss with the C++ or a REST developer, they'll say that JavaScript is slow. But VS Code is a pretty good example of how efficiently you can write code so that it will run efficiently in your system.
Lucas_Paganini:
Definitely.
Charles Max_Wood:
Yep. So besides sort of the basic VS code setup as far as, you know, maybe installing an Angular extension, are there other tools or extensions that you're using? And also setting up the test.json. I don't want to discount that because I think it's cool. But
Subrat_Mishra:
yeah
Charles Max_Wood:
are there
Subrat_Mishra:
so
Charles Max_Wood:
other
Subrat_Mishra:
one
Charles Max_Wood:
things you're
Subrat_Mishra:
of
Charles Max_Wood:
doing that help you?
Subrat_Mishra:
one of the best extension which I thought which remove lot of my work is remote So it allows you to, if you are running, if you have a system in your company where everyone have their own VPN kind of thing instead of going and coding in in-veme or something, just do remote SSH to your server and it gets all the codes and you can run, right, you can write that itself and you can create a reverse proxy to your local host as well. So it has a proxy tab. It will comes when you run the code, it will have a proxy card. So now you can run your local, but it will hit the server and it's pretty fast as well. So the same
Lucas_Paganini:
Okay,
Subrat_Mishra:
thing we
Lucas_Paganini:
so.
Subrat_Mishra:
use on our company. So what thing happens is, usually what we used to do is you'll code in local, merge that file to your development server, then test it. or run it in on the on the dev environment. So what it will do if you you can now directly code in your development server and just run it run it directly. So that is less there is one step reduced to sync your file to with the development server and do it. But I think it will not help everyone who don't have a dedicated development server for each and every team member. use this extension it will be a lot of time server.
Lucas_Paganini:
Subrat, you touched on a point that I am super interested in. So I really want to dissect
Charles Max_Wood:
Ha ha
Lucas_Paganini:
that
Charles Max_Wood:
ha
Lucas_Paganini:
dude.
Charles Max_Wood:
ha.
Lucas_Paganini:
Like I've been playing with those VS code extensions for remote development for a while. And one thing that I wanted to do is in the very first months of my company, we were hybrid. After that, we went to a hundred percent remote. and we stayed at 100% remote, but in the beginning we were hybrid. So I bought some CPUs during that period, and they are just on the corner, like lost and sad and waiting for somebody to come in and do something with them. And I had this idea for a while now, which was to connect them to a network. maybe like a VPN, an internal private network, where my developers could get into this network, connect to those machines, and use them as development environments.
Subrat_Mishra:
Yeah.
Lucas_Paganini:
And VS Code, I only had this idea because at the time I was exploring an extension on VS Code that is very similar to this one that you mentioned, but it is a bit different. So there were some... extensions that were released that are related to what you were saying, which is remote development. There was one in particular which is called dev containers and the idea of that extension is for you to create a docker container that defines all the dependencies of your project. So for example,
Charles Max_Wood:
Mm-hmm.
Lucas_Paganini:
you're working in an angular code base. So maybe you're using Chrome and Firefox and Cypress to run your automated tests. Then you can have a Docker file for development that installs Chrome and Firefox and Cypress and all the other external dependencies that you need besides your node modules, of course. And then when you open up VS Code, VS Code automatically identifies that you have this Docker file which was intended for development environment, and it's going to show you a pop-up saying, like, this repository has a Docker file for the development environment. Would you like to start a Docker container and run your project inside of that? And then VS Code runs this container. It does a lot of integrations with Git so that everything that you're doing on Git inside the container also works for your local machine. So it does a lot of crazy stuff. You can do port forwarding. It's really cool. But basically, it's that. It's a way for you to define your development environment, and it makes it easier for people to onboard in the project. So imagine that you get into a repository, and then instead of you having to install a bunch of things in your machine, You just instantiate a Docker container with all the dependencies and boom, you're good to go.
Charles Max_Wood:
Mm-hmm.
Lucas_Paganini:
So what I wanted to do is do that, but do that remotely because it's kinda easy to do that locally, but
Charles Max_Wood:
It's very easy
Lucas_Paganini:
there's
Charles Max_Wood:
to do
Lucas_Paganini:
also,
Charles Max_Wood:
that locally.
Subrat_Mishra:
Yeah.
Lucas_Paganini:
yeah, yeah, but it's very tricky as soon as you want to do that remotely, which is what GitHub Codespaces offers. So I basically want GitHub code spaces, but in a private network using those extensions. So do you have more information about how this infrastructure can actually be set up, like from scratch? Because from a consumer standpoint, it's kind of easy once it's set up, but I don't know if you were part of the process of implementing that infrastructure there. or if you can give me some tips as to, or to the audience as to how they could implement that.
Subrat_Mishra:
yes first thing first thing I would like to say the the extension you told and I told I think it's like about the common package which is remote development from Microsoft. If you install that, your remote Docker, like a Docker container, remote SSH and everything comes with it. So that's the one one extension you can install and everything will be handled. And about the about the setup for the local, I think it can be implemented various way. So how we are doing in our company is pretty different. I think what what you are trying to trying to do and also I so I it was it was pretty old as well so I was not part of that as well but one thing is if you have a any remote system which is hosted suppose for your case you have a CPU and now you want to create different user for X amount of developer and assign them a server so they don't need to be depend on their system performance. So suppose they have less memory or less CPU performance to build or run the development what they are doing. Then that might be helpful if you just install a remote server in your CPU and divide that give that access to all the user you have created and they can directly connect to that particular user and and navigate inside the remote SSH extension to open something. So like am I clear or I made you more complicated?
Lucas_Paganini:
Um, it's... you were clear. It's still pretty confusing to me as to how I would do the infrastructure that I wanted to do. But
Subrat_Mishra:
Yes.
Lucas_Paganini:
I think it makes sense. Like everything that you said makes sense.
Subrat_Mishra:
Yeah, I would suggest if you have a lot of you lot of developer are doing or if your developer doesn't have much CPU power or something, then you should do that because This is a headache extra process to do if it is pretty, pretty easy to do it in local and you have few developer like 10 or maybe five or six developer. They can if they can coordinate between themselves pretty easy and that is they're maintaining the site or the code base pretty well. Then I don't think it is that necessary for now, according to my point of view. But if you if you have thought to use it, you might have some very good region
Lucas_Paganini:
Like also, I even thought about just connecting to computers, even just locally. I'm not even talking about like over the internet, but over an intranet. So for example, connecting my notebook and my CPU, which is running Linux, in a local network,
Charles Max_Wood:
Hmph.
Lucas_Paganini:
and then somehow delegating a huge part of the... load of the application to my CPU but still developing and working in the source code from my Macbook. So I could do that if everything was inside Docker containers and then for example, I want to just instantiate the containers on my CPU but I am actually working in the source code in my Macbook. So that would be one use case. And it seems like such a cool idea because I think a lot of people might have an old computer that they could think of using like that. But it's so hard to set up. Like you think that you're gonna buy time because it's gonna be faster to process something on a CPU instead of in your notebook. But the effort to make those two things talk to each other, it's just
Subrat_Mishra:
Yeah.
Lucas_Paganini:
so hard that I think at the end of the day, you end up spending a lot more time trying to make this work, which is why I haven't actually made it work thus far, because every time that I tried, it was taking me so much energy that it lost the purpose. Like the purpose was for me to be faster, not try to make two machines with different operating systems
Charles Max_Wood:
Mm-hmm.
Lucas_Paganini:
talk to each other.
Subrat_Mishra:
Yeah it is cool to use though
Charles Max_Wood:
Yeah.
Subrat_Mishra:
like I never set up but I remember in my university so we have a computer lab with 16 or 18 system in it and I was doing one simulation so I used and all the system are shared across each other so you can use all of their CPU to do the simulation. But if you have that kind of organized system, then it is pretty fast and you should use it. But yeah, it's pretty hard to set up alone. You can hire someone to set up. I think they have those set up they will do right for you.
Lucas_Paganini:
Okay,
Charles Max_Wood:
Yeah.
Lucas_Paganini:
Subrette, you probably just made a lot of people go into my LinkedIn and offer this service. So I don't know if I should be thankful or... You're responsible for every span that I get for the next two weeks.
Charles Max_Wood:
Right. Yeah, I have to say I've used the Docker extensions. I've kind of fiddled with the Kubernetes extensions. I haven't gone into depth on those. I think I mentioned before that I'm doing putting together series. And yeah, one of them is the Docker container deployment series, right, where we talk about how to containerize different kinds of apps and what to do with them. But yeah, the Docker can the Docker. extension for VS code is really, really easy. And if you have Docker desktop installed on your machine, then it does a lot of this for you. So you do have to be responsible for whatever dependencies there are for your app. But yeah, if you want to run it locally, it's relatively easy to set up. And most of the work that I do, front end or back end, I run in Docker containers. And that includes, for example, running. Um, so lately I've been running the front end stuff, um, either with a web pack or with, um, Oh, what's the other system that I'm using to compile stuff? I don't remember anyway, um, compile my front end stuff, but yeah, then it, you know, it sets up a small server runs all my assets that have been compiled. It's really slick. And, uh, You can either run it through the extension or a lot of times I'll just have a Docker compose file. I just run a Docker compose and then when I change a file it has a watcher that's running on there that just recompiles stuff.
Subrat_Mishra:
Hmm
Charles Max_Wood:
It's really, really nice to be able to just run through that and have that Docker set up. Then the other nice thing is if somebody else wants to run it on their machine, they can run it on their machine. All they have to do is install the Docker extension, right? And then know the couple of commands it has to run. One other thing that you were talking about doing remote stuff that you made me think of was the VS Code live sharing. And it's a service that
Lucas_Paganini:
Yes.
Charles Max_Wood:
Microsoft offers. It's part of VS Code. I think they have a paid version of it, but I've only used the free version and it's, it is really slick. And if I'm running a dev machine on my machine and I want you to be able to connect with to it and run your commands against it, you totally can. You can set that up. And yeah, they have some security features built into it. So, you know, you compare with people that you don't necessarily know well, you know, know well enough to trust, I guess. But It's all very, very slick. And so that's another way that I've gotten around to using VS code that, I guess, isn't strictly speaking Angular, but is very handy. I also like Git lens. the git stuff, git lens.
Subrat_Mishra:
One thing I
Lucas_Paganini:
another
Subrat_Mishra:
didn't
Lucas_Paganini:
like.
Subrat_Mishra:
like, yeah, sorry, go ahead.
Lucas_Paganini:
Oh, sorry. Another thing that I would recommend as just a quality of life is Gitmoji. It's an extension on VS Code, which gives you a list of emojis for you to prefix your commit message. It sounds stupid, I know, but it actually makes everybody more productive when you get used to them. And just... everybody a little bit happier. So for example, when you try to make a commit, then you're gonna see an icon, which is like a smiling face. And if you click on it, you're gonna see a list of a lot of possible emojis for you to use for your commit message. And then for example, they have a description of when you would use that emoji. So improve performance, then you use like a lightning bolt. fix a bug and then there's like an actual bug. Critical hotfix, then there's an ambulance. Deploy stuff is a rocket. So it's like a nice little thing that the developers like and when you go to look at all the commits in your repository, it just seems more friendly because there's a bunch of nice emojis. The thing that you don't want to see is poop emojis because that's what people use when they write bad code. So it's like when
Charles Max_Wood:
hahahaha
Lucas_Paganini:
you need to do something real fast, it's just to use the poop emoji. And it's just a funny little thing. So that's a quality of life extension that I would recommend, gitmoji.
Charles Max_Wood:
Nice. I'm also curious, kind of maybe going a little beyond VS code. I'm assuming you guys are using Angular CLI for some of your stuff. Are there extensions that make some of that stuff easier?
Subrat_Mishra:
yeah
Charles Max_Wood:
so you can put those in your tasks or whatever.
Subrat_Mishra:
so one thing which helps me is not about angular CLI or something I use Oh my GHS. So that helps to remember all my commands. What it does is you can configure a terminal however you want. And it can also autocomplete your command by your previous iteration. So suppose I write ngnew and it will give the whole command ngnew. and the command, the type name and ng-generate component. So I use that to remember CLI commands or just to type lesser file developing.
Lucas_Paganini:
I use the Angular CLI but through a proxy. So we generally use NX for our code bases. And NX exposes its own CLI, which extends the Angular CLI. So everything that would work for the Angular CLI generally works with the NX command line. I haven't seen things that didn't work. Some of them might need like a different format here or there, but overall it's just the same. So in my case, I have an extension which is for NX console and it just gives a nice UI for everything that NX exposes. So the difference is that since NX is a tool for mono repos, then there might be parts of your repository, they're not Angular applications. Maybe they are just pure NPM libraries or node modules, like they don't even have Angular at all. And you can still run your build watch and run your automated tests and everything from the NX CLI. So you can just use one CLI to run the command from all of your... internal packages from your entire monorepo. Instead of like if I am on an angular package in my monorepo then I use the angular CLI but if I'm in a different thing then if I'm in my nest backend then I use another CLI. No you can just use NX for pretty much everything.
Charles Max_Wood:
Is there an NX extension or do you just set that up through your tools.json?
Lucas_Paganini:
No, there is an NX extension. It's called NX console, but you don't need to install the extension to use it just the CLI. So to use it as the CLI, like as soon as you integrate NX with an Angular application, it's gonna create a file which decorates the Angular CLI. And... Like, I don't know all the internals of how that file works. I just know that it kind of patches the Angular CLI in a way that it's always gonna use the NX CLI. But, so you don't need the extension to be able to have that. So with that, you can already run NX from your console. If you're just running that... through your node modules, then you would run NPX, NX. But if you just install NX globally, then you can just call NX, which is kind of the same than calling NG, but you just call NX instead of NG. And it gives you more power than just the Angular CLI. It's actually even faster. So that's a nice performance tip, by the way. So... I have ran into situations where I simply didn't need it, many packages in my repository, so I was like, why am I gonna use NX? NX is a tool for monorepos. I don't need a monorepo, I just need a single package. So why would I use that? But even if you only have one package, if it's an Angular application, you still have benefits from using NX, because... it's literally just faster to build than using ng-build, which is weird because ng-build should be faster, but NX does a lot of optimizations. And like there are people from NX that worked in the Angular team, and even the ones that don't work, they are constantly working in the Angular source code. So maybe they are not official team members. of the Angular team, but they know the source code. So they do a really great job at optimizing it and just running some commands from NX instead of NG. It's actually faster. So I would recommend NX for everybody that is in an Angular application, which is probably everybody from this podcast.
Subrat_Mishra:
Yeah, I think NX uses, so I'm not sure about that, but does NX also update according to the Angular's update the build cycle or process or how they structure the code? I mean, suppose for the Angular 15.
Lucas_Paganini:
Well, not in terms of the actual version numbers. So for example, it's not that you would use NX15 to get Angular 15. So the version numbers are not always so perfectly lined up, but I do think that they changed that. recently. So now I do think that it is aligned, but it's not perfectly aligned. Like they are not going to always release as soon as a new version of Angular releases because they
Subrat_Mishra:
Mm-hmm.
Lucas_Paganini:
are not
Subrat_Mishra:
Mm-hmm. Mm-hmm.
Lucas_Paganini:
part
Subrat_Mishra:
Mm-hmm. Mm-hmm.
Lucas_Paganini:
of the
Subrat_Mishra:
Mm-hmm.
Lucas_Paganini:
official
Subrat_Mishra:
Mm-hmm.
Lucas_Paganini:
Angular
Subrat_Mishra:
Mm-hmm.
Lucas_Paganini:
bundle.
Subrat_Mishra:
Mm-hmm. Mm-hmm.
Lucas_Paganini:
Like
Subrat_Mishra:
Mm-hmm.
Lucas_Paganini:
they're not
Subrat_Mishra:
Mm-hmm. Mm-hmm.
Lucas_Paganini:
directly
Subrat_Mishra:
Mm-hmm.
Lucas_Paganini:
supported
Subrat_Mishra:
Mm-hmm. Mm-hmm. Mm-hmm.
Lucas_Paganini:
by
Subrat_Mishra:
Mm-hmm.
Lucas_Paganini:
Google. They are supported by a third company
Subrat_Mishra:
Mm-hmm. Mm-hmm. Mm-hmm. Mm-hmm.
Lucas_Paganini:
which
Subrat_Mishra:
Mm-hmm. Mm-hmm. Mm-hmm.
Lucas_Paganini:
has...
Subrat_Mishra:
Mm-hmm. Mm-hmm. Mm-hmm.
Lucas_Paganini:
founders
Subrat_Mishra:
Mm-hmm.
Lucas_Paganini:
that are super connected with the people that work on the Angular source code, and even they work on the Angular source code sometimes, but they are still not in the Angular bundle. So it doesn't get the exact same release cycle, but they try to make it pretty close, because the main audience that uses NX are Angular developers, even though they also support a lot NX website you're going to see that they have integrations with a lot of other tools not just Angular but still most of the developers that are using it are using it for Angular. So you can use it for React too, you can use it just for Node packages but yeah mostly Angular developers so they try to keep things connected.
Subrat_Mishra:
Yeah, I think if they are not updating also, so might be angular suppose angular 16 comes in and uh, and next might not be updated in a month, but they will update it obviously after maybe two months and, and you will get all the, all the feature of angular 16 just after two months of release. I'm just saying
Lucas_Paganini:
Exactly.
Subrat_Mishra:
a timeline just to. Yeah. So I think, uh, one of the feature we are discussing in one of our podcasts. That's why it got to my question that in that we discussed that this feature will not be available in annex because. And it is not updated yet to the newer version. But we are just like, as in the podcast, we are discussing about some experimentation feature or some pretty new feature which we just released or will going to be released in Angular. So that will not be a problem to use annex. So it will be available in a month or some weeks.
Charles Max_Wood:
Cool. Well, we're starting to run out of time.
Subrat_Mishra:
I'm going to be talking about the
Charles Max_Wood:
This was really great and I picked up
Subrat_Mishra:
things that I've been doing
Charles Max_Wood:
a lot of tips.
Subrat_Mishra:
and I'm going to be talking about
Charles Max_Wood:
But yeah, I have a hard stop
Subrat_Mishra:
the things that I've been doing
Charles Max_Wood:
because I'm doing the book club right after this.
Subrat_Mishra:
and I'm going to be talking about
Charles Max_Wood:
So I'm gonna go ahead and push
Subrat_Mishra:
the things that I've been doing
Charles Max_Wood:
us into the self promo and picks.
Subrat_Mishra:
and I'm going to be talking about
Charles Max_Wood:
But if any
Subrat_Mishra:
the things that I've been doing
Charles Max_Wood:
of you listeners have more tips on
Subrat_Mishra:
and I'm going to be talking about
Charles Max_Wood:
the tooling you use in
Subrat_Mishra:
the things that I've been doing
Charles Max_Wood:
your workflows and things like that,
Subrat_Mishra:
and I'm going to be talking about
Charles Max_Wood:
we didn't even get into like CICD
Subrat_Mishra:
the things that I've been doing
Charles Max_Wood:
or deployments or anything like that
Subrat_Mishra:
and I'm going to be talking about
Charles Max_Wood:
too far. So
Subrat_Mishra:
the things that I've been doing
Charles Max_Wood:
I'd love to dive into more of that as well. But Yeah, let's do the self promo and the pics and I'm sorry to cut it off a little bit abruptly, but that's kind of where we're at. So Subrat, what are you working on that people should know about?
Subrat_Mishra:
Yeah, I am currently working on the creating creating my videos. So I think currently I finished up the standalone component series. It's not finished. recording for for video of that and that is already out So please go ahead and check that one as well as I think I have told but haven't started yet So I am planning to start a video podcast To show people that how develop development Arise our development Kingdom each so how people are really thinking of development is not just the always doing the trending things are always doing. So I saw a lot of university students. So they have those mindset like always to the trendy things always. But that's not the actual actual scenario what the industry runs on. So just trying to do that. This will be the one of the aspect of the podcast. So please feel free to reach out to me if you want to be part of a podcast or or if you are a developer in some company.
Charles Max_Wood:
Awesome. Lucas, what are you working on? People should know about.
Lucas_Paganini:
case is the same as every other week so I'm still hammering on the web animation scores. I am publishing a lot of exercises on YouTube for free so I already published two videos. They are extremely in-depth like I'm not making many cuts from them. The first one was like almost 50 minutes long so pretty in-depth and like I just get one motion design and I coded from scratch using no libraries, just native HTML, CSS, and JavaScript, and I explain everything that I'm doing as I am doing it. So this is available for free on YouTube. You just gotta go to my channel, Lucas Paganini on YouTube, but if you want a more structured, step-by-step approach where I actually teach you the concepts behind web animations, and then you can learn not just... how I did a particular animation, but you can learn the technologies and then you can do whatever animation you want, then you might want to consider my Web Animations course, which currently has an open waiting list. So you can just go to lucaspaganini.com slash webanimations and join the waiting list to guarantee a huge discount when the course officially launches.
Charles Max_Wood:
Awesome. All right, I'm gonna throw out a few things that I'm working on. The big things that I'm working on specifically this week is I am working on getting more episodes up for Catapult Your Coding Career, which is podcast about getting ahead in your job, learning what you need to learn, not being stuck. All of the things that I've been coaching people on as far as how to be successful. in your programming career and in your life. I also have set up for Top End Devs members the meetups for February. I'm also just going to point out that I changed the times mostly because I've been talking to people in Europe. It seems like a lot of the folks I'm talking to are in Europe and European time zones. And so I've changed the recording times or the times for the workshops. So the regular workshops are going to be at 9 a.m. Mountain time. And that's a, we're GMT minus seven right now, uh, while we're Mountain Standard Time. So what that means is if you're a GMT, uh, that puts you at what? Uh, five or six in the evening. So it makes it doable. If you're in the U S it means that you might have to take a break from work for an hour to participate. But these are all going to be things that are going to help you in your job and help you also be a better employee. So I'm just going to go through the list real quick. We have the book club. We're reading Docker Deep Dive right now. The first book club call is actually right after we record this. So you missed it. Sorry. But the chapters are actually pretty approachable, so you should be able to catch up pretty quickly. Next week, we're going to talk about how to negotiate a raise. That's on February 7th. And by the way, these are recorded so you can get access to them after the fact if you sign up for a membership. Then we're talking about installing Docker and the big picture out of Docker Deep Dive on the 8th. And then the Career Freedom Mastermind where you just come and ask questions about your career. So if you're stuck, if you're struggling with something, if you're trying to figure out what to do next in your career, we're going to do that. February 14th is how to grow from junior developer to senior developer. book clubs every week. Uh, we're also going to do visual studio tips and tricks on February 16th, uh, how to build a software course on February 21st, how to go freelance on February 23rd, how to set up your YouTube channel on February 28th. And then we're going to, you know, that, that gets us all the way through February. So if you want to join, go ahead. Um, and I'm looking forward to that. And then, yeah, the other thing is I'm working on those series, right? So we're going to have the career series tied to catapult your coding career. We're gonna have the VS Code series. I'm working on the JavaScript series, the Docker series. And there was one other one that I was working on and I can't remember what it was, but. Oh yeah, it was the GitHub, like GitHub code spaces and stuff, getting into how all that works so that you can use the tools that are provided for free or whatever on GitHub. So anyway, looking forward to diving into that. Also the VS Code. series. So my plan is just to record a bunch of those videos, you know, a month's worth of videos every week for one of those courses and that way I can stay up on them since there are four of them. So anyway, they'll be launching throughout the month. So if you're looking for more than that, let me know if you want to help us run some of the meetups and workshops and things like that. Also let me know. I'm willing to trade help for coaching. So... Anyway, that's pretty much what I'm working on. Lucas, what are your picks?
Lucas_Paganini:
My pick is going to be a bag. So it's called a Tac bag, and it's from Peak Design. I am putting that on the camera for those of you that are on YouTube, but unfortunately for Chuck and Subred, I had a problem with my webcam, so they're not seeing it. But if you just Google Peak Design
Charles Max_Wood:
It's beautiful.
Lucas_Paganini:
Tac bag, it is beautiful. It is so functional. Like I can fit... all my tech stuff in there and I'm not going to say that there's still space left because there's not it's completely packed but I can just put that in my backpack and it's just so easy to move things around so I have all my cables the charger for my computer my wireless mouse my external trackpad the only thing that I couldn't fit is my keyboard but I think that's fair. Other than that every tech thing that I have like the charger for my phone, my hub, my usb-c hub, everything just goes inside this bag and it's so easy to move things around. So pick design, tech bag.
Charles Max_Wood:
Nice. Subra, what are your picks?
Subrat_Mishra:
Yeah, sorry, I was on mute. So my pick will be the like this pen tablet. So if you don't have a iPad or a tablet with a styler, so this is pretty helpful to explain something or to draw something in your machine. It makes sense that how bigger you can buy this. So I think this is 18 inch or something. If you can buy a bigger one, it will be good to. So the scaling will be lesser. So for me, like the 24 inch turns down to 18. So, but it's quite helpful to explain something instead of drawing with the mouse, which is always, always weird. Like a, with the styler, you can, you can draw it pretty, pretty easily. So I think I am using a Wacom pen tablet, but any, any pen tablet can be good for the scenarios.
Charles Max_Wood:
I like it. I might have to look into that. Alright, I'm going to throw in a bunch of picks here. So the first pick that I have is a board game. It's called Sushi Go Party. And Sushi Go Party is, I think it's up to 8 players. We usually play it for 4 players. And basically what you do is it tells you how to put the decks together depending on how many players you have, but you have different kinds of entrees. So you have like the, the Nagiri, you have a miso soup and different things. And each type of food is scored differently. Right. And so what you're trying to do is you're trying to get the highest score possible over three rounds to win. Um, and so what you do is you put the deck together, like it says, you deal out the cards, um, and then each turn you take a card out of your hand. you put it face down in front of you and pass the deck to the left. And then everybody flips their cards over at the same time, and then you do it again until the hand, you know, all the cards are placed face up, and then you score your hand. So some of the cards are, this card's worth two points, this card's worth one point, this card's worth three points. Those are kind of the basic nigiri cards, but you might have different sushi rolls. that score three of these are 10 points or two of these are seven points or whoever has the most of these get so many points or you know anyway they all score a little bit differently you can I can't remember the spoon I think let you it's basically a placeholder and you can put two cards down and put the spoon back in your hand right and so as you kind of get Further and further along, you know, you're going to build up this hand. The desserts are all scored at the end. And so if you keep a dessert, you just set it aside. It doesn't get scored on that round, but at the end of the game, you get points for having more than anybody else or for having more varieties than anyone else or, you know, things like that. And so anyway, it's a pretty fun game. It goes pretty fast. It's probably a 20, 30 minute game. Um, it's simple enough to where, uh, younger kids can play it now. Keeping track of things over the longer term might be a little bit tricky for younger kids, but I think any of my kids could play at minus 7. So, yeah, that's effectively how that all kind of works out, how that comes together. So, yeah, I like it. Like I said, it's weighted at 1.3. So, I'm really, really digging it. A few other things that I'm just going to shout out about. So, one of them is, as I've mentioned I think before, that I'm training for triathlons. Um, and one of the things that I found is having a Facebook group that is active and can answer my questions has been super helpful, so super helpful. And so I'm going to pick, uh, I joined Tridot and I think I mentioned that before, um, but their Facebook community for their, um, for people who are using their system has been awesome. And so like I asked questions, Hey, I'm having this problem with my training. And you know, people jumped in and helped me figure it out. Right. Um, so I'm, I'm going to pick that if you're looking for a community to help you get ahead in some area, um, some of the Facebook groups out there are really great. So, um, I'm going to pick the Tridot, uh, Facebook community, um, and then a few other things, and this is just something that I picked up on, uh, Amazon. I picked up some, some more equipment. Cause of course, you know, that's what I have to spend my money on these days. Um, And so I'm just going to pick some of that stuff because, um, I kind of needed it. So one is, is I got a bike computer. Um, and basically it keeps track of your pace and your speed. Um, now I've been doing indoor training on my, on my trainer, cause it's below freezing outside. And so this'll, this'll help me know how far I went. Right. So then I can start, uh, keeping track of, um, how much work I did instead of just going for an hour and knowing that I rode my bike for an hour. And it will connect to my other workout equipment and actually just automatically upload. The one I got was the Psych Plus bike computer. I didn't want anything too expensive. This one was $70. And so I'm excited about that. I'm excited to give it a try. The other one that I picked up was I picked up some bone conduction headphones. I actually have a pair, but I wanted something that was waterproof so that I could swim with them. So I could listen to music and stuff. And so I got the Gogolin. Anyway, I really like the bone conduction headphones. The other thing is, is that a lot of the races, the triathlons, they will not allow you to race with headphones on. But a lot of times they will allow you to race with bone conduction headphones on because you can still hear what's going on around you because you don't have something over in your ear. And then the last pick I have, and this was another thing that the group told me about, my hands would get freezing cold when I'd go ride my bike if it was cold at all because of the wind. And so they recommended that I pick up some motorcycle gloves. And those are flexible enough, kind of like running gloves for you to use, but yeah, at the same time, they'll keep your hands warm. Anyway, those are my picks. I am over time, so I'm gonna wrap this up. Thanks for coming guys, and thanks for sharing. And until next time folks, Max out.
Lucas_Paganini:
Thank
Subrat_Mishra:
Bye
Lucas_Paganini:
you.
Subrat_Mishra:
bye.
Angular Setup And Workflow - AiA 370
0:00
Playback Speed: