-
Notifications
You must be signed in to change notification settings - Fork 0
/
blog.html
1 lines (1 loc) · 31.1 KB
/
blog.html
1
<!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=device-width"/><meta charSet="utf-8"/><link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png"/><link rel="manifest" href="/favicon/site.webmanifest"/><link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#ef4444"/><link rel="shortcut icon" href="/favicon/favicon.ico"/><meta name="msapplication-TileColor" content="#ef4444"/><meta name="msapplication-config" content="/favicon/browserconfig.xml"/><meta name="theme-color" content="#ef4444"/><meta property="og:type" content="website"/><meta property="og:title" content="Magicbell's Website"/><meta property="og:url" content="https://imagicbell.github.io"/><meta property="og:description" content="Welcome to Magicbell's Website, a place where you will know more about me from my professional experience and technical posts."/><meta property="og:image" content="/_next/static/images/avatar-b229a410146fdbebcd2035ef237d2ad0.jpg"/><meta name="twitter:image" content="/_next/static/images/avatar-b229a410146fdbebcd2035ef237d2ad0.jpg"/><title>Magicbell's Blog</title><meta name="description" content="Welcome to Magicbell's Website - see blog posts."/><meta property="og:type" content="website"/><meta property="og:title" content="Magicbell's Blog"/><meta property="og:description" content="Welcome to Magicbell's Website - see blog posts."/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="Magicbell's Blog"/><meta name="twitter:description" content="Welcome to Magicbell's Website - see blog posts."/><meta name="next-head-count" content="25"/><link rel="preload" href="/_next/static/css/555b173cbb3b3b45df80.css" as="style"/><link rel="stylesheet" href="/_next/static/css/555b173cbb3b3b45df80.css" data-n-g=""/><link rel="preload" href="/_next/static/css/1a68ae46e299420c5773.css" as="style"/><link rel="stylesheet" href="/_next/static/css/1a68ae46e299420c5773.css" data-n-p=""/><noscript data-n-css=""></noscript><link rel="preload" href="/_next/static/chunks/main-e903dbcb0f26f07bddca.js" as="script"/><link rel="preload" href="/_next/static/chunks/webpack-245f049e565ebf942e09.js" as="script"/><link rel="preload" href="/_next/static/chunks/framework.29f9e2f3d4a33bafbaa5.js" as="script"/><link rel="preload" href="/_next/static/chunks/commons.449049b2eba38352d9f4.js" as="script"/><link rel="preload" href="/_next/static/chunks/pages/_app-8c930b98cabfdb7a913b.js" as="script"/><link rel="preload" href="/_next/static/chunks/cb1608f2.16ad8215560a85b40620.js" as="script"/><link rel="preload" href="/_next/static/chunks/a9a7754c.dec6fcf45fa1bcf7c2c8.js" as="script"/><link rel="preload" href="/_next/static/chunks/eda77bfa782fcce19c31e9417d5ccf0cdb548971.d0a029473df3535a2906.js" as="script"/><link rel="preload" href="/_next/static/chunks/8410e8da63518be12bbb03b338cbeeeaa2b87d98.22e74b4b4510f82d44b7.js" as="script"/><link rel="preload" href="/_next/static/chunks/pages/blog/%5B%5B...page%5D%5D-6b7e264f18557bf1bf02.js" as="script"/><style id="__jsx-1671368469">.paginate.jsx-1671368469{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;}.prev-next.jsx-1671368469{width:5rem;}.page-num.jsx-1671368469{width:2.5rem;}.disabled.jsx-1671368469{pointer-events:none;cursor:not-allowed;}.current.jsx-1671368469{color:#fff;}</style></head><body><div id="__next"><div class="min-h-screen"><div class="w-full bg-theme-bg-strong flex justify-between items-end px-container py-4 text-theme-bg-strong-text"><h2 class="text-xl md:text-3xl font-bold tracking-tighter md:tracking-tight"><a class="" href="/">Magicbell's Website</a></h2><nav class="text-base md:text-lg flex justify-end items-center"><a class="border-b-2 border-theme-bg-strong-text border-opacity-0 hover:border-opacity-100 mx-2 md:mx-4 border-opacity-100" href="/blog">Blog</a><a class="border-b-2 border-theme-bg-strong-text border-opacity-0 hover:border-opacity-100 mx-2 md:mx-4" href="/resume">Resume</a></nav></div><main class="relative container mx-auto my-14 px-container"><div class="flex flex-row justify-between"><div class="w-full lg:w-2/3"><div class="max-w-2xl"><div class="mb-16"><div data-aos="fade-up" class="relative mb-8 border border-solid border-theme-border rounded cursor-pointer shadow-sm hover:shadow-md"><a class="absolute top-0 left-0 w-full h-full" href="/posts/2021-7-7-react-usecontext-usereducer"></a><div class="ml-4 mr-4 mt-6 mb-6"><p class="text-xl text-left font-medium mb-4">Use React Context + useReducer to Implement A Simple State Management Like Redux</p><div class="mb-4"><div class="markdown-body markdown-styles_markdown__1x9gM"><p>React Hooks have brought us much convenience in writing concise readable code. Recently, I have been enjoying the usage of React Context and useReducer to implement a simple state management architecture, as a replacement of Redux. There are at least...</p></div></div><div class="text-theme-meta text-sm flex flex-col sm:flex-row sm:items-center"><time dateTime="2021-07-07T20:00:00+08:00">July 7, 2021</time><div class="w-px h-px border rounded mx-2 border-theme-meta hidden sm:block"></div><span>4min read</span></div></div><div class="absolute right-4 bottom-6 flex justify-end items-center text-theme-link text-sm"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="folder-open" class="svg-inline--fa fa-folder-open fa-w-18 h-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"></path></svg><a class="ml-2 hover:underline hover:text-theme-link-highlight whitespace-nowrap" href="/blog/front-end">Front-End</a></div></div><div data-aos="fade-up" class="relative mb-8 border border-solid border-theme-border rounded cursor-pointer shadow-sm hover:shadow-md"><a class="absolute top-0 left-0 w-full h-full" href="/posts/2021-6-13-ublockly-ugui"></a><div class="relative h-80 w-full"><img src="/blog/assets/img-blockly/Demo.png" alt="" class="object-cover w-full h-full" loading="lazy"/></div><div class="ml-4 mr-4 mt-6 mb-6"><p class="text-xl text-left font-medium mb-4">The UGUI Design of uBlockly - Reimplementation of Google Blockly in Unity</p><div class="mb-4"><div class="markdown-body markdown-styles_markdown__1x9gM"><p>For Chinese:...</p></div></div><div class="text-theme-meta text-sm flex flex-col sm:flex-row sm:items-center"><time dateTime="2021-06-13T20:00:00+08:00">June 13, 2021</time><div class="w-px h-px border rounded mx-2 border-theme-meta hidden sm:block"></div><span>5min read</span></div></div><div class="absolute right-4 bottom-6 flex justify-end items-center text-theme-link text-sm"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="folder-open" class="svg-inline--fa fa-folder-open fa-w-18 h-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"></path></svg><a class="ml-2 hover:underline hover:text-theme-link-highlight whitespace-nowrap" href="/blog/unity">Unity</a></div></div><div data-aos="fade-up" class="relative mb-8 border border-solid border-theme-border rounded cursor-pointer shadow-sm hover:shadow-md"><a class="absolute top-0 left-0 w-full h-full" href="/posts/2021-6-12-ublockly-interpreter-runner"></a><div class="relative h-80 w-full"><img src="/blog/assets/img-blockly/Demo.png" alt="" class="object-cover w-full h-full" loading="lazy"/></div><div class="ml-4 mr-4 mt-6 mb-6"><p class="text-xl text-left font-medium mb-4">The Interpreter and Runner of uBlockly - Reimplementation of Google Blockly in Unity</p><div class="mb-4"><div class="markdown-body markdown-styles_markdown__1x9gM"><p>For Chinese:...</p></div></div><div class="text-theme-meta text-sm flex flex-col sm:flex-row sm:items-center"><time dateTime="2021-06-12T11:00:00+08:00">June 12, 2021</time><div class="w-px h-px border rounded mx-2 border-theme-meta hidden sm:block"></div><span>6min read</span></div></div><div class="absolute right-4 bottom-6 flex justify-end items-center text-theme-link text-sm"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="folder-open" class="svg-inline--fa fa-folder-open fa-w-18 h-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"></path></svg><a class="ml-2 hover:underline hover:text-theme-link-highlight whitespace-nowrap" href="/blog/unity">Unity</a></div></div><div data-aos="fade-up" class="relative mb-8 border border-solid border-theme-border rounded cursor-pointer shadow-sm hover:shadow-md"><a class="absolute top-0 left-0 w-full h-full" href="/posts/2021-6-11-ublockly-model"></a><div class="relative h-80 w-full"><img src="/blog/assets/img-blockly/Demo.png" alt="" class="object-cover w-full h-full" loading="lazy"/></div><div class="ml-4 mr-4 mt-6 mb-6"><p class="text-xl text-left font-medium mb-4">The Blockly Model of uBlockly - Reimplementation of Google Blockly in Unity</p><div class="mb-4"><div class="markdown-body markdown-styles_markdown__1x9gM"><p>For Chinese:...</p></div></div><div class="text-theme-meta text-sm flex flex-col sm:flex-row sm:items-center"><time dateTime="2021-06-11T20:00:00+08:00">June 11, 2021</time><div class="w-px h-px border rounded mx-2 border-theme-meta hidden sm:block"></div><span>4min read</span></div></div><div class="absolute right-4 bottom-6 flex justify-end items-center text-theme-link text-sm"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="folder-open" class="svg-inline--fa fa-folder-open fa-w-18 h-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"></path></svg><a class="ml-2 hover:underline hover:text-theme-link-highlight whitespace-nowrap" href="/blog/unity">Unity</a></div></div><div data-aos="fade-up" class="relative mb-8 border border-solid border-theme-border rounded cursor-pointer shadow-sm hover:shadow-md"><a class="absolute top-0 left-0 w-full h-full" href="/posts/2021-6-10-ublockly-introduction"></a><div class="relative h-80 w-full"><img src="/blog/assets/img-blockly/Demo.png" alt="" class="object-cover w-full h-full" loading="lazy"/></div><div class="ml-4 mr-4 mt-6 mb-6"><p class="text-xl text-left font-medium mb-4">Introduction of uBlockly - Reimplementation of Google Blockly in Unity</p><div class="mb-4"><div class="markdown-body markdown-styles_markdown__1x9gM"><p>For Chinese:...</p></div></div><div class="text-theme-meta text-sm flex flex-col sm:flex-row sm:items-center"><time dateTime="2021-06-10T20:00:00+08:00">June 10, 2021</time><div class="w-px h-px border rounded mx-2 border-theme-meta hidden sm:block"></div><span>1min read</span></div></div><div class="absolute right-4 bottom-6 flex justify-end items-center text-theme-link text-sm"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="folder-open" class="svg-inline--fa fa-folder-open fa-w-18 h-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"></path></svg><a class="ml-2 hover:underline hover:text-theme-link-highlight whitespace-nowrap" href="/blog/unity">Unity</a></div></div><div data-aos="fade-up" class="relative mb-8 border border-solid border-theme-border rounded cursor-pointer shadow-sm hover:shadow-md"><a class="absolute top-0 left-0 w-full h-full" href="/posts/2021-6-5-build-my-website-image-opti"></a><div class="ml-4 mr-4 mt-6 mb-6"><p class="text-xl text-left font-medium mb-4">How To Build My Own Website (4) - Image Optimization</p><div class="mb-4"><div class="markdown-body markdown-styles_markdown__1x9gM">This article illustrates how I applied image optimization to improve the performance of my website.</div></div><div class="text-theme-meta text-sm flex flex-col sm:flex-row sm:items-center"><time dateTime="2021-06-05T20:00:00+08:00">June 5, 2021</time><div class="w-px h-px border rounded mx-2 border-theme-meta hidden sm:block"></div><span>2min read</span></div></div><div class="absolute right-4 bottom-6 flex justify-end items-center text-theme-link text-sm"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="folder-open" class="svg-inline--fa fa-folder-open fa-w-18 h-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"></path></svg><a class="ml-2 hover:underline hover:text-theme-link-highlight whitespace-nowrap" href="/blog/front-end">Front-End</a></div></div><div data-aos="fade-up" class="relative mb-8 border border-solid border-theme-border rounded cursor-pointer shadow-sm hover:shadow-md"><a class="absolute top-0 left-0 w-full h-full" href="/posts/2021-3-14-build-my-website-style"></a><div class="ml-4 mr-4 mt-6 mb-6"><p class="text-xl text-left font-medium mb-4">How To Build My Own Website (3) - Style</p><div class="mb-4"><div class="markdown-body markdown-styles_markdown__1x9gM">This article illustrates how I style my own website using Tailwindcss framework, make theme color configurable, and apply interactive animations.</div></div><div class="text-theme-meta text-sm flex flex-col sm:flex-row sm:items-center"><time dateTime="2021-03-14T20:00:00+08:00">March 14, 2021</time><div class="w-px h-px border rounded mx-2 border-theme-meta hidden sm:block"></div><span>2min read</span></div></div><div class="absolute right-4 bottom-6 flex justify-end items-center text-theme-link text-sm"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="folder-open" class="svg-inline--fa fa-folder-open fa-w-18 h-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"></path></svg><a class="ml-2 hover:underline hover:text-theme-link-highlight whitespace-nowrap" href="/blog/front-end">Front-End</a></div></div><div data-aos="fade-up" class="relative mb-8 border border-solid border-theme-border rounded cursor-pointer shadow-sm hover:shadow-md"><a class="absolute top-0 left-0 w-full h-full" href="/posts/2021-3-12-build-my-website-markdown"></a><div class="ml-4 mr-4 mt-6 mb-6"><p class="text-xl text-left font-medium mb-4">How To Build My Own Website (2) - Markdown</p><div class="mb-4"><div class="markdown-body markdown-styles_markdown__1x9gM"><p>Parsing and displaying Markdown files are one of the most important things in building a personal website, because all my blogs are written in Markdown. This article illustrates several things that I did in processing Markdown files....</p></div></div><div class="text-theme-meta text-sm flex flex-col sm:flex-row sm:items-center"><time dateTime="2021-03-12T20:00:00+08:00">March 12, 2021</time><div class="w-px h-px border rounded mx-2 border-theme-meta hidden sm:block"></div><span>3min read</span></div></div><div class="absolute right-4 bottom-6 flex justify-end items-center text-theme-link text-sm"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="folder-open" class="svg-inline--fa fa-folder-open fa-w-18 h-4" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"></path></svg><a class="ml-2 hover:underline hover:text-theme-link-highlight whitespace-nowrap" href="/blog/front-end">Front-End</a></div></div></div><div style="width:20rem" class="jsx-1671368469 h-8 border border-theme-border rounded flex text-theme-link"><a class="jsx-1671368469 paginate hover:text-theme-link-highlight prev-next disabled" href="/blog/page/0">Previous</a><a class="jsx-1671368469 paginate hover:text-theme-link-highlight page-num border-l border-theme-border disabled text-theme-link-disable current bg-theme-link" href="/blog">1</a><a class="jsx-1671368469 paginate hover:text-theme-link-highlight page-num border-l border-theme-border " href="/blog/page/2">2</a><a class="jsx-1671368469 paginate hover:text-theme-link-highlight page-num border-l border-theme-border disabled text-theme-link-disable " href="/blog/page/...">...</a><a class="jsx-1671368469 paginate hover:text-theme-link-highlight page-num border-l border-theme-border " href="/blog/page/5">5</a><a class="jsx-1671368469 paginate hover:text-theme-link-highlight prev-next border-l border-theme-border false" href="/blog/page/2">Next</a></div></div></div><div class="hidden lg:block lg:w-1/3 box-border ml-8"><div class="sticky top-0"><div class="border border-solid border-theme-border rounded shadow-sm flex flex-col"><div class="px-20 mt-6"><img class="object-cover rounded-full" src="/_next/static/images/avatar-b229a410146fdbebcd2035ef237d2ad0.jpg" alt="" width="180" height="180"/></div><div class="m-6"><div class="text-xl font-semibold">Ling Mao</div><div class="mt-2">Coding for Frontend and Unity apps.</div><div class="mt-3 text-theme-meta flex items-center"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="map-marker-alt" class="svg-inline--fa fa-map-marker-alt fa-w-12 h-5 mr-2" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z"></path></svg>Vancouver, Canada</div><div class="mt-3 flex items-center"><a href="mailto:[email protected]" class="mr-4"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelope-square" class="svg-inline--fa fa-envelope-square fa-w-14 h-6" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" color="rgb(239, 68, 68)"><path fill="currentColor" d="M400 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM178.117 262.104C87.429 196.287 88.353 196.121 64 177.167V152c0-13.255 10.745-24 24-24h272c13.255 0 24 10.745 24 24v25.167c-24.371 18.969-23.434 19.124-114.117 84.938-10.5 7.655-31.392 26.12-45.883 25.894-14.503.218-35.367-18.227-45.883-25.895zM384 217.775V360c0 13.255-10.745 24-24 24H88c-13.255 0-24-10.745-24-24V217.775c13.958 10.794 33.329 25.236 95.303 70.214 14.162 10.341 37.975 32.145 64.694 32.01 26.887.134 51.037-22.041 64.72-32.025 61.958-44.965 81.325-59.406 95.283-70.199z"></path></svg></a><a href="https://www.linkedin.com/in/magicbell" class="mr-4"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin" class="svg-inline--fa fa-linkedin fa-w-14 h-6" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" color="#007bb6"><path fill="currentColor" d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"></path></svg></a><a href="https://github.com/imagicbell" class="mr-4"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16 h-6" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" color="#24292e"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></div></div></div></div></div></div></main></div><footer class="w-full bg-theme-bg-strong px-container py-4 text-theme-bg-strong-text flex flex-col items-center"><nav class="text-base md:text-lg flex justify-end items-center"><a class="border-b-2 border-theme-bg-strong-text border-opacity-0 hover:border-opacity-100 mx-2 md:mx-4" href="/">Home</a><a class="border-b-2 border-theme-bg-strong-text border-opacity-0 hover:border-opacity-100 mx-2 md:mx-4 border-opacity-100" href="/blog">Blog</a><a class="border-b-2 border-theme-bg-strong-text border-opacity-0 hover:border-opacity-100 mx-2 md:mx-4" href="/resume">Resume</a></nav><div class="w-full my-2 flex flex-col sm:flex-row justify-between"><div class="text-xs">© 2021 Ling Mao. Powered by <a class="hover:underline" href="https://reactjs.org/" rel="nofollow">React</a> & <a class="hover:underline" href="https://nextjs.org/" rel="nofollow">Next.js</a>.</div><div class="flex justify-center sm:justify-end items-center"><a href="mailto:[email protected]" class="mr-4"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="envelope" class="svg-inline--fa fa-envelope fa-w-16 h-6" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" color="#fff"><path fill="currentColor" d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"></path></svg></a><a href="https://www.linkedin.com/in/magicbell" class="mr-4"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="linkedin-in" class="svg-inline--fa fa-linkedin-in fa-w-14 h-6" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" color="#fff"><path fill="currentColor" d="M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z"></path></svg></a><a href="https://github.com/imagicbell" class="mr-4"><svg aria-hidden="true" focusable="false" data-prefix="fab" data-icon="github" class="svg-inline--fa fa-github fa-w-16 h-6" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" color="#fff"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></div></div></footer></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"posts":[{"slug":"2021-7-7-react-usecontext-usereducer","title":"Use React Context + useReducer to Implement A Simple State Management Like Redux","date":"2021-07-07T20:00:00+08:00","locale":"en","categories":["Front-End"],"readTime":4,"excerpt":"\u003cp\u003eReact Hooks have brought us much convenience in writing concise readable code. Recently, I have been enjoying the usage of React Context and useReducer to implement a simple state management architecture, as a replacement of Redux. There are at least...\u003c/p\u003e"},{"slug":"2021-6-13-ublockly-ugui","title":"The UGUI Design of uBlockly - Reimplementation of Google Blockly in Unity","date":"2021-06-13T20:00:00+08:00","locale":"en","ogImage":"/blog/assets/img-blockly/Demo.png","categories":["Unity"],"readTime":5,"excerpt":"\u003cp\u003eFor Chinese:...\u003c/p\u003e"},{"slug":"2021-6-12-ublockly-interpreter-runner","title":"The Interpreter and Runner of uBlockly - Reimplementation of Google Blockly in Unity","date":"2021-06-12T11:00:00+08:00","locale":"en","ogImage":"/blog/assets/img-blockly/Demo.png","categories":["Unity"],"readTime":6,"excerpt":"\u003cp\u003eFor Chinese:...\u003c/p\u003e"},{"slug":"2021-6-11-ublockly-model","title":"The Blockly Model of uBlockly - Reimplementation of Google Blockly in Unity","date":"2021-06-11T20:00:00+08:00","locale":"en","ogImage":"/blog/assets/img-blockly/Demo.png","categories":["Unity"],"readTime":4,"excerpt":"\u003cp\u003eFor Chinese:...\u003c/p\u003e"},{"slug":"2021-6-10-ublockly-introduction","title":"Introduction of uBlockly - Reimplementation of Google Blockly in Unity","date":"2021-06-10T20:00:00+08:00","locale":"en","ogImage":"/blog/assets/img-blockly/Demo.png","categories":["Unity"],"readTime":1,"excerpt":"\u003cp\u003eFor Chinese:...\u003c/p\u003e"},{"slug":"2021-6-5-build-my-website-image-opti","title":"How To Build My Own Website (4) - Image Optimization","date":"2021-06-05T20:00:00+08:00","locale":"en","categories":["Front-End"],"excerpt":"This article illustrates how I applied image optimization to improve the performance of my website.","readTime":2},{"slug":"2021-3-14-build-my-website-style","title":"How To Build My Own Website (3) - Style","date":"2021-03-14T20:00:00+08:00","locale":"en","categories":["Front-End"],"excerpt":"This article illustrates how I style my own website using Tailwindcss framework, make theme color configurable, and apply interactive animations.","readTime":2},{"slug":"2021-3-12-build-my-website-markdown","title":"How To Build My Own Website (2) - Markdown","date":"2021-03-12T20:00:00+08:00","locale":"en","categories":["Front-End"],"readTime":3,"excerpt":"\u003cp\u003eParsing and displaying Markdown files are one of the most important things in building a personal website, because all my blogs are written in Markdown. This article illustrates several things that I did in processing Markdown files....\u003c/p\u003e"}],"pageCount":5},"__N_SSG":true},"page":"/blog/[[...page]]","query":{},"buildId":"BQdT_L77IizK-uZJFtSPk","nextExport":false,"isFallback":false,"gsp":true}</script><script nomodule="" src="/_next/static/chunks/polyfills-ef3d50462330da67074a.js"></script><script src="/_next/static/chunks/main-e903dbcb0f26f07bddca.js" async=""></script><script src="/_next/static/chunks/webpack-245f049e565ebf942e09.js" async=""></script><script src="/_next/static/chunks/framework.29f9e2f3d4a33bafbaa5.js" async=""></script><script src="/_next/static/chunks/commons.449049b2eba38352d9f4.js" async=""></script><script src="/_next/static/chunks/pages/_app-8c930b98cabfdb7a913b.js" async=""></script><script src="/_next/static/chunks/cb1608f2.16ad8215560a85b40620.js" async=""></script><script src="/_next/static/chunks/a9a7754c.dec6fcf45fa1bcf7c2c8.js" async=""></script><script src="/_next/static/chunks/eda77bfa782fcce19c31e9417d5ccf0cdb548971.d0a029473df3535a2906.js" async=""></script><script src="/_next/static/chunks/8410e8da63518be12bbb03b338cbeeeaa2b87d98.22e74b4b4510f82d44b7.js" async=""></script><script src="/_next/static/chunks/pages/blog/%5B%5B...page%5D%5D-6b7e264f18557bf1bf02.js" async=""></script><script src="/_next/static/BQdT_L77IizK-uZJFtSPk/_buildManifest.js" async=""></script><script src="/_next/static/BQdT_L77IizK-uZJFtSPk/_ssgManifest.js" async=""></script></body></html>