網路語錄 - 12/03/2012 Mon

2012年12月3日 星期一
0 意見
Via INSIDE
    — Instagram創辦人Krieger談產品設計的八條原則

如何做出優秀的應用程式?「仔細觀察人們在生活中真正需要什麼,而不是瞎猜」— Krieger, Instagram 創始人
「要想真正建立某個產品來解決問題,你得比人們更了解他們自己。」— Krieger, Instagram 創始人



原來的文章列舉了 Krieger 覺得新創事業裡重要的八個項目。基於記憶方便,我用 PDCA 方式歸類了一下:

PLAN:
  1. 從舊有的經驗出發,想想過去你曾經思考過的,在這些領域你有更多的了解。
  2. 知道自己有麼不同之處,弄清為什麼現在是一個特殊的機會
  3. 與使用者保持順暢的溝通,不要花上數月埋頭做產品,卻不知道使用者要不要這個功能。

DO:
  1. 先畫草圖再寫程式
  2. 每週進步一點

CHECK:
  1. 在日常生活場景驗證功能。將某個功能解釋給酒吧裡的陌生人聽,如果對方聽不懂,那就表示需要簡化。不要只是找你周圍的技術咖測試新功能。
  2. 社群原型測試。沒必要一開始就寫出所有程式,你可以隱藏在幕後做人工測試。比如說初期可用人工方式手動測試新功能,如果會員反應不理想,那也不用寫程式實現新功能了,多棒。

ACTION:
  1. 知道何時該轉型。當發現已經沒有什麼問題可以解決,就是該轉型了。

你是一首安靜的詩 - takako 攝影


閱讀更多 »

網路語錄 - 11/30/2012 Fri

2012年11月30日 星期五
0 意見

via MYDESY



「人們將在前所未有的深度和廣度上自動地收集和利用數據,為社會科學的研究服務。」— 大衛·拉澤(David Lazer)美國哈佛大學學者

「人人網」從實踐中總結出以下值得重點關注的研究點:社會關係強度信息的絕對價值和相對價值新鮮事排序算法隱私性以及社會化搜索

群體智慧的典型應用是「維基百科」和「百度知道」。這些互聯網平台系統不僅幫助用戶相互溝通聯繫,更重要的是將用戶組織起來,發揮他們的群體智慧,以協作的方式一起創造、加工和分享知識。

我們對人們心理和情感的理解卻仍然可能處於十分幼稚的階段,僅僅依靠算法,遠遠還不能懂得人心。騰訊近期提供試用的新產品QQ圈子就是一個例子。這款產品能夠根據QQ後台的數據為他們實名推薦好友,但用戶卻被騰訊對他們社交網絡的精確了解所驚駭,乃至恐慌和憎惡。

KK在其所著的一書《失控》中曾提出,上傳全部的生活已經是人類不可阻擋的命運,但終究還是會有區分,哪些是用戶真正願意的,哪些是還不能讓人接受的。或者說,一切都還需要時間來讓人們適應。


 Photos from MYDESY

works from Studio Lindfors

via MYDESY

閱讀更多 »

jQuery 基本概念摘要

0 意見


Via Sixrevisions, impressivewebs


===============
     PART 1
===============

要徹底發揮 jQuery 的威力,通常你要對 CSS 有充足的了解。至少要了解

  • Type selectors
  • Class selectors
  • ID selectors
  • Descendant selectors
  • Child selectors
  • Attribute selectors
  • CSS specificity
  • The cascade & inheritance

※ 這些應該都是現代前端工程師所必備的知識


The jQuery wrapper

$("li a"); // 這個等同於下面的
jQuery("li a");

jQuery commands

// 加入淡出的特效
$("li a").fadeOut(); // 會淡出所有 li 內的連結
$("li a").fadeIn();  // 又淡入所有 li 內的連結

Chaining commands

$("li a").fadeOut().fadeIn();

Running code when the DOM is ready

// 有了(document).ready,程式碼會在 DOM tree 準備好時立刻執行,
// 而不會痴痴等待圖片或其他媒體全部下載完畢。
$(document).ready(function(){
  $("li a").fadeOut().fadeIn();
});

===============
     PART 2
===============

Selecting Elements in jQuery

