Image for post
Image for post

In this article, I will take you through developing a simple VueJS 3 App using the new composition API and deploying it for free on Netlify.

About the App

The App I will create will be a simple ToDo app, but it could be much more complex but the process of deploying to Netlify would be just the same.

About Netlify

Netlify host Apps in a way that makes it very simple for the developer. It is basically a 3 step process proving a Continuous Deployment service.

  1. Develop your App and push to GIT
  2. Create build settings on Netlify that point to our App’s GIT…

Image for post
Image for post

If you need to search or filter an array of objects, then this article will show you the most common ways of doing so using JavaScript’s built-in functions.

Find Vs Filter

Just to be clear finding and filtering produce different results.

  • find will return a single value: the first matching value found.
  • filter will return multiple values: all matching values

Example data

If you want to follow along, this is the example data I will be using.

data.json

[
{
"id": 1,
"name": "Joe Bloggs"
},
{
"id": 2,
"name": "Jane Doe"
},
{
"id": 3,
"name": "John Doe",
"address": {
"street": "21 Lime Street",
"city": "London"
}
}…


Image for post
Image for post

When using Keycloak in a development environment, all the connections to your app, database, and Keycloak are made on your internal network. When you put your app into production, then your users may well be accessing your Keycloak server from outside your network. This is especially true when developing Single Page Applications SPA’s.

It is common practice to run the Keycloak server over HTTP behind a reverse proxy, which in turn provides your users with the HTTPS connection to keep their credentials private. This is where problems can start to arise with mixed content error messages.

Image for post
Image for post
Network Diagram showing Keycloak behind a Reverse Proxy

The solution is quite straight forward and requires only the addition of two environment variables to the Keycloak Service in the docker-compose.yaml …


What is the correct way to use async/await inside a Javascript promise?

If you're asking the question, then this short and to the point article will show you the quick and easy way to use async/await inside a JavaScript Promise.

If you’re a Javascript programmer and you use promises, then you have probably come across the need to use async/await inside of a promise.

Does this code look familiar?

The above code is an anti-pattern. The problem is the use of async in the promise creation. This can cause all sorts of unexpected problems.

But, I hear you ask, “How can I use await if I don’t decorate the function with async?” …


Image for post
Image for post

There are still a lot of Developers and IT Professionals that have no experience with Docker. My personal experience is they think Docker is complex and challenging to manage.

In this tutorial, I’m going to demonstrate how to get Docker up and running quickly and how to simplify Docker management with the Web-Based graphical management tool, Portainer.

Docker vs Virtual Machines

Before we start, a quick overview of the difference between Docker and Virtual Machines might be helpful. If your already familiar with Docker just skip this section.

A Virtual Machine (VM) is an encapsulated operating system, running on top of another operating system. The VM uses the memory, processor and disk resources of the underlying hardware. The critical point here is that the Operating System running in the VM requires a substantial amount of the host machines resources to run. On a typical 16GB, i5 machine, you would struggle to run five virtual machines simultaneously. Even if they were not running any applications, you would quickly see a significant degradation in the performance of the underlying operating system and the VM’s start to freeze. …


Image for post
Image for post

I have spent most of my career in the IT industry in varying roles, but what I love most is development. It offers the most opportunities for creativity and innovation, especially web development.

In this article I will take you through some of the skills you need to be a great developer.

Languages

You can never have too many languages under your belt. On the other hand, it’s no good being a Jack of all trades and master of none.

You should be a Ninja with one language and a challenger with one or two others. Have a good understanding of the strengths and weakness of many languages will allow you to select the right tool for a particular job. …


Image for post
Image for post

In this article, I will show you how simple it is to create an SMTP server using NodeJS and be up and running in a few minutes. You can then send emails to your node application, either as a method of remote control or for 1001 other reasons.

An SMTP receives emails from other email servers or email clients. If you want an application to process emails in realtime, then your own SMTP server is the way to go. …


Image for post
Image for post

Object storage is amazingly versatile. We normally associate it with AWS S3, but Object Storage can also be run on your private network with MinIO. In this article, I’ll show you how to install MinIO using Docker and also on a Mac using homebrew.

MinIO has an API which is compatible with Amazon S3. This will allow you to develop applications locally and later, easily port them to AWS or you can use MinIO as your primary object store in production.

Prerequisites

You can code along with this tutorial on any operating system If you have Docker and docker-compose.

If you have a Mac you will optionally have to have homebrew installed. …


Image for post
Image for post

GridFS stores files in a MongoDB database. The maximum size of any one MongoDB document is 16MB. GridFS allows for much bigger files to be stored. It achieves this by breaking each file into chunks of 256K. Each fragment is stored as a separate document. One additional document is also created — this store’s metadata about the file and which documents hold each part of the file.

S3, in technology terms, is known as object storage architecture. It is often associated with Amazon Web Services, but alternatives exist, such as MinIO. Each object is a self-contained container comprising of data and meta-data stored in a structurally flat environment. …


Image for post
Image for post

In this article I cover a number of different concepts and technologies; Web Sockets, Python, Node, Vue JS, Docker, and bring them all together in a microservice architecture.

3 Microservices python client, web socket server and Vue JS UI
3 Microservices python client, web socket server and Vue JS UI
3 Microservices

Each component in this stack will be a microservice. I will take you through building each one, including running them in separate Docker containers.

Why Microservices

Microservices bring with them immense flexibility, scalability, and fault tolerance. Today we will only cover the flexibility. Scalability and Fault tolerance require other technologies such as Kubernetes which are outside the scope of this article.

The flexibility of Microservices is created by each service being independent of the others and importantly only doing one job. …

About

Simon Carr

Software developer for over 20 years. I specialize in full-stack web apps and integration with enterprise architecture. I love microelectronics and IOT.

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