Ralph's Blog about this and that (RSS | Atom)

2017 | 2018 | 2019 | 2020

Getting started with Nebular for Angular

Published: May 17, 2020  •  javascript, angular

How to create an Angular application from scratch with the Nebular component library.

Building encrypted chat app with the Web Cryptography API

Published: May 03, 2020  •  Updated: May 20, 2021  •  javascript, spring, java, ionic

In this blog post, I show you how to create an encrypted Java/JavaScript chat application with the Web Cryptography API.

Present photos on Google Maps

Published: May 02, 2020  •  Updated: May 21, 2021  •  javascript, java

In this tutorial I show you how to develop a web application that present your holiday photos on Google Maps

Add CAPTCHA to your site with hCaptcha

Published: May 01, 2020  •  Updated: May 20, 2021  •  javascript, java, ionic, angular

This blog post shows you how to integrate hCaptcha CAPTCHAs into a plain JavaScript project and Angular projects, with a Spring Boot back end.

Translation chat app with Cettia and Google Cloud Translation

Published: April 24, 2020  •  Updated: May 20, 2021  •  javascript, spring, java

In this blog post, I show you how to build a chat application with Cettia and Google Cloud Translation that automatically translates chat messages.

JavaScript / Java chat application with Cettia

Published: April 23, 2020  •  Updated: May 20, 2021  •  javascript, spring, java

In this blog post, I show you how to build a simple chat application with a JavaScript front- and a Java backend.

YouTube Player and Google Maps Angular component

Published: April 21, 2020  •  Updated: May 21, 2021  •  javascript, angular

In this blog post, we take a look at the YouTube Player and Google Maps component from the angular/component repository.

RxJS webSocket, w3c-compatible WebSocket wrapper

Published: April 10, 2020  •  Updated: May 20, 2021  •  javascript

In this blog post, we take a closer look at the webSocket function from the RxJS library, a wrapper around the native WebSocket object.

Exchange Protocol Buffers messages between JavaScript and Java

Published: April 04, 2020  •  Updated: May 20, 2021  •  javascript, java

In this blog post, we are going to take a look at how to sends Protocol Buffers messages from an Angular app to a Spring Boot back end.

Push Notifications with Capacitor and Java

Published: April 03, 2020  •  Updated: June 20, 2021  •  ionic, spring, javascript, capacitor, java

In this blog post we take a closer look at how to receive push notifications with Capacitor and how to send them from a Spring Boot application

Creating a password-less sign-in with WebAuthn, Spring and Ionic/Angular

Published: August 25, 2019  •  javascript, java, spring, ionic

In this blog post, we are going to build a password-less authentication system with the FIDO2 WebAuthn standard. I show you a full-stack demo application with an Ionic / Angular front end and a Spring Boot back end with Spring Security.

Sending Web Push Notifications with Java

Published: August 13, 2019  •  java, javascript

Sending Web Push notifications from a Java back end to a web browser

ky - elegant fetch

Published: August 10, 2019  •  javascript

A closer look at ky, a JavaScript HTTP client for the browser, built on top of the Fetch API. ky adds convenient functions and new features to the Fetch API.

Web Workers - Basic usage, Angular and Comlink

Published: July 31, 2019  •  javascript

In this blog post, we are looking at the Web Workers API. What problem it solves, and how can we use it in our JavaScript applications. We take a look at the Angular build-time support for Web Workers, and lastly, we take a look at Comlink, a JavaScript library that simplifies Web Workers programming.

OCR in the browser with Tesseract.js

Published: July 30, 2019  •  Updated: December 30, 2019  •  javascript

In this blog post, we are going to develop an Angular/Ionic application that runs Optical character recognition (OCR) in a browser with Tesseract.js. This application does not depend on any server-side code, and the recognition process runs locally in the browser.

A look at the Page Visibility API

Published: July 29, 2019  •  javascript

What is the Page Visibility API and how can you access it in web applications. Also, a quick look at the visibilityjs library that simplifies commons tasks with the Page Visibility API.

Password auto-login with the Credential Management API

Published: June 13, 2019  •  java, javascript, spring, ionic

