2020年1月18日 星期六

2020 總統/不分區立委 很負責任 實況開票 結果

因為

因為來不及當晚把結果上線,所以後續弄了快一個禮拜才終於弄完上線,處理一些資訊圖表,也順便把地圖的資料整理一下,下次要倒資料就不用再花太多時間了,看最近有時間來弄些跟地圖有關的圖表來玩好了。

2020 總統/不分區立委 很負責任 實況開票 結果

這次圖表除了立委當選那個席次分佈外都是自己刻的,那個應該也是刻的出來但有現成的可以用又不用錢就拿來用了,也看到好幾家媒體也都用做類似的圖表,應該這種對於席次分佈會讓人滿有感覺的吧。






之後再看有沒有機會做一些好玩的資訊圖表這樣。
Read more

2020年1月12日 星期日

2020 總統/不分區立委 很負責任 實況開票



今年總統跟立委大選幫公視做的網站,這幾次公視的網站都做得滿開心的,只是他們給我們的時間真的有夠少,這個拿到 mockup 的時候是這禮拜一的事,我這禮拜的課幾乎是滿的,所以都是晚上拼出來的,而這頁最後是在投票當天下午 4:00 前才完成所以功能上線,所以一上線就好幾個大 bug 被發現然後有被酸一下,不過我是很想說啊你們自己花一天的時間寫看看啊看能不能功能加上 RWD 都做好。

2020 總統/不分區立委 很負責任 實況開票

這次我很喜歡的是那個電視牆還有紀錄各家電視台開票的實況,以往應該很多人都有懷疑會不會有電視台灌過頭,這次雖然總統沒什麼懸念但還真的有抓到灌過頭的,有興趣可以拉一下總統選舉的時間軸看看各家媒體的開票實況。

而這次在公視跟著開票也很好玩,雖然我們是在那邊開發跟 debug 根本沒閒著就是了,四年一次加上選舉的結果是開心的,算是很棒的一次經驗。

開票結果頁面還有些功能沒弄好,應該這幾天再補上了,這陣子跟他們合作做資訊圖表還滿好玩的,不過希望下次不要給我們的時間都只有一點點啊。

另外這是手機版的頁面。
Read more

2020年1月6日 星期一

2010s 十年間的一年一照片

來回顧一下這十年,一年選一張代表照片

2010 Android 使用者介面設計比賽特別獎
記得只見面一兩次就把東西做出來還得獎這樣



2011 跟慈幼社學弟妹去龜山島玩
越大跟老朋友就越來越難相聚了呢




2012 讀研究所
這年最重要的就是去讀碩士了吧
\


2013 老二出生的一年



2014 第一年的制服大賞上新聞啦
蘋果日報採訪


2015 雞排妹制服寫真記者會
這年開始好玩的事變多了,選張比較有代表性的應該就是跟雞排妹合作吧
雞排妹制服年曆記者會



2016 跟統一多多合作的記者會
也因此認識了廣告公司的朋友,後來陸續有一些合作
多多秀制服



2017 開始在資策會講課
不過這年制服地圖活動也很多就是了
MMMH49



2018 跟教育部合作的制服大賞
還錄了電視節目這樣
P1088494


2019 因為玩撲街芒果上新聞,採訪我的畫面還是自己拍的所以這年就放影片吧
Read more

ES6 取得某個陣列或物件裡某個屬性的最大最小值

如果我們要在一個陣列或物件裡直接抓到最大或最小的值,用 ES6 寫法簡便很多,首先準備這樣的陣列和物件。

var arr = [1, 8, 3, 5];
var obj = [
    { own: 53, name: 'Jason' },
    { own: 50, name: 'Tom' },
    { own: 12, name: 'Susan' },
    { own: 41, name: 'Amy' }
];

直接用 Math.max(...arr) 就可以取得陣列裡最大的值,而要對物件裡某個屬性抓到最大的值,則是使用 Arrow function 來改寫 Array.map() 組出來的值就好,要取最小值則把 min 取代 max 就好:
let max=Math.max(...arr) //8
let most=Math.max(...obj.map(a => a.own))  //53
let min=Math.min(...arr) //8
let least=Math.min(...obj.map(a => a.own)) //12

