To set up Caddy for serving a Single Page Application (SPA) like a React app with react-router, you need to handle routing such that all navigation requests are routed to index.html
, while also serving the static assets correctly.
Setup Caddy for Minio
In this guide, we'll configure Caddy to serve as a reverse proxy for Minio, an object storage server. This setup will allow you to access the Minio console and the object storage service through Caddy.
Caddy Configuration
storage.xiaohai-huang.net {
redir /minio-console /minio-console/
handle_path /minio-console/* {
reverse_proxy my-minio-server:9001
}
handle_path /* {
reverse_proxy my-minio-server:9000
}
}
You can remove the redir
line if the Minio container specifies the console path as /minio-console/ (the trailing slash is needed)
Conclusion
With this configuration, Caddy will route traffic to the appropriate Minio services, making it easy to manage your object storage setup.
Taobao HangZhou Interview Round 1
-
How do you decide when to run
useLayoutEffect
?Ans:
useLayoutEffect
is a version ofuseEffect
that fires before the browser repaints the screen.- Measuring layout before the browser repaints the screen.
- Blocks the browser from repainting.
-
The execution order of
useEffect
anduseLayoutEffect
.Feature useEffect useLayoutEffect Execution Timing Runs after the render is committed to the screen. This means it runs after the browser has painted changes to the screen. Runs synchronously after all DOM mutations. This means it runs before the browser has a chance to paint, making it suitable for reading layout from the DOM and synchronously re-rendering. Use Cases Most side effects (data fetching, subscriptions) DOM manipulation, measuring elements, critical layout updates Performance Generally better performance due to async nature Can impact performance if used excessively, as it blocks the browser from repainting
Perform In-Game Updates in Unity using HybridCLR and Addressables
Imagine you are playing your favorite game on your phone. You are enjoying the graphics, the gameplay, and the story. Suddenly, you encounter a bug that crashes the game. You check the app store for an update, but there is none. You are frustrated and disappointed.
Now imagine you are developing a game with Unity. You want to deliver the best experience to your players, but you also want to save time and money. You don't want to recompile and resubmit your entire project every time you need to fix a bug or add a feature. You want to update your game without requiring users to download a new version of the app.
How can you achieve this?
The answer is hot updating.
Hot updating is a technique that allows you to update both code and resources of your game at runtime. This means that you can fix bugs, add features, and optimize performance without affecting the user experience.
But how can you implement hot updating in Unity?
In this blog post, I will introduce you a solution that can help you perform in-game updates in Unity with minimal effort and maximum flexibility. It is based on two open source projects: HybridCLR and Addressables.
HybridCLR is a framework that allows you to write C# code that can be compiled into IL2CPP or Mono assemblies at runtime. This means that you can update your game logic without recompiling your entire project.
Addressables is a Unity package that provides an easy way to load assets by key from local or remote locations.
By combining these two tools, you can perform in-game updates in Unity with minimal effort and maximum flexibility.
In this blog post, I will show you how to use HybridCLR and Addressables to perform in-game updates in Unity, and demonstrate how this solution can improve your game development workflow and user experience.
Serve Static Website Stored On Remote Server Using Nginx
I stored the build
folder of react app on my MiniO server under the path https://storage.xiaohai-huang.net/website/build/index.html
. I want to serve the web app using a custom domain pxd.pink
. Here is how I achieve this with the help of Nginx.
Host a MinIO Server with Nginx as Reverse Proxy
This documentation covers the minimum settings required to configure NGINX to proxy requests to MinIO.
Given domain storage.xiaohai-huang.net
- Proxy requests to
https://storage.xiaohai-huang.net
to the MinIO S3 API server listening onhttp://my-minio-server:9000
- Proxy requests to the subpath (
/minio-console
) of the domainhttps://storage.xiaohai-huang.net/minio-console
to the MinIO Web Console listening onhttp://my-minio-server:9001
Host | Container |
---|---|
https://storage.xiaohai-huang.net | http://my-minio-server:9000 |
https://storage.xiaohai-huang.net/minio-console | http://my-minio-server:9001 |
Alibaba Beijing Interview Round 1
- What are JS primitive data types?
- What's the use of
Symbol
? - Have you used
BigInt
?
- What's the use of
- Tell me about
prototype chain
. - How do you implement a virtualized list? solution
Map
vs plain object? MDN solution- flexbox
- How to narrow a variable's type in typescript?
How to Setup a ShadowSocks VPN Server?
A fast and reliable VPN server.
Accessing a WSL2 Networking Apps From Your LAN
When using a WSL 1 distribution, if your computer was set up to be accessed by your LAN, then applications run in WSL could be accessed on your LAN directly.
However, this isn't the default case in WSL2 as it has a virtualized ethernet adapter with its own unique IP address.
LeetCode 75 Study Plan
This study plan is for those who want to prepare for technical interviews but are uncertain which problems they should focus on. The problems have been carefully curated so that levels 1 and 2 will guide beginner and intermediate users through problems that cover the data structures and algorithms necessary to succeed in interviews with most mid-tier companies. While level 3 provides material to help users whose targets are top-tier companies. -- LeetCode