10 web development tips & tricks

what's up everybody how's it going so today i am joined by a very special guest this is kyle from web dev simplified a lot of you might know him he's got a really big channel about web development and simplifying it and uh some of you who've watched my channel in the last few months might remember that i made a reaction video to a video that kyle had made where he talked to that thing and why you might not want to work at fang i kind of gave the opposite opinion but either way we recently paired up and decided to do this collaboration we're really excited we'll bring to you today 10 of the most important web development tips or things to know that we've identified but before we jump into that and before i have kyle just kind of introduce himself to you i do want to say that we filmed a really fun video on kyle's channel where he put me to the test he basically quizzed me on all my javascript sort of trivia knowledge and internals of javascript knowledge we just recorded it it was really fun i won't spoil it but go check it out i'll put the link in the description below and in the comments below but so before we jump into the tips kyle do you want to just kind of briefly introduce yourself yeah so just really quickly to introduce myself like clement said i do a web simplified channel that's my channel and i teach mostly web development i do a few kind of advice related topics as well a few lifestyle kind of things you know like soft skills but mostly i'm all about teaching web development and really just simplifying the web making it as easy as possible for people to understand awesome but so with that we're about to share with you our 10 most important tips now the way that we kind of came up with these is we separately came up with five tips and we're gonna share them now for the first time so this is the first time that i'm hearing kyle's tips first time he's hearing mine we'll see if we have redundancy between them i tried to pick five kind of like niche tips uh so hopefully you didn't pick the same ones but if you did then clearly they're important so why don't you start us off with tip number one kyle yeah for me tip number one is definitely going to be to make sure you understand the relationship between the client and the server and how they communicate between each other for me when i was learning web development i kind of didn't really realize this whole client server dynamic and that they were completely separate from one another and that communicating between them went through you know certain protocols so understanding that things like rest apis are going to be really good at this and understanding what code is running on the client and what code is running on the server is really important it's something that most people kind of skip over they just go straight to javascript instead of actually learning this communication between the client and the server i think that's a really good one that's not one of the ones i had but it's a really good one i think it's something that tends to click the first time that you either work at a real company or that you really build out like a full stack project so that's a really good one now my first tip is purely related to the client side although it does help you debug things sometimes on the server side but it's basically being well versed with chrome dev tools chrome dev tools are a really powerful set of tools and uh there are a lot of advanced tools that you can use in chrome devtools things like to see how much memory your your website or your page is using things to like slow down network requests which can be really helpful but also just looking at network requests and seeing the responses that an api is giving you a server is giving you seeing the parameters that you're passing to an api call in the network request tab on the chrome dev tools super useful so that's my my first tip well versed with chrome dev tools i mean that is an amazing tip it's such a good tip that i actually included a very very similar tip on my list which was to make sure that you learn and use your dev tools but not only for debugging your own sites but for going to other sites that you think are cool or have interesting techniques on them and figure out how did they do that actually just yesterday someone on my discord server was listing a really cool image thing that they saw on a website and they were confused how it worked i just was so intrigued by it i went on to that website opened up the dev tools and just kind of played around until i figured out what css they were using how they were actually changing things with javascript to make this work so not only learning the dev tools for your own site but also learning how to use the dev tools to figure out how cool things on other sites happen because the nice thing about client-side code is it's all publicly available for you to view through the dev tools so learning how to use them not only for your own site but other sites is a great tool yeah that's a really good point and like for example one time when i did exactly what you're describing is on the apple website i'm sure that a lot of you have seen that apple has really cool kind of uis to display their things like when you scroll down you see the images kind of change and rotate and all that and it's very interesting to see how they actually do that like you you can notice that oh it's actually a video file that they kind of somehow run through as you scroll down um but yeah great tip so i guess that brings me then to my second tip so my second tip is gonna be to be very wary of edge cases that can happen in your like website and in the the user interactions with your website and to handle these edge cases now specifically here i'm thinking of two things number one error handling you really want to make sure that you handle all possible errors or a lot of possible errors that you can have in your web development code i think that you see a lot of web developers especially when they're starting out who will make for example api calls they'll use like a promise right so an api call dot then and then they do some functionality but they don't put anything in the dot catch what happens if there's an error does your entire page just go blank does it not show anything that's something to always keep in mind and then similarly oftentimes like you'll get a list or an array of entities or elements that you might want to display on a page and react you know you'll like map through the list and render stuff but people will forget to handle the case when the array is empty so what do you do when you don't have a list of users to display on your website or you don't have a list of whatever right you want to handle that empty state and show it you know on the page or display something that's usable to the to the user that that's an awesome tip i mean honestly i find myself running into this all the time where i create the happy path everything's working great and obviously when you're developing you're like always doing the right thing you're never clicking the wrong button in the wrong order so you're like yep it works and then you ship it and everything breaks because people don't do things the way you expect them to and all the edge cases pop up one thing i kind of recommend to help catch edge cases is just do some testing if you write test for your code it makes you think about edge cases so then that way you are always guaranteed to at least think about the edge cases for the code that you're writing and most likely you're going to go back and add in the code to fix those edge cases as you write those different tests now for me my next tip is one that can actually be applied to really anything that you do in life at all and that is when you're trying to learn something teach it to anyone you could teach it to a rubber duck you could teach it to us you know stuffed animal you could teach it to your friends your family anyone it doesn't matter just try to teach what you're learning and it's gonna make it stick so much more i didn't actually realize how powerful this was until i started my own youtube channel where i do a lot of teaching and a lot of learning to teach these things and i realized that by actually going through and teaching things it made me really understand how things work at a really deep level because if you don't understand things at a deep level it's really hard to explain them and teach them so once you get enough of a skill and understand something well enough to start explaining it and teaching it it's really going to solidify it in your mind and make sure that you actually understand something as opposed just to knowing how to write the really base case you actually really understand at a core how it works if you can teach it that's a great tip and i think it applies to basically anything not even just in software engineering but i've felt it firsthand with algo expert you know teaching all these algorithms makes me really understand them at a fundamental level i will say i should probably take this advice and try to teach to someone like the css flexbox or css like layout you know rules because i feel like i always complain about css but if i were to actually sit down for an hour and teach to someone how flexbox works i'm pretty sure i would suddenly like truly internalize it and remember it so great tip now my third tip uh this one might be kind of an obvious one to some but to others it might not be and it has to do with responsiveness these days you always want to make sure that your website is responsive especially for mobile but i think that what some people forget to think about is sometimes like people will disregard mobile and they'll say okay my website won't be used on mobile or it's just not a big priority right now that's fair maybe but there are a lot of other screen sizes apart from just mobile right and so if you're just developing let's say on a macbook pro and you're just used to what looks good on a 13 inch screen you might be forgetting what looks good on a 15 inch screen or on a 12 inch screen or 18 inch right and so if you don't like resize your window or take into account responsiveness you might have a website that looks amazing on your screen but looks really bad or really like janky or sloppy on other screens even simple things like you know the navbar is just like overlapping or spilling on other people's strength screens you got to handle that stuff yeah 100 i think media queries in response to this is really underrated even if you don't go so far as like developing all the way down to mobile and all the way up to large large screen sizes as long as you just do something play around with the dev tools and like change your size of your screen and stuff and just see what happens to your website because most likely you're going to run into these little edge cases and stuff so kind of while we're on while we're on the topic of css my fourth tip is actually to become decent if not good at css you don't have to become great you don't have to become amazing but become good enough that you can create most things in css without too much struggle and then on top of that learn just the most basics of design like a one week design crash course kind of thing i'm not talking become a designer just learn the absolute basics because this is going to set you apart from almost every other developer because most developers let's be honest their sites look terrible they don't really know css they're probably using something like bootstrap or foundation to build out basic ui and if you just go a little bit above and beyond learn css just ten percent better than everyone else and you learn design just one percent better than everyone else your sites are gonna look a hundred times better and it's really gonna set you apart when it comes to interviews when it comes to your actual resume and all this different stuff it's really going to make you look like a great candidate i think that's a great piece of advice and like for all the hate that css gets just kyle is completely on point here a website with that css just looks really bad and also if you know css even just a little bit you will feel so much more empowered because suddenly you won't be that person who's always like how do you center a div right you'll be able to center that div you'll be able to put things aesthetically on the web page so great tip now my tip number four is um kind of a niche one here and it has to do with being comfortable mocking data specifically data that an api might give you so a lot of times at least from my experience you're going to be developing a front end as a web developer and your api will either not be entirely done or it'll be in flux so the back end won't be responding what you expect it to respond or it'll be responding kind of like partial data and so you don't want to be blocked as a front-end developer you might be because it sucks to not have the full data but you can mock the data you can mock api responses and sometimes this is just as simple as going in your javascript code while you're deading and you know hijacking like the promise response or the api call response and you know making it return an object of your liking an object that looks like the entity that you're expecting and there you have it you've got your mocked data you can you know copy it a hundred times if you need a hundred users or something like that and you can then develop your front end without needing the fully fledged back end this is this is an awesome tip and even to take a step further when i'm creating applications i almost always write out my html and css of like a static version of my site first and then i add in all the implementation details and it's kind of the same thing i like blocking out what the site will look like because it makes it so much easier to write out like how the actual integration and interaction is going to work when you have a visual representation of what the static version of the product looks like and i think just mocking in general whether it's like what you said with api request or just the actual ui is really important now my final tip here is by far the most important out of all the tips that i've listed and that's to not skip over the basics so many people they start to learn they spend one week on html they spend two weeks on css then they spend the next like 18 years learning javascript and they just immediately jump to building projects right away and they just skip all of the basics of html css and javascript and go straight into building complex projects and watching tutorials and doing all these things but if you just spend the time it takes a little longer now you're going to spend two weeks on html you're going to spend a month on css now you're going to spend like two months learning the basics of javascript but if you do that you're going to accelerate your learning so much because instead of getting stuck every time you reach a weird bug or edge case that's not covered in the tutorial you're following you're going to know exactly what the problem is if you've learned the basics but if you didn't you're not going to know exactly why this issue is so i really recommend learning the basics because it makes it so much easier to just build whatever you want instead of always relying on tutorials to build what you want that's a great tip and i think you know ironically the boring stuff like just putting a button on a page or putting a list on a page it might seem boring or trivial but i think kyle's right like being able to do those really seamlessly usually involves having done them at a very fundamental level first and it'll just equip you much better for your complex projects in the future now my final tip is a little bit actually kind of related it has to do with with being well-versed with some of the basics or fundamentals of the server side because i think a lot of people who end up going down the the front-end side the web development side who might not even be full stack you know they might really focus on the front end they kind of forget that the back end has its own issues and its own constraints and so sometimes you know they'll complain like why is this api call that's returning a