juju's Blog

nodejs sqlite全文检索防踩坑指北

全文检索是一种在大规模数据集中查找关键词的技术。它是一种基于文本内容的搜索方法，通过索引文本中的每个单词或词组，使其能够快速定位和检索相关文档。全文检索的基本原理是将文本数据集中的每个文档进行分词，生成一个包含所有单词或短语的索引。这个索引通常是一个倒排索引（Inverted Index），它将每个单词或短语映射到包含该词或短语的文档列表。当用户提交一个查询时，全文检索系统会根据查询词在索引中进行匹配，找到相关的文档并按照相关性进行排序，最后返回给用户。全文检索技术广泛应用于各种领域，包括搜索引擎、数据库系统、文档管理系统等。它提供了高效的文本搜索和信息检索能力，用户可以通过关键词或短语快速找到所需的文档或信息。本文产生的背景也是为了搜索。给我们的一个产品文档应用增加一个搜索功能，根据前端输入的关键字进行更高级，更丰富的检索。对比选型 1. LIKE：LIKE是SQL的一个语句，实施简单，但是功能却极其有限。它只能在db的一个字段中进行全字符匹配，多个空格就匹配不上了。人工智能时代了，这样的体验简直说不过去呀。 2. Algolia: 另外一种低成本但

linux

rpath tools

Here are several commands to inspect and modify rpath for both linux and macos. Inspect rpath macos: otool -l my.dylib linux: readelf -d my.so Inspect binary dependency macos: otool -L my.dylib linux: ldd my.so Change rpath macos: install_name_tool

javascript

Why lit

Easy to debug When you develop with webcomponent, you work with chrome devtools instead of library dependent devtools. And chrome devtools has the best performance. Bundle size matters Hello world react, vue, lit project bundled size is 143.39k for react, 52.88k for

Vite proxy debugging

SPA developement with a local proxy to server apis is a common technique nowadays. Here's a usefull method to debug proxy if you need to find out why your proxy fail. defineConfig(mode => { return { server: { proxy: { // ...proxy config here }, configure: (proxy, _options) => { proxy.on(

Drag & Drop memo

Here's a list of key points for HTML5 drag and drop API Drop event not fired You need to preventDefault in dragover event Make only header draggable Set

. Now the drag image may not be what you want. You can set another element as

javascript

Prune cache for vue's KeepAlive component

When you're making a layout with tabs, you'll quickly come to code like this KeepAlive is used to keep the current route component alive. So as to speak, it keeps its state when navigating away. Later you put more and more pages in one

frontend

Nuxt全栈开发

提起nuxt，玩过vue的同事们，应该都有一种似曾相识的感觉。 nuxt框架最初是为了解决前端SSR，SSG的需求而诞生的。由于能上SSR，SSG的项目实在是少，能施展nuxt大法的地方自然也十分有限。但是流行度和一个框架的优秀程度是不能划等号的。虽然单纯的SPA+CSR能解决很大一部分场景，但是SPA+CSR不是web的全貌。在高度这个内卷的时代，掌握一个全栈框架逐渐成为前端开发的必备技能。 Nuxt的闪亮特性 3.0版本后的nuxt已蜕变为全栈框架。不光可以玩SSR SSG，还可以配置成单纯CSR，也可以写后端接口，封装bff接口或是连接db，redis请求数据。目前它包含如下优秀特性： * 支持五种渲染模式，对混合渲染具有灵活的控制。 * 开发体验提升，文件路由，自动导入等功能都可以大大提升开发效率。 * 框架成熟，nuxt深耕vue和SSR领域多年，是vue SSR的最佳方案。 * 快速实现后端接口，前后端一体化开发。 * nuxt devtools可视化管理全部路由和组件。初识nuxt 使用如下命令搭建一个nuxt项目：

nginx

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();

单页面nginx配置详解

单页面应用发布后刷新页面404遇到过么？本篇我们来聊下单页面相关的nginx配置。 nginx是一个高性能的反向代理服务器，也经常用于服务静态资源。一般发布一组静态资源需要配置一个location快，里面填好root跟目录，就可以对外提供这个文件夹的资源访问。如下： location / { root /path/to/static/files/; } 但是单页面只使用root并不行，放到nginx之后一般需要额外的配置。否则在一个较深的url上，刷新页面就会变成404。这是因为单页面的路由在页面运行过程中是虚拟的。后端并不存在对应的静态资源匹配对应的url。解决这个问题需要告诉nginx，假如资源找不到就返回index.html给前端。 location / { root /path/to/static/files/; try_files $uri $uri/ /index.html; } 假如spa的跟路径是某个路径的话，用root可能会有问题。因为它跟$uri的内容有关，它包含了已经匹配的路径。最好使用alias替换root。alias使$uri

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

Subscribe to juju's Blog