真的是漂亮很多呢。
Read more

2020年1月4日 星期六

2020年1月3日 星期五

javascript 製作下拉式選單與捲軸連動效果



學生問的我寫出來也記錄一下,以往會做這種效果都是用點擊的,也因為有現成的 plugin 所以還沒完整自己寫過,這次有問到要跟下拉式選單怎麼互動我就來弄一下。

首先我下拉式選單跟內容都用 json 產生,利用的原理是抓到指定目標在頁面上的位置,然後讓頁面捲動過去,反之則是判斷現在捲動的位置,讓下拉式選單同步。

let years=[{
  year: 1910,
  id: "y1910"
},{
  year: 1920,
  id: "y1920"
},{
  year: 1930,
  id: "y1930"
}]

然後產出 UI 同時也記錄一下每個區塊的位置:
years.forEach(function(item, index){
  $("#select").append(``);
  $("body").append(`
${item.year}
`); item.scrollTop=$(".fullpage").eq(index).offset().top })

這邊我把 fullpage 在 css 設定高度為 100vh


然後抓下拉式選單選了後要捲動的位置
$("#select").change(function(){
  let target=$(this).val();
  let scrollTo=$(target).offset().top-30;
  $("html").animate({
    scrollTop: scrollTo
  }, 700)
  
})


另外則是在頁面捲動時,判斷目前捲動的位置去變換下拉式選單的內容:
$(window).scroll(function(){
  let scrollTop=$(this).scrollTop();
  let targetVal=years.filter(function(item, index, array){
    return scrollTop> (item.scrollTop - 40);
  })
  targetVal.reverse();
  let now="";
  if(targetVal.length>0){
    now="#"+targetVal[0].id;
  }
  $("#select").val(now)
  
})


完整程式碼在這邊

See the Pen
scroll-change
by deathhell (@deathhell)
on CodePen.


Read more

2020年1月1日 星期三

2019

一樣來總結一下 2019,上半年算是有點時間開發了一些想做的東西,但下半年就忙到一個不行,雖然自己想做的有點延遲,但忙的東西也有用到我之後想用的技術,就當賺錢養技術好了。

1. 多接了資策會微軟班的 jQuery,不過時數太短對他們的幫助好像頗有限,但反正課不是我安排的就先這樣吧。

2. 可惜的是制服大賞沒有辦成,本來想說把新功能弄完可以搭配著一起辦,但因為功能沒完整開發完就迎接超忙碌的下半年,所以就沒辦成了,今年再努力看看。

3. 因為拍 Pokemon GO 的 AR 照上了蘋果日報,聽那邊記者說這篇爆紅,後來還上了報紙跟電視新聞,而且新聞的畫面還是我自己拍的整個很嗨。

4. Youtube 今年訂閱人數成長到將近 10000 人,就更想拍些內容,所以買了一些工具包含燈和麥克風還有穩定器,2020 再來看有沒有辦法多拍點東西吧。

5. 制服地圖沒有正式活動,跟山怪拍了兩次制服女孩算是慰藉。

6. 課堂學生的反應還是很開心的事,今年開始有想訓練學生來做網站,反正不管結果如何能夠多跟幾個算聊得來的學生維持好點的關係也是不錯就是了。





7. 下半年跑去幫一家新創的忙,還有去公視幫忙,做的東西都滿有興趣的,但時間就整個不夠了,公視做了 921 跟選舉的專題網站算是很可以拿出來講的東西。

8. 因為做了淡海輕軌網站的案子所以帶了小夏去輕軌拍了一天的照片,也算是接下來計畫的一部分。

9. 其實這兩年來用有空擋的時間做了比賽模組、外拍模組跟活動功能,但都差一點點就完成了,希望 2020 年可以早點完成上線開發啊。

10. 下半年有一個案子雖然忙了很久,但一口氣自己刻了課程系統、購物系統還有串接了金流跟物流,也跟朋友談好來年的合作,希望 2020 可以好好的發展我想做的事啊。

Read more
Related Posts Plugin for WordPress, Blogger...