二月 24, 2015
» Single line of style to bring (keypart of) f.lux on FirefoxOS

Claim: this exercise is for experiment, not for product.


According to wikipedia, f.lux adjusts a computer display's color temperature according to its location and time of day. I always use it on my Mac to make my eyes more comfortable at night.

So, the topic is about if we can bring that experience on Firefox OS.
Adjust display's color temperature generally is a system specific issue. But actually it can be categorized as an CSS trick if we like to make it on web (a gist to mimic the f.lux effect).

To quick experiment if it doable or not, the validation steps are:

1. open the WebIDE on Firefox Developer Edition
2. download and open emulator (I choose v2.2) on WebIDE.
3. To debug system app, choose `System` from top left selector in WebIDE.
4. once connected,  select the `html` tag and add style
`filter: brightness(0.8) sepia(0.9);` into the element.



The live view changed to f.lux like color temperature.



So it works!

To make it persistent on real device, edit `gaia/apps/system/style/system/system.css`, add above style into `html` tag. Run `make reset-gaia` then you have the style applied on device.

What's Next


The above experiment will change your device's color temperature permanently, which is not what f.lux do. To make it as option, you can add an option in settings > developer panel and add a observer in system to dynamically add such style into system html tag.

If you feel the strong desire to have such feature happen on Firefox OS device, fire a bug on bugzilla.

一月 13, 2014
» template.js

From Template library from Messages app now available in shared/js

Rick Waldron post the new template.js library that works originally for gaia/cummunication apps. Now it's widely adopted for other apps such as settings.

The template.js library is pretty small and stable for general use. just copy it and put in your library to use it.

The syntax is no magic, just inject an single id tag into main html file. And the 'template' is just the commented code. It allows general parameters replacement and prevent innerHTML pollution.

Here's the post from Rick:


Using the Template library is simple:

1. Add <script src="shared/js/template.js"></script> to your index.html

2. Create your template as a comment node inside of any type of element,
place in index.html:

  <span id="emphasis-template">
  <!-- <${tag}>${value}</${tag}> -->
  </span>

  <span id="greeting-template">
  <!-- Hello ${name}! -->
  </span>

3. In your JavaScript code, initialize an instance of this template:

  // Template will accept either an id string or a node!
  var emphasis = new Template('emphasis-template');
  var greeting = new Template(document.getElementById('greeting-template'));


4. Generate a safe markup string with specified values by calling the `interpolate` method of the template object:

  greeting.interpolate({
    name: 'World'
  });

  // Hello World!

Simple partial nesting is supported, just tell `interpolate` which properties are "safe":

  var name = emphasis.interpolate({
    tag: 'b',
    value: 'World'
  });

  // we know that the value of 'name' has already been escaped :)
  greeting.interpolate({ name: name }, { safe: ['name'] });

  // Hello <b>World</b>!


Markup strings produced by Template are innerHTML safe (unless explicitly
marked otherwise, as shown above):

  greeting.interpolate({
    name: '<script>alert("hi!")' + '</script>'
  });

  // &lt;script&gt;alert(&quot;hi!&quot;)&lt;/script&gt;


Template instances disallow modification of the template string once the
object is initialized, but the toString() method will return the raw
template as a string:

  greeting.toString();

  // Hello ${name}!

  emphasis.toString();

  // <${tag}>${value}</${tag}>



It's important to remember that Template and WebComponent are not at odds
with each other and exist to serve to different purposes; read more here:
https://bugzilla.mozilla.org/show_bug.cgi?id=908950#c6

三月 31, 2013
» HTML5的基本格式


如果你好一陣子沒有關心網頁相關技術,那麼看到下面的code, 可能會揉揉眼睛說:這樣也能跑?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset=utf-8>
    <title>page title</title>
    <!--<link href="style.css" rel="stylesheet"></link>-->
    <!--<script src="script.js"></script>-->
    <!--<style></style>-->
</head>
<body>
  <!-- content -->
<!--<script type="text/javascript"></script>-->
</body>
</html> 
只要有瀏覽器,大家都可以試著寫網頁。
我們分行來看看上面的網頁程式碼:

主要架構


 <!DOCTYPE html>

HTML5的格式宣告,注意「DOCTYPE」要用大寫才有向前相容喔(請參考HTML5 Hacks 1)。


<html lang="en">
</html>

HTML主標籤,所有HTML頁面的內容都要放在裡面。

Header參數

<head></head>

HTML檔案標頭, 一些頁面相關資訊。

<body></body>

HTML內容, 顯示給使用者看的頁面內容。

Header參數


以下是放在header標籤中的參數:

<meta charset=utf-8>

聲明這個網頁是以UTF-8格式編碼,多數瀏覽器只在前512 bytes查看文字編碼格式,所以這個標籤務必放在Header標籤的最前頭。


<title>page title</title>

頁面標題,通常會顯示在瀏覽器標籤頁上。


<link href="style.css" rel="stylesheet"></link>
<script src="script.js"></script>

透過 link 和 script 標籤,我們可以連結到其他CSS或Javascript檔案。


 <style></style>

style標籤裡可以放CSS定義。



Body參數


以下是放在body標籤中的參數:


<!-- content -->

HTML的註解標籤,在「<!--」和「-->」標籤之間的內容不做解析。


<script type="text/javascript"></script>

當瀏覽器讀取HTML頁面的時候,會先將headers標籤中定義的CSS或Javascript檔案載入後,才會顯示網頁。
因此因為效能的緣故,現在新的網頁寫法建議將比較不急著在載入網頁時立即執行的 script 標籤,都放在「body」標籤中。

上面提到的HTML5基本格式只有講到「語義」(Semantic)方面的改進,而所謂的HTML5其實是包含HTML、CSS、Javascript、瀏覽器的全方位改進,更多的資訊可參考 Mozilla Developer Network

參考: A Minimal HTML Document

biggo.com.tw

A Django site.