一點點哲學 × 實踐室

最近寫了一些 CSS 的排版練習，實在很肖想能做一些前端的動態效果。但在 CSS 和 JavaScript 功力都還很菜的情況下該怎麼達成願望呢？嗯......那就直接套用大神寫好的效果吧！🤪 這個 Animate.css 是寫 AC  My Hero Page 作業時發現的，最初其實是很想要試試看「點擊 "Save the World" 按鈕後鋼鐵人小圖晃動」這樣的效果。也確實有找到一個 JavaScript 寫法 ，其中模仿 QQ 聊天的抖動很類似我想要的，只是現在的功力真的菜到就連撿到現成的都還動不起來，胡亂研究一陣子後還是只能先暫時放棄。也因為這樣，這才發現了由 Daniel Eden 所開發的 Animate.css。 Animate.css 目前共有 16 個不同大主題的 CSS3 動畫效果 ，我們只需要事先在 html 的 <head> 中引入 Animate.css 的樣式檔，接著在想增加動畫效果的 html 標籤上設定相對應 class，即可輕輕鬆鬆擁有想要的動畫！ Step 1. 設定 Animate.css 樣式檔 <link rel = "stylesheet" type = "text/css" href = " https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css " /> Step 2. 設定相對應 class 例如我想要將 tada 這個效果加在鋼鐵人小圖上，就在 <img> 標籤加上如下 "animated infinite tada" 的 class。 < div class = "sticker" > <img class = "animated infinite tada" src= " https://i.imgur.com/WAtkuLN.png " alt= "Iron Man" > </ div > animated → 動畫 infinite → 無限循環，這...

Evernote 是我很常使用的筆記服務，撰寫 Blogger 文章時也都會先使用 Evernote 做為編輯器，完成文章內容後才轉貼至 Blogger。短文章使用這樣的流程沒有什麼問題，但一旦文章長度和圖片多起來時，這樣的程序反而讓寫 Blogger 變成一件相當累人的負擔。上網 Google 了一下，發現原來 Blogger 可以「透過電子郵件張貼文章」的功能上傳 Evernote 筆記使其成為 Blogger 的文章草稿。本文便是一篇「如何將 Blooger 和 Evernote 連結起來」的設定筆記，同時測試一下一些特殊格式（如程式碼區塊）在 Blogger 上的顯示狀況。 第一步需在 Blogger 後台啟用相關設定！ 設定 → 透過電子郵件張貼文章 將電子郵件另存成草稿，這裡需要設定一個 secreteWords（可以設定一組你記得住的英文字母+數字組合成的帳號），這個 secreteWords 將會和你的 Google 帳號組合成為日後 evernote 傳送到 Blogger 變成草稿的媒介。 接著打開想上傳到 Blogger 的 Evernote 筆記，點擊筆記中右上角的三個點、選擇電子郵件。 接著在收件人的地方填入剛才設定的那組郵件。 你的 Google 帳號.secreteWords@blogger.com 點擊傳送按鈕後，Blogger 後台文章列表若有出現的話就大~功~告~成！ 特殊格式的排版觀察 CSS3 box-sizing，寬度多少就是多少！排版不再被盒模型搞得頭暈腦脹。 那些年遺忘的行內元素 display: inline 較常使用在段落中特別內容的樣式設定。 今天 天氣真好，我看了這個 連結 獲得了很多知識。 → p 段落裡的「連結」二字可以使用 < a> 標籤 設定 URL。 → p 段落裡的「今天」二字可以使用 <span> 標籤 來設定文字顏色，span 不具任何語意，通常負責用來處裡行內元素的樣式。 那 p 段落就可以稱為 a 和 span 的容器。 行內元素無法設定寬高，因此我們可以在 css 加入 display: block 將其改成區塊元素。區塊元素也可以藉由這個方法改成行內元素 什麼時候會把行內改區塊元素？比如說設計按鈕的時候，讓點擊的部分不只局限於文字上，而是點擊被框起來的範圍都有效。 ...

