10 Tips for Productive Web Development
If you think you are a very busy Web developer & running out of time, do follow the tips below, and it will save you huge time. You will find it extremely useful & productive in your daily work schedule. I have filtered out these points from my past few years’ experience.
Productivity is to do things that you were never able to do before…
1. Google Chrome for debugging your web page
If you are not using the Google Chrome browser yet, this is the time you think about switching your browser for testing & debugging your Websites seriously. Google Chrome comes with an inbuilt set of tools for developers. Just press the F12 keys when any website is open in your chrome browser & you will see a box on the bottom of the screen will pop out. Through this tool, you can Inspect all HTML elements, Look at all Resources used on-site, Check the loading speed of each element on a Web page, and most interestingly, you can use the Console for validating all JS & CSS errors on your web page. Recently they also introduced another feature for testing the mobile compatibility of any website. It’s extremely useful.
Most performed task by me on Google Chrome: right-click anywhere on one page & select “Inspect Element” from the menu, you will find it extremely handy.
2. Use code snippet tools
Tired of finding code into your old projects & copy-pasting it into your current code?
[ Update: March 2022] If you are using VSCode, Sublime Text, or Atom editor, Snippet Generator will help you generate code snippets easily.
If you are not using the above editors, try using Snippet tools like
Emmet, Sparkup, Text expander, Code express
or
Try using online Code Snippet management tools like
Snipplr, Github, Codepen
Since I have been using Sublime text 2 & Sublime text 3, they have become one IDE tool for me. As it contains features like snippet collection, code auto-completion, and zen coding, and the biggest feature is package control which allows installing addons for various purposes. I am planning to write a separate article on it 🙂
3. Take the help of browser extensions for most common tasks
There are several tasks that we need to do all the time we develop a Site.
Like inserting dummy text, picking up color from a web page, measuring different areas on the web page, taking screenshots of the full web page & some other. You can take the help of Browser extensions & it will increase your development speed for sure.
Here are some extensions I use on Google Chrome.
Lorem Ipsum Generator, Color Picker, Screen Capture, Page Ruler
You can try finding similar extensions for your favorable browsers.
4. Take advantage of online CSS3 generators
As CSS3 still requires separate code for separate browsers e.g. border-radius, text-shadow, box-shadow, etc. Some people may think that they could achieve this by storing these codes in the code snippets tool. But using CSS3 generators will give one advantage of watching an immediate preview of your CSS effects. Try using this CSS3 generator & you will understand my point of view. Another modern way to speed up CSS development is to use CSS frameworks like SASS & LESS.
5. Create helper functions
While developing big Web sites or Web applications, we always require some code to run so many times. E.g. to redirect on some page, to send an email, trim the string, calculate days between 2 dates
Most programming languages give support for using Functions. Group your code into the different functions & you can call these functions as helpers anywhere in the code.
6. Use MVC frameworks for standardization
Seriously, using the framework in web development is hard at first. But once you get used to it, you will be playing in it even while developing a big Web Application. Frameworks help in making your Web Project flexible, stable & error-free.
Some of the most used Web development frameworks you should use are jQuery, MooTools, Kohana, Zend, Symfony, CodeIgniter, 960 Grid System
My favorite frameworks are jQuery & Codeigniter.
7. Choose your IDE very carefully
IDE is something you should not keep on changing, so look for all the features of the IDEs you like & compare them, choose one of them & use it forever. Never think of changing it until some extremely better IDEs are released. Some of the most popular free IDEs are Sublime Text 3(my personal favorite), Notepad++, Geany, Eclipse
and Paid one are TextMate, Coda, Dreamweaver
8. Create & use your own set of boilerplates for each project
Whenever you start working on a new project, do you make it from scratch? If the answer is “yes” then I believe that would be 65% more time-consuming. Creating your boilerplate means, you can create a set of files that you always create each time a new project comes. That includes a dummy HTML(or HTML5) code page, a JavaScript with all necessary functions you use on most of your projects, images you use every time, CSS files like reset.css, and a standard CSS file that is applicable on all projects. And also make sure you arrange all these files in their specific folders so that it remains a well-structured package. And whenever any new project you start working on, just use a copy of that package & that would be much much faster for you.
9. Keep your FTP/CPanel details well-arranged
I was having the habit of checking Emails each time I need CPanel or FTP account login details of any website. But later on, I started storing it in a document file like notes.txt or cpanel.txt & which did save a lot of time of searching & opening emails & finding domain/hosting details in it. Now I am storing each detail in a .doc file & put it into a folder called “documents” inside every project. This way we can keep every CPanel & FTP detail arranged. Another alternative is to use Project management tools & store every detail in them.
10. Don’t forget to make improvements
This is the most important tip of all. Even though you keep your productive code well arranged & use it for every project, it is important to keep making updates & improving your code, graphics images, or whatever you develop. Otherwise, you will get used to it with old-style work & not be able to upgrade yourself with the latest tools & technologies.
Hope you like this article. Feel free to suggest your own points in the comments below.