What up devs? 😄
Hey fellow devs. Here I'm going to list 10 resources that you should use or learn as a web developer. Some will be specific others won't. Let's get into it.
#1 Tailwindcss
Okay, okay, I know most of you are already getting ready to pull your hair out. Utility-first isn't for everyone, and it certainly isn't the only option out there to create good looking websites. Here's the thing though Tailwind allows for the building blocks to be accessible and if needed customizable. Things like CSS variables and theming aren't possible with Tailwind and that's fine. Other pre-processors and frameworks do too much. Simplicity allows for a unique end result, but when everything is laid out for you, *cough* Bootstrap, building a good looking website becomes more difficult than before.
#2 Svelte
For those of you who've never heard of Svelte, Svelte is a JavaScript framework and compiler. It is great for projects of any size. Most tasks can be done using Svelte faster and with a smaller bundle size. Svelte projects have the upside of speed and if your project is aimed to help users that have slow connections Svelte is your guy.
#3 React
I'm sure that, if you haven't been living under a rock for that past few years, you've heard of React. React is probably the most popular JavaScript framework, and the most likely to land you a job. You're wondering
If that's the case why is it third on this list?
The reason is simple, Node.js. Most JS devs use Node.js, and React, since it originally(and still kind of is) only a library for UI development it is built for client-side JavaScript. Most projects use node though and there's too much, like way tooooooo much, set up required to use React on node. All the stuff in the src and public folders aren't necessary for client-side React. For most dev's this is off-putting. That's probably why facebook created the create-react-app npm command, but that still only fixes part of the problem. React devs(like me) usually use Redux and React-Router with our projects. Redux is famous for it's boiler-plate, add that with the insane React setup and
#4 Angular
Many of you devs have been waiting for Angular to come up on the list. Angular is great and probably one of the benefits of using TypeScript. It's problem is pretty much the same as React's. Angular has way too many dependencies and too much set up. I'd probably end up finishing a project in React by the time I finished setting up Angular. At the same time. Unlike React or Vue. Angular is a true framework. What is mean by this is that React and Vue are considered frameworks because with all the React and Vue based libraries, bindings, and dependencies that work well with them they become all rounders, but unlike them Angular is self contained. React and Vue on their own, completely solo, are just JavaScript libraries. They both only major in reusable UI(through props), and state for React. Angular does that and so much more. It attacks the faults of vanilla JS from every direction. So Angular is best friends with boiler-plate but makes up for it with genuine quality. 😂 😂 😄
#5 Any JavaScript Pre-processor
What's a pre-processor? Something like Babel. It turns a type of JavaScript into actual JavaScript. Babel is what's used to interpret JSX on node. Examples are TypeScript, Livescript, CoffeeScript, Babel, etc. Pre-processors help build JavaScript projects by writing JavaScript in a different way. For ruby dev's transitioning into the frontend world CoffeeScript uses many ruby like syntax and logic conventions. LiveScript(which IMHO is terrible) is probably for JS devs who what a different pearl like JavaScript experience. Babel allows for modern JavaScript(like JSX and ES6) to be cross-browser friendly, even for IE(which is the worst by the way).
#6 JQuery
Okay, I think for most seasoned devs the reasoning for JQuery being on this list is obvious. JQuery is really useful. It makes manipulating the DOM a hundred times easier and to use it with other frameworks/compilers/libraries doesn't require any bindings. If you're new to JQuery you're probably wondering whether I've gone insane, I have not. JQuery syntax makes it easy for JavaScript to understand when it's looking at JQuery. Literally any and all JQuery starts in a $ sign and is inside of parenthesis (making it call ASAP). So if I wanted to use JQuery with any other JavaScript framework it can be in the same file all it requires is the standard JQuery separation.
#7 BulmaCSS/Bootstrap 4
Most devs probably don't know BulmaCSS but it's a utility-first CSS framework that's based on flexbox and is honestly amazing. You really should check it out. Bootstrap 4 is probably one of the most useful and well known CSS frameworks and at the same time one of the worst I've ever used. I don't like Bootstrap and because of my bad experience with it I stayed away from utility-first. Bootstrap is probably the most popular alternative to TailwindCSS for utility-first frameworks and most employers look for Bootstrap devs, if that wasn't the case it wouldn't be on this list.
#8 Tooltip JS libraries
Tooltips 😈. They're probably the least useful html global attribute. They're genuinely ugly, and can be replaced by pop ups. With that said there are libraries like popper.js and tippy.js (both supported by Github) that take your tooltips to the next level. Check them out, it will remove the hassle from pop ups.
#9 Vue
Most of you are probably angry at me for putting Vue so close to the end of the list. My reasoning is simple. What Vue provides can be replaced by, at least, 2 of the items above it. Nonetheless Vue does deserve to be here. It's a very well known framework and websites like devdojo use it. Vue makes it easy to create reusable components, with a lovely design. Sounding familiar, that's probably because Svelte, and React offer something similar, the only difference is that Vue doesn't have the speed of Svelte, or the efficiency of React. What Vue does have though is a good build, making it easier not to write bad code. Despite it's faults Vue is popular and being familiar with it isn't tasking like Angular or JQuery.
#10 Figma!!!!!
I know that this isn't really the kind of resource that you're expecting, but let's be for real Figma is awesome. Not using Figma or a tool like it only makes your life more difficult.
That's it Folks!!! If you got this far that's 🤯
P.S. Hope this post doesn't fall under TL;DR
Top comments (0)