Posts match “ link ” tag:

fix($parse): deprecate promise unwrapping and make it an opt-in

http://goo.gl/BbPJMr

This commit disables promise unwrapping and adds
$parseProvider.unwrapPromises() getter/setter api that allows developers
to turn the feature back on if needed.

從開始寫 Angular.js 就知道這項讓 template 與 promise 深深結合的功能,實際在 project 中使用的時候還真的是意外的相當... 用也不是不用也不是

1.2.0-rc3 終於被改成 opt-in 了...
預設是關閉,想要啟用的話可以

.config(['$parseProvider', function ($parseProvider) {
  $parseProvider.unwrapPromise(true);
}]);

angular-easyfb v0.2.0 released!

http://github.com/pc035860/angular-easyfb

  • AngularJS $q promise support
  • Fix minified code run-time error

0.2.0 加入了 $q promise 的支援,因此 增加了在 view 裡面使用的彈性

更新:AngularJS 1.2.0 之後將 promise 在 view 中自動 unwrap 的功能 deprecate 了,因此支援 promise 可能未來並不會增加在 view 裡面使用的彈性。

API demo (promise version)

git-source

https://github.com/pc035860/git-source

git-source shows off your github pages hosted source codes and examples.

最近終於完成的小專案,其實是為了寫 blog 特別設計的,希望能夠同時滿足四件事情

  • 程式碼上色
  • 能看結果
  • 可以編輯
  • 速度快

原本 hosting 有考慮過 Plunker,不過 Plunker 的穩定度跟速度實在有待加強,最後就決定採用 GitHub Pages

因此目前 blog 內的 內嵌 demo 都是透過 git-source 實現的。
更新:Blog 搬移到 logdown 之後還是改用 Plunker了。

AngularJS browser autofill workaround by using a directive

http://stackoverflow.com/questions/14965968/angularjs-browser-autofill-workaround-by-using-a-directive

Apparently this is a known issue with Angular and is currently open

app.directive('autoFillSync', function($timeout) {
   return {
      require: 'ngModel',
      link: function(scope, elem, attrs, ngModel) {
          var origVal = elem.val();
          $timeout(function () {
              var newVal = elem.val();
              if(ngModel.$pristine && origVal !== newVal) {
                  ngModel.$setViewValue(newVal);
              }
          }, 500);
      }
   }
});
<form name="myForm" ng-submit="login()">
   <label for="username">Username</label>
   <input type="text" id="username" name="username" ng-model="username" auto-fill-sync/><br/>
   <label for="password">Password</label>
   <input type="password" id="password" name="password" ng-model="password" auto-fill-sync/><br/>
   <button type="submit">Login</button>
</form>

我的想法

印象中以前查的時候好像還沒有丟出這個 auto-fill-sync 的 directive,所以這次真的碰到要解決這個問題,我很快的想到應該實驗一下 browser 的 autofill 是不是真的會在 <input> 裡 fill 進東西。

如果只是 AngularJS 那邊沒有抓到 autofill 的動作,應該就還算好解決,只要想辦法通知 AngularJS 就好了。

怕是怕 browser 是直到你確定要送出前夕才塞入 autofill 的值,這樣誰也幫不了我了~~~

$('#username').val();
// output: "我的帳號"

好加在實驗結果是後者 (呼)

於是我寫了一個自己的版本(因為沒有先看 stackoverflow 那篇...)

autocomplete-fix.js
app.directive('autocompleteFix', ['$timeout', '$log', function ($timeout, $log) {
  return {
    require: 'ngModel',
    restrict: 'A',
    link: function postLink(scope, iElm, iAttrs, ctrl) {
      /**
       * Delay for 450ms works for Chrome on OS X
       */
      var _delay = 450;

      if (iAttrs.autocompleteFix) {
        _delay = parseInt(iAttrs.autocompleteFix, 10);
      }

      $log.debug('delay', _delay);

      $timeout(function () {
        ctrl.$setViewValue(iElm.val());
      }, _delay);
    }
  };
}]);

有趣的地方是,_delay 在 300, 400 時,都會有機會沒通知到 AngularJS,所以我自己試的恰當值大約是 450(而 stackoverflow 上的是 500)。

感覺 stackoverflow 上的版本似乎考慮比較周到,所以就留個 gist 存著吧!

angular-easyfb v0.2.2 released!

https://github.com/pc035860/angular-easyfb/releases/tag/v0.2.2

  • setInitFunction() in configure block for initialization customization
  • Make $FB.Event.unsubscribe unsubscribes events properly

2014 的第一天修掉了一個可怕的 bug。

之前照著人家回報的 issue 做了一個 plunk,意外發現 $FB.Event.unsubscribe 竟然沒有作用(雖然那 issue 不是回報這個),查了 Facebook 的 doc 才發現 FB.Event.unsubscribe 需要帶上原本 call FB.Event.subscribe 時用的 listener function 才能夠順利運作。

