文章列表 頁1

教學

[PHP] 使用 regular expression 判斷是否有包含某個字串

如果要使用 php 判斷字串裡面是否包含特定內容,可以使用 php 的 regular expression- preg_match 來判斷。

教學

[Vue.js] 簡單計時器

簡單說明使用 vue.js 搭配 setInterval 來製作一個計時器的方法。

教學

把樣式帶入 svg 的 use 內

前面提到我們可以使用 symbol 來重複利用 svg 的圖形,這裡再來說明怎麼對同樣的 symbol 套上不同的顏色。

教學

[Three.js] 概述與第一個範例

利用官方第一個範例來認識一下 Three.js。

教學

[Three.js] 基本元素介紹

在 Three.js 的基本元素有場景(Scene)、相機(Camera)、物體(Objects)、光源(Light)和渲染器(Renderer),我們將透過這些元素來建立場景。

教學

使用 Three.js 讓你的網頁有 3D 互動效果- 前言

網頁的發展到現在,偶爾能夠看到可以 3D 互動的頁面,而在操作 3D 的時候許多是利用到 WebGL 的 javascript API,但由於原生的 WebGL API 不是很好撰寫,後來就發展出了 Three.js 的 javascript 函式庫,它提供了比 WebGL 更簡單的 Javascript API,讓開發者能夠輕易在瀏覽器做 3D 繪圖。

教學

svg 的 patterns- 利用自定義圖樣填滿區塊

在 SVG 的 fill 裡有一個很特別的填色方式叫做 pattern,這邊指的是我們可以定義(defs)好一個圖樣(pattern),之後再用 fill 的方式去指定用那個圖案去填滿。

好網站

W3Techs- 一些網路相關技術統計資料的網站

想知道目前各個技術的市佔率以及發展趨勢嗎? W3Techs 是一個統計這些技術的網站,進去之後的首頁會有一些摘要說目前的網頁技術狀態,而如果想要看各個分類的話,也可以依據分類的項目去看單項。

好網站

網站開發者學習路線圖(技能樹)

網路上有人做的網頁開發者學習路線(技能樹)的圖,包含前端、後端跟 DevOps,給有志在這塊的朋友努力的方向。

教學

線段上的圖形- SVG 的 marker

svg 的 marker 讓你可以在一條線的起點、終點跟轉折點設置圖形,要來做互動圖表或是比較有彈性的圖,比如趨勢圖之類的還滿方便的,用法是先在 defs 裡用 marker 定義形狀,記得設定 id 就可以使用。

教學

SVG 定義 symbol 並重複利用圖形與 SVG Sprite

以往要製作小圖示會使用到 css sprite 的技巧,後來因為 rwd 及需要在視網膜解析度也能漂亮呈現 icon,就有用 icon font 取代 css sprite 的技術,但由於 icon font 一次需載入整包字型檔加上文字可能會有鋸齒,於是就又有些人會使用 svg sprite 的方式來製作,製作的方法是利用 svg symbol 的特性,先定義一些圖示後再把這些圖示用到想呈現的地方即可。

教學

[jQuery] 取得滑鼠位置、元素位置與區塊內的相對位置

在 jQuery 裡可以使用 e.pageX, e.pageY 和 offset() 來取得頁面上的絕對位置與相對位置。

教學

[Vue.js] 自訂動畫效果- Animation

延續 transition,在 vue 裡要做 transition 的效果可以使用之前提的 name="xxx" 修改動畫 class 前綴的字,也可以使用以下屬性直接設定動畫進入或離開時的 class name,比如使用一些預設的 css 動畫函式庫就會很有用像是 animate.css。

教學

[Vue.js] 的漸變(transition)效果

在 Vue.js 裡面,提供已經封裝好的 transition 元件來幫我們做到 css 的 transition 的效果,transition 可以和 v-if 或 v-show 及動態元件的增減搭配組合,我們可以在其中設定進入(Enter)和離開(Leave)的效果。

教學

[Vue.js] 在 Vue 裡監聽事件- addEventListener 與移除監聽事件 removeEventListener

簡述在 Vue 裡監聽事件- addEventListener 與移除監聽事件 removeEventListener 的寫法。

教學

CSS 的背景濾鏡- backdrop-filter

CSS 可以使用一個叫 backdrop-filter 的屬性,用來設定只影響背景的濾鏡。

教學

[Vue.js] 操作或取得 DOM 的資訊- ref ($refs)用法

在 Vue.js 裡,如果我們想要去取得某個 Dom 的資訊,可以使用 ref 這個 Attr,比如我們要取得某個區塊的寬跟高,可以在那個區塊上設定 ref="var" 這樣,接下來我們就可以透過 this.$refs.var 去取得資訊了。

教學

用 javascript 把 video 變成圖片

如果要把頁面給印出來,可能會遇到 video 沒辦法看的情況,這邊我使用 js 先把 video 轉成圖片後,應該就可以避免這個情況。