這幾天在寫 JavaScript 的程式入門經典練習題 —「猜數字」，概念有點像是小時候會和朋友一起玩的「終極密碼」，不過印象中大家都是避免猜到指定數字，因為誰也不想「中獎後」自己變成大家的禮物 — 表演助興娛樂眾人。另外，過往玩終極密碼時，大家總得輪流當指定數字的莊家負責主持，如果會寫這支小遊戲那就沒有這問題了，所有計算與主持都可以交給程式，回回每個人都能同樂。But... 本人還無法生出前端介面讓用戶輸入數字，目前只練習到讓「電腦邊緣人自己猜數字」而且已覺得小有難度，還有非 ~ 常~ 遠的路要走阿。（握拳） 玩終極密碼時，大致上可分為兩種類型的玩家。一是天真派的佛系玩家，對於莊家提示都當耳邊風，只隨自己心意隨意喊數，不會細想或有更多安排。第二種則是小聰明玩家，運用莊家給的資訊，快速縮小猜數範圍，並一步步「幫助其他玩家」 步入陷阱之中 。（喂） 我們的練習也分成兩個階段，本次先記錄「佛系玩家」的練習，已將 AC 助教和同學針對我的程式碼之回饋整理如下： 第 4 行已宣告變數 guess = 0，while 迴圈內的 let guess 就不用再次宣告了，賦值即可。 第 14 行的 while 迴圈只在 guess 不等於 answer 的情況下執行，也就是 guess 等於 answer 時（第 20 行的 IF 條件式成立時）迴圈就會自動結束，而且外層也已宣告過 guess 因此不需要第 22 行的 break 來中斷迴圈。 → 之前一直搞不懂為何 break 和外層宣告的 guess 有關？文章寫著想著，過了很久以後終於想通！（ 到底為何不用 break？👉 筆記傳送門 ） 因為 PM 這個職務總是得要想很多  我習慣把盤到的所有狀況都列出來（第 25 行的 else if），不過 RD 通常在開發時最後一個會直接寫 else。 完整程式碼 Repl.it URL 接著是寫作業時產生的一些 碎碎念 筆記。 猜數字遊戲需求描述 莊家事先指定介於 1-100 之間的數字（這裡由邊緣人電腦隨機指定 XD） 佛系玩家們輪流開始猜數字（這裡繼續由邊緣人電腦一機分飾多角 XD） 玩家隨意喊出數字以後，莊家回答「太小了」或「太大了」。 直到玩家猜中，遊戲結束。 Pseudocode and Flowchart 開始寫程式！ Step 1. 設計變數 const a...

最近在學習新的技能，各種筆記整理將會是一個成敗關鍵，而且有時也會想要對 Blogger 做一點樣式上的調整。像是之前調整 Blogger 字型後，留言板就壞了；還有這個版型的精選文章不要在單篇文章出現等問題，花了好幾天 Google 到解法，但沒有好好寫筆記，現在就完全想不起來是動到什麼、調整了什麼才變好的（攤手）。Anyway，最近也感受到「發表部落格文章」和「寫在自己的本機 / 紙本筆記本」威力不同，明明本質上都是「筆記」，會有這種差異真的好神奇啊！ 總之這篇想來暖暖手、紀錄一下：撰寫 Blogger 文章時，怎樣才能在版面中顯示程式碼區塊？ — 我是照著 Wei 的 Blogger 閱讀記事：「 應用 Google Code Prettify在 blogger 中顯示程式 」這篇文章的引導完成任務的，筆記也是參照這篇文章所整理唷！ 筆記開始 預設程式碼區塊設置 在 Blogger 管理介面中，點擊「版面配置」。 在「版面配置」頁中的「側欄（底部）」點擊「新增小工具」後顯示 popup。 在 popup 上點擊加入「HTML / JavaScript」： 將顯示「HTML / JavaScript」checkbox 打勾。 標題的部分可不填。 內容的部分貼上 Google Code Prettify 的程式碼如下： <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"> 按下儲存後將這個版面配置排在「側欄（底部）」中的最後一個。 完成 🙂 接下來在 Blogger 寫文章時使用這個語法吧！ 先將想放在文內的程式碼複製起來貼到  HTML 編碼器中 。 接著將 Blogger 編輯器切換為 HTML 編輯模式，在文內貼上以下程式碼，並將 ... 中的內容換成 HTML 編碼器轉換過的內容。 <pre class="prettyprint linenums">...</pre> 文章應該有順利產生程式碼區塊了吧 :) 不喜歡預設程式碼區塊的白底？為什麼不是黑色背景的？ 在 Prettify Themes Gallery 選一個喜歡的樣式 如：想套用 Sunburst ...

9/10 我在希平方學習館裡發佈了一篇「玩轉文法」的學習心得，主要是想分享給同為對文法傷腦筋的學伴們在早鳥優惠結束前帶來一點參考資訊。我分享的內容不多，主要是 focus 在玩轉文法的教材，以及是否容易上手。 目前已闖關完成，覺得玩轉文法真的是能快速掌握文法架構相當好的數位教材，因此也記在這裡，提供給想快速掌握英文文法的人參考。 ▌關於希平方玩轉文法： 希平方玩轉文法 App 中有三座文法島，內容是由淺入深 的 12 個文法單元（從最純粹的名詞、動詞、時態，再到倒裝句、假設語氣等。）教學方式採動畫影片介紹概念，每個環節還會經過三種練習題、例句仿對話的口說練習強化印象。總共 85 堂課，採闖關遊戲方式進行。 背不起來怎麼辦？那就不要背呀！｜Image from 希平方玩轉文法 App