[ORID]_44-47

Published on:

Objective

關於這幾天的課程,你記得什麼?
要讓自己跨越不喜歡作品的這一坑,
就是要花更多時間自學前端設計知識。
克服「別人這麼牛逼,自己卻像個傻逼。」的情緒階段,
就是明天早上起來看Xdite直播回放然後執行,今天網路斷斷續續的。
Nic老師的技術直播也要好好做記錄。
這幾天完成了什麼?
終於交出了比較有自己意識的作品,
但只是勉強視覺上的。
今天寫好了這幾天來的參賽歷程。

Reflective

你要如何形容這幾天的情緒?
每創建一個功能就害怕失敗。
面對無法掌握又很想做好的前端設計感到無能為力,
最後只能回到能掌握住的技能與其妥協。
這幾天的高峰是什麼?
終於勉勉強強的完成了正式一版的作品。
幾乎結束了開賽以來的困難,雖然成果沒有極佳,
還有很多地方都需要調整。
但至少了卻一樁心事,可以好好往後端功能研究。
這幾天的低點是什麼?
覺得自己花了好多時間在不擅長的比賽上好無用,
也好奢侈。

Interpretive

我們這幾天學到了什麼?
該回到如何創造有價值的產品這個方向去思考比賽作品,
努力增加功能。
這幾天一個重要的領悟是什麼?
難事撐過去也就可以穩定心情好好檢討。

Decisional

我們會如何用一句話形容這幾天的工作
畢竟是自己不熟悉的,謝謝自己穩定心情好好走到了一半。
有哪些工作需要明天繼續努力?
看今晚直播回放,明天開始要把作息變得正常。
還有好多工作要做呢!

[工具方法]_Github已存在檔案的Repository重新命名

Published on:

Step 1

先至github倉庫下按設定後更改名字。

Step 2

改好後再複製改名後的SSH

Step 3

回到終端機輸入
git remote -v 列出目前專案的使用倉庫,
git remote set-url origin git@github.com:username/renamerepo.git指定現在想使用的倉庫位置,
git@github.com:username/renamerepo.git便是剛剛複製下的SSH位置,
之後可以再運行一次git remote -v確認目標倉庫是否正確。

[Job-Listing]_day4+5+6

Published on:

作業紀錄

第四個工作天決定要重新選用喜歡的bootswatch主題來起頭。
先裝好了bootswatch的superhero主題,就正式開始了作業。
(安裝方式:[工具方法]_Bootswatch to Ruby on Rails

  1. 更替git hub 的Repository名字。
    因為是重新用一個joblisting的練習檔案繼續進行,
    也已上傳過github repo,所以想要重新換成產品名稱。
    參考資料:Github:重命名仓库

  2. 在註冊端區分求職者與求才者
    參考資料:Devise进阶用法:修改注册页面、新增栏位

  3. 增加搜尋欄,並同時建立好job's city, company, category。
    參考資料:超全搜索功能笔记,图文并茂,不到1小时做完搜索功能

第五個工作天

  1. 篩選已投遞的工作
    參考資料:如何筛选出我已投递的工作

  2. 美化各個表格

第六個工作天

  1. 首頁初步配置,及設定首頁工作分類連結功能
    參考資料:Jimmy的github

  2. 改整體主題及字型顏色
    使用模板及工具:codepen 的 Navigation Animation
    google fonts + webgradients
    參考資料:WebGradients 收錄 180 種漸層背景免費下載,一鍵產生 CSS 3 語法
    CSS font-family 順序

  3. 設定footer


作業結果




後續功能執行目標

  1. 將所有表單重新設計設定一次。
  2. 註冊框美化。
  3. 管理員後台分區管制,只能進入自己的管理頁面。
  4. 求職者能蒐藏工作。

[工具方法]_使用google fonts一致化所有使用端的字型觀看效果+webgradients漸層工具

Published on:

當作品上傳至公共網絡空間後,
網頁使用的字型會因為各使用端沒有安裝該使用字型,而直接轉換成默認字型。
這樣就會讓原設計想傳達的視覺體驗有了些許落差。

為了避免這種情況,最佳的方式是使用網路上開源的字型css。
有使用過模板的同學一定會發現,模板附上的css檔上,
會有類似下圖程式碼。這便是指定抓取開源程式碼的路徑。


那該如何尋找類似開源字型呢?就google吧!

google大神集中提供了非常棒的工具: https://fonts.google.com/

進到網站後,你可以挑選喜歡的字型,
並且多加測試,看看是否符合需求。

有喜歡的話就按右上角的“+”號進行收藏,
點擊下方收藏欄就得到安裝以及如何使用的程式碼。

更可以針對某種字型中的特定型式,
來選取收藏產生安裝程式碼。

若想要細緻比較字體搭配狀況,
按下箭號,會跳至頁面給你測試看看。
更可以按下安裝符號,直接將字型安裝在自己的裝置中。

以上是非中文字型的找尋方法。那中文呢?

中文字目前放置於about頁面下的Early Access
進入後cmd+f,搜尋chinese就可以找到了,目前基本是有思源體

使用方式:

  • 進到我們常使用的scss檔案中,直接丟入@import。

  • 再來就是在每個class下去做調整。

這裡font-family系統抓取字型的習慣是,先抓第一個,
第一個沒有符合使用的話,再抓第二個,以此類推。

以我的作品為例,
我希望英文字型不要使用cwTeXYen,而是Tenor Sans
所以就將Tenor Sans寫在最前面。
(但其實是cwTeXYen中沒有英文字體的應用,如果在cwTeXYen中找不到英文,
系統會自己去尋找其他的英文默認字體,但絕對不會先找Tenor Sans。)

以下就是我一小段文字的搭配方式。



同場加映:超快速做出漸層背景。

點入https://webgradients.com/網站,
瀏覽挑選後點下Copy CSS

你就copy到像這樣的程式碼:
background-image: linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%);

