[{"slug":"first-blog","title":"My first personal blog","tags":["open source","frontend","css","JavaScript"],"excerpt":"My first non-trivial frontend project in one month","cover":"/warrior-girl-katana-fantasy-art-uhdpaper.com-4K-8.1473.jpg","html":"\n\n\n\n

Disclaimer🔗

This project is heavily inspired by Matheus Fantinel’s blog. I learned a lot about SvelteKit and CSS by going through his source code. What’ more, I also copied two button components found on codepen, the link to which can be found in the source code.

Motivation🔗

Even before learning programming, I dreamed to have a website of my own, a place where I could enjoy my freedom of speech without heavy censorship.

CMSs like WordPress used to be my only option. Now here we are, a fully responsive blog customized with all the fancy CSS effects and DOM manipulation I have just learned in the past month. On top of blogging itself, learning by doing is my methodology, so I need a target to keep myself reading documents and practicing frontend skills alternatively.

Technology Selection🔗

Markup language🔗

The core of a blog is its posts. Vanilla HTML combined with some CSS is the most straightforward way to implement this, but at the cost of time and readability.

Markdown🔗

Markdown is well known as a handy domain specific language for documentation. However, its simplicity is a double sword. When it comes to complicated documents like a book, Markdown is kind of overstretched.

I envisioned that an ideal markup language for blog posts should have the following features:

Support for mathematical expressions. I planned to take notes of the theoretical knowledge learned from textbooks and papers, like this:
$i \\hbar \\frac{\\partial}{\\partial t}\\Psi(\\mathbf{r},t) = \\hat H \\Psi(\\mathbf{r},t)$
Progressively expressive. It should come with a few simple and useful core syntax rules like Markdown, and much more advanced features like collapsible blocks and table-of-contents(toc) left to be explored.\nAs you can see, the toc at the beginning of this post is auto-generated.
Highly customizable. It would be great if I can enliven my posts with CSS and JavaScript. In fact, I can just insert a Svelte component right here:

\n\t

\n\t\t

\n\n\n\n\n\n\n\n\n

Asciidoc🔗

At first I tried Asciidoc, which almost meets my expectations. It supports latexmath and asciimath, and provides a myriad of advanced macros. Custom stylesheet can also be imported. It’s definitely powerful enough for someone who wants to write a book or something.

Everything works fine locally until moving into the browser. Currently, the only implementation of Asciidoc—Asciidoctor is written in Ruby, and Asciidoctor.js is transpiled from the Rudy version.\nTherefore, it’s not surprising that I met with some unresolved build-time issue.\nI did find a workaround, that was to load the minified script from CDN at run time, at the cost of ~1s slow loading time.

What’s worse is that Asciidoctor.js doesn’t support latexmath by default, not without MathJax configured. I just can’t get it work. Again I found another workaround—Katex.\nAfter some debugging I discovered that Asciidoctor was just doing one simple thing:convert the input Asciidoc string to the output HTML string. The styling is decoupled from JS code and done by an external stylesheet. So does Katex. Therefore, I wrote some glue code to concatenate the string processing pipelines. Finally, I got an Asciidoc renderer with Latex support in browser!

MDsvex🔗

Now Asciidoc works, but in a hacky way. In the meantime, I read about a markdown preprocessor called MDsvex from Matt Fantinel’ s post, which turns Markdown files into ASTs(abstract syntax trees) and enables users to enhance Markdown with various plugins.

First Asciidoc renderer and then Markdown ASTs, god I wish I knew more about compilers so that I can be a master of language manipulation. Had I got enough time and knowledge, I would love to write a Rust implementation of Asciidoc and even compile it to WebAssembly.

I ended up choosing MDsvex to be one of the bedstones of my blog, by which this very post you are reading is generated.

Frontend tech stack🔗

Yew(Rust)🔗

The programming language that empowers everyone to become a systems programmer
\n
Rust

\"Unofficial — Unofficial Rust mascot: Dancing Ferris

For the record, Rust is my favorite programming language, and I proudly declare myself as a Rustacean. It’ s Java that introduced me into the world of algorithms and object-oriented programming, but it’s Rust that taught me more about low-level computer science. Rust is trying to accomplish safety, efficiency and ergonomics at the same time, which is really an eye-opener. I believe even if Rust somehow flops(unlikely) in the future, the spirit behind it will still persist.

Back to the topic, at the beginning I picked Yew, a React-like Rust frontend framework to build my website, because I’d like to write everything in Rust exclusively.

However, the frontend ecosystem in Rust is far from maturity and everything is more or less hacky. For example, WebAssembly, the compilation target of frontend Rust, can’t access any browser API without intermediary JavaScript. In addition, important features like CSS scoping and debugging with sourcemap are not supported.

I wish I had the time and energy to reinvent frontend wheels in Rust but time is always limited. I had to switch to a JavaScript framework so that my blog would get online in a month. Nevertheless, Rust and WebAssembly are worth exploring, and I may develop some WebGL project with them in the future.

Svelte and SvelteKit🔗

I have some experience with Vue, with which and D3.js I used to build a data visualization tool.

Vue is great, but I always tend to try something new. Many in the community are talking about a rising star, so I decided to give it a shot.

Technically, Svelte is not a framework but a compiler. However, constructing components with Svelte feels natural and smooth, and there is less boilerplate code. The community, documentation and REPL are fantastic. I think every frontend developer should try it out.

CSS🔗

For me, the hardest part of a blog project is not programming but styling. It took me almost a week to read articles about CSS and tweaking the layout to make my website fully responsive. The haunting horizontal scrollbar almost drove me crazy. I practiced using devtools heavily and learned the principle of mobile-first.

Conclusion🔗

So that’s it, my first non-trivial project. It’s far from perfection but my goal here has been achieved. I have to move on to learn more about computer science. I’ m not satisfied with being an ordinary library user but aspire to be able to implement anything by myself if needed. I missed the old college days studying physics and mathematics, trying to break down the basic working principles of everything.

Thanks for reading!

","css":{"code":".power-switch.svelte-1wf7xse.svelte-1wf7xse.svelte-1wf7xse{--color-invert:#ffffff;--width:75px;--height:75px;position:relative;display:flex;justify-content:center;align-items:center;width:var(--width);height:var(--height);z-index:130}.power-switch.svelte-1wf7xse .button.svelte-1wf7xse.svelte-1wf7xse{width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:relative}.power-switch.svelte-1wf7xse .button.svelte-1wf7xse.svelte-1wf7xse:after{content:\"\";width:100%;height:100%;position:absolute;background:radial-gradient(circle closest-side, var(--color-invert), transparent);filter:blur(20px);opacity:0;transition:opacity 1s ease, transform 1s ease;transform:perspective(1px) translateZ(0);backface-visibility:hidden}.power-switch.svelte-1wf7xse .button .power-on.svelte-1wf7xse.svelte-1wf7xse,.power-switch.svelte-1wf7xse .button .power-off.svelte-1wf7xse.svelte-1wf7xse{height:100%;width:100%;position:absolute;z-index:1;fill:none;stroke:var(--color-invert);stroke-width:8px;stroke-linecap:round;stroke-linejoin:round}.power-switch.svelte-1wf7xse .button .power-on .line.svelte-1wf7xse.svelte-1wf7xse,.power-switch.svelte-1wf7xse .button .power-off .line.svelte-1wf7xse.svelte-1wf7xse{opacity:0.2}.power-switch.svelte-1wf7xse .button .power-on .circle.svelte-1wf7xse.svelte-1wf7xse,.power-switch.svelte-1wf7xse .button .power-off .circle.svelte-1wf7xse.svelte-1wf7xse{opacity:0.2;transform:rotate(-58deg);transform-origin:center 40px;stroke-dasharray:220;stroke-dashoffset:40}.power-switch.svelte-1wf7xse .button .power-on.svelte-1wf7xse.svelte-1wf7xse{filter:drop-shadow(0px 0px 6px rgba(255, 255, 255, 0.8))}.power-switch.svelte-1wf7xse .button .power-on .line.svelte-1wf7xse.svelte-1wf7xse{opacity:0;transition:opacity 0.3s ease 1s}.power-switch.svelte-1wf7xse .button .power-on .circle.svelte-1wf7xse.svelte-1wf7xse{opacity:1;stroke-dashoffset:220;transition:transform 0s ease, stroke-dashoffset 1s ease 0s}.power-switch.svelte-1wf7xse input.svelte-1wf7xse.svelte-1wf7xse{position:absolute;height:100%;width:100%;z-index:2;cursor:pointer;opacity:0}.power-switch.svelte-1wf7xse input.svelte-1wf7xse:checked+.button.svelte-1wf7xse:after{opacity:0.15;transform:scale(2) perspective(1px) translateZ(0);backface-visibility:hidden;transition:opacity 0.5s ease, transform 0.5s ease}.power-switch.svelte-1wf7xse input:checked+.button .power-on.svelte-1wf7xse.svelte-1wf7xse,.power-switch.svelte-1wf7xse input:checked+.button .power-off.svelte-1wf7xse.svelte-1wf7xse{animation:svelte-1wf7xse-click-animation 0.3s ease forwards;transform:scale(1)}.power-switch.svelte-1wf7xse input:checked+.button .power-on .line.svelte-1wf7xse.svelte-1wf7xse,.power-switch.svelte-1wf7xse input:checked+.button .power-off .line.svelte-1wf7xse.svelte-1wf7xse{animation:svelte-1wf7xse-line-animation 0.8s ease-in forwards}.power-switch.svelte-1wf7xse input:checked+.button .power-on .circle.svelte-1wf7xse.svelte-1wf7xse,.power-switch.svelte-1wf7xse input:checked+.button .power-off .circle.svelte-1wf7xse.svelte-1wf7xse{transform:rotate(302deg)}.power-switch.svelte-1wf7xse input:checked+.button .power-on .line.svelte-1wf7xse.svelte-1wf7xse{opacity:1;transition:opacity 0.05s ease-in 0.55s}.power-switch.svelte-1wf7xse input:checked+.button .power-on .circle.svelte-1wf7xse.svelte-1wf7xse{transform:rotate(302deg);stroke-dashoffset:40;transition:transform 0.4s ease 0.2s, stroke-dashoffset 0.4s ease 0.2s}@keyframes svelte-1wf7xse-line-animation{0%{transform:translateY(0)}10%{transform:translateY(10px)}40%{transform:translateY(-25px)}60%{transform:translateY(-25px)}85%{transform:translateY(10px)}100%{transform:translateY(0px)}}@keyframes svelte-1wf7xse-click-animation{0%{transform:scale(1)}50%{transform:scale(0.9)}100%{transform:scale(1)}}\nfigure.svelte-zoualc{display:flex;flex-flow:column}img.svelte-zoualc{max-width:100%;max-height:50vh;margin:auto;border-radius:10px;display:block}figcaption.svelte-zoualc{font:italic smaller \"Open Sans\", \"DejaVu Sans\", sans-serif;padding:3px;text-align:center}","map":null},"head":"","mtime":"2022-03-06","birthtime":"2022-02-23","count":5,"relatedPosts":[{"slug":"future","title":"Pre","tags":["open source","politics","ccp"],"hidden":false,"excerpt":"Just wanna fucjk","cover":"https://images.pexels.com/photos/3828245/pexels-photo-3828245.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500","html":null,"css":{"code":"","map":null},"head":"","mtime":"2022-03-01","birthtime":"2022-02-25","count":5,"relatedPosts":null,"readingTime":"⏳1 min read"},{"slug":"tesdt","title":"Lorem test","tags":["open source"],"excerpt":"Just wanna fucjk","cover":"https://i.ibb.co/6gFk6f3/girl-warrior-sword-fantasy-art-uhdpaper-com-4-K-8-3196.jpgW","html":null,"css":{"code":"","map":null},"head":"","mtime":"2022-03-01","birthtime":"2022-02-18","count":5,"relatedPosts":null,"readingTime":"⏳4 min read"},{"slug":"test","title":"Lorem test","tags":["open source"],"date":["2019-12-28T00:00:00.000Z"],"hidden":false,"excerpt":"Just wanna fucjk","cover":"https://images.pexels.com/photos/1906830/pexels-photo-1906830.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500","html":null,"css":{"code":"","map":null},"head":"","mtime":"2022-03-01","birthtime":"2022-02-17","count":5,"relatedPosts":null,"readingTime":"⏳3 min read"}],"readingTime":"⏳8 min read"},{"slug":"future","title":"Pre","tags":["open source","politics","ccp"],"hidden":false,"excerpt":"Just wanna fucjk","cover":"https://images.pexels.com/photos/3828245/pexels-photo-3828245.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500","html":"\n\n

Freedom and dignity🔗

被圈养在围墙内的人，以为墙内就是整个世界

","css":{"code":"","map":null},"head":"","mtime":"2022-03-01","birthtime":"2022-02-25","count":5,"relatedPosts":[{"slug":"tesdt","title":"Lorem test","tags":["open source"],"excerpt":"Just wanna fucjk","cover":"https://i.ibb.co/6gFk6f3/girl-warrior-sword-fantasy-art-uhdpaper-com-4-K-8-3196.jpgW","html":null,"css":{"code":"","map":null},"head":"","mtime":"2022-03-01","birthtime":"2022-02-18","count":5,"relatedPosts":null,"readingTime":"⏳4 min read"},{"slug":"test","title":"Lorem test","tags":["open source"],"date":["2019-12-28T00:00:00.000Z"],"hidden":false,"excerpt":"Just wanna fucjk","cover":"https://images.pexels.com/photos/1906830/pexels-photo-1906830.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500","html":null,"css":{"code":"","map":null},"head":"","mtime":"2022-03-01","birthtime":"2022-02-17","count":5,"relatedPosts":null,"readingTime":"⏳3 min read"},{"slug":"test2","title":"Lorem test","tags":["open source"],"hidden":false,"excerpt":"Just wanna fucjk","cover":"https://images.pexels.com/photos/3828245/pexels-photo-3828245.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500","html":null,"css":{"code":"","map":null},"head":"","mtime":"2022-03-01","birthtime":"2022-02-22","count":5,"relatedPosts":null,"readingTime":"⏳3 min read"}],"readingTime":"⏳1 min read"},{"slug":"tesdt","title":"Lorem test","tags":["open source"],"excerpt":"Just wanna fucjk","cover":"https://i.ibb.co/6gFk6f3/girl-warrior-sword-fantasy-art-uhdpaper-com-4-K-8-3196.jpgW","html":"\n\n\n\n

Lorem you🔗

$\"Lorem\"$

$\"dsf\"$

kDgHjKOHwjfJDC
\n
- hjkgkjk
- jkghjk
- kllj
  - dfgdfg
    - dfs
jkhbgkj
jkh
\n
~~The world is flat.~~\n:joy:

I need to highlight these ==very important words==.

\n\n\n\n\n\n

Syntax	Description
Header	Title
Paragraph	Text

Write the press release
Update the website
Contact the media

:shipit:

[^1]: This is the footnote.

Dorothy followed her through many of the beautiful rooms in her castle.
\n
The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.
\n
fsd

Lorem🔗

😀\nLorem sdf

撒旦发射点\n胜多负少
\n
sdfs

i \\hbar \\frac{\\partial}{\\partial t}\\Psi(\\mathbf{r},t) = \\hat H \\Psi(\\mathbf{r},t)

jkh
kDgHjKOHwjfJDCyRGELzVxiP
1. igkjghjkg
2. ;lklhlhlhl;

$f(x) = x^2$ sdfsdfsd

sdfgdfg

f(x) = x^2

fn main() {\n    // Statements here are executed when the compiled binary is called\n\n    // Print text to the console\n    println!(\"Hello World!\");\n}

God🔗

fn drink(beverage: &str) {\n    // You shouldn't drink too much sugary beverages.\n    if beverage == \"lemonade\" { panic!(\"AAAaaaaa!!!!\"); }\n\n    println!(\"Some refreshing {} is all I need.\", beverage);\n}\n\nfn main() {\n    drink(\"water\");\n    drink(\"lemonade\");\n}\n

Hell🔗

/** @type {import('@sveltejs/kit').Config} */\n\nimport adapter from '@sveltejs/adapter-netlify';\n\nimport { mdsvex } from 'mdsvex';\n\nimport preprocess from 'svelte-preprocess';\n\nimport toc from '@jsdevtools/rehype-toc';\n\nimport rehypeSlug from 'rehype-slug';\n\n \n\nconst config = {\n\n  extensions: ['.svelte', '.md', '.svelte.md'],\n\n  preprocess: [\n\n    mdsvex({ extensions: ['.svelte.md', '.md', '.svx'], rehypePlugins: [rehypeSlug, toc] }),\n\n    preprocess({\n\n      scss: {\n\n        prependData: "@import 'src/lib/styles/variables.scss';",\n\n      },\n\n    }),\n\n  ],

","css":{"code":"","map":null},"head":"","mtime":"2022-03-01","birthtime":"2022-02-18","count":5,"relatedPosts":[{"slug":"future","title":"Pre","tags":["open source","politics","ccp"],"hidden":false,"excerpt":"Just wanna fucjk","cover":"https://images.pexels.com/photos/3828245/pexels-photo-3828245.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500","html":null,"css":{"code":"","map":null},"head":"","mtime":"2022-03-01","birthtime":"2022-02-25","count":5,"relatedPosts":null,"readingTime":"⏳1 min read"},{"slug":"test","title":"Lorem test","tags":["open source"],"date":["2019-12-28T00:00:00.000Z"],"hidden":false,"excerpt":"Just wanna fucjk","cover":"https://images.pexels.com/photos/1906830/pexels-photo-1906830.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500","html":null,"css":{"code":"","map":null},"head":"","mtime":"2022-03-01","birthtime":"2022-02-17","count":5,"relatedPosts":null,"readingTime":"⏳3 min read"},{"slug":"test2","title":"Lorem test","tags":["open source"],"hidden":false,"excerpt":"Just wanna fucjk","cover":"https://images.pexels.com/photos/3828245/pexels-photo-3828245.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500","html":null,"css":{"code":"","map":null},"head":"","mtime":"2022-03-01","birthtime":"2022-02-22","count":5,"relatedPosts":null,"readingTime":"⏳3 min read"}],"readingTime":"⏳4 min read"},{"slug":"test","title":"Lorem test","tags":["open source"],"date":["2019-12-28T00:00:00.000Z"],"hidden":false,"excerpt":"Just wanna fucjk","cover":"https://images.pexels.com/photos/1906830/pexels-photo-1906830.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500","html":"\n\n

This text is really important.

Dorothy followed her through many of the beautiful rooms in her castle.
\n
The Witch bade her clean the pots and kettles and sweep the floor and keep the fire fed with wood.

Lorem🔗

Lorem sdf

i \\hbar \\frac{\\partial}{\\partial t}\\Psi(\\mathbf{r},t) = \\hat H \\Psi(\\mathbf{r},t)

$f(x) = x^2$ sdfsdfsd

sdfgdfg

f(x) = x^2

fn main() {\n    // Statements here are executed when the compiled binary is called\n\n    // Print text to the console\n    println!(\"Hello World!\");\n}

God🔗

fn drink(beverage: &str) {\n    // You shouldn't drink too much sugary beverages.\n    if beverage == \"lemonade\" { panic!(\"AAAaaaaa!!!!\"); }\n\n    println!(\"Some refreshing {} is all I need.\", beverage);\n}\n\nfn main() {\n    drink(\"water\");\n    drink(\"lemonade\");\n}\n

Hell🔗

/** @type {import('@sveltejs/kit').Config} */\n\nimport adapter from '@sveltejs/adapter-netlify';\n\nimport { mdsvex } from 'mdsvex';\n\nimport preprocess from 'svelte-preprocess';\n\nimport toc from '@jsdevtools/rehype-toc';\n\nimport rehypeSlug from 'rehype-slug';\n\n \n\nconst config = {\n\n  extensions: ['.svelte', '.md', '.svelte.md'],\n\n  preprocess: [\n\n    mdsvex({ extensions: ['.svelte.md', '.md', '.svx'], rehypePlugins: [rehypeSlug, toc] }),\n\n    preprocess({\n\n      scss: {\n\n        prependData: "@import 'src/lib/styles/variables.scss';",\n\n      },\n\n    }),\n\n  ],

Lorem

","css":{"code":"","map":null},"head":"","mtime":"2022-03-01","birthtime":"2022-02-17","count":5,"relatedPosts":[{"slug":"future","title":"Pre","tags":["open source","politics","ccp"],"hidden":false,"excerpt":"Just wanna fucjk","cover":"https://images.pexels.com/photos/3828245/pexels-photo-3828245.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500","html":null,"css":{"code":"","map":null},"head":"","mtime":"2022-03-01","birthtime":"2022-02-25","count":5,"relatedPosts":null,"readingTime":"⏳1 min read"},{"slug":"tesdt","title":"Lorem test","tags":["open source"],"excerpt":"Just wanna fucjk","cover":"https://i.ibb.co/6gFk6f3/girl-warrior-sword-fantasy-art-uhdpaper-com-4-K-8-3196.jpgW","html":null,"css":{"code":"","map":null},"head":"","mtime":"2022-03-01","birthtime":"2022-02-18","count":5,"relatedPosts":null,"readingTime":"⏳4 min read"},{"slug":"test2","title":"Lorem test","tags":["open source"],"hidden":false,"excerpt":"Just wanna fucjk","cover":"https://images.pexels.com/photos/3828245/pexels-photo-3828245.jpeg?auto=compress&cs=tinysrgb&dpr=2&w=500","html":null,"css":{"code":"","map":null},"head":"","mtime":"2022-03-01","birthtime":"2022-02-22","count":5,"relatedPosts":null,"readingTime":"⏳3 min read"}],"readingTime":"⏳3 min read"}]

Big Brother

is watching you!