iT邦幫忙

front-end相關文章
共有 423 則文章
鐵人賽 Modern Web DAY 6

技術 Angular 深入淺出三十天:表單與測試 Day06 - 單元測試實作 - 登入系統 by Template Driven Forms

今天我們要來為我們用 Template Driven Forms 所撰寫的登入系統寫單元測試,如果還沒有相關程式碼的朋友,趕快前往閱讀第二天的文章: Temp...

鐵人賽 Modern Web

技術 Day 34. 戰線擴張・專案語法 X 嚴格把關 - TypeScript Compiler Syntatic Checks Configurations

閱讀本篇文章前,仔細想想看 前端的 Debug 技巧有哪些? 編譯過後的檔案通常會有對應的 Source Map 檔,其中 Source Map 到底是在...

鐵人賽 自我挑戰組 DAY 14

技術 CSS 的 border-radius、box-shadow 和 liner-gradient

關於 HTML 和 CSS 的學習筆記,快要告一個段落了,之後會開始進入到響應式網頁(RWD)的介紹,今天是 HTML 和 CSS 的最後一篇文章,我們來介紹...

技術 關於購物車頁面的 RWD 移動概念

鐵人賽結束了,但說過了寫文章是 to be continued 的,今天就要先來記錄一下這個購物車頁面的 RWD 移動概念。 回歸正常學習進度,檢視了一下作業與...

鐵人賽 Modern Web DAY 29

技術 Angular 深入淺出三十天:表單與測試 Day29 - ControlContainer

昨天跟大家分享了自訂表單元件的作法,但昨天的作法只適用於一個欄位、一個 FormControl 。 雖然 FormControl 裡是可以設 {} 的值,但如...

技術 【圖解Deno教學】介紹x安裝x使用 三合一

Youtube連結:https://bit.ly/36zpv2VDeno Taiwan(FB社團):https://bit.ly/2XXyoQ0 Deno是一...

鐵人賽 Modern Web DAY 23

技術 Angular 深入淺出三十天:表單與測試 Day23 - Reactive Forms 進階技巧 - 欄位連動檢核邏輯

大家在日常生活中,應該看過滿多表單的某個欄位會隨著另個欄位的改變,而造成該欄位的驗證邏輯需要改變的情況吧? 舉例來說,可能會有個欄位叫做聯絡資訊,使用者可以選...

鐵人賽 Modern Web DAY 2

技術 【Day02】什麼是防禦性 CSS?

在海賊王這部漫畫當中,有一個高人氣的反派角色,夏洛特·卡塔庫栗,他是 BIG MOM 海賊團「甜點三將星」之首、四皇「BIG MOM」夏洛特·莉莉的次子。 我...

達標好文 技術 5個學習CSS的遊戲分享 | 我在路易莎的日子

最近愛上以玩遊戲的方式去學習CSSヽ(✿゚▽゚)ノ好快樂~ 尤其是之前對選擇器和Grid Layout一直沒有很熟練,透過遊戲,印象更深刻,也不失為一個不錯的學...

鐵人賽 Modern Web DAY 25

技術 【Day 25】useCallback - 學會把函式記起來

不知不覺來到第 25 天了,本來預計是要用小專案作結的,沒想到意外的忙碌啊,所以剩下的幾天就決定介紹一些我原本也不熟悉或不常使用的特性,學習的同時也盡量內化並記...

鐵人賽 Modern Web DAY 7

技術 Angular 深入淺出三十天:表單與測試 Day07 - 整合測試實作 - 登入系統 by Template Driven Forms

昨天幫我們用 Template Driven Forms 所撰寫的登入系統寫完單元測試之後,今天則是要來為它寫整合測試。 大家還記得整合測試的目標是要測什麼嗎...

鐵人賽 自我挑戰組 DAY 23

技術 Sass 的變數功能 Variable

今天要來介紹的是 Sass 的變數功能,只要利用變數的功能,我們會比較好的去管理一個網站的其他設定值,而不用欲修改時要一行一行的檢視原生 CSS 碼。 $tit...

鐵人賽 Modern Web DAY 14

技術 Angular 深入淺出三十天:表單與測試 Day14 - 單元測試實作 - 被保人 by Reactive Forms

今天我們要來為我們用 Reactive Forms 所撰寫的被保人表單寫單元測試,如果還沒有相關程式碼的朋友,趕快前往閱讀第十一天的文章: Reactive...

技術 領進前端門,修行在個人:關於本系列文章

前言 這是我第一次參加寫文大賽,以往都只有在iT邦看各位大神的教學文,這次在過年間意外發現六角學院 - 鼠年全馬鐵人挑戰賽這項活動,其實也猶豫了很久才決定參加這...

鐵人賽 Modern Web DAY 12

技術 12. [JS] 為什麼 typeof new Array() === 'object'?

