iT邦幫忙

web相關文章
共有 445 則文章
鐵人賽 Modern Web DAY 6

技術 Day 6. Compare × G2 × Quill

Quill 是整個第二世代編輯器的開山始祖,也是第一個嘗試脫離瀏覽器掌控的叛逆份子,目前在 Github 的 star 數量已經超過 30k 了。 附上 Qu...

鐵人賽 Modern Web DAY 6

技術 Day06 X 圖片最佳化

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

鐵人賽 Modern Web DAY 6

技術 Day6 Sideproject(作品集) from 0 to 1 -定義功能

今天來介紹我們是如何從自己需要和使用者的角度來定義功能 前面有說到我們想做一個一起做sideproject的產品 然後再來就是腦力激盪時間 整理過後大致如下面幾...

鐵人賽 Security DAY 6
【CTF衝衝衝 - Web篇】 系列 第 6

技術 【第六天 - vim 備份洩漏】

Q1. vim 是什麼? 簡單來說, vim 是一種純文字編輯器,是從 vi 發展出的增強版,而 vi 是從 ex 發展出的視覺化文字編輯器, ex 又是從...

鐵人賽 Modern Web DAY 5

技術 D3JsDay05Bar拉BarBarBar,作伙來畫吧—畫個bar chart長條圖

用D3繪製長條圖 我們現在可以嘗試著用已經學到的SVG來畫長條圖,只不過是透過D3Js的操作來新增SVG元素到html裡面。 先宣告一個變數叫做svg並且透過D...

鐵人賽 Modern Web DAY 5

技術 Day05 X Code Minimize & Uglify

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

鐵人賽 Modern Web DAY 5

技術 Day5 Sideproject(作品集) from 0 to 1 -協作工具

中秋連假跟朋友出去吃飯 差點忘記要寫 好險好險這邊祝大家中秋快樂 今天來介紹一下協作工具一個人可能沒什麼感覺但當兩三個一起開發時協作工具就很重要了 方便追蹤進度...

鐵人賽 Security DAY 5
【CTF衝衝衝 - Web篇】 系列 第 5

技術 【第五天 - Gedit 備份洩漏】

Q1. gedit 是什麼? Gnome 是 Unix-like 作業系統上的一個開源桌面環境,提供豐富而完善的圖形化介面工具滿足使用者的日常所需,如文字編輯...

鐵人賽 Modern Web DAY 4

技術 Day 4. Compare × Generations

經過了三天的文章後,我們總算要進到新的『 Compare 』篇章了。 前兩天我們介紹了 WYSIWYG 一詞本身所代表的涵意,並列舉了一些市面上知名的應用,並接...

鐵人賽 Modern Web DAY 4

技術 D3JsDay04一同來見識 D3起手式—用D3寫Helloworld

如何開始D3js 方法一 使用CDN 請google搜尋D3Js到D3Js的官方網站。滑鼠滾輪到下方處複製<script src="https:...

鐵人賽 Modern Web DAY 4

技術 Day04 X Core Web Vital & RAIL Model

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

鐵人賽 Security DAY 4
【CTF衝衝衝 - Web篇】 系列 第 4

技術 【第四天 - HG 洩漏】

Q1. HG 是什麼? Mercurial 是一種輕量級分散式版本控制系統,由於 Mercuial 的元素符號為 Hg,Mercurial 的操作工具以 hg...

鐵人賽 Modern Web DAY 4

技術 Day4 Sideproject(作品集) from 0 to 1 -題目決定過程

