DEV Community: Warat Wongmaneekit

อวสาน Library Lazy Load เพราะมันกำลังจะกลายเป็น Native

Warat Wongmaneekit — Mon, 27 Jul 2020 03:20:22 +0000

ที่ผ่านมา สาย Optimize หรือ คนทำเว็บที่มีรูปเยอะๆ ก็มักที่จะใช้เทคนิค Lazy load กันทั้งนั้น ซึ่งต่างคนต่างก็จะมี Lib ที่ตัวเองถนัดต่างกันออกไป ตัวที่น่าจะฮิตที่สุดก็คงไม่พ้น ตัวนี้

verlok / vanilla-lazyload

LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.

LazyLoad is a lightweight (2.4 kB) and flexible script that speeds up your web application by deferring the loading of your below-the-fold images, animated SVGs, videos and iframes to when they will enter the viewport. It's written in plain "vanilla" JavaScript, it leverages the IntersectionObserver API, it supports responsive images, it optimizes your website for slower connections, and can enable native lazy loading. See all features for more.

➡️ Jump to: 👨‍💻 Getting started - HTML - 👩‍💻 Getting started - Script - 🥧 Recipes - 📺 Demos - 😋 Tips & tricks - 🔌 API - 😯 All features compared

Love this project? 😍 Buy me a coffee!

👨‍💻 Getting started - HTML

In order to make your content be loaded by LazyLoad, you must use some data- attributes instead of the actual attributes. Examples below.

Lazy image:

<img alt="A lazy image" class

…

View on GitHub

ซึงทุกคนก็คงรู้ว่า การใส่ Lib JS เข้าไป ถึงแม้จะทำให้ รูปโหลดเร็วขึ้น แต่เราก็ต้องแลกกับการมี Lib หนึ่งตัว ติดอยู่ใน Code ของเรา แต่เรื่องนี้มันกำลังจะจบลงในอีกไม่นานนี้ครับ เพราะว่า lazyload ที่เป็น native กำลังจะ Support ทุก Browser แล้ว!!!!!!

ตอนนี้ก็เหลือแค่ Safari เอา Feature นี้ออกจาก Experimental เท่านี้ เราก็จะใช้ LazyLoad ได้โดยไม่ต้องใช้ Lib อะไรแล้ว ส่วนใครที่สงสัยว่ามันใช้ยังไง วิธีก็ง่ายมากๆครับ เพียงแค่ เขียน Attribute loading=”lazy” ไว้ใน tag image หรือ Iframe ก็สามารถใช้งาน lazyload ได้เลย

<img src="https://example.org/image.jpg" width=”300” height=”200” loading=”lazy”>
<iframe src="https://example.org/" width=”300” height=”200” loading=”lazy”>

มีอยู่นิดเดียวที่ต้องรู้ก็คือ Image ที่จะใส่ Lazy load ต้องกำหนด ขนาดให้มันนะครับ ไม่อย่างนั้น Lazyload จะไม่ทำงานครับ

แล้วพอ feature นี้มันกลายเป็น Native เวลาที่ Browser Optimize อะไรก็จะส่งผลให้ Feature นี้ ทำงานได้ดีขึ้นไปอีกโดยที่เราไม่จำเป็นต้องไปปรับแต่งอะไรอย่างเช่น Chrome ที่มี Feature นี้มานานมากๆแล้ว ก็ได้ Optimize Feature นี้ไปบางส่วนแล้วเหมือนกัน
// Detect dark theme var iframe = document.getElementById('tweet-1284020009350701057-808'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1284020009350701057&theme=dark" }

ก็เอาว่าใครยังไม่เคยลองใช้ก็ไปใช้ดูครับ ของดีๆที่ใช้ง่ายๆ

Oversize Images Finder Tool

Warat Wongmaneekit — Mon, 11 May 2020 06:07:47 +0000

Large image is always hurt my optimization job some time loading behavior is hidden those image from PageS peed Insight Please checkout this tools and use it for finding the Oversize Images on your website

Installation has done by standard npm install

npm i -g oversize-images-finder