How to create a frictionless password auto-login experience with the Credential Management API.

Exposing build information of Spring Boot and Angular applications

Published: June 12, 2019  •  java, spring, javascript

How to expose build information, like version number, build timestamp, git commit information, of Spring Boot and Angular applications

Uploading pictures from Capacitor app to Spring Boot

Published: June 11, 2019  •  java, spring, javascript, ionic, capacitor

How to take pictures with the Capacitor camera plugin and upload them to a Spring Boot application with Angular's HttpClient and tus.io.

Reliable file uploads over HTTP with tus.io

Published: June 11, 2019  •  java, javascript, spring, ionic

How to integrate tus.io implementations into JavaScript and Java applications to create reliable and resumable file uploads over HTTP.

Google Fonts in an Angular / Ionic application

Published: June 10, 2019  •  javascript, ionic

A tutorial on how to use Google Fonts in an Angular / Ionic app. The blog post presents two approaches. One approach is by linking to the Google Font server, and the second approach shows you how to download Google Fonts and serve them from your web server.

Integrate FontAwesome icons in an Angular application

Published: February 15, 2019  •  Updated: August 21, 2019  •  javascript, ionic

This blog post shows you how to integrate FontAwesome icons into an Angular application with the official Angular JavaScript library

Real-time messaging with Cettia and Spring Boot

Published: January 28, 2019  •  java, javascript, spring

Getting started with Cettia, a real-time web framework, and Spring Boot

JavaScript spread and rest syntax examples

Published: January 19, 2019  •  javascript

A collection of examples with the spread and rest syntax in JavaScript

JavaScript BigInt and JSON

Published: January 04, 2019  •  javascript, java

How to JSON deserialize and serialize the new JavaScript primitive number type BigInt in a full-stack application with Spring Boot

Machine Learning with brain.js and Tensorflow.js

Published: January 04, 2019  •  javascript

In this blog post we are going to create two neural networks with brain.js and Tensorflow.js, train the MNIST dataset and use the trained model in a web application to detect digits

Using pre-trained Tensorflow.js models

Published: January 04, 2019  •  javascript

