px, em and rem
In HTML/CSS, when setting font-size, we have several options to specify unit. We will inspect some standard units.
In HTML/CSS, when setting font-size, we have several options to specify unit. We will inspect some standard units.
This whining about DOM api performance, slow standard dev, HTML attributes only allow string
React fulfilled Web Components promises
This article will recap how one CSS rule override another CSS rule by example.
more...When browsing a web page, browser will fetch HTML page. It then parses sequentially line by line, and shows HTML
components to user (like title, head…). When encounters a <script> tag, browser has to request that script from
URL, and during that time, nothing will be shown to user, not until browser finished requesting that script. It
creates a blocking operation, which is bad in UX.
Recently, I used SyntaxHighter to show source code in my blog. It works fine, but I feel something not very familiar. Just like the source code shown isn’t similar to other pages, like Github. I decided to change to Google Prettify, and wait to see if it’s better. It’s quite easy to setup, just follow official guide in Github. Here is a short summary:
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>Blogger allowed to customize the appearance of our blog, by editing Blogger template - an HTML makeup code.
The structure of Blogger template is quite similar to every HTML pages with standard HTML components (head, body,
div…).
Blogs that related to IT and Software Engineering will sometime need to show source code to reader. But not just
displayed as plain text, it’s better if source code can be formatted with color, indentation, alignment…just like
be displayed in IDE.
In web front-end, it can be implemented by using Javascript and CSS. Checking around some open source libraries/utils,
I found that SyntaxHighlighter is well known one. Below is
step-by-step guide to use this library in Blogger.