After you install just run command following and define your target API

oversize-images-finder --url [url]

The tool will display the result of inspection

Now you can see which images are oversize and should resize original image

How to display 3d as AR on Android and iOS without

Warat Wongmaneekit — Sun, 26 May 2019 05:50:12 +0000

After Google launch 3d and AR on Google Search in Google I/O 19 I'm so curious, "How Google do this." I have desired to talk with Googler in Google I/O event, and the answer is "we use model-viwer." It does not surprise me (for the name) because I had to try this Web component before, but in the past version, you have to install a particular version of Chrome for using the (buggy) AR feature, but they told me with the new version of ARcore you don't need the particular version of Chrome anymore. I'm back home and try to play around with and attempt to reverse engineer this Component and this is a result

Talking about first

<model-viewer> is a Web component to help web developer display the 3D model on the web easier. With the few lines of code as below, you will get a nice look of the 3D model viewer on the web.

<!-- Import the component -->
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.js"></script>
<script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
<!-- Use it like any other HTML element -->
<model-viewer src="examples/assets/Astronaut.glb" alt="A 3D model of an astronaut" auto-rotate camera-controls background-color="#455A64"></model-viewer>

and with the few attribute such as magic-leap unstable-webxr ar you will get the AR viewer for your model like this

How model-viewer can do this...

Android

I try to inspect the AR button with Chrome Devtools, but I can't see anything because they are not put link on HTML tag. I desire to go back to the code and find the id of AR button So... I got this.

    modelUrl.protocol = 'intent://';

    const intent = `${modelUrl.toString()}?link=${link}&title=${
        title}#Intent;scheme=${
        scheme};package=com.google.ar.core;action=android.intent.action.VIEW;S.browser_fallback_url=${
        encodeURIComponent(locationUrl.toString())};end;`;

In src/features/ar.ts they try to handle AR feature if XR API in Chrome is not enabled yet. I still have no idea how this link looks like. Try to put console.log in build code, and this is the result of that intent link.

intent://517d3b3f.ap.ngrok.io/examples/assets/Astronaut.glb?link=https://517d3b3f.ap.ngrok.io/examples/augmented-reality.html&amp;title=A3Dmodelofanastronaut#Intent;scheme=https;package=com.google.ar.core;action=android.intent.action.VIEW;S.browser_fallback_url=https://517d3b3f.ap.ngrok.io/examples/augmented-reality.html#model-viewer-no-ar-fallback;end;

It looks like they use the Sense View feature on the new version of ARcore (1.9) . Right now we know the intent link, so this is the structure of the intent link and how this magic happens.

intent://[link of the glb file]?link=[link of the page of this model for display in Sense view]&title=[title of this model]#Intent;scheme=https;package=com.google.ar.core;action=android.intent.action.VIEW;S.browser_fallback_url=[if the viewer not support what is the fallback];end;

After try to copy this link and put in on standard HTML its work!!!! So right now if we want to display your 3D model on real space, we don't need anymore

iOS

With iOS, It's soooo easyyyy because regular iOS > (11.0) is already support 3D model viewer as an AR. We just only put .usdz File to the link and done. When a link is, click iOS will open a 3D model viewer with AR option, and you play around.

What is the future?

With this solution, It's not easy to make AR more programmatic because of it just viewer outside the Browser. We have to wait for XR API on Browser more stable and supportive then AR on Web will be better than today but during waiting play this first.

Short fire / Self-hosted shorten URL generator for Firebase hosting

Warat Wongmaneekit — Fri, 22 Feb 2019 09:08:47 +0000

After I had using shorten link service such as Google, Bit.ly. I'd always struggle with a custom domain and slug feature. Some service provides custom domain but not a custom slug also you need to pay some fee for using a custom domain. I try to discover a feature in Firebase Hosting and I found that Firebase hosting is support redirect rules but you need to manual setup. I created a tool for generating redirect rules to make Firebase hosting become shorten link service. This is Short fire. You can try Short fire by npm -g install short-fire and follow instruction. https://github.com/thangman22/short-fire