In this blog post we are going to look at tfjs-models (https://github.com/tensorflow/tfjs-models), a collection of pre-trained models with Tensorflow.js that you can simply add and use from your web application

Building a simple neural network with Java and JavaScript

Published: December 23, 2018  •  java, javascript

Creating a simple feedforward neural network in Java and JavaScript, based on the algorithms of Tariq Rashid's book "Make Your Own Neural Network"

Google Cloud Vision and Storage example with Ionic and Spring Boot

Published: December 11, 2018  •  java, spring, ionic, javascript

This blog post shows you a way to upload pictures from a web application to Google Cloud Storage and run them through Google Cloud Vision. The application uses Ionic for the front end and Spring Boot for the back end. It utilizes signed URLs for permitting the client to upload pictures directly from the web application to Google Cloud Storage

Using the Background Sync API with the Angular service worker

Published: December 09, 2018  •  pwa, javascript, ionic

In this blog post, we look at a way to use the Background Sync API together with Angular's service worker. Or, in general, how to add custom service worker code to a generated Angular service worker.

Global error handler in Angular

Published: October 05, 2018  •  javascript

How to install a global error handler in an Angular application and send error reports to a back end. The blog post shows you how to collect error reports while the application is offline and send them to a back end as soon as the device is back online.

Text to speech with Google Cloud Text-to-Speech

Published: October 04, 2018  •  java, javascript

Converting text from a web application into speech with Google Cloud Text-to-Speech

A closer look at the Beacon API

Published: September 05, 2018  •  javascript

The Beacon API in the browser can be used to transfer data to a server. Its primary use case is to send analytics data during the unload event of a web page. In this blog post, we're going to look at the API and create some examples that use the Beacon API to send data to a server.

BigInt, arbitrary precision integers in JavaScript

Published: September 03, 2018  •  javascript

A closer look at the ES2020 numeric primitive BigInt

A closer look at the Background Sync API

Published: June 26, 2018  •  pwa, javascript, java, spring, ionic

This blog post takes a closer look at the Background Sync API, part of the service worker implementation, and presents an example that uses Background Sync to synchronize data between an Ionic web application and a Spring Boot server application.

Angular project with Workbox service worker

Published: June 22, 2018  •  Updated: March 30, 2020  •  pwa, javascript

This tutorial describes how to integrate a service worker written with the Workbox library, into an Angular application

Check for commonly used or compromised passwords

Published: May 03, 2018  •  java, javascript

In this blog post, I present four examples of how you can implement password checks for commonly used or compromised passwords.

Real-Time Polling App with Java and JavaScript

Published: February 28, 2018  •  java, javascript

In this blog post we create a simple polling application with Java and JavaScript and send real-time updates with server-sent events

Human readable regular expressions

Published: February 27, 2018  •  java, javascript

Writing human readable regular expressions with the VerbalExpression library

Conditionally load polyfills

Published: February 14, 2018  •  javascript

Two examples of how you can conditionally load polyfills in a JavaScript application

Self-host Polyfill.io

Published: January 15, 2018  •  javascript

A short tutorial on how to install Polyfill.io on Ubuntu And an example of how you can use Polyfill.io together with Babel

Integrate Parcel into a Maven project

Published: January 13, 2018  •  Updated: January 25, 2018  •  java, javascript

An example project that integrates a front end JavaScript application with the Parcel bundler and a Spring Boot application built with Maven into one project and ultimately create one executable JAR.

Using Dexie.js in a TypeScript application

Published: January 12, 2018  •  Updated: December 03, 2018  •  database, javascript, ionic

In this blog post I present a way to use Dexie in a TypeScript application

IndexedDB programming with Dexie.js

Published: January 12, 2018  •  database, javascript

In this blog post I give you an overview of Dexie, a minimalistic wrapper library for IndexedDB. Write simpler and more concise IndexedDB code with Dexie.

A closer look at the Cache API

Published: January 09, 2018  •  pwa, javascript

Explore the provided methods of the Cache API that is primarily used in Service Workers to cache assets, but can be used anywhere as a general-purpose cache.

Sending Web push messages from Spring Boot to Browsers

Published: January 09, 2018  •  Updated: December 07, 2018  •  java, javascript, pwa, spring

In this blog post I show you how you can send push messages from a Spring Boot application over Firebase Cloud Messaging (FCM) to connected clients with the Web Push API. The Push API is part of the Service Worker specification and does not depend on any native plugins.

A closer look at date-fns

Published: January 08, 2018  •  Updated: August 22, 2019  •  javascript

A closer look at the date-fns date/time library. Compare it with Moment.js and look at a few examples.

Bundling web applications with Parcel

Published: January 07, 2018  •  Updated: February 16, 2018  •  javascript

A closer look at Parcel and present various examples of how to bundle web applications with technologies like Babel, TypeScript, and Sass.

Custom SVG icons with Ionic 3 and Ionic 4/5

Published: January 06, 2018  •  Updated: December 01, 2018  •  ionic3, ionic, javascript

How to use arbitrary SVG icons in Ionic 3 and Ionic 4/5

Forward-/Backward navigation with Ionic 3

Published: January 06, 2018  •  ionic3, javascript

This blog post shows the lifecycle methods of Ionic 3 and when they are called. The second part describes a way how to distinguish between the forward and backward navigation (list and detail page).

Adding speech recognition to an Ionic App

Published: December 18, 2017  •  Updated: July 16, 2019  •  ionic, javascript, java, spring

In this blog post I present three different way how to integrate a speech recognition functionality into an Ionic app. With a Cordova plugin, the Web Speech API and with RecordRTC and the Google Cloud Speech API.

Developing a self-hosted location tracker

Published: November 07, 2017  •  Updated: December 05, 2018  •  ionic, java, spring, javascript

In this blog post, we create a self-hosted location tracker that consists of three parts. An Ionic/Cordova application that continuously sends the current location to a Spring Boot application from where the locations are broadcasted to a website and visualized on Google Maps.

Ionic 3 with Workbox Service Worker

Published: November 05, 2017  •  Updated: April 22, 2018  •  pwa, ionic3, javascript

Creating Service Workers with Workbox for Ionic 3 applications

Dynamically loading position data with Ionic and Spring Boot

Published: November 05, 2017  •  Updated: December 03, 2018  •  ionic, java, spring, javascript

In this blog post we create an Ionic app that dynamically requests location data points from a Spring Boot server and displays them on an OpenStreetMap map. The data points are stored in a MongoDB database, and we take advantage of the geospatial query support to read the data points only for a certain area.

Upload files from Ionic to Spring Boot with Flow.js

Published: September 26, 2017  •  Updated: December 04, 2018  •  java, ionic, javascript, spring

A closer look at the Flow.js JavaScript library that helps upload files from a browser to the server. Flow.js is a JavaScript library providing multiple simultaneous, stable, fault-tolerant, and resumable/restartable file uploads via the HTML5 File API.

A closer look at the Web Cryptography API

Published: September 25, 2017  •  Updated: December 04, 2018  •  javascript, cryptography, ionic

Creating a trivial password manager with the Web Cryptography API and the Ionic framework.

Spring Boot and Ionic application development with OpenAPI

Published: September 21, 2017  •  Updated: December 04, 2018  •  spring, java, javascript, ionic

In this blog, we create REST services in Spring Boot and consume them in an Ionic app. We use the OpenAPI specification for generating API documentation and the client TypeScript code.

Offline capable Ionic Web App with IndexedDB

Published: September 15, 2017  •  Updated: December 03, 2018  •  database, javascript, ionic

Example of an Ionic web application that stores data in an IndexedDB and works offline.

A closer look at IndexedDB

Published: September 12, 2017  •  Updated: October 30, 2017  •  database, javascript

IndexedDB, the database in the browser. How does it work and what can you do with it.

Lovefield, a SQL database engine for the web

Published: February 27, 2017  •  Updated: November 29, 2018  •  database, ionic, javascript

A short introduction to Lovefield, a JavaScript SQL database engine. And how to build an Ionic app that uses Lovefield as database access layer.

Sending push messages from Spring Boot to Ionic over FCM

Published: February 26, 2017  •  Updated: March 31, 2020  •  ionic, spring, javascript, java

This post describes how a Spring Boot can send messages over FCM to an Ionic / Cordova app

Integrate ECharts into an Ionic app

Published: February 22, 2017  •  Updated: September 29, 2018  •  ionic, javascript

In this post, we look at a way to display charts from the ECharts library in an Ionic app

Uploading files from Ionic / Cordova to Minio / S3

Published: February 16, 2017  •  Updated: December 06, 2018  •  ionic, cordova, spring, s3, javascript, java

How to upload files from an Ionic / Cordova app directly to a Minio server or Amazon S3 with pre-signed URLs.

Uploading pictures from Ionic / Cordova to Spring Boot

Published: February 12, 2017  •  Updated: December 06, 2018  •  ionic, cordova, spring, javascript, java

In this article, we create an Ionic application where the user can take a picture, and the app uploads it to a Spring Boot application.

JWT Authentication with Ionic/Angular and Spring Boot

Published: February 05, 2017  •  Updated: December 07, 2018  •  ionic, spring, java, javascript

How to implement a JWT authentication system with Ionic/Angular and Spring Boot.

Form validation with Angular and Spring Boot

Published: January 26, 2017  •  Updated: December 04, 2018  •  angular, ionic, spring, java, javascript

Example of form validation in an Ionic application. How to create custom synchronous and asynchronous validators and how to validate data on the server with the Java Bean Validation framework.

A look at Angular's ngFor directive

Published: January 22, 2017  •  Updated: December 05, 2017  •  angular, javascript

Storing data with localStorage and Lockr

Published: January 20, 2017  •  Updated: June 19, 2017  •  database, javascript

Consume Protocol Buffer messages with Ionic

Published: January 14, 2017  •  Updated: December 01, 2018  •  ionic, spring, java, javascript

JavaScript Date and moment.js

Published: January 04, 2017  •  Updated: October 25, 2017  •  javascript