Latest

建立 .NET MVC 專案

安裝好 VS 環境後,首先新建 .NET MVC 方案 ( 檔案 >新增 >方案 ),選擇左邊的 Web 後選擇 ASP NET Web 應用程式,並在下方修改我們方案的名稱和位置:名稱、位置、方案、方案名稱、架構。 接著選擇 MVC 後 按下確定 就會開始建立專案,建立好的檔案結構會長這樣: 接著選擇 偵錯 > 啟動但不偵錯 會起動 Server 運作網頁 預期瀏覽器要顯示如下: 至此便建立好囉!
SimonAllen

Razor 語法入門 -1

Razor 是 .NET MVC 中在 View 中使用的模板語法。 在 .NET MVC 的 Views 這裡,有 .NET 自己的樣板引擎 Razor (其實和 Laravel 的 Blade 語法很像 ) 這裡列出常見寫法 在.Net 的 cshtml 裡撰寫 Razor 語法: 1.常見的@ 在Razor語法內,我們會常常用到@符號,要記得@和後面接續的詞彙不能有空白(空格),例如: @ViewBag 和 @ ViewBag 後者有空白會報錯。 又例如: @model 和 @ model 後者有空白會報錯。 在網頁呈現的文字中,真的想用
SimonAllen

Node.js 建立 API 與發佈 Heroku

此為練習 Vuex 時所用咖啡api,用node.js佈屬時的筆記。 建立寫死的假API 假api有幾種產生方式,例如用本地端api server來處理,而其中一種是真的佈屬上雲端,本地端取用,建立api使用node.js來處理,這裡用到了express (其實可以不用express,但我這裡就是用了啦) 首先建立專案,之後建立package json,在終端機輸入 npm init 專案名稱打好後,是需求填入資訊或Enter到底即可。 安裝express sudo npm install express --save 安裝node的跨域模組 sudo npm install cors 接著編輯器或IDE打開專案,建立index.js或app.js,我這裡建立index.js(取何種名稱沒差) 檔案內容如下 //require載入express模組 var express = require('express'
SimonAllen

Day30 心得-持續成長、持續前進

不知不覺就完成第二次鐵人賽 這次有幸加入一個公司團隊,前端 team 內有過半的成員參加鐵人賽,雖然前輩喊團報好幾次,但最終大家還是下水餃般的各自報名。我先自首我是拖到最後才報名的 不可否認,當周遭也有夥伴參賽時,對參賽者的動力會有很大的幫助。 賽後檢討 一樣來點賽後檢討 時間分配不均 去年就有的問題,不過今年可用時間和去年不一樣 ( 時間更壓縮 ),雖然在學習、筆記時間的拿捏已經比去年好許多,但仍有調整的空間。 心態調配 主要得面對自己心中的障礙,畢竟去年的這個時候,也是在前公司處理影音相關的任務,說實話有點膩了,現在完全不敢想明年會不會也是這樣XD 反過來說,自己是不是不穩定? 這 30 天不斷思索這個問題,是否心態上還有調整的地方?但 今日不做,明日就會後悔是一定的。 學習事項的優先性 鐵人賽期間,常常有似乎有更重要的事要做這種想法。 隨著前端技能的增加,對網頁眼界的擴展反而讓待學習事項越積越多,這 30 天得忍住摸其他東西的慾望,花時間在鐵人賽主題上,也算是對前端工程師的一種考驗吧。 文筆流暢度 與去年相比
SimonAllen

Day29 Video.js 影片標題套件

今天的內容仍是 Video.js 如果我想要替 Video.js 影片添加標題文字,例如 Youtube 全螢幕時,左上角會有標題文字一樣,我該怎麼做呢? 播放器的影片標題和昨天的浮水印一樣,可以透過純 HTML + CSS 來達成,這裡我一樣選擇使用 Videojs plugins 的方式來添加浮水印。 video.js 影片標題套件 ITMAN_title 既然昨天都能自定義、修改別人的 Video.js 浮水印套件,那當然自己也能寫一個,今天就來介紹自己寫的 video.js 標題套件:video.js 影片標題套件 ITMAN_title。 安裝、引入檔案 git clone 此專案後,取出 ITMAN.title.css
SimonAllen

Day28 Video.js 浮水印套件

Day28 Video.js 浮水印套件 今天的內容一樣是 Video.js 我們來看看如何替播放器加上浮水印。 這裡的浮水印是添加在播放器上,而不是添加在影片上。所以如果有人寫爬蟲抓走影片片源,影片本身還是不會有水印的。 前端能做的不是改變影片(片源)本身的內容,而是從<vidoe>和其周遭的 HTML 標籤著手,想辦法把水印圖像疊在播放器介面上。 將播放器添加浮水印圖片不外乎是三種方式: 1. 用 HTML 的<img>圖片疊上去 2. 用 HTML 的空 div 和 CSS 的 background-img 搭配疊上去 3. 承上,改用偽元素來完成 採上面任一種作法後,用CSS 絕對定位 去對齊播放器位置。 我們可以暴力用
SimonAllen