Monthly Archives: July 2022

TEST

Introduce: LangBranch Shortcode

Posted on by

View Plugin Page On WordPress.org

What is LangBranch

It's a simple plugin enable you to use a shortcode like below to display correspond language version of content based on get_locale().

[langbranch aio en_US="English version" en_GB="en_US" zh_TW="Chinese version" ja_JP="Japanese バージョン"] [langbranch en_US] Content here will only be displayed if get_locale() returns "en_US". [/langbranch ] [langbranch en_US zh_TW] Content here will only be displayed if get_locale() returns "en_US" or "zh_TW". [/langbranch]

Motivation

I've been using TranslatePress to provide multi locale experience for visiters.
However, I had been suffering from losting translated content once I updated original language's content, until I decided to create a simple shortcode to solve this problem.

Usages

AIO (1-liner) Mode

[langbranch aio en_US="English version" en_GB="en_US" zh_TW="Chinese version" ja_JP="Japanese バージョン"]

By appending aio after langbranch main tag, you can setup one specific paragraph in several languages, and if you decide that some locale user to share the same language, you can just type the locale code you want to refer to directly in content. For example, you can make UK version the same as US version.

However, if LangBranch go too deep (chain over 5 stacks) it will fail.
Don't do this:

--1---||---2---||---3---||---4---||---5---||---6-- -> Oh no!
en_US -> en_GB -> en_AU -> en_HK -> zh_TW -> ja_JP

Seperate Mode

[langbranch en_US] Content here will only be displayed if get_locale() returns "en_US". [/langbranch] [langbranch en_US zh_TW] Content here will only be displayed if get_locale() returns "en_US" or "zh_TW". , only displayed when get_locale() returns "en_US" or "zh_TW". [/langbranch]

Very straight forward, isn't?
But when using several shortcodes, I would suggest you don't put a linebreak between [/langbranch] and [langbranch], in order to prevent unwanted linebreak <br> being rendered.

Optional step

All contents enclosed by [langbranch] will be rendered enclosed by <div class="langbranch" data-no-translation=""></div>
So if you are using auto machine translating like TranslatePress offers, you may want to exclude all selector .langbranch.

Recaps

This plugin is at its early stage of developing, so you may encounter some issues while using it.
For the worst case, it breaks your site up.
If that happens, don't be panic! Just go to your wp-content/plugins directory and delete langbranch and you shall be fine.

TEST

Vantage Theme Issue: Sticky Nav doesn't work on mobile view

Posted on by

Solution


Just simply comment out && !isMobileDevice, and it will work like a charm!

Github solved issue: #1

However, to do this directly on a theme However, to do this directly on a theme could be changed in any future updates is probably not a good idea.

Instead, we copy that .js file to our child theme js directory.
Then, we have to dequeue the original .js by inserting the commands to your child theme's functions.php:

function vantage_child_enqueue_parent_style() { wp_dequeue_script('vantage-main'); wp_enqueue_script('vantage-main', get_stylesheet_directory_uri() . '/js/vantage-hollen-main.js', array( 'jquery' ) ) ; } add_action( 'wp_enqueue_scripts', 'vantage_child_enqueue_parent_style', 8 );

In this way, any future minor update pushed by Vantage Dev Team won't clear your modified code, as long as there won't be any structural changes, like ids's and/or classes' renaming.

Reflection

It took me almost two hours at late night debugging (3 AM), and it almost got me: I thought it was caused due to the lack of support of $(body) and scrollTop() on mobile device. Tried so many solution to no avail, then I decided to go to sleep.
and you know what, I solved it in 30 minutes after having a lunch at noon.

TEST

Broadlink RM Mini 3 and Google Home Voice Control Quick Notes

Posted on by

RM Mini 3 launched by Broadlink

You can refer to this unpacking and setting tutorial. Especially the "scene" function mentioned in the latter part of the article.

https://playsmarthome.com/broadlink-rm-mini-3-review/

The newly added scene, if you link "Bolian" to Google Home, will appear in the daily schedule (Routine),
It can be used as a remote control interface for Nest Hub, and the set keywords will become voice commands.

