熱血漢誌 - 技術新鮮人到技術經理人，必懂的事

重要更新 Hermes Support Hermes 是一個針對 React Native 於 JavaScript 最佳化編譯處理的專案，此次主要更新在於 iOS 環境上的優化，至於 android … (要改得太多，就改天吧！ Inline Requires 之前都只能用 import 的方式，如果只是某個區塊要使用，總是會覺得記憶體無法妥善回收，這方面的優化，對於記憶體使用相信會有一定程度上的改善。 React 17 版本更新支援 其他很重要的更新 摒棄 Android API levels 16-20. （本產品不支援舊有手機，謝謝） Xcode 12 / CocoaPods 1.10 ，這點很重要 cocoapods 還沒有更新的朋友，請加速！ Node 12 為最低環境！（還在採用 v10 的朋友們，哭哭 … Flipper 更新到 0.75.1 參考文件 當然是官方網站 https://reactnative.dev/blog/2021/03/12/version-0.64

以前在寫前端的方式，會採取 html, css, js 分離的方式。這次活動邀請 Gias 來彰化師大與同學分享 Angular.js, 也比較了解 Angular 的概念，話說，把 HTML 當做一種 interface 的概念，其實還蠻不一樣的，就說法層面上會比較能夠說得過去，不過比對以前的寫法又覺得有點開倒車。 這邊是想要提出一件事情，這邊強調要快速開發，我們以一個 list link 為例子      <ul>           <li><a href="#">click</a></li>           <li><a href="#">click</a></li>           <li><a href="#">click</a></li>           <li><a href="#">click</a></li>      </ul> 如果加入 angular 的作法就會比較像底下的方式      <ul>           <li><a href="#" ng-click="click()">click</a></li>           <li><a href="#" ng-click="click()">click</a></li>           <li><a href="#" ng-click="click()"...

[].slice function on JavaScript 這幾天學習 CoffeeScript ，裡面有許多好玩的 syntax sugar ，當然 JavaScript 原生不會有這種產物，很明顯是沿用 Python, Ruby 語言的優雅之處。 裡面有個部分有個奇妙的使用方式，介紹如下， Coffee code awardMedals = (first, second, others...) -> gold = first silver = second rest = others 編譯後的 JavaScript code awardMedals = function() { var first, others, second; first = arguments[0], second = arguments[1], others = 3 <= arguments.length ? __slice.call(arguments, 2) : []; gold = first; silver = second; return rest = others; }; 裡面用到了有趣的 Array.slice ，用模擬的方式來實踐 others… 這樣的語法糖衣。 原理說明 原理是直接採用 Array.slice ，通常這個方法都是用在陣列裡面，不過在這邊是用來做傳參考參數的指定。 Array 這個原生 Object 可以直接使用 [] 來使用， others = (3 <= arguments.length) ? __slice.call(arguments, 2) : []; 從呼叫的方法 (function) 直接使用 arguments 取得所有帶進去 function 中的參數，傳進去的參數數目必需要大於限制，這邊是 3 ，接著才會將第三個以後傳入的參數做分割。 這邊使用了 call 這個方法，不太曉得的人可以，call 會直接執行此 slice 這個方法。 使用 call 這樣的方式執行，第一個傳遞進去的變數，就是 this ，需要告訴這個方法，呼叫者是誰 (傳說中的 JavaScript, what is this)。 後面就可以依...

source:  https://github.com/blog/968-say-hello-to-hubot hubot 機器人，可以自己寫script 代替人工作業，也可以用來做代替工人智慧產物。目前這個專案已經使用Coffee script 和node.js重新編寫，並且Open source於github，詳細內容就不多介紹 ，本篇主要教學如何安裝hubot 。 查了很久，對於這套專案的安裝說明實在很少，做個簡單教學紀錄。 安裝前提，以下幾個項目需要事先安裝 node.JS npm redis git coffee-script 安裝步驟 git clone https://github.com/github/hubot.git cd hubot bin/hubot 注意： 中間可能遇到某些module 尚未安裝，請使用npm install 安裝其他module執行指令 注意： 執行hubot 之前，請先切換到 hubot 目錄下 執行hubot 之前，請先啟動redis server  ->  redis-server 常用指令 hubot help 範例指令 搜尋圖片 hubot image me <query> 搜尋youtube hubot youtube me <query> 加載script 指令就是將整個script 專案下載之後，將src/scripts 的資料整個複製到hubot 裡面執行。 git clone https://github.com/github/hubot-scripts cd ~/hubot cp -r ~/hubot-scripts/src/scripts ~/hubot/src/scripts 參考網址 http://joeloughton.com/blog/uncategorized/installing-hubot-on-mac-os-x-10-7/ https://github.com/github/hubot-scripts

修改紀錄： 2011/10/18 目前nodeJS 已提供windows 執行版本，以及linux 自行編譯的步驟，程序上也都大為降低錯誤率，因此本篇文章將內容縮減為Linux、Windows 兩種版本安裝說明。 所有的nodeJS文章，通常一開始的簡介，之後就是環境安裝介紹，當然也不免俗的來介紹一下，隨著時間的演進與發展，在各種環境都已經有自己一套node repository ，這邊就介紹最基本的unix 底下compile，和windows 兩種方式 Linux 執行以下指令 git clone --depth 1 git://github.com/joyent/node.git ./configure make -j2 make install # 如果出現權限問題，再加上sudo 試試看 以下事項提醒，安裝前先行確認環境中已安裝： git gcc python 同時不要使用root權限安裝，否則會導致node module 因為權限問題，執行出現錯誤。 Windows http://nodejs.org/#download 至此網址，下載 node.exe  Windows executable ，下載完後預設放入C:\node\node.exe，同時設定環境變數： NODE_PATH="c:\node\" 設定完後可以將其他module 放置此目錄底下，執行node 程式時，將會引用此目錄中module，如不存在才會尋找相對路徑。

livereload 就跟名字一樣，『立即重新讀取』，主要用途為當編輯檔案修改後，會讓監聽頁面自動重新讀取。這樣子好處在於網站開發者不需要一直重新執行瀏覽器、編輯器切換，按下F5 重新讀取頁面等繁雜的手續。 本篇文章將講解livereload ，快速導覽！ livereload 原理說明請參考！ 安裝 需要先安裝 ruby, gem 參考ruby, rvm, gem 安裝文章 sudo gem install livereload

在 開發Facebook apps 的時候最常遇到的問題就是， Facebook API Key 只能綁定在某個Domain name底下，當然對於安全性考量，毫無疑問這是一定要的。但是對於我們開發需要使用開發機，又要測試的時候，就會造成困擾。 當然高手就是不一樣，會自己去設定HOSTS，更強一點的就自己再架設個DNS server來解決這個問題，可是對於我們這種半殘的碼農，以上都是屬於高手的世界，我們沒有辦法去體會。 別擔心，Fiddler為你解決這個問題!!! Fiddler 是MicroSoft利用.NET開發的軟體，可視為單機的network proxy，MicroSoft並沒有強力的推薦這套軟體，不過我們還是很清楚微軟其實很佛心來的。 下載並安裝Fiddler http://www.fiddler2.com/fiddler2/version.asp 請先安裝.NET以提供fiddler執行 安裝Fiddler 開啟Fiddler (Fiddler主畫面) 選擇Tools -> HOSTS，開啟對話框 設定HOST NAME (Enable 選項記得要勾起來) 設定Apache virtual host 內容請與對應Fiddler HOSTS 開啟網頁測試 最後， 測試Facebook API KEY和Fiddler 模擬的Domain name，完成!! 其他測試 惡搞 Fiddler HOSTS裡面輸入 tw.yahoo.com www.google.com 按下save 開啟瀏覽器輸入"www.google.com" 結語: 這樣的用法優勢在於，如果要改變任何網站狀態只需要開啟fiddler就可以測試，而且可以進行很多 黑暗手法 多樣性的測試，不需要架設太多服務，也不需要懂太多技巧，全部藉著fiddler就可以完成，讓許多前端的測試能夠更加流暢，當然對於開發人員更是一大福音!!!

前言 網路上有許多文章解說，什麼是前端工程師，我跟我朋友這樣解釋：『Html, CSS, javascript只要會這些，就可以了！』，許多人的第一個直覺就是『 做網站的 』。沒錯！我是做網站的，但我是做網站的前端！ （還是做網站的...） 因此興起個人寫一篇 人人都看得懂 ， 人人都可以輕鬆瞭解 什麼是網站前端工程師。 網站前端工程簡介 前(Front)端(end)工程(Engineer)，網站前端構成三要素 Html, CSS, Javascript ，以下以 美女 圖例解說。 Html + CSS +  Javascript =  素材來源 呈現的頁面及互動方式必須： 1. 容易讓使用者接受及使用 2. 與使用者互動良好 3. 增加使用者黏著度

YUI2 in 3 使用方法，以calendar widget 為例。 使用方法 Y.use('yui2-calendar', function (Y) { var YAHOO, _cal, id = 'calContent', //指定的id pageDate = '9/30/2010', //設定起始日期, 格式均為，月/日/年 minDate = '1/1/2010', //設定最小日期 maxDate = '12/30/2010'; //設定最大日期 YAHOO = Y.YUI2; _cal = new YAHOO.widget.Calendar( '_cal', id, { pagedate: pageDate, mindate: minDate, maxdate: maxDate } ); // 可以設定多國語系 _cal.cfg.setProperty("MONTHS_LONG", ["Jan", "Feb", "Mar", "Apr", "Mai", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"]); _cal.cfg.setProperty("WEEKDAYS_SHORT", ["S", "M", "D", "M", "D", "F", ...

因為喜歡css與html架構分離的簡潔，因此我幾乎沒有碰過 table 這個標籤。這次因為工作的關係，讓我跟table能有更深的接觸，以下是簡單的筆記。 以此表格為例： Table caption Title Title2 Content1 content2 基本表格型態： <table> <tr> <td>title1</td><td>title2</td> </tr> <tr> <td>1</td><td>2</td> </tr> </table> 但實際上可以變成： <table> <thead> <tr> <th>title1</th><th>title2</th> </tr> </thead> <tbody> <tr> <td>1</td><td>2</td> </tr> </tbody> </table> 兩者差異，除了加上 thead , tbody 之外，標題也改用 th 標籤表示。 Code似乎和範例有些差異，少了 標頭(caption) 和 欄位寬度(width) 。 <table> <caption>Table Caption</caption> <colgroup> <col class="c1"> <col class="c2"> <colgroup> <thead> ...

本篇文章轉貼自： 林中路 - JSDoc 與 phpDocumentor JSDoc @fileoverview :  檔案描述, 鷹置於檔案開始. @author : 作者. 我寫我, 你寫你. @version : 指定版本訊息. @see : 建立一個鏈結，指出相關於的類別描述文件. @require : 建立一個鏈結，指出必要的類別描述文件. @deprecated : @param : 參數說明. @argument : 引數說明. @return : 返回值說明. @throws : @exception : @private : @final : 常數值說明. @ignore : 忽略此函式. @class : 類別說明. @constructor : 初始建構式說明. @type : 返回值類型說明. @extends : 繼承說明. phpDocumentor @abstract : 抽象類型的標記說明. 使用範圍 method, class variable, class 等. @access : 標記可駐明關鍵字的存取權限：private、public 或 proteced. 使用範圍 class, function, var, define, module 等. @author : 作者. 我寫我, 你寫你. @category : @copyright : 版權註解, 使用範圍 class, function, var, define, module, use 等. @deprecated : 棄用標示, 使用範圍 class, function, var, define, module, constent, global, include 等. @example : 高亮顯示註解文字段落, @const : 標示定義的常量, 使用範圍 define. @final : 完成, 可用來標明此關鍵字為最終的完成狀態 (有些文件說可以禁止派生與修改, 這可能嗎?). 使用範圍 class, function, var 等. @filesource : 類似 example, 直接讀取當前解析的php文件的內容並顯示. @global : 全局變量. @ingore :...