Front-End Best Practices - Converting Image to HTML

Source code is similar to financial debt. Suppose you want to buy a house to live in. Most people don’t have the financial wherewithal to pay cash for a house, so you take out a mortgage instead. But the mortgage itself is not a great thing to have. It’s a liability. You have to pay interest on your debt every month. In this article we are going to talk about front-end best practices and converting image to HTML (tools/methods).
The code has ongoing costs. You have to understand it, you have to maintain it, you have to adapt it to new goals over time. The more code you have, the larger those ongoing costs will be. It’s in our best interest to have as little source code as possible while still being able to accomplish our business goals.

Essential Clean Code Principles

This article will cover essential clean code principles, different techniques used to organize code, and how to make it more maintainable, scalable, and easier to debug. Quality codes start with basic code styling, expanding to best practices when writing large apps in HTML/CSS with many reusable blocks. We will also discuss naming conventions to create greater implicit readability as well as third-party frameworks and their best practices.
By the time you are done reading this, you should have a good understanding of the basics of quality code and how to make your HTML and CSS code easier to extend and manage.

Code Styling

Let’s start with the code styling essentials and the basics of good HTML and CSS code, such as naming conventions, W3C validity, file structure, and etc. Always try to be mindful of the structure from day one. If you are going to develop a big app, then you need to take care of the file structure. Use validators to check your code: always try to use HTML and CSS validators. Also, use alternative text on <img> tags for clean code principles validity for this attribute can play a vital role for

• SEO
• Search engines
• Web crawlers 
• Screen readers, etc.

For names, it is good to use kebab-case (spinal-case) and not use camelCase, or under_score. Use under_score only when using BEM, though if you are using Bootstrap, it is better to keep consistent and go with - as a delimiter.
Meaningful names can be understood by anyone, so you can make it up by keeping them as short as possible without harming the main idea. The codes will be more readable with the help of common names, instead of writing content specific names. Don’t write type attributes for stylesheets and script in HTML5, for they are not required with HTML5, but are required by W3C standards in HTML4/XHTML. 

Specific Classes

Use specific classes only when necessary. Keep the CSS selector more specific and select the elements you need; try not to mention their parents if not required. In this way, it will allow the code to render faster and remove any managing obstacles in the future. While applying a class to the targeted element may create more code within HTML, it will allow the code to render faster and will remove any managing obstacles. Add a class to the parent element if you want to give another style to the same block. If you need to use the same block but with different styling, try to keep the HTML as untouched as possible. Just add one class to the parent element and apply all new stylings to the children of that class in CSS.

Border-Bottom in CSS

Don’t write "border-bottom" in CSS if you can add an "hr" tag. Use the "hr" tag instead of writing a new selector and adding border styles in CSS. It makes the code more markup-based, and that’s what we are going for. Also note: Drop units from zero values. So adding the unit is unnecessary and it provides no additional value. There is no difference between 0px, 0em, 0%, or any other zero-value. The units are not required and important, as long as the value is still zero.

A > B Selector

It is very helpful to use the A > B selector, which applies rules only to direct child(ren), in that case you will not have to reset stylings of all other children that don’t need the styling. For instance, it can also be very useful when coding nested menus. You will not need to redefine submenu stylings.

How to Write Clean HTML

Moving on to HTML, the priority will be to ensure a robust and easy to maintain front-end. Try to have a front-end that is as markup-based as possible. Make your front-end code markup-based instead of writing too much CSS. This will help search engines and make your code more readable, user experience, as well as potentially enhancing search rankings. Try not to use unnecessary wrapper elements in HTML. Having tons of <div> and <span> elements are not trendy in modern development.  Keeping things granular and linear enables you to achieve minimal code. Do not use any custom colors or font sizes (if the color or font size is not in the framework, just add your atomic classes). Atomic classes are simple, single-purpose units of styling. Much like inline styles, Atomic styles only apply a single style declaration and keep granular and atomic classes, using them only when necessary. In this way your front-end will become more markup-based as a result.
The new tags give you more expressive freedom and to standardize common elements, which improves the automated processing of documents. Here is a solid list of all elements.

Expanding the front-end sphere into the practice, we will tell a bit about how we create Fronty's source codes, as well as its image to HTML conversion process.
The process of implementing a client-side software is based on Artificial Intelligence (AI) generating codes from a mockup. Our AI detects the different types of sections on the image (e.g. navbar, header, footer). Besides section is detects almost all kinds of elements and their styles (e.g texts, images). Based on that data creates the main layout of the webpage and generates HTML/CSS code.
The Convolutional and Recurrent Neural Networks and Deep Learning take a screenshot as an input and generate HTML CSS as an output. Most of the AI technologies we’ve implemented and trained are pending to patent, that’s why we can’t dive deep into the details.
The main AI which is equipped with a CNN special network - is able to detect both objects and objects’ styles on the JPG or PNG image. This allows us not to be limited only with Photoshop or Sketch or any design-applications. So any JPG file is accepted - even users can take screenshots of existing websites. Through deep learning methods we leveraged to train an AI with up to 90-92% of accuracy.