iT邦幫忙

modern web相關文章
共有 526 則文章

技術 使用Swiper輪播插件做一個跑馬燈(marquee)

使用Swiper這個輪播插件可以使我們用少少的程式碼實踐輪播效果,它不只可以用來做照片輪播、Banner輪播,還可以做跑馬燈效果。今天我們來做個跑馬燈吧! 首先...

鐵人賽 Modern Web DAY 25

技術 型別縮小 ( Narrowing )

Type Narrowing 是一種概念,指在程式碼執行過程中,根據特定條件,將變數的型別從一個較廣泛的型別縮小為較特定的型別,以提供更精確的型別資訊,這種功能...

鐵人賽 Modern Web DAY 10

技術 Day 10:使用 Strawberry 學習 GraphQL 指令

在先前我們為了讓查詢使用上更加彈性,學習了使用變數(Variables)動態帶入引數(Arguments),接著我們學習指令(Directives),它就像是...

鐵人賽 Modern Web DAY 9

技術 Day 9:使用 Strawberry 學習 GraphQL 片段與內嵌片段

再前一次使用別名(Aliases)來查詢資料,達到同時查詢兩個使用者列表,如上圖,這時會發現查詢語法中會重複出現使用者欄位(Fields),在當前的情況應該還...

鐵人賽 Modern Web DAY 9

技術 30天React練功坊-攻克常見實務/面試問題 Day9: Data fetch with useEffect not work as expected

tags: ItIron2023 react 前言 我們昨天看了在渲染陣列時用index作為key的一些隱憂,今天我們輕鬆一點,來看一個相對簡單的問題,但即便是...

鐵人賽 Modern Web DAY 20

技術 [Day-20] plotly與flask(2) 畫出台積電日K

前言 在昨天我們已經了解如何使用plotly畫圖,而今天的範例會搭配yfinance畫出台積電上半年的股價做一個範例。 完整code 介紹 yfinance是一...

鐵人賽 Modern Web DAY 19

技術 [Day-19] plotly與flask(1) 畫出簡易的資料視覺圖吧

前言 前幾天我們將之前的範例模組化了,接下來讓我們來新增一個可以畫圖表的page吧! 最終目標會以台股k線圖為主軸,至於工具則選用了plotly。 介紹 Plo...

鐵人賽 Modern Web DAY 8

技術 30天React練功坊-攻克常見實務/面試問題 Day8: Using index as key might be a huge disaster

tags: ItIron2023 react 前言 我們昨天用了一個很簡單的例子展示useEffect可能造成的memory leak issue,今天我們來看...

鐵人賽 Modern Web DAY 7

技術 30天React練功坊-攻克常見實務/面試問題 Day7: Memeory leak with useEffect

tags: ItIron2023 react 前言 昨天我們看了一下一個react hook在render上的常見使用錯誤,未來我們會再次接觸到,建議先把hoo...

鐵人賽 Modern Web DAY 7

技術 Day 7:使用 Strawberry 學習 GraphQL 查詢

在學習如何查詢之前,我們應該先要有一些資料,為此我們建立一個服務元件來產生假資料。 首先安裝一個產生假資料的 Python 套件,faker: $ poetry...

鐵人賽 Modern Web DAY 6

技術 30天React練功坊-攻克常見實務/面試問題 Day6: Rendered more hooks than during the previous render.

tags: ItIron2023 react 前言 我們昨天看了一個簡單的條件渲染的範例,了解到為什麼你不該用布林值以外的值作為判斷條件渲染的標準,今天我們繼續...

鐵人賽 Modern Web DAY 21

技術 泛型(Generics)

泛型在 TypeScript 裡,是很重要的一個環節,幾乎都會看到它的身影。在前面的文章範例裡,應該或多或少都有使用到泛型,那泛型究竟是什麼?為什麼這麼重要呢?...

鐵人賽 Modern Web DAY 5

技術 30天React練功坊-攻克常見實務/面試問題 Day5 An unexpected "0" in the page while doing condition rendering

tags: ItIron2023 react 前言 昨天我們談到了多個類似的state在同一組件的管理問題,以及你可以如何利用一個共用的hanlder去優化,今...

技術 JavaScript 模組化的介紹

JavaScript 替代方案是一種用於組織和管理 JavaScript 程式碼的方法,它有助於提高程式碼的可維護性、可擴展性和可重複使用性。在 JavaScr...

技術 渲染技術的變遷

