-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsearch.json
1 lines (1 loc) · 37.1 KB
/
search.json
1
[{"title":"安裝vue-cli (vue3.0) 時的基本設定","date":"2020-12-25T12:38:48.000Z","url":"/post/vue-cli-setting/","tags":["Javascript"],"categories":["vueJS"],"content":" 這次說明一下個人安裝vue-cli (vue3.0) 時所做的基本設定吧👋🏻👋🏻👋🏻。 先下載vue-cli 如要Upgrade可打上 建立新project 是次設定為這樣﹐因為這次只做單一頁面和不用store東西，所以不安裝vuex跟vue-router了： (個人習慣eslint都會使用standard和lint on save 🤧) 安裝完成後，先加上stylelint（統一檢查css format) 新增.stylelintrc.js 新增vue.config.js 個人習慣會做用normalize.css來reset所有browser的各類style type 然後在main.js加上： "},{"title":"Webpack - 使用SMACSS sorting order","date":"2020-11-24T12:30:06.000Z","url":"/post/use-smacss-sorting-order/","tags":["CSS","Webpack"],"categories":["Webpack"],"content":" 之前有一篇文章介紹了在 VScode 裡使用 PostCSS Sorting﹐最近在整理webpack plugin﹐順便寫下如何在 webpack 使用 SMACSS sorting order 吧。 在 webpack 安裝 stylelint 更改 webpack.config.js 安裝 SMACSS sorting order 建立 stylelint.config.js 內容如下： 當 build webpack 的時候，就會自動 sorting css 裡的 order 了 🎉。"},{"title":"使用不同SSH key登錄","date":"2020-11-04T12:41:19.000Z","url":"/post/ssh-key-login/","tags":["SSH key"],"categories":["SSH"],"content":" 有用git的話應該都會對ssh key有一定程度認識吧。如果要在同一部電腦使用不同的ssh key，除了使用手動轉換外，還可以在.ssh folder裡加上config file來自動識別不同的host使用不同的ssh key。 現在這邊有兩條ssh key，分別是id_rsa_personal跟id_rsa_work，.ssh folder檔案如下： 如果想手動轉換的話，可以這樣做： 如果想根據host來識別使用不同ssh key的話，就要加上config file config內容如下： 上面的指示如下： 如果是github.com的話，就使用id_rsa_personal這條ssh key 如果是其他host的話，就使用id_rsa_work 但有時候可能在github裡想做用不同的ssh key，這時就可以修改為： 然後修改~/.gitconfig .gitconfig內容如下： 如果想使用不同的ssh key時都用上不同git config中的username跟email的話，抱歉這不太能做到 🤪。這跟git config讀取順序有關，git config讀取順序如下： local repo裡的.git/config global (~/.gitconfig) system (/etc/gitconfig) 所以這個就只能在每個repo裡.git/config裡面修改了，只要在最底加上這些就可以了。 "},{"title":"Yarn小知識","date":"2020-10-20T12:33:10.000Z","url":"/post/yarn-introduction/","tags":["yarn"],"categories":["Javascript"],"content":" Npm vs Yarn 兩者也是Javascript package managers 現在大家的速度都差不多（個人覺得yarn有cache會快一點點啦) 兩者現在也有lock file（npm本來沒有lock file的，後來才有的。） lock file的用途是紀錄所有安裝package的dependency的版本資料，以便日後重新安裝相同的dependency，避免發生錯誤。 如何由npm轉到yarn? 刪掉lock file，然後yarn install 更新package.json裡的package 安裝syncyarnlock 更新package 基本指令 Install Install package Install global package Update global Uninstall Upgrade "},{"title":"下載Web API返回的Binary格式檔案","date":"2020-09-23T11:55:16.000Z","url":"/post/download-web-api-binary-file/","tags":["Javascript","Binary file"],"categories":["Javascript"],"content":" 碰到舊project要下載API返回的xlsx檔案，API返回的全都是Binary格式。一般來說利用axios 加上 responseType: “arraybuffer”就下載到了。但很可惜的是，舊project還是在用Yii + jQuery…. 於是在找$.ajax能不能這樣做，後來發現是不行的🤪。有些plugin好像可以解決到這個問題 (Eg: download.js)，不過還是堅持不加上新的plugin。最後發現最原始的XMLHttpRequest就能解決問題了 🤯 （甚麼？！） "},{"title":"Hexo筆記","date":"2020-09-01T12:20:00.000Z","url":"/post/start-to-use-hexo/","tags":["Hexo"],"categories":["Blog"],"content":" 不知不覺Hexo已經去到了5.0了，先寫一篇紀錄。 安裝Hexo 建立新檔案 開啟 Localhost 清理 Public folder 和 db.json 建立Public folder裡的檔案 P.S: 其實現在package.json已經齊了build, server, clean, deploy指令了XD 建立一篇新的文章 安裝RSS 安裝siteMap 上傳到GitHub"},{"title":"VScode插件 - PostCSS Sorting","date":"2019-03-18T12:18:53.000Z","url":"/post/vscode-css-sorting/","tags":["CSS","VScode"],"categories":["Editor"],"content":" Reference: 事源看到上面Reference那篇，所以決定調整(增加?)一下VScode裡的css sorting order。看了看SMACSS好像比較多人使用的樣子，所以就用SMACSS吧。 VScode可以使用 VS Code PostCSS Sorting 這個plugin幫助一下，但需要在VScode => perference => settings 裡修改setting.json才可以使用。以下是我的config: (P.S: properties-order裡面的排序是參照了 css-declaration-sorter 這篇) 修改完成後在command裡打上PostCSS Sorting: Run就可以了。 其實PostCSS有一個很方便的plugin css-declaration-sorter，可是公司不是每一個project也有使用PostCSS，所以還是安裝在VScode裡比較好Q_Q…(哭)"},{"title":"字型散步：日常生活的中文字型學","date":"2019-02-13T12:37:20.000Z","url":"/post/Font-Book/","tags":["Font"],"categories":["Book"],"content":" 字型散步：日常生活的中文字型學 輕鬆觀看的書本，做回一些筆記。 評估字型 可視性，可讀性，易辨性 中宮，重心 (圖片來源 / 字型美學 錯不在新細明體 喀報) 中宮 -> width 重心 -> height 傳統中文字中高重低，新潮漢字則相反 中英夾雜 襯體相同 粗幼相同 比例需要調較 定寛字型 vs 比例字型 (英文，數字) 細明體 - 定寛 新細明體 - 比例 定寛較常使用，比例可用於表格數字 字型家族 Eg: 思源黑體，小塚系列 (可混合使用，但並不是所帶同家族的字型可混合使用) 粗幼表示: W1 - W12 Light、Regular、Demibold、Bold、Extra 字型 楷書 標楷體（常用於台灣教科書內文) 明體 新細明體，宋體（適用於書本上的內文) 仿宋體（由明體演變出來) 黑體 信黑體，微軟正黑體，思源黑體（適用於電子產品) 圓體 娜爾字型，哥娜U，文鼎中圓體（70~80年代日本傳入台灣的舊潮流) 其他 綜藝體，英雄與科幻片的最愛 魏碑體，銳利剛強（常見於香港招牌) 勘亭體，從歌舞伎劇場到台灣夜市 疊圓體，可愛外表，常用於兒童繪本 康熙字典體，盡量被免 浙江民間書刻體，免費 蒙納超剛黑，板黑，強烈標語 蒙納長宋，簡小姚，文青味 小塚明朝，柊野明朝，免費 "},{"title":"HTML & CSS 網站設計建置優化之道","date":"2019-01-14T12:09:21.000Z","url":"/post/HTML-and-CSS-Design-and-Build-Websites/","tags":["CSS","HTML"],"categories":["Book"],"content":" HTML&CSS：網站設計建置優化之道 入門Web必看的書之一，清楚介紹了HTML跟CSS基本會用的語法。這邊節錄了一些經常忘記的語法…. 這系列還有另一本介紹Javascript跟jQuery (雖然現在jQuery都在死亡邊緣)，我自己還沒有看過，有空拿來看看吧…. HTML src, width, height poster=”image.jpg” (播放之前所顯示的圖像) controls (播放控制鈕) autoplay (自動播放) loop (重覆播放) preload - none (之前不載入視訊), auto (自動載入視訊), metadata (收集第一個影格, 片長, 播放清單) HTML5 版面元素 Meta description, keywords, author robots - 是否應將此頁加到搜查結果 (nofollow) pragma - 避免儲存快取 (no-cache) expires - 標示快取何時過期 (日期格式) 跳脫字元 HTML Character Escape Codes and Entity References CSSSelector ∗ {} h1, h2, h3 {} .note {} p.note {}尋找p是note的class屬性 #introduction li>a {}尋找li中的a子屬性 p a {}尋找p中的a屬性, 即使兩者之間還有堆疊其他元素 h1+p {}尋找h1後第一個p屬性, h1不需包圍p h1~p {}尋找h1後的p屬性, h1不需包圍p p[class]尋找有class屬性的元素p p[class=”dog”]尋找class屬性值為dog的元素p p[class~=”dog”]尋找class屬性在字與字之間有空格隔開之中有dog字眼的元素p p[attr^”d”]尋找class屬性的字母是d的元素p p[attr*”do”]尋找class屬性包含do的元素p p[attr$”g”]尋找class屬性的字尾是g的元素p Color RGB(102,205,170) // RGB值 #66cdaa // HEX碼 MediumAquaMarine // 顏色名 彩度 - 一個顏色中的灰色量 明度 - 一個顏色中的白色/黑色量 其他語法 Display:none vs Visibility:hiddennone不會留下空白位置, hidden會留下空白位置 border-radiusEg: border-radius: 80px 50px // 可變橢圓形 listlist-style-type (disc, circle, square)list-style-imagelist-style-position (outside, inside)list-style (Eg: inside circle) tableempty-cells (show, hide, inherit) cursor 游標樣式(auto, crosshair, default, pointer, move, text, wait, help, url(“cursor.gif”) @import import CSS in .CSS file "},{"title":"Share/Like Button集合","date":"2018-12-15T16:00:00.000Z","url":"/post/social-media-share-like-button/","tags":["Share Button","Like Button"],"categories":["Front-End"],"content":" 社交網站上的Share/Like Button集合。 Share ButtonFacebook Google+ Twitter Email Whatsapp Line Like Button Facebook Google+ Twitter 是咁的，其實仲有Share Button Auto Generator可以作為懶人參考。 參考網址: Line教學: LINE 分享按鈕安裝在網站或部落格中"},{"title":"MACOS - Shadowsocks使用方法","date":"2018-09-16T16:00:00.000Z","url":"/post/shadowsocks/","tags":["Software"],"categories":["MACOS"],"content":"翻牆程式，從Evernote上拿回紀錄。 安裝 Shadowsocks 設定 shadowsocks-libev.json 開啟 Shadowsocks 設定開機後自動開啟\b Shadowsocks 關閉\b自動開啟 Shadowsocks 關閉 Shadowsocks \b(Kill port) 其他設定 Google Chrome => SwitchyOmega => 設定Sock5 是咁的，其實有GUI版嘅Shadowsocks可以用，叫Shadowsocks X。其實唔洗裝得咁辛苦（逃"},{"title":"Yii2學習筆記 (1)","date":"2018-09-15T16:00:00.000Z","url":"/post/start-to-use-yii2-1/","tags":["Yii"],"categories":["Back-End"],"content":"從Evernote上拿回一些筆記…. 安裝 Composer 安裝Yii2 Basic / AdvancedYii2 Basic跟Advanced最大的分別應該是前者只有BackEnd，而後者有FrontEnd+BackEnd。兩者之間的config file位置也會有所不同。 存取舊檔案資料先安裝回Composer的Plugin 初始化php 安裝 Composer 時注意 如發現安裝失敗 composer.json改為 “minimum-stability”: “dev” 然後輸入 composer install –ignore-platform-reqs 解决使用 Composer 的时候提示输入 Token 更新 Composer package 啟用Yii2Yii2 Basic Yii2 Advanced 參考網址: 入门（Getting Started）: 安装 Yii（Installing Yii） - Yii 2.0 权威指南 - 文档 - Yii Framework 中文网"},{"title":"Atom Plugin","date":"2018-04-28T16:00:00.000Z","url":"/post/atom-plugin/","tags":["Atom"],"categories":["Editor"],"content":"轉VS code前記錄一下自己在Atom正在使用的Plugin…. 增強化 SASS高亮化 Atom-Syntax-highlighting-for-Sass vue.js 高亮化 Language-vue SQL高亮化 qolor Yii2 選字 Atom-yii2 Front-end利器 emmet 顏色選取 color-picker 檢查錯誤 Linter Linter-csslint Linter-htmlhint Format格式 atom-beautify tabs-to-spaces 其他 自動更新Plugin auto-update-packages> Git利器 git-plus Save file後自動Refresh!! Livereload 同步Plugin sync-settings 開Terminal platformio-ide-terminal project-manager file-icons pigment "},{"title":"MacOS Sierra 基本設定","date":"2017-07-15T16:00:00.000Z","url":"/post/mac-os-setting/","tags":["Basic Setting"],"categories":["MACOS"],"content":" 是的，最近轉了新公司，用的是Macbook Pro…雖然自己本來就有一部Macbook Pro，可是都沒有怎樣用來Coding (汗)，於是設定就成為了一大難關 (?)。 於是記錄一下一些基本設定吧… 系統設定1 - Black Menu Bar System Preference => General => Use Dark menu bar and Dock 2 - Dock Size System Preference => Dock => Size, Position on screen 3 - Trackpad System Preference => Trackpad 4 - Shortcut System Preference => Keyboard => shortcut Spotlight => Alt+Command+space 應用設式設定1 - Mail 2 - Calendar 於 App Store 下載 應用設式1 - Office工具 Pages Numbers Keynote 2 - Developer工具 Xcode 3 - 其他 Clocker (觀看不同地區時間) 使用HomebrewHomebrew可以方便安裝不同的Developer tools，例如: Git，Node.js等等… 另外可以在這裡搜尋Package。 安裝 Homebrew 使用 Homebrew 安裝 Package 更新 Homebrew 更新 Homebrew Package 搜尋 Package 觀看已安裝的 Package List 已安裝的 Hoewbrew List 日常工具: git node Shall: zsh PHP相關: php php-cs-fixer composer nginx mysql 其他language: python ruby 使用Homebrew caskHomebrew cask可以安裝不同的應用程式。 安裝 Homebrew cask 使用 Hoewbrew cask 安裝 Package 更新 Package1 - 首先安裝 Cask Upgrade 2 - 檢查所有 Package Version 3 - 更新所有 Package 搜尋 Package 觀看已安裝的 List 已安裝的 Hoewbrew List atom dropbox evernote firefox google chrome iTerm2 Itsycal sizeup Skype Teamviewer virtualbox vlc telegram-desktop fork Option: filezilla, xampp "},{"title":"Webpack學習筆記","date":"2017-06-20T16:00:00.000Z","url":"/post/start-to-use-webpack/","tags":["Webpack"],"categories":["Front-End"],"content":"Webpack是一個模組整合工具。可以安裝不同的Plugin，例如:Live reload, Minify js, css等等。 看見那麼多人在用Webpack，而且Gulp也有一段時間沒更新了，也想學習一下react。所以就來學習一下Webpack吧。 準備工具1 - 下載Node.js (PS: Node.js會連著npm一拼安裝) 檢查版本2 - 下載後開啟Node.js，然後檢查一下Node.js和npm的版本 初始化3 - 開一個新的資料夾，然後進入該資料夾，初始化該資料夾 之後會建立一個package.json的檔案，然後就可以安裝各類型的plugin了。package.json大概是這樣子: 安裝Webpack和Webpack-dev-server4 - 安裝Webpack和Webpack-dev-server到資料夾裡 資料夾架構首先先說明自己的資料夾架構: dist - output出來的檔案也會裝在這個資料夾 src - js跟sass改動也是在這個資料夾裡 webpack.config.js, postcss.config.js - 等一下會用到的檔案 插入JS檔案5 - 先在src裡建立一個index.js檔案 6 - 建立index.html 6 - 建立webpack.config.js 7 - 分別開2個cmd各自打下: 跟 這樣就做了基本webpack的型態了。如果改js或html的檔案改變了，webpack-dev-server會自動reload的XD。太方便了XD。 插入CSS檔案8 - 由於Webpack不懂JS以外的檔案，所以我們插入CSS還要安裝style-loader跟css-loader 9 - 在src建立style.css檔案 10 - 修改index.js 11 - 修改webpack.config.js 使用extract-text-webpack-plugin12 - 可是，有時侯想把js跟css的檔案獨立起來，這時就可以安裝extract-text-webpack-plugin 13 - 修改webpack.config.js 14 - 修改index.html 使用file-loader15 - 有時候CSS檔案裡會有url image，這時就需要安裝file-loader 16 - 修改webpack.config.js 17 - 修改style.css 使用SASS18 - 安裝node-sass和sass-loader 19 - 修改webpack.config.js 使用PostCSS20 - 安裝PostCSS所需Plugin 21 - 修改webpack.config.js 22 - 建立postcss.config.js 循環使用Webpack如果將來想在另外的資料夾使用Webpack，可以將package.json, webpack.config.js和postcss.config.js直接複製去資料夾裡，然後打上: 那就會直接裝上package.json的plugin了。 參考網址: 使用 webpack 模組化你的程式碼，讓人生更美好。 介绍 Webpack - React Webpack 小书 Webpack(3) — CSS Loader 樣式表與圖檔 – Alpha Orange – Medium Webpack2 手把手一起入門 - kinanson的技術回憶 - 點部落"},{"title":"Atom Hot Key 筆記","date":"2017-06-19T16:00:00.000Z","url":"/post/atom-hot-key/","tags":["Atom"],"categories":["Editor"],"content":"又是一篇在evernote整理後的文章 (汗)。方便一下自己找筆記。 基本 行數設定 搜尋 轉換顯示檔案 選取字串 移動格距"},{"title":"Gulp學習筆記","date":"2017-06-13T16:00:00.000Z","url":"/post/start-to-use-gulp/","tags":["Gulp"],"categories":["Front-End"],"content":"Gulp是一個自動化構建工具。可以安裝不同的Plugin，例如:Live reload, Minify js, css等等….以方便工作。 最近因為想學習一下Webpack，所以先找回evernote的gulp筆記整理一下….(汗) 準備工具1 - 下載Node.js (PS: Node.js會連著npm一拼安裝) 檢查版本2 - 下載後開啟Node.js，然後檢查一下Node.js和npm的版本 安裝Gulp3 - 安裝Gulp到全域的環境 初始化4 - 開一個新的資料夾，然後進入該資料夾，初始化該資料夾 之後會建立一個package.json的檔案，然後就可以安裝各類型的plugin了。package.json大概是這樣子: 安裝plugin5 - 只要打上npm install (xxxxxx) –save-dev就可以成功安裝, 例如: 因為之前只是將Gulp安裝到全域的環境，所以我們還要在資料夾裡安裝一次。這時應該會自動建立一個node_modules的資料夾。 常用Plugin以下是我常用的Plugin: browser-sync - Live Reload的效果，可以自動同步檔案 gulp - Gulp安裝 gulp-clean-css - Minify CSS gulp-file-include - 類似PHP include的效果, 主要用在header和footer裡 gulp-rename - 重新命名檔案 (將minify後的檔案加上.min) gulp-sass - 用來使用SASS, SCSS gulp-uglify - Minify JS 資料夾架構首先先說明自己的資料夾架構: app - 裝著還沒minify的CSS file build - 所有改動也是在這個資料夾裡做，包括了html, scss, js的檔案 js - Minify後的js stylesheets - Minify後的css 設定Gulp6 - 我們需要建立一個gulpfile.js的檔案來做設定, 以下是我的gulpfile.js的設定 運行Gulp7 - 因為我在gulpfile.js裡設定了 循環使用Gulp如果將來想在另外的資料夾使用gulp，可以將package.json和gulpfile.js直接複製去資料夾裡，然後打上: 那就會直接裝上package.json的plugin了，然後就可以打上gulp運行了。 參考網址:Gulp 學習 1 - 安裝與執行 - OXXO.STUDIO介紹 · gulp 學習筆記"},{"title":"預防Ransomware (勒索病毒) 基本措施","date":"2017-05-19T16:00:00.000Z","url":"/post/security-ransomware-guideline/","tags":["Security","Ransomware"],"categories":["Others"],"content":"Photo by: Cyber Security.Plus 呢篇係大概一年前聽一個講座而寫落嘅筆記，依家拎番出黎執執佢提醒下自己 (汗)。 點樣將風險減到最低? 個人電腦 經常更新系統, 軟件 安裝防毒軟件 定時做Offline Backup (包括Dropbox, Google drive) 公司層面 起Server (管理所有員工的Account, 一次性管理) 用AppLocker 限制員工唔可以將USB插係公司電腦 Wifi 用Free Wifi果陣, 睇清楚個Wifi名先好用 教導員工 唔好亂開email / file Zip / js 檔唔好亂開 可以去 ID ransomware 檢查下有無毒 QR Code 睇清楚條URL 交帳單 可以用流動數據上網黎交 (比wifi更為安全) 如果中左 Ransomware要點做? 唔好比錢比hacker Google search 睇下有無得破解番 (機會低) 如果真係好重要…想比錢拎番 叫hacker比住少少試下解唔解到部分file (試驗係咪真係work) 利用同情心叫佢降價 可以報警講番件事 (用途不大) 其他連結: "},{"title":"RSS訂閱清單","date":"2017-03-18T16:00:00.000Z","url":"/post/rss-feeds/","tags":["Feedly","RSS"],"categories":["Others"],"content":"最近收拾了一下Feedly的RSS訂閱，以下的是清單： (不知道之後還會不會在這邊更新…如果想看最新的還是去我的github repo會比較好XD) Feedly OPML file: [Must Read] Weekly Weekly Collection @F2ETW 可乐橙 Collective – Codrops FEX 百度 Web 前端研发部 TechBridge Weekly 技術週刊 FrontEnd Focus CodeTengu Weekly 碼天狗週刊 [Web] Front-End (Chi) O3noBLOG 沒一村生活點滴 阮一峰的网络日志 张鑫旭-鑫空间-鑫生活 嫁給RD的 UI Designer 転転 Startup Studio - Medium CSS可樂 EFE Tech 前端，沒有極限 Kimix MUKI space* w3cplus 博客 PJCHENder愛分享 Oxxo.Studio [Web] SEO (Chi) awoo SEO 關鍵字行銷誌 台灣搜尋引擎優化與行銷研究院 [Web] Front-End (Jpn) PhotoshopVIP HTML5Experts.jp コムテブログ かちびと.net Webクリエイターボックス [Web] Official Blog Official jQuery Blog Google Webmaster Central Blog Sass Blog Angular Node.js Blog Bootstrap Blog Vue.js [Web] Weekly (Eng) Jekyll Weekly JavaScript Weekly Responsive Design Weekly Web Tools Weekly Web Design Weekly [Web] Front-End (Eng) Smashing Magazine Designmodo Speckyboy Design Magazine CodyHouse » Gems Tutorialzine HTML5Rocks CSS-Tricks [Design] Font jf tips justfont blog Type is Beautiful type.center/tw Type is Beautiful [Design] Others 优设-Uisdc 設計大舌頭 Be For Web [Web] Back-End (Chi) mrkt 的程式學習筆記 黑暗執行緒 ASP.NET專題實務 教學影片 入門實戰課程 – MIS2000Lab.- 點部落 The Will Will Web Design for Startup™ [IT] News (Hong Kong) UNWIRE.PRO [IT] News (Taiwan) 電腦王 T客邦 Others Stories by Felix Chern on Medium Shopline自助電商教室 酷 壳 – CoolShell 91app 品牌全通路學院｜與您分享電商及網路開店大小事 搞笑談軟工 "},{"title":"Windows - 使用cmd快速安裝軟件","date":"2016-09-11T16:00:00.000Z","url":"/post/windows-using-cmd-to-install-software/","tags":["Chocolatey"],"categories":["Windows"],"content":"每一次洗機後或是在新電腦安裝軟件是一件很麻煩的事情，要到各官方網站下載安裝檔後然後安裝。使用Chocolatey可以使用windows上的cmd打下command來安裝大部分軟件，而且還可以檢查更新和安裝最新版本，實在太方便了 (哭)。 如果有用MAC OS的話Chocolatey就像Homebrew cask一樣。Linux的話就像apt-get一樣。 安裝Chocolatey 這樣就安裝完成了。十分簡單XD 一般指令安裝package 列出已安裝清單 尋找package 也可以利用choco官網的search package功能尋找。 更新所有package 解除安裝package"},{"title":"Font - 各作業系統的預設/內置字型","date":"2016-09-10T16:00:00.000Z","url":"/post/operating-system-default-fonts/","tags":["Font"],"categories":["Others"],"content":" 07-01-2019 更新似乎有部分人在查找蘋方體(PingFang)的下載點? 找了找發現apple官網又真的沒有下載點，網上的下載點會不會加甚麼病毒就不知道了…這邊還是請大家小心一點。 iOS 預設字型iOS 9 前繁體: 黑體-繁 (Heiti TC) STHeitiTC Light (幼體) STHeitiTC Medium (黑體) 簡體: 黑體-簡 (Heiti SC) STHeitiSC Light (幼體) STHeitiSC Medium (黑體) 英文: Helvetica Neue iOS 9 後繁體: 蘋方-繁 (PingFang TC) PingFang TC Light (幼體) PingFang TC Medium (黑體) PingFang TC Regular (標準) PingFang TC UltraLight (極幼體) PingFang TC Thin (纖細體) 簡體: 蘋方-簡 (PingFang SC) PingFang SC Light (幼體) PingFang SC Medium (黑體) PingFang SC Regular (標準) PingFang SC UltraLight (極幼體) PingFang SC Thin (纖細體) 英文: San Francisco Android 預設字型繁體: DroidSansFallback 簡體: DroidSansFallback 英文: Roboto, Noto 但不同品牌有不同的預設字型: HTC: 信黑體 (Xingothic TC) SONY: 思源黑體 (Noto Sans TC) 小米: 小米蘭亭字體 (MILT RG) Windows 預設字型繁體: 微軟正黑體 (Microsoft JhengHei) 簡體: 微軟雅黑 (Microsoft YaHei) 英文: Arial MAC OS 預設字型OS X 10.5 Leopard 前繁體: 儷黑 Pro (LiHei Pro) LiSong Pro Light (幼體) LiHei Pro Medium (黑體) 簡體: 華文黑體 (STHeiti) STXihei (華文細黑) STHeiti (華文黑體) 英文: Helvetica Neue OS X 10.6 Snow Leopard 至 OS X 10.10 Yosemite繁體: 黑體-繁 (Heiti TC) STHeitiTC Light (幼體) STHeitiTC Medium (黑體) 簡體: 黑體-簡 (Heiti SC) STHeitiSC Light (幼體) STHeitiSC Medium (黑體) 英文: Helvetica Neue OS X 10.11 El Capitan 後繁體: 蘋方-繁 (PingFang TC) PingFang TC Light (幼體) PingFang TC Medium (黑體) PingFang TC Regular (標準) PingFang TC UltraLight (極幼體) PingFang TC Thin (纖細體) 簡體: 蘋方-簡 (PingFang SC) PingFang SC Light (幼體) PingFang SC Medium (黑體) PingFang SC Regular (標準) PingFang SC UltraLight (極幼體) PingFang SC Thin (纖細體) 英文: San Francisco Windows 內建中文字型繁體: 微軟正黑體 (Microsoft JhengHei) 新細明體 (PMingLiU) 標楷體 (DFKai-SB) 簡體: 微軟雅黑 (Microsoft YaHei) 黑體 (SimHei) 宋體 (SimSun) 楷體 (KaiTi) 仿宋 (FangSong) MAC OS 內建中文字型繁體: 儷黑 Pro (LiHei Pro) 黑體-繁 (Heiti TC) 蘋方-繁 (PingFang TC) 蘋果儷中黑 (Apple LiGothic) 蘋果儷細宋 (Apple LiSung) 標楷體 (BiauKai) 簡體: 華文黑體 (STHeiti) 華文細黑 (STXihei) 黑體-簡 (Heiti SC) 蘋方-簡 (PingFang SC) 仿宋 (Fang Song) 黑體 (Hei) 宋 (Song) 楷體 (Kai) 華文仿宋 (ST FangSong) 華文楷體 (ST Kaiti) 華文宋體 (ST Song) 冬青黑體 (Hiragino Sans GB) [OS X 10.6 以上] 各作業系統常用英文字型:Sans-serif Arial Helvetica Arial Black Verdana Tahoma Impact Trebuchet MS Serif Georgia Palatino Times New Roman Monospaced Courier New Lucida Console Courier New 參考網址: OS X 提供了哪些中文黑體？ - 知乎 CSS Font Stack 網頁中文字型除了微軟正黑體, 還有這些好選擇！(windows)＠WFU BLOG Mac OS X字體列表 - 維基百科，自由的百科全書"},{"title":"Jekyll - Windows 10 Setup","date":"2016-08-04T16:00:00.000Z","url":"/post/jekyll-windows-setup/","tags":["Jekyll"],"categories":["Blog"],"content":"JekyllJekyll是使用Ruby開發的靜態網站生產器，可以存放在Github裡，現在這個Blog也是使用Jekyll的。因為每一次洗機後在Windows安裝Jekyll總是會遇到錯誤，還是記錄一下步驟好了。 安裝 Ruby 和 Development Kit 開啟Terminal檢查Ruby是否已經安裝在Windows上 如看不到version no. ，就需要增加System variable path My Computer -> Control Panel -> System Security -> System -> Advanced system settings -> Environment Variable -> System variable, Path, Edit 然後加上 C:\\tools\\ruby23\\bin 將DevKit解壓到 開啟Terminal，安裝DevKit 安裝Jekyll 執行Jekyll BundlerBundler是管理Gem的工具。 如何安裝Bundler? 將Bundler的plugin放到Gemfile上，Eg: 安裝所有Bundle plugin 執行jekyll和Bundle"},{"title":"Google devtools - Udemy課程筆記","date":"2016-08-02T16:00:00.000Z","url":"/post/google-devtools-udemy-note/","tags":["devtools"],"categories":["Front-End"],"content":"最近在facebook裡看到了這個免費的課程 - Chrome 網頁除錯功能大解密。前幾天很快地看過一次，節錄一下自己還不知道的技巧。 移動行數 利用Hot key改變valueCtrl + ↑ , Ctrl + ↓ 調整動畫Console -> Animations 在Console裡測試JavascriptEg: Console.table"},{"title":"CSS - 關閉按鈕","date":"2016-06-26T16:00:00.000Z","url":"/post/css-close-button/","tags":["CSS"],"categories":["Front-End"],"content":" See the Pen CSS - Close Button by Molly Kan (@mollykannn) on CodePen. HTML CSS "},{"title":"GA - 使用 trackEvent 追蹤點擊數","date":"2016-06-13T16:00:00.000Z","url":"/post/ga-trackevent/","tags":["Google-Analytics"],"categories":["SEO"],"content":" 方法 1HTML: 方法 2HTML: Javascript: 參考網址: 運用再行銷功能接觸網站舊訪客和應用程式先前的使用者 - AdWords說明 Event Tracking - Web Tracking (ga.js) - Google Developers _trackPageview & _trackEvent – 網頁與訪客行為追蹤 - Google Analytics 網站分析資訊網 在 Google Analytics 中追蹤事件 - 熊屋 - 技術小記"},{"title":"Javascript - 檢查手機正在使用的方向","date":"2016-06-13T16:00:00.000Z","url":"/post/javascript-detect-mobile-orientation/","tags":["Javascript"],"categories":["Front-End"],"content":"在做RWD的時候，很多時候也會設定當手機直放或橫放時，會顯示甚麼指定的東西。以下是利用Javascript來檢查手機正在使用的方向的編碼。 使用方法 參考網址: Detect iOS Device Orientation with JavaScript"},{"title":"Ubuntu起手 - 1.安裝及使用速成輸入法","date":"2016-01-16T16:00:00.000Z","url":"/post/start-to-use-ubuntu/","tags":["Ubuntu"],"categories":["Ubuntu"],"content":"現在最新的版本是15.01，可以到這裡下載: Ubuntu 正體中文站 安裝Ubuntu下載回來後安裝在VirualBox(Windows系統)上就可以使用了，跟普通安裝Windows沒甚麼分別。 如果在Windows系統上弄ubuntu USB，可以下載Universal USB Installer然後使用。 安裝速成輸入法相信香港的朋友們安裝完Ubuntu後最煩惱的是沒有速成輸入法吧，安裝步驟如下: 1 - 在終端機(Ctrl+Alt+T)上執行指令，安裝完成後重新開機 2 - 設定 > 語言設定 > 鍵盤輸入法系統 > IBus 3 - 設定 > 文字輸入 > + 4 - 有”漢語(速成古典版)(IBus)”, “漢語(速成第三代)(IBus)”, “漢語(速成第五代)(IBus)”選擇，分別是: 速成第三代 (Quick 3) - 和 Windows 常用速成輸入法幾乎相同，只針對輸入港台繁體中文 (包括四千多香港字)。 速成第五代 (Quick 5) - 擴充至支援輸入簡繁中文和日韓漢字，但不少字的編碼和第三代 (Windows 的速成編碼) 有分別。 速成古典版 (Quick Classic) - 和 Windows 常用速成輸入法幾乎相同，只針對輸入港台繁體中文 參考網址: 配置 IBus - FlossDoc 5 - 如要設置按一下space就會轉第二行的話，可向右上方的語言標示按右鍵 > 設置 > 詳請 > Behavior of space key: Next Page"},{"title":"Git - 使用SSH對Github進行操作(3)","date":"2014-12-28T16:00:00.000Z","url":"/post/git-github-use-method-3/","tags":["Git"],"categories":["Git"],"content":"每一次上傳檔案到github時也要輸入帳號及密碼是一件很麻煩的事情, 如果使用SSH的話, 就可以避免了這些煩惱了 (笑) 參考: Windows使用ssh對Github進行操作 - 愛流浪的小風- 點部落 以下是節錄下來的指令: 1 - 首先進入指定的目錄 cd /c/users/your_username 2 - 建立public key和private key ssh-keygen -t rsa -C “youremail@email.com“ 3 - 將SSK key新增到github上 - 參考: Windows使用ssh對Github進行操作 - 愛流浪的小風- 點部落 可能會發現上傳檔案還是要輸入帳號及密碼的…這是因為各repository的git clone 還沒有改回SSH…我們平常拿取github的專案通常是使用HTTP $git clone 其實是可以輸入SSH $git clone git@github.com:test/test.git 所以, 要進去repository的目錄把HTTP改回SSH, 檢查是否使用HTTP $git remote -v 如果看到的是這樣 origin (fetch) origin (push) 那就需要改回SSH, 指令如下: $git remote set-url origin git@github.com:test/test.git 參考網址:Changing a remote’s URL - User Documentation"},{"title":"Git - 使用Dropbox建立Git倉庫(4)","date":"2014-12-28T16:00:00.000Z","url":"/post/git-github-use-method-4/","tags":["Git"],"categories":["Git"],"content":"如果想將某些檔案分享給指定的朋友們一起修改而不常公開給所有人看到, 可以使用dropbox (其實其他的雲端儲存網站也可以的)。 參考網址: 使用Dropbox建立Git私有仓库 , 以下是節錄下來的指令: 建立 Git Server1 - 首先建立一個資料夾(Eg: repository), 然後共同分享給指定的朋友 2 - 進入該資料夾目錄 3 - 建立專案 4 - 進入該專案 5 - 初始化為git repository，即git server端的資料 建立本地倉庫1 - 建立資料夾, 進入該資料夾目錄 2 - 初始化 上傳到Git Server1 - Remote add 2 - 上傳檔案 "},{"title":"Git - 基本指令(1)","date":"2014-12-27T16:00:00.000Z","url":"/post/git-github-use-method-1/","tags":["Git"],"categories":["Git"],"content":"現在很多網站也有Git的教學, 這篇只是記錄而已。 Git有甚麼用途? GitHub又是甚麼?Git是檔案互相輸送的系統, 相對於FTP, Git會把過住的記錄保存, 而且可以把檔案復原, 更重要一點是: 如果兩個人同時修改同一個檔案, 當檔案上傳時, 他們的資料會保存在同一個檔案上。 GitHub是一個使用Git輸送檔案的網站, 大概像web hosting的東西。 可以參考一下: Git的基本介紹 - 連猴子都能懂的Git入門指南 - 4頁的Git介紹寫得很不錯的 (笑) GitHub 簡介 準備工具下載Git 申請一個GitHub的帳號 Git設定1 - 打開Git Bash, 設定user name 跟 email $ git config –global user.name “your user name” $ git config –global user.email youremail@email.com 2 - 前往指定目錄/資料夾 cd (指定目錄/資料夾) Eg: cd ~/desktop 3 - 退回上一層可以使用 cd .. GitHub指令4 - 取得GitHub上的專案 $git clone (GitHub上的URL) Eg: $git clone 5 - 新增專案可以看GitHub上的Document - Create A Repo - User Documentation 6 - 如要新增/修改檔案, 傳回GitHub需要打上 $git add . $git commit -m “your description” $git push origin master 7 - 如要刪除檔案, 傳回GitHub需要打上 $git rm -rf yourfile $git commit -m “your description” $git push origin master 8 - 如要更改檔案名稱, 傳回GitHub需要打上 $git mv old_filename new_filename $git commit -m “your description” $git push origin master 8 - 取回已更新的GitHub檔案, 需要打上 $git pull 參考網址:Git - First-Time Git Setup"},{"title":"Git - 建立Web page/Branch使用(2)","date":"2014-12-27T16:00:00.000Z","url":"/post/git-github-use-method-2/","tags":["Git"],"categories":["Git"],"content":"學懂了git的基本指令後, 可以開始慢慢玩GitHub了 (笑), 每一個Github的帳號也會有一個domain name, 毛利的domain name是: 。如果要使用該domain name的話, 可以將repository改為: “username.github.com”, 然後branch選取master就可以了 (branch default為master, 所以可以不用選取啦…)。 如果其他的repository也想弄web page的話, 那麼branch就要選取gh-pages了。這樣如果repository的名稱是test, 那麼URL就會是 “username.github.com/test”了。那麼…Branch (分支)是甚麼呢? 那又如果修改branch呢? 可以看: 什麼是分支? - 連猴子都能懂的Git入門指南 。以下會介紹一下指令: 增加branch以及在local裡使用該branch $git checkout -b branchname 將branch增加至github $git push origin branchname 轉用別的branch $git checkout branchname 在local上刪除branch $git branch -D branchname 在github上刪除branch $git push origin :branchname 參考網址:Create a new branch with git and manage branches · Kunena/Kunena-Forum Wiki"},{"title":"Remote Debugging on Android with Chrome","date":"2014-12-18T16:00:00.000Z","url":"/post/remote-debugging/","tags":["devtools"],"categories":["Front-End"],"content":"前幾天在尋找如何在手機上可以看到localhost Web page, 發現Google Chrome Developer Tool已經可以了 (汗) 參考:Remote Debugging on Android with Chrome 基本上照著以上的做法就成功了 (笑) 我的Sony Z2就很順利地成功了, 不過是找USB Debugging找了很久 方法: Sony Z 哪邊有「開發」及「USB除錯」選項 然後今天拿住Samsung S2做以上步驟, 發現不成功, USB devices也裝上了也是不行…後來發現要裝上adb.exe才行 (可惡)… 步驟如下: 1 - 首先下載adb.exe 2 - 在windows選項搜尋cmd, 然後找回adb.exe的目錄 3 - 運行adb.exe 4 - 抓回devices 這樣就可以了 (笑) 參考網址:No devices detected. under Chrome://inspect#devices"},{"title":"CSS - Transition","date":"2014-11-13T16:00:00.000Z","url":"/post/css_transitions/","tags":["CSS"],"categories":["Front-End"],"content":"W3school: CSS3 Transition 方法如下: (0.5s就是要輸入的延遲秒數) 用一下例子: See the Pen GgRvxK by Molly Kan (@mollykannn) on CodePen. "},{"title":"PHP - 使用指定gmail傳送給其他email","date":"2014-11-12T16:00:00.000Z","url":"/post/php-send-email-by-gmail/","tags":["PHP"],"categories":["Back-End"],"content":"做學校功課要用自己的Gamil send email, 然後發現內容用不到html格式….找了好久好久才找到方法/_\\ 方法如下: $headers = “From: john@example.com\\n”; $headers .= “MIME-Version: 1.0\\n”; $headers .= “Content-type: text/html; charset=iso-8859-1”; 網上普遍一般都是\\r\\n, 可是原來\\r在Gmail上是用不到的…./_\\ 參考網址:Getting your PHP HTML email to render in Gmail | John does Design"},{"title":"新開始","date":"2014-07-22T16:00:00.000Z","url":"/post/start/","tags":["Life"],"categories":["Others"],"content":"人生第一次用Git上傳東西到GitHub，用GitHub的Jekyll來建立blog。還好網上有教學，不用碰碰撞撞很多次 (汗)。不過教學還是很少，有空才記回之前的流程吧 (掉)。 為何Blog的標題是 “風の迷路。”呢? “風の迷路” 是尾崎豐其中的一首歌。小妹很喜歡這首歌所以就拿了來當標題了 (汗)。以下是其中的一段歌詞: いつか振り返る時に 傷跡すらも笑顔で 受けとめられるだろうか 悔やむこともないままに ああ時は流れてく 真実よ安らかに 今夜も素敵な夢と戯れるだろう 中譯歌詞在這裡，不太方便貼上來呢….. "}]