Learning JSON

JSON stands for JavaScript Object Notation, which is a format for sharing data. As the name suggests, JSON is derived from JavaScript. Other languages like PHP, Python, Java, C# and Ruby can use it.

Learning JSON
Photo By: Image by xresch on Pixabay

Why use it?

JSON is readable and light weight. It requires less formatting than XML. JSON’s structure is a key-value pair format that is rendered in curly braces. You can choose to use it in a file (*.json), a string or as an object.

How do I create a JSON object?

  • Use curly braces to define the beginning and ending of the object
  • Put data in key/value pairs
  • Use a colon to separate the key from the value
  • Keys are strings
  • Values can numbers, strings, objects, arrays, booleans or null
  • Use a comma to separate each key/value pair

{
	"name" :  "Isaac",
	"age" : 50,
	"job" : "writer",
	"car" : null
}

Build a simple website with JSON

The key/value pair makes it easy to share data in web applications. You’ll need a language like JavaScript to display the data. The Mozilla Developer Network walks you through a simple example in their tutorial using JSON on a website. You build a one page website that lists 3 superheroes.

Modifying the website

The superhero website is a bit plain without images. I downloaded three images from Pixabay and updated the superhero.json file. I added a key/value pair for each image like “imageUrl”: “images/molecule-man.png”. Then, I modified the JavaScript to display the image.

I tweaked the CSS to put a border on each superhero member to make it look a little more card-like.

Screenshot of JSON Superhero Website

Where can I learn more?

Variable Fonts on the Web

Variable fonts is an OpenType font specification that puts different variations of a typeface into one single file instead of multiple font files for every variation that you may need. With a standard font, your visitors have to download multiple files which leads to more HTTP requests and data to their browsers. With a variable font, the file size may be about the same but you’ll have access to a much wider range of styles than currently available. For example, a font like Roboto has twelve font files which includes twelve variants. The variable font has one file and unlimited variants.

Variable Fonts on the Web
Photo By: Maret Hosemann

Can I Use It?

Not all browsers and operating systems support variable fonts. For example, Linux OSes need to download the latest Linux Freetype version and Macs need to use a Mac High Sierra (10.14) and Mojave.

For non-supporting browsers, you can use CSS Feature Queries to determine if it should load a standard font instead.

Why use Variable Fonts?

You can use a single font file that provides you with a wide range of widths, weights, slants and more. With less font files to download, your visitors don’t have as much to download. With a variable font, you have greater flexibility on how your text displays. You can use a wider variety of font variants to create certain affects that help define your style and voice. With most major browsers supporting this font type, you can start to use them in your next project.

Where can I see Variable Fonts in action?

You can try them out on v-fonts and Axis-Praxis.

Where can I learn more?