iT邦幫忙

front-end相關文章
共有 171 則文章
鐵人賽 Modern Web

技術 Day 50. 通用武裝・非同步函式X非同步程序的同步化-TypeScript Generics with Asynchronous Programming III. Async Functions

閱讀本篇文章前,仔細想想看 Generators 使用上有哪些特點? 積極求值(Eager Evaluation)與惰性求值(Lazy Evaluatio...

技術 [開發經驗分享][JavaScript]浮點數運算出現一堆小數位數

情境描述 最近在開發專案的前端時,遇到一件非常奇怪的問題,用Javascript來做加減乘除,如果是有小數點的數字的話,跑出來的數字會非常奇特,例如: var...

鐵人賽 Modern Web

技術 Day 49. 通用武裝・非同步迭代 X 無窮地惰性求值 - TypeScript Generics with Asynchronous Programming II. ES6 Generators

閱讀本篇文章前,仔細想想看 同步與非同步程序的差異性在哪?你能夠列舉哪些是 JS 裡有非同步的機制的東西嗎? 為何我們需要非同步的程序?同步執行不是很直觀...

徵才 [台中]資深前端工程師

【公司名稱,統編】搞之訊有限公司,82784304 【工作地址】 籌備處:台中市西屯區皇福街16號(預計2020年初移至辦公室地址) 辦公室:407台中市西屯區...

技術 JavaScript 的 if 條件

運算子 要來正式介紹 if 條件式之前,必須要先來介紹運算子,因為 if 條件式內的條件會由運算子來進行比較與運算。 比較運算子 == 與 != 僅單純比...

技術 JavaScript 的陣列 (Array) 與物件 (Object)

之前曾經介紹過宣告變數,開頭用 var 後接數字 (Number) 或是字串 (String),而今天我們要介紹另一種變數型態,就是陣列 (Array) 與物...

技術 JavaScript 的 function 功能 (函式介紹)

★首先這篇文章適合以下背景的人閱讀 熟悉 HTML、CSS 正要開始一腳踏進 JavaScript 的初學者 號稱全世界最懶的一群人(軟體工程師),能坐就...

技術 初探前端三劍客之一 - JavaScript 大神(變數、console.log() 與 textContent)

★首先這篇文章適合以下背景的人閱讀: 熟悉 HTML、CSS 正要開始一腳踏進 JavaScript 的初學者 今天我們要開始進入 JavaScript...

鐵人賽 Modern Web

技術 Day 45. 通用武裝・泛用類別與介面 X 終極組合第二彈 - Ultimate Combo of Generic Class & Interface

閱讀本篇文章前,仔細想想看 泛用型別化名的如何進行宣告? 泛用化名註記在變數時的注意事項為何? 泛用函式的特點為何? 如果還不清楚可以看一下前一篇文章喔...

鐵人賽 Modern Web

技術 Day 42. 通用武裝・泛用型別 X 型別參數化 - TypeScript Generics Introduction

《通用武裝》篇章概要 本系列即將邁入後半段(現在才邁入後半段會不會有點晚?)—— 泛用型別(Generics)的介紹。 筆者翻閱很多資料發現,泛用型別儘管看似...

鐵人賽 Modern Web

技術 Day 40. 戰線擴張・模擬戰 — UBike 地圖 X 使用 LeafletJS - Using LeafletJS with TypeScript

閱讀本篇文章前,仔細想想看 你會如何善用型別推論與註記的機制呢? 什麼情形可能會出現 any 型別推論出來的行為?如果出現了,要如何處理這類型的案例?...

鐵人賽 Modern Web

技術 Day 39. 戰線擴張・模擬戰 — UBike 地圖 X 資料處理 - Data Processing using Type Alias

閱讀本篇文章前,仔細想想看 是否會使用 Webpack 建立 TypeScript 專案的環境呢? 另外,本篇文承接上一篇文,因此如果是跳到這篇的話可以先從...

技術 如何用 Sass 實現類似 Bootstrap 4 的格線系統

★ 首先這篇文章適合以下背景的人閱讀: 1.大概了解什麼是格線系統,甚至有用過 2.有使用過 Sass 管理及撰寫 CSS,並且對基礎 Sass 語法 (SC...

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

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

鐵人賽 Modern Web

技術 Day 38. 戰線擴張・模擬戰 — UBike 地圖 X Webpack 環境建構 - TypeScript Webpack Integration

閱讀本篇文章前,仔細想想看 什麼是宣告檔 Declaration Files?為何宣告檔很重要? 如何載入第三方套件在 TypeScript 專案裡? 如...

鐵人賽 Modern Web

技術 Day 37. 戰線擴張・第三方套件 X 支援的引入 - 3rd-Party Package & TypeScript Declaration File

閱讀本篇文章前,仔細想想看 今天不用想,馬上看下去! 今天筆者要講本篇章系列比較重要的部分 —— TypeScript 的型別宣告檔 Declaratio...

鐵人賽 Modern Web

技術 Day 36. 戰線擴張・戰線分散 X 組織集中 - TypeScript Namespaces Import/Export Mechanism

閱讀本篇文章前,仔細想想看 命名空間的用意是什麼? 如何運用 TypeScript Namespaces 組織不同區塊的程式碼? 命名空間融合(Names...

鐵人賽 Modern Web DAY 30

技術 30. [WEB] 從輸入網址列到渲染畫面,過程經歷了什麼事情?

相信讀者您在生活中,多少都會有搜尋、瀏覽網頁的經驗吧?輸入網址、而身為網頁製造者的前端工程師,你真的知道你寫出來的網頁在部屬之後,是怎麼從網址變成頁面,進而顯...

鐵人賽 Modern Web DAY 30
重新認識 CSS 系列 第 30

技術 重新認識 CSS - 總結 & 系列目錄

前言 「重新認識 CSS」這個系列名稱的由來就如其名,我想要重新認識它。雖然以前就有學過 CSS,但這次想從 CSS Spec 中學到最原始的定義和內容,更加...

鐵人賽 Modern Web

技術 Day 35. 戰線擴張・命名空間 X 組織分明 - TypeScript Namespaces Introduction

閱讀本篇文章前,仔細想想看 讀者認為目前對 TypeScript 編譯器的設定的了解程度如何呢? 如果還沒理解完畢的話,可以先翻看最近這幾天的文章喔!...

鐵人賽 Modern Web

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

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

鐵人賽 Modern Web DAY 30

技術 [DAY30] 被 React react 的後端工程師 - 後記

一開始會這麼定題目,其實是起源于我對前端的挑食,因為我不喜歡調畫面 左邊一點右邊一點這種事情我真的不喜歡做 所以取翻譯中 過敏 的意思來形容我的 React 學...

鐵人賽 Modern Web

技術 Day 33. 戰線擴張・專案除錯 X 源碼對照 - TypeScript Compiler Debug Techniques

閱讀本篇文章前,仔細想想看 如何確保出現錯誤時,防止 TypeScript 編譯器產出專案結果? 描述 rootDir、outDir 與 outFile...

鐵人賽 Modern Web DAY 27

技術 27. [WEB] Cookie & Session 是什麼?

Cookie 和 Session 這兩個名詞,相信大部分的開發者都不會太陌生,特別是 Cookie,從社群網站、電商平台、Google Analytics 分...

鐵人賽 Modern Web DAY 29

技術 [DAY29] 多 DOM 的動畫之我等了這篇 29 天之我完全不介意

我想說的是: 其實基礎的多個 DOM 的動畫,跟一個差不多 多個的就是專業的部分,我不清楚 上一篇中已經可以控制一個 DOM 元素的動畫效果 而想控制多個動...

鐵人賽 Modern Web

技術 Day 32. 戰線擴張・專案輸出 X 輸出設定 - TypeScript Compiler Output Configurations

閱讀本篇文章前,仔細想想看 為何有些 ES6 的 Feature 諸如 Promise、Object.assign 等東西無法直接在 TypeScript...

鐵人賽 Modern Web DAY 26

技術 26. [BE] API 設計拿資料要透過 POST,會有什麼問題嗎?

現代的網站越來越多前後端分離的架構,透過 前端 MVC 框架 快速堆砌出 SPA,再透過 API 取得變動的資料也已經是開發者日常;而用來聯繫前後端的 API...

鐵人賽 Modern Web DAY 28

技術 [DAY28] React 動畫動得非常厲害

我想說的是: 動畫好酷炫耶,以前完全沒用過就跑來寫後端 react-transition-group 真的很厲害 看完之後...我還是不會想寫前端耶 用 t...

鐵人賽 Modern Web

技術 Day 31. 戰線擴張・專案監控 X 編譯設定 - TypeScript Compiler Compile Configurations

恩... 照常 Day 31. 繼續。 《戰線擴張》篇章概要 本系列進入到第三部分:《戰線擴張》篇(The Front Line Expansion) 筆者就...

鐵人賽 Modern Web DAY 27

技術 [DAY27] 如果你快樂就拍拍手之在 react 使用動畫效果之基於 CSS

我想說的是: 其實使用起來也是很簡單,但是對於 react 本身的操作要夠熟悉 最近買了薩爾達織夢島,有點太投入 整個早上都在玩,本來早上就該發文的 這一篇...