iT邦幫忙

frontend相關文章
共有 226 則文章
鐵人賽 Modern Web DAY 20

技術 JS 原力覺醒 Day20 - 物件

一路上感謝各位讀者們的支持和回饋。 本 30 天系列文目前已經將篇幅重新整理、編纂成冊。 《JavaScript 概念三明治》在天瓏書局上架囉! 喜歡這個系列...

鐵人賽 Modern Web DAY 29
React + D3 的正確姿勢 系列 第 29

技術 Day29-React + D3(二)

前言 昨天的文章利用 componentDidMount 結合 D3 ,但相信讀者一定會覺得這樣的寫法又臭又長,而且這個 class 裡面也才寫了一個 comp...

技術 TapPay Web SDK 串接 - @types/tpdirect 介紹

前言 非常非常久以前寫過一篇 TapPay 串接的文章 但可惜的是 TapPay 沒有前端 npm 套件可以下載使用 所以在串接前端的其實都不會有智能提示跳出來...

徵才 【徵才】PacSoft兆洋資訊- Front-end Programmer 前端工程師

對於網頁架設與前端開發充滿滿腔熱血,卻找不到好地方發揮所長嗎?別懷疑!你就是我們在找的人! 我們正在尋找對網站前端有熱情的你,加入PacSoft台灣團隊,我們將...

鐵人賽 Modern Web DAY 28

技術 [Day 28] 菜鳥工程師的初次開發「偽」 Open Source Project

ConsumerX 這篇文章的標題似乎跟前幾天的「菜鳥工程師的初次 Open Source Contribution」 這篇文章有點像欸!不同的是上次是去貢獻...

鐵人賽 Modern Web DAY 25

技術 [Day 25] 菜鳥工程師的初次 Open Source Contribution - (1)

鐵人賽剩下 5 天,接下來我想聚焦在一些經驗分享,畢竟除了學習技術以外,適時的採取一些實際行動更能夠快速吸收所學知識與進步。 身為軟體工程師, Github 自...

鐵人賽 Modern Web DAY 2

技術 Day02 X 為什麼要在前端做效能優化?

大家好!雖然今天是 Day 2,不過嚴格來說是系列文的第一天。今天要來談談「為什麼我們需要在前端做效能的優化?」,也許內容會比較乏味,然而在執行一件事情前先釐...

鐵人賽 Modern Web DAY 6

技術 Day06 X 圖片最佳化

給你五秒鐘思考一下,你在日常生活中還有在使用沒有任何圖片,包括小小 的 Icon 也沒有的網站嗎?我想大多數人的答案都是否定的。現今的網頁應用免不了會需要載入...

鐵人賽 Modern Web DAY 3

技術 Day03 X Performance Analyzers feat. Lighthouse-CI

經過昨天,我們明白了效能對於前端應用的重要性,但是,我們要怎麼評估一個網站的效能呢?用感受的嗎?自己使用這個網站時還算順暢就定義為這是一個效能很好的網站嗎?當...

鐵人賽 Modern Web DAY 4

技術 Day04 X Core Web Vital & RAIL Model

在昨天介紹網頁檢測工具時,我們看到它提供了一些看起來十分專業的 Metrics,不過光看文字還真的猜不出它們代表的是什麼意思 ? 今天第一個段落會介紹三個評...

鐵人賽 Modern Web DAY 1

技術 [Day01] 前言:常見的前端實戰技能有哪些?

Credit: https://lilly021.com/angular-vs-react-vs-vue-js/ 身為一個前端工程師,除了框架 (Vue,...

鐵人賽 Modern Web DAY 10

技術 Day10 X 實作一個簡單的 Virtualized List 吧!

Facebook、Instagram 應該都是我們日常生活中非常依賴的社群媒體了,每天閒來無事就要滑滑動態,看看朋友最近發生了什麼事。不過你有沒有注意到一件事...

鐵人賽 Modern Web DAY 21

技術 Day21 X Upgrade Your HTTP Connection

其實很多的效能優化技巧都擁有「用了不一定會讓效能變得比較快,就算有可能也是使用者難以感知的微幅進步,甚至如果使用不當會讓網頁效能變的更差」的特性。 不過對於...

鐵人賽 Modern Web DAY 5

技術 Day05 X Code Minimize & Uglify

