juju's Blog (Page 2)

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.

rust

For loop in rust

For loop in rust consumes(moves) the object, making it impossible to be used again. In this code, HashMap is consumed(moved). let mut m = HashMap::new(); m.insert(String::from("gaga"), String::from("m1")); m.insert(String::from("gaga1"), String::from("m2")); // m

rust

Dynamic typing in rust

Any trait is a trait that matches any type in rust. Use it as a trait object, allows for dynamic typing. The following code use Any trait with a HashMap to store anything in it. use std::collections::HashMap; use std::any::Any; fn

rust

Rust概述

Rust是Mozilla公司发起的一个开源项目。它注重安全、性能和并发，是一种系统级编程语言。Rust是针对多核体系提出的语言，并且吸收一些其他动态语言的重要特性，比如不需要管理内存，比如不会出现Null指针等等。相比C/C++这些底层语言，rust不但具备底层控制力，且具有良好的高级语言特性，生态系统。Rust一经诞生就被运用于servo浏览器内核项目开发，具备实战经历。首先，在学习rust之前要有这样的预期：rust不是python，不要期望一个星期迅速掌握。然而，掌握之后好比光剑在手，可以尽情释放原力。近期学习rust，是因为rust是支持webassembly的第二个语言，且性能 [https://benchmarksgame.alioth.debian.

frontend

WebAssembly起步

WebAssembly是一种可以在浏览器上运行的二进制可执行格式文件。它将成为浏览器进化史上又一次革命。自从浏览器问世以来，javascript就成为浏览器上执行程序的唯一标准，越来越多的应用程序通过javascript开发，并运行于浏览器上；而随着浏览器上h5程序功能的丰富，也对浏览器提出了更多的挑战...

clojurescript

Two ways to set and get property in clojurescript

There's two forms to get and set property in clojurescript. ;; get property (.-innerHTML el) (aget el "innerHTML") ;; set property (set! (.-innerHTML el) "Hi!") (aset el "innerHTML" "Hi!") In practice, use aget with aset or set! with .-attr form, but don't mix them. Otherwise closure

clojurescript

Access this in clojurescript

To access this in a clojurescript function, use this-as macro https://cljs.github.io/api/cljs.core/this-as (def fadein-view (reagent/create-class {:get-initial-state (fn [this] {:hidden true :height 0}) :component-will-appear (fn [cbk] (this-as this (reagent/set-state this {:hidden false}) (cbk))) ...

clojurescript

Complete re-frame Tutorial

In this tutorial, we'll introduce writing clojurescript app with reagent and re-frame. reagent [http://reagent-project.github.io/] is a simple wrapper around react, it makes writing pure functional component a breath. re-frame [https://github.com/Day8/re-frame] is like a redux [http://redux.js.

SPA with Reagent

Reagent is a react wrapper in clojurescript. It allows you to write html template in hiccup form. like this [:p "Hello"]. Compared with Om, it's lightweight and has an easy learning curve. Here's steps to get started with reagent: Get to know reagent component

Clojurescript setup

Clojurescript is a fun language for frontend dev, especially when you're bored with javascript. Here's how to get started. 1. Install Java8 Clojurescript compiler depends on java8. Install java8 or up on oracle's site. 2. Install Leiningen Leiningen is a build tool for clojure.

Subscribe to juju's Blog