Site Overlay

分類: tech

Photoshop, After Effects 匯出webp動態圖

工作的關係,稍微研究了一下關於產動態webp的方式。本來想說Photoshop已經支援webp了,應該也有匯出webp動畫的功能吧。但事與願違。看了一下以前要做gif動畫都會用的「儲存為網頁用」功能,沒有存為webp的檔案類型選項。再看一下「演算視訊」裡面也沒有webp的格式選項。 首先查到了WebPShop這個Plugin,不過他的動態做法是以每個圖層代表不同的時間,圖層上還需標示停留時間,至於原本的時間軸功能無法使用。這樣編輯起來也太麻煩。 這時候想到了ffmpeg這個轉檔好幫手,似乎可以將Photoshop或AE的內容先匯出成影片或序列圖(依照時間順序產生一堆以數字為編號的圖檔),再使用繼續閱讀Photoshop, After Effects 匯出webp動態圖

CSS 超好懂的@Layer教學

乍看layer這個字,還以為是像Photoshop的圖層概念之類的東西,亦或是針對z-index之類的selector。結果竟是用來解決selector權重用的(對於CSS權重不是很了解的話,可以快速看一下這篇筆記。)依照layer宣告的順序,來決定樣式優先順序,後宣告的即使權重較小,也會覆寫。 這對於管理較大型、有一個一定複雜程度的樣式表的網站時,算是一個蠻實用的功能。可以減少在那邊important來important去的問題。 至於@layer的瀏覽器相容性,可以看一下這邊 https://caniuse.com/css-cascade-layers,目前看起來主流瀏覽器已經都支援,現階繼續閱讀CSS 超好懂的@Layer教學

sublime 快速鍵筆記

command+d 選取編輯多個相同選取項目 使用情境:當有多個欲選取的相同字串時可使用。 使用方式:先選取一個或一段要選取的字串,然後按下command+d多次,直到所有相同字串都被選取即可。 command+shift+d 複製貼上選取字串 使用情境:需要重複一段字串時使用。 使用方式:先選取一個或一段要複製的字串,然後按下command+shift+d,直到所需的數量貼上後。 shift+command+l 選取編輯多排 使用情境:迅速選取多行時。 使用方式:先選取要編輯的行,按下shift+command+l,即可開始編輯。可搭配command移動指標到每行的最前或最後。 shift+繼續閱讀sublime 快速鍵筆記

Chrome載入CSS問題

印象中看過「css的link標籤不論放在哪(head or body)都會先載入」的這個說法,不過今天卻發現當Chrome在某些情況時,結果似乎會有點非預期。 首先我在head與body最後都各放一個link標籤,並且在onload時跳出alert 在這個case,第一次alert時瀏覽器還是空白畫面,而第二次alert時,畫面上的row, col已被正確render了。看起來link不論放在哪都會先載的這個說法是成立的。 但奇怪的事情來了。當我把head裡的link拿掉時,chrome會呈現一個不穩定的結果。

Vue2基本型別陣列的更新問題

當我們在Vue2中使用陣列時,若陣列中的內容是基本型別,也就是非物件的情況下,如果只更新陣列中的某一筆資料,會發現Vue並不知道資料已更新,導致畫面不會重繪。 在Vue2中的data區塊內所宣告的屬性,都被轉換成getter setter,因此當你重新賦值時,Vue就可以知道你更新了資料,然後就執行重繪畫面的工作。在data內所宣告的物件,如果一開始就有先宣告其屬性,屬性們也會被轉換成getter setter,但後來才加進去的屬性就無法被轉換,除非整個物件重新賦值,才有辦法轉換新的屬性。 宣告過的物件屬性可以觸發更新: 沒宣告過的不會觸發更新: this.myObj.b = 10 這樣才能讓繼續閱讀Vue2基本型別陣列的更新問題

Copyright © 2022 Bloggy. All Rights Reserved. | SimClick by Catch Themes