$("div"); // selects all HTML div elements
$("#myElement"); // selects one HTML element with ID "myElement"
$(".myClass"); // selects HTML elements with class "myClass"
$("p#myElement"); // selects paragraph elements with ID "myElement"
$("ul li a.navigation"); // selects anchors with class "navigation" that are nested in list items

// jQuery 還支援使用 CSS selectors, 甚至是 CSS3。幾個例子:
$("p > a"); // selects anchors that are direct children of paragraphs
$("input[type=text]"); // selects inputs that have specified type
$("a:first"); // selects the first anchor on the page
$("p:odd"); // selects all odd numbered paragraphs
$("li:first-child"); // every list item that's first child in a list

// jQuery 還允許使用它自身定義的 selectors
$(":animated"); // selects elements currently being animated
$(":button"); // selects any button elements (inputs or buttons)
$(":radio"); // selects radio buttons
$(":checkbox"); // selects checkboxes
$(":checked"); // selects selected checkboxes or radio buttons
$(":header"); // selects header elements (h1, h2, h3, etc.)

Manipulating and Accessing CSS Class Names

// jQuery 讓你可以很輕易地增加、移除、和張合 CSS classes
$("div").addClass("content"); // adds class "content" to all <div> elements
$("div").removeClass("content"); // removes class "content" from all <div> elements
$("div").toggleClass("content"); // toggles the class "content" on all <div> elements (adds it if it doesn't exist, and removes it if it does)

// 還可以用 if 做檢查
if ($("#myElement").hasClass("content")) {
    // do something here
}

Manipulating CSS Styles with jQuery

// 輕易地將元素增添 CSS 樣式
$("p").css("width", "400px"); // adds a width to all paragraphs
$("#myElement").css("color", "blue") // makes text color blue on element #myElement
$("ul").css("border", "solid 1px #ccc") // adds a border to all lists

Adding, Removing, and Appending Elements and Content

// 取得 HTML 內容
var myElementHTML = $("#myElement").html(); // variable contains all HTML (including text) inside #myElement

// 倘若你只想取得裡頭的文字
var myElementHTML = $("#myElement").text(); // variable contains all text (excluding HTML) inside #myElement

// 利用同樣的語法,你也可以改變 HTML 內容
$("#myElement").html("<p>This is the new content.</p>"); // content inside #myElement will be replaced with that specified
$("#myElement").text("This is the new content."); // text content will be replaced with that specified

// append (添加)內容
$("#myElement").append("<p>This is the new content.</p>"); // keeps content intact, and adds the new content to the end
$("p").append("<p>This is the new content.</p>"); // add the same content to all paragraphs

// jQuery 還有 appendTo(), prepend(), prependTo(), before(), insertBefore(), after(), insertAfter() 等類似函式

Dealing with Events in jQuery

// 只有當連結被點選時,function() 裡的程式碼才會啟動
$("a").click(function() {
    // do something here
    // when any anchor is clicked
});
// 其他常見的 events 有:blur, focus, hover, keydown, load, mousemove, resize, scroll, submit, select

Showing and Hiding Elements with jQuery

