文章列表頁1

教學

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

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

教學

[Vue.js] 簡單計時器

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

教學

把樣式帶入 svg 的 use 內

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

教學

[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 的方式去指定用那個圖案去填滿。

好網站

Ｗ3Techs- 一些網路相關技術統計資料的網站

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

好網站

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

網路上有人做的網頁開發者學習路線(技能樹)的圖，包含前端、後端跟 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 的特性，先定義一些圖示後再把這些圖示用到想呈現的地方即可。