Month8 月 2016

ES6 筆記 – Getters 和 Setters

簡單的方法:

let person = {
    firstName: 'Jimmy',
    lastName: 'Huan',
    get fullName(){
        return this.firstName + ' ' + this.lastName;
    },
    set fullName(name){
        let words = name.split(' ');
        this.firstName = words[0] || '';
        this.lastName = words[1] || '';
    }
}

官方的方法:

let person = {
    firstName: 'Jimmy',
    lastName: 'Huan'
}

Object.defineProperty(person, 'fullName', {
    get: function(){
        return this.firstName + ' ' + this.lastName;
    },
    set: function(name) {
        var words = name.split(' ');
        this.firstName = words[0] || '';
        this.lastName = words[1] || '';
    }
});

console.log(person.fullName);// 'Jimmy Huan'
person.fullName = "Kobe Bryant"; //'Kobe Bryant'
console.log(person.firstName); // 'Kobe'
console.log(person.lastName); // 'Bryant'

Webpack 筆記:用 url-loader 載入字體和圖片

研究了 Webpack 一段時間,決定將 Webpack 從 React 獨立出來啦!
自己則是在實務上剛好遇到 CSS 檔內有使用 url() ,結果 Webpack 就會說他不知道怎麼處理這些 jpg 、 png 、 ttf 等等,像這樣:

Continue reading

動手玩 WebRTC – SkylinkJS

一、前言

WebRTC – 是 「Web Real-Time Communication」 的縮寫,是用於瀏覽器進行實時對話交流的 API ,但是如果直接用 WebRTC 原生的 API 工作的話,有很多複雜的工作要自己來,因此也有高手開發 WebRTC 相關的 Library ,而本次要介紹的就是 Temasys 公司的 SkylinkJS

*補充:simpleWebRTC – Library 之一

Continue reading

初學雜談:程式學習網站彙整與心得

 

今天不寫技術文章,來寫個隨意的心得好了,最近的技術文章越來越短了,畢竟技術相關的要一直整理資料,花費的時間相對來說比較長,而最近每個禮拜一到三下班後都有讀書會,讀書會一結束馬上躺床睡覺,只能說體虛真的是影響很大,當初沒有直接走上程式之路,也是自覺身體不適合長時間作業,不過轉念一想,要讓我連假日都能汲汲營營地學習的東西大概也只剩下寫程式了吧。

學習程式的網站不管是國內還國外都有如雨後春筍般不斷冒出,這點我對於前端框架與技術也有同樣的感覺(攤),這邊介紹的網站大部分都是英文,只有少部分是中文的學習內容,如果想研習程式相關課程,會英文與不會英文所能攝取的知識量大概就是天與地的差別這麼大,強烈建議各位多多學習英文,且年紀越輕學習外語的效果越佳,學習英文可不是只對程式有幫助,對於擴展人生視野也是非常重要的呢!

Continue reading

Sass 學習筆記(三) – Import 與 Mixins

Continue reading

Heroku 插件 – mLab – MongoDB 資料庫

之前有寫過一篇文章簡單介紹如何用 Heroku 部署 App ,現在要教各位如何使用 mLab – MongoDB 插件,這裡會用到一些 Mongoose 指令,如果不清楚的話,可以看一下我的 Mongoose 指令,有問題也歡迎留言。

順便跟各位推薦一個學習網站:TreeHouse

這個算是目前包月的線上學習網站內容最豐富的一個,這篇文章也是上了「Adding MongoDB to your Node App on Heroku」這堂課才生出來的,強烈推薦給各位,之後應該也會發一篇關於各種學習平台的使用心得的文章!

2020/05/05 更新

忽然發現這篇文章的點閱率也不低,所以來更新一下這一小段,並且讓文章內容更貼近更新後的Heroku介面,個人目前最推薦的學習網站是六角學院,這個網站從前端教學起家,現在開始慢慢地跨足後端及其他領域,售後服務也非常好,持續更新人才牆及線上直播等服務,而且又是全中文資源,推薦給各位!

Continue reading

Sass 學習筆記(二) – 變數

Sass 除了能讓我們寫巢狀結構外,還能夠定義變數,非常簡單,以下範例大家應該可以很快能理解 Sass 變數的用法!

// 不使用變數
.header a {
    color: blue;
}
.menu a {
    color: #666;
}
.nav a {
    color: blue;
}
.footer a{
    color: #666;
}

Continue reading