客戶端渲染(Client-Side Rendering,CSR)技術架構在過去幾年中經歷了多個變遷和演進,以應對現代Web應用程序的需求和挑戰。以下是客戶端渲染...

技術 網頁架構的變遷

網頁渲染的工作逐漸由後端轉為前端主導。 靜態網頁 1.內容不變:靜態網頁的內容在請求期間保持不變。每當用戶訪問靜態網頁時,它們看到的內容都是固定的,並且不會根據...

鐵人賽 Modern Web DAY 5

技術 Day 5:使用 Strawberry 學習 GraphQL 型別 – 2

接著繼續編輯 User Type 進一步增加欄位與學習 Strawberry 的 GraphQL 型態。 @strawberry.type class User...

鐵人賽 Modern Web DAY 4

技術 30天React練功坊-攻克常見實務/面試問題 Day4: Way too many state in a component

tags: ItIron2023 react 前言 昨天我們配合了兩個hook去理解react render的機制以及一些useState & useE...

鐵人賽 Modern Web DAY 3

技術 30天React練功坊-攻克常見實務/面試問題 Day3: Uncaught TypeError: Cannot set properties of undefined

tags: ItIron2023 react 前言 昨天我們再次探討了一些基本的useState觀念以及react的一些render邏輯,基本上你只要知道第一天...

鐵人賽 Modern Web DAY 4

技術 Day 4:使用 Strawberry 學習 GraphQL 型別 – 1

首先先將之前”安裝 Strawberry 環境”所建立的開發環境開啟。 $ cd strawberry-tutorial 這個時候專案目錄的結構應該會是像下面...

鐵人賽 Modern Web DAY 3

技術 Day 3:GraphQL 型別系統

GraphQL 就如同程式語言一樣有型態跟物件等概念,在這次的內容當中將介紹 GraphQL 的型別系統,首先看到以下整個 GraphQL 型別系統的基本元素示...

鐵人賽 Modern Web DAY 17

技術 void VS. never

在上一個章節中,我們知道如果函式沒有返回值的話,可以使用 void 型別,今天我們來比較 void 和 never 的不同的情境和用途,雖然它們看起來相似,但它...

鐵人賽 Modern Web DAY 1

技術 30天React練功坊-攻克常見實務/面試問題 Day1: setState isn't working with push method

tags: ItIron2023 react 前言 總算又到了今年的鐵人賽了,今年的主題其實讓我掙扎很久,原先我是打算寫一些前端AI工具使用或是一些框架的深度技...

鐵人賽 Modern Web DAY 2

技術 Day 2:安裝 Strawberry 環境

環境準備 Python:3.11.1 套件管理:Poetry(1.6.1) 本文使用環境為 Apple Silicon,並使用 pyenv 安裝 Pytho...

鐵人賽 Modern Web DAY 2

技術 day2 - 介紹API與Restful API

回顧前一天:之前有提到我們的目標是要建立API,那什麼是API? RESTful API 又是什麼? 我今天就會為你解答。 API:API的全名是Applica...

鐵人賽 Modern Web DAY 16

技術 [Day-16] Blueprint 包裝你的flask(1)

前言 回顧看昨天的程式發現已經200多行,這樣在管理上會變得很複雜,這也就是flask最大的缺點,然而flask不能像一般python一樣直接寫成module再...

鐵人賽 Modern Web DAY 15

技術 [Day-15] Flask之API創建

前言 前幾天我們已經完成整個簡易的登入功能,但實際上現代的網頁開發趨向使用 API(Application Programming Interface)作為資料...

鐵人賽 Modern Web DAY 14

技術 [Day-14] Flask登入功能(6)-管理者界面

前言 前幾天我們已經完成登入、註冊等功能,然而一般系統都會有管理者,今天就讓我們實現如何簡易的創建管理者,此管理者可以查看目前已註冊的user,並選擇要不要刪除...

鐵人賽 Modern Web DAY 13

技術 [Day-13] Flask登入功能(5)-註冊

前言 前幾天我們已經了解如何將SQLite結合flask login達成登入系統,今天就讓我們實現註冊功能吧!完整程式 範例 sign up functio...

鐵人賽 Modern Web DAY 14

技術 類型別名 VS. 接口 (type VS. interface)

在前面章節中,大家應該會很疑惑 type 和 interface 在很多方面都可以實現相似的功能,那我們應該要使用哪一種呢?下面來看看兩者存在了哪些區別: ty...