Developer Tutorials on Junian Dev

I Challenge Myself to Complete freeCodeCamp Responsive Web Design V9 Certification

author@junian.dev (Junian Triajianto) — Sat, 28 Feb 2026 04:00:00 +0700

In this age of AI, I use LLMs to do my development work for like 80% of the time. I reduce the time writing code manually as much as possible for more efficient work.

But sometimes I just miss writing code by hand. No code completion, no AI suggestions, no interruptions. Just typing whatever is in my brain.

I recently noticed that freeCodeCamp updated their curriculum. It now has more workshops, labs, and even quizzes than the previous curriculum. I see this as a good challenge.

Install TradeNote on Windows

author@junian.dev (Junian Triajianto) — Wed, 25 Feb 2026 04:00:00 +0700

Recently, I installed TradeNote on Windows for a client.

TradeNote is an open-source trading journal that helps traders store, analyze, and review all their trades so they can become more consistent and profitable.

Installation on Linux or other Unix-based operating systems is pretty straightforward. However, on Windows, there are a few additional steps—especially if you’re not familiar with Unix-based environments.

Here’s how I install TradeNote on Windows.

Requirements

Windows 10 version 2004 or higher (Build 19041+) or Windows 11
WSL 2 installed
Docker Desktop installed

Make sure Docker Desktop is configured to use WSL 2 as its backend. It is enabled by default, but better make sure of it.

Install .NET 11 SDK Preview on macOS Side-by-Side with Homebrew

author@junian.dev (Junian Triajianto) — Mon, 23 Feb 2026 04:00:00 +0700

Microsoft recently released .NET 11 Preview 1.

If you want to try it without removing your existing installed .NET SDKs on macOS, you can install it side-by-side using the Homebrew package manager.

First, tap the Homebrew repository I maintain:

brew tap junian/homebrew-dotnet

Then install the .NET 11 SDK Preview:

Xcode Command Line Tools Download and Installation FAQ

author@junian.dev (Junian Triajianto) — Thu, 19 Feb 2026 04:25:35 +0700

Xcode is a full-featured IDE from Apple for creating apps for iPhone, iPad, Mac, Apple Watch, and Apple TV.

You probably need some of its tools without installing the entire package. Maybe you want to write command-line software on macOS, or maybe you need to use the Homebrew package manager.

In that case, you only need a subset of it, which is the Xcode Command Line Tools.

Not in the mood for reading? Watch the video instead.

How to Install Visual Studio Community 2017 and Fix the Startup Error

author@junian.dev (Junian Triajianto) — Thu, 12 Feb 2026 19:00:00 +0700

Ah Yes. Visual Studio 2017. What a good memory. That was a good year before COVID-19 happened.

I still install it sometimes, especially when dealing with older projects that don’t behave nicely in newer Visual Studio versions. Legacy apps are real, and sometimes the safest move is just using the original toolchain.

Here’s how I install Visual Studio 2017 Community Edition plus how I fix that annoying System.InvalidOperationException startup error that sometimes appears right after installation.

Fixing .NET SDK Resolver Failure

author@junian.dev (Junian Triajianto) — Wed, 11 Feb 2026 15:00:00 +0700

Recently, with .NET 10.0.103 installed on my macOS (it also happened on Windows and probably Linux too), I tried to run a C# script and ran into this issue.

