JavaScript is not a class-based language, it’s an object (prototype) based. But we can work with classes, right? So the question is — how does that work?

This new feature was published with the ECMAScript 2015 version of JavaScript. It's syntactical sugar for those who like to work with classes.

Below you see a simple class and we will look, how the parts of this class could be implemented without the class syntax.

class User {
constructor(name, image) {
this.name = name;
this.image = image;
this.rights = [];
}

addRights(identifier) {
this.rights.push(identifier);
}

hasRights(identifier) {
return this.rights.includes(identifier);
}
}
const…

Understanding and working with Objects is a crucial part of Javascript because almost everything is based on Objects.

First, we will go through a theoretical part, where I explain the difference between class-based and object-based programming languages and afterward we go through a practical part on how to basically work with objects.

Theoretical Part

If you worked with languages like Java or PHP you already know what a class-based programming language is.

In class-based languages, you encapsulate your logic in classes, these classes are blueprints for the object instances you create from them.


In the overview below, you see a list of primitive and reference data types, each with an example.


Photo by @stereophototyp on Unsplash.

In this post, I want to give you a first, short and clear overview of what BEM is, and how to use it.

BEM stands for:

  • Block
  • Element
  • Modifier

You have written or generated your OpenAPI Documentation and you want to publish it to share it with your team or the world.

We will be using an HTML page where we integrate the Swagger UI over a CDN, load our openapi.yaml, for this example I will use the Petstore Documentation and we will be publishing it on Github Pages. The steps to publishing it to another Provider might be similar.

First, we fill our index.html file:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8">
<meta name=”viewport” content=”width=device-width, initial-scale=1">
<link rel=”stylesheet” type=”text/css” href=”//pagecdn.io/lib/swagger-ui/v3.31.1/swagger-ui.css”>
<title>OpenAPI Petstore</title>
<body>
<div id=”openapi”><script src=”//pagecdn.io/lib/swagger-ui/v3.31.1/swagger-ui-bundle.js”></script>
<script>
window.onload =…

With the OpenAPI Specification you can describe and document your RESTful API. In the diagram bellow you can see wich tools can help you describing your API and support you in the general workflow.

World of OpenAPI

The blue box in the center is the main subject of this story. We talk about the green boxes a bit, the open source tools. The Pro Tools are not mentioned in this story.

In the title I use OpenAPI and in parentheses fka Swagger, I do this because till version 2 the Specification was named Swagger, from version 3.* on it’s named OpenAPI. …


Calendar built with Stencil.js, with a material like design

Why Stencil (Web Components) might be an ideal choice for your project over Angular, React, or another Framework?

It depends on what you want to implement. I love working with Angular, but there are cases when Stencil is a better choice or an ideal companion.

For example, I worked in a company that shared some of their components with another company and they used Angular, if you have a similar requirement you might consider using Stencil for the components you want to share because the components will be much smaller, using HTML Standards and it will be much easier to…


In this post, I want to show you how to generate an Angular-Typescript OpenAPI client and store it in a git repository as an npm package.

If you don’t know how to define OpenAPI Schema you may want to check out my other post or some other resource before you read this post.

Our workflow will look like this:

We use the openapi.json from here.

Before running the openapi-generator-cli command you need to install the Java Runtime (JRE) and Node.js.

First, we need to install the npm package openapi-generator globally. Open up your command line and execute the following command:


In this tutorial, I want to give you a short introduction on how to integrate OpenAPI into a Slim Project or any other that is based on PHP. We will use the approach to first write the code and then add annotations to it.

If you are new to OpenAPI you might want to read my introduction to OpenAPI first here.

OpenAPI or Swagger? First, I want to clarify most times in this article we will be talking about OpenAPI, but a few times like the UI npm package we will be referring to Swagger. Till version 2 the specification…

Patric

Loving web development and learning something new. Always curious about new tools and ideas.

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