【2019 排行榜協作】版主不會寫前端

【2019 排行榜協作】版主不會寫前端

【活動簡介】

是的!就如同標題,我覺得我不會寫程式,我也不會寫前端,所以希望大家教我寫程式、寫前端,哭哭 QQ

因為 2019 年快結束了,打算來弄個 2019 年的經典文章回顧、排行榜,可能會有「年度釣魚王」、「年度人氣王」之類的,所以一整個網頁頁面可以切出很多個區塊,有興趣參加的,就認領一個區塊下去實作,這是一個偏向前端的協作活動,不使用框架,單純網頁前端下去刻板。


【遊戲規則】

  1. 這個活動的模板頁面位於 /templates/leaderboard-2019.html 當中,有 標頭內容 兩個主題,你可以兩個都投稿,也可以擇一投稿,但區塊大小是不能變更的,其餘可以自由發揮。
  2. 網站內已經有使用了一些有趣的套件,像是 Animate.csscss-doodleCSShake ... 等等,所以不推薦再引用更多套件。
  3. 你可以引用圖片來讓你的作品更美觀,不過需要注意一下圖片的大小,建議總體不超過 1 MB 為主。
  4. 整個排行榜會有很多區塊,為了分隔這些區塊,背景圖片請不要讓它留空,也就是不要顯示星星 GIF 背景,例如你可以使用 css-doodle 來繪製背景。
  5. 活動結束後,會將整個頁面部署到正式機,如果可以的話,請您提供一下 GitHub 帳號,讓每個區塊都會顯示作者。

【板模】

標題

說明:這是排行榜的首頁內容,會簡要的顯示一些數據,其餘的自由發揮。

必要顯示資料:
	2019 年累積的文章數量 | Example: 2,000
	2019 年累積的社群留言 | Example: 50,000
	2019 年累積的按讚數量 | Example: 300,000
	2019 年累積的分享數量 | Example: 100,000

非必要,但可自由發揮的資料:
	2019 年累積的刪除文章數量 | Example: 200
	2019 年累積的被封鎖的人數 | Example: 50

年度最佳 xx 文章

說明:這個區塊會顯示 2019 年度全部社群平台的讚數加總起來,讚數累計最多的文章。

必要顯示資料:
	文章的編號                 | Example: #xxxx
	文章的連結                 | Example: https://kaobei.engineer/cards/show/xxxxx
	文章的圖片                 | Example: https://kaobei.engineer/...../image.jpeg
	文章的 Facebook 正式機 讚數 | Example: 2,222
	文章的 Facebook 測試機 讚數 | Example: 1,111
	文章的 Twitter 正式機 讚數  | Example: 555
	文章的 Plurk 正式機 讚數    | Example: 666
	文章的讚數總和              | Example: 4,554

非必要,但可自由發揮的資料:
	文章的內容 | Example: 【版主公告】我本來不會寫程式,但自從我參加這場活動之後,我覺得我好像稍微會寫程式了!

附註說明:圖片的部分,可以用以下圖片做為測試圖片
	./public/img/frontend/cards/cards.png
	./public/img/frontend/cards/cards-long.png
	./public/img/frontend/cards/cards-too-long.png

【投稿指南】

投稿的方式有兩種,分別是在 GitHub 上投稿,以及 Discord 上投稿。

  1. 直接在 GitHub - init-engineer/init.engineer-frontend-template: 這是一份純靠北工程師的前端模板,請好好愛護它,謝謝。 當中新增 issues 並且附上您完成的程式碼,告知參加 【我不會寫前端】 活動即可。
  2. 直接在 Discord 群組中的 #社群活動 類別當中的 #【我不會寫前端】 頻道投稿。

【活動獎項】


【活動期限】


【簡要問答】

Q:除了用原本 Bootstrap 排版,如果要寫額外 CSS 直接寫在下 template 下面嗎?還是要寫哪?

你提出一個很棒的問題,這邊我順便詳細解釋一下整個專案對於樣式的寫法。

如果單純只會 CSS 的話,直接在 <head> 當中加入 <style> 標籤,並在裡面開始撰寫 CSS 即可。

不過我會推薦學一下 SCSS,將其寫在 /resources/scss/frontend/pages/_leaderboard.scss 當中,並且透過 npm 或其他你所能學到的前端工具去編譯,相關的檔案例如 package.jsonwebpack.mix.js 專案都有預先寫好了,所以通常會自動編譯成 frontend.css 的壓縮檔案。

不過我不太建議直接寫 CSS,會建議直接寫 SCSS 就是了。

Q:請問我要怎麼認領【我不會寫前端】前端切版的模板?

你只要下載 INIT.ENGINEER 前端模板,去撰寫 /templates/leaderboard-2019.html 這份檔案即可,這次的模板總共有分兩種,分別是 【標題】 以及 【年度最佳 xx 文章】,投稿所需要的資料也都附在註解當中,要注意的是每個模板都要適應 電腦版 以及 手機版,這個部分已經先幫忙切好了。

Q:那麼這個活動是要寫什麼呢?

因為 2019 年快結束了,打算來弄個 2019 年的經典文章回顧、排行榜,可能會有「年度釣魚王」、「年度人氣王」之類的,所以一整個網頁頁面可以切出很多個區塊,有興趣參加的,就認領一個區塊下去實作,這是一個偏向前端的協作活動,不使用框架,單純網頁前端下去刻板,區塊總共有分成「標題」以及「年度最佳 xx 文章」,兩個區塊,每個區塊分別占滿螢幕長寬 vh 100、vw 100,所以你可以思考一下如何發揮。

Q:我不會 Laravel 或 PHP,是不是我就不能參加了?

並不是這樣的,其實我們有開放出簡易的前端板模,你不需要運行任何哩哩扣扣,你只需要把板模下載下來,然後丟到瀏覽器,就可以預覽畫面了,只要修改這份專案當中的 /templates/leaderboard-2019.html 檔案,就能夠輕鬆開發這次活動的介面。

GitHub - init-engineer/init.engineer-frontend-template: 這是一份純靠北工程師的前端模板,請好好愛護它,謝謝。

Q:我好想要參加,可是我不會設計該怎麼辦?

在這邊我們推薦一個地方叫做 The F2E,裡面有許多 UI 設計稿可以供你參考、找尋靈感。

The F2E - 前端修練精神時光屋 | 作品列表


【教學文】

感謝 FizzyElt 特別為此撰寫投稿教學文章。

如何投稿"純靠北工程師 我不會寫前端"活動


【活動好夥伴】

特別謝謝 PTT Java 版 特別贊助獎項,讓我們這場活動可以多了獎項可以發給大家。

PTT Java

特別謝謝 六角學院 特別贊助獎項,讓我們這場活動可以多了獎項可以發給大家。 HexSchool