Workflow is an integral part of our day to day life. It is important to have a good workflow and I am going to talk about how we can increase the efficiency of our front end development workflow.
1. IDE:
For the web developers, it’s important to have a good IDE which helps us in writing code faster and cleaner. As a web developer, we can choose any editor like Sublime text, Atom or Brackets which are light weighted and provide us with some good plugins like autoprefixer, colorpicker etc.
2. Emmet:
Emmet is a plugin that integrates with many text editors like sublime text, brackets, visual studio code etc. Emmet also provides support for other languages like HTML, XML, XSL etc. but we will be talking about emmet in context of CSS only. Emmet provides you with snippets that can be used to write code faster using abbreviations for writing code for elements like divs, p tags and ul tags. For example – div
If you’re a product manager, front-end developer, or a designer working on the web, you’ve probably found yourself in a situation where the design of your webpage is finalized, but the implementation takes longer than expected.
Front-end development can be a long and tedious process. The constant battle between your design tool and your code editor can distract you from the actual task at hand: ensuring that your website works as expected across different devices, browsers and platforms. In order to minimize distractions and save time during this process, it helps to have a set of tools to help organize and standardize your workflow. Here are some tools that we use here at Pear Deck:
1. Sketch
2. Zeplin
3. BrowserSync
4. SASS
5. Grunt
6. Jasmine
7. JQuery
8. Bootstrap
9. Atom
10. Python & Django
Today’s developers are required to be more efficient than ever before. There’s no time to waste on repetitive tasks when you’ve got a project deadline looming over your head. Luckily, there are many tools out there that can help speed up the process of front-end development. Here are my top 10 favorite tools that I use to streamline my workflow:
1. LiveReload
I’m a big fan of LiveReload. It monitors your changes on HTML, CSS, and Javascript files and automatically refreshes the browser for you. This means that you don’t have to manually refresh the browser every time you make a change in your code; just save and LiveReload does the rest of the work for you!
2. Codekit
Codekit is a build tool that can compile SASS (syntactically awesome stylesheets) into CSS, minify Javascript, add vendor prefixes to CSS3 properties and much more. It also has built-in support for LiveReload so you don’t even need to install it separately!
3. Grunt
Grunt is a task-based command line build tool for JavaScript projects. It is similar to Codekit in that it can automate many common front-end tasks such
1. Use a task runner.
2. Optimize your workflow with file watchers.
3. Integrate your build tools with your text editor.
4. Take advantage of live reloading tools.
5. Leverage command line tools and scripting in your work flow
6. Use static site generators to improve efficiency and maintainability of larger projects.7. Organize your HTML, CSS, and JavaScript for maintainability and scalability8. Automatically optimize images for delivery on the web9. Improve the performance of your website by using a CDN10
1. Write in Markdown
2. Git workflow
3. Lightweight Code Editors
4. Use a Package Manager
5. Concise Documentation
6. Use the Command Line Interface
7. Automation
8. Preprocessors and Tools
9. Command Line Utilities for Developers
10. Linting
1. Use the power of your brain
You know a lot more than you think you do. When you’re writing code, keep in mind what your computer is actually doing with each line of JavaScript or CSS. For example, when you use the display: flex property in CSS, you’re instructing your browser to tell the current element to display itself as a flexbox container and to display all its children as flex items.
Knowing what’s happening behind the scenes can help you write better code and avoid using unnecessary hacks.
Everyone knows how inefficient it is to sit in a meeting and be handed a PowerPoint presentation. You are forced to listen to a lecture while you are trying to follow along with the slides, but you can’t see the slides until they are presented on the screen or you have printed them out beforehand.
But what makes this process even more inefficient is that the presenter has to sit through the meeting as well and wait for everyone to catch up before moving on. Peardeck solves this problem by allowing you to control your presentation from your phone or laptop so that it is always immediately in front of you. No more waiting for everyone else!