juju's Blog

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

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

你的js速度还可以快一倍以上

对，您没看错，速度杠杠的，秒杀任何前端技术，这就是webassembly(wasm)。 Webassembly是浏览器的字节码技术。这项技术使原生代码C/C++/Rust可以编译为wasm，并运行于浏览器上。相比原生开发，它跨平台，安全；相比js，它拥有显著的性能优势。废话少说，直接看demo [http://static.juju.one/wasm/]。这是我机器上跑的几个简单的算法做的测试，我的天，这可不止一倍啊。（两种实现保证完全一致，代码可以到这里 [http://github.com/gliheng/wasm-perf]围观）温馨提示：demo移动端暂时打不开，性能测试需要很多内存呢，你的小手机吃不消吧... 这么🐂x的技术，怎么快速上手呢？我们接下来试一试。安装依赖💾 * Rust

Switch Alt Key and Windows Key for a Better Dev Experience

I use both mac and windows for development. But keyboards are a bit different and very annoying. Especially when you use emacs, you need to press alt and ctrl a

frontend

node npm mirror

Front end projects that use electron and sass need to set there in china to avoid net issues. npm config set registry https://registry.npm.taobao.org SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass" ELECTRON_MIRROR="https://npm.taobao.org/mirrors/electron/

flutter

Flutter中的数据传递：InheritedWidget, InheritedModel

Flutter中标准的数据传递方法是通过属性传递，类似于react中的props。对于复杂点的UI，这样有时候会比较繁琐。一个属性可能需要跨越很多层传递给子子组件。对于跨层传递，flutter原生支持如下两种方案：InheritedWidget和InheritedModel。 InheritedWidget 有些Flutter使用经验的开发同学，可能比较熟悉这样的代码。通过Theme访问当前的界面风格：Theme.of(context).primaryColor 通过MediaQuery访问屏幕大小：MediaQuery.of(context).size 这两个类都是通过InheritedWidget实现的典范。调用组件可以通过Theme.of方法找到上层最近的Theme父组件，跨层获取到其属性，同时会建立调用组件和上层组件的观察者关系。当上层组件属性修改的时候，触发调用组件的更新。我们通过下面简单的计数器例子，演示下InheritedWidget如何用。如下两个类：InheritedContainer包含了状态计数num属性，Counter通过inheritFromW

flutter

Flutter轻松上手

Flutter是Google推出的移动端跨平台开发技术。比起大家比较熟悉的原生开发，RN, weex等技术栈，它有以下优势： * 编译为原生ARM机器代码，执行效率更高。 * 建立在一套声明式API之上，app逻辑更容易理解。（类似于react的setState/build/diff/render的机制，老一代传统UI是命令式API） * 底层架构在skia绘图层之上，抛弃了OEM widget，因此跨平台行为一致，少有兼容性bug。 * 开发效率高。使用flutter技术可以提升终端开发效率，得益于它的以下几个特性： 1. hot reload（热更新）能获得更快的界面反馈，不用坐等编译 2. Android

rust

Solve RLS could not be started

In case RLS could not be started in VS Code, run the following command to install rls manually will fix it. rustup component add rls-preview rust-analysis rust-src

v-model vs sync in vue

Both v-model and sync can be used for two-way binding between components. expands to: expands to: Basicly, sync was added after v-model. v-model can only be used on html input elements.

Subscribe to juju's Blog