Categories
Web Developers Software Development

JSON: Who’s that 1 Jason Dev’s talk about all the time?

If you work in Sales or Marketing (or any other department) you might hear developers talking about Jason (JSON). But you never see the guy… How perculiar… Let me enlighten you… meet JSON.

They are not talking about a person. They are talking about JavaScript Object Notation. That’s a format online that became very popular. You might also have heard them talking about a (REST) API. Which I’ll elaborate in a follow-up post.

To quote from Wikipedia:

JavaScript Object Notation (JSON, pronounced /ˈdʒeɪsən/; also /ˈdʒeɪˌsɒn/) is an open-standard file format or data interchange format that uses human-readable text to transmit data objects consisting of attribute–value pairs and array data types (or any other serializable value). It is a very common data format, with a diverse range of applications, such as serving as replacement for XML in AJAX systems

Source: https://en.m.wikipedia.org/wiki/JSON

Well… That’s a lot to grasp for most (non tech savvy) humans. Not for computers though… They love JSON! They understand it. It’s a computer readable format. And because it’s a (open) standard and quite a popular one it’s used in a lot of stuff online (and offline)

But let’s start with the basics… Let’s see what “Jason” looks like:

{
   "name": "JSON not Jason!"
}

This is a simple way to tell a computer that this is an (JavaScript) object. It has a key (name) and a value (JSON not Jason!)

And you can then instruct software on the the computer to do things with it. You can display the value on your blog, send it as a message to one of your friends or tell the computer more about the object.

You might want to add the time and date this message was created you can do that by adding a “createdAt” key with the value of the time we created the message.

{
   "name": "JSON not Jason!",
   "createdAt": "2020-01-10 06:30:00 (+0100)"
}

Because it’s “human readable” (just ignore the curly brackets and quotes) it’s also easy to understand for the humans who can’t understand binary code.

XML ( Extensible Markup Language ) VS JSON

That’s what made it more popular than XML. Which is easily read by computers but very nasty to the eyes if you are looking at it.

I’ll show the previous example in XML…

<?xml version="1.0" encoding="UTF-8"?>
<root>
   <name>JSON not Jason!</name>
   <createdAt>2020-01-10 06:30:00 (+0100)</createdAt>
</root>

I hope you understand why developers love that Jason over XML.

They prefer REST over SOAP…

REST API (JSON datatype)

I will try to explain what a RESTful API is and share my experience of working with REST. I’ll dedicate a whole post about REST API’s in the future since they are essential in the modern era of Sales & Marketing Online.

We will find out what is meant by API, talk about HTTP (The thing you use to browse the web), learn about REST, see how it works, and describe a simple example of a RESTful API architecture design. If your company has a API, you’ll know what you can do with it.

A little bit of background info about JSON REST API’s

API (application programming interface) is a set of rules and mechanisms by which one application or component interacts with the others. The API can return data (from your database for example) that you’ll need for your application in a convenient format (e.g. JSON or XML).

If Mark wants to fetch this article for his blog, he can tell Dave to use the API to fetch it.

GET /articles?include=author HTTP/1.1

HTTP/1.1 200 OK
Content-Type: application/vnd.api+json

{
  "data": [{
    "type": "articles",
    "id": "393",
    "attributes": {
      "title": "Who's that Jason the Devs talk about all the time? JSON!",
      "body": "This is Jason... meet JSON",
      "image": "https:\/\/samauto.nl\/wp-content\/uploads\/2020\/01\/1024px-JSON_vector_logo.svg_.png",
      "created": "2020-01-26T12:12:00.000Z",
      "updated": "2020-01-26T13:37:13.370Z"
    },
    "relationships": {
      "author": {
        "data": {"id": "42", "type": "people"}
      }
    }
  }],
  "included": [
    {
      "type": "people",
      "id": "42",
      "attributes": {
        "name": "Mark",
        "age": 30,
        "gender": "male"
      }
    }
  ]
}

You can then use this data to display them in various places (in a IOS application, Android application, Website, Web application or in a desktop app, all using the same source (the one REST API)

If you want to add a feature, implement it in the central REST API and all clients (apps, websites, ect.) can use it.

Categories
Developers

Dark by default: Dark mode is a stunning invention.

Why does developer Dave hate “Light Mode”? Because light attracts bugs! Dave ❤️ Dark mode.

Dark by Default: at SaMauto we love Dark Themes. That’s why we’ve build this site “Dark-by-Default”

We might add a Black-On-White (Light mode) feature in 2020… Who knows?!?

Dark mode, sometimes called “night mode”

Available in MacOSX.

Light: If you just want the normal setting
Dark: If you are like Dave and prefer Dark Mode all day.
Auto: Light Mode from sunrise to sunset, and dark at night. (Available from Catalina)

See Apple’s support page for more information

iPad OS (IOS)

Also available on iPad.

IOS settings with Dark Mode enabled.

Apps that have Dark Modes

Google Maps has a Dark mode. Twitter has a dark mode. and WhatsApp (by Facebook) is working on it (it’s currently Dec 2019) in Beta.

Why should you use dark mode?

The biggest advantage of dark mode is that it saves energy on devices with OLED or AMOLED displays.
With OLED, each pixel is individually lit. When the background is white, all the pixels are turned on and the display requires more power. When pixels are black or even dark grey, as is the case with dark mode, the display’s power requirements are naturally lowered. Because the black pixels don’t need it to be illuminated it saves energy.

At SaMauto the background is dark by default, so only the pixels displaying text will produce light. Saving you precious battery power, another utility of dark mode we often hear about is that it reduces blue light. Blue light is a high-energy visible light spectrum with the shortest wavelength. But actually we have another mode or setting for that The biggest natural source of blue light for human beings is the Sun, but screens emit amounts of blue light, too.

A modern day problem is that reading on your phone or tablet keeps your body awake, it’s even possible that you’re staying up too late because of your phone, tablet or computer screen.
To prevent that some phones come with a blue light filter. On computers there is a great application called f.lux you can download (it’s free for personal use!).

Dark Admin Themes

You can also build your app or website (like this one) in a full black them. Some popular CSS frameworks (Bootstrap, Metro and Foundation) all make it possible to use a dark theme.

AppSeed has some cool dark admin templates (free & premium)

CSS for printing. Print.css: Save the environment by saving printer ink.

The trouble with a dark background and white text is that if you’ll print it this article in the current form. It’ll take consume massive amounts of black ink. To combat that we’ve added a print CSS stylesheet so that your computer knows that it should flip the colors (usually you print on white paper) and print the text in black.

So be sure to improve the world by ensuring our earthly resources don’t go to waste.

Colors in Dark Mode

Bring some joy in your life, create some color!

White: #FFFFFF; Background: #000000

Background: Light Black: #16161a;

Purple: #7F5AF0;

Red: #CD2653;

Can you spot one of our colors on the 2020 Color Trends list?

See more Color Trends in 2020!