$("#myElement").hide("slow", function() {
    // do something once the element is hidden
}
 
$("#myElement").show("fast", function() {
    // do something once the element is shown
}
 
$("#myElement").toggle(1000, function() {
    // do something once the element is shown/hidden
}
// 第一個參數指定速度(單位是千分之一秒),若無指定則立即發生。第二個指令是命令執行完後會呼叫的(optional)函式。

$("#myElement").fadeOut("slow", function() {
    // do something when fade out finished
}
 
$("#myElement").fadeIn("fast", function() {
    // do something when fade in finished
}

$("#myElement").fadeTo(2000, 0.4, function() {
    // do something when fade is finished
}
// 第二個參數,0.4,代表的是透明度(opacity)。

jQuery Animations and Effects

// 將元素 slide up or down
$("#myElement").slideDown("fast", function() {
    // do something when slide down is finished
}
 
$("#myElement").slideUp("slow", function() {
    // do something when slide up is finished
}
 
$("#myElement").slideToggle(1000, function() {
    // do something when slide up/down is finished
}

// 要讓一個元素有動畫效果,jQuery 透過改變 CSS 樣式以達成
$("#myElement").animate(
    {
        opacity: .3,
        width: "500px",
        height: "700px"
    }, 2000, function() {
        // optional callback after animation completes  
    }
);


更多

51+ Best of jQuery Tutorials and Examples (via noupe)
閱讀更多 »

網路語錄 - 11/29/2012 Thu

2012年11月29日 星期四
0 意見

Via MR JAMIE 

日本的社群與手機遊戲市場,最成功,也最被關注的兩家公司,當然是非 DeNA GREE 莫屬了。

DeNA 這家公司創辦於 1999 年,直到 2004 年切入手機電子商務與行動廣告業務,才算是找到了初步的商業模式。在 2009 年跨足社交遊戲,才一舉成為一家重量級的科技公司。一開始做的是跟遊戲完全沒有關係的拍賣網站。GREE 則是一家標準的「Web 2.0」公司,2004 年創業,一開始主打的就是手機社交,2010 年則飛速成長至 2,000 萬人,同年讓遊戲等第三方應用進駐,正式切入遊戲市場,並且在東京證交所掛牌。 ... 

綜觀全世界的線上遊戲市場,目前幾乎同時在經歷一場幾乎是史無前例的大型 Paradigm Shift (政權轉移),傳統的萬人連線用戶端遊戲日漸式微,取而代之的是以瀏覽器為主的網頁遊戲,以及以智慧手機、平板為主的 App 遊戲。

Via Mydesy
 「do what others won’t, to achieve what others don’t.」 做別人不做的,才能成就別人不能的。— Lesean Thomas,一個在南韓工作的美國動畫人 

Via TechOrange

每一家公司都提供遊戲化手段之後,同質化的體驗更加容易產生審美疲勞。... Garnter 的副總裁 Brian Burke 指出,遊戲化已經接近 Garnter 定義的炒作週期曲線的頂峰,離泡沫化的谷底期僅有一步之遙。

Garnter 認為,隨著遊戲化被許多企業廣泛採納,必須理解遊戲化的基礎原則,並掌握如何將其運用到 IT 組織的辦法,才有可能取得成功。Garnter 發現,遊戲化的目的設定為以下 3 個比較有利於企業受益:「改變行為」、「發展技能」以及「促進創新」。


古怪但有趣的午睡枕頭 XD
Designed by Kawamura Ganjavian (via dornob)


閱讀更多 »

網路語錄 - 11/28/2012 Wed

2012年11月28日 星期三
0 意見
今天閱讀網路世界時拾獲的語錄:

From INSIDE
  • 「無人駕駛汽車、智慧型眼鏡就是這樣的產品。「我們把它們當做已有優勢的延伸——汽車是地圖能力的延伸,同樣地,眼鏡是通訊和在地服務的延伸。」 — Peter Norvig, Google's director of research

  • 「9/11 是一個決定性的時刻。從那時候起,網路成為重大消息的來源。9/11 和卡崔娜颶風讓 Google 以新的視角看待自身的服務。人們開始問「紐爾良今天看起來和昨天有什麼不同?」。這使他們意識到時間將成為地圖服務的重要維度,「人們會要求更多的即時訊息」。」 — Peter Norvig, Google's director of research

  • 「認為智力最重要的態度其實是一種偏見...如果我們是大象,或許我們會希望得到超級力量,或者如果我們是獵豹,會希望獲得超級速度。有些社會問題非常困難,因為它們就是那個樣子,那不是我們夠聰明之後就可以解決的。」 — Peter Norvig, Google's director of research

中文字體海報系列 (via pick.mydesy)


閱讀更多 »

如何在 scrapy shell 裡正確顯示中文

2012年10月4日 星期四
0 意見
photo credit: molechaser

Scrapy shell 提供了很多互動方式,便於檢查網頁結構和設計的擷取規則究竟適當與否,是個非常方便的功能。然而要怎麼樣才能在 shell 裡看見中文字呢?答案很簡單 ─ 使用 print (或許加上 encode)

// 進入 scrapy shell
scrapy shell

// 以 yahoo 電影的排行榜網頁為例

>>> fetch("http://tw.movie.yahoo.com/chart.html")

2012-10-04 17:36:09+0800 [default] INFO: Spider opened
2012-10-04 17:36:09+0800 [default] DEBUG: Crawled (200) <GET http://tw.movie.yahoo.com/chart.html> (referer: None)
[s] Available Scrapy objects:
[s]   hxs        <HtmlXPathSelector xpath=None data=u'<html lang="zh-tw"><head><title>\u53f0\u5317\u7968\u623f\u699c - '>
[s]   item       {}
[s]   request    <GET http://tw.movie.yahoo.com/chart.html>
[s]   response   <200 http://tw.movie.yahoo.com/chart.html>
[s]   settings   <CrawlerSettings module=None>
[s]   spider     <BaseSpider 'default' at 0x1a72f90>
[s] Useful shortcuts:
[s]   shelp()           Shell help (print this help)
[s]   fetch(req_or_url) Fetch request (or URL) and update local objects
[s]   view(response)    View response in a browser


// 選取第一個 option 元素,抽出文字
>>> desc = hxs.select('//option/text()').extract()[0]

// 原始 unicode 格式
>>> desc
u'\u96fb\u5f71\u6642\u523b'

// 正確地顯示中文
>>> print desc
電影時刻

>>> print desc.encode('utf-8')
電影時刻

閱讀更多 »

crawler 軟體清單 & scrapy 的替代物

2012年9月29日 星期六
0 意見
photo credit: Ian Sane

Scrapy 是什麼?來看看官方的定義:

Scrapy is a fast high-level screen scraping and web crawling framework, used to crawl websites and extract structured data from their pages. It can be used for a wide range of purposes, from data mining to monitoring and automated testing.

哇嗚,它可以用來扒取網站,擷取網頁上結構化的資料。100% python,可以在 Linux, Windows, Mac 及 BSD 上運行,而且,有很詳盡的說明文件 ...嗯聽起來挺不賴的嘛。

然而我還是想知道有哪些可用的取代軟體,這時候有個聲音傳來了:

If you're looking for a python based crawler, Scrapy is probably your best bet.
─ Eric Wu

所以意思是 scrapy 已經非常好了是嗎?無論如何,Eric Wu 還真是個好心人,他在 Quora 留下了非常有用的爬蟲 (crawler) 清單,記錄用各式各樣語言寫成的爬蟲軟體。

Java
    Nutch => http://nutch.apache.org/
    Heritrix => https://webarchive.jira.com/wiki/display/Heritrix/Heritrix...
    WebSPHINX => http://www.cs.cmu.edu/~rcm/websphinx/

Python
    Scrapy => http://scrapy.org/
    Scrape.py => http://zesty.ca/scrape/
    HarvestMan => http://harvestmanontheweb.com/
    Mechanized (ported from the perl version) => http://wwwsearch.sourceforge.net/mechanize/

Ruby
    scRUBYt => https://github.com/scrubber/scrubyt
    Anemone => http://anemone.rubyforge.org/

Ruby: Not Really Crawlers but can be used like one
    hpricot => http://hpricot.com/
    Nokogiri => http://nokogiri.org/

PHP
    Snoopy => http://sourceforge.net/projects/snoopy/
    PHPCrawl => http://phpcrawl.cuab.de/

Erlang
    eBot => https://github.com/matteoredaelli/ebot


這個清單可以無窮地長下去,然而這是我很不樂見的 XD。因為 python 對我來說是個蠻美的語言,所以我會比較偏好先試用 python based 的軟體。你用過哪些爬蟲軟體呢?如果有推薦的爬蟲軟體,歡迎告訴筆者囉 :)
閱讀更多 »

在使用 Scrapy 之前: Scrapy 安裝方法

0 意見


在使用 Scrapy 之前,有一些套件必須先安裝好:

  1. Python 2.6 或 2.7
  2. OpenSSL (除了 Windows 之外的作業系統都有配備)
  3. pip easy_install python 套件管理


▄▄▄

Scrapy 官方的安裝指南在開頭處寫說用 pip 或 easy_install 皆可,然而我卻 pip 失敗了,因此我改成用 easy_install:

※ 筆者的使用環境是 Virtual Machine 上的 ubuntu 12.04 32-bit 作業系統

// 先安裝 easy_install pytohn 模組
sudo apt-get install python-setuptools
// 透過 easy_install 安裝 scrapy
sudo easy_install scrapy

好了,安裝完後,先查看一下版本
$scrapy version
Scrapy 0.14.4


※ (2012.12.04)
筆者之後在另外一台電腦安裝 Scrapy 時,遇到沒有 python.h 而導致安裝失敗的問題。網路上的朋友很好心地提供了非常簡單的解決辦法,安裝 python 的開發套件。只要在終端機前下指令:

sudo apt-get install python-dev

▄▄▄

恭喜夫人,賀喜老爺,scrapy 已經安裝好了。可以參考底下連結,邁向下一個關卡。


※ 使用 easy_install 的話,安裝好的scrapy 應是位於  /usr/local/lib/python2.6/dist-packages/Scrapy-0.14.4-py2.7.egg/
※ 若想要移除 scrapy,可以 rm -rf 該資料夾,或者使用 pip uninstall
閱讀更多 »

Hacker News 宗旨所教我的事

2012年9月14日 星期五
0 意見

底下是部分 Hacker News (HN) 歡迎頁面的中文翻譯:

...

這裡的文章不只是關於技術,因為好的電腦高手不僅僅是對技術感到好奇,而是擁有能夠「深度地好奇」的能力。

然而什麼事情是「深度有趣」的?我們認為,是那些能夠幫助人們更了解這個世界的事情。比方說,一則關於搶劫的故事,可能不怎麼「深度有趣」。但倘若這則搶劫是某個大事件的前兆,是一個隱藏的趨勢,那麼可能它就是「深度有趣」。

那,什麼東西是屬於「不深度有趣」的呢?關於名人的八卦、好笑或可愛的影音、圖片,宣傳黨派的政治文章等不是。如果這些東西被放上網站,它們會排擠真正「深度有趣」的事物,並且害它們漸漸被冷落。[註一]

至於什麼是好的評論呢?這得看一則評論能教給我們什麼。這有兩個層面,比如指出之前沒有被提過的思考方向,以及提供更多關於該主題的資訊。從個人的經驗來說,像是「XD」或「這蠢斃了!」等等評論則什麼也沒教我們。[註二]

...


註一:這令我想到有名的破窗理論 ─ 犯罪學裡的一個理論,由詹姆士·威爾遜(James Q. Wilson)及喬治·凱林(George L. Kelling)提出。此理論認為環境中的不良現象如果被放任存在,會誘使人們仿傚,甚至變本加厲 (維基百科)。

註二:讀了這裡,我終於弄懂了為什麼有些人的話聽來總是「沒有營養」,而有些人的話則聽來「很有想法」。重點是要講出沒有被提過、觀察過的新方向,或者提供更深入詳盡的資訊。你的身邊有多少人擁有這兩點能力?

註三:Hacker News 由 Paul Graham 於2007年2月建立,是一家關於電腦駭客和創業公司的社會化新聞網站。被台灣的 Inside 歸為「硬派」的資訊集散地。是網路創業者、網路觀察者與相關從業人員討論議題的重要場地,創業經歷以及新技術的分享是一大賣點。




筆者的想法

之所以會特別思考琢磨 HN 的歡迎頁面,是因為筆者對於 HN 所講的許多概念很有共鳴。我對於現下社群網站上廣泛流傳的「淺薄」資訊感到一點噁心,也對很多只會進行單向思考的人們開始感到厭煩。真實的世界會比一個人理解中的世界複雜,而越來越多往平均靠攏且膚淺的言論最終只會破壞人們對真實世界的理解。

所以,HN 的宗旨到底教了我什麼?我想,是一種對於「深度好奇」能力的追求,以及認識一個真正具有意義的評論,到底是指具備什麼條件。 HN 的主張看起來簡單明瞭,然而也因為它的簡單明瞭,令我感到很務實。我想一個人若是能夠武裝上這些能力,經常提出創意性的評論,那麼他所身處的「那個世界」必定和很多人所處的「世界」不同,而且,也很有可能過著非凡有趣的人生。當然這只是我的猜測,然而看看我心中尊敬的一些人士,比如安藤忠雄、茂呂美耶、Paul Graham 等等...我覺得這個猜測一點也不過分。




心想 HN 應該不會介意我把原文放在這裡分享,所以若你感到好奇,請看:



Welcome to Hacker News


Hacker News is a bit different from other community sites, so we'd appreciate it if you'd take a minute to read the site guidelines.

HN is an experiment. As a rule, a community site that becomes popular will decline in quality. Our hypothesis is that this is not inevitable—that by making a conscious effort to resist decline, we can keep it from happening.

We don't know whether this hypothesis is correct, but it has held up for a surprisingly long time already.

Essentially there are two rules here: don't post or upvote crap links, and don't be rude or dumb in comment threads.

A crap link is one that's only superficially interesting. Stories on HN don't have to be about hacking, because good hackers aren't only interested in hacking, but they do have to be deeply interesting.

What does "deeply interesting" mean? It means stuff that teaches you about the world. A story about a robbery, for example, would probably not be deeply interesting. But if this robbery was a sign of some bigger, underlying trend, then perhaps it could be.

The worst thing to post or upvote is something that's intensely but shallowly interesting. Gossip about famous people, funny or cute pictures or videos, partisan political articles, etc. If you let that sort of thing onto a news site, it will push aside the deeply interesting stuff, which tends to be quieter.

The most important principle on HN, though, is to make thoughtful comments. Thoughtful in both senses: both civil and substantial.

The test for substance is a lot like it is for links. Does your comment teach us anything? There are two ways to do that: by pointing out some consideration that hadn't previously been mentioned, and by giving more information about the topic, perhaps from personal experience. Whereas comments like "LOL!" or worse still, "That's retarded!" teach us nothing.

Empty comments can be ok if they're positive. There's nothing wrong with submitting a comment saying just "Thanks." What we especially discourage are comments that are empty and negative—comments that are mere name-calling.

Which brings us to the most important principle on HN: civility. Since long before the web, the anonymity of online conversation has lured people into being much ruder than they'd dare to be in person. So the principle here is not to say anything you wouldn't say face to face. This doesn't mean you can't disagree. But disagree without calling the other person names. If you're right, your argument will be more convincing without them.


閱讀更多 »

Ubuntu 安裝 MongoDB,測試資料庫連結

0 意見

在練習教學範例之前,必須先安裝 MongoDB。底下是在 Ubuntu 上安裝 MongoDB 的步驟:

步驟很簡單,只要鍵入:

sudo apt-get install mongodb

就是這麼簡單,你可以輸入 mongo 連結資料庫:

seyna@ubuntu:~/mongoDB$ mongo
MongoDB shell version: 2.0.4
connecting to: test
>

接著寫一個簡單的 javascript 程式,測試資料庫是否能順利連結。範例:
// db.js

var mongo = require('mongodb'),
  Server = mongo.Server,
  Db = mongo.Db;

var server = new Server('localhost', 27017, {auto_reconnect: true});
var db = new Db('exampleDb', server);


db.open(function(err, db) {
  if(!err) {
    console.log("We are connected");
  }
});

// 如果沒有安裝 mongo,則不會有任何輸出


在提示命令列輸入 node db.js 試試看:
seyna@ubuntu:~/mongoDB$ node db.js
"We are connected"


閱讀更多 »

你以及你的研究 ─ Richard Hamming

2012年9月2日 星期日
0 意見
「為什麼有些科學家能夠得到具有長遠影響的結果,而其他絕大多數都被遺忘了?」 Richard Hamming 時常問自己這個問題。

在具備高度競爭張力的 Bell 實驗室裡,人們相互競爭、相互學習模仿。綜合超過二十年以上的研究經驗, Richard 在 1986 年的一場演講裡分享了「如何從事屬於你個人的研究」。


當時的錄音帶被謄寫成了逐字稿,題名為 "You and Your Research" (pdf)

Richard Hamming 的這場演講給了我很多的啟發:尤其是在方法學構思題目個人特質等方面,在看了兩遍文稿後,讓我徹底反省過往的毛病,然後進而逐漸改善許多生活實務上的細節。

我利用 impress.js 製作了一個 browser-based 的簡報。

簡報 ─「你與你的研究」




為了便於(自己的)回顧,稍微將長達十幾頁的文字做幾點摘要:

迷思
|
|─ 優秀的科學成果是因為運氣好
|─ 要有好的腦袋才能有優秀的成果


具體的方法 (12原則)
|
|─ 轉變看問題的角度,或,稍微修改原先的問題
|─ 比別人多 10% 的努力
|─ 能夠忍受「不確定」以及「曖昧」狀態 (tolerate ambiguity)
|─ 問自己「什麼是重要的問題」
|─ 分配時間給「偉大的點子」
|─ 口袋裡有 10-20 個重要的問題
|─ 辦公室的門隨時敞開
|─ 發表可作為其他人研究基石的作品 (don't do isolated work)
|─ 不要埋怨工具
|─ 學會寫的好、寫的清楚
|─ 學會給予正式的演講
|─ 學會給予非正式的演講


人格特質
了解你的人格特質,了解你自己。比如,如果你不善於管理時間,因此而讓低效率影響研究的進展,請現在就學會時間管理,或者請專人幫助你。如果你時常因為邋遢的穿著而使別人不懂得尊重你的發言,請學會控制自尊心,下次穿著看起來更符合你專業的服裝出門。


Richard Hamming 是誰?
Richard Hamming 被視為數學與電腦科學領域中最偉大的人物之一,他的貢獻包括 Hamming window, Hamming numbers, Hamming distance ... 。他曾參與製作人類的第一顆原子彈;在 1968 年領取 Turing Award;在電腦科學領域裡擁有超過十本著作。


簡報 ─「你與你的研究」   "You and Your Research" (pdf)   
閱讀更多 »

在 blogger 上使用 syntaxHighlighter (含安裝)

2012年9月1日 星期六
0 意見

考慮到筆者之後可能張貼有關 R, perl, python, javascript, CSS, HTML 等語言的程式碼。為了方便閱讀起見,於是採用的似乎廣受歡迎的 syntaxHighliter。它是 Alex Gorbatchev 在2004年開發的開源碼客戶端 javascript。

安裝方式:
1. 在 Blogger 的後台,打開「設計」、「修改HTML」。
2. 輸入 CTRL+F 找到 </head>
3. 複製底下程式碼





















4. 將這些程式碼貼在 </head> 之前
5. 預覽結果,如果沒有錯誤,儲存離開。



基本使用方法


利用 <pre></pre> 標籤,將想要 highlight 的程式碼安插其中。利用 brush 指定對應的程式語言。請見此網頁參考更多的 brush 以及對應的別名 (aliases)。

<pre class="brush:js">
function helloWorld() {
  alert('Hello World!') ;
}
</pre>

進階使用方式


透過參數,我們可以調整畫面顯示的感覺。底下提供一些好用的參數:


摺疊程式碼
<pre class="brush: js; collapse: true">

</pre>

關閉超連結
<pre class="brush: js; auto-links: false">

</pre>

部分 highlight
<pre class="brush: plain; highlight: 2">

</pre>

<pre class="brush: plain; highlight: [1, 3]">

</pre>

gutter - 開啟/關閉行數的顯示(line number)
<pre class="brush: php; gutter: false;">

</pre>

關閉 toolbar (移除右邊的?小綠點)
<pre class="brush: php; toolbar: false;">

</pre>


HTML無法正確顯示 & 風格 styling


<pre class="brush:html"></pre> 之間的 HTML 無法正確地顯示在 blogger 上。解決問題的方法之一是使用 Format My Source Code for Blogging 等線上工具,用跳脫字元取代使 blogger 解譯錯誤的部分。再將轉出的編碼資料改由 SyntaxHighlighter 處理。步驟如下:

  1. 不要勾選「Embed Stylesheet」選項進行「Format Text」
  2. <pre class="source-code"> 標籤替換成 <pre class="brush: html">
  3. 移除前後的 <code></code> 標籤(如果沒有移除, 則 <code>< /code> 標籤會一併出現在畫面上)。


關於佈景主題,syntaxHighlighter 目前提供了七種,而筆者比較喜歡 RDark theme,於是將它取代了原來的 shThemeDefault.css。想參考更多佈景主題可以見此網頁

方法是將當初安裝在 blogger 上的這行程式碼
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>

換成:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeRDark.css' rel='stylesheet' type='text/css'/>




相關閱讀
玩物尚誌 ─ Blogger加掛SyntaxHighlighter,顯示漂亮的彩色程式碼
cyberack ─ Adding a Syntax Highlighter to your Blogger blog

閱讀更多 »
 

Categories

 

© 2010 取火之路, Design by DzigNine
In collaboration with Breaking News, Trucks, SUV