Tutorial : Waypoint Landing Page

https://codepen.io/desbear96/pen/Gxrzry

課程目標

了解transition delay來創造進場動畫

透過Waypoint的js產生滾動過程中的動態效果

並再次強調zindex的應用來帶出hero image中的圖層順序

並於此次帶出inline-block垂直置中的實作方式

學前必備知識

  • position
  • z-index
  • background-size
  • transform basic
  • transition
  • margin:0 auto
  • clear both
  • float
  • inline-block
  • :before :after ( pseudo element )
  • Scss基礎 nest與variable

重點知識

  • waypoint.js
  • inline-block vertical align middle
  • scss nest selector and XXX &
  • transition delay

教學方式

  • 首先要先解釋inline-block創造垂直置中的條件與概念,將hgroup區塊安至於中間
  • 接著將花與方塊透過指定的大小安置進去
  • 而三段文字則透過after與before安置前後層圖片
  • 並透過variable指定高度順序運算
  • 透過animate &這樣的祖代選擇方式,製作在進場前的位置,讓animate抽走後可以依序展示出物件
  • 安置下方的section結構,安置inner創造中間區塊的置中並設定最大寬度限制
  • 教授透過float與set-left right的樣式名稱,讓原本一樣的結構可以依據樣式名稱置左置右
  • 透過雙層祖代選擇達到同前animate抽換後產生的動畫結構

素材

https://cl.ly/qIfb/hero-flower.png

https://cl.ly/qHo7/vintage.png

https://cl.ly/qHsB/vintage-up.png

https://cl.ly/qHcj/illustration-up.png

https://cl.ly/qHMB/illustration.png

https://cl.ly/qIV4/nature.png

jQuery(document).ready(function(){
jQuery(‘body’).imagesLoaded(function (){
jQuery(‘.os’).addClass(‘ready’);
function onScrollInit( items, trigger ) {
items.each( function() {
var osElement = jQuery(this)
var osTrigger = ( trigger ) ? trigger : osElement;
osTrigger.waypoint(function() {
osElement.removeClass(‘animate’);
},{
triggerOnce: true,
offset: ‘50%’
});
});
}
onScrollInit( jQuery(‘.os’) );
});
});

$bgC:#F3D5D7;

$color:#CE4D5A;

