Now Sketches Can be Turned to Code Instantly

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

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 24 - 30.08

New and experimental CSS Firefox tools, Node.js' new current version update, deep dive to its internals and many other interest things awaits you
29 August 2019   636

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

In this digest, you will learn how to release custom react component, hook or an effect as an npm Package, learn about the powers of HTML5 storage that allos you to create shopping card and about new experimental CSS tools in Firefox. Also, Node.js v12.9.1 is out.

Guides

  • Creating A Shopping Cart With HTML5 Web Storage

This guide will teach you how to use the HTML Web Storage powers to create a shopping card step-by-step

  • How to Release a Custom React Component, Hook or Effect as an npm Package

Author believes he find a way how to release hook, custom component of React of an Effect as an npm Package in a more easier way than always

Article

  • Faster Image Loading With Embedded Image Previews 

EIP technology described in this post allows us to load preview images during lazy loading using progressive JPEGs, Ajax and HTTP range requests with no additional data transered.

  • Node v12.9.1 (Current)

Small release fixes 2 regressions in the http module

Video

  • New & Experimental CSS Tools in Firefox
     

UX designer at Mozilla Firefox Developer Tools team talks about cool new and even experimental CSS Tools in popular browser

  • A Journey into Node.js Internals

Tamar Twena-Stern spoke about the internals of the one of the most popular JavaScript's runtime environments

Updates

  • monolith

Solution allows to sale any web page into as a single HTML file with enbedded CSS, image, and JavaScript assets all at  a single HTML5 doc

  • radialMenu

Easy to set up (according to the developers) and customizable JS menu

  • Data Table Component

Includes a lot of features, and, according to the developers, is simple, sortable and flexible

  • React Webcam

A component to work with webcams for React