從今天開始終於要正式進入介紹前端效能優化各種技巧的章節了,如果到今天還願意繼續堅持看下去的讀者記得給自己一些掌聲 ? 如果對效能優化幾乎是零基礎的讀者也別擔心...

鐵人賽 Modern Web DAY 30

技術 Day30 X 系列文總結

這是我第三年參加鐵人賽,每一次來到第 30 天,都有種如釋重負的感覺,不過同時也會感到一些遺憾,因為總是沒能把自己在開賽前預期的內容好好呈現出來。不論是主題內...

鐵人賽 Modern Web DAY 9

技術 #9 CSS3 Flexbox: main style setting

What is Flexbox? Flexbox = Flexible Box "CSS3 Flexbox was designed as a o...

鐵人賽 Modern Web DAY 13

技術 Day13 X CSS GPU Acceleration

其實今天的主題應該算是昨天 High Performance CSS 的延伸。 大家應該都有遇過網頁的動畫有點不順暢甚至卡頓的經驗吧?是不是覺得很煩人呢?就算...

鐵人賽 Modern Web DAY 12

技術 Day12 X Writing High Performance CSS

CSS 是前端開發者不可不學的技術之一,沒有了它就好像你做出來的網頁都沒有穿衣服一樣,有點羞於見人呀!? 但你有想過 CSS 如果亂寫也可能會影響到網頁的效能...

鐵人賽 Modern Web DAY 8

技術 #8 Web Layout: RWD

What is RWD? “Responsive web design (RWD) is a design and technical approach tha...

鐵人賽 Modern Web DAY 14

技術 Day 14 - UML x Interface — Portal

UML Portal 是什麼? 開始之前,先說一下 Portal 其實是 React 比較常用的 Pattern,因此非 React 使用者可以斟酌一下怎麼...

鐵人賽 Modern Web DAY 7

技術 Day07 X Image Sprites

經過昨天的一番折騰,我想讀者們都對基本的圖片優化稍有概念了,今天要介紹的優化技巧其實嚴格來說也算是圖片的優化範疇,但是跟優化圖片本身的大小無關,因此我選擇獨立...

鐵人賽 Modern Web DAY 7

技術 #7 Web Layout: CSS Fundamentals

Final Design CSS Web Layout Tips 1. Horizontally center the text: try text-al...

鐵人賽 Modern Web DAY 8

技術 Day08 X 瀏覽器架構演進史 & 渲染機制

「在未來,瀏覽器會變得越來越強,以後我們可以在瀏覽器做越來越多事。」 身為常與瀏覽器共舞的 Web 工程師,尤其是 Frontend Engineer,如...

鐵人賽 Modern Web DAY 9

技術 Day09 X Resource Hint & Non-Blocking Script Tag

經過昨天的內容,讀者們應該對於網頁的渲染流程有大致的理解了。 我們再小小複習一下,大致上網頁的渲染流程為: 讀取 HTML 後生成 DOM Tree 讀取...

鐵人賽 Modern Web DAY 6

技術 #6 CSS Table x Stock Price

An ordinary CSS table looks like Ways of making CSS table beautiful 1. Change...

鐵人賽 Modern Web DAY 14

技術 Day014 X Code Splitting & Dynamic Import

Code Splitting 是一個非常重要的觀念,現代網頁程式漸漸走向使用框架以模組化方式來開發,通常會透過如 webpack 等 bundler 來 ug...

鐵人賽 Modern Web DAY 11

技術 Day11 X Lazy Loading

還記得昨天 Virtualized List 篇章開頭放的 Facebook demo 影片嗎?有沒有發現我們好像遺漏了什麼功能沒有說明? 先問大家一個問題...

鐵人賽 Modern Web DAY 28

技術 Day 28. slate × Transforms × Node

最後終於來到了我們最後一個章節:『 Transforms 』。 Transform 在 slate package 裡頭也是佔了舉足輕重的地位,它提供了最 h...

鐵人賽 Modern Web DAY 5

技術 #5 Types of CSS Selector

After the previous 2 articles of CSS basic introducttion, let's talk about 5 Typ...

鐵人賽 Modern Web DAY 10

技術 #10 CSS3 Flexbox: nav style setting

What is nav? nav = navagator “The <nav> HTML element represents a sectio...