$ dotnet run Program.cs
SDK Resolver Failure: "The SDK resolver "Microsoft.DotNet.MSBuildWorkloadSdkResolver" failed while attempting to resolve the SDK "Microsoft.NET.SDK.WorkloadAutoImportPropsLocator". Exception: "System.IO.FileNotFoundException: Workload manifest microsoft.net.workload.emscripten.current: 10.0.102/10.0.100 from workload version 10.0.102 was not installed. Running "dotnet workload repair" may resolve this.
   at Microsoft.NET.Sdk.WorkloadManifestReader.SdkDirectoryWorkloadManifestProvider.GetManifests()
   at Microsoft.NET.Sdk.WorkloadManifestReader.WorkloadResolver.LoadManifestsFromProvider(IWorkloadManifestProvider manifestProvider)
   at Microsoft.NET.Sdk.WorkloadManifestReader.WorkloadResolver.InitializeManifests()
   at Microsoft.NET.Sdk.WorkloadManifestReader.WorkloadResolver.GetInstalledWorkloadPacksOfKind(WorkloadPackKind kind)+MoveNext()
   at Microsoft.NET.Sdk.WorkloadMSBuildSdkResolver.CachingWorkloadResolver.Resolve(String sdkReferenceName, IWorkloadManifestProvider manifestProvider, IWorkloadResolver workloadResolver)
   at Microsoft.NET.Sdk.WorkloadMSBuildSdkResolver.CachingWorkloadResolver.Resolve(String sdkReferenceName, String dotnetRootPath, String sdkVersion, String userProfileDir, String globalJsonPath)
   at Microsoft.NET.Sdk.WorkloadMSBuildSdkResolver.WorkloadSdkResolver.Resolve(SdkReference sdkReference, SdkResolverContext resolverContext, SdkResultFactory factory)
   at Microsoft.Build.BackEnd.SdkResolution.SdkResolverService.TryResolveSdkUsingSpecifiedResolvers(IReadOnlyList`1 resolvers, Int32 submissionId, SdkReference sdk, LoggingContext loggingContext, ElementLocation sdkReferenceLocation, String solutionPath, String projectPath, Boolean interactive, Boolean isRunningInVisualStudio, SdkResult& sdkResult, IEnumerable`1& errors, IEnumerable`1& warnings)""  /usr/local/share/dotnet/sdk/10.0.103/Sdks/Microsoft.NET.Sdk/targets/Microsoft.NET.Sdk.ImportWorkloads.props

The build failed. Fix the build errors and run again.

.NET SDK Resolver Failure

As suggested by the error message, I tried dotnet workload repair hoping it would fix the issue, but another error message appeared:

Installing Visual Studio 2019 Community Edition (Step by Step)

author@junian.dev (Junian Triajianto) — Sun, 08 Feb 2026 19:00:00 +0700

Visual Studio 2019 might not be the newest kid on the block anymore, but it’s still very useful—especially if you’re working on legacy projects or older .NET Framework applications.

I still install it from time to time, usually when dealing with an older codebase or opening an open-source repository that works best with VS 2019. So here’s a quick, no-nonsense walkthrough of how I install Visual Studio 2019 Community Edition.

How to Create an Empty Orphan Git Branch

author@junian.dev (Junian Triajianto) — Fri, 06 Feb 2026 19:00:00 +0700

Have you ever wanted to create a new, separate Git branch that doesn’t have any starting point from an existing branch?

One common use case is from the early days of GitHub, when you needed to create a separate empty branch called gh-pages. This branch was orphaned, meaning it had no relationship to the master or main branch, and was used to publish documentation sites to GitHub Pages.

This approach makes sense because you don’t want to upload your application source code from the main branch to GitHub Pages—only the static assets such as HTML, CSS, JavaScript, and other resources required for a static site.

Visual Studio Older Downloads (ISO + Installer): 2022, 2019, 2017, 2015, 2013

author@junian.dev (Junian Triajianto) — Tue, 03 Feb 2026 19:00:00 +0700

Some people have asked me to list all official Microsoft Visual Studio download links from 2013 through 2026 for the Community, Professional, and Enterprise editions.

As you may know, Microsoft often hides older Visual Studio download links whenever a new version is released.

So, instead of letting my fellow developers go down the Microsoft website rabbit hole, I decided to collect and index the download links here.

Is It Safe and Genuine?

Good question. Never trust anything on the internet, including my website.

How to Set the Default Hugo Archetypes to the Next Day

author@junian.dev (Junian Triajianto) — Mon, 02 Feb 2026 19:00:00 +0700

If you’re using the Hugo static site generator, the default date and time assigned to new content is the current date and time. That’s perfectly normal, but what if you want to set the date to a different day, such as tomorrow or any other future date?

I often need this because I usually write drafts today and publish them the next day.

By default, the date and publishDate fields are typically defined in the archetypes/default.md file like this:

How to Deploy a Blazor WebAssembly Standalone App to GitHub Pages

author@junian.dev (Junian Triajianto) — Fri, 30 Jan 2026 19:00:00 +0700

If you have ever built a .NET Blazor WebAssembly app, you may have separated the frontend and backend. Since Blazor WASM is essentially just the frontend, you can deploy it to most static site hosting services, including GitHub Pages.

Let’s get straight to the point. Follow these steps to create, publish, and deploy your standalone Blazor WebAssembly app.

Install the latest .NET SDK.

Create a new Blazor WebAssembly standalone app project. Let’s name it BlazorApp.

Deploy a .NET 10 Blazor WebAssembly App to Cloudflare Pages

author@junian.dev (Junian Triajianto) — Wed, 28 Jan 2026 07:06:56 +0700

Blazor is a modern way to build web applications. Instead of relying on JavaScript, it allows you to use C#. That’s the dream! In this guide, you’ll learn how to create a web application using Blazor and deploy it online using Cloudflare Pages.

Enough introduction. Let’s get started!

Install .NET 10

Blazor works with C#. To start a Blazor project, you need to install the .NET SDK. Simply download it and follow the installation instructions from the official website.

Visual Studio Code (VS Code) and Its Forks with Free AI Assistants

author@junian.dev (Junian Triajianto) — Tue, 27 Jan 2026 19:00:00 +0700

Let me get this straight. This is not a review post or anything like that.

I’m simply sharing a list of Visual Studio Code forks that include AI features, along with the companies behind them. This might be useful to some people.

There’s no doubt that Microsoft knows how to build great IDEs. I’ve been a long-time fan of Visual Studio (the full version, not the Code version), and VS Code comes in as my second favorite IDE. Even though VS Code is open source, there weren’t many serious forks competing with it in the past.

Installing Multiple .NET Versions on macOS with Homebrew

author@junian.dev (Junian Triajianto) — Wed, 03 Dec 2025 09:25:59 +0700

If you’re a .NET developer using macOS, you may want to install multiple .NET SDK versions side by side. While you can do this manually, it can become a headache to maintain in the long term. As you install more SDKs, leftover files can accumulate and fill up your storage.

Uninstalling older versions manually can also be tedious. You can refer to the official documentation for removal instructions. I even wrote an uninstallation guide to remind myself how to do it properly.

Microsoft SQL Server Developer Downloads - 2025, 2022, 2019, 2017

author@junian.dev (Junian Triajianto) — Sat, 22 Nov 2025 07:45:43 +0700

You might need to install an older version of SQL Server during development for various reasons. Fortunately, Microsoft still provides installers for previous versions of SQL Server.

You can use the Developer Edition for development without worrying about licensing costs. SQL Server Developer is a full-featured, free edition licensed for use as a development and test database in non-production environments.

Be sure to use it only for development and not for production.

Microsoft SQL Server Express Downloads - 2025, 2022, 2019, 2017

author@junian.dev (Junian Triajianto) — Fri, 21 Nov 2025 17:30:27 +0700

If you’ve ever done software development for small businesses, you’re probably familiar with Microsoft SQL Server Express. SQL Server Express is a free edition of SQL Server, ideal for development and production use in desktop, web, and small server applications.

If your software requires a specific version of SQL Server Express, don’t worry. Below are the official download links for all available SQL Server Express versions.

Looking for SQL Server Developer edition?

Visual Studio Professional Downloads - 2026, 2022, 2019, 2017, 2015

author@junian.dev (Junian Triajianto) — Fri, 21 Nov 2025 10:00:00 +0700

When working with older .NET Framework projects, you may encounter issues when using the latest version of Visual Studio.

Fortunately, this can be easily resolved by installing an older version of Visual Studio.

If you’re a small business or part of a team, you likely already have a Visual Studio Professional license. That may lead you to wonder: where can you download older versions of Visual Studio Professional?

If you’re a solo developer, open-source contributor, or hobbyist, you can use the Visual Studio Community edition for free. If you’re working in an enterprise environment, you’ll need the Visual Studio Enterprise edition.

Visual Studio Enterprise Downloads - 2026, 2022, 2019, 2017, 2015

author@junian.dev (Junian Triajianto) — Fri, 21 Nov 2025 09:00:00 +0700

It’s sometimes frustrating to open old or legacy .NET Framework projects with the latest version of Visual Studio.

Fortunately, this can be easily solved by installing an older version of Visual Studio.

Due to company policy or other requirements, you may need the Visual Studio Enterprise edition. That often leads to the question: where can you download older versions of Visual Studio Enterprise?

If you’re a small business, you may want to get the Visual Studio Professional edition. If you’re a solo developer, open-source contributor, or hobbyist, you can use the Visual Studio Community edition for free.

Visual Studio Community Downloads - 2026, 2022, 2019, 2017, 2015, 2013

author@junian.dev (Junian Triajianto) — Wed, 12 Nov 2025 04:37:55 +0700

It’s sometimes frustrating to open old or legacy .NET Framework projects with the latest version of Visual Studio.

Fortunately, this can be easily solved by installing an older version of Visual Studio.

If you’re a small business, you may want to get the Visual Studio Professional edition. If you’re working in an enterprise environment, you’ll need the Visual Studio Enterprise edition.

While older Professional or Enterprise versions of Visual Studio are usually available on Microsoft’s website, the Community edition is not as easy to find.

SQL Server Management Studio - All Versions Download

author@junian.dev (Junian Triajianto) — Wed, 12 Nov 2025 01:00:00 +0700

If you’re a software engineer or database administrator working with Microsoft SQL Server, you’re probably familiar with SQL Server Management Studio, commonly known as SSMS.

In this post, I’ve compiled a list of all available SSMS versions that you can download directly from Microsoft’s servers. You may need a specific version for compatibility or testing purposes, and that’s perfectly reasonable.

Manual Installation

Download and install the version you need using the links below. All downloads are hosted by Microsoft, using domains such as aka.ms and go.microsoft.com, which are managed by Microsoft. I don’t host these files myself or use third-party servers, so the downloads are safe.

Microsoft SQL Server on Apple Silicon ARM64 Mac

author@junian.dev (Junian Triajianto) — Tue, 04 Nov 2025 19:00:00 +0700

Have you ever wanted to develop a web app on your Apple Silicon Mac (M1, M2, and so on …) that uses Microsoft SQL Server as its database engine? I often do that when working on ASP.NET apps, since they’re commonly paired with SQL Server. Most of the time, I can just use a remote SQL Server instance for development. But sometimes I need to run one locally.

Unfortunately, Microsoft SQL Server doesn’t officially support ARM64 macOS.

My Experience Fixing Flutter Android Google Play 16 KB Page Size Violation

author@junian.dev (Junian Triajianto) — Sun, 05 Oct 2025 17:38:08 +0700

Previously, I was doing some Google Play homework to update my app’s target SDK to at least Android SDK 35.

I thought I was done, but then Google sent me another violation email stating that my app now requires a 16 KB page size.

Google Play 16 KB Page Size Requirement

The deadline is November 1, 2025. I have a few weeks left, so here I am doing yet another annual Google Play homework.

Troubleshooting Flutter Android App to Target SDK 35 Upgrade

author@junian.dev (Junian Triajianto) — Tue, 30 Sep 2025 01:31:42 +0700

Another year, another chore: upgrading the Android app target SDK. This year, Google requires Target SDK 35.

So, here’s my experience upgrading an existing Flutter Android app. There were a few issues, but every problem has a solution.

Note: At the time of writing this tutorial, I was using Flutter v3.10.6.

Set Target SDK to 35

First, update the Android target SDK version manually by editing the android/local.properties file:

-flutter.compileSdkVersion=34
+flutter.compileSdkVersion=35
-flutter.targetSdkVersion=34
+flutter.targetSdkVersion=35
 flutter.minSdkVersion=21
 flutter.ndkVersion=26.1.10909125

After updating, build the Android bundle:

GitHub Actions Bot Username and Email Address

author@junian.dev (Junian Triajianto) — Mon, 29 Sep 2025 06:09:12 +0700

When writing a GitHub workflow, you may want it to automatically commit changes.

To distinguish between commits made by humans and those made by bots, set the committer name and email address to the GitHub Actions Bot.

Here are the details:

Username: github-actions[bot]
Email: 41898282+github-actions[bot]@users.noreply.github.com

You can configure these details for git with:

git config --global user.name "github-actions[bot]"
git config --global user.email "41898282+github-actions[bot]@users.noreply.github.com"

Here is an example workflow step that commits and pushes changes if any files have been modified:

How to Allow Underscore Headers in Nginx

author@junian.dev (Junian Triajianto) — Sun, 28 Sep 2025 02:43:24 +0700

Have you ever noticed that some HTTP request headers are missing when using Nginx?

I experienced this issue myself. Headers containing underscores (such as _Security_Token_ or _Device_ID_) were silently dropped by Nginx. This caused problems during mobile app testing, as token authentication kept failing.

It turns out that HTTP headers with underscores are uncommon and generally discouraged when possible.

The problem is, sometimes you don’t have control over how the upstream server works.

Run a .NET App from a Single C# File

author@junian.dev (Junian Triajianto) — Sat, 27 Sep 2025 05:44:27 +0700

With .NET 10, you can run a C# file directly, no project or solution file required!

This is especially useful for automation scripts, DevOps tasks, or quick experimentation.

In this tutorial, I’ll show you how it works on macOS (or any supported Unix-based system).

Getting Started with dotnet app run.cs

First, install the .NET 10 SDK.

On macOS, you can use Homebrew:

brew install junian/dotnet/dotnet-sdk@10.0

Create a new file and make it executable:

How to Fix Git Refusing to Merge Unrelated Histories Issue

author@junian.dev (Junian Triajianto) — Thu, 25 Sep 2025 03:00:21 +0700

When I tried to merge a git branch from a different repository, I got the following error:

% git merge development-branch
fatal: refusing to merge unrelated histories

Git is refusing to merge the branch because the histories do not share a common ancestor.

The error message fatal: refusing to merge unrelated histories means that the two branches have completely separate histories.

A Simple Mathematical Expression Tokenizer in C++

author@junian.dev (Junian Triajianto) — Tue, 16 Sep 2025 14:50:37 +0700

Back in college, I was given the task of implementing a math expression tokenizer function in C++.

It’s similar to LLM tokenization, but also quite different.

Given the following math expression as a string: (A+B)-9*X

The tokens are: [(, A, +, B, ), -, 9, *, X]

Another example with this math expression: 100+VARX+VARY-VARZ^2

The tokens are: [100, +, VARX, +, VARY, -, VARZ, ^, 2]

Here’s my implementation:

#include <iostream>

using namespace std;

bool isAlphabet(char chr)
{
    return ((chr >= 'a' && chr <= 'z') ||
            (chr >= 'A' && chr <= 'Z') ||
            chr == '$' || chr == '_');
}

bool isNumber(char chr)
{
    return (chr >= '0' && chr <= '9');
}

bool isOperator(char chr)
{
    return (chr == '+' || chr == '-' || chr == '/' || chr == '*' || chr == '^');
}

bool isBranch(char chr)
{
    return (chr == '(' || chr == ')');
}

bool isNull(char chr)
{
    return chr == '\0';
}

bool isSpace(char chr)
{
    return chr == ' ';
}

typedef struct MathTokenizer
{
    // the expression string
    string str;
    // pointer of char of expression
    char *pointer;

    // reset pointer to the first character of the expression
    void reset()
    {
        pointer = &str.at(0);
    }

    // get token from expression
    string getToken()
    {
        string result = "";

        // if pointer is null then end this process
        if (isNull(*pointer))
        {
            return "";
        }
        // if pointer is space then check next
        // ignore spaces
        else if (isSpace(*pointer))
        {
            pointer++;
            while (true)
            {
                if (isNull(*pointer))
                {
                    return "";
                }
                else if (isSpace(*pointer))
                {
                    pointer++;
                }
                else
                {
                    break;
                }
            }
        }

        // if operator or branch
        if (isOperator(*pointer) || isBranch(*pointer))
        {
            result = *pointer;
            pointer++;
        }
        // if variable / alphabet
        else if (isAlphabet(*pointer))
        {
            result = *pointer;
            pointer++;
            while (true)
            {
                if (isAlphabet(*pointer) || isNumber(*pointer))
                {
                    result += *pointer;
                }
                else
                {
                    break;
                }
                pointer++;
            }
        }
        // if number
        else if (isNumber(*pointer))
        {
            result = *pointer;
            pointer++;
            while (true)
            {
                if (isNumber(*pointer))
                {
                    result += *pointer;
                }
                else
                {
                    break;
                }
                pointer++;
            }
        }

        return result;
    }
} MathTokenizer;

int main()
{
    MathTokenizer exp;
    string s;

    while (true)
    {
        // input expression
        getline(cin, exp.str);
        exp.reset();

        // show tokens
        while ((s = exp.getToken()) != "")
        {
            printf("%s\n", s.c_str());
        }
    }

    return 0;
}

Get the complete source on my Git repository.

How to Set the Default GitHub Branch to 'master'

author@junian.dev (Junian Triajianto) — Tue, 09 Sep 2025 12:27:54 +0700

Consider this scenario where you create a new Git repository using the command-line tool.

$ mkdir new-repo
$ cd new-repo
$ git init
Initialized empty Git repository in /Users/junian/new-repo/.git/
$ touch README.md
$ git add .
$ git commit -m "Init"
[master (root-commit) d088569] Init
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 README.md
$ git status
On branch master
nothing to commit, working tree clean

As you can see, the git CLI still defaults to the master branch. I respect that and am fine with it.

How to Uninstall Old .NET SDK and Runtime Versions on macOS

author@junian.dev (Junian Triajianto) — Mon, 08 Sep 2025 09:43:28 +0700

If you’re a .NET developer using macOS, you might not realize that old versions of the .NET SDK and Runtime can take up valuable storage space. When you install a new .NET version, previous versions are usually left behind. This is often helpful for testing different .NET versions side by side.

Fortunately, you can easily identify all installed .NET versions on macOS using Terminal.

Check Installed .NET SDKs and Runtimes

First, let’s see which .NET SDKs and Runtimes are installed on your system. Run the following command:

SVN Cheat Sheet

author@junian.dev (Junian Triajianto) — Fri, 05 Sep 2025 05:48:31 +0700

This article contains a list of cheat sheets, common problems, and solutions that I encountered while working with the SVN version control system.

Although I don’t use SVN regularly anymore, there are still some projects that rely on it, such as older versions of Open Dental Software.

Hopefully, this cheat sheet will be helpful to some of you.

Get Current SVN Revision

Problem: I want to see the current revision for a specific SVN repository.

Git Pull 'Rebase in Progress' Issue

author@junian.dev (Junian Triajianto) — Mon, 10 Mar 2025 10:00:13 +0700

When I tried to pull a Git repository with SourceTree, I encountered the following error:

Rebase In Progress

It appears that you have a rebase in progress that was probably interrupted because of a conflict. If you’ve resolved the conflicts in your working copy, please choose whether to continue the rebase or abort this process where you are now.

Git Pull ‘Rebase In Progress’ issue

I didn’t remember whether I had been doing a Git rebase before. But well, let’s try to fix it in the Terminal.

WinForms 32-bit 'Designer Could Not Be Shown' Issue

author@junian.dev (Junian Triajianto) — Sun, 09 Mar 2025 10:30:40 +0700

When I was working on a company WinForms project in Visual Studio, I encountered the following error:

The designer could not be shown for this file because none of the classes within it can be designed. The designer inspected the following classes in the file: frmDataEditor — The base class ‘Client.Forms’ could not be loaded. Ensure the assembly has been referenced and that all projects have been built.

Here’s the complete Stack Trace:

Solving the Xamarin.Forms iOS 'Could Not Load the Framework IDEDistribution' Issue

author@junian.dev (Junian Triajianto) — Thu, 13 Feb 2025 16:03:36 +0700

Xamarin.Forms is deprecated as of May 2024. I get it. But some of us are still trying to maintain legacy Xamarin projects.

Not in the mood for reading? Watch the video instead.

It’s 2025, and I tried to run a Xamarin.Forms iOS project with the latest Xcode version on macOS. It failed with the following error message.

error HE0004: Could not load the framework ‘IDEDistribution’ (path: /Applications/Xcode.app/Contents/SharedFrameworks/IDEDistribution.framework/Versions/A/IDEDistribution): dlopen(/Applications/Xcode.app/Contents/SharedFrameworks/IDEDistribution.framework/Versions/A/IDEDistribution, 0x0001): Library not loaded: @rpath/AppThinning.framework/Versions/A/AppThinning Referenced from: <6F88EF9E-AE57-3231-9DD6-36E9CC59D914> /Applications/Xcode.app/Contents/SharedFrameworks/IDEDistribution.framework/Versions/A/IDEDistribution Reason: tried: ‘/Library/Frameworks/Xamarin.iOS.framework/Versions/16.4.0.23/lib/mlaunch/mlaunch.app/Contents/Frameworks/AppThinning.framework/Versions/A/AppThinning’ (no such file), ‘/Applications/Xcode.app/Contents/SharedFrameworks/IDEDistribution.framework/Versions/A/Frameworks/AppThinning.framework/Versions/A/AppThinning’ (no such file), ‘/Library/Frameworks/Xamarin.iOS.framework/Versions/16.4.0.23/lib/mlaunch/mlaunch.app/Contents/Frameworks/AppThinning.framework/Versions/A/AppThinning’ (no such file), ‘/Applications/Xcode.app/Contents/SharedFrameworks/IDEDistribution.framework/Versions/A/Frameworks/AppThinning.framework/Versions/A/AppThinning’ (no such file), ‘/Library/Frameworks/Xamarin.iOS.framework/Versions/16.4.0.23/lib/mlaunch/mlaunch.app/Contents/MonoBundle/AppThinning.framework/Versions/A/AppThinning’ (no such file)

freeCodeCamp Responsive Web Design Learning Journey (V8 / 2022 Curriculum)

author@junian.dev (Junian Triajianto) — Thu, 13 Feb 2025 04:56:21 +0700

As part of my personal development, I’ll regularly share my learning journey here. This page is dedicated to my progress in earning the freeCodeCamp Responsive Web Design certification. All updates will be in video format. If you’d like to stay updated as soon as new content is released, feel free to subscribe to my channel.

Learn HTML by Building a Cat Photo App

Automating Git Cleanup Across Multiple Directories with a Shell Script

author@junian.dev (Junian Triajianto) — Tue, 17 Dec 2024 15:42:26 +0700

Managing multiple Git repositories can be a tedious task. One task I often perform is ensuring each repository is clean and reset to its original state. Instead of manually navigating into each directory and running Git commands, I like to automate the process with a simple shell script.

Objective of the Script

This script automates two key tasks for all Git repositories in the current working directory:

git clean -fdx: Removes untracked files, directories, and ignored files.
git reset --hard HEAD: Resets the repository to the last commit, discarding all local changes.

The script loops through each directory, checks if it’s a Git repository, and then performs the cleanup operations.

How to Run Brave Browser without CORS Restriction

author@junian.dev (Junian Triajianto) — Mon, 18 Nov 2024 06:26:16 +0700

As a web developer, you likely need to test your REST API locally. When using a browser like Brave Browser, you might encounter issues such as the following message.

Access to fetch at ‘http://localhost:8080/api’ from origin ‘http://localhost:8000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ’no-cors’ to fetch the resource with CORS disabled.

How to Run Safari Browser without CORS Restriction

author@junian.dev (Junian Triajianto) — Sun, 17 Nov 2024 11:28:56 +0700

As a web developer, you likely need to test your REST API locally. When using a browser like Safari, you might encounter issues such as the following messages.

Origin http://localhost:8081 is not allowed by Access-Control-Allow-Origin. Status code: 200

Fetch API cannot load http://localhost:8080/api/ due to access control checks.

Failed to load resource: Origin http://localhost:8081 is not allowed by Access-Control-Allow-Origin. Status code: 200

Don’t worry, this is actually a strong security feature implemented by modern web browsers.

Fizz Buzz - LeetCode in C#

author@junian.dev (Junian Triajianto) — Thu, 14 Nov 2024 12:01:57 +0700

The Fizz Buzz problem is a classic exercise that is often used to teach basic programming concepts such as loops and conditionals.

In this article, I’ll show you my attempt to solve this problem.

Problem Description

Given an integer n, return a string array answer (1-indexed) where:

answer[i] == "FizzBuzz" if i is divisible by 3 and 5.
answer[i] == "Fizz" if i is divisible by 3.
answer[i] == "Buzz" if i is divisible by 5.
answer[i] == i (as a string) if none of the above conditions are true.

Example 1:

Input: n = 3
Output: ["1","2","Fizz"]

Example 2:

Input: n = 5
Output: ["1","2","Fizz","4","Buzz"]

Example 3:

Input: n = 15
Output: ["1","2","Fizz","4","Buzz","Fizz","7","8","Fizz","Buzz","11","Fizz","13","14","FizzBuzz"]

Constraints:

1 <= n <= 10⁴

Intuition

When breaking down the problem, the task is to iterate through a sequence of numbers while applying simple divisibility rules to determine the correct output for each number.

Palindrome Number - LeetCode in C#

author@junian.dev (Junian Triajianto) — Sun, 10 Nov 2024 17:03:55 +0700

Problem

Given an integer x, return true if x is a palindrome , and false otherwise.

Example 1:

Input: x = 121
Output: true
Explanation: 121 reads as 121 from left to right and from right to left.

Example 2:

Input: x = -121
Output: false
Explanation: From left to right, it reads -121. From right to left, it becomes 121-. Therefore it is not a palindrome.

Example 3:

Input: x = 10
Output: false
Explanation: Reads 01 from right to left. Therefore it is not a palindrome.

Constraints:

Remove Duplicates From Sorted Array - LeetCode in C#

author@junian.dev (Junian Triajianto) — Sat, 09 Nov 2024 14:46:13 +0700

Problem Description

Given an integer array nums sorted in non-decreasing order, remove the duplicates in-place such that each unique element appears only once. The relative order of the elements should be kept the same. Then return the number of unique elements in nums.

Consider the number of unique elements of nums to be k, to get accepted, you need to do the following things:

Change the array nums such that the first k elements of nums contain the unique elements in the order they were present in nums initially. The remaining elements of nums are not important as well as the size of nums.
Return k.

Custom Judge:

Two Sum - LeetCode in C# - Hash Table Solution

author@junian.dev (Junian Triajianto) — Fri, 08 Nov 2024 18:51:32 +0700

Problem

Given an array of integers nums and an integer target, return indices of the two numbers such that they add up to target.

You may assume that each input would have exactly one solution, and you may not use the same element twice.

You can return the answer in any order.

Example 1:

Input: nums = [2,7,11,15], target = 9
Output: [0,1]
Explanation: Because nums[0] + nums[1] == 9, we return [0, 1].

Example 2:

Two Sum - LeetCode in C# - Brute force approach

author@junian.dev (Junian Triajianto) — Fri, 08 Nov 2024 13:39:47 +0700

You might want to read the Hash Table solution. It’s better.

Intuition

When I first encountered the Two Sum problem, my initial thought was to check each possible pair of numbers in the array. If a pair sums to the target value, then that would be our solution.

This brute force method should work, but intuitively, I thought there might be more efficient ways.

However, starting with the simplest idea often helps to understand the problem better and refine the approach.

How to Run Microsoft Edge without CORS Restriction

author@junian.dev (Junian Triajianto) — Fri, 25 Oct 2024 12:59:57 +0700

As a web developer, you likely need to test your REST API locally. When using a browser like Microsoft Edge, you might encounter issues such as the following message.

Access to fetch at ‘http://localhost:8000/api’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ’no-cors’ to fetch the resource with CORS disabled.

Removing Full-Screen Intent Permission from Flutter Android

author@junian.dev (Junian Triajianto) — Sat, 12 Oct 2024 13:13:36 +0700

Today I’m trying to submit a new version of the Flutter Android app to Google Play Store. I didn’t put any new features, just some bug fixes. I didn’t even change the dependencies. Normally no issue whatsoever when I send it to the Google Play Store.

But, something unexpected happened. I got an error message from the Play Store with the following message.

Your app uses the USE_FULL_SCREEN_INTENT permission. From May 31, 2024, some apps may no longer be eligible to have this permission pre-granted at install. Apps that aren’t eligible or approved for this, must request permission from the user to launch an activity with full-screen intent. If the permission isn’t granted and you don’t check for this, your app will crash when full-screen intent is being used.

How to Ensure Rosetta 2 is Installed on macOS

author@junian.dev (Junian Triajianto) — Wed, 09 Oct 2024 09:00:00 +0700

If you are using a Mac with Apple Silicon (M1 / M2 / M3), you may encounter software or applications that are not natively designed for the ARM-based architecture.

To run these Intel-based apps on your Mac, you need Rosetta 2, a translation tool that enables compatibility.

This guide will walk you through how to ensure that Rosetta 2 is installed on your macOS.

To get started, you’ll need to open the Terminal app on your Mac. You can find it in the Applications > Utilities folder, or you can use Spotlight to search for it.

How to Run Google Chrome without CORS Restriction

author@junian.dev (Junian Triajianto) — Mon, 07 Oct 2024 10:02:06 +0700

If you’re a Web developer you probably have a task to test your REST API locally. When you’re using a browser like Google Chrome, you may experience some issues like the following message.

Access to fetch at ‘http://localhost:8080/api’ from origin ‘http://localhost:8000’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ’no-cors’ to fetch the resource with CORS disabled.

Folder Browser Dialog on Windows with C#

author@junian.dev (Junian Triajianto) — Sun, 05 May 2024 13:42:11 +0700

In this guide, I’ll walk you through the process of implementing a folder selection UI using C#.

In many applications, users need to specify a folder where certain files will be saved or retrieved. Providing a user-friendly way to select folders enhances the overall usability of your application.

To implement a folder selection dialog in C#, we’ll use the FolderBrowserDialog class provided by the .NET framework. This class allows users to browse and select folders from their file system with ease.

Can't Open Form [Design] View in WinForms Project

author@junian.dev (Junian Triajianto) — Sun, 05 May 2024 09:48:56 +0700

Have you ever been developing a WinForms project and encountered a situation where you couldn’t use the View Designer?

This problem can occur when you’re using the latest SDK-style project but are still targeting an older version of .NET, such as 4.8 or below.

Rest assured, you’re not alone. The solution is rather straightforward.

In Visual Studio, simply right-click on your project file and select Edit Project File.

Now, you just need to include a new ItemGroup for your Form files.

VSCode Avalonia Extension Download .NET Runtime Issue

author@junian.dev (Junian Triajianto) — Wed, 17 Apr 2024 16:08:38 +0700

So I want to start using AvaloniaUI on macOS, but suddenly it always happens.

AvaloniaTeam.vscode-avalonia requested to download the .NET Runtime. Downloading .NET version(s) 8.0.4~arm64 ….Error Failed to download .NET 8.0: Web Request to https://dot.net/v1/dotnet-install.sh Failed: n[r].split is not a function. Aborting. Please ensure that you are online.

To solve that, just open the VSCode settings.json and configure it with the following settings.

"dotnetAcquisitionExtension.existingDotnetPath": [
    {
        "extensionId": "ms-dotnettools.csharp",
        "path": "/usr/local/share/dotnet/dotnet"
    },
    {
        "extensionId": "ms-dotnettools.csdevkit", 
        "path": "/usr/local/share/dotnet/dotnet"
    },
    {
        "extensionId": "visualstudiotoolsforunity.vstuc", 
        "path": "/usr/local/share/dotnet/dotnet"
    },
    {
        "extensionId": "AvaloniaTeam.vscode-avalonia", 
        "path": "/usr/local/share/dotnet/dotnet"
    },
]

That’s it, now you can use AvaloniaUI on VSCode with auto-complete and everything.

Retrieving Keychain Passwords in Swift for macOS

author@junian.dev (Junian Triajianto) — Wed, 17 Apr 2024 10:45:40 +0700

In Swift development for macOS applications, securing sensitive information like passwords is equally important. macOS provides a secure storage mechanism called Keychain, where you can store passwords, keys, tokens, and other sensitive data. This tutorial will guide you through the process of retrieving passwords from the Keychain in Swift for macOS applications.

To work with the Keychain, you need to import the Security framework in your Swift file. Now, let’s create a function that retrieves passwords from the Keychain. Add the following function to your Swift file.

How to Enter an x86_64 Shell on macOS: A Guide for Apple Silicon Users

author@junian.dev (Junian Triajianto) — Tue, 31 Oct 2023 06:44:28 +0700

If you’re the owner of an Apple Silicon Mac, you might find yourself in situations where you need to run software designed for the x86_64 or Intel environment. This could be for compiling and installing the Apple Game Porting Toolkit or simply testing your application in an x86_64 environment. The good news is, macOS offers a seamless way to switch between these environments using a feature called Rosetta 2. In this guide, we’ll walk you through the steps to enter an x86_64 shell on your ARM64 Mac, making it a breeze to switch back and forth as needed.

How to Fix the 'zsh compinit: insecure directories' Error on macOS

author@junian.dev (Junian Triajianto) — Mon, 30 Oct 2023 20:34:43 +0700

If you’ve recently installed the Homebrew package manager on macOS, you might encounter an error message in your Terminal similar to this:

zsh compinit: insecure directories, run compaudit for list.
Ignore insecure directories and continue [y] or abort compinit [n]?
compinit: initialization aborted

This error can be frustrating, but you don’t need to worry. This guide will walk you through the steps to resolve it. We’ll cover what causes the error and how to fix it quickly.

How To Import and Manipulate Large Datasets in Python Using Pandas

author@junian.dev (Junian Triajianto) — Sat, 18 Apr 2020 05:52:47 +0700

As a Python developer, you will often have to work with large datasets. Python is known for being a language that is well-suited to this task.

With that said, Python itself does not have much in the way of built-in capabilities for data analysis. Instead, data analysts make use of a Python library called pandas.

In this article, you will learn how to import and manipulate large datasets in Python using pandas.

How to Fix Hugo JSON-LD Escaping Problem

author@junian.dev (Junian Triajianto) — Thu, 02 Apr 2020 21:35:54 +0700

I’ve been using Hugo static site generator for a long time. It’s from version 0.34 if I remember correctly. I’ve been using that version for a year and so far it works just fine. I build my theme based on that version too. And it’s been forever I keep the theme code as it is because I thought that’s good enough.

Recently I decided to give the update for Hugo version 0.68.3. The purpose is just to want to catch up with the latest version.

String Comparison by Ignoring Case in C#

author@junian.dev (Junian Triajianto) — Thu, 02 Apr 2020 10:19:09 +0700

String value in C# is case-sensitive. That means lower case and upper case texts are considered different when you compare them.

But, there are some cases when you need to compare two strings and ignore their case. For example when you’re building a search engine.

To compare two strings by ignoring their case, you can just put an additional parameter when you’re using string.Equals() method.

Take a look the following snippet as an example.

Base64 String Encoding and Decoding in C#

author@junian.dev (Junian Triajianto) — Tue, 31 Mar 2020 20:28:58 +0700

Base64 is a radix-64 ASCII string format that represents binary data. Each digit of base64 encoded string represents exactly 6 bits of data.

It is designed to carry binary data across platforms that only support text content.

The usage is mostly popular in Web platform. For example it’s being used to embed image files inside HTML or embed font file inside CSS.

Even though the main purpose is to store binary data into a text content, base64 sometimes is being used to hide a text. For example to prevent the content of your website scraped by robot.

'Hello, World!' Program in C#

author@junian.dev (Junian Triajianto) — Tue, 31 Mar 2020 19:25:12 +0700

Hi, welcome to C# FAQs. I create this section to collect and write frequently used C# methods. I will also write the description, or the step by step tutorial with simple english so you can understand it easily.

For the first post, I’ll show you how to write a C# program that prints “Hello, World!” on your screen. This is the simplest program in any programming language. It’s a good first step for anyone learning to code. After you finish this, you’ll understand the basic syntax in C#.

Save C# Image Object into Oracle BLOB

author@junian.dev (Junian Triajianto) — Wed, 13 Nov 2019 06:00:13 +0700

Some of my friends requested me to make a tutorial about the Oracle database and C#. This time, I’d like to share about how to Save Image or Picture from C# Object into Oracle BLOB Type. It’s very easy if you know the trick.

To make the tutorial simple, let’s assume a table with 1 field. It’ll be used to store a collection of photos.

CREATE TABLE PHOTO 
(
  PHOTO_BIN BLOB 
);

Next, open or create a new C# project. Add Oracle.ManagedDataAccess NuGet package to your project.

Simple OpenVPN Server Set Up with Docker

author@junian.dev (Junian Triajianto) — Thu, 22 Aug 2019 11:02:53 +0700

When I was doing some works, there was a requirement to whitelist development machine by IP Address from the United States. Since I was located in one of South East Asia countries, obviously I didn’t have a connection with US IP Address. So it would be reasonable to buy a VPN service for this.

But why buy a VPN service if we could use the existing VPS and set up a VPN server on it?

Passwordless SSH Server on macOS

author@junian.dev (Junian Triajianto) — Tue, 07 May 2019 09:41:30 +0700

One time I need to add access my MacBook Pro remotely using ssh from a Windows 10 machine. It’s very easy actually to enable ssh server on macOS. You just need to open System Preferences → Sharing → check Remote Login and that’s it. Simply connect it using your client machine with ssh username@ip-address.

The problem is, by default this ssh server only accept password login.

To enable passwordless login using private key authentication, we need to configure further. Open your favorite terminal application on your macOS. Edit sshd_config file using your favorite text editor. The file is located at /etc/ssh/sshd_config. Since it requires admin credential, you need to edit it using sudo. Here is an example using vim editor.

QR Code Generation on Terminal

author@junian.dev (Junian Triajianto) — Tue, 16 Apr 2019 14:50:36 +0700

There was a time when I need to transfer data from my MacBook Pro to my iPhone. There are many ways to transfer the data.

But one time, my Mac and my iPhone are on a different network in the same place.

I need to use an ssh client from my iPhone. But the iOS app unable to generate ssh keys. So I need to create the key from my MacBook Pro.

Text-Based Password Manager

author@junian.dev (Junian Triajianto) — Tue, 16 Apr 2019 10:57:29 +0700

Everyone needs a password manager. I have dozens of credentials to several websites. Re-using password across websites is no. Memorizing dozens of different password is also a no. The only way is to use a password manager.

For so long, I’ve been searching for the simplest possible password manager. I only need two criteria: plaintext and git-friendly.

Why Plaintext?

Yeah, you heard that right, it has to be plaintext. But that doesn’t mean it has to be stored as real plain text, where everyone or every machine can read it. That would be so wrong. What I mean is it has to be stored as simple text files, not binary. If you ever see the content of your public and private ssh keys, that’s what I mean.

How to Create a Local Git Server

author@junian.dev (Junian Triajianto) — Mon, 15 Apr 2019 13:17:17 +0700

In this tutorial, I’ll show you how to create a git server in your local network.

You might be thinking why would I? Usually, when we’re working git repository, we go to online services like GitHub. We create a private project for privacy. But that’s not enough for all cases.

You maybe need a git repository to store password. Putting it in a cloud service is not cool.

There is a very simple way to set up your own git server.

Full-Text RSS in Hugo

author@junian.dev (Junian Triajianto) — Tue, 26 Feb 2019 13:15:56 +0700

How to include full blog content in Hugo-generated site's RSS

Fixing 'Managed Debugging Assistant LoaderLock' Error

author@junian.dev (Junian Triajianto) — Fri, 14 Sep 2018 12:36:45 +0700

Recently I’ve been doing some tasks that require me to build OpenDental from source code. It is a Dental Practice software with some graphical features. They are developing those graphical features by using using DirectX API.

This software have been developed since a long time ago so I expect that there will be some incompatibility if I’m using latest Visual Studio. In my case, I use Visual Studio 2017 v15.8.4 to compile and run the program.

Complete C# String Hash Functions

author@junian.dev (Junian Triajianto) — Fri, 14 Sep 2018 06:34:40 +0700

For a while I’ve been seeing my blog traffic and surprisingly there are some of you are landed here by searching about MD5 string hash in C#, specifically used for storing password. I wrote the first draft of that tutorial when I was still in college while learning C# as a student, so it’s really old tutorial.

As we know, MD5 isn’t recommended anymore because it is designed to be very fast and efficient. By using modern computers and techniques, it is possible to “brute force” the hash output, in order to retrieve the original input. Because of this, many security experts suggest not to use it for password hashing.

Solving Sharepoint ClientContext Socket Exception in C#

author@junian.dev (Junian Triajianto) — Fri, 07 Sep 2018 06:39:53 +0700

So, you’ve been writing a Sharepoint client application and it’s running just fine. After several weeks or months, you noticed some errors were showing up. If you see a lot of SocketException error messages like following snippet, then this article is for you.

System.Net.WebException: Unable to connect to the remote server ---> System.Net.Sockets.SocketException: Only one usage of each socket address (protocol/network address/port) is normally permitted 127.0.0.1:443
     at System.Net.Sockets.Socket.DoConnect(EndPoint endPointSnapshot, SocketAddress socketAddress)
     at System.Net.ServicePoint.ConnectSocketInternal(Boolean connectFailure, Socket s4, Socket s6, Socket& socket, IPAddress& address, ConnectSocketState state, IAsyncResult asyncResult, Exception& exception)

In my previous article about Sharepoint CSOM Socket Exception, I wrote about on how to solve this issue by editing some registry values. I did it and worked beautifully, but only for several days.

Creating Xamarin.Mac App Distribution in DMG File

author@junian.dev (Junian Triajianto) — Sat, 25 Aug 2018 05:57:45 +0700

When you finished developing a macOS desktop app using Xamarin and want to distribute it to end user, you have 3 choices using Visual Studio: Apple App Store distribution, save to disk as .app file, and portable .pkg installer. Except for .app distribution, you’re going to need an Apple Developer ID to create them.

Now, what if you currently for some reasons don’t have an Apple Developer ID.

One solution is you can just zip the .app file and distribute it. But personally, I think that’s not an elegant solution because some users don’t know that they should put the file to /Applications/ folder. Even though that’s not mandatory, it’s better to organize all the apps inside /Applications/ folder.

Inserting an Ad Unit to Hugo Content without Shortcode

author@junian.dev (Junian Triajianto) — Thu, 09 Aug 2018 09:12:59 +0700

Recently I just discovered that Google AdSense now have a native in-article ad unit. This is interesting because this ad unit blend well with the content but reader will still easily tell if it’s an ad. Since Google already optimize it, we as publisher won’t need to worry too much about intrusive ads in the middle of article.

So now I want to try put it in my Hugo static site. You can actually use hugo shortcode for this, there is nothing wrong with that. But writing a simple html tag is easier than writing a shortcode in the middle of article. Not to mention, your markdown file will still valid based on CommonMark spec.

Sharepoint CSOM Socket Exception

author@junian.dev (Junian Triajianto) — Mon, 06 Aug 2018 13:45:14 +0700

UPDATE (2018-09-05): New additional solution by changing TCP TIME_WAIT delay.

Months ago I’ve made a C# script to synchronize data from external source into a Sharepoint Site using Sharepoint CSOM and PnP. It’s been running just fine until recently it stopped working. I saw the logs and see a lot of SocketException error messages like the one below.

System.Net.WebException: Unable to connect to the remote server ---> System.Net.Sockets.SocketException: Only one usage of each socket address (protocol/network address/port) is normally permitted 127.0.0.1:443
   at System.Net.Sockets.Socket.DoConnect(EndPoint endPointSnapshot, SocketAddress socketAddress)
   at System.Net.ServicePoint.ConnectSocketInternal(Boolean connectFailure, Socket s4, Socket s6, Socket& socket, IPAddress& address, ConnectSocketState state, IAsyncResult asyncResult, Exception& exception)

So then I did a research and found a stackoverflow.com thread which have a simple explanation by jrista on why it happened.

Wrap Image with Figure Tag on Hugo without Shortcode

author@junian.dev (Junian Triajianto) — Sun, 05 Aug 2018 00:13:16 +0700

Recently I’ve been thinking of migrating my blog from Blogger.com to a static site. After doing some research I decided to use Hugo.

One thing I like about Hugo is that they can produce a site from Markdown files. Now this markdown file is following CommonMark spec by default, which is great. But I have a case to always wrap images of my content inside a figure tag.

I actually can do this using Hugo shortcode, but I don’t want to use that because I want to make sure my markdown files follow CommonMark spec. So it must be pure Markdown content with frontmatter, without filling it with a custom rule from Hugo.

CMake Version 3 Installation on Ubuntu 14.04

author@junian.dev (Junian Triajianto) — Sat, 04 Aug 2018 10:25:08 +0700

Recently I’ve been trying to do research on OpenAirInterface using a LimeSDR. Since I’m using their master branch source code, I have to use the old Ubuntu 14.04. For some reasons, I need to test it using the latest LimeSuite source code and compile it myself.

One thing I realized when I did building process for LimeSuite, it throws an error saying that the installed cmake version in the system doesn’t meet the requirements. It needs cmake version 3, but mine was version 2.

Can't Start Android Emulator on macOS? It's Probably Conflicting with Docker

author@junian.dev (Junian Triajianto) — Mon, 05 Jun 2017 08:55:00 +0000

Weeks ago, when I was working on Android project, I noticed something unusual on my macOS machine. I couldn’t start my Android emulator. Every time I built the app, it just never showed up.

I rarely use real phone to test my app since Google now provides best Android emulator experience. So that’s why I always use Android emulator as first solution to test my app. So this kind of problem really made me down.

Xamarin Mobile Apps Continuous Integration and Delivery with Jenkins and HockeyApp

author@junian.dev (Junian Triajianto) — Tue, 30 May 2017 09:38:00 +0000

Laziness is probably the middle name of every programmer, especially when it comes to doing repetitive (usually) boring stuff, again and again. One of them is building app from latest source code.

Traditionally, we commit our work, pull our colleague’s code, merge them, build the binary file, and send it to testers. Not sure how many times we do that stuff every day.

Luckily, there is always a solution for that kind of repetitive task, by using Continuous Integration (CI) and Continuous Delivery (CD).

Fullscreen Video Background Control for Xamarin.Forms

author@junian.dev (Junian Triajianto) — Fri, 03 Mar 2017 07:17:00 +0000

One of the cool trend on mobile UI I’ve seen a lot is using video as View background. You can see it on some big mobile app products like Tumblr, Spotify, and Vine. As you can see, they have this cool Home View with sign in and sing up button with video playing in background. This feature is so cool and can make your app look more professional.

This time, I’ll show you how to implement it in Xamarin.Forms app. All we need is to implement two custom renderers for Android and iOS each.

🏆 Best Mobile Article of March 2017 : Second Prize at CodeProject.

Creating Video View Control for Xamarin.Forms

Let’s create a new Xamarin.Forms PCL project first and name it BackgroundVideo. Now let’s head to the PCL library and create a new class called Video inherited from Xamarin.Forms.View.

using System;  
using Xamarin.Forms;  
  
namespace BackgroundVideo.Controls  
{  
  public class Video : View  
  {  
  }  
}

For the sake of the tutorial, we’re going to make this control with simple requirements.

We need a bindable property to point which video to be displayed. I’m going to call it Source property. It’s a string to locate which video file to be played. On iOS, Source property is relative to Resources directory as for Android, it is relative to Assets directory.

public static readonly BindableProperty SourceProperty =  
    BindableProperty.Create(  
    nameof(Source),  
    typeof(string),  
    typeof(Video),  
    string.Empty,  
    BindingMode.TwoWay);  
  
public string Source  
{  
    get { return (string)GetValue(SourceProperty); }  
    set { SetValue(SourceProperty, value); }  
}

Next thing we need is a boolean to define if we want the video in loop or not. Let’s call this property Loop. By default, I set this value as true so when you set a video Source property, it would be looped by default.

Finally, we’re going to need a callback fired when video is finished. For simplicity, I use Action class called OnFinishedPlaying. You can modify it to event or anything you comfortable with.

public static readonly BindableProperty LoopProperty =  
    BindableProperty.Create(  
    nameof(Loop),  
    typeof(bool),  
    typeof(Video),  
    true,  
    BindingMode.TwoWay);  
  
public bool Loop  
{  
    get { return (bool)GetValue(LoopProperty); }  
    set { SetValue(LoopProperty, value); }  
}  
  
public Action OnFinishedPlaying { get; set; }

After we created this class, next thing to do is to implement custom renderers for both iOS and Android.

Video View Control iOS Custom Renderer

First thing to do is to create a custom renderer class called VideoRenderer inherited from ViewRenderer<Video, UIView>. The idea is to use iOS native video player with the help of MPMoviePlayerController class and set its native control to our Video custom view. Also we’re going to need an NSObject to listen the event from video player wether it is ended or not.

using System;  
using System.IO;  
using BackgroundVideo.Controls;  
using BackgroundVideo.iOS.Renderers;  
using Foundation;  
using MediaPlayer;  
using UIKit;  
using Xamarin.Forms;  
using Xamarin.Forms.Platform.iOS;  
  
[assembly: ExportRenderer(typeof(Video), typeof(VideoRenderer))]  
namespace BackgroundVideo.iOS.Renderers  
{  
  public class VideoRenderer : ViewRenderer<Video, UIView>  
  {  
    MPMoviePlayerController videoPlayer;  
    NSObject notification = null;  
  }  
}

To start iOS video player, we need to check wether the video from Source property exists in Resources budnle or not. If it doesn’t exist, we’ll display an empty view.

If the video file exists, we need to create MPMoviePlayerController and parse the location of the video file as NSUrl. To make our custom control clear, without border or anything, we need to set ControlStyle to MPMovieControlStyle.None and background color to UIColor.Clear.

Also, we probably will have one video file for any resolution. You don’t want it to look stretched on some device, right? To make the video resolution looks consistent, we need to set video player ScalingMode to MPMovieScalingMode.AspectFill.

We also have this Loop property to define wether the video playing will be looped or not. To set it to loop, we need to change video player RepeatMode to MPMovieRepeatMode.One. Otherwise, set it to MPMovieRepeatMode.None.

Finally, to make video player play the file, we call PrepareToPlay() function. To display the video to our custom control, we need to use SetNativeControl() function.

void InitVideoPlayer()  
{  
    var path = Path.Combine(NSBundle.MainBundle.BundlePath, Element.Source);  
  
    if (!NSFileManager.DefaultManager.FileExists(path))  
    {  
      Console.WriteLine("Video not exist");  
      videoPlayer = new MPMoviePlayerController();  
      videoPlayer.ControlStyle = MPMovieControlStyle.None;  
      videoPlayer.ScalingMode = MPMovieScalingMode.AspectFill;  
      videoPlayer.RepeatMode = MPMovieRepeatMode.One;  
      videoPlayer.View.BackgroundColor = UIColor.Clear;  
      SetNativeControl(videoPlayer.View);  
      return;  
    }  
  
    // Load the video from the app bundle. 
    NSUrl videoURL = new NSUrl(path, false);  
  
    // Create and configure the movie player. 
    videoPlayer = new MPMoviePlayerController(videoURL);  
  
    videoPlayer.ControlStyle = MPMovieControlStyle.None;  
    videoPlayer.ScalingMode = MPMovieScalingMode.AspectFill;  
    videoPlayer.RepeatMode = Element.Loop ? MPMovieRepeatMode.One : MPMovieRepeatMode.None;  
    videoPlayer.View.BackgroundColor = UIColor.Clear;  
    foreach (UIView subView in videoPlayer.View.Subviews)  
    {  
      subView.BackgroundColor = UIColor.Clear;  
    }  
  
    videoPlayer.PrepareToPlay();  
    SetNativeControl(videoPlayer.View);  
}

The rest of the code is to override OnElementChanged and OnElementPropertyChanged function so it can be functionally working from Xamarin.Forms project. Under OnElementChanged, we need to listen to video player playback finish event and invoke OnFinishedPlaying action. The following snippet is the simplest code necessary to make it work.

protected override void OnElementChanged(ElementChangedEventArgs<Video> e)  
{  
    base.OnElementChanged(e);  
  
    if (Control == null)  
    {  
      InitVideoPlayer();  
    }  
    if (e.OldElement != null)  
    {  
      // Unsubscribe  
      notification?.Dispose();  
    }  
    if (e.NewElement != null)  
    {  
      // Subscribe  
      notification = MPMoviePlayerController.Notifications.ObservePlaybackDidFinish((sender, args) =>  
      {  
        /* Access strongly typed args */  
        Console.WriteLine("Notification: {0}", args.Notification);  
        Console.WriteLine("FinishReason: {0}", args.FinishReason);  
  
        Element?.OnFinishedPlaying?.Invoke();  
      });  
    }  
}  
  
protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)  
{  
    base.OnElementPropertyChanged(sender, e);  
    if (Element == null || Control == null)  
      return;  
  
    if (e.PropertyName == Video.SourceProperty.PropertyName)  
    {  
      InitVideoPlayer();  
    }  
    else if (e.PropertyName == Video.LoopProperty.PropertyName)  
    {  
      var liveImage = Element as Video;  
      if (videoPlayer != null)  
        videoPlayer.RepeatMode = Element.Loop ? MPMovieRepeatMode.One : MPMovieRepeatMode.None;  
    }  
}

Now that iOS implementation is completed, let’s head to our Android project.

Video View Custom Renderer for Android

Create a new custom renderer on Android project and let’s name it VideoRenderer, too. We’ll inherit this renderer with ViewRenderer<Video, FrameLayout>, meaning it will be displayed as FrameLayout in native Android control.

One thing that made Android implementation a bit complicated is that we need two kind of views if you want to cover old Android versions. If you just want to cover modern Android OS from Ice Cream Sandwich or more, you can just focus on TextureView implementation, if not you’ll also need to implement it using VideoView.

Please note that VideoView implementation here is not optimal. Maybe you’ll notice some flickering. That’s why I add view called _placeholder. This is just an empty view. It’ll be displayed when no video playing or when in video source changed transition. If the video file ready to play and display, _placeholder will be hidden.

using System;  
using Android.Graphics;  
using Android.Graphics.Drawables;  
using Android.Media;  
using Android.OS;  
using Android.Runtime;  
using Android.Views;  
using Android.Widget;  
using BackgroundVideo.Controls;  
using BackgroundVideo.Droid.Renderers;  
using Xamarin.Forms;  
using Xamarin.Forms.Platform.Android;  
  
[assembly: ExportRenderer(typeof(Video), typeof(VideoRenderer))]  
namespace BackgroundVideo.Droid.Renderers  
{  
  public class VideoRenderer : ViewRenderer<Video, FrameLayout>,  
                 TextureView.ISurfaceTextureListener,  
                 ISurfaceHolderCallback  
  {  
    private bool _isCompletionSubscribed = false;  
  
    private FrameLayout _mainFrameLayout = null;  
  
    private Android.Views.View _mainVideoView = null;  
    private Android.Views.View _placeholder = null;  
  
  }  
}

Now before we thing about what video container to use, we need to implement the video player itself. Android already provide us with their MediaPlayer class. We’ll need to use this object and make sure it only created once. We can reuse the same object if we change the video source.

We need to set Completion event to implement our OnFinishedPlaying callback. We also need to set Looping property to our custom Loop property.

There is one thing that different from our iOS implementation, there is no easy property set to display video resolution as aspect fill! That means we need to implement our own method into custom function called AdjustTextureViewAspect(). This function will be called on VideoSizeChanged callback. We’ll talk about this implementation later.

private MediaPlayer _videoPlayer = null;  
internal MediaPlayer VideoPlayer  
{  
  get  
  {  
    if (_videoPlayer == null)  
    {  
      _videoPlayer = new MediaPlayer();  
  
      if (!_isCompletionSubscribed)  
      {  
        _isCompletionSubscribed = true;  
        _videoPlayer.Completion += Player_Completion;  
      }  
  
      _videoPlayer.VideoSizeChanged += (sender, args) =>  
      {  
        AdjustTextureViewAspect(args.Width, args.Height);  
      };  
  
      _videoPlayer.Info += (sender, args) =>  
      {  
        Console.WriteLine("onInfo what={0}, extra={1}", args.What, args.Extra);  
        if (args.What == MediaInfo.VideoRenderingStart)  
        {  
          Console.WriteLine("[MEDIA_INFO_VIDEO_RENDERING_START] placeholder GONE");  
          _placeholder.Visibility = ViewStates.Gone;  
        }  
      };  
  
      _videoPlayer.Prepared += (sender, args) =>  
      {  
        _mainVideoView.Visibility = ViewStates.Visible;  
        _videoPlayer.Start();  
        if (Element != null)  
          _videoPlayer.Looping = Element.Loop;  
      };  
    }  
  
    return _videoPlayer;  
  }  
}  
  
private void Player_Completion(object sender, EventArgs e)  
{  
  Element?.OnFinishedPlaying?.Invoke();  
}

Now that we have our video player object, next thing is to create function that play video from Source property. Please remember that video file on Android need to be stored under Assets directory. We can open this file by using Assets.OpenFd(fullPath) function.

If the file doesn’t exist, it’ll throw Java.IO.IOException. That means we don’t need to display anything on our video container.

If the file exists, we just need to reset our video player, then set data source based on previous step. We can’t just play the video directly, so we need to prepare it first. When preparation complete, it’ll trigger Prepared event and display the video to one of our implemented video view from previous step.

private void PlayVideo(string fullPath)  
{  
  Android.Content.Res.AssetFileDescriptor afd = null;  
  
  try  
  {  
    afd = Context.Assets.OpenFd(fullPath);  
  }  
  catch (Java.IO.IOException ex)  
  {  
    Console.WriteLine("Play video: " + Element.Source + " not found because " + ex);  
    _mainVideoView.Visibility = ViewStates.Gone;  
  }  
  catch (Exception ex)  
  {  
    Console.WriteLine("Error openfd: " + ex);  
    _mainVideoView.Visibility = ViewStates.Gone;  
  }  
  
  if (afd != null)  
  {  
    Console.WriteLine("Lenght " + afd.Length);  
    VideoPlayer.Reset();  
    VideoPlayer.SetDataSource(afd.FileDescriptor, afd.StartOffset, afd.Length);  
    VideoPlayer.PrepareAsync();  
  }  
}

As previously mentioned, Android doesn’t provide us easy property to scale our video to aspect fill. You know it yourself that Android devices have so many screen resolution so keep the video like it is is not an option. We need to scale it properly so it won’t look stretched.

Good news is, we can do that if we use TextureView. Bad news is for now I don’t know how to implement it with VideoView. But it’s better than nothing right?

The idea to make video scale properly is to use matrix to scale the content of TextureView. It is scaled up or down based on video size and view size. Then, after it’s scaled, it is positioned at the center of the view.

private void AdjustTextureViewAspect(int videoWidth, int videoHeight)  
{  
  if (!(_mainVideoView is TextureView))  
    return;  
  
  if (Control == null)  
    return;  
  
  var control = Control;  
  
  var textureView = _mainVideoView as TextureView;  
  
  var controlWidth = control.Width;  
  var controlHeight = control.Height;  
  var aspectRatio = (double)videoHeight / videoWidth;  
  
  int newWidth, newHeight;  
  
  if (controlHeight <= (int)(controlWidth * aspectRatio))  
  {  
    // limited by narrow width; restrict height  
    newWidth = controlWidth;  
    newHeight = (int)(controlWidth * aspectRatio);  
  }  
  else  
  {  
    // limited by short height; restrict width  
    newWidth = (int)(controlHeight / aspectRatio);  
    newHeight = controlHeight;  
  }  
  
  int xoff = (controlWidth - newWidth) / 2;  
  int yoff = (controlHeight - newHeight) / 2;  
  
  Console.WriteLine("video=" + videoWidth + "x" + videoHeight +  
      " view=" + controlWidth + "x" + controlHeight +  
      " newView=" + newWidth + "x" + newHeight +  
      " off=" + xoff + "," + yoff);  
  
  var txform = new Matrix();  
  textureView.GetTransform(txform);  
  txform.SetScale((float)newWidth / controlWidth, (float)newHeight / controlHeight);  
  txform.PostTranslate(xoff, yoff);  
  textureView.SetTransform(txform);  
}

As mentioned earlier, if we want to support a wide range of Android OS, we need to implement it into TextureView and VideoView. This will be implemented under OnElementChanged function. Both implementation have some same properties. We will make their Background color to transparent and layout parameters to match parent. This way it won’t have any color to display when there is no video, and it’ll fill entire container.

Following snippet is how to implement it on our Video custom renderer. You see it’s similar with our iOS implementation, except for container creation and video playing.

protected override void OnElementChanged(ElementChangedEventArgs<Video> e)  
{  
  base.OnElementChanged(e);  
  
  if (Control == null)  
  {  
    _mainFrameLayout = new FrameLayout(Context);  
  
    _placeholder = new Android.Views.View(Context)  
    {  
      Background = new ColorDrawable(Xamarin.Forms.Color.Transparent.ToAndroid()),  
      LayoutParameters = new LayoutParams(  
        ViewGroup.LayoutParams.MatchParent,  
        ViewGroup.LayoutParams.MatchParent),  
    };  
  
    if (Build.VERSION.SdkInt < BuildVersionCodes.IceCreamSandwich)  
    {  
      Console.WriteLine("Using VideoView");  
  
      var videoView = new VideoView(Context)  
      {  
        Background = new ColorDrawable(Xamarin.Forms.Color.Transparent.ToAndroid()),  
        Visibility = ViewStates.Gone,  
        LayoutParameters = new LayoutParams(  
          ViewGroup.LayoutParams.MatchParent,  
          ViewGroup.LayoutParams.MatchParent),  
      };  
  
      ISurfaceHolder holder = videoView.Holder;  
      if (Build.VERSION.SdkInt < BuildVersionCodes.Honeycomb)  
      {  
        holder.SetType(SurfaceType.PushBuffers);  
      }  
      holder.AddCallback(this);  
  
      _mainVideoView = videoView;  
    }  
    else  
    {  
      Console.WriteLine("Using TextureView");  
  
      var textureView = new TextureView(Context)  
      {  
        Background = new ColorDrawable(Xamarin.Forms.Color.Transparent.ToAndroid()),  
        Visibility = ViewStates.Gone,  
        LayoutParameters = new LayoutParams(  
          ViewGroup.LayoutParams.MatchParent,  
          ViewGroup.LayoutParams.MatchParent),  
      };  
  
      textureView.SurfaceTextureListener = this;  
  
      _mainVideoView = textureView;  
    }  
  
    _mainFrameLayout.AddView(_mainVideoView);  
    _mainFrameLayout.AddView(_placeholder);  
  
    SetNativeControl(_mainFrameLayout);  
  
    PlayVideo(Element.Source);  
  }  
  if (e.OldElement != null)  
  {  
    // Unsubscribe  
    if (_videoPlayer != null && _isCompletionSubscribed)  
    {  
      _isCompletionSubscribed = false;  
      _videoPlayer.Completion -= Player_Completion;  
    }  
  }  
  if (e.NewElement != null)  
  {  
    // Subscribe  
    if (_videoPlayer != null && !_isCompletionSubscribed)  
    {  
      _isCompletionSubscribed = true;  
      _videoPlayer.Completion += Player_Completion;  
    }  
  }  
}  
  
protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)  
{  
  base.OnElementPropertyChanged(sender, e);  
  if (Element == null || Control == null)  
    return;  
  
  if (e.PropertyName == Video.SourceProperty.PropertyName)  
  {  
    Console.WriteLine("Play video: " + Element.Source);  
    PlayVideo(Element.Source);  
  }  
  else if (e.PropertyName == Video.LoopProperty.PropertyName)  
  {  
    Console.WriteLine("Is Looping? " + Element.Loop);  
    VideoPlayer.Looping = Element.Loop;  
  }  
}

Since we’re using TextureView and VideoView, there is some function from interfaces need to be implemented. One of them is to remove video when texture or surface is destroyed. To do that, we’re going to need to set _placeholder visibility to visible.

private void RemoveVideo()  
{  
  _placeholder.Visibility = ViewStates.Visible;  
}

When using TextureView, we need to implement TextureView.ISurfaceTextureListener interface. We set video player’s surface when texture available and hide it when texture destroyed. Following snippet shows you how to implement it.

#region Surface Texture Listener  
  
public void OnSurfaceTextureAvailable(SurfaceTexture surface, int width, int height)  
{  
  Console.WriteLine("Surface.TextureAvailable");  
  VideoPlayer.SetSurface(new Surface(surface));  
}  
  
public bool OnSurfaceTextureDestroyed(SurfaceTexture surface)  
{  
  Console.WriteLine("Surface.TextureDestroyed");  
  RemoveVideo();  
  return false;  
}  
  
public void OnSurfaceTextureSizeChanged(SurfaceTexture surface, int width, int height)  
{  
  Console.WriteLine("Surface.TextureSizeChanged");  
}  
  
public void OnSurfaceTextureUpdated(SurfaceTexture surface)  
{  
  Console.WriteLine("Surface.TextureUpdated");  
}  
  
#endregion

When using VideoView, we need to implement ISurfaceHolderCallback interface. Similar with TextureView, we set video player’s display when surface created and hide it when surface destroyed. The complete implementation of this interface can be see on following snippet.

#region Surface Holder Callback  
  
public void SurfaceChanged(ISurfaceHolder holder, [GeneratedEnum] Format format, int width, int height)  
{  
  Console.WriteLine("Surface.Changed");  
}  
  
public void SurfaceCreated(ISurfaceHolder holder)  
{  
  Console.WriteLine("Surface.Created");  
  VideoPlayer.SetDisplay(holder);  
}  
  
public void SurfaceDestroyed(ISurfaceHolder holder)  
{  
  Console.WriteLine("Surface.Destroyed");  
  RemoveVideo();  
}  
  
#endregion

That’s all we need for Android. Now that we all have everything needed, we can test this control to Xamarin.Forms Page.

Testing to Xamarin.Forms Page

Before we create a test page, I recommend you to prepare your own video file. It is recommended as vertical video so a lot of space won’t be wasted.

But, if you don’t have any video to test, don’t worry. You can download free videos to use from Coverr. They don’t have any vertical videos, we can still use it. You can either crop it into vertical video or you can just use it as it is since we already handle scaling to aspect fill on our code.

So use any video you like. I recommend any file as long as it’s mp4 video with h264 encoding. In this tutorial, I use video from Coverr called Orchestra. You can download it from here.

NOTE: For some Android and iOS devices, especially the old products, they probably can’t play some mp4 files. This is mostly caused by not-supported baseline profile. To fix that, you can re-encode the video using a tool like ffmpeg and change its baseline profile based on your preferences. See following table to check baseline profile compatibility with iOS. See Supported Media Formats from official Android guide, too.

Profile	Level	Devices	Options
Baseline	3.0	All devices	`-profile:v baseline -level 3.0`
Baseline	3.1	iPhone 3G and later, iPod touch 2nd generation and later	`-profile:v baseline -level 3.1`
Main	3.1	iPad (all versions), Apple TV 2 and later, iPhone 4 and later	`-profile:v main -level 3.1`
Main	4.0	Apple TV 3 and later, iPad 2 and later, iPhone 4s and later	`-profile:v main -level 4.0`
High	4.0	Apple TV 3 and later, iPad 2 and later, iPhone 4s and later	`-profile:v high -level 4.0`
High	4.1	iPad 2 and later, iPhone 4s and later, iPhone 5c and later	`-profile:v high -level 4.1`
High	4.2	iPad Air and later, iPhone 5s and later	`-profile:v high -level 4.2`

h.264 baseline profiles for iOS. Source: ffmpeg

After you get your video file, place it to the folders for each OS. On Android, you should put it under Assets directory. On iOS, you should put it under Resources directory. For this tutorial I put the file under Assets/Videos on Android and Resources/Videos on iOS.

Once you put them all to correct folder, we need to create our Page on Xamarin.Forms PCL project.

This is a simple page with smallest components. We’ll create a Home Page, with video background, two text boxes for username and password, and to buttons for sign in and sign up. There is no logic in this page, I just want to show you how to make a beautiful home page.

For better controls placement, I use Grid as container. See following snippet for the complete XAML.

<?xml version="1.0" encoding="utf-8"?>  
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"   
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"   
    xmlns:local="clr-namespace:BackgroundVideo"   
    xmlns:controls="clr-namespace:BackgroundVideo.Controls"   
    x:Class="BackgroundVideo.BackgroundVideoPage">  
  <Grid Padding="0" RowSpacing="0" ColumnSpacing="0">  
    <controls:Video x:Name="video" Source="Videos/Orchestra.mp4" Loop="true"   
      HorizontalOptions="Fill" VerticalOptions="Fill" />  
    <StackLayout VerticalOptions="Center" HorizontalOptions="FillAndExpand" Padding="20,10,10,20">  
      <Entry Placeholder="username" FontSize="Large"   
        FontFamily="Georgia" HeightRequest="50">  
        <Entry.PlaceholderColor>  
          <OnPlatform x:TypeArguments="Color" Android="Silver" />  
        </Entry.PlaceholderColor>  
        <Entry.TextColor>  
          <OnPlatform x:TypeArguments="Color" Android="White" />  
        </Entry.TextColor>  
      </Entry>  
      <Entry Placeholder="password" FontSize="Large"   
        FontFamily="Georgia" HeightRequest="50" IsPassword="true">  
        <Entry.PlaceholderColor>  
          <OnPlatform x:TypeArguments="Color" Android="Silver" />  
        </Entry.PlaceholderColor>  
        <Entry.TextColor>  
          <OnPlatform x:TypeArguments="Color" Android="White" />  
        </Entry.TextColor>  
      </Entry>  
      <BoxView Color="Transparent" HeightRequest="10" />  
      <Button Text="sign in" BackgroundColor="#3b5998" TextColor="#ffffff"   
        FontSize="Large" />  
      <Button Text="sign up" BackgroundColor="#fa3c4c" TextColor="#ffffff"   
        FontSize="Large" />  
    </StackLayout>  
  </Grid>  
</ContentPage>

That’s it. If you don’t want the video to be looped, just change its Loop property. If you want to do something when video ended, just set OnFinishedPlaying from C# code. Now let’s see how it runs.

See it in Action

If you set everything correctly, The following figure is how it run on iOS device or emulator. As you can see, there are two text boxes and two buttons. The video is playing as the page background smoothly.

Xamarin iOS Background Video Demo

Similar with iOS version, the following animated gif image shows how it looks on Android device or emulator. See that text box style difference from iOS version. But let’s care about it later, the point is video background consistently work just like iOS.

Xamarin Android Background Video Demo

All you need to do the rest is to make styling more consistent through any platforms.

Summary

Once again, all I can say is you can make any cross platform control you want by using Custom Renderer. As long as you understand how to code in native language (well, you can Google it though), you can create anything.

As for performance, I believe I said it earlier, you probably see some flickering on old Android devices. For now I don’t have any idea to optimize it.

If you have any idea and suggestion, feel free to leave a comment below.

You can download completed project on GitHub.

References

Encode/H.264 – FFmpeg
Play video in background (like spotify) using xamarin forms and android renderer - Xamarin Community Forums
How to avoid flickering and black screen issues when using VideoView? | Bright Inventions
iOS Video Backgrounds – Kai Schaller – Medium

Simple Custom Fonts Helper in Xamarin.Forms for Android

author@junian.dev (Junian Triajianto) — Thu, 09 Feb 2017 07:33:00 +0000

When creating a mobile app, we want it to look great. Not just by design but also typography great. Xamarin.Forms already provide custom font mechanism. But I don’t see it efficient enough because it has to be declared differently for each platform. Look at the example snippet below.

<Label Text="Hello Forms with XAML">  
    <Label.FontFamily>  
        <OnPlatform x:TypeArguments="x:String">  
            <OnPlatform.iOS>Oswald-Regular</OnPlatform.iOS>  
            <OnPlatform.Android>Oswald-Regular.ttf#Oswald-Regular</OnPlatform.Android>  
            <OnPlatform.WinPhone>Assets/Fonts/Oswald-Regular.ttf#Oswald</OnPlatform.WinPhone>  
        </OnPlatform>  
    </Label.FontFamily>  
</Label>

See that how for each platform it’s different string. On iOS, you just need to set font name. As for Android and WinPhone you need to declare path to font file and font name. All I want to do is to just call the font name like iOS does and for every platform it’ll render correctly like following snippet.

How To Play Audio Files in Xamarin.Forms

author@junian.dev (Junian Triajianto) — Wed, 08 Feb 2017 12:25:00 +0000

Audio, sound, or music can be essential part of mobile apps. Unfortunately, Xamarin.Forms doesn’t support this directly from their API. But of course, it can be implemented easily by using DependencyService.

This time I’ll show you how to implement this Audio Player in Xamarin.Forms with the help of DependencyService. Also, I’ll show you how to integrate it using simple MVVM Pattern.

First thing first, create a new Xamarin.Forms Solution.

Use Portable Class library and XAML for user interface. Let’s name this solution AudioPlayer. Now that we’ve created a new solution, we’ll have three projects: Portable Library, iOS, and Android. We’ll implement one by one starting from our core Portable Library.

Running Your First ASP.NET Core Web App with MySQL on Ubuntu 16.04

author@junian.dev (Junian Triajianto) — Tue, 24 Jan 2017 09:15:00 +0000

Since Microsoft open sourcing their .NET Platform, which is called .NET Core, they stole my attention again. I always love using .NET Framework. I develop desktop apps using it. I develop mobile apps using Xamarin. But I rarely use its web platform for one simple reason, it requires Windows-based Server to run.

Now that Microsoft and community actively develop its framework for cross-platform environment, I stumble upon and see the latest stable build which is version 1.1. I read their blog and found out about news that ASP.NET Core 1.1 with Kestrel was ranked as the fastest mainstream fullstack web framework in the TechEmpower plaintext benchmark. That’s such a nice claim and gave me attention to try their product.

How to Record Twitch Streams Automatically in Python

author@junian.dev (Junian Triajianto) — Thu, 19 Jan 2017 10:56:00 +0000

Let’s say you like to watch people playing game. Or maybe you like to study a game strategy from someone else. Or maybe you just find a player funny while playing a game. Of course you’re going to search those videos on Internet. Some videos are streamable at any time, like YouTube videos, but some are just live stream with a certain schedule, like Twitch.

If it’s streamable anytime, it’s not a problem because we can watch it anytime we want. But what if it’s a live stream and you’re busy, or at work, or at other place that make you can’t watch video right at the time. By the time you’re home and plan to watch the video, it probably has ended.

Camera Face Detection in C# using Emgu CV and WPF

author@junian.dev (Junian Triajianto) — Thu, 29 Dec 2016 09:49:00 +0000

Hi there, this is a new tutorial category in my blog. It’s Computer Vision. In this blog, I’d like to show you something cool. It’s how to perform Face Detection using your camera or Webcam. You’ll see how your application can detect faces from a captured image. Curious about it? Let’s take a look how to do that.

This what you need to follow this tutorial:

Microsoft Visual Studio 2010. Or if you don’t have one, you can use 2008 version.
Emgu CV (OpenCV in .NET). You can download the latest version in this link: www.emgu.com/wiki/index.php/Main_Page and follow the installation instruction.
Basic Knowledge of C# Programming.
Familiar in WPF Development.

After you’ve got what you need, it’s time to rock!

Simple HTTP Web Server and Client in Python

author@junian.dev (Junian Triajianto) — Tue, 20 Dec 2016 13:49:00 +0000

This time I’d like to show you how to make a simple HTTP server and client in python. It’s a bit different from other tutorials I’ve ever wrote and I’d like to say that I’m also a beginner in python. But, I’ll try to make sure you understand what I wrote because this tutorial is easy.

First, you need to know what HTTP is.

The Hypertext Transfer Protocol (HTTP) is an application protocol for distributed, collaborative, hypermedia information systems. HTTP is the foundation of data communication for the World Wide Web.

Load External Image into WPF using OpenFileDialog

author@junian.dev (Junian Triajianto) — Tue, 13 Dec 2016 13:31:00 +0000

This is my first time I made a tutorial about WPF. I don’t think it’s a new technique, but I just want to share what I learned at home. I assume that you understand WPF a little bit. In this tutorial I’d like to show you how to load external image into WPF using OpenFileDialog.

Step 1

Create a new WPF Project, File → New → Project… and chose WPF Application (by the way, I’m using Visual Studio 2008 in this tutorial). You’ll see an empty window called Window1.xaml.

Password Encryption using MD5 Hash Algorithm in C#

author@junian.dev (Junian Triajianto) — Thu, 08 Dec 2016 09:57:00 +0000

Update (Sep 14, 2018): The new complete string hash algorithms in C# tutorial is available. I would suggest not to use MD5 anymore, because it’s not safe and easily collide. But I’ll leave the original tutorial here for educational purpose.

It’s really bad if someone knew your password. As a software developer, we have an ethic that we also don’t want to see other’s password. Which mean, storing password in a plain text is a nope.

How To Make A 2D Animation using Timer with C++ .NET

author@junian.dev (Junian Triajianto) — Tue, 06 Dec 2016 21:09:00 +0000

On my last post (How To Draw 2D Primitive Objects on Windows Forms Application using C++ .NET), we’ve learned about how to draw some 2D objects on Form and Panel. That’s not difficult right? But now, in this post, we’ll learn about how to move that objects. Of course it’ll be very boring if that objects didn’t move. So, let’s get started! Don’t forget that I’m using Microsoft Visual Studio 2008 Professional Edition in this tutorial.

How To Draw 2D Primitive Objects with C++ .NET

author@junian.dev (Junian Triajianto) — Thu, 01 Dec 2016 20:47:00 +0000

First of all, I’d like to present my first tutorial about C++ / CLI CLR .NET Programming. This time it’s about Graphical User Interface in C++ .NET (in this case, I don’t want to use native C++). Okay, I assume that you have a little knowledge about C++ .NET GUI and of course, I also assume that you understand how to program in C++ CLR behaviour. So, here we go the tutorial!