Image for post
Image for post

Web APIs offer powerful features for your web apps. In this article, I explore the Storage API, History API and the events that are triggered for loading resources and URL. These APIs will be used for two features of the SPAC framework: Persisting the state of the application, so you can resume the app in the same state that you left it when you closed your browser. And routing, the ability to resolve internal routes without triggering a browser reload.

This article originally appeard at my blog.

Persisting State

Web Storage API

The Web Storage API offers essential methods to store and retrieve string objects in the local browser storage. The storage comes in two flavors. Session storage remains in the browser until the session is terminated by the application, or the browser tab is closed. Local storage is persisted with no expiration date, session termination or closing the tab/browser does not delete the data. It needs to be explicitly cleaned by the app, or by the user who deletes the browser cache. …


Image for post
Image for post

SPAC is a custom JavaScript framework for client-side, single-page web applications. It stands for “Stateful Pages, Actions and Components”. Its design goal is to provide robust and simple entities that help you to structure apps. Pages and components provide the HTML, JavaScript functions and UI interactions. Actions govern external API calls. You define these entities in plain JavaScript, load up the central controller, and your app is ready to be served. Read the development journey of SPAC in my series: https://admantium.com/category/spac-framework/.

The core entity of SPAC is the controller: A self-initializing object that assembles your web application from its pages, actions and components. This article details the self-initialization phase, how it works, how it creates an internal objects API and its bindings to the browser. …


Image for post
Image for post

SPAC is a custom JavaScript framework for client-side, single-page web applications. It stands for “Stateful Pages, Actions and Components”. Its design goal is to provide robust and simple entities that help you to structure apps. Pages and components provide the HTML, JavaScript functions and UI interactions. Actions govern external API calls. You define these entities in plain JS, load up the central controller, and your app is ready to be served. Read the development journey of SPAC in my series: https://admantium.com/category/spac-framework/.

In this article, I explain the central controller object. …


Image for post
Image for post

SPAC is a custom JavaScript framework for client-side, single-page web applications. It stands for “Stateful Pages, Actions and Components”. Its design goal is to provide robust and simple entities that help you to structure apps. Pages and components provide the HTML, JavaScript functions and UI internactions. Actions govern external API calls. You define these entities in plain js, load up the central controller, and you app is ready to be served. Read the development journey of SPAC in my series: https://admantium.com/category/spac-framework/

This article introduces the SPAC framework. Before we dive into the design of the framework itself, we will briefly touch upon how JavaScript is loaded in your browser — this understanding is the foundation how to structure your code. …


ApiBlaze is a tool to explore API specifications: Search for a keyword, filter for objects, properties, or endpoints, and immediately see descriptions and code examples. ApiBlaze helps you to answer a specific question about an API lightning fast.

ApiBlaze is an ongoing project that already went through the stages prototype and two times refinement. This article presents code and visualization of these phases, and explains the reason for the changes.

This article originally appeared at my blog.

Inception

The development of ApiBlaze started like so many other projects with a simple npm init in two folders called backend and frontend.

The frontend was a single index.html, a stylesheet and a script.js for simple DOM manipulation. The page layout was very simple: A search bar in which you enter a search term, and a box for displaying the search results. …


Image for post
Image for post

ApiBlaze is my new project, and this is the first post in a developer journal series — a set of related posts that cover individual aspects of the design, implementation and technologies. In this very first article, I explain the motivation, the key features, technologies and requirements to start the realization of ApiBlaze.

This article originally appeared at my blog.

Why I started ApiBlaze

The project’s motivation was sparked during my ongoing work with Kubernetes in deploying a complex microservice application.

When working with Kubernetes’ complex YAML files, you often need to double check where specific data objects need to be put. Finding this in the official documentation is not always easy. So, I took a look at the extensive API specification available in OpenAPI format. You can see the original JSON specification, or head over to HTML documentation. …


Image for post
Image for post

JavaScript is a fascinating and well-used language. From server-side NodeJS applications to frontends with PlainJS or frameworks like React, it powers many services. Since 2019 I have been working on several projects to learn and explore JavaScript. This blog post is a short recap of those projects, and then gives an outlook to my newest endeavor.

This article originally appeared at my blog.

Coline

A framework for creating interactive, terminal-based dialogs. I started to work on this 2018 as a side-project to my project management role at work. The goal was to design a simple input data-structure from which dialogs are created: Questions, answers, answer patterns (strings containing certain words, numbers etc.), …


Image for post
Image for post

Ansible enables infrastructure as code. It has been a valuable tool for my infrastructure@home project, helping me to setup the programs Consul and Nomad, to provide DNS for nodes and services, and an Nginx endpoint. Although this infrastructure was completely replaced by Kubernetes, Ansible is a tool that stayed and provides continuous support for system maintenance tasks.

Having worked with Ansible for a longer time, my scripts now reside in one well-structured directory. From here, I can run individual tasks as well as running the complete site.yml to apply one consistent configuration state to all systems. It is also helpful to consider uninstallers that will remove unwanted configuration or software. And to achieve idempotency of your playbook, it is important to truly understand the Ansible modules that you are using. …


Image for post
Image for post

Ansible is a powerful tool that gives you great control over your infrastructure. When I developed the Ansible code to install and maintain my infrastructure at home, I wrote most scripts first as single files. This was good for some time — until you realized that the structure is getting complex and you find yourself looking for the script you needed for a considerable amount of time. Then I refactored my code base to a proper layout: A central playbook site.yml that contains all plays and roles. …


Image for post
Image for post

When you execute an Ansible playbook, all actions are run top-down, in the order they are written. There are cases when you need more control: You want to check a host that a certain software is installed, or you want to validate a certain condition and stop following actions when this condition is not fulfilled.

In this article, I will cover the following options of influencing action execution: defining when to execute an action, defining when to stop an action, branching the control flow, and controlling action results.

This article originally appeared at my blog.

Ansible Concepts

This article assumes you are familiar with the Ansible concepts. If you are not, here is a short…

About

Sebastian

IT Project Manager & Developer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store