python太難今天來寫前端！今天主要是想將自己的藝術作品圖像。添加進入別人提供的jquery插件。
成品如下：https://codepen.io/FudoYusei/pen/QWKqqzm
除此之外在codepen網站上也可以做簡單的設計與測試。看看自己所寫的代碼是不是符合自己想呈現的感覺
jquery 為我們帶來很多很方便的UI介面。只要能熟悉使用對整個網頁都會有個不錯的呈現。
這次的插件是這個 jquery 的 busy-load遮罩：https://piccard21.github.io/busy-load/
note:
主要由Jquery與css跟插件完成的屏障，其功能為網頁在loading時讓操作者不去做其他操作以免請求太多對server造成負擔。
由官方文檔可以得知，他提供動態gif在遮罩上做呈現。
這樣就可以將自己的美術作品結合代碼。在別人的jquery插件上做出呈現。jquery的插件種類也非常多通常照著官方提供的文檔做使用都可以有不錯的視覺效果。然而要更客製化的效果可能就需要改動插件的源碼了。那會變得非常困難。所以按照官方的文檔做使用就非常足夠了。
既然目標知道了，就開始著手開發。
首先就是jquery環境建置。現在很多方便的插件都需要jquery就算不使用jquery使用JavaScript原生的代碼也是比較困難的JavaScript原生的代碼我覺得是比較晦澀的。所以不管在任何環境下都要能導入jquery。確保開法效率。因為我們不可能花太多時間配置環境研究框架。我們在意的就只有視覺的呈現。
在這我提供一個解決方案適用於小型開發、測試。就是用第三方提供的cdn用html標籤的方式引入jquery
網站如下：https://cdnjs.com/libraries/jquery
可以說是非常的方便只要在html檔中使用他們提供的html標籤。就可以直接匯入不用在意框架路徑規則。或者一些其他環境變量的問題。
像是我寫的遮罩：
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" crossorigin="anonymous"></script>這就是導入jquery的 html標籤
除此之外他還提供vue, react等前端開發框架，可說是非常好用。
就承上所說的路徑，環境變量一直都是個問題。有時候設置了半天東西就是出不來，排查又要花很多時間。看上面的官方文檔就知道了！其中一張圖還掛了！作為藝術家沒時間關注那麼多。所以我在這提供不用考慮路徑、框架問題的呈現方式。
就是把作品圖像轉換成base64格式。只要插件支援base64。這方法大多都可以成功。
圖像轉換base64網站：https://www.base64-image.de/
img.src = "base64code..."將轉換出來的字串按照文檔寫入相對應的位子就成功了！
今天提供的codepen網站在主頁還可以看到其他人的作品。我使用的圖像特效也是別人撰寫出來的。我只是把它們拼揍在一起。期望我有一天也能有自己的創作。
同學很棒喔!期待你未來的創作~~😊