Category: Front-End

Image Compression Tools For Web Developers

Introduction of different tools to optimize your image size.

Sep 25, 2023 Front-End About 2 min read

Use Gyro Data to Make Your React App More Interactive

JavaScript Gyro

Learn JavaScript device orientation API (with react) which might give you some inspirations about building an interactive App.

Jun 25, 2023 Front-End About 15 min read

Getting Started With WebAssembly

JavaScript WebAssembly Web Worker

My experience in getting started with WebAssembly, demos included.

Jun 19, 2023 Front-End About 14 min read

Create a Color Picker With JavaScript

HTML JavaScript Tool Canvas Color Mapping

Steps to build a color picker tells you the color of your pointer position in an image.

Apr 15, 2023 Front-End About 14 min read

5 Ways to Preload Images in Web Applications

HTML JavaScript Preload

Learn how to optimize your web app UX by preloading images in advance.

Dec 17, 2022 Front-End About 5 min read

Promise.allSettled()、Promise.any() polyfill

JavaScript Promise

In case you can not use Promise.allSettled() and Promise.any()

Nov 29, 2020 Front-End About 4 min read

Lynan

Live Young n Act Now.

47 Posts / 5 Categories / 26 Tags / 2 Series

About This Site What's New

.hdr-info-wrap { display: none; } #back-to-top { transform: translateY(0); pointer-events: all; opacity: 1; } .lazyload-wrap { display: none; } .post-cover-img-wrap .cover-img { opacity: 1 !important; } #gitalk-container { display: none; } .hdr-switch { display: none; } #toc-toggle { display: none; } .button.rss { margin-right: 0 !important; } .copy-btn { display: none; } #page-donates { display: none; } #post-age-warning { display: none; } #toc .toc-item-wrap:not(.active) { opacity: unset; transition: unset; } #toc:hover .toc-item-wrap:not(.active) { opacity: unset; } #toc .toc-item-wrap.active .toc-item-link { font-weight: normal; color: #333; } #toc .toc-item-wrap.active .toc-item-link::before { display: none; } #toc .toc-item-wrap.active .toc-item-link:not(.active) { opacity: unset; } #toc .toc-item-wrap.active .toc-sub-item-link:not(.active) { opacity: unset; } #post .post-meta #content-switch { display: none; } #post figure.highlight.folded, #raw-markdown-block figure.highlight.folded { max-height: unset; overflow-y: auto; } #post figure.highlight.folded .fold-toggle, #raw-markdown-block figure.highlight.folded .fold-toggle { display: none; }