There is a ton of material on what you need to learn to start making your own websites. But, here I want to share the important pointers that you should probably know before starting your journey as a front-end developer.
Internet Explorer (IE), leading to the well-known
IE dominated the browser war till the early 2000s and the client-side scripting was stagnant during this period. But all this changed in 2004 when Netscape successor
Just In Time Compilation (JIT) and
Fast forward to today
Frameworks & Libraries make your life easy
Then you have UI Component libraries which give you pre-defined components with custom styling options. With UI frameworks, you can save the important time of creating a theme for your app and defining that perfect-looking button by simply importing a
Button component from that library. Some of the popular UI libraries that you can try are Element-UI, React-Strap & Material-UI.
Lastly, a CSS library like Bootstrap gives you predefined CSS classes. If you like to get your hands dirty and write the event handlers for your Element Nodes, then using a CSS library with your app components gives you more extensibility and control over your components. This does not mean that UI Components make your life hell. This is about your choice and ease of development.
Let me know what are your go-to frameworks & libraries for front-end development in the comments below.
Github is your new BFF
This is not specific to front-end developers but to miss this would be a crime. Some of you would already have heard about code versioning and must be using Github, bitbucket, or some other versioning tool.
Those of you who have not heard of it, think of it as a place where you can keep backups of your entire codebase. Everyone has lost some file or other to corrupted drives or viruses. You can make copies of most of the data files or images or videos. But to keep multiple backups of your code with every day updates and new requirements coming in can be a bit challenging right? Github solves that. You can update any small change and Github will keep a track of all the changes for you.
At some point in app development, you come across a situation where you feel that the problem you solved in the last 5 days could have been tackled better with a different approach, but you want to keep the current approach to compare and analyze. No problem. You can create a new version from the last change you saved on Github before implementing this functionality. In this version implement it with the second approach. Later you can compare the two versions and analyze them.
All these things are still something that you can manage somehow, but the biggest challenge I had with Front-end development was testing my web app on my phone or showing it to someone else because I had very limited knowledge about hosting applications. I wanted to host my app with the least effort possible and then I heard that Github allows you to host a web application on their server for absolutely FREE. This feature is called
Github Pages and can be found in the setting tab of a repository. Amazing right? Yes, but there's a catch! You can not create a server with Github Pages. So basically any standard front-end application which you can otherwise run in a browser locally without having to create a server can be deployed on Github Pages. And to put a cherry on top - you can give a custom domain name to your Github Page avoiding all the hassle of deploying your application on Cloud Servers.
That's not it at all. Github gives you a lot of features so be sure to check them out with time
Improving the development process with SDLC.
SDLC (Software Development Life Cycle) is a process followed by industries to develop software in a planned and systematic matter thereby ensuring a high-quality product in a cost-effective manner. There are different development models such as
By following SDLC
- You lay down the specific and elaborate feature set that you want in your software.
- You decide the target customer/user types for your app and type explicit features.
- You make design templates and wireframe your entire application.
- You estimate the development time period and plan other necessary things.
- Once all the things are done, only then you move to development by following a development model that best suits the team and product requirements.
While this is not a detailed dive into SDLC, but I have tried to give you a basic understanding of what the product management process looks like before development. Be sure to check out more details on specific SDLC steps and how they impact software development.
From my experience, this is a very helpful process and it might look time-consuming at first but it speeds up development because you're not pausing development to think about what the design should look like or what other features you can add to a particular screen.
I know some of you might think that being a front-end developer you shouldn't care about this since it is your Project Manager's job to have specific requirements for you. And, if you're a part of any medium-sized or larger company you might not be a part of this process initially, but always remember The true growth of a developer comes not from following specific requirements but from writing them.
This is the one thing I have seen a lot of people shy away from. If it's working fine on my system then it will work on everyone's, after all, it's a web application. Well sorry to be the bearer of bad news folks, but this is not the case at all. And I have learned it the hard way. I was one of these people and for a long time, my apps just wouldn't work the same on iOS.
Did you know the responsive view in dev tools of your browser just renders the same website on a different viewport? I always relied on it for testing my app on different mobile devices, until recently I discovered this app called
LT Browser by Lambdatest. You check your app on multiple configuration devices and it gives you accurate results as one would get on a real device.
LT Browser gives you a bunch of functionalities too like taking screenshots/video recordings of your interactions and save them for future reference. You can use these media items to track issues/bugs in your app by integrating issue tracking services like Github, Asana, etc. You can even check your app on two devices parallelly giving you the ability to see how your app's behavior differs on different devices. And the plus point for a beginner is that Lambdatest just announced that they're going to give most of the functionalities of the LT Browser app for FREE.
Check out this comparison on an old game I created in React. I tested it on a laptop and thought it would look good on phone as well. Little did I know, the UI was breaking on most of the phones.
These are the top 5 things I have picked up on this small journey as a front-end developer so far that I wish I had known at the beginning of my journey. If you think there are more things that you should have known before you started as a front-end developer, let me know in the comments below.