經過昨天的內容，讀者們應該對於網頁的渲染流程有大致的理解了。 我們再小小複習一下，大致上網頁的渲染流程為： 讀取 HTML 後生成 DOM Tree 讀取...
前幾天畫完流程圖今天來介紹 從資料庫的設計(我們其實是很後期要整理專案時才回來畫 不是照著步驟設計) 我們資料庫是根據討論功能過程中共同發想的，就其實有發現當前...
Q1. SQL 注入 是什麼? SQL 注入攻擊也稱為 SQL injection，網頁有許多功能都需要資料庫，例如會員登入、購物車等，都需要工程師在網頁前...
淺談原始碼 D3包裝了Javascript的fetchAPI來擷取資料我們這裡可以看到D3Js的原始碼為以下片段，不難看出它是return了fetchAPI f...
Conclusion 呼～到今天為止 9 天過去了，Libraries 之間的比較篇章也到今天告一個段落。 今天就來對這個章節做個小小總結。（言下之意就是準...
這一篇是這一系列 Libraries 比較文實質性的最後一篇了，在下一篇稍做總結以後接著我們就要正式進入到 source-code 解析的篇章了！ 這篇我們主...
昨天我們畫完了 業務流程圖 今天要來介紹 頁面流程圖 要介紹這個之前可能要先講一下wireframe就是你網站的草稿架構可以把你大致想要的版型畫出來然後再配上之...
Q1. 網頁有哪些基本訊息? 網頁中時常夾帶版本相關資訊，例如網站開發時所使用的框架、Library，亦或是架設網站所用的伺服器版本。這些資訊可能利於我們理解網...
格式介紹 通常你的資料會是檔案、API接口或是一個連結作為D3輸入的資料，這邊就以下常見的資料格式簡單介紹一下 CSV逗號分隔值(Comma-Separated...
接下來的 Draft 與 Slate 就是提供建立編輯器環境為主的 Framework Library 了，如果對這個名詞不太熟悉的話可以回頭去看 Day5...
經過昨天的一番折騰，我想讀者們都對基本的圖片優化稍有概念了，今天要介紹的優化技巧其實嚴格來說也算是圖片的優化範疇，但是跟優化圖片本身的大小無關，因此我選擇獨立...
昨天我們決定完功能了今天來講講在正式開寫code前 可以做的事情相信可以讓你之後寫起來更流暢雖然我們當初沒有寫 那時候還不知道這個的好處決定完功能就開始霹哩啪拉...
Q1. 常規文件是什麼? 網頁專案中，有許多工程師慣用的文件命名方式，這些文件可能暗藏網頁的相關資訊，甚至洩漏原始碼，於是我們可以使用目錄字典來搜尋，找到這些隱...
這次相比長條圖使用多一點的資料，陣列如下並且一樣先宣告svg變數繪製一個寬800高450的畫布 const ary = [130,45,239,20,30,24...
Quill 是整個第二世代編輯器的開山始祖，也是第一個嘗試脫離瀏覽器掌控的叛逆份子，目前在 Github 的 star 數量已經超過 30k 了。 附上 Qu...
給你五秒鐘思考一下，你在日常生活中還有在使用沒有任何圖片，包括小小 的 Icon 也沒有的網站嗎？我想大多數人的答案都是否定的。現今的網頁應用免不了會需要載入...
今天來介紹我們是如何從自己需要和使用者的角度來定義功能 前面有說到我們想做一個一起做sideproject的產品 然後再來就是腦力激盪時間 整理過後大致如下面幾...
Q1. vim 是什麼? 簡單來說， vim 是一種純文字編輯器，是從 vi 發展出的增強版，而 vi 是從 ex 發展出的視覺化文字編輯器， ex 又是從...
用D3繪製長條圖 我們現在可以嘗試著用已經學到的SVG來畫長條圖，只不過是透過D3Js的操作來新增SVG元素到html裡面。 先宣告一個變數叫做svg並且透過D...
從今天開始終於要正式進入介紹前端效能優化各種技巧的章節了，如果到今天還願意繼續堅持看下去的讀者記得給自己一些掌聲 ? 如果對效能優化幾乎是零基礎的讀者也別擔心...
中秋連假跟朋友出去吃飯 差點忘記要寫 好險好險這邊祝大家中秋快樂 今天來介紹一下協作工具一個人可能沒什麼感覺但當兩三個一起開發時協作工具就很重要了 方便追蹤進度...
經過了三天的文章後，我們總算要進到新的『 Compare 』篇章了。 前兩天我們介紹了 WYSIWYG 一詞本身所代表的涵意，並列舉了一些市面上知名的應用，並接...
如何開始D3js 方法一 使用CDN 請google搜尋D3Js到D3Js的官方網站。滑鼠滾輪到下方處複製<script src="https:...
在昨天介紹網頁檢測工具時，我們看到它提供了一些看起來十分專業的 Metrics，不過光看文字還真的猜不出它們代表的是什麼意思 ? 今天第一個段落會介紹三個評...
Q1. gedit 是什麼? Gnome 是 Unix-like 作業系統上的一個開源桌面環境，提供豐富而完善的圖形化介面工具滿足使用者的日常所需，如文字編輯...
Q1. HG 是什麼? Mercurial 是一種輕量級分散式版本控制系統，由於 Mercuial 的元素符號為 Hg，Mercurial 的操作工具以 hg...
我們當初是先決定題目才開始想要用什麼技術做的最開始其實有想了兩三個有關於區塊鏈的 ai的等等一些很新潮的東西但是礙於現實（技術能力還不夠XD 就否決了 後來的題...
由於D3Js的組成部分來自於操控SVG(Scalable Vector Graphics)，所以簡單介紹一下SVG。 SVG組成是屬於向量圖形(透過電腦計算路徑...
誠如上一篇結尾所說，我們今天要把目光聚焦在瀏覽器提供的 contenteditable 屬性以及 execCommand api ，這兩個瀏覽器默認，用於製作...
經過昨天，我們明白了效能對於前端應用的重要性，但是，我們要怎麼評估一個網站的效能呢？用感受的嗎？自己使用這個網站時還算順暢就定義為這是一個效能很好的網站嗎？當...
莫力全 Kyle Mo
shrine90459
super_baba
DannyChen
boogieyan1997
iThome鐵人賽
看影片追技術