What tools frameworks and softwares the web developer need ?

It seems like there is a new language or technology that comes out every day so it can be difficult to stay on top of your web development game it requires constant learning and adapting, and it doesn't matter where you’re at and web development, front end, back end, full-stack, mobile solutions or web apps the constant change is universal so, what technologies should you look out for in 2020?

What tools frameworks and softwares  the web developer need ?

What will web development look like in 2020 ?


It seems like there is a new language or technology that comes out every day so it can be difficult to stay on top of your web development game it requires constant learning and adapting, and it doesn't matter where you’re at and web development, front end, back end, full-stack, mobile solutions or web apps the constant change is universal so, what technologies should you look out for in 2020?


We're going to cover all of the current and popular web development technologies and by no means do you need to learn everything, once you get comfortable with one technology start learning another this guide is going to focus on full-stack development but if your goal is only front-end development or back-end development just pick out the technologies that apply to that job role.


So, if you're just getting started let's check out some tools and software that you're going to need, first you're going to need a code editor and I recommend vs code is free open-source it has great support from the community and great extensions.


Next, you are going to need a web browser I would recommend chrome or Firefox , I prefer chrome. You're going to need a few editor extensions vs code has a lot of extensions and among the top of those that I would recommend our live server and live SaaS compiler, if you're going to be working with SaaS.

The next few are optional so, if your goal is to become a web designer you may want to get familiar with adobe XD or Figma or at the very least something like photoshop or gimp at some point deployment tools are going to be necessary an FTP client and an ssh tool are examples of those and I would also recommend a third-party terminal like git bash especially if you're working from windows.


So, again if you're just starting I will always recommend that you start with HTML and CSS now these are not programming languages HTML is a markup language and CSS is a stylesheet language but these are the building blocks of the web every web page or web app no matter what framework or server-side language you're using ultimately ends up being HTML and CSS, so, you'll need to learn semantic HTML 5 elements basic CSS like positioning, box model flexbox, grid, custom properties you'll need to learn about responsive layouts like media queries rem units and the mobile-first approach and lastly browser dev tools get familiar with them they will help you to troubleshoot issues and see what is being rendered in the browser.

So, after you've created a basic website you're going to want to deploy it somewhere so the traditional approach would be getting a domain name and managed hosting with cPanel and then using an FTP file uploader such as FileZilla to upload the files cPanel provides a ton of functionality and makes it easy to set up a website to set up email addresses and so many other things.

If managed hosting with cPanel is the route you're wanting to take I would recommend web hosting squared, is very affordable and reliable, if you just have a very basic website and you just want to put it up somewhere and you don't care about all the bells and whistles of cPanel you could use static hosting such as netlify or GitHub pages these are free but again they don't come with all the bells and whistles of cPanel.

Next, you're going to want to learn Javascript, I recommend vanilla Javascript just plain Javascript without any frameworks I get this question a lot should I start learning React uses Javascript so if you don't know Javascript then you're going to have a hard time learning React so learn the basics of Javascript datatypes functions conditionals loops learn about manipulating the document object model and events learn about the fetch API and JSON and then all of the es6 and beyond features such as arrow functions, promises, async-await, destructuring and template literals these are all things that you're going to use in React.

There are a few site technologies that you're going to want to learn as well so git and GitHub, git is a version control system, in my opinion, it's the most popular version control system out there are others but the majority of companies use git, it may not always be used alongside GitHub but it is more commonly used with GitHub as its remote repository.


Next, you're going to want to learn some basic command line so learn about npm that notes packet manager, learn about the git command line, and basic navigation how to create files and folders how to navigate the folder structure very basic things don't let the command line scare you.


Next APIs and rest so, learn about how to retrieve data from external sources and lastly sass so sass is a CSS pre-compile and it is literally CSS with superpowers, it makes writing CSS more like a programming language you're able to nest and use mix-ins and functions and it just makes it easier in my opinion to write CSS.


Let us talk about some frameworks and back-end languages so once you have gotten familiar with HTML and CSS and Javascript you could start moving on to some frameworks. For HTML and CSS the most popular framework is bootstrap I do not recommend bootstrap for every project if you just need to quickly prototype a project use bootstrap, it's quick it's easy if you want to have just a very basic website and you don't care that it looks like a bootstrap theme then uses bootstrap, but if you're trying to create a custom website don't use bootstrap you're going to end up fighting with bootstrap more than it's going to help you.

