frontend - juju's Blog

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的全链路黑化。用户能在操作系统上一键开启全局的暗黑模式。暗黑模式香吗？暗黑模式有什么优点，值的我们追随？ * 视力保护：相信大家都有半夜刷手机的经历。晚上一个大白屏确实很刺眼。 * 美学、用户习惯：这个角度完全是从个人的感觉出发。有人觉得白底黑字好看，有人觉得黑底白字更酷。另外还要考虑用户习惯，比如股票行情、命令行终端一般都是暗黑模式的。 * 省电：移动设备屏幕电量消耗是个大头。因为屏幕的发光物理原理，深色比

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

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

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

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

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/

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

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") (watch [this

clojurescript

Import clojurescript into ES6 module

In case you have a clojurescript codebase and you want to use it in your ES6 project. Sadly exports-loader does not work with it out of the box. Here's what to do. Mark exported functions using ^:export metadata. ;; algo/core.cljs (defn ^:export answer

frontend

webpack secrets

Here's some tricks to use with webpack. Customize require.ensure load path By default, require.ensure load script based on the page's path. To change this path, set it with this: __webpack_public_path__ = 'static/js/' external require with __non_webpack_require__ requirejs

react

Using a proxy for communication between two components in reactjs

This is obsolete. Use mobx or redux for complex state management. Communication between components is usually done like this. 1. Child component wants to talk to it's ancesters: In this case, pass a function or states as props down the chain. 2. Parent component

frontend

React gotcha list

React is nice. But due to its complexity, some gotcha is bound to come up in development. Here, I keep a list for future reference. * this.props.children is an array if there are multiply children, a ReactElement if there's only one children. (V0.

frontend

dojo amd config

Dojo's amd environment support baseUrl configuration, howerever, when I was trying to set it up. baseUrl does not behave correctly. Module seems to load from a directory a level up from the expected. After a while digging in dojo code, I realized this is

frontend

html5 web component introduction

在软件开发中使用组件，通常能减少重复造轮子的开发，提升开发效率。使用组件的成本一般很低，无非是一个import，一个实例化。在web前端，组件却有较高的使用成本，以至于有时候会选择不用组件，而是重新发开。前端组件主要的问题包括: 1. 众多外部资源的依赖，可以有js库依赖，dom依赖，css样式依赖，图片依赖等。以bootstrap为例，要使用bootstrap的功能必须有以下几个步骤： a. 插入样式 b. 插入依赖js 2. 封装并不严格。例如，外部脚本还是可以修改组件内部结构，外部样式可以影响组件的样式。随着基于HTML5的webapp的发展，前端的组件也被提升到了新的高度。为了解决前端组件存在的诸多问题，W3C提出了web component提案，提案包括了以下四个部分：

frontend

Frontend local development server setup

Local http server is useful in frontend development, and there are myriad of options for its setup. From ease of setup to features, each of them has its pros and cons. python solutions twisted web twisted is a python framework for making network applications.

Subscribe to juju's Blog