網頁開發 Web Development – 地瓜大的飛翔旅程

樣式方法 @ 地瓜大的飛翔旅程" > 網頁開發 Web Development – 地瓜大的飛翔旅程

[指南] 在 Vue 專案中，修改
樣式方法

Posted on2020-07-102020-07-07

在 Vue 專案中，若要修改對於 <body> 上的樣式，會遇上一個問題：因為 vue 的框架頁面是載入在 <div id=”ap Read More …

[筆記] Figma 前端設計師協作工具簡單介紹

Posted on2020-07-062020-07-06Leave a comment

身為一位前端工程師，與 UI / UX 設計師合作時，往往會接觸到 Adobe XD 或是 Figma 這兩套工具。以工程師的角度來說，它可協助切版的進行，讓 Read More …

[筆記] 從 Vue CLI 3 開始建立規模化專案

Posted on2020-07-052020-07-07Leave a comment

用 Vue CLI 3，可以快速的建立一個 Vue 專案。雖說是方便，但要能夠規模化的管理 vuex, scss, vue-router 等等檔案，還是要自己手 Read More …

[指南] Github 上的 Public APIs 列表

Posted on2020-07-032020-07-01Leave a comment

Github 上往往會藏有許多意想不到的資源。這回挖掘到的是最近仍有 commit 記錄的一份公開 API 的列表。若你有練習或是專案上的需求，可以到這邊來查閱 Read More …

[指南] Iconmonstr 超過 4000 種的圖示 SVG, EPS, PSD, PNG 支援

Posted on2020-07-022020-07-01Leave a comment

Iconmonstr 所提供的圖示有著 Fill / Bold / Thin 三種類型，同時又可進行商業和非商業的使用。除了可提供的檔案格式眾多外，圖示的數量也 Read More …

[筆記] CSSgram – 輕鬆套用 Instagram 上的濾鏡效果

Posted on2020-06-212020-06-21Leave a comment

Instagram 是近幾年相當熱門的社群，其一大特色就是其豐富的照片濾鏡效果，有好心人士將其效果用 CSS 給做出來了。你只需要簡單的套用一支 CSS，並且放 Read More …

[筆記] Palettable 互動式的挑選配色工具

Posted on2020-06-202020-06-19Leave a comment

雖說網路上的配色工具有百百種，但 Palettable 是一個用互動方式讓使用者來挑選顏色配置的方便工具。對於完全沒有美術觀念的我來說，靠著它背後的演算邏輯，配 Read More …

[筆記] Bootstrap 5 Alpha 版本上線囉來看看新增些什麼

Posted on2020-06-192020-06-18Leave a comment

身為前端的熱門框架 – Bootstrap，在 2020 年的 6 月終於推出了第五世代的測試版本，有興趣的可以先上官網下載來玩玩看。新版本和目前的 Read More …

[筆記] Vuetify 客製化製作彈出 + 滾動選單

Posted on2020-06-172020-06-15Leave a comment

Vuetify 的 Selection 部分，雖說是節省了建立下拉選單的時間，不過這回遇上要客製化的場合，那麼就得抽絲剝繭，將所需要的功能、程式碼和CSS取出。 Read More …

[筆記] Vuetify Expansion 客製標題按鈕

Posted on2020-06-152020-06-15Leave a comment

