Setting your ssh_config

ssh 進機器

常需要 ssh 進機器裡,會使用下列格式的語法:

ssh -i ~/.ssh/[your-keyfile] [username]@[private_ip]

如果服務越來越多,我們需要 ssh 進去的機器也變多了,當然我們不可能每次都去找到 IP 再來複製貼上,這樣不僅工作速度慢, content switch 太頻繁會讓人心情不太好。因為超新手的關係,神同事可憐可憐我,貼了凍仁大大的文章讓我學習設定,很容易就能使用 😆,趕緊做筆記下來,一起加速!

閱讀我吧!

記錄著關於初學 REACT 時,官方文件提及的主要概念,基本上都是文件上的內容,希望用自己是初心者的方式整理關於 JSX、生命週期、事件處理器、官方文件的觀念,可以更記得住。

1. Hello World

  • 應用程式基本組成:元素與組件。

ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);

往下瞭解其他概念之前,可以先閱讀「重新介紹 JavaScipt」,如果好幾年沒碰 JavaScript 的話,看一下「三個心法」。

閱讀我吧!

最近到了新的工作環境,公司配了一台新電腦,要從零來設置自己習慣的開發環境,所以除了安裝開發上很順手的工具以外,也額外想推薦大家來安裝能夠增加效率或是提升開發速度的軟體。這篇文章不會各別介紹每個工具詳細設定的流程,我選擇紀錄每個推薦的工具能夠為我解決什麼問題,等於是為了以後買新電腦又要重設開發環境做準備(?)

1. HomeBrew

HomeBrew 官網

安裝各式套件的管道。

安裝指令

閱讀我吧!

只要花 60 秒瞭解「無障礙網站」概念

Yes

Your Website + Accessibility = BFF —— Jenn Lukas

前言

「網站」是一種資訊傳播的方式,我們製作網站最普遍的目的是為了將「資訊」傳播出去。比如說現今大多數公司會建置自己的官方網站,去傳達公司理念、服務項目、聯絡方式…等等,這些都在資訊的涵蓋範圍。

閱讀我吧!

查看使用者搜尋什麼關鍵字

想提升 SEO ,所以之前就有把我的部落格網址提交到 Google Search Console,在後台能了解:

  1. 成效報表:網頁搜尋總點擊次數
  2. 使用者點擊錯誤的網址數量
  3. 使用者會搜尋什麼關鍵字而到你的部落格
  4. 使用者是從哪些國家搜尋
  5. 行動裝置可用性…等等

其中,蠻喜歡這幾個功能

  • 「索引 > 涵蓋範圍 > 排除』:能去看哪些是被檢索後但失效的。
  • 「連結」:查看外部連結,哪些最熱門,來你的部落格的人又是點擊了哪些外部連結。

閱讀我吧!

Snippet Generator

好,我習慣用的編輯器是 VSCODE,雖然有安裝一些 Snippets 擴充套件,讓我敲程式碼時比較不會因為打錯浪費時間 debug。但,真正開發時,創建結構時常常都要建立新檔案去切分 component,打幾乎同樣的程式碼有點煩,所以~找了一下該怎麼來設定自己要的程式碼片段。希望有幫助到你:)

一、設定 Setting.json

1-1. command + ,
1-2. 右上角 {},打開自定檔
1-3. 新增以下語法:

// 啟用自訂程式碼樣版
"editor.tabCompletion": "on",

// 如果你跟我一樣,有裝其他的 Snippet,可以將編輯器的權重提高
"editor.snippetSuggestions": "top",

閱讀我吧!

An Accessible Web

現在因為要製作政府的專案,需要符合國家通訊傳播委員會的無障礙規範,google 通用設計的概念,意圖去了解無障礙設計與通用設計的差異。後來看到大愛電視台,唐峰正老師的分享「通用設計」,發現:其實我們做的每一件事情都能增添溫度 - 同理心。

大家都知道,一個好的網站需要包含很多要素。其中有一個很大的 topic,「Accessible Web / Accessibility」,卻經常淪為建構網站時,有時間才去優化的事情,是一個 option 而不是 main feature。


Accessibility

閱讀我吧!

前端精神時光屋:蕃茄鐘

Demo(本頁開啟) | 我的設計稿

撰寫 CSS 的過程中,都會搭配 SASS 預處理器,之前一直有聽過 CSS IN JS,不知該如何寫起?剛好今年六角學院的前端精神時光屋切了第一週的版(蕃茄鐘),想說用 Vue 來練習 CSS Modules,其實是看到 Vue Loader 官方文件的介紹,動手做做看,再 google 大大們的文章吸收一下日月精華,整理在此。


CSS IN JS(JavaScript)

閱讀我吧!

Bulma

講到 CSS Framework,應該無人不知 Bootstrap。最近在 State of CSS 2019 的問卷結果中看到全球 CSS 使用數據,包含知名度、感興趣程度及使用滿意度,Bootstrap 的滿意度極低,而 Bulma 在使用滿意度算表現得很好,高達 74%,居於第二名,滿意度的第一名是 Taiwlind。CP 值好高,所以想來試試看 Bulma!

知名度:**50%**| (全部受測數 - 從沒聽過的人) / 全部受測數
感興趣:**41%**|有興趣 / (有興趣 + 沒興趣)
滿意度:**74%**|想再使用 / (想再使用 + 不想再使用)

本篇文章純粹紀錄如何使用,方便自己日後忘記可以快速上手,不會與其他 CSS Framework 進行比較唷。

Bulma 的 Responsive Web Design 跟 Bootstrap 4 一樣,也是利用 flexbox 來實現的,這篇記錄的 Bulma 版本是 0.7.5

閱讀我吧!

完全參考至 (千人活動的便當該如何準備?——Karl Lin)並加以整理,詳情可以連結至原作者文章。

什麼都行,最重要的是:絕對不能「食物中毒」!

辦活動訂午餐,可以不好吃,可以又貴份量又少吃不飽,可以剩一堆廚餘,但**絕對絕對不能食物中毒**。

避免食物中毒的措施

閱讀我吧!