THESE RESOURCES SIMPLIFY FRONT-END DEVELOPMENT
Front-end development is nuance work. It is daunting at times, and sometimes requiring hours spent mulling over the most miniscule of details. Being a front-end developer rounds up to, more or less, working in an ever-changing landscape of technologies, benchmarks and libraries. Standards like EMCAScript 2015 or ES6, Javascript libraries like Kuber and JQuery and frameworks like Google’s Angular, React, Preact and Vue.JS are a glimpse of the dynamic front-end development landscape.
Being proactive before, during and after a project, mitigates some of the hurdles of front-end development. As a new web-developer, I’ve learned to incorporate these steps into my process to simplify my workload.
- Planning
If you are a developer — front-end or back-end web developer, a full-stack developer, a software developer, or a mobile developer — then you understand that it is important to create a project plan before you start working on a project.
A well written project plan makes all the difference between a successful project and an unsuccessful one. The plan does not need to be complex or detailed. Addressing such key issues as the ones noted below should be sufficient:
- Define the scope of your project.
- Address designer and client expectations regarding deliverables, this can include management and maintenance for the site for web administrators.
- Create a content survey that identifies and includes a comprehensive list of all contents for use in the project. The list may be ranked in the order of importance, to give a greater sense of how you structure content within your design. An example of the types of content to include are media content like images, logos, and videos and style content like fonts, and colors.
- Develop a content strategy that includes a wireframe, site map or possible features — buttons, pop-ups and forms, etc — that the site might need. This is not a blueprint or design mockup.
- And last but not least, you should include concrete due dates or a deadline. Remember you can always go back and add features or content to a site or project. Follow an agile development lifecycle, deploy a functioning version of the project first, then follow-up with any improvements, updates, or patches required.
A project plan is a vital failsafe for a developer, something to fall back on when you hit a wall or feel lackluster.
2) Design Project
As a new developer, I often overlook or negate the project design phase of the development process. Mostly, because I substitute designing with looking for sites to model or use as template for my project and designing based on that. Do not do this. Design a blueprint of your project with the project scope in mind. Include the content you gathered in the planning phase while keeping your deadlines in mind.
You can develop a blueprint of your intended website — or any project really — with any of the following methods:
- Sketch — You’ve got it, developing a sketch is as simple as putting pen to paper. The best part being, you don’t have to be a trained graphic designer for this. A ruler for clean lines and colorful markers that won’t bleed through your paper, like watercolors can yield well refined sketches.
- Style Tiles — Style Tiles is a great resource for web developers. This open design kit sits between a Mood Board and a full mockup. It allows the designer to model the site aesthetic by enabling visual representations of the site’s interface elements like fonts, colors and images sans layout.
- JustInMind — Justinmind is a mobile and website development platform used for UI prototyping and wireframing. Justinmind enables developers to create working design mockups of a project and simulate functionality.
- Site Assets –Websites like Flat Icons, Graphic Burger, Death to the Stock Photo, Creative Bloq, Google Fonts and Behance Free Fonts, are asset sites that offer developers such things as images, fonts, and icons for use.
3) Develop Standards
Developing standards about code readability and scalability, agreeing on rules like file/document naming and saving conventions, and assessing individual and team skill sets can help the development process by mitigating unnecessary confusions down the line. For example, a front-end developer working on an eCommerce site may not have all the skills required to put together site functionalities like database integration. In this case, the developer can consult and bring an outside developer to the project to render aid or incorporating an API to handle the function. On the other hand, some developers choose to learn a new skill.
4) Use a code reviewer
If you are writing code, you are going to inevitably make an error at some point. In fact, a majority of mistakes result from innovative experimentation or exploring new features. After all, learning comes from breaking things and learning how to fix them. Fortunately, most browsers come with bug testing tools built right in. Likewise, most editors including features such as color coding, troubleshooting features and downloadable extensions for debugging.
In addition to this, code reviewers like the W3C’s Markup Validation Service, JSLint, JSHint and Minify are an excellent resource for catching pesky errors, bugs and some even format your code with proper indentations and line breaks. These code validation and delinter services are a free, quick and convenient way to make sure you’re following all the rules and standards and put the finishing touches on your project before deployment.
5) Use GitHub and Test
Using Git and GitHub for version control saves time, simplifies collaboration with other developers and deployment. Having GitHub manage different versions of your code makes future edits and scalability easier as well.