我們當初是先決定題目才開始想要用什麼技術做的最開始其實有想了兩三個有關於區塊鏈的 ai的等等一些很新潮的東西但是礙於現實(技術能力還不夠XD 就否決了 後來的題...

鐵人賽 Modern Web DAY 3

技術 D3JsDay03可縮放向量圖型 不用怕圖片不行—SVG簡介

由於D3Js的組成部分來自於操控SVG(Scalable Vector Graphics),所以簡單介紹一下SVG。 SVG組成是屬於向量圖形(透過電腦計算路徑...

鐵人賽 Modern Web DAY 3

技術 Day 3. Pre-Start × WYSIWYG × contenteditable

誠如上一篇結尾所說,我們今天要把目光聚焦在瀏覽器提供的 contenteditable 屬性以及 execCommand api ,這兩個瀏覽器默認,用於製作...

鐵人賽 Modern Web DAY 3

技術 Day03 X Performance Analyzers feat. Lighthouse-CI

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

鐵人賽 Security DAY 3
【CTF衝衝衝 - Web篇】 系列 第 3

技術 【第三天 - SVN 洩漏】

Q1. 什麼是 SVN ? Subversion (簡稱SVN),與 Git 一樣是原始碼版本管理軟體,但是他與 Git 最大的不同是, SVN 是集中式管理...

鐵人賽 Modern Web DAY 3

技術 Day3 Sideproject(作品集) from 0 to 1 -技術選擇

關於技術選擇 可以先決定也可以題目訂了後再看要用什麼 我們因為想順便學一些比較就業取向的技術 所以就挑react(前端)跟spring boot (後端) 前端...

鐵人賽 Modern Web DAY 2

技術 Day 2. Pre-Start × WYSIWYG

那個 W 開頭的 你是不是看我書讀得少,想隨便拿一串英文符號呼隆我? 這誤會可不是普通的小啊!必須道個歉。聽說合格的道歉露出胸部是基本,那這邊就......

鐵人賽 Modern Web DAY 2

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

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

鐵人賽 Modern Web DAY 2

技術 Day2 Sideproject(作品集) from 0 to 1 -找題目

大部分人想做sideproject的目的不外乎就是增加作品集解決問題或是好玩練習新技術等等 要找題目最簡單莫過於解決身邊遇到的問題 從小問題到大問題 例如常常重...

鐵人賽 Security DAY 2
【CTF衝衝衝 - Web篇】 系列 第 2

技術 【第二天 - Git 洩漏】

Q1. Git 是什麼? Git 是一個分散式版本控管軟體,每個開發者手中都會有完整的一份副本,包含過去的修改紀錄,相較於集中式的版本控管軟體,可以避免版本控...

鐵人賽 Software Development DAY 2

技術 網絡框架:應用層工具

這篇主要聊一聊兩個應用層工具:web api 和 rpc;關鍵字:web api, rpc;關鍵字解釋:web api:遠端的兩個ip之間,進行通訊交換資料的時...

鐵人賽 Modern Web DAY 1

技術 Day 1. Pre-Start × 微前言

行前導讀 第一次參加鐵人賽的你,先禮貌性來個自我介紹吧?! 嗨大家好! This is Ian , 24 歲身心理男。 Position : RD —...

鐵人賽 Modern Web DAY 1

達標好文 技術 Day 01 X 系列文大綱

大家好,我是 Kyle,大家也可以叫我老莫,這次是連續第三年參加 iT 邦幫忙鐵人賽了,每次都說太累了明年絕對不比了,結果活動頁一出來還是覺得很熱血就又報名了...

鐵人賽 Modern Web DAY 1

技術 Angular 深入淺出三十天:表單與測試 Day01 - 前言

何謂表單? 維基百科是這樣說的: 表單是一種帶有空格可用於書寫以及能選擇和勾選相似內容的文件。 表單可用於填寫聲明、請求、命令、支票、稅單。 網頁...

鐵人賽 Modern Web DAY 1

技術 Day1 Sideproject(作品集) from 0 to 1 -簡介

嗨~大家好,小弟目前任職於一間小公司,負責前端的部分,而我的夥伴,則是在一間比較大的公司負責後端的部分(實作經驗比我多半年但公司寫的是20年前的語言了) 這次分...

鐵人賽 Security DAY 1
【CTF衝衝衝 - Web篇】 系列 第 1

技術 【第一天 - CTF介紹】

CTF 全名 Capture The Flag,並且分為下列幾類的解題方式 解謎式(Jeopardy),每一題都會有分數,解題越多分數越高,目前大部分 CT...

鐵人賽 Modern Web DAY 7

技術 #7 Web Layout: CSS Fundamentals

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

鐵人賽 Modern Web DAY 4

技術 #4 CSS Box Model, Selector, Absolute/Relative Position

CSS Box Model Frame & tag design: <div style="padding:10px;width:30...