老實說以目前的 implementation 要讓這件事可以 work 還蠻玄妙的,總之還是改好了 YA!
FB.Event 應該算是蠻常用到的 API ,出 bug 真是太可怕了...

ngQueue v0.1.0 released!

https://github.com/pc035860/ngQueue/releases/tag/v0.1.0

The very first release.

其實關於 ngQueue,早在 用 ngQueue 來完成需要排隊的非同步工作 就已經有介紹過用法了。不過當時在 GitHub 的 release 頁面 上並沒有 tag 任何一次的 release,所以這次才算是真正的第一次 release 啦~

本來是想說反正別人使用的需求也不大,我做 release 只是加上 GitHub tag 之後用 bower 對一些人的開發流程來說比較方便而已... 這次也就是因為我的下一個 module 有這個 ngQueue 的 dependency 需求,求個方便控管 dependency 之餘也就順便把 ngQueue release 好了。

當然也不是什麼都沒改就 release,這樣也太沒誠意。

為了下一個 module,ngQueue$queueFactory 新增了 deferred 這個只加了幾行 code 但其實非常厲害的選項(都我在講)。原本為了加這個選項還有新的 queue API remove(),我天花亂墜地寫了一群 code,最後全部砍光光了(爆頭)...

總之也請期待下一個 module!

angular-easyfb v0.3.0 released!

https://github.com/pc035860/angular-easyfb/releases/tag/v0.3.0

  • 可以自訂 FB JS SDK 的載入
  • 所有 Facebook social plugin 變成內建 directive,換句話說什麼都不用做就會 work
  • 承上,deprecate 之前為達相同功能所使用的 ezfbXfbml directive

加上 test 的二三事

其實推上 v0.3.0 的最後推手是加上了全部的 unit test spec... 來說說想加上 test 的原因吧!

angular-easyfb 這個 module 其實說來開發起來蠻麻煩的... 基本上從第一版寫完之後,後來我再繼續改都是用第一版的 demo plunk 做為依據,換掉其中載入在 GitHub Pages 的 script,改成載入另外的開發用版本。為什麼? 因為似乎在本地開 server 來做開發的話,Facebook JavaScript SDK 跑不起來(但老實說我沒有真的試過... 去 developer panel 裡改一些 domain 相關的設定可能會有機會吧)

不斷把程式碼貼來貼去的厭煩度終於在 v0.2.x 達到了巔峰。我知道寫了 test 之後,應該可以大大改善這情況,畢竟我不再需要載入真正的 SDK 來確保我所有的功能都可以正常運作(在 test 裡面 mock FB SDK 的 API 就好了),也就可以從來回剪貼程式碼於 Plunker 跟 Sublime Text 的循環中解脫了!

看著之前在 GitHub repo 的 README 裡面寫下的

TODO
  • test

心裡默默的覺得時機已經成熟,就差臨門一腳。詳見 AngularJS test 新手上路 (1) - 基本環境設定

自訂 SDK 載入,帶來新的可能

這版新增了可以自訂 SDK 載入的功能,讓這個 module 有了使用在 Apache Cordova (or Phonegap) 裡的可能。透過 Apache Cordova Facebook Plugin,只需要載入本地的 facebook-js-sdk.js 後再自訂一下觸發 FB.init() 的時機即可。

這個 Simple example 為例,與 AngularJS 及 angular-easyfb 結合之後要能夠順利 init 只需要加上

// angular config phase

.config(function ($FBProvider) {
  $FBProvider.setInitParams({
    appId: "{APP ID}", 
    nativeInterface: CDV.FB, 
    useCachedDialogs: false 
  });

  $FBProvider.setLoadSDKFunction(function ($document, $fbAsyncInit) {
    // 上面的 HTML 已經用 <script> 載入了 facebook-js-sdk.js,這邊就不用載了

    $document.on('deviceready', function () {
      $fbAsyncInit();
    });
  });
})

就可以順利運作了。 (相關 issue)

未來展望

angular-easyfb 作為一個讓 AngularJS 與 Facebook JavaScript SDK 合作更輕鬆且密切的 module,老實說 v0.3.0 已經接近它最後的樣貌了。現在整個 module 的彈性與方便性都好到一個不行!

結論,我真的不知道還要加什麼功能了... 所以這個 module 基本上應該會轉型為只修 bug 的狀態一直 maintain 下去,在這邊就先下台一鞠躬,謝謝收看。

angular-easyfb v0.3.1 released!

https://github.com/pc035860/angular-easyfb/releases/tag/v0.3.1

  • 內建的 social plugin directive 們支援套用動態字串參數

不知道算是「修 bug」還是「加 feature」

寫 directive 的給參數方式其實完全看到底想怎麼用,基本上我本人是沒有需要動態改參數的需求...
不過似乎有些使用者在切換 route path 之後就會發生參數沒帶到而無法顯示的情況(參數我想主要是 href 之類的),看來大家都很自然的把這些東西寫在 $scope.xxx 啊...

超難寫的 test

