Image for post
Image for post

RecyclerView is common widget used in Android. It has build-in methods to handle insert, change, and removed. If you uses those methods, RecyclerView will animate it accordingly instead of refresh the whole list.

  • Insert: Items after the inserted item move down.
  • Update: Updated item changes content instead of view refresh.
  • Remove: Items after the removed item move up.
Image for post
Image for post

Prerequisite

  • Able to create a working RecyclerView

The old fashion way

RecyclerView.Adapter has notifyDataSetChanged(), notifyItemChanged(int), notifyItemInserted(int), notifyItemRemoved(int), notifyItemRangeChanged(int, int), notifyItemRangeInserted(int, int), notifyItemRangeRemoved(int, int).

notifyDataSetChanged() is the simplest way to notify the adapter that the data has changed. However, adapter do not know what has changed, so it will refresh all the views. …


Image for post
Image for post

This tutorial was written for Traefik v2. Please go to Setup Traefik step by step for Traefik v1.

Traefik is a open source reverse proxy / load balancer which is raising in popularity because of its ease to setup, integration with Docker and Let’s encrypt and much more features.

This guide will help you to go through how to setup Traefik step by step.

Traefik v2 introduces a number of breaking changes which require users to update their configuration. You can read the migration guide from the official document but I found it is no sufficient for me to migrate. …


Image for post
Image for post

In your homelab, you may have some sort of media server which serve video to different devices like Plex, Emby and Jellyfin. While it can transcode to support codec real time, it brings heavy loads to server. By transcoding video in advance, you can lower server load and provide better quality.

One of popular way is to use FFmpeg but there are many parameters to configure, especially you have more than 1 tracks in the source file. Handbrake provide a user friendly GUI on top of FFmpeg and provide presets for simple encoding. …


Image for post
Image for post

When I deployed a new version Android application to client’s UAT environment, the client reported background jobs did not run at all. I did not the why the background jobs did not run at all. I had checked the jobs did run in development environment.

After some troubleshooting, client reports they have upgrade the devices from 7.1.1 to 8.1. However, this did not seems to be the problem as I had tested devices with Android 8.1 in development environment. After more troubleshooting, client reported the previous version application also not work in UAT environment. So the problem must be either Android 8.1 …


Image for post
Image for post

What is GitHub Actions?

GitHub Actions is a CI/CD service provided by GitHub. Compare to the GitLab having GitLab Runner, GitHub does not provide an official CI/CD solution before. Repositories on GitHub relies on third party CI/CD services like Travis CI, Circle CI and etc. GitHub Actions was introduced last year, they announced it will be generally available on November 13 this year.

Getting Started

To starting use GitHub Actions, you need to create a .github\workflows\<name>.yml.

Here is a example for Node.js project.

name: Main workflow
on:
- push
- pull_request
jobs:
build:
name: Build
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@master
- name: Set Node.js 10.x
uses: actions/setup-node@v1
with:
version: 10.x …

Image for post
Image for post

React Redux just released version 7.1.0 which includes React hooks ( FINALLY!!). I may take this opportunity to write about how to write a type-safe React Redux store with TypeScript (No more any).

It will be how I will implement it. There may be some better way to do it.

Here it will be what you get in the final result.

Image for post
Image for post
Action type checking


Image for post
Image for post

If you want to skip to solution, click here.

Background

When you are writing a large project, you will face something like this.

One of the common solution is to use some kind of alias, so that we can use absolute path instead of relative path.

paths in tsconfig.json allows you it to compile but it does not transform it for you. For example, if you using the following tsconfig.json

Then, you can write with absolute path.

However, tsc does not transform it which means it keeps the path @/model and it fails when it runs in JavaScript.

We need to using some kinds of tools like Babel or Webpack to handle this. …


Image for post
Image for post

Ant Design is a popluar components framework for React. One of the components is <Form>. It provides built-in functions for collect, validate and submit user input.

<Form> in Ant Design is using a decorator pattern for the fields. This is not a problem until you want to separate the form and fields.

Here is an simple example.

It is just a simple login form. But when you have a more complex form or when you want to reuse a field, then you have to pass the form around to access the functionalities.

This become much cleaner. However, if it is not a single component but another large component, then, you will have to pass form through every components in the middle which is not ideal. …


Image for post
Image for post

Do you have configuration files in you project using JSON or YAML? Do you know you can enable Intellisense for those configuration files for validating and auto compete when you edit them?

You only need to create a JSON Schema. Then, you can have validation and auto compete in Visual Studio Code. Not only it is very useful for others to modify your configuration, you can reuse the JSON Schema file when you parse your configuration.

JSON Schema

JSON Schema is a standard created by community on describing your data format. It is easy for both human and machine to read. …


Image for post
Image for post

If you do not know how to run Docker, you should start from Part 1.

Last time, you learn how to run a Docker container with different arguments and convert the command to a docker-compose.yml for easier maintenance. This time I will show configurations with user Docker image and talk more about different options on Docker Compose.

Portainer

Portainer is a open source Docker management web application. Although you can do all the things that it does in command line, but sometime it is nice to have GUI. This also allow given users control to manage containers without giving server login.

version…

About

Avalon Joshua

Average Developer, Data Hoarder, Homelabber

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store