Author: Abdullah Yahya

Have you ever needed to make notes on screen like a web page to then share with others. You might first take a screenshot and then edit it in some program or buy an app like TechSmith SnagIt. A simpler option would be to install the Web Paint extension in Chrome. When you click on the extension, it opens this panel

Then, you can type, draw, add arrows, and so on then take a screen capture and share with others, e.g.

Many, if not most, web forms are backed by a database. But what if you just need a simple data store, like a JSON file, and you want to quickly and easily provide users with a user-friendly web form to make updates to the JSON data. JSON Editor takes a JSON Schema and uses it to generate an HTML form.

The generated JSON output can then be used by a templating language like Handlebars for building a web page.

JSON Editor supports many options including the ability to quickly style a form using CSS frameworks like Bootstrap.

For example, the following JSON schema

{
  "type": "object",
  "title": "Car",
  "properties": {
    "make": {
      "type": "string",
      "enum": [
        "Toyota",
        "BMW",
        "Honda",
        "Ford",
        "Chevy",
        "VW"
      ]
    },
    "model": {
      "type": "string"
    },
    "year": {
      "type": "integer",
      "enum": [
        1995,
        1996,
        1997,
        1998,
        1999,
      ],
      "default": 2008
    },
    "safety": {
      "type": "integer",
      "format": "rating",
      "maximum": "5",
      "exclusiveMaximum": false,
      "readonly": false
    }
  }
}

using the Bootstrap 4 CSS framework produces the following web form.

You can see a live demo in the JSON Editor interactive playground.

JSON Schema also supports validation so you can ensure your users are not submitting invalid data. For security reasons, this solution may not be good in a production environment by non-trustworthy people but it could work well in a secure, internal environment among coworkers.

Let’s say you have a website and you’re tired of making constant updates to some portion of oft-changing content, e.g. a conference agenda. It would be nice to offload this tedious work to a content owner who so often makes typos. But this content owner is non-technical and is a visual person. They need a WYSIWYG editor that would allow them to make changes directly on what it is that they want to edit, not directly in a database or something cryptic like a JSON file.

HTML5 supports the contenteditable attribute which makes any element editable. In the screenshot below, on a part of the byline is made editable.

Simple add the attribute “contenteditable=true” to the tag that wraps the text you want to make editable.

<p>Last Edited by <span id="author" contenteditable="true">Monty Shokeen</span>
</p>

When the content owner clicks on the text to editor, a black outline appears making it look like a form field.

The contenteditable attribute can be added to as many HTML elements as you want. Here is a live example showing three different editable fields with changes saved to local storage. Here’s an example showing how you can save the changes in JSON format and post it to a URL endpoint using AJAX or Fetch.

Many web developers are familiar with online editors like TinyCME. If you’ve edited a blog post in WordPress using the classic editor, then you know what I mean.

The problem with this type of editor is it’s too easy to accidentally output garbage HTML. WordPress has switched to offering a block style editor.

If you need to create a similar editor for your web project, editor.js offers inline block-style editing and it outputs clean data in json format.

Here’s a screenshot of example JSON output which can then be used with

This JSON data can then be used with a templating language like Handlebars to build web pages.

Icons make a big difference in the look of a website. When placed beside text links, they make the links stand out. They can be used to replace text links, especially on mobile. They accompany text to make boring, text heavy pages easier to read. But, finding icons or creating them can be difficult. FontAwesome solves this by offering thousands of icons that are easily searchable. If I search for car, here’s what I see.

To use an icon, e.g. of a car, just paste this HTML code.

<script src="https://kit.fontawesome.com/8758af3809.js" crossorigin="anonymous"></script>

<i class="fas fa-car"></i>

Here’s a demo.