iT邦幫忙

web相關文章
共有 276 則文章

技術 [Sass]造輪子-用@mixin做一個簡單的loading動畫

話不多說,先上成果! 思考迴路: 撰寫keyframes使每個點上下移動(transform),我們命名這個keyframe為waving 每個點都具備...

技術 [JS]透過IntersectionObserver達成個別/全頁圖片lazy load

當撰寫顯示多個(例如:展示數百筆廣告)圖片的網頁時,效能與用戶體驗主要有以下課題: 如何節省不必要的加載(不加載使用者還沒看到的) 批次載入圖片(每次載入10...

技術 [JS]使用babel 轉譯 ES7 的 Async function(適用於瀏覽器)--3(完)

本篇主旨:透過babel轉譯使用Async function的js檔,使其可在瀏覽器(非Node環境)運行 上篇 閱前注意: 本篇為個人使用筆記,為供未來使用,...

技術 [JS]使用babel 轉譯 ES7 的 Async function(適用於瀏覽器)--2

本篇主旨:透過babel轉譯使用Async function的js檔,使其可在瀏覽器(非Node環境)運行 上篇 閱前注意: 本篇為個人使用筆記,為供未來使用,...

技術 [JS]使用babel 轉譯 ES7 的 Async function(適用於瀏覽器)--1

本篇主旨:透過babel轉譯使用Async function的js檔,使其可在瀏覽器(非Node環境)運行 閱前注意: 本篇為個人使用筆記,為供未來使用,會包...

技術 領進前端門,修行在個人:一變應萬變的響應式網頁設計(2) - 常見版型佈局設定

禁止顯示x軸法則 在開發響應式網頁時最切記的就是不能出現x軸,為什麼呢? 當使用者瀏覽時,若畫面有x軸也有y軸時,使用者必須上下左右滑動去瀏覽,這樣對於使用者體...

技術 【SSL憑證申請教學:HTTPS時代來臨,免費與付費SSL憑證安裝教學】

SSL的好處: 資訊安全度提升:避免駭客攔截你的網路請求 用戶信任度提升:有綠色小勾勾在網址欄上,使用者對企業信任度提高 SEO排名上升:有利於潛在...

技術 領進前端門,修行在個人:一變應萬變的響應式網頁設計(1) - 基本環境、觀念

基本環境建立 因為各個不同的手機有不同的寬度,如下圖 如果要符合每個不同的解析度去做開發,會導致開發上非常困難,所以需要加入以下這段語法 <meta n...

徵才 (台北內湖)徵求 資深UI/UX設計師 #歡迎挑戰高薪 月薪80000元-200000元

徵求 資深UI/UX設計師 #歡迎挑戰高薪 公司穩定 待遇福利佳 待遇月薪80000元~200000元 職務說明: 1.負責公司產品APP、Web、H5等的使用...

技術 Portswigger Lab: Username enumeration via response timing

前言 最近剛退伍了~~~ 南部的缺好像沒很多QQ 許多HTB機器的沒寫到 但最近覺得該提升一下Web方面 因此打算開始做Portswigger的labs 題目...

徵才 徵求 QA測試工程師/資深工程師 歡迎挑戰高新 公司穩定 福利制度佳

徵求 QA測試工程師/資深工程師 公司穩定 福利制度佳 具備市場競爭力薪資 挑戰自我 挑戰高薪 工作內容: 1.Android/iOS/Web 軟體測試規劃,管...

技術 Week13 - CORS保護了什麼你是否有所誤解?或許你的Server已陷入危險中? - CORS解釋篇 [Server的終局之戰系列]

本文章同時發佈於: Medium iT邦幫忙 大家好,是否大家在設計前端時,很常遇到跨來源資源共用 - CORS的問題呢? 通常這時候我們會趕快...

技術 IT居家防疫工作要領(免費ampps建置篇)

今年1月20日新冠肺炎新聞爆發以來,有見識的老闆紛紛主動關心此議題 假設公司或大樓有人確診,所有同仁居家隔離14天,要如何在家上班呢? 我們IT能做的前置工作有...

技術 [筆記] React 如何使用 Redux-Observable 及 Google Map Api:副線打怪一下(3) - Finish

口罩即時查 先附上作品網址及成果展示:口罩即時查 功能(電腦、平板、手機皆可觀看) 電腦版 ᴘᴄ 平板 ᴛ 手機版 ᴍ 定位 - 在地圖上顯示目前位置 ᴘ...

技術 [筆記] React 如何使用 Redux-Observable:副線打怪一下(2)

為何要使用Redux-Observable? 首先,一開始我們都知道redux跟react搭配的很好,redux扮演著資料倉儲的角色,但是許多的side eff...

技術 [筆記] React 如何使用 Redux-Observable:副線打怪一下(1)

題外話一下XD 最近的武漢肺炎實在是太猖狂了 在今天早上得知中國竟然連北京都淪陷了,進而封城了,這武漢肺炎真的是很母湯!!(中國北京封城) 因為武漢肺炎的關係,...

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

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

鐵人賽 自我挑戰組 DAY 29
前端新手進化史 系列 第 29

技術 flex 7

文章將陸續整理並更新至個人部落格。 flex 有自己專屬的對齊屬性,vertical-align、text-align 甚至 float 都是叫不動...

鐵人賽 自我挑戰組 DAY 28
前端新手進化史 系列 第 28

技術 flex 6

文章將陸續整理並更新至個人部落格。 vertical-align、text-align 甚至 float 都是叫不動 flex items 的,fle...

鐵人賽 自我挑戰組 DAY 27
前端新手進化史 系列 第 27

技術 flex 5

文章將陸續整理並更新至個人部落格。 上一篇文章 中說明了 flex 屬性是 flex-grow、flex-shrink、flex-basis 三個屬性...

鐵人賽 自我挑戰組 DAY 26
前端新手進化史 系列 第 26

技術 flex 4

文章將陸續整理並更新至個人部落格。 今天將介紹 flex 屬性,在這之前先來了解一下 positive free space 與 negative f...

鐵人賽 自我挑戰組 DAY 25
前端新手進化史 系列 第 25

技術 flex 3

文章將陸續整理並更新至個人部落格。 在上一篇文章中介紹了 flex-direction 以及主軸(main axis)與副軸(cross axis)的...

鐵人賽 自我挑戰組 DAY 24
前端新手進化史 系列 第 24

技術 flex 2

文章將陸續整理並更新至個人部落格。 先前介紹格式化上下文(formatting context)時,曾說到 container box 會為其內容建立...

鐵人賽 自我挑戰組 DAY 23
前端新手進化史 系列 第 23

技術 flex 1

文章將陸續整理並更新至個人部落格。 前言 先前介紹格式化上下文(formatting context)時,曾說到 container box 會為其內...

鐵人賽 自我挑戰組 DAY 22
前端新手進化史 系列 第 22

技術 替換元素 replaced element

文章將陸續整理並更新至個人部落格。 前言 替換元素雖然預設為 display: inline,但又與一般常見的 inline element 不同,準...

鐵人賽 自我挑戰組 DAY 21
前端新手進化史 系列 第 21

技術 旋轉吧 rotate3d

文章將陸續整理並更新至個人部落格。 今天不看 spec 哈哈,來現學現賣熱騰騰剛學到的新招式~ 以前很俗的只知道一般的 rotate,完全不知道還有這...

鐵人賽 自我挑戰組 DAY 20
前端新手進化史 系列 第 20

技術 淺談 line box 高度

文章將陸續整理並更新至個人部落格。 前言 所有 inline-level elements 所生成的 inline-level boxes 皆會參與行...

鐵人賽 自我挑戰組 DAY 19
前端新手進化史 系列 第 19

技術 視覺格式化模型 - 行內格式化上下文(IFC)

文章將陸續整理並更新至個人部落格。 前言 所有元素(element)都可以生成盒子(box),什麼類型的元素,生成什麼類型的盒子,盒子可以裝盒子,整個...

鐵人賽 自我挑戰組 DAY 18
前端新手進化史 系列 第 18

技術 視覺格式化模型-塊格式化上下文(BFC)

文章將陸續整理並更新至個人部落格。 在先前的文章中提到不少次「BFC」,今天就來看看 BFC 是什麼,它又有什麼用處~ 塊格式化上下文 (BFC)...

鐵人賽 自我挑戰組 DAY 17
前端新手進化史 系列 第 17

技術 視覺格式化模型-格式化上下文

文章將陸續整理並更新至個人部落格。 前言 所有元素(element)都可以生成盒子(box),什麼類型的元素,生成什麼類型的盒子,盒子可以裝盒子,整個...