script(src=”https://cl.ly/q6Ke/jquery.min.js“)

script(src=”https://cl.ly/qI9e/imagesloaded.pkgd.min.js“)

script(src=”https://cl.ly/qI1b/jquery.waypoints.min.js“)

script(src=”https://cl.ly/qIja/inview.js“)

Tutorial : Pure CSS Modal

https://codepen.io/desbear96/pen/oqpwLO

課程目標

主要透過:target辦到讓有特定id之物件達到樣式變換的效果,並在此次了解absolute的位置的概念來產生tooltips,並創造滿版遮罩的概念,在tooltips中可以帶入三角形與透過transform讓物件置中的方式。

學前必備知識

  • box-modal
  • html basic
  • inline-block
  • :hover
  • margin:0 auto

重點知識

  • :target
  • position left top right bottom
  • text-align
  • css triangle
  • psedo element
  • transform:translate3d basic

教學方式

  • 先教導創造按鈕並解釋box-modal與inline-block
  • 透過body的text-align來讓按鈕置中
  • 創造a之中的tooltips結構
  • 並透過psedo element創造三角形的部分
  • 在解釋hover後讓子物件作指定除了自己以外的物件作樣式變換後
  • 進一步開始解釋target之用法
  • 先將modal card與overlayer創造出來
  • 將modal card隱藏
  • 將modal card用target設定樣式滑入
  • 創造關閉按鈕reset 網址列

注意

不要透過transform來將modal or card置中

Figure out and divide Angular module in project _Angular 切版實戰 part 2: 如何在 Angular 專案裡切模組

前情提要 (連載的概念)
距離上次發文(切分 shared feature)已經過了半年,我們的產品持續長大,光 shared feature 底下已經擁有40多支的元件,到處 import 到處 export。於是上週開始解決技術債,整理、重新分類 module 和元件們。

在講 Angular module 的構造前,不得不說寫了幾個月 Angular 後,才發現 Angular 處境有點尷尬。雖然是模仿了 React 的 component 概念,但 React 目前生態更活躍、元件更好寫,framework 方面 AngularJS 社群比較成熟,套件多,反觀 Angular 東找西找資源真的不多 (´・ω・`)。但凡走過才有收穫,部門也有 React 和 Vue 的開發者,剛好可以互相學習,取其所長,棄其所短。

之後目標是想辦法在擁有 Angular 框架的穩定下,又能學習 React 元件相依性降到最低、資料達成單一來源,不要讓 js 資料指來指去最後變成折騰人心肝的小妖精。之前被 js 傳遞資料全部用 pointer 的特性嚇到,趕快用 immutable 壓壓驚,不過資料流還沒理出頭緒阿 _(:3」ㄥ)_

Angular 成員

首先介紹 Angular 常用的成員:module、component、directive、service。

  • module:大致可視為需執行某特定任務的功能區塊
  • component:呈現在 html 中的元件
  • directive:可彈性綁在 Component 身上的功能需求
  • service:inject 後可執行的某功能需求
    app 以 app.module 為進入點開始運行之後,依照不同的頁面需求,可藉由切換 module 或是 import 不同的 module 來決定此頁面要載入多少資源來完成工作。module 層級最高,可載入 module 、定義 component、inject service 等等。以我們專案的 HomeModule(Home 畫面所需的模組)最初的版本為例:

@NgModule({
imports: [
ROUTES,
CommonModule,
],
declarations: [
HomeComponent,
HeaderComponent,
TooltipDirective, …
],
provider: [
SwitchAuthService, …
]
exports: [
]
})
export class HomeModule {}


Module 參數

參考 Angular 文件,各 module 設定參數可粗淺說明為:

  • imports:此模組需要載入的模組資源(只有 module 能被載入)
  • declarations :此模組使用到的 component、directive
  • providers:此模組使用到的 Service(子模組也一樣可使用,providers 作用域比較廣,不像 imports 的資源只有自己本身可使用。用起來感覺很像.…..新增一支 js 檔案?很神祕還不太清楚)
  • exports:此模組輸出的資源(意即:其他模組若載入此模組,能使用的所有資源),輸出的資源必須是 imports、declarations 裡面定義過的項目。
    一開始還對 module 沒什麼概念,這初版立刻受到挑戰,在 home 的子 module — DashboardModule (dashboard 頁面)試圖加入 TooltipDirective 的時候,得到了 Angular “xxx is part of the declarations of 2 modules” 的回應。Angular 規定 一個 component 只能附屬在一個 module 底下。所以為了讓不同模組可以共用元件,我們在第二版中創了個 SharedModule,包山包海 import 一堆 module 再 export 一堆 module、component、directive,每次有新頁面要使用共用元件,就只能 import 一大包 SharedModule,造成龐大負擔。於是切分 Module 是一定要的了。

切分 Module

在第三版中,切出了 UISharedModule(放置所有 UI 相關功能的模組):

@NgModule({
imports: [
CommonModule,
],
declarations: [
TooltipDirective,
PlaceholderComponent, …
],
provider: [
dialogService,
]
exports: [
TooltipDirective,
PlaceholderComponent, …
]
})
export class UISharedModule {}


還有 DataPipeModule、LayoutSharedModule 等等其他功能性的模組區塊,並整理出以下特性:

1. component / directive / pipe 等元件只能定義在一個 module 底下,因此只要有通用的元件,就要分類到某個 module 麾下,才能被多個 module 給 import 使用
2. exports 僅含 declaration 裡面的元件,儘量不要 export module,避免 module相依性、減輕 module 重量
3. Module 分越細,每個新頁面負擔越小,不會單一 import 就很重,但需要import的項目數量也會更多,需自行拿捏
其中第二點提到的 “不要 export module” 是因為避免在 import module 的時候,載入了非預期的 module。譬如之前因為 TagModule 與 TagSharedModule 常常被一起使用,初版長這樣:

@NgModule({
imports: [
TagSharedModule,
],
declarations: [
TagComponent,
],
exports: [
TagComponent,
TagSharedModule, …
]
})
export class TagModule {}


原本是方便載入 TagModule 時可以連 TagSharedModule 一起使用。但也會導致原本只想使用 TagComponent 的 module 被迫載入 TagSharedModule。所以即使兩者常常被一起使用,TagModule 也還是不要 exports TagSharedModule 才好,需要兩者的時候再分別 imports:

@NgModule({

imports: [
TagModule,
TagSharedModule, …
]
})
export class SomeModule {}


原本只是想寫一下上週辛苦的切分 module 甘苦談,結果居然變成很正經的分享了 (*´・д・)? 不得不說 Angaulr 這種分層架構,對一切講求扁平的 component 世代很不利,但對團隊開發與理解是有幫助的。只希望之後優化專案的過程,能找到更好的結合兩者好處的開發方法。

如何在.Net專案中開始使用TypeScript

在介紹如何在.Net專案中開始使用TypeScript之前先來講講,在使用JavaScript時曾經碰過的幾個問題:

1. JavaScript沒有OO
若要讓JavaScript有OO的特性就必須透過Protype來達成,但問題是需要多輸入一些程式碼,寫法如下圖所示:

2.誤用ES6或是ES7的語法
在開發JavaScript有時不會特別留意是使用哪一個版本新增的語法,如果不小心用到比較新的語法時,會讓舊版本的瀏覽器 (如:IE) 無法運行。

<下圖> Foo2 為ES6新增的寫法,程式碼雖然精簡,但是在IE上是無法運行,因為IE不支援ES6以上的語法。

3.只有在偵錯時才知道有沒有語法錯誤
是用JavaScript開發時,往往都要在瀏覽器執行時才會知道這段JS有沒有語法錯誤。
在用TypeScript開發時,在編譯的階段就可以知道語法有沒有錯誤,可以大幅減少除錯的時間。

<下圖>   IDE在編譯之前就已經抓到錯誤的語法:


接下來介紹要如何在.Net專案設定TypeScript
Step 1.開發環境

(1) TypeScript
TypeScript安裝途徑有兩個:
● 安裝Visual Studio時順便安裝。
● Visual Studio擴充功能 → 搜尋TypeScript → 下載並安裝。

(2) Visual Studio版本:Visual Studio 2017、Visual Studio 2015、Visual Studio 2013 (不確定是否可以)

Step 2.新增tsconfig.json (TypeScript設定檔)

專案根目錄 → 新增新項目 → TypeScript設定檔

Step 3.編輯tsconfig.json

如果要將所有的TS檔編譯成1個JS檔,可以將下圖”outDir”換成”outFile”,後面的目錄加上JS的檔名。
tsconfig的屬性有很多就不全部介紹了,有興趣的話可以到官網看看

Step 4.加入TS檔,並開始開發

TS檔編輯完後存檔後會在專案目錄下可以看到JS檔和Map檔,這樣就大功告成了。
注意:當TS檔有錯誤時,不會編譯JS檔和Map檔


在開發Typescript時難免會引用外部的JavaScript套件,但是在外部的JavaScript套件會遇到一個問題,那就是在使用外部JS的物件時,會出現錯誤訊息,如下圖所示:
這個問題的解法上在TS加入紅色圈起的程式碼後,錯誤訊息就消失了,問題也就排除了。

最後,提供一下TypeScript學習的資源,希望各位能夠順利開發。

TypeScript官方文件 (英文)
HackMD – TypeScript新手入門 (正體中文)
GitBook – TypeScript 入門教學 (簡體中文)

Angular 4 folders-by-feature structure practice

Angular 4 切版實戰 part 1: 新手上路甘苦談

註:未來 AngularJS (1.x) 後的版本統稱 Angular,不過為了方便理解暫且稱為 Angular 4,而且現在 Google “Angular” 的資訊也大多還是在講 AngualrJS

雖然字面上是甘苦談,但就是苦談的意思。之後可能會變成系列文,當作開發過程中的心得整理。

寫 AngularJS (以下簡稱 A1) 習慣之後,現在寫 Angular 4 (以下簡稱 A4) 有種打掉重練的感覺。尤其看著寫過 VueJS 的夥伴 Eric Yip 迅速寫完一堆 A4 的 component 和 service ,更加充滿徬徨。

繼續閱讀 “Angular 4 folders-by-feature structure practice”