再直接貼在想要執行的相對應處。

(註:-webkit-filter:opacity(.5) 是調整背景圖片透明度的語法,靠後面數值變化。

就得到一個漸層背景啦。


後記:

目前這應該是比較冷門也非必要的知識點,
但希望可以幫助到對字型在意的同學們。

參與大賽後才真切地發現前端設計實在是宇宙大的坑,
一般最基本的平面設計用繪圖軟體非常直覺,比起程式前端視覺操作,
根本就是擁有上帝意識般的呼風喚雨。
而在目前貧弱的css及html技能之下,
我連網站的基本排版、元素細微修改都是苦痛。

目前我的作品版本是真切掙扎了三天結果,還有很多地方都很不足,
(譬如最痛點就是目前版本的最適觀看口必須是13寸屏,😭)
但就先嘗試到這了,要更熟悉網站功能創建才是,
畢竟功能才是目前學習中最為重要的。夥伴們!一起繼續加油!

如果對你有幫助就給點關愛吧!
歡迎給予更多其他的建議及技術提點。(要學的真的好多好多。)

[ORID]_42+43

Published on:

Objective

關於今天的課程,你記得什麼?
從Jimmy那得知因為app/assets/stylesheets/application.scss
中的*= require_tree.
會使app/assets/stylesheets/下的所有scss檔全部套用。
看著Anndo演示在github找commit過程,終於知道正確方式是什麼XD,
之前都是亂按也找到,但下一次還是在亂按😓。
思涵分享的footer置底,交流論壇裡好像也有幾篇,再去看看。
完成了什麼?
第一次嘗試裝搜尋欄,還有還搞不清楚也沒成功的category。
第四次meetup,魔改作品小小更新。

Reflective

你要如何形容今天的情緒?
見到同學,一起分享心情分享教程,
受了同學們超級多的指導。
不管是情緒上還是學習上的問題,都得到非常大的紓解。
非常開心。
今天的高峰是什麼?
經由Jimmy及Nic助教協助,裝好bootswatch啦,
瞬間覺得今日已無憾!
今天的低點是什麼?
開始加一些新功能的時候,
發現把好多MVC的對應關係、及功能創建的方法遺忘,
導致一直有疏漏。
中間才停個幾天而已⋯⋯,
其實根本是因為完全沒刻進腦袋啊。

Interpretive

我們今天學到了什麼?
用commit步驟去查看代碼。
所以commit要好好寫啊,嗚。
今天一個重要的領悟是什麼?
良好的學習真的要靠夥伴!

Decisional

我們會如何用一句話形容今天的工作
總算又重新步上正確的軌道了。
有哪些工作需要明天繼續努力?
meetup心得,第三週週記。
用bootswatch建置好的模板從頭建立專案,把必要的功能一起寫入,
也是要重新連結腦內的學習記憶。(真的忘太多了。)

[工具方法]_Bootswatch to Ruby on Rails

Published on:

Bootswatch的使用讓我花費快六個小時的時間,
因為google到了一些錯誤的安裝方式,甚至google到在rails下難以順利運作的結果。
還好因為Jimmy同學以及Nic助教的協助,三分鐘內就安裝完畢!
至於先前google到的方法我就不詳述了,反正都是無效的XD。
希望未來藉由關鍵字找到這篇的小夥伴能得到我先前未瞬間得到的浮木,哈。


安裝步驟一:
前往Bootswatch挑選喜歡的全域主題後,
點選該主題上方的主題名稱下拉選單,選bootstrap.css用右鍵另存連結,
將檔案以bootstrap.scss檔案存檔。

安裝步驟二:
bootstrap.scss放置於app/assets/stylesheets下。


(成功畫面)

使用方法:
在主題頁面上,用滑鼠移至想使用的html樣式,
點選< >後就有html的樣板,複製樣式套用即可!


附上Jimmy同學整理的Bootstrap及素材工具,完全集大成啊!必看!

[ORID]_41

Published on:

Objective

關於今天的課程,你記得什麼?
要完成項目,先決定達成目標!
完成了什麼?
上完直播,也看完項目管理基礎篇的影片。
並完成心得。

Reflective

你要如何形容今天的情緒?
滿開心的得到項目管理中時間管理的方法。
今天的高峰是什麼?
完成兩篇心得。
今天的低點是什麼?
因為寫出心得,回想了一些不好的情緒。

Interpretive

我們今天學到了什麼?
先決定要在比賽花費的時間,然後訂出目標!
今天一個重要的領悟是什麼?
試著把大賽當工作在做,要面對觀看者對於產品的喜好,會學習更快。
不要又回到學生時期交作業時那種怕不被瞭解而無所謂成果的狀態。
(表現型人格的另一種極端,怕表現不好就不表現或隨便表現。)

Decisional

我們會如何用一句話形容今天的工作
藉由寫出心得整理了一下這幾天稍微起波瀾的情緒。
有哪些工作需要明天繼續努力?
照著新學習到的課程來好好實作大賽的項目管理。
準備好材料,繼續魔改。

[課程直播筆記心得]_项目管理基础篇:赢得冠军的关键是什么

Published on:

如何贏?請三選一。

  • 好點子
  • 編程快
  • 簡報強(這個!)

折衷作法

  • 完美ppt
  • 點子好
  • 代碼還行

Hackathon=十小時內打造牛逼產品
關鍵點

  • 很棒的投影片/台風好
  • 主辦想要的點子
  • 七小時內完成

需要有良好的時間管理概念

過去為什麼輸?

  • 政治錯誤
  • 時間不夠
  • BUG多

莫非定律:3倍出錯機率
只做一個主要功能:抓動態並且儲存(臉書駭客松作品內容)。
先部署好!

  • 抓出最有風險的步驟,先行實作
  • 補基礎
  • 中午前完成,午餐心理戰。

實作小功能

  • 填補細節
  • 找實際用戶測試
  • 防止預期外事件

完稿

  • landing page說明自己
  • 設計投影片
  • 排演五六次

獲勝關鍵

  • 投影片牛逼
  • 演示牛逼
  • 有意義的成品
  • 沒有BUG
  • 明天就可以上市

其他人如何搞砸

  • 花時間找隊友
  • 生太多IDEA,依依不捨才砍
  • 花五小時只做出兩個殘廢功能
  • 急急忙忙上線
  • 上台爛掉

(重點!)

  • 2/3時間做開發功能
    • part1: 地板作業-不做會死的功能
    • part2: 主幹功能
    • part3: 細小功能
  • 1/3時間預留測試
    • 擁有非常多時間排練

成功的定義是什麼?讓評審認知你產品的價值

  • 定義成功
  • 根據成功排定優先級
  • 保留測試時間
  • 先作主線、支線
  • 砍掉不必要功能
    • 只做must have, should have,有時間再做could have, nice to have。

項目是活的
因為很多會跟預想不同。
只能抓何謂「成功」。只做must have, should have。

如何破除時間安排?
時間不充裕時效率特別高,
寧願儲存時間揮霍在排練與測試。

任何有時間限制的如:生活、工作、考試、比賽⋯⋯等等,都需要這樣的時間管理!


心得

基礎項目管理要點就是:

  1. 先決定作業時間及終極成功目標
    確定項目時間後,只能用整個歷程的2/3時間來做。
    再決定必須達到的終極目標,定義怎樣才叫完成。

  2. 安排作業項目序位
    而將要完成的結果拆成各個目標,並安排優先順位。
    再來砍掉不必要功能,只做must have, should have,有時間再做could have, nice to have。

  3. 執行作業
    從不做會死的功能 ➔ 主幹功能 ➔ 細小功能,有時間再加功能。

  4. 必須擁有時間來排練及打磨
    用儲存來的1/3時間來排練與測試。