How to organize your Front-end Design workflow
This article is targeted for people who are already into Frontend Web Development and are now looking for tools to make their job a little bit easier than it currently is. If you’re already an experienced Frontend Developer and is using all sorts of fancy magic tricks to save your day, spare this article for the beginners.
So, there’s a key question to ask here. Is your workflow organized enough to cater the needs of a large scale website? Maybe, as of now, your website isn’t that big and managing the code doesn’t trouble you. But let’s just say, your site really has that potential of grabbing a lot of traffic overnight. What will happen in that case? Is your workflow organized enough to scale to it? If the answer to that question is no. Read on.
1. Organizing directories and files
This is probably the first step you need to take to organize your website’s code. There are already some popular boilerplates available to help you understand what structure to adapt and get started with a modern website. The one that is most popular and I’d strongly recommend is HTML5 Boilerplate. The reason these are important and relevant because these boilerplates are based on collective knowledge. So most of the awesome stuff, like CSS Normalization, Helpers, Media Queries and Print styles are there for the taking. Initializr allows you to customize a copy of H5BP and download just the files you need. If your website isn’t dealing with any sort of dynamic data, the least you can do is use a boilerplate that brings speed and stability to your development process.
2. Automate your tasks
I use Grunt all the time. I can’t imagine developing any website or web app without it. The reason being that it can automate so many tasks for me, that otherwise I would have to do on my own. Its like a robot butler available every time you sit and code your Frontend stuff. It can minify CSS and JS files on the go, along with compressing images and running background validations with JSLint. I also usePostCSS Autoprefixer to add vendor prefixes to CSS rules, which is really handy.
Although there’s a good alternative to Grunt available, called Gulp. I chose to go with Grunt, because it has been around longer and has a larger user base than Gulp. However, this doesn’t imply that Gulp is number two, it’s just entirely up to your taste. I just happen to like Grunt more than Gulp. A very good verdict on Gulp vs. Grunt can be found here.
3. Start using Source Control
Source control, also known as version control can greatly ease up your development life. If you’re still FTPing your code to your site to make the changes come alive, then you’re probably living in a stone-age era. I use Azure for most of my hosting needs, and the one thing I absolutely love about it, is it’s outstanding integration with version control systems such as Git. I am one of those people who can’t live without those 2 groundbreaking technologies created by Sir Torvalds, i.e. Linux and Git.
Git is the most popular VCS. It’s because of it’s stability, design and the way it organizes things so easily. In the beginning, Git might seem like a lot to swallow as to why it does what it does, but then it eventually grows on your workflow. You gradually start to get a hold on things in Git and then it becomes your style of working. There’s a lot of perks of using Git. Code tracking, version control, staging, multiple workflows just to name a few.
Tip: Signup for Bitbucket which offers unlimited free private repositories to its users. If you’ve no problem in open-sourcing your project, use Github to showcase your work, because it’s more likely to get more traction than Bitbucket.
4. Use CSS Preprocessors for heaven’s sake!
Just pick one, Sass, LESS or Stylus, but for your mental well being, just pick one. It isn’t absolutely necessary to use JavaScript or HTML preprocessors for smaller projects, but CSS preprocessors are a must if you’re building for the modern web. I used to write bare CSS code before switching entirely to Sass. Trust me, I still feel that guilt of not switching to preprocessors earlier. CSS preprocessing can seriously improve your entire workflow and if your CSS is organized and beautiful, you can pretty much scale the website to any heights and that is something I firmly believe. Because CSS is the most fragile thing in web development, and for obvious reasons.
Conclusion
There are a lot more things you can do to organize your workflow, like using tools such as CodeKit (if you’re using Mac) to do similar tasks that Grunt does and beyond. But following these 4 basic steps will give you enough comfort in the long run.
This post originally appeared on Ken, my personal blog.
Original article: https://preeteshjain.com/ken/how-to-organize-frontend-design-workflow
Articles on my Medium profile are added after some days they have been published on Ken. To stay up to date with my articles, bookmark Ken!
If you have any suggestions, please leave them in the comments. I’d really appreciate your constructive remarks.
