Posts related to programming category

Mendix: How to call Microflow in Java Action and use its return value

After you dive into Mendix for a longer time, you would find yourself writing java code now and then. Don't worry, good news is that you don't need to write a lot of java code, Mendix is Low Code anyway.In Mendix, java code is been called Java Action.And you will also find you have to call Microflow in your java code. And in the latest version, approx Mendix 8.1, calling a Microflow can be in this way:```java com.mendix.core.Core.microflowCall("YourModule.SUB_ShowMessage") .inTransaction(true) .withParam("Name", "Hank") .withParam("Message", "Just another developer") .execute(this.getContext()); ```This will call your Microflow `SUB_ShowMessage` in your `YourModule` module, passing **Name** and **Message** to it.Sometimes if your Microflow has too many parameters, clearly chaining too many **withParam** is not a proper way. You can use **HashMap**```java java.util.Map params = new java.util.HashMap<>(); params.put("Name", "Hank"); params.put("Message", "Just another developer"); params.put("note", "This seems also a lot of code") com.mendix.core.Core.microflowCall("YourModule.SUB_ShowMessage") .inTransaction(true) .withParams(params) .execute(this.getContext()); ```You can see there is no return value in the Microflow or you don't want/need to use the return value of it.But what about you want to use it?If your Microflow returns a simple value, like _String_, _Long/Integer_, _Boolean_, then it's easy, just assign it to your Java variable:```java Boolean mfValue = com.mendix.core.Core.microflowCall("YourModule.SUB_ShowMessageWithReturnValue") .inTransaction(true) .withParam("Name", "Hank") .withParam("Message", "Just another developer") .execute(this.getContext());// then you can use the mfValue ```Well, this seems easy, what if the Microflow returns an object?When a Microflow returns an Object, it will lose its Entity definition and returns an interface **IMendixObject\*. You can not use it without init it with the corresponding Entity. Let's say, it returns a **System.User\* entity, then you will do this to use it:```java // returns IMendixObject IMendixObject mendixObj = com.mendix.core.Core.microflowCall("YourModule.SUB_ShowMessageWithReturnValue") .inTransaction(true) .withParam("Name", "Hank") .withParam("Message", "Just another developer") .execute(this.getContext());// init with Entity's init function final User user = User.initialize(this.getContext(), mendixObj); ```---EOF---

Read More

JavaScript :How to detect if an element is visible

There are many ways to detect if an element is visible on page. like```javascript element.style.display !== none && element.visibility !== hidden ```And what if you want to detect if an elemtn is in current viewport?Easy, right? You just need to use `getBoundingClientRect`, check if it's top and bottom are all in viewport:```javascript const position = element.getBoundingClientRect()if (position.top >= 0 && position.bottom I'm not visible```If you run `document.querySelector('child').style.display === 'block'`, you will get a **true**.How to fix this?Well we can use `offsetParent`. The HTMLElement.offsetParent read-only property returns a reference to the element which is the closest (nearest in the containment hierarchy) positioned ancestor element.so if `elment.offsetParent === null`, then we can tell that the `element` is not visible.

Read More

Enable HTTPS on local, even with a customizable domain

Normally, when you're debugging your web app on local, you can access it with either `http://localhost:PORT` or `http://127.0.0.1:POST`.The `POST` might be `8080` or `3000` or what's ever.But sometimes you might need to access your local web app with `https`, like `https://localhost:8080`. So you search online with `local https`, tons of posts/tutorials teach you how to generate self-signed SSL certificate and assign to your localhost.As an app developer, you might feel it's too complicated and don't want to spend half an hour on it.So here I found the easiest way to achieve this with just one small tool and 1 line command, without changing anything in your actual app.This tool is (**local-ssl-proxy**)[https://www.npmjs.com/package/local-ssl-proxy] , it is an open sourced npm package. so you can just install it by running```shell npm install -g local-ssl-proxy ```Then you can just access your local web app with this command(let's assume the app is running on 8080 port):``` local-ssl-proxy -s 8081 -t 8080 ```In this way, your web app's url will be `https://localhost:8081`. And you can still access your app from the original http url and port.The **-s** is the port that the app will be proxies to, the **8080** is the actual port your app running on.### what's more?If you don't like to use the localhost, or you have to assign as domain to your local app. you can simply make it with 2 more steps.- add a line in your computer's **hosts** file. - if you are on Windows, the hosts file's path is `c:\windows\system32\drivers\etc\hosts` - on Mac and Linux the path simply is `/etc/hosts` - you need Admin/root privilege to modify it The line would be ```shell 127.0.0.1 YOUR_DOMAIN ``` The `YOUR_DOMAIN` can be anything, you don't even register the domain, because it only works on your computer. But don't use some famous one like youtube.com or google.com, some browser would block it. Let's say we use the `hank.momane` in below example.- Then run the proxy like this:```shell local-ssl-proxy -s 443 -t 8080 -n hank.momane ```So by using the SSL port **443** and an extra parameter **-n**, now you can access your app via `https://hank.momane`.

Read More

Do not store file outside of WSL, it is slow

For some reason, I have switch back to Windows OS after years of working on MacOS.Most of the time I'm working on frontend projects, so to get better DX, I use Windows Subsystem for Linux (WSL for short). And I'm using version 2 of it.But I'm not a fancy Vim programmer, I heavily relay on IDEs like VS Code and WebStorm. So I still have to install these IDEs on the Windows.I'm able to install zsh, oh-my-zsh, fuck, p10k along with other tools in the WSL, gives me a similar experience as on Mac.At the first I put the project on Windows file system, because in this way I can easily access the file from IDE. And then in the WSL2 terminal, I go to the Windows path like this:```shell cd /mnt/DISK/PROJECT_FOLDER ```I can run all these frontend commands like `yarn`, `nvm`. Seems smooth.Soon I find a big issue. The hot module replacement not working, the building process is very slow. I have to restart the project dev command after making change to the code. Clearly this is not an acceptable solution.After searching a bit on the internet, I move the project back to WSL file system, then every thing works perfectly. The building is faster, the HMR is working.To access the file in WSL from IDEs, VS Code has [extension](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-wsl) to open file from WSL easily, just install it, and in the terminal, just switch to the project folder and type `code .`. Or in the IDE, click `File-Open Folder`, it will show your linux home folder by default. For WebStorm, it will also show the WSL folder in the open file dialog.Finally, I can use my i7+32G Windows, don't need to listen to the crazy fan noise on the MBP :D

Read More

A wrong solution on Leetcode

With all these years as an engineer, I never tried Leetcode.Maybe it's because I never prepared for interview before.Well, now I have to, because the company I just joined in 6 month ago, is gonna shutdown it's office here.Technically not shutdown, it just lays off every programmer because it thinks we are more expensive than those in another country.So people all say you have to try Leetcode to practice your programming skill.As a frontend engineer, why should I try it? Most of the time, I'm building UI, calling API, fighting with webpack configuration, cursing Google Lighthouse always gives my webpage low score, arguing with designer why is same font size seems so big on production than on Figma...After I tried to solve some problems on it, I found it is pretty fun, except it made me think myself not a qualified programmer.For the problem [palindrome permutation](https://leetcode.com/problems/palindrome-permutation/). I found it's top 1 solution is not correct.The code is like this:```javascript var canPermutePalindrome = function (s) { let arr = [...new Set(s.split(''))] let m = arr.length - Math.ceil(s.length / 2) if (arr.length == 1 || m == -1 || m == 0) return true return false } ```The code is very short and clean, pretty impressive at the first glance, and most of the cases it works, Leetcode also thinks it's a correct one. But if you try with a string `aaaabbbbcc`, it returns `false`, while it should be `true`. `ababccbaba` clearly is a palindrome. Clearly the test cases could not cover all the scenes Here is my solution, a simple and basic one:```javascript var canPermutePalindrome = function (s) { let set = new Set() for (const str of s) { set.has(str) ? set.delete(str) : set.add(str) } return set.size

Read More