On the front end with Javascript, there are three frameworks that I would recommend and that is angular ,view, and React and I’ll show you in a minute on some charts which ones are more popular in my opinion React is the most popular right now. Angular is kind of fallen away, again, in my opinion, it is very corporate centric it's for very large applications and complex applications it does have its place and by no means are any of these technologies going away and then view is gaining a lot of popularity as well and in my opinion, view is the easiest to learn.


Moving on to back-end technologies back-end languages NodeJS is not a framework but it is based on Javascript so if you already know Javascript node has tons of packages that can expand you can install something like express and create a web server so if you're looking in the backend development and you already know Javascript NodeJS would be the way to go.


The other very popular back end language that I think is taking over is python and when it comes to machine learning and ai python is king now here is a graph of the top languages according to stack overflow questions. I would focus my attention on is number one I would still say Javascript is first and number two I would say is python.


Let's take a look at the top frameworks according to stack overflow questions now I know that jQuery is not a framework and even React is technically not a framework, but I wanted to include this because jQuery, in the beginning, was such a crutch for so many people learning vanilla Javascript is so important before learning a framework you can see the huge decline in the use of jQuery and then we see angular over the past two or three years has remained pretty steady but React has overtaken it we can see view has gained quite a bit of traction as well and it's continuously growing so four frameworks I would recommend React and view.


Let's look at some trends to look out for in 2020 ai and chatbots so ai is widely used to imitate human intelligence and perform simple as well as complex functions like the ability to learn and analyses information, collect data, understand emotions of humans or, to solve complex business challenges and problems.


Ai is everywhere so we need to get used to it it's not going away like I said before python is the king of ai right now, but there are great Javascript libraries as well like TensorFlow and this is something that I’m personally going to be focusing on in 2020.

TOP 18 Python modules you need to know

The next thing would be interactive design and motion UI the big issue here is attention span the average attention span of a human in 2000 was 12 seconds the average attention span of a human now is 8 seconds and the average attention span of a goldfish is 9 seconds.




Let me give you some examples of interactive design and motion UI so curb has a motion UI SaaS library for creating CSS transitions and animations so, we can control the speed, the easing, let's add a bounce to it and we could say scale up, scale down, slide in left, fade-in, spin in hinge, in there are so many things that you can do with this to animate your website.

On dribble here is an example of a dashboard with animation by red comet you can see how this would keep the attention of the user.


The next trend would be progressive web apps are regular web apps that give the user a native app experience, one of the main features is the ability to work offline by using service workers, so, this allows the user to be able to use an app that is not actually installed on their phone it's not taking up in a space but it looks and feels like an app.


The next trend we talked about briefly earlier is a responsive web design as I’m sure you're already aware most people use their mobile devices to browse the internet so, websites have to be responsive.so be sure that you design for the mobile experience first and then scale up to the tablet and desktop your website will even rank higher on google if it's responsive.


Next is mobile app development so we can build native mobile apps without knowing java or swift there are React nativenative script, and ionic. Ionic used to be hybrid only but now they have a native option as well.


Next is a desktop app development with Electron that uses chromium and NodeJS it's cross-platform with support for Windows, Mac and Linux there are a lot of desktop apps today that are built with electron such as the vs code.


Next on the list is GraphQL is a new way of thinking about APIs you can ask only for what you want, and it is easier to write queries very similar to JSON.

Last is typescript is a superset of JavaScript typescript is used in angular and so if you will be learning angular, you are going to learn typescript.


What next well focus on the technology used in your current job or your aspiring job so if your current employer uses angular focus on angular if the company that you're interviewing with uses React focus on React before your interview and then learn other technologies in your spare time if that is even a thing.


I don't have any spare time but if you've gotten comfortable with JavaScript and then you want to learn a little bit of python and your time then do that but stay up-to-date with trends and technology that's the hardest thing to do but remember that learning something new takes time it takes time to get good at something so be patient, take your time, never stop learning and don't give up.


What's Your Reaction?