[Web] Using Code Block in Blogger

I have done some researching on how to use code blocks in blogger and I found this awesome tutorial article in Chinese.

I tried the steps they provide, and it work perfectly.

So I'm just gonna make the steps more clear with some screen shots!

What you should do

• Go to Prismjs.com and download both js and css files of the theme you like
• Paste the content of the css file to: Theme->Customise->Advanced->Add Css->Add custom CSS

• Wrap the content of prism.js with <script></script>

• Paste it to Layout->Sidebar->Add a Gadget->HTML/Javascript

How to use

when you write the article, go to html mode and paste the following dom.
<pre><code class="language-javascript">

...

Your code here

...

</code></pre>
it will looks like this:

...
Your code here
...

and with some code content:

let helloString='Hello World!';
console.log(helloString);
console.log('Yoda!');

There you go!
Enjoy!

[Web] Building up Github pages

Before we started...

This content was posted originally in my old GitHub pages blog site, but I've abandoned that site, so I post here again in English.

I have to say, this post has saved me once when I tried to made another GitHub pages site for my friend, so I hope you find it useful too.

Who's this article for?

• who...wants to have a blog in GitHub 
• who is not familiar with command line, neither wants to use it
• Windows users
• who's never heard of Jekyll、Bash、gem

What happened to me?

I got a laptop and a PC, both are Windows. After I saw some posts about building website with GitHub, I was so excited about it and tried to do it on my own.

First on the GitHub Pages tutorial, they suggested using Jekyll; so without a doubt, I went to Jekyll to see what's on there. But with more tutorial steps, there showed up more stuff I'm not familiar with like Ruby or Ubuntu; and with some tools I tried to install, I encountered a few compatibility problems.

Isn't this supposed to be simple and quick? How does this become so complicated and difficult? And I tried to understand what these posts for and why they suggested installing all those tools. Turns out, it's all but for one purpose only:

• Preview the site on locals

For me, the time and patience I have invested in were way pass what it can bring to me, so I gave up researching and trying.

So if you're just like me, who wants a simple site and cares not about "previewing" it on your local computer, you're in the right place. We can have a simple but still awesome site without diving too deeply!

How to have GitHub Pages

Steps:

1. Register on GitHub
2. Choose template from Jekyll(without installing anything)
3. Do some trivial settings

That's it!
I will assume that you already have an account on GitHub, so let's start from step 2!

Choose a template

Go to Jekyll template sites, and choose a one you like, then "fork" it to your GitHub.
If it's a zip file, just unzip it and upload it to your branch.

If you're not sure how to do it, see as following:

• Choose a template, then go to its GitHub page( click on Homepage)

• Click "Fork" to have a branch in your own GitHub

• You will see a newly-built project( or we call it repository on GitHub). As mine here is named Alomahuang/hanuman, the name before slash is your GitHub name, and the name after it is the name of the repo of template you just forked.

Basically it's done already!

If you're downloading the zip. Just create a new repository, and I highly suggest you name it like Blog or BlogSite, it's related to your blog url.

Settings

Here we will change settings in your repo, and adjust the config file of your repo too.

Setting changing

The name you choose will affect what your url looks like, so be aware.

• Click on setting in the repo you just created.

• Change the name to what you want( originally mine was named Type-on-Strap, and I changed it to Blog)

Change default branch

Usually there are two mainly-used branches: master and gh-pages. Since we( or I) decide not to preview anything on our(or my) local computer, it doesn't really matter which branch you choose as default branch. But I still make gh-pages as my default.

Two places needed to be done：

• One is Settings->Branches

• The other is Settings->Options（scroll to the bottom）

Adjust config

The final and the most step of all is to adjust your config.yml file. Don't mess with it!

• Under the right branch of your repo(the branch you choose to be default), click _config_yml file.

• Click on "edit" (top right)

Content needs to be changed:

• replace the content of baseurl to your repo's name. In my case it's Blog, and remember you might need to put slash before.

baseurl: "/Blog"

• replace the content of url to your GitHub（usually it's https://your_account.github.io)

url: "https://alomahuang.github.io"

These two are the most important, others just for some cutomazation.

• Don't forget to commit!

Voila!
Remember go to Settings->Options to check your full url!

[Profolio] Winning List

Things you should know...

This page lists all the items that a user has won.

Users can access the page within buttons on Line Official Account channel.
The page is based on a service of Line called LIFF, which is basically an internal browser of Line.

Users in this page are able to see items they have earned with interactive activities.

Items are shown in the list if it's outdated, redeemed, or still active.
I have designed the UI initially and put it in practice, also the back-end behind the page.

Sneak peek

Customer Practice

This is still used by some of my client with some adjustments.

(But currently I have not won anything...)

[Profolio] Interactive Image Panel

Things you should know...

These components are based on Angular 6.
After inserting a photo, users can insert some new blocks, which allow them to resize and move freely.
While the block is moved or changed size, the width, height, and positions have to be shown in corresponding areas.
While any block is clicked, the block should be high-lightened and showed its information, which are free to change manually also.

Sneak peek

The UI however wasn't designed by me, I am responsible for all the front-end functions and make it work!