Amadeus Guo - juju's Blog

Config nginx to find resources in different folders

Frontend resources are usually cached and postfixed with hashes. Keep previous version's resources online can prevent 404 for request from stale cached resources. Say you have different versions of front end resources deployed in current and previous folders. Use try_files to look in

javascript

web暗黑模式浅议

大家有没有发现近些年的新设备从移动的到PC全都支持暗黑模式了？是的，这是个趋势。而且有些应用市场上不支持暗黑模式的应用都已经不能上线了。暗黑模式本质上是一种换肤技术。早在20年前，qzone，人人网之类的应用就已经在web平台上实现了换肤。支持的皮肤可谓五花八门，还能商业化卖钱。所以暗黑模式不是什么新技术。然而为什么最近几年却出现新的活力？主要原因在于操作系统层面都加入了对暗黑模式的支持。最开始是Android (Android 10)，IOS (IOS 13)等移动端系统，之后桌面端也都加入了暗黑阵营。从而形成了从操作系统到应用程序，再到web的全链路黑化。用户能在操作系统上一键开启全局的暗黑模式。暗黑模式香吗？暗黑模式有什么优点，值的我们追随？ * 视力保护：相信大家都有半夜刷手机的经历。晚上一个大白屏确实很刺眼。 * 美学、用户习惯：这个角度完全是从个人的感觉出发。有人觉得白底黑字好看，有人觉得黑底白字更酷。另外还要考虑用户习惯，比如股票行情、命令行终端一般都是暗黑模式的。 * 省电：移动设备屏幕电量消耗是个大头。因为屏幕的发光物理原理，深色比

nodejs

node-gyp config

node-gyp is a build generator for node addon development, similar to cmake. However, it's default for node and requires fewer configuration. Set variables { "variables": { "heads_sdk_ver": "1.23" }, "targets": [ { 'libraries': [ "<(module_root_dir)/heads-cpp-sdk/lib/Release/libnats_framework.so.<(heads_sdk_ver)", ] } ] } Set

flutter

flutter ffi pitfall

In IOS release mode app, symbols mysteriously get striped. Here's the missing piece from the doc. If symbol is exported in C++, extern "C" is not enough. Make sure attribute markups are there extern "C" /* <= C++ only */ __attribute__((visibility("default"))) __attribute__((used)) If symbol

rust

rust type memory layout

sql

Sql execution order

Build multi architecture frameworks for MacOS or IOS

On IOS platform, iphone and simulator are different targets. To produce one framework for both targets, you need to use xcframwork. First, build each framework separately then run xcodebuild to combine multi frameworks into xcframework. xcodebuild -create-xcframework -framework Release-iphoneos/VerovioFramework.framework -framework Release-iphonesimulator/VerovioFramework.

javascript

Nestjs dependency injection

DI is a key paradigm of nestjs. Here's some experience I got after nestjs experiment. * Provider are scoped within a module. If you want a provider available everywhere, you need to attach it to a global module using @Global. * If a non-global provider is

javascript

Detect web page running in puppeteer

Puppeteer use headless chrome with this ua: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/101.0.4950.0 Safari/537.36 We can check the special string HeadlessChrome to detect /HeadlessChrome/.test(navigator.userAgent);

git

Batch edit last few git commits

Git rebase have an `--exec` option to run for every commit. For example, to update commit time for last 2 commits. git rebase HEAD~2 --exec "git commit --amend --no-edit --date 'now'"

Verovio build

Windows MacOS build cmake -DBUILD_AS_LIBRARY=ON -DCMAKE_BUILD_TYPE=Release -B build cmake --build build --config Release Look like non-unicode system locale cause build to fail. Adjusted to English for building. Android build In Application.mk add: APP_SHORT_COMMANDS := true In

javascript

Unexpected loop introduced with vue jsx

Vue3 has excellent support for jsx nowadays. Since jsx is flexible and is best used in library componets. Today a strange loop was introduced when I was developing a component with the following code. Child is reassigned throughout a block. This code is compiled

http

HTTPS for localhost

Here's a brief summary of how to generate a self signed certificate for localhost. Basically, there are 3 steps. Generate CA keys # generate CA private key openssl genrsa -out CA.key -des3 2048 # generate CA public key with private key openssl req -x509 -sha256

Embed Flutter in Android

安卓全页面嵌入全页面嵌入flutter使用io.flutter.embedding.android.FlutterActivity 部分页面嵌入部分页面嵌入flutter使用io.flutter.embedding.android.FlutterView和io.flutter.embedding.engine.FlutterEngine 在onCreate方法里面flutterView.attachToFlutterEngine(flutterEngine);onDestroy方法里面flutterView.detachFromFlutterEngine();同时还要把其他几个声明周期状态传到flutter，例如flutterEngine.getLifecycleChannel().appIsResumed();

javascript

Using jsx with vue3

SFC (single file component) is one of best vue invention. Compared with jsx, it's simple, easy to use and maintain. In some cases however, react jsx offers flexibility and power that SFC cannot offer. eg. You're making a complex table component, a custom layout

nodejs

caret vs tilde in package.json

Caret (^) notation: It is used for automatically updating the minor updates along with patch updates. Tilde (~) notation: It is used to match the most recent patch version.

frontend

Export data as excel in h5

In case you have a tabular data, and you want to export the data as excel. Your best option in h5 is to export the data as csv file. CSV file can be easily imported into excel and by default is recognized by excel

Provider

Flutter provider package is a simple state management solution. There are few essential provider classes you need to know: Provider, FutureProvider, ChangeNotifierProvider, ProxyProvider. Here I record some basic usages for provide 5 Provider let you inject a dependency for its decendents. Provider( create: (ctx)

rust

Rust conditional compilation

if cfg!(windows) { // this only accept good rust code } #[cfg(target_os = "windows")] { wtf // this can be anything if not used }

frontend

Disable vite bare module cache

"What is bare module import?" You may ask. import { ref } from 'vue'; This is it. You are imporing from 'vue', instead of './vue/...' In native browser, this is not supported. You get this error. So vite shim it. It generate a cache

Include wrapper type when calling rust methods

Sometimes, when calling methods on a struct inside a box or rc, you want the wrapper object. The way to do it is to use `self: &Box` notation in parameter. Here's an example. use std::rc::Rc; struct Node; impl Node { fn test_

setup ssl with certbot on linode

certbot is a cli that enable you to get a free ssl cert for your site. Install sudo apt install certbot python3-certbot-dns-linode Get linode key Get your linode key from account settings with domain permission. Save the file as linode.ini > dns_linode_key

cmake with cargo

Here's the setup to add in CMakeLists.txt, to use cargo generated lib with cmake. if ("${CMAKE_BUILD_TYPE}" STREQUAL "Release") set(CARGO_FLAG "--release") endif () if ("${NODE_ARCH}" STREQUAL "ia32") set(CARGO_TOOLCHAIN "+stable-i686-pc-windows-msvc") endif () add_custom_target(NAME ALL COMMAND cargo ${CARGO_

strapi permanent tokens

strapi does not support permanent tokens out of the box. You may need to use permanent tokens for devops integration. Modify this file /plugins/users-permissions/services/Jwt.js to make strapi support permanent tokens. diff --git a/plugins/users-permissions/services/Jwt.js b/plugins/

Cmake quickstart

Android ndk uses cmake, Qt6 use cmake by default. It's such an important tool in C++ world now. Let's have a look how to use it. Quick start Cmake's configuration is in CMakeLists.txt file cmake_minimum_required(VERSION 3.5) project(play-cc LANGUAGES

Subscribe to juju's Blog