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

Software Innovation for the Big Leap.

[A-Frame](https://aframe.io/) is a [VR (Virtual Reality)](https://en.wikipedia.org/wiki/Virtual_reality) framework written in JavaScript, developed by Mozilla. It runs in the browser
and can display interactive 3D scenes using the normal desktop browser. It
also supports VR headsets like Oculus Go, Oculus Quest, HTC Vive and Windows Mixed Reality.

A-Frame supports WebVR or its successor [WebXR](https://www.w3.org/TR/webxr/). It is developed as a W3C standard. The WebXR standard is currently in evolution, but support by browsers is gaining traction.

How to build a VR website of a rotating sculpture with A-Frame, I want to show in this article.

First, you need a 3D object. Suitable objects can be found on sites like SketchFab. For the purpose
of this article I, take the [Artemis sculpture](https://sketchfab.com/3d-models/artemis-fountain-b9985a307aac41bbad4339fa46122d7a) by C. Bjerg and Poul Holsøe from 1934. It stands in
a park in Copenhagen, Denmark. Artemis is a goddess of the hunt and wild animals in ancient Greek religion.

The 3D model has a permissive license and can be used by attribution. When you download the file, only the .OBJ and the textures are needed.

Then you need an HTML file where the loading of the sculpture file and the positioning takes place.
This is as simple as loading the A-Frame JavaScript files in the head section and then building a
scene. The HTML elements in the A-Frame framework always begin with a- . So the scene object is
called _a-scene_, the sky object _a-sky_ and so on.

So you can use your knowledge of Web development when creating a 3D scene with A-Frame.

This is how the finished VR scene looks like in source code:

```html
<html>
  <head>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-plane
        position="0 0 -4"
        rotation="-90 0 0"
        width="4"
        height="4"
        color="#000000"
      ></a-plane>
      <a-sky color="#FFFFFF"></a-sky>
      <a-assets>
        <a-asset-item
          id="hall-obj"
          src="./artemisfountain-low.OBJ"
        ></a-asset-item>
        <img id="hall-texture" src="./textures/artemis-diffuse-bw.jpg" />
      </a-assets>
      <a-entity
        position="0 -32 -50"
        animation="property: rotation; to: -90 360 0; loop: true; dur: 10000"
        rotation="-90 0 0"
        obj-model="obj: #hall-obj;"
        material="src: #hall-texture"
        id="hall"
      >
        <a-entity position="0 20 -120"></a-entity>
      </a-entity>
    </a-scene>
  </body>
</html>
```

You can see that the sculpture is called an asset and loaded with the _a-assets_ element.
The actual rotation is done in the _a-entity_ with the animation attribute. You need
to be careful with the coordinate system to rotate in the right direction.

Otherwise, this is all declarative and not much code.

Now you need to access the scene from your VR device. For my Oculus Go, they force you into
a registration as a developer to transfer data from your computer to the Oculus Go.

So you can circumvent this by deploying the HTML code to the "cloud". I use AWS S3 and simply
copy the code to a bucket.

This little bash script does that for me:

```bash
cd src
aws s3 sync --acl public-read . s3://vr.tderflinger.com
firefox vr.tderflinger.com.s3-website.eu-central-1.amazonaws.com
```


In the /src directory I have the A-Frame source code, and it is copied to my bucket, vr.tderflinger.com.
Then I can open the URL in my browser. The same URL you also need to input in your VR device's browser.

Then you can click on the icon on the bottom right, and you are immersed in the scene.

The project source code can be downloaded from the GitHub link below.

## Conclusion

For people coming from web development, it is relatively easy to get started with A-Frame. Since
A-Frame leverages web technology, you can step by step build more ambitious projects.

## Sources and Further Reading

- A-Frame: https://aframe.io/

- WebXR: https://www.w3.org/TR/webxr/

- Rotating Artemis source code: https://github.com/tderflinger/rotating-artemis-aframe

- Artemis model is by [Rigsters](https://sketchfab.com/3d-models/artemis-fountain-b9985a307aac41bbad4339fa46122d7a), license of the model is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)


large_rotating-sculpture.png

medium_rotating-sculpture.png

small_rotating-sculpture.png

thumbnail_rotating-sculpture.png

A-Frame is a VR (Virtual Reality) framework written in JavaScript, developed by Mozilla. It runs in the browser and can display interactive 3D scenes in your VR device. How to build a VR website of a rotating sculpture with A-Frame, I want to show in this article.

Rotating Sculpture in VR with A-Frame

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

Rotating Sculpture in VR with A-Frame

Underground Cities of Tomorrow

Self-hosting Podcasts with GatsbyJS

Easy Documentation with OpenAPI for Express

The Internet of Creatures

Recognizing a Bison with ML