Jonathan's Dev Blog

Fullstack dev - I like making products fast

How to Embed React Project in a Vanilla JS Website

Why embed a react app into a vanilla JS / jQuery website? On a recent project I wanted to develop a react component, that had to integrate into a jQuery based website. Although it’s possible to just …

Flutter Radar/Starmap UI - Full Tutorial

Check out the full tutorial on YouTube: Flutter Radar These are the assets used: compass grid_tile radar_bg radar_lines

How to make a login screen with video background in flutter

What we’re building This is a quick tutorial on how to design a login screen with a background video file, which I recently added to my app WaveSpy (iOS, Android). This is what the screen will look l…

Zoom API JWT authentication with C#

This is a quick guide on using the Zoom API JWT authentication with C#. I found Zoom’s docs to be quite lacking, and had to experiment with this a bit to get it to work. When to use JWT Zoom has two …

How to make a serverless Flutter video sharing app with Firebase Storage, including HLS and client-side encoding

cover What we’re building We’ll see how to build a flutter app for iOS/Android that allows users to view and share videos. In my previous post I showed how to do this with Publitio as our video stora…

How to make a cross-platform serverless video sharing app with Flutter, Firebase and Publitio

cover What we’re building We’ll see how to build a cross-platform mobile app that allows users to upload and share videos. final The stack Flutter - A new cross-platform mobile app development framew…

How to make an image uploading app with Vue, Quasar, Firebase Storage and Cordova - Part 2

What we’re building We’ll build a cross-platform mobile app for taking photos and uploading to firebase. In Part 1, we saw how to take a picture and save it to Firebase Cloud Storage. In this post …

How to make an image uploading app with Vue, Quasar, Firebase Storage and Cordova - Part 1

What we’re building We’ll build a cross-platform mobile app for taking photos and uploading to firebase. In Part 1, we’ll take a picture and save it to Firebase Cloud Storage, and then show it in o…

How to load a local HTML file into Ionic Web View in a Hybrid Cordova iOS app

Problem When working on a Cordova Hybrid app (a cordova app wrapped in a thin layer of native UI) that uses Ionic Web View plugin as the WebView, there was a requirement from the client to have a nat…

How to solve the no scrolling issue with Ionic Web View in non-Ionic Cordova iOS apps

Problem When building a new Cordova iOS app, you’ll have to face the WebView Dilemma: Cordova’s default iOS WebView is currently UIWebView, which is deprecated in iOS, and has been replaced by WKWebV…

How to solve fastlane installation error on macOS Mojave

What is fastlane Fastlane is a very useful automation tool for publishing iOS / Android apps. It make the building and deployment process scriptable, which makes it less error prone, and lets you pus…

How to make your Svelte 3 Cordova app work on old phones using Babel 7 and Rollup

When working with a relatively new framework like svelte you come across issues that more “battle tested” frameworks have solved already. One such issue is transpiling your code to work on older brow…

We’ve detected that your app is using an old version of the Google Play developer API - Fastlane issue

The problem You might be getting this error in the Play Console: We’ve detected that your app is using an old version of the Google Play developer API. From 1 December 2019, versions 1 and 2 of this …

How (and why) to change your Android Cordova app's minSdkVersion

TL;DR For example, for setting minSdkVersion to 24, in add in the Android platform section: Make sure to remove and re-add the platform or it won’t work! For considerations, and a way to test that i…

How to solve "An invalid or illegal string was specified" error with Svelte 3 and Cordova

The problem Once you’re done configuring babel for your svelte cordova app, and you have your svelte code all transpiled, you might still notice a cryptic error on old Android devices (6 and below): …

How to solve Mismatch of CPU Architecture error in cordova crosswalk plugin

The problem There’s a misleading error message when using the crosswalk plugin with modern cordova builds: error Lucky for us, it doesn’t really mean every user has to download crosswalk separately f…

Should you transpile your cordova app?

The following is based on a true story. Just worst You’ve finished your amazing cross-platform mobile app, you publish it on the stores, and then you get this review: bad-review1 Hmm.. But it opens o…

How to build a SoundCloud-like audio player app with VueJS, Quasar and WaveSurfer

What we’re building final We’ll use Quasar and WaveSurfer to build a SoundCloud like cross-platform mobile audio player app. We’ll load a local audio file from the device using html file input, rende…

Don't be an Update Junkie

“The Update Loop” Ever found yourself in an update loop? You check your email, refresh your twitter feed, check how many people read your blog post, check your website traffic, your instagram likes, …

How to finish your side-project

I’ve read some good posts about the importance of having side projects, and I agree, they are important. And fun. I want to talk about finishing your side project. Part of the reason I chose to work …

Introducing svelte-cordova template

TL;DR I made a template for scaffolding a svelte project that runs in a cordova app, including hot reload to your device. You can find it here. To use it run: Why do I need this? Svelte - the new coo…

5 Cordova iOS pitfalls - and how to overcome them

I recently re-wrote our native android app for teaching the GOT language, Dothraki, in VueJS + Cordova, and published it on the App Store. I came across some iOS-specific quirks that anyone making a …

How to use two versions of the same DLL in the same project

When using 3rd party libraries, sometimes they let out a new version. And sometimes that new version breaks something that used to work in the old version, but also adds features you need. So you fou…

Cordova hybrid apps - How to structure your codebase

The problem A cordova hybrid app necessitates changing the generated native project, thereby breaking the ability to use cordova cli features like adding plugins, updating cordova etc. Some definitio…

How to use a RecyclerView to show images from storage

final The issue at hand The RecyclerView widget is a more advanced and flexible version of ListView. It manages and optimizes the view holder bindings according to the scrolling position, and recycle…

Vue CLI Router + Vuetify plugins

banner What is this? A short tutorial about how to correctly combine Vue CLI’s router plugin and vuetify plugin into one layout. What’s the problem? Vue CLI plugins scaffold a recommended layout for …

VueJs + Vue CLI 3 + Vuetify + Cordova + Nano Sql: Building a cross platform app with a local SQL database that can load data from a static csv file

finished What we’re doing In this tutorial we’ll rapidly prototype a Vue.js cross-platform app, that uses a local SQL database which is initially imported from a static csv file. We’ll use the VVVCN…

Map based event managed with MEVN stack and Vuetify - Part 2

This is the second part in a series about building a map-based event manager with MEVN stack and Vuetify. You can find the rest of the series here What we’re doing Google Maps integration using Usin…

Map based event managed with MEVN stack and Vuetify - Part 1

What we’re doing We’re going to build a SPA for managing real time events. The UI will be based on Google Maps - that is, centered around a map, with management options in a side drawer. We’ll use Vu…