Operation example

Bolian added a new scene "Taiwan TV News Station", which corresponds to the MOD remote control

5-> [delay 0.5 seconds] ->０-> [delay 0.5 seconds] ->3

Then say "Hey Google, activate TTV News Channel" to Google AI, and Broadlink RM Mini 3 will transfer the MOD to TTV News.
Google AI will reply: "OK, starting the TV news station".

This "activation" is a Google-mandated callsign, but there are ways to bypass it and set a more natural command:
"Sound louder", "View program information", etc.

The method is also very simple, as long as you enter the "Daily Schedule" of Google Home to set another set of daily schedules, choose a callsign you like, and then correspond to the "Start XXXXX" command of Bolian.

It is recommended to buy an HDMI switcher that supports infrared, so that even the source switching can be controlled by voice!

TEST

Virtualization... According to the boss, it saves the company 170 USD per month

Posted on by

The company originally had more than 10 mainframes running VB6 software 24/7, and the mainframe architecture was N years ago.
The company was founded from 1993 to 2021 and no one has come forward to correct it...
So I took the lead in introducing VMWare Workstation for the company and tested the water temperature on Windows familiar to the supervisor and boss. They were very satisfied with Snapshop.

But, that's not enough!

Then I imported the ESXi OS, first moved an original VB6 program to the created virtual machine, and it ran without problems for two months.
Upward report, further proposed VCenter concept, taking into account multi-user management, automatic backup, performance monitoring and so on.
And from the original price housing group an AMD 5950X 32GB (dual channel) configuration.
It will be added to 64G (quad-channel) in early 2022.

It has been running for more than a year and is very stable.

TEST

WordPress: Format and colorize code block by applying prism.js

Posted on by

Motivations

for (int i = 5; i < 10 ; i++) { Console.WriteLine("Hello Moto?"); }

If you are using Vantage for your WordPress site, and you want to make your code block looks fancy, follow the instructions:

Instructions

1. Make sure you have created a child theme based on Vantage, and it's activated.

2. Reset styles applied to code block.

I highly recommend to work with WP-SCSS plugin when writing CSS/SCSS, so you can have stylesheets organized without the costs of performance by using @import.

/* Reset the style set by Vantage (the parent theme) */ .entry-content pre, .entry-content code { background: unset; font-family: unset; border: unset; box-shadow: unset; overflow-x : unset; }

Later we will apply prism.js and its stylesheet.

3. Insert code snippits to your child theme's "functions.php"

function code_pre_theme(){ // To check if currently viewing page is a "post" if (is_singular('post')) { wp_enqueue_script('prism-js', 'https://cdn.jsdelivr.net/ npm/prismjs@1.28.0/prism.min.js'); wp_enqueue_script('prism-core-js', 'https://cdn.jsdelivr.net/npm/prismjs@1.28.0/components/prism -core.min.js'); wp_enqueue_style('prism-css', 'https://cdn.jsdelivr.net/npm/prismjs@1.28.0/themes/prism.min.css'); wp_enqueue_script( 'prism-autoloader-js', 'https://cdn.jsdelivr.net/npm/prismjs@1.28.0/plugins/autoloader/prism-autoloader.min.js'); } } add_action('wp_enqueue_scripts&#039 ;, 'code_pre_theme', 10); //Number 10 heres depend on site. The princlple is to set a number larger than the essential scripts and styles belong to your parent theme, which is vantage in this case.

By enqueuing prism-core.min.js and prism-autoloader.min.js, it will utomatically loads languages's style when necessary.
You may opt-in languages based on your needs. For example, to load certain style based on has_tag('php'), has_tag('csharp') result.
Visit prism.js at cdnjs.com for more programming language supports.

Conlusion

You don't have to follow every steps as I did, as you may come up with a better solution for your own site.

At the time I wrote this article, I absolutely have zero knowledge in PHP, only knowing C#, Javascript, Java, SCSS; writing and modifying some php script isn't complicated, so go ahead and try all the possibilities.