以下是這次去 CTJS，所選出來，一些我較有興趣的slide。 Redux 設計概念與實戰 DMoon: http://goo.gl/K2y8ck Node.js 與 Bot Simon: http://slides.com/simonsun2001/bots/embed React Native intro chentsulin: https://chentsulin.github.io/react-native-intro 十分鐘寫一個前端測試 alin： CTJS 投影片 https://github.com/alincode/ctjs-webdriverio-sandbox 快快樂樂5分鐘學react zet： http://goo.gl/Cmfkmk
簡介 上次介紹了基本的html tag，這次來講一下，html中很重要的巢狀結構。如果有仔細看的話，應該會發現html是一層一層包住的，最外層是html tag，再來有body tag，還有我們寫的tag，包括h1 ~ h6之類的。 這次，我們要介紹兩個很重要的東西，分別是 div 和 span tag。這兩個 tag 在 html 之中很常出現，並清楚的標示我們的html結構。要學好網頁前端，一定要搞清楚他們的功能和差異性。 開始囉！ 尿布和啤酒，是否該放一起賣？ 談到很紅的big data，就不得不介紹一個經典的例子——尿布和啤酒。美國的零售業者沃爾瑪，裡頭的資料科學家在分析購買數據時，發現了一個很重要的事實。每到星期五晚上，尿布和啤酒的銷售量有正向關，而且同時提升。 蛤？尿布和啤酒？這個組合也太奇怪了吧。 你沒聽錯，就是尿布和啤酒。 該不會是星期五會定期舉行什麼奇怪的尿布啤酒party吧。 Nice Guess! 不過有其它原因，我們繼續聽下去。 這實在是不太尋常。經過調查之後，才知道，原來星期五晚上，爸爸們會到超市們幫baby買尿布，然後順便買些啤酒，回家看球賽。於是，沃爾瑪調整銷售策略，把啤酒和尿布放在同一區，果不其然，尿布和啤酒的銷量都大大的提升。 所以，這和我們的網頁架構有什麼關係？ 當然我們這篇不是要講大數據多麼威猛。只是你是否在寫網頁時，發現常常會有某些東西，像是啤酒和尿布一樣，該被放在一起的？譬如一篇文章，便含有標題、副標題，文章預覽、日期……。若是如此，那我們就用個div把他給包起來，他們就算是一個區塊。請看下圖，每一個紅色包起來的範圍，都算是一個區塊。再仔細看一下左邊的文章，還可以發現大區塊裡有很多小區塊，分別包含標題、副標題，文章預覽、日期，這也是div包起來的喔。 把它包成區塊有什麼好處呢？好處一，設定css方便。如果我們要為這個區塊設定樣式，那我們只要在這個div區塊加上css即可，其它的地方就不會被動到。如果我們一次要給很多類似的區塊設定個樣式，設個…
簡介 上一篇簡單介紹完編輯器和html的tag，這篇就要來詳細介紹各種tag囉。說到html裡的每個tag，都有它存在的意義和目的。此外，這些tag可說是琳琅滿目，基本上沒有人可以全部認得喔！ 那如果tag有這麼多種的話，我們要怎麼學呢？當然是挑出一些重要的、常見的tag，解釋它的使用時機和意義，其它的部分，就交給個人造化，需要的時候再去查囉。網路上有各式各樣的html5 cheat sheet可以參考，印下來，閒瑕時拿來蓋泡麵也是很不錯的XD 開始囉！ 迎合老闆很重要 還記得你實驗室的老闆嗎？他平常的興趣是喝咖啡，上課時喝咖啡、下課時也喝咖啡。要罵你們這些研究生不長進之前，也是先喝一口咖啡漱口。此外，關於他最喜歡的程式語言，也是叫咖啡。但除了喝咖啡之外，他還有一個副業是賣咖啡。 什麼？賣咖啡？他不是教授嗎？幹麻去賣咖啡？ 博士都可以賣雞排了，為什麼教授不能賣咖啡？說到這個，請給我一杯「教授咖啡」，我想喝喝看好不好喝。 這天你老闆走到你的座位，拍了你的肩膀。你覺得很奇怪，明明我今天準時早上九點到實驗室啊，難不成要罵我那天慶祝生日沒找他不成？正當你下半身發軟，想著要怎麼解釋的時候，老闆開口了： 可以幫我做一個網頁嗎？我想要向外行銷我的「教授咖啡」。 喔喔，當然可以啊！ 即便有千百個不願意，但為了少幫他倒365天的咖啡，你還是硬著頭皮接下了這份差事，即便你沒有寫過任何的網頁。 想想看，你的網頁想要顯示什麼？ 當然是標題囉！進一個網站的第一眼，一定是上方斗大的標題，這標題下的好不好，決定你87%的生意。我想你要賣杯咖啡的話，你的標題一定是跟咖啡有關，不會是什麼修理紗窗換玻璃之類的。 說到標題的話，你就需要一個h1 tag。除了h1 tag外，html 還提供我們6個大小的標題，分別是h1 h2 h3 h4 h5 h6，由大到小。每個瀏覽器顯示他絕對大小的部分，有可能會不一樣，但一般來說，都是h1>h2>h3>h4>h5>h6。所以囉，如果你要加上一個副標題的話，你就可以選擇使用h2。 除了標題之外，你還會需要一段內文，這時候，我們就需要一個p tag，代表的是paragraph。看到了嗎？這就是你第一步的網頁雛形。 http://codepen.io/noootown/pen/KzjNOP 那，我可不可以把h6拿來當內文呢？ 當然可以囉，高興的話，連h1都可以拿來當內文。不過為了可讀性和瀏覽器SEO（搜尋排名），我們通常不會這麼做的。h1到h6和p都是一把刀，但不同種的刀適合切不一樣的東西，就是這個概念。…
好不容易寫到了網頁脈絡的最後一篇了，可喜可賀！還記得上次我們提到了javascript的發展史，看他怎麼和jscript競爭，爾後發展成為網頁前端通用的唯一語言。隨著網頁越來越發達，又發展出了framework，來幫助我們快速以及有效率的開發網頁。
而framework的出現，代表網頁開始複雜化，也標誌著一個前端和後端的分野，因為我們的網頁已經漸漸複雜到不是一個人能專精所有事的階段了（當然還是有神人級的人物，南京通北京，前端通後端，但畢竟這種人在少數）。
今天要來介紹一下，在這個分野之後，到底出現了什麼樣新潮的前端技術，有感到一絲興奮嗎？
開始囉！
我是沒一村，專長和興趣是程式、主動投資、科技商業模式。可以參考我的書單和比較熱門的文章：
上次從靜態網頁講到了動態網頁，講到了MVC，也講到了REST API是什麼，這些都是網頁發展的過程中所留下來的精華。做網頁的時候，我們可以選擇是否依照這些原則。照著走的好處就是你已經站在巨人的肩膀上（你瞧，巨人肩膀上擠滿了人），做起事來會更加的輕鬆。而集合並規範這些原則的，就叫做Framework（等一下會提到）。
開始囉！
我是沒一村，專長和興趣是程式、主動投資、科技商業模式。可以參考我的書單和比較熱門的文章：
上次介紹完了前端和後端在做什麼，這次來講一下網頁開發這一行的演進歷史，也順便帶一些網頁開發常會聽到的名詞和基本概念。
網頁開發這一行不是一蹴可幾的，而是前人流著鮮血汗水發展出來的。現在所寫的每一行code，在十年後，都會腐爛而不能用。話雖如此，這些腐爛的程式碼，都是孕育下一代網頁開發的養分。了解這些歷史，就能更加了解前後端是在什麼情況下做分支的，以及它們形成的必然性。
開始囉！
我是沒一村，專長和興趣是程式、主動投資、科技商業模式。可以參考我的書單和比較熱門的文章：
先大概介紹一下我的前端經歷吧。第一次接觸前端是codecademy上的課程，學到現在大約學了半年的時間。雖不能稱的上很厲害的前端工程師，但也大概懂前端工程的基本脈絡。看到身邊有很多人打算跳前端這個坑，卻不知如何下手，因此打算寫一些文章，看能不能得到一些回響。
我一直都很喜歡讀歷史故事，又很喜歡一個網路作家金老ㄕ的連載——金老ㄕ的教學日誌。他的筆調饒富趣味，讀起來又很輕鬆，不會拖沓。因此且讓我這個作文很爛的人，來模仿一下他的筆法。
開始囉！
我是沒一村，專長和興趣是程式、主動投資、科技商業模式。可以參考我的書單和比較熱門的文章：
一般來說，如果網站有少量的static資料的話，可以選擇放在.json檔裡面，要讀或要動態改變html的內容，都很方便。今天寫程式的時候，剛好就要使用這項技術。不過寫到一半，遇到了一個小問題，讓我debug了一段時間。
我是沒一村，專長和興趣是程式、主動投資、科技商業模式。可以參考我的書單和比較熱門的文章：
一般來說，如果網站不是要做的特別猛，我們不太會去更改scrollbar的樣式。話雖如此，我還是覺得自己設計的scrollbar很酷，雖然只是一個小地方，但改了整個心情就是很不一樣，對於網頁也會有不等的加分效果。
我是沒一村，專長和興趣是程式、主動投資、科技商業模式。可以參考我的書單和比較熱門的文章：
前幾天做網頁做到一個功能，必須產生一個dialog，然後裡面放其它網頁的東西。因為要顯示其它網頁的資訊，這時候就必須要用到iframe這個東西。
我是沒一村，專長和興趣是程式、主動投資、科技商業模式。可以參考我的書單和比較熱門的文章：