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
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
webcomponent or not in 2021? Modified the starter example for litelement. Looks like compound types has to be serialized to take effect inside the component. This is due to limitation of setAttribute. So sorry, webcomponent.
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<T>` notation in parameter. Here's an example. use std::rc::Rc; struct Node; impl
setup ssl with certbot certbot is a cli that enable you to get a free ssl cert for your site. Once you install the cli, it's one step to get a cert chain. Be aware that juju.one is not the same as *.juju.one domain. To get
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_
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 startCmake's configuration is in CMakeLists.txt file cmake_minimum_required(VERSION 3.5) project(play-cc LANGUAGES CXX)
前端的babel优化法 发现系统问题 优化protobuf生成的js 使用babel修改protobuf产出文件 删除部分js代码 替换部分js代码 总结 大前端的时代，前端的重要性已经已经无可置疑。在某些情况下，前端甚至决定了产品的成败。体验优良，性能卓越的前端产品留得住用户，体验糟糕的前端即使后端能力再优秀，最后也难逃被用户卸载的命运。 为了追求前端的性能，前端需要对构建出来的js负责，确保发送给用户的js没有一行多余。这样才能确保最快的加载时间。但是，这个目标通常是比较难做到的。其中一个原因是程序员对webpack构建出来的js都包含什么不是十分清晰；另外一个原因是：大部分项目用了很多轮子（npm包），以确保项目可以按时上线。这些轮子虽然可以使用，但是代码不一定是精简的，我们又对这些代码没有控制能力。即使有些冗余，很多人也都只是忍了。 这里以我们的项目为例介绍我们是如何解决这两个问题的。 发现系统问题 首先，我们需要分析一下我们的项目都用了哪些库，打包出来都多大。 我们用了一个工具webpack-bundle-analyzer。 npm install过后，把这个插件告诉webpack。这样webpack打包的时候webpack-bundle-analyzer就能对打包的文件进行统计。 // webpack.config.js const
你的js速度还可以快一倍以上 对，您没看错，速度杠杠的，秒杀任何前端技术，这就是webassembly(wasm)。 Webassembly是浏览器的字节码技术。这项技术使原生代码C/C++/Rust可以编译为wasm，并运行于浏览器上。相比原生开发，它跨平台，安全；相比js，它拥有显著的性能优势。 废话少说，直接看demo。 这是我机器上跑的几个简单的算法做的测试，我的天，这可不止一倍啊。（两种实现保证完全一致，代码可以到这里围观） 温馨提示：demo移动端暂时打不开，性能测试需要很多内存呢，你的小手机吃不消吧... 这么🐂x的技术，怎么快速上手呢？我们接下来试一试。 安装依赖💾 Rust wasm-pack nodejs (这个你应该已经有了吧。。。) 快速起步🚀 npm init rust-webpack my-app cd my-app npm
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
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通过inheritFromWidgetOfExactType方法找到上层的InheritedContainer组件，并获取计数num并展示在一个按钮里面。 class InheritedContainer extends InheritedWidget { static InheritedContainer of(BuildContext context) { return context.
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. <comp v-model="bar"></comp> expands to: <comp :value="bar" @input="val => bar = val"></comp> <comp :value.
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("
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的第二个语言，且性能强悍。 安装 & 升级 安装：
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
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 is a simple wrapper around react, it makes writing pure functional component a breath. re-frame is like a redux in clojurescript's world. It is a architectural library to make big apps
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
Clojurescript setup Clojurescript is a fun language for frontend dev, especially when you're bored with javascript. Here's how to get started. Install Java8 Clojurescript compiler depends on java8. Install java8 or up on oracle's site. Install Leiningen Leiningen is a build tool for clojure. Just follow
clojurescript Create javascript class with prototype methods in clojurescript When working with clojurescript, you may need to integrate with javascript codebase that asks you to provide a javascript class. Here's how to create such thing: define a type with methods in it using deftype. (defprotocol IProvider (getData [this cbk] "Just bark"