Vuetify 的 Expandsion 套件，對於製作展開選單的需求，可以立即套用。不過在其客製化標題上，要在標題左邊加上一些東西(例如 icon, 按鈕&# Read More …

[筆記] 網頁切版直播班 2020 春季班 – 課後心得

Posted on2020-06-152020-06-15Leave a comment

六角學院的網頁切版直播班的兩個月密集課程，在每週五的晚上下班後，就是找個網路穩定的地方，看著螢幕上的示範以及聊天室的即時回饋，來測試自己對於課程內容的了解程度。 Read More …

[筆記] 如何客製化自己的 Bootstrap 設定檔

Posted on2020-06-102020-06-08Leave a comment

Bootstrap 4 的前端框架，其樣式是可以透過 npm 之類的工具下載回自己的本地端，修改變數相關設定後再行輸出的。這篇要筆記下可以操作的地方，以及如何再 Read More …

[筆記] 網頁切版直播班 2020 春季班 – 第八週

Posted on2020-06-072020-06-01Leave a comment

SCSS 隨著專案的規模增大，為了方便維護，會開始有內容與容器分離、結構與樣式分離，進而模組化的進程。這樣的結果，就形成了各種結構設計模式(如 SMACSS、O Read More …

[筆記] 解決 VS Code Terminal 中無法正常顯示字體的問題

Posted on2020-06-012020-05-29Leave a comment

若你是安裝 zsh 且有套用一些特定佈景主題的人，難免會有一些特殊字體出現。這篇是筆記如何解決在 Visual Studio 打開 zsh Terminal 時 Read More …

[筆記] HTML 與 PUG 線上格式轉換

Posted on2020-05-302020-05-25Leave a comment

這篇筆記下網路上好用的 HTML 和 PUG 格式互相轉換的工具。若你是使用 Visual Studio，那麼也有不少好用的轉換器可供使用。 HTML 轉成 P Read More …

[筆記] 網頁切版直播班 2020 春季班 – 第七週

Posted on2020-05-292020-05-25Leave a comment

進入到第七週，主要是強調視差動畫效果該如何實現。透過關鍵影格(keyframe)以及 x,y,z 方向的移動，自然而然就可以完成基礎的動畫效果。第七週課程重點 Read More …

[筆記] 使用 Gulp 進行網頁前端自動化 – 用一般 HTML 來製作樣板並排版

Posted on2020-05-272020-05-25Leave a comment

雖說用 pug 來進行排版算是很方便，不過對於已經習慣 HTML 標籤格式的我來說，要上手還是有一點難度。於是經過了無數測試和尋找後，最後選定用 gulp-te Read More …

[筆記] 使用 Gulp 進行網頁前端自動化 – 依照開發環境調整佈署內容

Posted on2020-05-252020-05-25Leave a comment

這篇筆記下如何依照開發環境來調整佈署的內容，同時在佈署前，自動先清理掉先前產出的靜態檔案內容，並依照現有的檔案來生成全新的檔案，已確保前後檔案的一致性。交付正 Read More …

[筆記] 使用 Gulp 進行網頁前端自動化 – 架設簡易伺服器和壓縮程式碼

Posted on2020-05-242020-05-20Leave a comment

這篇要筆記下的是讓前端開發時可以擺脫伺服器，達成編譯完後可以自動打開瀏覽器瀏覽，同時壓縮你的程式碼。架設 WebService 1. 先安裝 BrowserS Read More …

[指南] 如何使用 Google 所提供的 Material Icon

Posted on2020-05-212020-05-15Leave a comment

Google 所維護的 Material icon 是一個公開且可商用的資料庫，由於是向量圖形式，所以無論螢幕尺寸是何大小，都可以輕鬆的看清楚。預設提供 SVG Read More …

[筆記] 使用 Gulp 進行網頁前端自動化 – Gulp 和 Bower 串接

Posted on2020-05-202020-05-13Leave a comment

Gulp 搭配上 Bower 和 Bootstrap 4 前端套件，可以快速的做到前端樣板管理。不過 Gulp 4 和前一版的作法有些不同，這邊筆記一下串接的方 Read More …

樣式方法","image":{"@type":"ImageObject","url":"https://smlpoints.com/wp-content/uploads/notes-vuejs-node-js-initialize-projects-1.jpg"},"url":"https://smlpoints.com/guide-vue-how-to-change-body-style.html"},{"@type":"ListItem","position":6,"name":"[筆記] ALG101 – 先別急著寫 LeetCode4","image":{"@type":"ImageObject","url":"https://smlpoints.com/wp-content/uploads/notes-lidemy-command-line-beginner-class-1.jpg"},"url":"https://smlpoints.com/notes-do-not-writing-leetcode-before-understanding-something-4.html"},{"@type":"ListItem","position":7,"name":"[指南] 曾經的遊戲回憶 – 史萊姆的第一個家好玩遊戲區","image":{"@type":"ImageObject","url":"https://smlpoints.com/wp-content/uploads/guide-slime-game-zone-1.jpg"},"url":"https://smlpoints.com/guide-slime-game-zone.html"},{"@type":"ListItem","position":8,"name":"[住宿] 台北大直英迪格 IHG Indigo Taipei","image":{"@type":"ImageObject","url":"https://smlpoints.com/wp-content/uploads/ihg-indigo-taipei-taiwan-1.jpg"},"url":"https://smlpoints.com/ihg-indigo-taipei-taiwan.html"},{"@type":"ListItem","position":9,"name":"[筆記] Figma 前端設計師協作工具簡單介紹","image":{"@type":"ImageObject","url":"https://smlpoints.com/wp-content/uploads/notes-figma-introduction-1.jpg"},"url":"https://smlpoints.com/notes-figma-introduction.html"},{"@type":"ListItem","position":10,"name":"[筆記] 從 Vue CLI 3 開始建立規模化專案","image":{"@type":"ImageObject","url":"https://smlpoints.com/wp-content/uploads/notes-vuejs-node-js-initialize-projects-1.jpg"},"url":"https://smlpoints.com/notes-start-from-vue-cli-3-to-create-a-project-with-the-larger-scale.html"}] }

Blogimove部落格搬家技術服務