這個小改版,我大部分時間都花在寫 test 上了...
不過是餵個參數,竟然這麼難寫... 不知道是不是我自己想太多的關係

https://github.com/pc035860/angular-easyfb/blob/master/test/unit/social-plugin-directive.spec.js

angular-easyfb v1.0.0 released!

https://github.com/pc035860/angular-easyfb/releases/tag/v1.0.0

  • $FB service 改名為 ezfb
  • 一些 local 的 DI 也都改名了
    • $fbInitParams -> ezfbInitParams
    • $fbAsyncInit -> ezfbAsyncInit
    • $fbLocale -> ezfbLocale

就在前天,出現了一條 issue: Best practice: don't $-prefix this service

一看發現竟然是 Angular team 的 Brian Ford 大大...

原來是兩個多月以前有一個好心的路人覺得這 module 不錯用,經過自己的一番比較與研究之後(也有寫了自己的 FB service),似乎覺得可以把這個 module 擺到 Angular docs 裡面某處推薦的連結裡,於是他就發了一個 PR

Brian Ford 終於有一天審到這個 PR,就來 angular-easyfb 這邊逛了一下,發現我的 service 叫做 $FB,如果要擺入docs 推薦的連結似乎不妥,因為 Angular team 方面認為 $-prefixed 的 service 基本上是保留給 Angular native 的。

我以前不知道這回事,也看很多別的非 native module 用 $-prefixed 的 service 用得很過癮(例如 angularFireui-router),所以當年才會取了 $FB 這個直覺上跟原本的 FB 很搭的名字。

總之既然知道有 best practice 可以 follow,我就改一下好了。說不定還有機會擺進官方 docs 推薦連結 ㄆㄆ

另外因為是個 breaking change,版號直上 1.0.0 了。

angular-highlightjs v0.3.0 released!

https://github.com/pc035860/angular-highlightjs/releases/tag/v0.3.0

  • 新增 compile directive 選項
  • 更新 bower.json 裡的 dependency

這好像是我第一次發 angular-highlightjs 的更新文吼? 畢竟它一直都沒有被視為主力(?)

這版新增的 compile 功能本來我是偏向讓它保持獨立的,但加上最近一個 PR,已經有兩三個人發出類似的需求,所以我就順著 merge 這次的 PR,讓這個功能正式以 opt-in 的形式加進來。

Live example 請看 http://pc035860.github.io/angular-highlightjs/example/#/hljs-compile

angular-easyfb v1.1.0 released!

https://github.com/pc035860/angular-easyfb/releases/tag/v1.1.0

Facebook 似乎總是對開發者釋出善意,但我個人感覺實際上做的事情卻往往是不友善的...

幾個月前的 F8 大會上,Facebook 大動作想要讓他們的平台更迭系統化一點,終於推出了殺手級的改動 - platform versioning。於是很自然的也更新了一些原本 JavaScript SDK 的部分,這次 angular-easyfb 的更新基本上就是順應 Facebook 的野心...

續集: 週末長知識: Facebook Platform Versioning

Understanding Gutter Positions in Susy

http://www.zell-weekeat.com/susy-gutter-positions/

One question that was asked in the Susy survey I created a month ago really stood out to me. The question is “how to remove margins or paddings of the first and last column without using first-child and last-child in the grid system?”.

自從把某專案的 Susy 從 1 升到 2,我整個人像掉入無底洞... Susy 2 的 doc 真的不知道在寫什麼,感覺非常的沒有組織,跳來跳去的;偏偏 Susy 1 -> 2 又給人一種完全不認識它的感覺,我就這樣迷失在 Susy 2 的 doc 海裡了。

後來在網路上尋尋覓覓終於找到了幾篇好文(其實是尋覓了幾個月的期間,這些文章才被寫出來... Susy 2 太新了)。

這篇文章很詳盡的解釋了在 Susy 裡面各種 gutter 模式是怎麼一回事,當下讓我門戶洞開(?)。老實說我不知道 Susy 1 的年代有沒有分這些模式,但到了 Susy 2 它們就像天上掉下來一樣到處都是,而我卻一個都不認識。

結論

基本上可以整理成一張表。

名稱 種類 位置 方向 單位 注意搭配 nest 使用
after margin 外側 % no
before margin 外側 % no
split margin 外側 雙向 % yes
inside padding 內側 雙向 % yes
inside-static padding 內側 雙向 固定單位 yes

知道這些,除了在 Susy 2 裡面用爽爽之外,也可以讓你對目前各種實作 grid 的方法有更多的了解,進而使自己的 CSS 能力更上一層樓。

祝各位 Susy 2 使用愉快啦!

angular-easyfb v1.2.0 released!

https://github.com/pc035860/angular-easyfb/releases/tag/v1.2.0

我發現 Parse 的人好像真的不少。

最近一次被路人推薦之後,馬上下面對話就有人問 Parse,而且同一串還有兩個人在講。

之後應該會找時間來 setup 一下測試 Cordova / Parse 的環境,確定沒問題之後就穩定添加到 README 吧!