index.html

index.html

If "Happily Ever After" did exist

React Add Event Listener to Component
ProblemWhen making a file drag and drop box as the example below, we need to add event listeners like dragenter drop to the HTML element. SolutionThe solution is to add the listeners to this.theAliasOfTheElement, and then bind the reference to the element in the render function. Code12345678910...
Material UI Browser Style Tab
In case someone needs to build a browser style (and behavior) tab bar using material UI, like the one in the image. There is an add button after the right most tab, and each tab has a close button. 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525...
Material UI Responsive Search in AppBar
ProblemThe Material UI official example of search field looks like this on a mobile device: A search field take over the whole app bar is not what I want. What I managed to achieve is a single search button on the right which will expand the search field on click, as the following picture shows...
React Dynamic Import / Import Component on Demand
Giant chunk of JS may slow down the site’s first render significantly. So instead of packing every module imported to one huge JS, it is better to strip off those rarely accessed modules and make them load only when required. react-loadable is the handy tool for this job. Original code without dy...
Use Class Component in React Material UI
Material UI is a fascinating library for react, but all its default examples are written use function component rather than class component. Convert a component from function to class is quite easy. Take the following Card as example. The original code: 1234567891011121314151617181920212223242526...
从零开始的Webpack + React项目搭建
废话最近因为有项目需要,开始学习React。第一步是工程环境的搭建,这肯定要用到当下最火的Webpack(才不是装比)。因为是初学,为了更好的理解配置(给自己找事),我没有用脚手架。Youtube上有一个不错的教学视频,我基本上就是跟着教程照葫芦画瓢。水一篇文章记录过程,免得过段时间忘了。 安装Webpack创建Node package: 1yarn init private回答“是”以免package被发布。 安装Webpack: 1yarn add -D webpack webpack-cli 修改package.json,添加为webpack打包命令添加入口: 123"scrip...
V2Ray 反向代理分流实现VPN效果
背景有台内网服务器,承载了Web、文件、流媒体等服务,希望在公网环境下的PC、移动端能方便地访问资源。 最初它放在内网,可以通过hostname方便地访问,例如浏览器输入http://iServer即可以访问Web服务。 我想到这台服务器装了V2Ray用于访问国际互联网,而我的手机、平板、PC也都装了V2Ray。如果利用V2Ray 4.0+的反向代理,配合强大的路由功能,应该可以做到在客户端直接通过hostname访问内网服务器,和VPN效果相似。 目标主角命名: 内网主机——iServer,国内公网主机——VPS,客户端——Client。 Client开启V2Ray代理后,可通过域名i...
Setup IKE/IPSec VPN with strongSwan
The setup environment is Ubuntu 18.04 The private network building is 10.10.10.0/24 Install strongSwan and plugins1234567sudo apt install strongswan#Include plugins like EAP-MSCHAPv2, optionalsudo apt install libstrongswan-extra-plugins libcharon-extra-plugins#Used to generate the certificate, op...
卸载阿里云盾全家桶
DO1234567891011121314151617181920212223242526# Uninstall scriptwget -O - http://update.aegis.aliyun.com/download/uninstall.sh | sudo bashwget -O - http://update.aegis.aliyun.com/download/quartz_uninstall.sh | sudo bashsudo rm -r /usr/local/aegis*# Add iptables rulesudo iptables -I INPUT -s 140.20...
Solution to kacpid high CPU usage
Locate the problemI have observed that something on my laptop occasionally hog up one of my CPU core. By list the processes, I believe the kacpid is responsible for this. To find the culprit behind the process, watch -n "cat /proc/interrupts" It is confirmed that the ACPI has some ...