Articles, Blog

DEV VLOG #1 – 10 Tips for more efficient Web Development

March 13, 2020


Hello guys and welcome to another VLOG! In today’s episode we’re going to speak about tips and processes that will make you better and more efficient Web Developers! So let’s start! No. 1: Apply Code Styling & Linting at your projects. You can achieve this by using prettier and ES or TS lint, depending on your favourite language, Javascript or Typescript. So first step is to install prettier and tslint via YARN or NPM, your favourite dependency manager, I prefer YARN but this is up to you. Second step is to configure our own code styling rules, by placing a .prettierrc and a tslint.json at the root folder of our project. Finally we have to configure the necessary scripts at package.json. Let’s see them running.. Beautiful right? No. 2 is to enforce the code formatting and the linting by introducing precommit hooks. We can do this by installing husky and lint-staged, again with NPM or YARN Then we have to configure the precommit hook and the tasks it has to complete before committing our changes Finally we can try a commit and enjoy the process.. No. 3 is to use EMMET I don’t know if you have heard of EMMET, but it’s a really nice extension that you can install at your favourite editor and it will speed up for you the creation of HTML templates. No. 4 is to make use of Shortcuts & Macros. There are some tasks that you’ll have to do really often every day, during your web development process, like opening a file or doing a global search. And you should use shorcuts for these. For example, I have configured the CMD+SHIFT+O shortcut for opening a file and the CMD+SHIFT+F shortcut for doing a global search. Besides shortcuts, you can also use Macros. Especially in advanced editors like IntelliJ. you can record sequences of shortcuts and save them as Macros. My favourite Macro is the “Clean Save”, which I can enable by pressing CMD+ALT+S and what my editor does under the hood: It will auto-organize the imports of the file, autoformat it and then save it. No.5: Put the commands that you use really often in your .bashrc file. Are there long commands that you have to type often in your terminal? Create an alias instead and put it in the .bashrc file, which is located at the root folder of your user. Take a look at my favourite aliases and create yours.. No.6: Use a clipboard manager and save your favourite code snippets in it. I have been using Paste by Setapp for a long time and I am really satisfied. What a clipboard manager does, is essentially that: Whenever you copy something it saves it in the clipboard history. So it gives you access to your clipboard history of the last few weeks. This is really useful and you can also organise folders with signatures, code snippets, etc. How many times did you have to revisit something that you had copied 1 hour ago and now you have to copy it once again? Not anymore! No.7: Install Octotree! Octotree is a Chrome plugin and this isn’t sponsored at all, it’s just one that I really enjoy using, that can scan your Github repositories and give you an overview of their files, as well as style Github for you, as you wish. No. 8: Create your own SASS/SCSS Library. I am pretty sure that you’ve used something like Bootstrap right? Well, this is my own ‘Bootstrap’ and by modifying some variables like colors, paddings margins and so on I can create new buttons, new input fields and in general new UI components, in a couple of minutes. Why don’t you create yours? No.9: Create starter projects and showcase them on your Github profile. Are you learning something new? Or are you currently building a new project with a brand new framework? Why don’t you create a starter project instead place it at your github profile and clone it from there in order to kickstart many projects like that in a matter of seconds! If you visit my Github profile, you will find all sorts of starter projects from NodeJs, Java to VueJS, Angular etc. Don’t forget to include a README file where you document the development and the deployment process. Last but not least, No.10: Harvest the power of Continuous Integration. Nowadays you will find many tools that offer CI services like AWS Amplify, Netlify, CircleCI and many others. My favourite one is AWS Amplify where you can connect your repo, either it is on Github or Bitbucket and see it under a domain with an SSL key, in less than 5 minutes. Just login to the AWS Console and give it a try. That’s all for now guys, if you liked the video Click thumbs up and subscribe to my channel for more content like that! See you soon!

You Might Also Like

5 Comments

  • Reply TheComicalCanadian March 11, 2020 at 9:55 pm

    great video

  • Reply TheComicalCanadian March 11, 2020 at 9:57 pm

    nice content dude

  • Reply Roger Ribeiro March 12, 2020 at 6:26 pm

    Hi, I'm your follower on instagram, but I don't speak your language. Could you activate the video caption please? Thanks

  • Reply MOHAMED aThLeTiC March 13, 2020 at 1:25 am

    keep it up bro new member her from instagram

  • Reply Dima S. March 13, 2020 at 5:26 am

    Great tip with the own ui library. Because it will also isolate the ui library you depend on, so you can change it more easily in your projects that depend on it. insta:@dima_codes

  • Leave a Reply