September 13, 2017 6 Common Mistakes to Avoid in UI Prototype Challenges

In UI Prototype, it’s very important to understand how your code will be used later by other developers to create a fully-functional application. There are also a few common coding mistakes to avoid. Here are a few to keep an eye out for when working on a UI Prototype challenge as well as some tips and best practices that can help you submit a professional solution.

1. ALWAYS FOLLOW THE LATEST BEST PRACTICES

It’s better to avoid coding using older HTML standards. Front-end design/development depends heavily on cross-browser compatibility. Older HTML support is not always available in some browsers so you should better follow the latest best practices for the language you’re using.

2. Cross-browser compatibility

On UI Prototype challenges it’s clearly mentioned in the challenge specifications what browsers you need to support and it’s a very common situation when members forget to test on every required browser thus losing important points.

3. Code redundancy

Think before you code 😉 You will need to write a lot of HTML/CSS & JS code so try to avoid duplicate or unnecessary code. Writing duplicate or unnecessary code will make it very hard to maintain your code.

4. Code consistency

You should use the same coding patterns across the whole application. This includes code indentation, nesting, braces, quotes as long as new lines so that code is clear and can be read easily.

5. Don’t forget to write comments

You should write comments where you think it’s required (eg: complicated functions) but.. you should always write your code as if comments didn’t exist. This forces you to write your code in the simplest and most self-documenting way you can come up with.

6. Image compression

Background images as long as icons should be properly compressed for web usage otherwise it will take too long to load the website. It’s also a very good practice to use image sprites for your icons. Those are some of the most important things you should note before you start competing on UI Prototype challenges. Check out few other things that lunarkid pointed out here. Useful links: – https://caniuse.com/ – https://www.themelocation.com/best-html5-practices/ – https://www.w3schools.com/js/js_best_practices.asp This article is part of the 5 Weeks to Learn Topcoder educational series. Want to learn more? Check out the entire series and all the helpful content here.