Now Sketches Can be Turned to Code Instantly

Sketch2Code by Microsoft allows to turn sketch into HTML code
29 August 2018   1767

The Microsoft Azure team introduced the Sketch2Code Web tool to convert user interface sketches to HTML codes. Service speeds up the process of developing projects, eliminating the need to manually create markup based on the drawing.

Sketch2Code
Sketch2Code

Sketch2Code works with artificial intelligence. The process of converting a picture into code consists of five steps.

  • First the user uploads an image through the website.
  • A custom vision model predicts what HTML elements are present in the image and their location.
  • A handwritten text recognition service reads the text inside the predicted elements.
  • A layout algorithm uses the spatial information from all the bounding boxes of the predicted elements to generate a grid structure that accommodates all.
  • An HTML generation engine uses all these pieces of information to generate an HTML markup code reflecting the result.

All images, results and grouping information are stored in the BLOB storage. The connecting link between all services is Azure Functions. The tool is developed in collaboration with Kabel and Spike Techniques. Details about Sketch2Code are provided in the GitHub documentation.

Frontend News Digest 7 - 13.03

Build a desktop GIF Searcher App with NodeGui, learn why height and width on image is important, Firefox 74 released and more
13 March 2020   452

Greetings! I hope your week went great! Here's new frontend technologies news digest.

Learn about the performance benefits of variable fonts, 7 types of native errors in JS, Bootstrat tree view 4 update and more awaits for you in our newest digest.

Guides

  • Build a Native Desktop GIF Searcher App Using NodeGui

This tutorial will teach you how to install NodeGui (a Qt-driven desktop app library) and use it to build a “meme searcher.”

Articles

  • The performance benefits of Variable Fonts

This post will show you the performance gains you can get when using variable fonts

  • Setting Height And Width On Images Is Important Again

Did you knew that thanks to some recent changes in browsers, it’s now worth setting width and height attributes on your images to prevent layout issues

  • What's New in Mongoose 5.9: SchemaType Default Options and Better Populate Limit

Overview of new features of the newest version of MongoDB object modeling tool 

  • Firefox 74 Released

Learn what changes (and challenges) developers will meet when working with the new version of one of the most popular web browsers

  • 7 Types of Native Errors in JavaScript You Should Know

Great article for the newbies - check the most popular errors in JS programming and how to avoid them

Updates

  • OpenSilver

Open-source reimplementation of Silverlight that runs on current browsers via WebAssembly

  • Bootstrap 4 Tree View

Plugin to build a Treeview with boostrap 4

  • ls-lint

Developers claim it's an "extremely fast" file and directory name linter

  • Node 13.11.0

The newest version of JavaScript runtime environment