juju's Blog

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

前端的babel优化法

* 发现系统问题 * 优化protobuf生成的js * 使用babel修改protobuf产出文件 * 删除部分js代码 * 替换部分js代码 * 总结大前端的时代，前端的重要性已经已经无可置疑。在某些情况下，前端甚至决定了产品的成败。体验优良，性能卓越的前端产品留得住用户，体验糟糕的前端即使后端能力再优秀，最后也难逃被用户卸载的命运。为了追求前端的性能，前端需要对构建出来的js负责，确保发送给用户的js没有一行多余。这样才能确保最快的加载时间。但是，这个目标通常是比较难做到的。其中一个原因是程序员对webpack构建出来的js都包含什么不是十分清晰；另外一个原因是：大部分项目用了很多轮子（npm包），以确保项目可以按时上线。这些轮子虽然可以使用，但是代码不一定是精简的，我们又对这些代码没有控制能力。即使有些冗余，很多人也都只是忍了。这里以我们的项目为例介绍我们是如何解决这两个问题的。发现系统问题首先，我们需要分析一下我们的项目都用了哪些库，打包出来都多大。我们用了一个工具webpack-bundle-analyzer [https://www.npm

Subscribe to juju's Blog