Happy to answer any questions you might have. Or simply say hello!

Software Innovation for the Greater Good.

Modern cities already have parts of their infrastructure underground.
Some people live today underground for work or out of necessity. Where are
people living inside the earth, and how will the development of underground cities be in the future?

## Cultural History

As part of our human history, we have always lived in caves. One special example are
the underground cities of Cappadocia in Turkey. There are different theories about
their purpose. Some say they were built as a refuge from invaders, others as a
refuge because of a bad climate.

In the Western culture, underground is still associated with death.
This comes from Greek mythology, where the souls travel after life to the entrance
of Hades, the underworld. In contrast to the underworld is the upper sky, where the gods
enjoy an easy life.

![Hell underground](https://res.cloudinary.com/dxxtt2clx/image/upload/v1692379341/hell_underground_d72231086e.jpg)

Christianity further refined the concept of the underworld as a hell where
people are punished for their sins. Also in Chinese Buddhism, there exists a hell as penalty and preparation
for reincarnation.

Despite all the bad feelings about the underground, today parts of the life for
some people are underground.

## Life Underground Today

Many modern cities have fractions of their infrastructure underground.
For example, the metro systems are usually below ground. Also, some
shopping malls have floors below the surface. Tunnels for cars and trains
lead into the earth, and parking space is also often underground.

Today, people living underground are often stigmatized people like the [rat tribe](https://en.wikipedia.org/wiki/Rat_tribe)
(鼠族 shǔ zú) in China. They are low-income migrant workers who live in underground
shelters in Beijing.

But extreme climate can make underground living a necessity. In Australia's hot
interior in [Coober Pedy](https://www.youtube.com/watch?v=uFA-OB-nJ_I) people live in underground homes that are cooler than the extreme
hot temperatures above.

In Helsinki, Finland, the city has built an ice-hockey rink, shops and a swimming pool
underground. There, the temperatures are often better than in the cold above
and in winter it is dark outside anyway.

Furthermore, research scientists who study physics live at least part of their day
deep underground. For example, the Large Hadron Collider at the CERN institute
is 50–175 meters underground. In China, the [Jinping laboratory](https://en.wikipedia.org/wiki/China_Jinping_Underground_Laboratory)
is even 2,400 meters below ground.

Miners work even deeper underground. In South Africa, the [Mponeng gold mine](https://en.wikipedia.org/wiki/List_of_deepest_mines)
operates down to 3.9 km underground. It is the deepest mine of the world.

## Future of Underground Life

In the future, more infrastructure of cities will likely move underground.
One example here is the tunnel under construction in Los Angeles in the USA by [The Boring Company](https://www.boringcompany.com/).
Once finished, cars will slide through the tunnel at high speeds.

Also, urban agriculture could move underground. With artificial lighting and
using hydroponics, salads and other greenery can be cultivated underground.
This is already done in London by [Richard Ballard and Steven Dring](https://www.youtube.com/watch?v=QQ8wcBmB_rQ).

Currently, it is still more economical to build upwards. But new technology
of underground construction and high real estate prices in cities might soon
change that. Also, lighting technology and other improvements could
render life underground more convenient.

Thinking beyond earth, for life on the Moon and on Mars, living underground might become
a necessary reality because the radiation is high above ground. Also, living underground
protects from meteorites and other space debris.

## Sources and Further Reading

* https://en.wikipedia.org/wiki/Underground_city

* https://en.wikipedia.org/wiki/Underground_living

* Earthscrapers: https://blog.ferrovial.com/en/2018/05/earthscrapers-underground-city/

* Derinkuyu Underground City: https://en.wikipedia.org/wiki/Derinkuyu_underground_city

* Video Looking 4, Underground Cities: https://youtu.be/Qqvs7oJicV4


large_metro-underground.jpg

medium_metro-underground.jpg

small_metro-underground.jpg

thumbnail_metro-underground.jpg

Modern cities already have parts of their infrastructure underground. Some people live today underground for work or out of necessity. Where are people living inside the earth, and how will the development of underground cities be in the future?

Underground Cities of Tomorrow

[Gatsby](https://www.gatsbyjs.org/) is a fast static Content Management System (CMS). It can be individually extended by anybody
knowing a bit of JavaScript and [React](https://reactjs.org/). Since podcasts are undergoing a revival, this article shows how
to self-host podcast audio files on your Gatsby website.

One popular way to create articles in Gatsby is with markdown (.md) files. These are essentially
text files with a special syntax for things like images. These markdown files have also special
metadata that can later be queried.

For the purpose of adding audio files to your system, I add a metadata field to the markdown. It is
called audio and has a boolean flag. Also, the audio file of your podcast needs to be added to the
same directory as the .md file and added as an attachment. Adding the audio file as an attachment
ensures that it is copied to the public folder where the generated site resides.

index.md
```md
...
audio: true
attachments:
  - "./podcast.mp3"
...
```

In this example, the podcast file podcast.mp3 is copied to the public/static folder in the
generated site.

Next, we need a page to display the podcasts next to the article preview. This can be
achieved by querying all articles for the audio field set to true. This is a [GraphQL](https://graphql.org/learn/) query
and common in Gatsby, ensuring that only articles with podcasts are selected.

podcasts.jsx
```javascript
import React from 'react'
import Helmet from 'react-helmet'
import { graphql } from 'gatsby'
import Layout from '../../components/Layout'
import Post from '../../components/Post'
import Sidebar from '../../components/Sidebar'
import icon32 from '../favicon.ico'

class PodcastsRoute extends React.Component {
  render() {
    const items = []
    const { title, subtitle } = this.props.data.site.siteMetadata
    const posts = this.props.data.allMarkdownRemark.edges
    posts.forEach(post => {
      items.push(<Post data={post} key={post.node.fields.slug} audio="true" />)
    })

    return (
      <Layout>
        <div>
          <Helmet>
            <title>{title}</title>
            <meta name="description" content={subtitle} />
            <link rel="shortcut icon" type="image/ico" href={icon32} />
          </Helmet>
          <Sidebar {...this.props} />
          <div className="content">
            <div className="content__inner">
              <div className="page">
                <h1 className="page__title">Podcasts</h1>
                <div className="page__body">{items}</div>
              </div>
            </div>
          </div>
        </div>
      </Layout>
    )
  }
}

export default PodcastsRoute

export const pageQuery = graphql`
  query IndexQueryPod {
    site {
      siteMetadata {
        title
        subtitle
        copyright
        menu {
          label
          path
          icon
        }
        author {
          name
          email
          telegram
          twitter
          github
          rss
          vk
        }
      }
    }
    allMarkdownRemark(
      limit: 1000
      filter: { frontmatter: { layout: { eq: "post" }, draft: { ne: true }, audio: { eq: true } } }
      sort: { order: DESC, fields: [frontmatter___date] }
    ) {
      edges {
        node {
          fields {
            slug
            categorySlug
          }
          frontmatter {
            title
            lang
            license
            date
            category
            description
            audio
            attachments {
              publicURL
              childImageSharp {
                fixed(width: 150) {
                  ...GatsbyImageSharpFixed
                }
              }
            }
          }
        }
      }
    }
  }
`
```

The podcasts page uses a modified Post component that also displays an audio widget for
all posts that contain a podcast.


components/Post/index.jsx
```javascript
import React from 'react'
import { Link } from 'gatsby'
import Img from 'gatsby-image'
import moment from 'moment'
import AudioWidget from '../AudioWidget'
import './style.scss'

class Post extends React.Component {
  render() {
    const {
      title, date, category, description, attachments,
    } = this.props.data.node.frontmatter
    const { slug, categorySlug } = this.props.data.node.fields

    return (
      <div>
        <div className="post">
          <div className="post__meta">
            <time className="post__meta-time" dateTime={moment(date).format('MMMM D, YYYY')}>
              {moment(date).format('MMMM YYYY')}
            </time>
            <span className="post__meta-divider" />
            <span className="post__meta-category" key={categorySlug}>
              <Link to={categorySlug} className="post__meta-category-link">
                {category}
              </Link>
            </span>
          </div>
          <div className="post__hover">
            <h2 className="post__title">
              <Link className="post__title-link" to={slug}>
                {title}
              </Link>
            </h2>
          </div>
        </div>
        <div className="breaker" />
        <AudioWidget
          audio={this.props.audio}
          audioFile={attachments[0] ? attachments[0].publicURL : ''}
        />
      </div>
    )
  }
}

export default Post
```

The podcast audio file needs to be the first attachment. The full file URL is
given in the property *audioFile* of the AudioWidget component.

Now the AudioWidget component is needed.


AudioWidget/index.jsx
```javascript
import React from 'react'

class AudioWidget extends React.Component {
  render() {
    let audio = null

    if (this.props.audio) {
      audio = (
        <div>
          <audio controls>
            <source src={this.props.audioFile} type="audio/mpeg" />
          </audio>
          <br className="post-breaker" />
        </div>
      )
    }

    return <div>{audio}</div>
  }
}

export default AudioWidget
```

The audio widget is a simple HTML5 audio control supported by all browsers. No widget is displayed when
the audio flag is false.

The code in this example is based on the [gatsby-v2-starter-lumen](https://www.gatsbyjs.org/starters/GatsbyCentral/gatsby-v2-starter-lumen/) starter. 

How this solution looks like can be seen on the Podcasts page on
my blog:

https://www.tderflinger.com/en/podcasts


Should you have any questions, please let me know below. If there is sufficient demand
I can package this solution as a Gatsby starter.

## Conclusion

Hopefully, I could show in this article that Gatsby can easily be extended to include
additional functionality, like a self-hosting podcast page.

## Further Reading

- Gatsby: https://www.gatsbyjs.org/
- React: https://reactjs.org/


large_podcast.jpg

medium_podcast.jpg

small_podcast.jpg

thumbnail_podcast.jpg

GatsbyJS is a fast static Content Management System (CMS). It can be individually extended by anybody knowing a bit of JavaScript and React. Since podcasts are undergoing a revival, this article shows how to self-host podcast audio files on your Gatsby website.

Self-hosting Podcasts with GatsbyJS

When you create a REST API for your Node [Express](https://expressjs.com/) backend, you need to document it properly.
This documentation is necessary, so that either external developers or colleagues
in your team know what to expect from your REST contract.

[OpenAPI](https://www.openapis.org/) is a standard for open documentation of REST endpoints. It evolved
in the U.S. company, [SmartBear](https://smartbear.com/) from the Swagger product suite. The
Swagger specification that was developed by SmartBear was donated in 2015 to the
Linux Foundation under the name of OpenAPI.

The OpenAPI specification is not only essential for other human developers but
can also be read by computer programs to access the server application without
needing access to the source code.

Today, SmartBear still continues to develop their Swagger product line and one
product to easily edit an Open API specification is the [Swagger Editor](https://github.com/swagger-api/swagger-editor).

You can easily install the Swagger Editor with [Docker](https://www.docker.com/):

```bash
docker pull swaggerapi/swagger-editor
docker run -d -p 8085:8080 swaggerapi/swagger-editor
```

The web interface of the editor is thus bound to port 8085 and when accessing
in a browser displays an example specification in the [YAML format](https://en.wikipedia.org/wiki/YAML) on the left.
On the right side there is the documentation rendered for the user.
This documentation looks similar to the image on the top of this article.

The OpenAPI specification is not hard to understand for someone who has
used or built REST APIs. Experiment with changing and adapting the
template to your API. When there are errors, they will be displayed on
the right side.

This rendering that you can see on the right side of the Swagger Editor, you can also easily
include in your own Express REST application with an NPM package called
[_swagger-ui-express_](https://github.com/scottie1984/swagger-ui-express). Swagger UI is a collection of HTML, JavaScript and CSS
that generate a nice documentation.

The documentation produced by Swagger UI is usually accessible
via an endpoint like /api-docs. Use the following lines in your Node Express application to read your specification
from the YAML file and make it accessible to users:

```javascript
const swaggerUi = require('swagger-ui-express')
const YAML = require('yamljs')
const swaggerDocument = YAML.load('./swagger/swagger.yaml')

app.use('/api-docs', swaggerUi.serve, swaggerUi.setup(swaggerDocument))
```

This loads the YAML OpenAPI specification file in the directory ./swagger and
renders it under /api-docs.

Some people will first develop the OpenAPI specification and only then start
with the actual programming of the Express application.
Others have an already existing application and want to add documentation later.
For both cases, the Swagger Editor and the OpenAPI specification are great tools.

## References and Further Reading

- Swagger Editor: https://github.com/swagger-api/swagger-editor

- NPM package swagger-ui-express: https://github.com/scottie1984/swagger-ui-express

- What is the Difference Between Swagger and OpenAPI? https://swagger.io/blog/api-strategy/difference-between-swagger-and-openapi/


medium_openapi-danublue.png

small_openapi-danublue.png

thumbnail_openapi-danublue.png

Having an Express REST API is great, but you need to teach other developers how to properly use it. This is the mission of the
OpenAPI documentation specification for REST APIs.

Easy Documentation with OpenAPI for Express

What if we could connect the entire earth's biosphere with the web?
Analogous to the [Internet of Things (IoT)](https://en.wikipedia.org/wiki/Internet_of_things) we could have the **Internet
of Creatures (IoC)**.

Technology for this exists today. Imagine a thermometer that
measures the temperature of an oak tree. This temperature measurement
could be exposed to the web (via an API endpoint).

Another use case would be a [neurologger](http://www.vyssotski.ch/neurologger2) for a pigeon that connects with
the bird's brain. This information could
as well be exposed via an interface to the web. Neurologger brain implants for
animals exist today.

So doing the next step and exposing that information to the web is a rather
small one.

![A Rose](https://res.cloudinary.com/dxxtt2clx/image/upload/v1692379493/rose_8ced41117f.jpg)

An even more sophisticated possibility is an [electronic plant](https://liu.se/en/employee/elest58). The biological
system of a rose was successfully connected to an electronic system.
So in this way there is information exchanged on the level of atoms.

Granted, this is still in the research stage, but you could imagine
a world in which the biosphere is connected in an intricate way with the web
of the internet.

This would enable us to empathize more with the world's creatures.

## References

- Electronic plants, November 2015, Science Advances, http://advances.sciencemag.org/content/1/10/e1501136

- Angel Oak image by Mike Norton, [CC BY 2.0 license](https://creativecommons.org/licenses/by/2.0/)

- Rose image by Susanne Nilsson, [CC BY-SA 2.0 license](https://creativecommons.org/licenses/by-sa/2.0/)


small_oak.jpg

thumbnail_oak.jpg

What if we could connect the entire earth's biosphere with the web? This would enable us to empathize more with the world's creatures.

The Internet of Creatures

With the advent of JavaScript libraries for machine learning, it is now possible to do simple machine learning (ML) tasks in
the browser. One library that makes this especially easy for beginners is [ml5.js](https://ml5js.org).

Ml5.js is an abstraction over the popular [Tensorflow.js](https://www.tensorflow.org/js) JavaScript implementation. Tensorflow.js is designed for
mobile and browser environments and has a limited set of capabilities compared to the full Tensorflow library.
But this should not hold you back with your AI projects in the browser because you can already do amazing things.

How easy it is to recognize the bison show the following lines of code:

index.html

```html
<head>
  <script
    src="https://unpkg.com/ml5@0.1.1/dist/ml5.min.js"
    type="text/javascript"
  ></script>
</head>

<body>
  <img src="images/bison.jpg" id="image" />
  <script src="sketch.js"></script>
</body>
```

First, we import the ml5.js library that is hosted on a CDN. Then we define the image file
we want to recognize. In this case, it as the image of a bison from Tomas Caspers.

sketch.js

```javascript
const image = document.getElementById('image') // The image we want to classify
const result = document.getElementById('result') // The result tag in the HTML
const probability = document.getElementById('probability') // The probability tag in the HTML

// Initialize the Image Classifier method with MobileNet
ml5
  .imageClassifier('MobileNet')
  .then(classifier => classifier.predict(image))
  .then(results => {
    result.innerText = results[0].className
    probability.innerText = results[0].probability.toFixed(4)
  })
```

In the sketch.js file, we get the image element and two elements to display the name and the
probability.

The function ml5.imageClassifier() returns a promise with a classifier. We use the predictor
function of the classifier to get a prediction from our bison image element.
Next, the result of the predictor function is displayed. That is, the name of the object
recognized and its probability.

In case you wondered, this example uses [MobileNet](https://github.com/tensorflow/tfjs-models/tree/master/mobilenet), a special pre-trained model.
The MobileNet model is optimized for environments with limited resources, like a
browser or mobile devices. Yet, it claims to have good results.

MobileNet is available for different sizes and different levels of accuracy. It
has 1,000 classes available with pre-trained objects. Other examples besides bison
recognition are classifications of tree frogs, African crocodiles, and the Indian elephant.

You can find a list of the classes in this file:

- https://github.com/tensorflow/tfjs-models/blob/master/mobilenet/src/imagenet_classes.ts

## Use Case

One potential use case would be an animal recognizer as a web application. Users upload
the image of the animal and the application returns the recognized name together with a
probability.

I am sure you find other useful applications. Write me if you like!

## Links

- Ml5.js: https://ml5js.org
- Tensorflow.js: https://www.tensorflow.org/js
- MobileNet: https://github.com/tensorflow/tfjs-models/tree/master/mobilenet

## References

- Bison image, Tomas Caspers, [CC BY 2.0](https://creativecommons.org/licenses/by/2.0/)


large_bryce-olsen-4Cu9-BA8QoA-unsplash.jpg

medium_bryce-olsen-4Cu9-BA8QoA-unsplash.jpg

small_bryce-olsen-4Cu9-BA8QoA-unsplash.jpg

thumbnail_bryce-olsen-4Cu9-BA8QoA-unsplash.jpg

The ml5.js library makes it easy for JavaScript developers to integrate machine learning (ML) in their web application. In this article, I show you how to easily recognize a bison with AI.

Thoughts by Thomas Derflinger

Underground Cities of Tomorrow

Self-hosting Podcasts with GatsbyJS

Easy Documentation with OpenAPI for Express

The Internet of Creatures

Recognizing a Bison with ML