Skip to main content

Posts

Showing posts from 2020

[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 ...

[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...

[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!