JavaScript 由於弱型別的語言特性,對於剛開始學習的新手來說,型別就跟暗戀的對象一樣,總是讓人捉摸不透,即使你用了 typeof 運算子來問他,也會得...

鐵人賽 Modern Web DAY 5

技術 Angular 深入淺出三十天:表單與測試 Day05 - 如何寫出優秀的測試?

昨天介紹了開始撰寫測試之前必須要知道的二三事之後,想必大家已經對如何開始撰寫測試有了一些概念,但測試不是「有拜有保佑」,有寫就好。所以我們除了要知道如何開始撰...

鐵人賽 Modern Web DAY 23

技術 【Day 23】useMemo

昨天 React.memo 比較像是針對 component 做 memorization,今天要介紹的 useMemo 這個 hooks 則是可以對函式實作...

鐵人賽 Modern Web DAY 10

技術 Angular 深入淺出三十天:表單與測試 Day10 - Template Driven Forms 實作 - 動態表單初體驗

今天要來用 Template Driven Forms 的方式實作一個很簡易的動態表單,使用上有點像是保險業者的系統,可以新增多名被保人,也可以編輯與刪除被保...

鐵人賽 自我挑戰組 DAY 16

技術 RWD 不可顯示 X 軸法則

使用行動設備上網時不管是手機或是平板,不同於使用電腦會有滑鼠,而是使用我們的手指滑動銀幕,以使用習慣來說,通常是以上下滑動的方式來進行內容瀏覽,而不像是使用電腦...

鐵人賽 自我挑戰組 DAY 15

技術 響應式網頁(RWD)環境與 Media Query

在智慧型手機橫空出世進入我們的世界以後,網頁工程師/設計師突然面臨到了一個很大的問題,過往的設計都是依照 desktop 的螢幕瀏覽器與比例去構想的,但當智慧...

鐵人賽 自我挑戰組 DAY 29
JS30 學習日記 系列 第 29

技術 Day 29 - Vanilla JS Countdown Timer

前言 JS 30 是由加拿大的全端工程師 Wes Bos 免費提供的 JavaScript 簡單應用課程,課程主打 No Frameworks、No Compi...

鐵人賽 Modern Web DAY 6

技術 Day 7: 接續 Create-react-app: What's in my folder? { D3 }

接續昨天用 create-react-app 開啟專案之後,今天要來看看我們的專案資料庫裡面有什麼東西! What’s in my folders? 1. p...

鐵人賽 自我挑戰組 DAY 18

技術 RWD 的三欄流體式網頁設計

在前面的章節我們已經介紹過了max-width or min-width以及百分比(%)單位對於 RWD 網站的重要性,現在我們要來設計一個三欄式的流體式網頁,...

鐵人賽 自我挑戰組 DAY 7

技術 Day 07 CSS <字體屬性>

CSS Fonts(字體) 屬性用於定義字體系列、大小、粗細 和文字樣式(ex:斜體) 1.字體系列font-family 屬性定義文本的字體系列 &lt;st...

鐵人賽 Modern Web DAY 8

技術 Angular 深入淺出三十天:表單與測試 Day08 - 單元測試實作 - 登入系統 by Reactive Forms

今天我們要來為我們用 Reactive Forms 所撰寫的登入系統寫單元測試,如果還沒有相關程式碼的朋友,趕快前往閱讀第三天的文章: Reactive Fo...

鐵人賽 Modern Web DAY 5

技術 寫一個 Vue 頁面

定義路由 首先先來定義路由,先把上一篇寫的 home.vue 定義在根路由。 打開 src/router/index.ts,在 routes 內定義 {...

鐵人賽 Modern Web DAY 13

技術 [DAY13] Filter 標題的靈感之我真的一滴都不剩了之真想不出

我想說的是filter 會建立一個經過指定運算判斷後回傳為真的新陣列,就是這麼簡單 關於 filter 在其他地方我好像已經遇到好幾遍,一直沒有有系統地把它...

鐵人賽 自我挑戰組 DAY 30

技術 To be continued

Note:2020 年的鐵人賽我也有報名喔,我即將於 2020/09/16 開賽,主題為『破釜沉舟的轉職路 - 去年說要成為軟體工程師的我,今年 38 歲了,...

技術 前端登入方式

這幾天參加了幾場面試,在基礎前端知識的部分,掌握度還可以,不過遇到網路知識的部分,就會答的很吃力,所以這邊針對網路知識的部分做加強,並且記錄一下,並且希望會有幫...

鐵人賽 自我挑戰組 DAY 27

技術 Sass 居然也有 @for 迴圈

For 迴圈,在程式設計這個世界鼎鼎大名,多少人戰死在這裡,我就曾經在這裡跌倒,然後萬劫不復,請詳我之前的故事,這一切是怎麼開始的,我怎麼跑去學了Python。...