前端小智

前端小智 查看完整檔案

廈門編輯Plymouth  |  前端 編輯大遷世界  |  Web前端攻城獅 編輯 github.com/qq449245884/xiaozhi 編輯
編輯

我不是什么大牛,我其實想做的就是一個傳播者。內容可能過于基礎,但對于剛入門的人來說或許是一個窗口,一個解惑之窗。我要先堅持分享20年,大家來一起見證吧。

個人動態

前端小智 發布了文章 · 今天 08:07

10個HTML文件上傳技巧

作者: Tapas Adhikary
譯者:前端小智
來源:dev
點贊再看,養成習慣

本文 GitHubhttps://github.com/qq44924588... 上已經收錄,更多往期高贊文章的分類,也整理了很多我的文檔,和教程資料。歡迎Star和完善,大家面試可以參照考點復習,希望我們一起有點東西。

最近開源了一個 Vue 組件,還不夠完善,歡迎大家來一起完善它,也希望大家能給個 star 支持一下,謝謝各位了。

github 地址:https://github.com/qq44924588...

簡介

上傳文件功能可以說是項目經常出現的需求。從在社交媒體上上傳照片到在求職網站上發布簡歷,文件上傳無處不在。在本文中,我們將討論 HTML文件上傳支持的10種用法,希望對你有用。

1. 單文件上傳

我們可以將input 類型指定為file,以在Web應用程序中使用文件上傳功能。

<input type="file" id="file-uploader">

input filte 提供按鈕上傳一個或多個文件。 默認情況下,它使用操作系統的本機文件瀏覽器上傳單個文件。成功上傳后,File API 使得可以使用簡單的 JS 代碼讀取File對象。 要讀取File對象,我們需要監聽 change事件。

首先,通過id獲取文件上傳的實例:

const fileUploader = document.getElementById('file-uploader');

然后添加一個change 事件偵聽器,以在上傳完成后讀取文件對象, 我們從event.target.files屬性獲取上傳的文件信息:

fileUploader.addEventListener('change', (event) => {
  const files = event.target.files;
  console.log('files', files);
});

在控制臺中觀察輸出結果,這里關注一下FileList數組和File對象,該對象具有有關上傳文件的所有元數據信息。

clipboard.png

如果大家看到這里,有點激動,想手賤一下,可以 CodePen 玩玩,地址:https://codepen.io/atapas/pen...

2. 多文件上傳

如果我們想上傳多個文件,需要在標簽上添加 multiple 屬性:

<input type="file" id="file-uploader" multiple />

現在,我們可以上傳多個文件了,以前面事例為基礎,選擇多個文件上傳后,觀察一下控制臺的變化:

clipboard.png

如果大家看到這里,有點激動,想手賤一下,可以 CodePen 玩玩,地址:https://codepen.io/atapas/pen...

3.了解文件元數據

每當我們上傳文件時,File對象都有元數據信息,例如file name,size,last update time,type 等等。這些信息對于進一步的驗證和特殊處理很有用。

const fileUploader = document.getElementById('file-uploader');

// 聽更 change 件并讀取元數據
fileUploader.addEventListener('change', (event) => {
  // 獲取文件列表數組
  const files = event.target.files;

  // 遍歷并獲取元數據
  for (const file of files) {
    const name = file.name;
    const type = file.type ? file.type: 'NA';
    const size = file.size;
    const lastModified = file.lastModified;
    console.log({ file, name, type, size, lastModified });
  }
});

下面是單個文件上傳的輸出結果:

clipboard.png

如果大家看到這里,有點激動,想手賤一下,可以 CodePen 玩玩,地址:https://codepen.io/atapas/pen...

4.了解 accept 屬性

我們可以使用accept屬性來限制要上載的文件的類型,如果只想上傳的文件格式是 .jpg,.png 時,可以這么做:

<input type="file" id="file-uploader" accept=".jpg, .png" multiple>

在上面的代碼中,只能選擇后綴是.jpg.png的文件。

如果大家看到這里,有點激動,想手賤一下,可以 CodePen 玩玩,地址:https://codepen.io/atapas/pen...

5. 管理文件內容

成功上傳文件后顯示文件內容,站在用戶的角度上,如果上傳之后,沒有一個預覽的,就很奇怪也不體貼。

我們可以使用FileReader對象將文件轉換為二進制字符串。 然后添加load 事件偵聽器,以在成功上傳文件時獲取二進制字符串。

// FileReader 實例
const reader = new FileReader();

fileUploader.addEventListener('change', (event) => {
  const files = event.target.files;
  const file = files[0];

  reader.readAsDataURL(file);

  reader.addEventListener('load', (event) => {
    const img = document.createElement('img');
    imageGrid.appendChild(img);
    img.src = event.target.result;
    img.alt = file.name;
  });
});

如果大家看到這里,有點激動,想手賤一下,可以 CodePen 玩玩,地址:https://codepen.io/atapas/pen...

6.驗證文件大小

如果用戶上傳圖片過大,為了不讓服務器有壓力,我們需要限制圖片的大小,下面是允許用戶上傳小于 1M 的圖片,如果大于 1M 將上傳失敗。

fileUploader.addEventListener('change', (event) => {
  // Read the file size
  const file = event.target.files[0];
  const size = file.size;

  let msg = '';

 // 檢查文件大小是否大于1MB
  if (size > 1024 * 1024) {
      msg = `<span style="color:red;">The allowed file size is 1MB. The file you are trying to upload is of ${returnFileSize(size)}</span>`;
  } else {
      msg = `<span style="color:green;"> A ${returnFileSize(size)} file has been uploaded successfully. </span>`;
  }
  feedback.innerHTML = msg;
});

如果大家看到這里,有點激動,想手賤一下,可以 CodePen 玩玩,地址:https://codepen.io/atapas/pen...

7. 顯示文件上傳進度

更好的用戶體驗是讓用戶知道文件上傳進度,前面我們用過了FileReader以及讀取和加載文件的事件。

const reader = new FileReader();

FileReader還有一個progress 事件,表示當前上傳進度,配合HTML5的progress標簽,我們來模擬一下文件的上傳進度。

reader.addEventListener('progress', (event) => {
  if (event.loaded && event.total) {
    // 計算完成百分比
    const percent = (event.loaded / event.total) * 100;
    // 將值綁定到 `progress`標簽
    progress.value = percent;
  }
});

clipboard.png

如果大家看到這里,有點激動,想手賤一下,可以 CodePen 玩玩,地址:https://codepen.io/atapas/pen...

8. 怎么上傳目錄上傳?

我們可以上傳整個目錄嗎?嗯,這是可能的,但有一些限制。有一個叫做webkitdirectory的非標準屬性(目前只有谷歌瀏覽器還有Microsoft Edge支持按照文件夾進行上傳),它允許我們上傳整個目錄。

目前只有谷歌瀏覽器還有Microsoft Edge支持按照文件夾進行上傳,具體可以看下百度云盤的網頁版的上傳按鈕,在火狐下就支持按照文件進行上傳,而在谷歌和Edge下,就會給用戶提供一個下拉,讓用戶選擇是根據文件進行上傳還是根據文件夾進行上傳。
<input type="file" id="file-uploader" webkitdirectory />

用戶必須需要確認才能上傳目錄

clipboard.png

用戶單擊“上傳”按鈕后,就會進行上傳。 這里要注意的重要一點。 FileList數組將以平面結構的形式包含有關上載目錄中所有文件的信息。 對于每個File對象,webkitRelativePath屬性表示目錄路徑。

例如,上傳一個主目錄及其下的其他文件夾和文件:

clipboard.png

現在,File 對象將將webkitRelativePath填充為:

clipboard.png

如果大家看到這里,有點激動,想手賤一下,可以 CodePen 玩玩,地址:https://codepen.io/atapas/pen...

9. 拖拽上傳

不支持文件上傳的拖拽就有點 low 了,不是嗎?我們來看看如何通過幾個簡單的步驟實現這一點。

首先,創建一個拖放區域和一個可選的區域來顯示上傳的文件內容。

<div id="container">
  <h1>Drag & Drop an Image</h1>
  <div id="drop-zone">
    DROP HERE
  </div>

  <div id="content">
    Your image to appear here..
  </div>

</div>

通過它們各自的ID獲取dropzonecontent 區域。

 const dropZone = document.getElementById('drop-zone');
 const content = document.getElementById('content');

添加一個dragover 事件處理程序,以顯示將要復制的內容的效果:

dropZone.addEventListener('dragover', event => {
  event.stopPropagation();
  event.preventDefault();
  event.dataTransfer.dropEffect = 'copy';
});

clipboard.png

接下來,我們需要一個drop事件監聽器來處理。

dropZone.addEventListener('drop', event => {
  // Get the files
  const files = event.dataTransfer.files;


});

如果大家看到這里,有點激動,想手賤一下,可以 CodePen 玩玩,地址:https://codepen.io/atapas/pen...

10. 使用objectURL處理文件

有一個特殊的方法叫做URL.createobjecturl(),用于從文件中創建唯一的URL。還可以使用URL.revokeObjectURL()方法來釋放它。

URL.revokeObjectURL() 靜態方法用來釋放一個之前已經存在的、通過調用 URL.createObjectURL() 創建的 URL 對象。當你結束使用某個 URL 對象之后,應該通過調用這個方法來讓瀏覽器知道不用在內存中繼續保留對這個文件的引用了。

fileUploader.addEventListener('change', (event) => {
  const files = event.target.files;
  const file = files[0];
  
  const img = document.createElement('img');
  imageGrid.appendChild(img);
  img.src = URL.createObjectURL(file);
  img.alt = file.name;
});

如果大家看到這里,有點激動,想手賤一下,可以 CodePen 玩玩,地址:https://codepen.io/atapas/pen...

總結

無論何時,如果你還想學習本文涉及的一些知識,你可以在這里嘗試。

https://html-file-upload.netl...


代碼部署后可能存在的BUG沒法實時知道,事后為了解決這些BUG,花了大量的時間進行log 調試,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文:https://dev.to/atapas/10-usef...

交流

文章每周持續更新,可以微信搜索「 大遷世界 」第一時間閱讀和催更(比博客早一到兩篇喲),本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄,整理了很多我的文檔,歡迎Star和完善,大家面試可以參照考點復習,另外關注公眾號,后臺回復福利,即可看到福利,你懂的。

查看原文

贊 6 收藏 6 評論 0

前端小智 發布了文章 · 2月26日

30道CSS 面試知識點總結

譯者:前端小智
來源:codersera.
點贊再看,微信搜索大遷世界,B站關注前端小智這個沒有大廠背景,但有著一股向上積極心態人。本文 GitHubhttps://github.com/qq44924588... 上已經收錄,文章的已分類,也整理了很多我的文檔,和教程資料。

CSS是層疊樣式表( Cascading Style Sheets )的縮寫,是一種樣式表語言,用于描述以 HTML 之類的標記語言編寫的文檔的布局。 它是用于設計Web頁面的三劍客之一,另外兩位浩客是HTMLJavascript。

CSS 的設計目的是使樣式和內容分離,包括布局、顏色和字體。這種分離可以提高內容的可訪問性,在樣式特征的規范中提供更多的靈活性和控制,通過在一個單獨的. .css 文件中指定相關的 CSS,使多個 web 頁面能夠共享格式,并減少結構內容中的復雜性和重復。

它具有簡單的語法,并使用大量的英文關鍵字來指定各種樣式屬性的名稱。

既然我們已經討論了CSS的基礎知識,讓我們來觀察一下基于CSS的重要面試問題。

clipboard.png

問題1:什么是 CSS?

CSS(層疊樣式表)是一種樣式語言,對于 HTML 元素來說足夠簡單。 它在網頁設計中非常流行,其應用在XHTML中也很常見。

問題2:為什么要開發CSS?

CSS是在1997年開發的,作為一種web開發人員設計他們正在創建的web頁面布局的方法。它的目的是讓開發者將網站代碼的內容和結構從視覺設計中分離出來。

這種結構和設計的分離允許HTML執行比原來更多的功能。

問題3:CSS的主要版本有哪些?

CSS的不同版本:

  1. CSS1
  2. CSS2
  3. CSS2.1
  4. CSS3

問題4:CSS樣式的組成部分是什么?

一個樣式規則由三部分組成:

  1. 選擇器–選擇器是 HTML 標記,用于選擇要設置樣式的內容。 它根據其ID,類和名稱選擇 HTML元素。
  2. 屬性–屬性是 HTML 標簽的一種屬性。 簡而言之,所有 HTML 屬性都轉換為 CSS 屬性。
  3. – CSS中的值定義CSS屬性的一組有效值。

問題 5:有多少種方法可以將 CSS 集成為 web 頁面

CSS 可以集成為三種方式

  1. 內聯:直接在HTML元素上使用
<p style=”colour:skyblue;”>hello world</p>
  1. 外部:在工作空間中創建單獨的CSS文件,然后在創建的每個web頁面中鏈接它們
<head>

<link rel=”text/css”href=”your_CSS_file_location”/>

</head>
  • 內部: web 頁面的 head 元素在其中實現了內部 CSS。
head>
     <style> 
             P{
                   color : lime;
               background-color:black;
                }
     </style>
</head>

問題 6:誰在維護 CSS 規范?

萬維網協會維護 CSS規范。

問題 7:偽元素是什么意思?

偽元素是添加到選擇器的關鍵字,它允許一種樣式,即所選元素的特定部分。CSS用于在HTML標記中應用樣式,它允許在不影響實際文檔的情況下對文檔進行額外標記。它可以用來:

  1. 為第一個字母、行或元素設置樣式。
  2. 插入內容

語法:

Selector: :pseudo-element
{Property1 :value;
Property2 :value;}

問題 8:CSS有什么優勢?

CSS的優點是:

  1. 一致性 – CSS有助于構建一致的框架,設計人員可以使用該框架來構建其他站點。 因此,網頁設計師的效率也提高了。
  2. 易于使用 – CSS 是非常容易學習和簡化網站開發。所有代碼都放在一個頁面上,這意味著對代碼行進行改進或編輯不需要重復修改多個頁面.
  3. *網站速度 *– 通常,一個網站使用的代碼最多可以達到 2 頁或更多。但是對于CSS,這不是問題。它只需要2-3行代碼,因此,網站數據庫保持整潔,消除任何網站加載問題。
  4. 設備兼容性 – 由于人們使用不同類型的智能設備訪問互聯網,因此需要響應式web設計。CSS 在這里的作用是使 web 頁面的響應性更好,這樣它們就可以在所有設備中以相同的方式顯示。
  5. 多瀏覽器支持 – CSS享有多瀏覽器的支持,它與所有主要的互聯網瀏覽器兼容。
  6. 重新定位 – CSS允許您定義頁面上 web 元素位置的變化。通過它的實現,開發人員可以將 HTML 元素放置在他們喜歡的位置,以便與頁面的美學吸引力或其他考慮因素保持一致。

問題9:CSS 漸變是什么?

漸變是指我們在兩幅圖像之間創建中間幀,以獲得第一幅圖像的外觀,然后發展成第二幅圖像的過程,它主要用于創建動畫。

問題10:什么是 CSS 特異性?

CSS 特定性是一個分數或等級,它決定了元素必須使用哪種樣式聲明。 CSS 中有四類可以授權選擇器的特異性級別:

  1. 內聯樣式
  2. ID
  3. 類,屬性和偽類
  4. 元素和偽元素

問題12:CSS有什么缺點

CSS的缺點有:

  1. 版本太多 – 與HTML或Javascript等其他參數相比,CSS有很多版本-CSS1,CSS2,CSS2.1,CSS3。 因此,CSS變得非?;靵y,尤其是對于初學者。
  2. 缺乏安全性 - 由于CSS是基于開放文本的系統,因此它沒有內置的安全系統來防止其被覆蓋。 通過對其讀/寫操作的訪問,任何人都可以更改 CSS 文件并更改鏈接。
  3. Fragmentation - 使用 CSS,可能無法在一個瀏覽器上使用另一瀏覽器。 因此,在網站上線之前,Web 開發人員必須通過在多個瀏覽器上運行程序來測試兼容性。
  4. 復雜性–使用 Microsoft FrontPage 等第三方軟件會使CSS變得復雜。

問題13:什么是 RWD (Responsive Web Design)?

RWD(響應式Web設計)技術用于在每種屏幕尺寸以及移動,平板電腦,臺式機和筆記本電腦等設備上完美顯示設計頁面,讓我們無需為每個設備創建不同的頁面。

問題14:CSS 精靈有什么好處?

CSS精靈的好處有:

  1. 通過將各種小圖像組合成一個圖像,減少了web頁面的加載時間。
  2. 減少HTTP請求,從而減少加載時間。

問題 15:什么是 CSS 上下文選擇器?

上下文選擇器,嚴格來講,叫后代組合式選擇器,就是一組以空格分隔的標簽名。用于選擇作為指定祖先元素后代的標簽。只要有標簽在它的層次結構“上游”存在這么一個祖先,那么就會選中該標簽。無論從該標簽到作為祖先的上下文之間隔著多少層次都沒有關系。


大家都說簡歷沒項目寫,我就幫大家找了一個項目,還附贈【搭建教程】。

我和阿里云合作服務器,折扣價比較便宜:89/年,223/3年,比學生9.9每月還便宜,買了搭建個項目,熟悉技術棧比較香(老用戶用家人賬號買就好了,我用我媽的)推薦買三年的劃算點,點擊本條就可以查看。


問題 16:什么是漸進增強和平穩退化?

漸進增強的概念是指從最基本的可用性出發,在保證站點頁面在低級瀏覽器中 的可用性和可訪問性的基礎上,逐步增加功能及提高用戶體驗。本質上講,我們日常的一些開發習慣,例如首先使用標記語言編寫頁面,然后通過樣式表來控制頁面 樣式等,都屬于漸進增強的概念;其他更為明顯的行為包括使用HTML5、CSS3等新技術,針對高級瀏覽器為頁面提高用戶體驗的豐富程度。

平穩退化的概念是指首先使用最新的技術面向高級瀏覽器構建最強的功能及用戶體驗,然后針對低級瀏覽器的限制,逐步衰減那些無法被支持的功能及體驗;在我們日常的開 發中,一個典型的平穩退化的例子就是首先針對Chrome編寫頁面代碼,然后修復IE中的異?;蜥槍E去除那些無法被實現的功能特色.

所以, 這兩個概念方法其實早已并存在我們的日常開發工作中了,只是“漸進增強”與“平穩退化”這樣的措辭是近些年才開始被普及。在我們眼下的HTML5與 CSS3實戰用,這兩個概念就尤其重要了,怎樣保證使用不斷變化的新技術來構建在主流瀏覽器下都具有基本可用性的站點,并針對高級瀏覽器進行體驗提升,這 些是我們在開發過程中需要明確的思路。

問題 17:我們如何在網頁上添加圖標?

我們可以使用諸如font-awesome或者阿里的 iconfont 之類的圖標庫將圖標添加到HTML網頁。 我們必須將給定圖標類的名稱添加到任何內聯HTML元素中。 (<i><span>)。 圖標庫中的圖標是可縮放的矢量,可以使用CSS進行自定義。

問題 18:哪個屬性指定邊框的寬度?

border-width指定邊框的寬度。

問題 19:如何區分物理標簽和邏輯標簽?

物理標簽被稱為表示標記,而邏輯標簽對于外觀是無用的。物理標簽是較新的版本,而邏輯標簽是舊的并且專注于內容。

如題,我們的標簽元素寫上后,瀏覽器就會渲染出結果,但不僅僅是這么簡單

//物理元素
<b>我想用b標簽加粗</b>
 
//邏輯元素
<strong>我想用strong標簽加粗</strong>
 
//兩段文字都加粗了,而且視覺效果完全一樣

確實,文字加粗了,兩者都達到了我們想要的目的,但是我們忽略了一個問題,既然b標簽可以加粗,那么strong這個標簽同樣是加粗,存在的 意義又是什么呢?既然W3C定義了兩個,它們之間的不同點是什么呢?它們之間的相同點又是什么呢?

物理元素

物理元素,又叫實體標簽,它所做的是一種物理行為,比如上面我把一段文字用b標簽加粗了,它所傳達的給瀏覽器,告訴瀏覽器 我要加粗這段文字,從單詞Bold中也可以看出來,英文中僅僅是加粗的意思,并沒有其他作用??偨Y來說就是一句話: 物理元素就是告訴瀏覽器該怎么顯示出來。

邏輯元素

邏輯元素,從英文字面上Strong就可以看出它是強調的意思,所以我們用這個邏輯元素(如上strong)來向瀏覽器傳達 一個強調某段文字重要性的消息,說明此文字較為重要,也有利于搜索引擎收錄。

Web標準主張XHTML不涉及具體的表現形式,“強調”可以用加粗來強調,也可以用別的方式強調,也可以通過css來改變strong的具體表現 ,還有就是并不是有了strong邏輯標簽,就不用b標簽來表示字體加粗了,b標簽和strong標簽默認情況下強調的效果一致,strong完全可以定義成別的樣式,用來強調 效果,但是最好符合W3C標準,它更提倡內容與樣式分離,所以單純為了達到加粗而使用b標簽不建議這樣做, 從XHTML文檔有意義性及用戶體驗角度來說,strong邏輯標簽更加合適,而SEO方面,則針對優化情況而定。

問題 20:如何在CSS中定義一個偽類?它們是用來干什么的

CSS偽類是用來添加一些選擇器的特殊效果。偽類的語法

selector:pseudo-class{property:value;}

問題 21:CSS和SCSS有什么區別?

CSSSCSS 之間的區別如下:

  1. CSS是一種用于設計web頁面的樣式語言,而SCSS用于為瀏覽器組合CSS樣式表。
  2. SCSS 提供了一些變量,可以使用這些變量來縮短代碼,這是與 CSS 相比的一大優勢。

問題 22:嵌入式樣式表的優缺點是什么?

嵌入式樣式表的優點:

  1. 可以在一個文檔中創建多種標簽類型。
  2. 在復雜情況下,可以使用選擇器和分組方法來應用樣式。
  3. 無需額外下載。

嵌入式樣式表的缺點:

無法控制多個文檔。

問題 23:列出使用的各種媒體類型。

不同的介質不區分大小寫,因此它們具有不同的屬性。 他們是:

  1. aural - 用于語音和音頻合成器
  2. print - 用于打印機
  3. projection - 用于方案展示,比如幻燈片
  4. handheld - 用于小的手持的設備
  5. screen - 用于電腦顯示器

問題 24:font 的屬性有哪些?

  1. Font-style
  2. Font-variant
  3. Font-weight
  4. Font-size/line-weight
  5. Font-family

問題 25:“規則集”是什么意思?

該指令告訴瀏覽器如何在HTML頁面上渲染特定元素。 它由一個選擇器和一個遵循規則集的聲明塊組成。 選擇器可以附加到其他選擇器,以通過規則集進行標識。

問題 26:什么是 CSS 框架?

CSS 框架是一個庫,它允許使用CSS語言進行更輕松,更符合標準的Web設計。 這些框架中的大多數至少包含一個網格以及更多功能和其他基于Javascript的功能。 一些著名的CSS框架有:ACSS,Bulma,YAML,Foundation等。

問題 27:簡單介紹使用圖片 base64 編碼的優點和缺點。

base64編碼是一種圖片處理格式,通過特定的算法將圖片編碼成一長串字符串,在頁面上顯示的時候,可以用該字符串來代替圖片的
url屬性。
使用base64的優點是:
(1)減少一個圖片的HTTP請求
使用base64的缺點是:
(1)根據base64的編碼原理,編碼后的大小會比原文件大小大1/3,如果把大圖片編碼到html/css中,不僅會造成文件體
積的增加,影響文件的加載速度,還會增加瀏覽器對html或css文件解析渲染的時間。
(2)使用base64無法直接緩存,要緩存只能緩存包含base64的文件,比如HTML或者CSS,這相比域直接緩存圖片的效果要
差很多。
(3)兼容性的問題,ie8以前的瀏覽器不支持。
一般一些網站的小圖標可以使用base64圖片來引入。

問題 28: 對 BFC 規范(塊級格式化上下文:block formatting context)的理解?

BFC指的是塊級格式化上下文,一個元素形成了BFC之后,那么它內部元素產生的布局不會影響到外部元素,外部元素的布局也
不會影響到BFC中的內部元素。一個BFC就像是一個隔離區域,和其他區域互不影響。
一般來說根元素是一個BFC區域,浮動和絕對定位的元素也會形成BFC,display屬性的值為inline-block、flex這些
屬性時也會創建BFC。還有就是元素的overflow的值不為visible時都會創建BFC。

問題 29: IFC 是什么?

IFC指的是行級格式化上下文,它有這樣的一些布局規則:
(1)行級上下文內部的盒子會在水平方向,一個接一個地放置。
(2)當一行不夠的時候會自動切換到下一行。
(3)行級上下文的高度由內部最高的內聯盒子的高度決定。

問題 30: CSS 優化、提高性能的方法有哪些?

加載性能:
(1)css壓縮:將寫好的css進行打包壓縮,可以減少很多的體積。
(2)css單一樣式:當需要下邊距和左邊距的時候,很多時候選擇:margin:top 0 bottom 0;但margin-bottom:bot
tom;margin-left:left;執行的效率更高。
(3)減少使用@import,而建議使用link,因為后者在頁面加載時一起加載,前者是等待頁面加載完成之后再進行加載。
選擇器性能:
(1)關鍵選擇器(key selector)。選擇器的最后面的部分為關鍵選擇器(即用來匹配目標元素的部分)。CSS選擇符是從右到
左進行匹配的。當使用后代選擇器的時候,瀏覽器會遍歷所有子元素來確定是否是指定的元素等等;
(2)如果規則擁有ID選擇器作為其關鍵選擇器,則不要為規則增加標簽。過濾掉無關的規則(這樣樣式系統就不會浪費時間去匹
配它們了)。
(3)避免使用通配規則,如*{}計算次數驚人!只對需要用到的元素進行選擇。
(4)盡量少的去對標簽進行選擇,而是用class。
(5)盡量少的去使用后代選擇器,降低選擇器的權重值。后代選擇器的開銷是最高的,盡量將選擇器的深度降到最低,最高不要超過
三層,更多的使用類來關聯每一個標簽元素。
(6)了解哪些屬性是可以通過繼承而來的,然后避免對這些屬性重復指定規則。
渲染性能:
(1)慎重使用高性能屬性:浮動、定位。
(2)盡量減少頁面重排、重繪。
(3)去除空規則:{}??找巹t的產生原因一般來說是為了預留樣式。去除這些空規則無疑能減少css文檔體積。
(4)屬性值為0時,不加單位。
(5)屬性值為浮動小數0.**,可以省略小數點之前的0。
(6)標準化各種瀏覽器前綴:帶瀏覽器前綴的在前。標準屬性在后。
(7)不使用@import前綴,它會影響css的加載速度。
(8)選擇器優化嵌套,盡量避免層級過深。
(9)css雪碧圖,同一頁面相近部分的小圖標,方便使用,減少頁面的請求次數,但是同時圖片本身會變大,使用時,優劣考慮清
楚,再使用。
(10)正確使用display的屬性,由于display的作用,某些樣式組合會無效,徒增樣式體積的同時也影響解析性能。
(11)不濫用web字體。對于中文網站來說WebFonts可能很陌生,國外卻很流行。web fonts通常體積龐大,而且一些瀏
覽器在下載web fonts時會阻塞頁面渲染損傷性能。
可維護性、健壯性:
(1)將具有相同屬性的樣式抽離出來,整合并通過class在頁面中進行使用,提高css的可維護性。
(2)樣式與內容分離:將css代碼定義到外部css中。

代碼部署后可能存在的BUG沒法實時知道,事后為了解決這些BUG,花了大量的時間進行log 調試,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文:https://codersera.com/blog/to...


交流

文章每周持續更新,可以微信搜索【大遷世界 】第一時間閱讀,回復【福利】有多份前端視頻等著你,本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄,歡迎Star。

查看原文

贊 14 收藏 10 評論 2

前端小智 發布了文章 · 2月19日

8 種用于前端性能分析工具

作者:Mahdhi Rezvi
譯者:前端小智
來源:blog.bitsrc
點贊再看,微信搜索大遷世界,B站關注前端小智這個沒有大廠背景,但有著一股向上積極心態人。本文 GitHubhttps://github.com/qq44924588... 上已經收錄,文章的已分類,也整理了很多我的文檔,和教程資料。

最近開源了一個 Vue 組件,還不夠完善,歡迎大家來一起完善它,也希望大家能給個 star 支持一下,謝謝各位了。

github 地址:https://github.com/qq44924588...

我們可以編寫一些漂亮,且吸引人的網站,但如果該網站無法快速加載到瀏覽器中,人們往往會跳過它。 盡管有許多性能規則,但歸根結底,這全都取決于加載時間。

根據 Jakob Nielson說法,在網建的網站時,需要注意以下幾點:

  • 小于100毫秒加載速度才是爽的
  • 100ms到300ms 感覺良好
  • 一秒鐘大概是用戶思路不被打斷的極限。用戶會感覺到延遲,但還可以接受
  • 47%的用戶希望網頁能在兩秒或更短的時間內加載
  • 40% 的用戶如果網頁加載超過 3 秒,表示會放棄該網站
  • 10秒左右是用戶注意力的極限。 大多數用戶會在10秒后離開你的網站

如上所述,即使在最差的網絡帶寬上,也需要確保頁面盡快加載。 但這個說起來容易做起來難。

為了能幫助更好的實現這一目標,這里推薦了幾個性能分析工具。

1. PageSpeed Insights

這是一個免費的服務,分析網頁的內容,然后提出建議,使該網頁更快。它為您提供了關鍵指標,如第一個內容繪制,總阻塞時間和更多。度量標準被分類為Field Data、Origin Summary,Lab Data,Opportunities、DiagnosticsPassed Audits。它還為我們提供了進一步改進的建議。

clipboard.png

2. Lighthouse

Lighthouse 是一個開源的自動化工具,用于改進網絡應用的質量。 你可以將其作為一個 Chrome 擴展程序運行,或從命令行運行。 你為 Lighthouse 提供一個您要審查的網址,它將針對此頁面運行一連串的測試,然后生成一個有關頁面性能的報告。

從此處,您可以失敗的測試為指示器,看看可以采取哪些措施來改進您的應用。

注意: Lighthouse 目前非常關注 Progressive Web App (PWA) 功能,如“添加到主屏幕”和離線支持。不過,此項目的首要目標是針對網絡應用質量的各個方面提供端到端審查。

運行 Lighthouse 的方式有兩種:作為 Chrome 擴展程序運行,或作為命令行工具運行。 Chrome 擴展程序提供了一個對用戶更友好的界面,方便讀取報告。 命令行工具允許您將 Lighthouse 集成到持續集成系統。

clipboard.png

3. WebPageTest

WebPageTest是一個在線的免費性能評測網站,支持IE,Chrome,使用真正的瀏覽器(IE和Chrome)和真實的消費者連接速度,從全球多個地點運行免費網站速度測試??梢赃\行簡單的測試或執行高級測試,包括多步驟事務、視頻捕獲、內容阻塞等等。還將依據測試結果提供豐富的診斷信息,包括資源加載瀑布圖,頁面速度優化檢查和改進建議,會給每一項內容一個最終的評級。

WebpageTest 主要提供了Advanced Testing、simple Testing、Visual Comparison、Traceroute四個功能,我們主要關注Advanced Testing。

如何使用WebPageTest

  • 填寫需要測試的URL
  • 填寫Test Location,下拉選擇即可,可選移動端設備(包括Android、IOS),可選PC端(分地區,每個地區可支持的瀏覽器不同)
  • 可選支持的瀏覽器
  • 點擊右側START TEST

clipboard.png

4. Pingdom

我最喜歡的功能是分析后的的摘要,其中會為我們提供有關網站內容和請求的摘要。 我發現這對于了解網頁上提供的內容有很大幫助。

clipboard.png

5. Sitespeed.io

Sitespeed.io 是一款開源的Web性能測試工具,用來衡量Web網站的綜合性能,幫助開發和測試人員分析網頁的加載速度和渲染性能。

Sitespeed.io通過驅動瀏覽器(如:Chrome、Firefox)進行測試,然后從開發者的站點收集多個頁面的數據,并根據最佳實踐等規則來分析這些網頁,然后將結果以HTML報告的形式輸出。

Sitespeed.io 滿足了一個完整的Web性能測試工具所需的3個關鍵功能:

  1. 使用真實的瀏覽器測試Web站點,模擬真實的用戶進行請求連接,收集以用戶為中心的重要指標,如:響應速度指標、第一視覺呈現
  2. 可分析頁面的組成,并給出相應性能反饋,增加終端用戶的使用體驗友好性
  3. 通過收集和保存頁面組成的數據,便于跟蹤定位

clipboard.png

6. Calibre

Caliber 是一款多功能的性能監控套件,可幫助你監控和審核網站的性能。 它還允許你通過指定測試服務器的位置,管理模擬的廣告首選項甚至模擬移動設備來模擬現實條件。 它還允許你設置預算,并通過為你提供性能下降來幫助你將預算保持在預算之內。

clipboard.png

7. SpeedCurve

SpeedCurve 既可以讓你追蹤競爭對手的性能表現,也可以追蹤自己的性能表現。

使用 SpeedCurve 時,你可以查看某個因素在不同站點的速度表現。對于移動用戶來說,他們希望網站在手機上加載起來要快于電腦,如果感到加載遲緩,往往會迅速關上網頁,所以,網站的響應速度對他們很重要。

SpeedCurve 還提供了綜合監控。綜合監控是在受控環境中模擬你的網站。你可以自定義選項,比如網絡速度、設備、操作系統等等。

clipboard.png

大家都說簡歷沒項目寫,我就幫大家找了一個項目,還附贈【搭建教程】。

8. SpeedTracker

SpeedTracker是一個運行在WebPageTest之上的工具,可在你的網站上進行定期的性能測試,并直觀顯示各種性能指標隨時間變化的方式。 這使你可以不斷評估網站,并查看新功能如何影響網站的性能。 你還可以定義預算并通過電子郵件和Slack獲取警報。

clipboard.png


代碼部署后可能存在的BUG沒法實時知道,事后為了解決這些BUG,花了大量的時間進行log 調試,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文:https://blog.bitsrc.io/perfor...

交流

文章每周持續更新,可以微信搜索「 大遷世界 」第一時間閱讀和催更(比博客早一到兩篇喲),本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄,整理了很多我的文檔,歡迎Star和完善,大家面試可以參照考點復習,另外關注公眾號,后臺回復福利,即可看到福利,你懂的。

查看原文

贊 22 收藏 16 評論 0

前端小智 發布了文章 · 2月18日

12 個炫酷背景特效庫

作者:lindelof
譯者:前端小智
來源:github
點贊再看,微信搜索大遷世界,B站關注前端小智這個沒有大廠背景,但有著一股向上積極心態人。本文 GitHubhttps://github.com/qq44924588... 上已經收錄,文章的已分類,也整理了很多我的文檔,和教程資料。

最近開源了一個 Vue 組件,還不夠完善,歡迎大家來一起完善它,也希望大家能給個 star 支持一下,謝謝各位了。

github 地址:https://github.com/qq44924588...

1.particles-bg

地址:https://github.com/lindelof/particles-bg

效果:

clipboard.png

clipboard.png

clipboard.png

2.particles-bg-vue

地址:https://github.com/lindelof/awesome-web-effect

這是一個基于VUE的粒子動畫組件。

clipboard.png

clipboard.png

3.jquery.ripples

地址:https://github.com/sirxemic/jquery.ripples

jQuery Ripples 插件向HTML添加一層水元素將波紋光標與WebGL的互動。您可以使用這種效果,讓你的靜態CSS背景圖像更多的互動。

clipboard.png

4.MorphingBackgroundShapes

地址:https://github.com/codrops/MorphingBackgroundShapes

這是一個很具裝飾性的網站背景效果,當用戶在滾動到某一頁面后此背景的SVG圖形將隨著變形和移動。

5. SegmentEffect

地址:https://github.com/codrops/SegmentEffect

背景分割裝飾特效。

6.jQuery.BgSwitcher

地址:https://github.com/rewish/jquery-bgswitcher

jQuery.BgSwitcher實現背景圖像切換效果。

7.BackgroundScaleHoverEffect

地址:https://github.com/codrops/BackgroundScaleHoverEffect

使用 CSSclip paths 重現背景縮放懸停特效。

https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/66/7116.gif

8.ImageGridMotionEffect

地址:https://github.com/codrops/ImageGridMotionEffect

為背景網格的圖像提供運動懸停特效。

9.jquery.adaptive-backgrounds.js

地址:https://github.com/briangonzalez/jquery.adaptive-backgrounds.js

adaptive-background.js是一款jQuery插件,可以根據div,img標簽里圖片的邊框顏色來動態調整父標簽的背景顏色,有點類似iTunes的專輯詳情的效果.

clipboard.png

10.fixed-background-effect

地址:https://codyhouse.co/demo/fixed-background-effect/index.html#0

整屏滾動背景懸浮效果。

11.jquery-warpdrive-plugin

地址:https://github.com/NiklasKnaack/jquery-warpdrive-plugin

query-warpdrive-plugin是一款可以制作基于HTML5 canvas的炫酷星空背景特效的jquery插件。這個星空背景特效可通過配置參數進行靈活的配置,可用鼠標進行互動。

大家都說簡歷沒項目寫,我就幫大家找了一個項目,還附贈【搭建教程】。

12.RainEffect

使用WebGL在不同場景下的一些實驗性降雨和水滴效應。

人才們的 【三連】 就是小智不斷分享的最大動力,如果本篇博客有任何錯誤和建議,歡迎人才們留言,最后,謝謝大家的觀看。


代碼部署后可能存在的BUG沒法實時知道,事后為了解決這些BUG,花了大量的時間進行log 調試,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文:https://github.com/lindelof/a...


交流

文章每周持續更新,可以微信搜索「 大遷世界 」第一時間閱讀和催更(比博客早一到兩篇喲),本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄,整理了很多我的文檔,歡迎Star和完善,大家面試可以參照考點復習,另外關注公眾號,后臺回復福利,即可看到福利,你懂的。

查看原文

贊 30 收藏 26 評論 0

前端小智 發布了文章 · 2月7日

使用 CSS Viewport 完成響應式布局

作者:Ahmad shaded
譯者:前端小智
來源:sitepoint
點贊再看,微信搜索大遷世界,B站關注前端小智這個沒有大廠背景,但有著一股向上積極心態人。本文 GitHubhttps://github.com/qq44924588... 上已經收錄,文章的已分類,也整理了很多我的文檔,和教程資料。

最近開源了一個 Vue 組件,還不夠完善,歡迎大家來一起完善它,也希望大家能給個 star 支持一下,謝謝各位了。

github 地址:https://github.com/qq44924588...

CSS Viewport units(視口單位)在過去幾年已經出現了,隨著時間的推移,越來越多的開發人員開始使用它們。它們的好處在于為我們提供了一種不需要使用J avaScript 就能以動態的方式調整大小的方法。而且,如果它失效,也有很多備用方案。

在本文中,我們將學習 CSS Viewport units(視口單位)以及如何使用它們,并用列舉一些常見問題及其解決方案和用例,讓我們開始吧。

簡介

根據CSS規范,視口百分比單位相對于初始包含塊的大小,它是web頁面的根元素。

視口單位為:vw,vh,vminvmax。

vw單位表示根元素寬度的百分比。1vw等于視口寬度的1%。

視口寬度

vw單位表示根元素寬度的百分比,1vw等于視口寬度的1%。

clipboard.png

假設我們有一個元素與以下CSS:

.element {
    width: 50vw;
}

當視口寬度為500px時,50vw計算如下

width = 500*50% = 250px

視口高度

vh單位表示根元素高度的百分比,一個vh等于視口高度的1%。

clipboard.png

我們有一個元素與以下CSS:

.element {
    height: 50vh;
}

當視口高度為290px時,70vh計算如下:

height = 290*70% = 202px

大家都說簡歷沒項目寫,我就幫大家找了一個項目,還附贈【搭建教程】。

Vmin 單位

vmin表示視口的寬度和高度中的較小值,也就是vwvh 中的較小值。如果視口寬度大于其高度,則將根據高度計算該值。

我們以下面的例子為例。

clipboard.png

我們有一個橫屏手機,其中有一個元素具有vmin單元。在這種情況下,值將根據視口高度計算,因為它小于寬度。

.element {
    padding-top: 10vmin;
    padding-bottom: 10vmin;
}

這是vmin的計算方式:

clipboard.png

正如你所猜測的,計算結果如下所示

padding-top = (10% of height) = 10% * 164 = 16.4px 

padding-bottom = (10% of height) = 10% * 164 = 16.4px

Vmax 單位

vmaxvmin相反,該值是vwvh 中的較大值。

clipboard.png

我們以下面的例子為例。

.element {
    padding-top: 10vmax;
    padding-bottom: 10vmax;
}

clipboard.png

計算結果如下:

padding-top = (10% of width) = 10% * 350 = 35px 
padding-bottom = (10% of width) = 10% * 350 = 35px

視口單位與百分比有何不同?

視口單位基于頁面的根元素,而百分比則基于它們所在的容器。因此,它們彼此不同,但各自都有各自的用處。

視口單位的用例

字體大小

clipboard.png

CSS 視口單位非常適合響應式排版。 例如,我們可以將以下內容用作文章標題:

.title {
    font-size: 5vw;
}

標題的font-size將根據視口寬度增加或縮小。 就像提供的字體大小是視口寬度的5%一樣。 但是,如果沒有適當的測試就直接使用它可能會踩到坑。 讓我們看下面的視頻:

圖片描述

體大小變得非常小,這不利于可訪問性和用戶體驗。據我所知,移動設備上的最小字體大小不應該不于14px。在GIF中,不小于10px。

要解決該問題,我們需要為標題提供最小字體大小,可以使用 calc()

.title {
    font-size: calc(14px + 2vw);
}

calc()CSS函數將具有一個最小值14px,并在些基礎上添加2vw的值,有了這些,字體大小值就不會變得太小。

另一個需要考慮的重要問題是字體大小在大屏幕上的表現,例如 27” iMac。會發生什么呢?你猜對了,字體大小為95px左右,這是一個很大的值。為了防止這種情況,我們應該在某些斷點上使用媒體查詢并更改字體大小。

@media (min-width: 1800px) {
    .title {
        font-size: 40px;
    }
}

通過重置字體大小,我們可以確保大小不會太大。您可能還需要添加多個媒體查詢,但這取決于你自己,也取決于項目的上下文。

事例地址:https://codepen.io/shadeed/pe...

全屏

有時,我們需要一個section來獲取100%的視口高度,為此,我們可以使用viewport高度單位。

clipboard.png

.section {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

通過添加 height: 100vh,我們可以確保section 高度將采取100%的視口。此外,我們添加了一些flexbox來處理水平和垂直居中的內容。

事例源碼:https://codepen.io/shadeed/pe...

粘性布局(footer)

在大屏幕上,網站內容有時候很少,footer 沒有粘在底部。這很正常,也不被認為是一種不好的做法。但是,還有改進的余地??紤]下面代表問題的示圖:

clipboard.png

為了解決這個問題,我們需要給內容(content)一個高度,它等于視口高度- (header + footer)。動態地做到這一點是很困難的,但是使用CSS的視口,這是很容易的。

大家都說簡歷沒項目寫,我就幫大家找了一個項目,還附贈【搭建教程】。

第一種解決方案:calc和視口單位

如果headerfooter 的高度是固定的,那么可以將calc()函數和視口單位結合起來,如下所示:

header,
footer {
    height: 70px;
}

main {
    height: calc(100vh - 70px - 70px);
}

不能保證此解決方案始終有效,尤其是對于footer而言。 在我的職業生涯中,我沒有使用固定高度的頁腳,因為在例如不同的屏幕尺寸下,此footer是不可行的。

2.第二種解決方案:Flexbox和視口單位(推薦

通過將100vh設置為body元素的高度,然后可以使用flexbox來使main元素占用剩余空間。

body {
    min-height: 100vh;
    display: flex
    flex-direction: column;
{

main {
    /* This will make the main element take the remaining space dynamically */
    flex-grow: 1;
}

這樣,問題就解決了,無論內容長度如何,我們都有一個粘性footer。

clipboard.png

事例源碼:https://codepen.io/shadeed/pe...

響應式元素

假設我們有一個作品集來展示我們的響應式設計工作,并且我們有三種設備(移動設備、平板電腦和筆記本電腦)。每個設備包含一個圖像。目標使用 CSS 來響應適配這些頁面。

clipboard.png

通過使用CSS網格和視口單位,我們可以使其完全動態的響應式。

<div class="wrapper">
  <div class="device laptop"></div>
  <div class="device mobile"></div>
  <div class="device tablet"></div>
</div>

視口單位也可以用于grid- *屬性,也用于border,border-radius和其他屬性。

.wrapper {
  display: grid;
  grid-template-columns: repeat(20, 5vw); 
  grid-auto-rows: 6vw;
}

.mobile { 
  position: relative;
  z-index: 1;
  grid-column: 2 / span 3;
  grid-row: 3 / span 5;
}
 
.tablet {
  position: relative;
  z-index: 1;
  grid-column: 13 / span 7; 
  grid-row: 4 / span 4;
  border-bottom: 1vw solid #a9B9dd;
  border-right: solid 3vw #a9B9dd;
}
 
.laptop {
  position: relative;
  grid-column: 3/span 13;
  grid-row: 2 / span 8;
}

/* Viewport units are used for the bottom, left, right, height, and border-radius. Isn't that cool? */
.laptop:after {
    content:"";
    position:absolute;
    bottom: -3vw;
    left: -5.5vw;
    right: -5.5vw;
    height: 3vw;
    background-color: #a9B9dd;
    border-radius: 0 0 1vw 1vw;
}

!
clipboard.png
例:https://codepen.io/shadeed/pe...

從容器中掙脫出來

我注意到一個用例最適合編輯版面。 一個子元素,即使父元素的寬度受到限制,它也會占據視口100%的寬度。 考慮下面:

clipboard.png

.break-out {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

讓我們把它分解一下,這樣我們就能一點一點地理解所有這些屬性是如何工作的。

1.添加 width: 100vw

最重要的一步,將圖像的寬度設置為100%的視口。

clipboard.png

2.添加 margin-left: -50vw

為了使圖像居中,我們需要給它一個負的邊距,其寬度為視口寬度的一半。

clipboard.png

3.添加 left: 50%

最后,我們需要將圖像向右推,其值為父寬度的50%。

clipboard.png

事例地址:https://codepen.io/shadeed/pe...

垂直和水平間距

我想到的另一個有趣的用例是使用視口單位來表示元素之間的間距。這可以與margin、top、bottomgrid-gap等值一起使用。使用時,間距將基于視口寬度或高度,這對于使布局更具動態性可能很有用。

模態框

對于模態,我們需要將它們從視口頂部推入。 通常,使用top屬性進行此操作,并使用百分比或像素值。 但是,對于視口單位,我們可以添加一個可以根據視口高度改變的間距。

clipboard.png

.modal-body {
    top: 20vh;
}

圖片描述

事例地址:https://codepen.io/shadeed/pe...

大家都說簡歷沒項目寫,我就幫大家找了一個項目,還附贈【搭建教程】。

頁面頭部

頁面header 是充當頁面介紹的部分。 它通常具有標題和描述,并且其中上下邊緣的高度固定或填充

例如,有以下的CSS的樣式:

.page-header {
    padding-top: 10vh;
    padding-bottom: 10vh;
}

.page-header h2 {
    margin-bottom: 1.5vh;
}

使用vh單位用于頁面標題的 paddding,以及標題下方的邊距。 注意間距如何變化!

圖片描述

事例源碼:https://codepen.io/shadeed/pe...

大家都說簡歷沒項目寫,我就幫大家找了一個項目,還附贈【搭建教程】。

Vmin 和 Vmax 用例

該用例是關于頁面標題元素的頂部和底部padding 。 當視口較?。ㄒ苿樱r,通常會減少padding 。 通過使用vmin,我們可以在視口較小尺寸(寬度或高度)的基礎上獲得合適的頂部和底部 padding。

.page-header {
    padding: 10vmin 1rem;
}

圖片描述

事例源碼:https://codepen.io/shadeed/pe...

縱橫比

我們可以使用vw單位創建響應元素,以保持其縱橫比,而不管視口大小如何。

首先,需要先確定所需的縱橫比,對于此示例,使用9/16。

section {
    /* 9/16 * 100 */
    height: 56.25vw;
}

圖片描述

事例源碼:https://codepen.io/shadeed/pe...

流行的頂部邊框

你知道大多數網站使用的頂部邊框嗎? 通常,它的顏色與品牌顏色相同,這會賦予一些個性。

clipboard.png

我們支持邊框的初始值為3px。 如何將固定值轉換為視口對象?下面是如何計算它的等效的vw。

vw = (Pixel Value / Viewport width) * 100

視口寬度用于估計像素值與所需vw單位之間的比率。

對于我們的示例,我們為 header 添加以下樣式:

.header {
    border-top: 4px solid #8f7ebc;  
}

在我的情況下,視口寬度為1440(這不是固定數字,請用你自己的數字替換)

vw = (4 / 1440) * 100 = 0.277
.header {
    border-top: 0.277vw solid #8f7ebc;  
}

更好的是,我們可以使用一個基本像素值,而視口單元可以是一個附加的。

.header {
    border-top: calc(2px + 0.138vw) solid $color-main;
}

移動端滾動問題

移動設備中存在一個常見問題,即使使用100vh,也會滾動,原因是地址欄的高度可見。Louis Hoebregts 寫了一篇關于這個問題的文章,并給出了一個簡單的解決方案。

.my-element {
  height: 100vh; /* 不支持自定義屬性的瀏覽器的回退 */
  height: calc(var(--vh, 1vh) * 100);
}
// 首先,我們得到視口高度,我們乘以 1% 得到一個vh單位的值
let vh = window.innerHeight * 0.01;
// 然后,將`--vh`自定義屬性中的值設置為文檔的根目錄一個屬性
document.documentElement.style.setProperty('--vh', `${vh}px`);

clipboard.png

事例源碼:https://codepen.io/shadeed/pe...


代碼部署后可能存在的BUG沒法實時知道,事后為了解決這些BUG,花了大量的時間進行log 調試,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文:https://ishadeed.com/viewport...


交流

文章每周持續更新,可以微信搜索「 大遷世界 」第一時間閱讀和催更(比博客早一到兩篇喲),本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄,整理了很多我的文檔,歡迎Star和完善,大家面試可以參照考點復習,另外關注公眾號,后臺回復福利,即可看到福利,你懂的。

查看原文

贊 12 收藏 8 評論 0

前端小智 發布了文章 · 2月4日

2021年,20 個值得學習的 Vue 開源項目

譯者:前端小智
作者:Nastassia Ovchinnikova
來源:flatlogic.com
點贊再看,微信搜索大遷世界,B站關注前端小智這個沒有大廠背景,但有著一股向上積極心態人。本文 GitHubhttps://github.com/qq44924588... 上已經收錄,文章的已分類,也整理了很多我的文檔,和教程資料。

最近開源了一個 Vue 組件,還不夠完善,歡迎大家來一起完善它,也希望大家能給個 star 支持一下,謝謝各位了。

github 地址:https://github.com/qq44924588...

Vue 相對不于 React 的一個優點是它易于理解和學習,且在國內占大多數。咱們可以在 Vue 的幫助下創建任何 Web 應用程序。 因此,時時了解一些新出現又好用的Vue 開源項目也是挺重要,一方面可以幫助咱們更加高效的開發,另一方面,咱們也可以模范學習其精華部分。

接下來看看新出的有哪些好用的開源項目。

uiGradients

網址:http://uigradients.com/

GitHub:https://github.com/ghosh/uiGr...

GitHub Stars:4.6k

clipboard.png

彩色陣列和出色的UX使是這個項目的一個亮點,漸變仍然是網頁設計中日益增長的趨勢。 咱們可以選擇所需的顏色,并可以獲得所有可能的漸變,并獲取對應的 CSS 代碼, 趕緊收藏起來吧。

CSSFX

CSS 過度效果的集合

網址:https://cssfx.dev

GitHub:https://github.com/jolaleye/c...

GitHub Stars:3.5k

圖片描述

CSSFX 里面有很多 CSS 過濾效果,咱們可以根據需求選擇特定的動畫,點擊對應的效果即可看到生成的 CSS 代碼,動手搞起來吧。

Sing App Vue Dashboard

一個管理模板

網址:https://flatlogic.com/templat...

GitHub:https://github.com/flatlogic/...

GitHub Stars:254

事例:https://flatlogic.com/templat...

文檔:https://demo.flatlogic.com/si...

clipboard.png

這是基于最新 Vue 和 Bootstrap 免費和開源的管理模板,其實跟咱們國內的 vue-admin-template 差不多。咱們不一定要使用它,但可以研究學習源碼,相信可以學到很多實用的技巧,加油少年。

Vue Storefront

網址:https://www.vuestorefront.io

GitHub:https://github.com/DivanteLtd...

GitHub Stars:5.8k

clipboard.png

這是一個PWA,可以連接到任何后端(或幾乎任何后端)。這個項目的主要優點是使用了無頭架構。這是一種全面的解決方案,為咱們提供了許多可能性(巨大的支持穩步增長的社區,服務器端渲染,將改善網頁SEO,移動優先的方法和離線模式。

Faviator

圖標生成的庫

網址:https://www.faviator.xyz

GitHub:https://www.faviator.xyz/play...

GitHub Stars:94

clipboard.png

如果需要創建一個圖標增加體驗度。 可以使用任何 Google 字體以及任何顏色。只需通過首選的配置,然后選擇PNG,SVG或JPG格式即可。

iView

Vue UI 組件庫

網址:https://iviewui.com/

GitHub:https://github.com/iview/iview

GitHub Stars:22.8k

clipboard.png

不斷迭代更新使這組UI組件成為具有任何技能水平的開發人員的不錯選擇。

要使用iView,需要對單一文件組件有充分的了解,該項目具有友好的API和大量文檔。

Postwoman

API請求構建器

網址:https://postwoman.io/

GitHub:https://github.com/liyasthoma...

GitHub Stars:10.5k

clipboard.png

這個與 Postman 類似。 它是免費的,具有許多參與者,并且具有多平臺和多設備支持。 這個工具真的非???,并且有大量的更新。 該工具的創建者聲稱在不久的將來會有更多功能。

Vue Virtual Scroller

快速滾動

網址:https://akryum.github.io/vue-...

GitHub:https://github.com/Akryum/vue...

GitHub Stars:3.4k

clipboard.png

Vue Virtual Scroller具有四個主要組件。 RecycleScroller可以渲染列表中的可見項。 如果咱們不知道數據具體的數量,最好使用DynamicScroller。 DynamicScrollerItem將所有內容包裝在DynamicScroller中(以處理大小更改)。 IdState簡化了本地狀態管理(在RecycleScroller內部)。

Mint UI

移動端的 UI 庫

網址:http://mint-ui.github.io/#!/en

GitHub:https://github.com/ElemeFE/mi...

GitHub Stars:15.2k

clipboard.png

使用現成的CSS和JS組件更快地構建移動應用程序。使用此工具,咱們不必承擔文件大小過大的風險,因為可以按需加載。動畫由CSS3處理,由此來提高性能。

大家都說簡歷沒項目寫,我就幫大家找了一個項目,還附贈【搭建教程】。

V Calendar

用于構建日歷的無依賴插件

網址:https://vcalendar.io

GitHub:https://github.com/nathanreye...

GitHub Stars:1.6k

clipboard.png

您可以選擇不同的視覺指示器來裝飾日歷。 V Calendar還為咱們提供了三種日期選擇模式:

  • 單選
  • 多選
  • 日期范圍

Vue Design System

一組UI工具

網址:https://vueds.com/

GitHub:https://github.com/viljamis/v...

GitHub Stars:1.7k

clipboard.png

這是一種組織良好的工具,對于任何web開發團隊來說,它的命名都很容易理解。其中一個很大的優點是使用了更漂亮的代碼格式化器,它可以在提交到Git之前自動排列代碼。

Proppy

UI組件的功能道具組合

網址:https://proppyjs.com

GitHub:https://github.com/fahad19/pr...

GitHub Stars:856

clipboard.png

ProppyJS 是一個很小的庫,用于組合道具,它附帶了各種集成包,讓您可以自由地使用它流行的渲染庫。

我們的想法是首先將Component的行為表達為props,然后使用Proppy的相同API將其連接到您的Component(可以是React,Vue.js或Preact)。

API還允許您訪問其他應用程序范圍的依賴項(如使用Redux的商店),以方便組件樹中的任何位置。

Light Blue Vue Admin

vue 后臺展示模板

網址:https://flatlogic.com/templat...

GitHub:https://github.com/flatlogic/...

GitHub Stars:79

圖片描述

事例:https://demo.flatlogic.com/li...

文檔:https://demo.flatlogic.com/li...

模板是用Vue CLIBootstrap 4構建的。從演示中可以看到,這個模板有一組非?;镜捻撁?排版、地圖、圖表、聊天界面等。如果咱們需要一個擴展的模板,可以看看Light Blue Vue Full,它有60多個組件,無 jquery,有兩個顏色主題。

Vue API Query

為 REST API 構建請求

GitHub:https://github.com/robsonteno...
GitHub Stars: 1.1k

clipboard.png

關于這個項目沒什么好說的。它所做的與描述行中所寫的完全一樣:它幫助咱們構建REST API的請求。

Vue Grid Layout

Vue 的網格布局

Website:https://jbaysolutions.github....
GitHub:https://github.com/jbaysoluti...
GitHub Stars: 3.1k

clipboard.png

所有網格相關問題的簡單解決方案。它有靜態的、可調整大小的和可拖動的小部件。還是響應和布局可以恢復和序列化。如果還需要再添加一個小部件,則不必重新構建所有網格。

Vue Content Loader

創建一個占位符加載

Website:http://danilowoz.com/create-v...
GitHub:https://github.com/egoist/vue...
GitHub Stars: 2k

clipboard.png

當咱們開發網站或者 APP 時,遇到內容過多加載速度慢時,會導致用戶打開頁面有大量空白頁,vue-content-loader正是解決這個問題的一個組件,使加載內容之前生成一個dom模板,提高用戶體驗。

Echarts with Vue2.0

數據可視化

Website:https://simonzhangiter.github...
GitHub:https://github.com/SimonZhang...
GitHub Stars: 1.3k

clipboard.png

在圖片中,咱們可以看到非常漂亮的圖表。這個項目使任何數據都更具可讀性,更容易理解和解釋。它允許咱們在任何數據集中輕松地檢測趨勢和模式。

大家都說簡歷沒項目寫,我就幫大家找了一個項目,還附贈【搭建教程】。

Vue.js Modal

高度可定制的模態框

Website:http://vue-js-modal.yev.io/
GitHub:https://github.com/euvl/vue-j...
GitHub Stars: 2.9k

clipboard.png

可以在該網站上查看所有不同類型的模態。 有15個按鈕,按任意一個按鈕,看到一個模態示例。

Vuesax

框架組件

Website:https://lusaxweb.github.io/vu...
GitHub:https://github.com/lusaxweb/v...
GitHub Stars: 3.7k

clipboard.png

這個項目在社區中很受歡迎。 它使咱們可以為每個組件設計不同的風格。 Vuesax的創建者強調,每個Web開發人員在進行Web設計時都應有選擇的自由。

Vue2 Animate

vue2.0 —使用animate.css 構建項目和創建組件

Website:https://the-allstars.com/vue2...
GitHub:https://github.com/asika32764...
GitHub Stars: 1.1k

clipboard.png

這個庫是跨瀏覽器的,咱們可以選擇從5種類型的動畫: rotate,slide,fade,bouncezoom。在網站上有一個演示。動畫的默認持續時間是1秒,但是咱們可以自定義該參數。

Vuetensils

Vue.js的工具集

Website:https://vuetensils.stegosourc...
GitHub:https://github.com/stegosourc...
GitHub Stars: 111

clipboard.png

這個UI庫有一個標準的功能,但是最酷的是它沒有額外的樣式。你可以讓設計盡可能的個性化,應用所有的需求。只需編寫需要的樣式,將其添加到項目中,并包含需要的盡可能多的組件。

人才們的 【三連】 就是小智不斷分享的最大動力,如果本篇博客有任何錯誤和建議,歡迎人才們留言,最后,謝謝大家的觀看。


編輯中可能存在的bug沒法實時知道,事后為了解決這些bug,花了大量的時間進行log 調試,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文:

https://flatlogic.com/blog/ne...
https://flatlogic.com/blog/ne...


交流

文章每周持續更新,可以微信搜索 【大遷世界 】 第一時間閱讀,回復 【福利】 有多份前端視頻等著你,本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄,歡迎Star。

查看原文

贊 48 收藏 35 評論 3

前端小智 發布了文章 · 2月1日

23 個非常有用的 NodeJs 庫

作者:Lokender Singh
譯者:前端小智
來源:medium
點贊再看,微信搜索大遷世界,B站關注前端小智這個沒有大廠背景,但有著一股向上積極心態人。本文 GitHubhttps://github.com/qq44924588... 上已經收錄,文章的已分類,也整理了很多我的文檔,和教程資料。

最近開源了一個 Vue 組件,還不夠完善,歡迎大家來一起完善它,也希望大家能給個 star 支持一下,謝謝各位了。

github 地址:https://github.com/qq44924588...

作為專業的開發人員,我們必須不斷更新最新和最好的庫,因為知道好的庫,那么開發過程就可以依賴于它們,這會節省我們很多時間也有助于構建高質量的軟件。

下面列表常見且好用的 NodeJS 庫,反正我自己是已經收藏了,以備將來會用到 ??

1. Express

地址:https://www.npmjs.com/package/express

clipboard.png

快速、無約束、極簡的node web框架。

2. Socket.io

地址:https://www.npmjs.com/package/socket.io

clipboard.png

Socket.IO 支持基于事件的實時雙向通信。

3. Body-parser

地址:https://www.npmjs.com/package/body-parser

clipboard.png

body-parser是非常常用的一個express中間件,作用是對http請求體進行解析。

4. Cors

地址:https://www.npmjs.com/package/cors

clipboard.png

CORS 是用于提供Connect/Express中間件的node.js程序包,可用于啟用具有各種選項的CORS。

5. Passport

地址:https://www.npmjs.com/package/passport

clipboard.png

Passport.js 是一個簡單的、非侵入式的 Node.js 身份驗證中間件,它可以集成到任何基于 Express.js 的 web 應用中

6. Multer

地址:https://www.npmjs.com/package/multer

clipboard.png

Multer是一個Node.js中間件,用于處理 multipart/form-data 類型的表單數據,主要用于文件上傳。

7. Axios

地址:https://www.npmjs.com/package/axios

clipboard.png

于 Promise 的 HTTP客 戶端,用于瀏覽器和 node.js

8. Morgan

地址:https://www.npmjs.com/package/morgan

clipboard.png

morgan是express默認的日志中間件,也可以脫離express,作為node.js的日志組件單獨使用。

9. Http-errors

地址:https://www.npmjs.com/package/http-errors

clipboard.png

輕松創建 Express,Koa,Connect 等的 HTTP 錯誤。

大家都說簡歷沒項目寫,我就幫大家找了一個項目,還附贈【搭建教程】。

10. Dotenv

地址:https://www.npmjs.com/package/dotenv

clipboard.png

由于項目不同需求,需要配置不同環境變量,按需加載不同的環境變量文件,使用dotenv,可以完美解決這一問題。

使用dotenv,只需要將程序的環境變量配置寫在.env文件中。

11. Faker

地址:https://www.npmjs.com/package/faker

clipboard.png

這是一個很棒的 node 模塊,用來 mock 數據。Faker 有自己的 API,而且功能非常豐富,這一切都要歸功于發明它的人 Marak 。它幾乎可以覆蓋到任何你想用的用例,在 Github 上的文檔也可以幫你分分鐘熟悉它的用法。

12. Nodemailer

地址:https://www.npmjs.com/package/nodemailer

clipboard.png

Nodemailer是nodejs中的郵件發送模塊。

13. Sequelize

地址:https://www.npmjs.com/package/sequelize

clipboard.png

什么是ORM?

簡單的講就是對SQL查詢語句的封裝,讓我們可以用OOP的方式操作數據庫,優雅的生成安全、可維護的SQL代碼。直觀上,是一種Model和SQL的映射關系。

Sequelize 是一款基于Nodejs功能強大的異步ORM框架。

同時支持PostgreSQL, MySQL, SQLite and MSSQL多種數據庫,很適合作為Nodejs后端數據庫的存儲接口,為快速開發Nodejs應用奠定扎實、安全的基礎。

既然Nodejs的強項在于異步,沒有理由不找一個強大的支持異步的數據庫框架,與之配合。

14 Mongoose

地址:https://www.npmjs.com/package/mongoose

clipboard.png

MongoosemongoDB的一個對象模型庫,封裝了mongoDB對文檔的一些增刪改查等常用方法,讓nodejs操作mongoDB數據庫變得更容易。

15 Jest

地址:https://www.npmjs.com/package/jest

clipboard.png

Jest 是由 Facebook 推出的一個前端測試框架,具有許多非常好的特性,譬如執行速度快、API友好、自動監控、Snapshot、測試覆蓋率、Mock等各種特性,并且適用于Babel、TypeScript、Node、React、Angular、Vue等。

16. Moment

地址:https://www.npmjs.com/package/moment

clipboard.png

一個輕量級的JavaScript日期庫,用于解析,驗證,操作和格式化日期。

17. lodash

地址:https://www.npmjs.com/package/lodash

clipboard.png

Lodash 減少數組、數字、對象、字符串等工作的麻煩,它讓 JS 變得更容易。

18. chalk

地址:https://www.npmjs.com/package/chalk

clipboard.png

chal 可譯為“粉筆”,node 終端樣式庫,主要功能為使輸出不再單調,添加文字背景,改變字體顏色

19. validator

地址:https://www.npmjs.com/package/validator

clipboard.png

輕量,快捷,易擴展的前端的驗證工具,無其他包依賴無樣式,可以適合絕大部分使用情景,開發人員可根據項目環境自行組裝反饋的錯誤信息給用戶。

20. Cheerio

地址:https://www.npmjs.com/package/cheerio

clipboard.png

cheerio 用來解析html非常方便,就像在瀏覽器中使用jquery一樣。

大家都說簡歷沒項目寫,我就幫大家找了一個項目,還附贈【搭建教程】。

21. JSDoc

地址:https://www.npmjs.com/package/jsdoc

clipboard.png

JSDoc是一個根據javascript文件中注釋信息,生成JavaScript應用程序或庫、模塊的API文檔 的工具。

22. Helmet

地址:https://www.npmjs.com/package/helmet

clipboard.png

Helmet是一系列幫助增強Node.JS之Express/Connect等Javascript Web應用安全的中間件。

一些著名的對Web攻擊有XSS跨站腳本, 腳本注入 clickjacking 以及各種非安全的請求等對Node.js的Web應用構成各種威脅,使用Helmet能幫助你的應用避免這些攻擊。

23. Crypto-js

地址:https://www.npmjs.com/package/crypto-js

clipboard.png

CryptoJS (crypto.js) 為 JavaScript 提供了各種各樣的加密算法。


代碼部署后可能存在的BUG沒法實時知道,事后為了解決這些BUG,花了大量的時間進行log 調試,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文:https://blog.bitsrc.io/23-ins...

交流

文章每周持續更新,可以微信搜索 【大遷世界 】 第一時間閱讀,回復 【福利】 有多份前端視頻等著你,本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄,歡迎Star。

查看原文

贊 28 收藏 25 評論 2

前端小智 發布了文章 · 1月28日

在 JS 中如何檢查對象為空

作者:Samantha Ming
譯者:前端小智
來源:medium
點贊再看,微信搜索大遷世界,B站關注前端小智這個沒有大廠背景,但有著一股向上積極心態人。本文 GitHubhttps://github.com/qq44924588... 上已經收錄,文章的已分類,也整理了很多我的文檔,和教程資料。

最近開源了一個 Vue 組件,還不夠完善,歡迎大家來一起完善它,也希望大家能給個 star 支持一下,謝謝各位了。

github 地址:https://github.com/qq44924588...

下面的代碼片段,用于檢查對象是否為空。 對于較新的瀏覽器,你可以使用 ES6 的 “Object.keys”。??對于較舊的瀏覽器,可以安裝Lodash庫并使用其“ isEmpty”方法。

const empty = {};

/* -------------------------
  較新的瀏覽器
----------------------------*/
Object.keys(empty).length === 0 && empty.constructor === Object
// true

/* -------------------------
  老版本的瀏覽器可以使用 Lodash
----------------------------*/
_.isEmpty(empty)
// true

什么是原生 JavaScript

原生 JavaScript 指的是不使用框架或庫。 它只是常規的普通 JavaScript,沒有使用LodashjQuery之類的庫。

A.在較新的瀏覽器中檢查空對象

我們可以使用內置的Object.keys方法檢查空對象。

const empty = {};

Object.keys(empty).length === 0 && empty.constructor === object;

為什么我們需要額外的constructor 檢查?

你可能想知道為什么我們需要對 constructor 進行檢查。 它是為了覆蓋包裝器實例。在JavaScript中,我們有9個內置的構造函數。

new Object();

new String();
new Number();
new Boolean();
new Array();
new RegExp();
new Function();
new Date();

這里,我們可以使用new Object()創建一個空對象。

注:永遠不要使用構造函數創建對象。 這被認為是不好的做法,請參閱 Airbnb Style GuideESLint。
const obj = new Object();

Object.keys(obj).length === 0; // true

因此,僅使用Object.keys,當對象為空時,它的確會返回true。 但是,當我們使用其他構造函數創建新的對象實例時會發生什么。

function badEmptyCheck(value) {
  return Object.keys(value).length === 0;
}

badEmptyCheck(new String());    // true ??
badEmptyCheck(new Number());    // true ??
badEmptyCheck(new Boolean());   // true ??
badEmptyCheck(new Array());     // true ??
badEmptyCheck(new RegExp());    // true ??
badEmptyCheck(new Function());  // true ??
badEmptyCheck(new Date());      // true ??

通過檢查 constructor 解決誤報

通過添加構造函數檢查來糾正這個錯誤。

function goodEmptyCheck(value) {
  Object.keys(value).length === 0
    && value.constructor === Object; // ?? constructor check
}

goodEmptyCheck(new String());   // false ?
goodEmptyCheck(new Number());   // false ?
goodEmptyCheck(new Boolean());  // false ?
goodEmptyCheck(new Array());    // false ?
goodEmptyCheck(new RegExp());   // false ?
goodEmptyCheck(new Function()); // false ?
goodEmptyCheck(new Date());     // false ?

Nice,干的漂亮 ??

對其他值進行空檢查

接著,我們用一些值上測試我們的方法,看看我們會得到了什么 ??

function isEmptyObject(value) {
  return Object.keys(value).length === 0 && value.constructor === Object;
}

到目前為止看起來不錯,對于非對象它返回 false。

isEmptyObject(100)  // false
isEmptyObject(true) // false
isEmptyObject([])   // false

??但是要當心! 下面這些值會引發錯誤。

// TypeError: Cannot covert undefined or null to object
isEmptyObject(undefined);
isEmptyObject(null);

改進對nullundefined的空檢查

如果不想讓它拋出TypeError,可以添加額外的檢查

function isEmptyObject(value) {
  return value && Object.keys(value).length === 0 && value.constructor === Object;
}

B.舊版本瀏覽器中的空對象檢查

如果你需要支持較舊的瀏覽器怎么辦? 大家都知道,當說舊的瀏覽器時,指的是 IE,我們有2個選擇,使用原生或利用庫。

使用 JavaScript 檢查空對象

原生的 JS 并不那么簡潔,但判斷用來空對象是沒問題的。


function isObjectEmpty(value) {
  return (
    Object.prototype.toString.call(value) === '[object Object]' && JSON.stringify(value) === '{}'
  );
}

對于對象,它返回true。

isObjectEmpty({});           // true ?
isObjectEmpty(new Object()); // true ?

其它類型的構造函數也能正常判斷 ??

isObjectEmpty(new String());   // false ?
isObjectEmpty(new Number());   // false ?
isObjectEmpty(new Boolean());  // false ?
isObjectEmpty(new Array());    // false ?
isObjectEmpty(new RegExp());   // false ?
isObjectEmpty(new Function()); // false ?
isObjectEmpty(new Date());     // false ?

傳入 nullundefined 也不會報 TypeError。

isObjectEmpty(null);      // false
isObjectEmpty(undefined); // false

使用外部庫檢查空對象

有大量的外部庫可以用來檢查空對象。而且大多數都對舊瀏覽器有很好的支持??

Lodash

_.isEmpty({});
// true

Underscore

_.isEmpty({});
// true

jQuery

jQuery.isEmptyObject({});
// true

原生 VS 庫

答案是看情況而定!我非常喜歡盡可能地簡化程序,因為我不喜歡外部庫的開銷。另外,對于較小的應用程序,我懶得設置外部庫。但如果你的應用程序已經安裝了一個外部庫,那么就繼續使用它。你會比任何人都更了解你的應用程序。所以選擇最適合你情況的方法

人才們的 【三連】 就是小智不斷分享的最大動力,如果本篇博客有任何錯誤和建議,歡迎人才們留言,最后,謝謝大家的觀看。


編輯中可能存在的bug沒法實時知道,事后為了解決這些bug,花了大量的時間進行log 調試,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文:https://www.samanthaming.com/...

交流

文章每周持續更新,可以微信搜索「 大遷世界 」第一時間閱讀和催更(比博客早一到兩篇喲),本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄,整理了很多我的文檔,歡迎Star和完善,大家面試可以參照考點復習,另外關注公眾號,后臺回復福利,即可看到福利,你懂的。

查看原文

贊 15 收藏 8 評論 2

前端小智 發布了文章 · 1月27日

10個 Chrome 開發工具和技巧

作者:FelDev
譯者:前端小智
來源:medium
點贊再看,微信搜索大遷世界,B站關注前端小智這個沒有大廠背景,但有著一股向上積極心態人。本文 GitHubhttps://github.com/qq44924588... 上已經收錄,文章的已分類,也整理了很多我的文檔,和教程資料。

最近開源了一個 Vue 組件,還不夠完善,歡迎大家來一起完善它,也希望大家能給個 star 支持一下,謝謝各位了。

github 地址:https://github.com/qq44924588...

1. 模擬慢速網絡和慢速設備

我們可能習慣了在城市的網速,那是杠杠的,并不意味網速在中國哪個都一樣的,在一些偏遠地方,網速依然慢的可憐,所以有時候我們所做的產品是需要考慮網速慢的情況的,那怎么模擬呢?

打開谷個瀏覽器的performance選項卡,然后單擊右上角的齒輪圖標就可以看到 NewworkCPU的模擬情況。

clipboard.png

2. 顏色選擇器

單擊表示顏色的小方塊,彈出顏色選擇器。

clipboard.png

clipboard.png

啟用顏色選擇器后,可以將網頁懸停并使用顏色選擇器來獲取該像素的顏色。

clipboard.png

clipboard.png

彈出顏色選擇器的小方塊還有快捷鍵按住Shift并單擊以更改顏色格式。

3. Audits

Audits(審計),這個功能其實一直存在,只不過在chrome 60之后,發生了翻天覆地的變化:引入了Google開源的另外一個項目:LightHouse。

Audits主要從5個方面來給網頁打分,最終會生成一個report:

4.Pretty Print(顯示可讀代碼)

clipboard.png

我們知道許多網站都對Javascript代碼進行了壓縮,但這對開發者和學習者來說,讀起來很費勁,谷歌提供一個功能給我們,可以更好查看壓縮文件。

我們點擊下方的大括號{}圖標,即可使用Pretty Print功能了

clipboard.png

5.快速文件切換器

如果你知道文件名,則不必打開“Sources”選項卡。只需按cmd/ctrl + p,然后輸入你想查找的文件名,接下按下回車就 ok 了。

6. 響應模式

我們在桌面和移動設備上開發網站,通常我們傾向于最初的桌面體驗。 但是這與越來越多的用戶使用移動設備訪問網絡的趨勢相脫離。 為了提高網站的用戶體驗,我們需要準確地知道網站在移動設備上的效果。 Chrome 開發者工具包里加入了手機模擬器特性,幫助我們測試:

clipboard.png

對于大多數人而言,大多數時間只需要通過不同的屏幕尺寸和方向查看他們的網站即可。

clipboard.png

大家都說簡歷沒項目寫,我就幫大家找了一個項目,還附贈【搭建教程】。

我和阿里云合作服務器,折扣價比較便宜:89/年,223/3年,比學生9.9每月還便宜,買了搭建個項目,熟悉技術棧比較香(老用戶用家人賬號買就好了,我用我媽的)推薦買三年的劃算點,點擊本條就可以查看。

Icomo

7.屏幕截圖

1、F12

2、【ctrl+shift+p】

3、輸入“capture”

4、選擇以下任意

  1. capture full size screenshot”【整個網頁】
  2. capture node screenshot”【節點網頁】
  3. “capture screenshot”【當前屏幕】

8. Extensions

我們可以將擴展程序安裝到Chrome開發者控制臺。 許多框架都有自己的擴展名,以簡化其技術(Vue,Angular,React等)的開發。 這是Featured DevTools擴展的列表。

9. Coverage

Coverage 是chrome開發者工具的一個新功能,從字面意思上可以知道它是可以用來檢測代碼在網站運行時有哪些js和css是已經在運行,而哪些js和css是還沒有用到的,如圖,這是我在打開csdn網頁時,所顯示的已運行和尚未運行的代碼情況。

clipboard.png

如何打開caverage 前提:chrome瀏覽器的版本必須是59或以上,在ctrl+shift+i快速打開devtools,點擊右上角的... More tools 有個Coverage。

那這個新功能有什么作用呢?

如上圖所示,最右邊顯示的是我們加載的css和js文件數量,紅色區域表示已運行的代碼,而青色表示已加載但未運行的代碼??捎脕戆l現頁面中尚未用到的js 和 css代碼,你可以為用戶只提供必要的代碼,這樣就可以提升頁面的性能。這對于找出可以進行拆分的腳本以及延遲加載非關鍵腳本來說非常有用。

10. 實時跟進新功能

Chrome 的開發工具會不斷更新,它會在What's New In DevTools 上發布更新的視頻,我們可以時不是去看看,了解一些新出來的功能,這樣我們就能實時知道谷歌的一些好用的功能了。


代碼部署后可能存在的BUG沒法實時知道,事后為了解決這些BUG,花了大量的時間進行log 調試,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

來源:https://medium.com/better-pro...


交流

文章每周持續更新,可以微信搜索「 大遷世界 」第一時間閱讀和催更(比博客早一到兩篇喲),本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄,整理了很多我的文檔,歡迎Star和完善,大家面試可以參照考點復習,另外關注公眾號,后臺回復福利,即可看到福利,你懂的。

查看原文

贊 9 收藏 8 評論 0

前端小智 發布了文章 · 1月20日

5個好用的 CSS 函數,快來試試手吧!

作者:Milos Protic
譯者:前端小智
來源:devinduct
點贊再看,微信搜索大遷世界,B站關注前端小智這個沒有大廠背景,但有著一股向上積極心態人。本文 GitHubhttps://github.com/qq44924588... 上已經收錄,文章的已分類,也整理了很多我的文檔,和教程資料。

最近開源了一個 Vue 組件,還不夠完善,歡迎大家來一起完善它,也希望大家能給個 star 支持一下,謝謝各位了。

github 地址:https://github.com/qq44924588...

簡介

CSS 包含了許多函數,而且它能夠完成許多早期需要用 JavaScript才能完成的事情。每年都有新的特性被添加進來,這讓我們的開發更加輕松,也減少了對JavaScript的依賴。CSS 函數是它所具有的最強大的特性之一,在本文中,我將介紹一些我認為有用的函數。

attr()

attr 函數用于獲取所選元素的屬性值。 它接受三個參數,屬性名稱,類型默認值。

語法: attr( attribute-name <type-or-unit>? [, <fallback> ]? )

事例:

<p data-text="the attr function"
  data-tooltip="Hi from attr!" class="attr">This text is combined with</p>

css

p::after {
  content: ' ' attr(data-text);
}

p.attr:hover::after {
  content: ' ' attr(data-tooltip);
  background-color: orange;
  color: white
}

效果:

圖片描述

源碼:https://codepen.io/protic_milos/pen/GRpYJKd

calc()

這個函數使我們能夠計算CSS值,而不是指定確切的值。通常用于計算元素的大小或位置。它支持加法、減法、乘法和除法。

需要特別注意重要一點+-運算符必須用空格隔開,不然無法正常工作。*/運算符不有這限制,但出于一致性的考慮,建議添加空格。

另外,很棒的是,我們可以混合CSS單位,例如,我們可以減去百分比和像素。

我們可以用calc構建一個帶有居中元素的示例:

<p class="calc">Centered with calc</p>

css

p.calc {
  padding: 10px;
  background-color: orange;
  color: white;
  width: 200px;
  text-align:center;
  margin-left: calc(50% - 100px)
}

效果:

clipboard.png

源碼:https://codepen.io/protic_milos/pen/GRpYJKd

var()

通過這個函數,我們可以使用一個自定義屬性的值作為另一個CSS屬性的值。簡單地說,我們可以定義一個顏色,例如,將它放在自定義屬性(CSS變量)中,然后通過調用var函數重用該屬性值。

與CSS變量一起,該函數提高了可維護性并減少了重復。一個用例是為網站創建主題。

此函數接受兩個參數,即自定義屬性和一個默認值,如果出現問題,將使用它們。

:root {
  --bg-color: green;
  --color: white
}

p.var {
  background-color: var(--bg-color);
  color: var(--color)
}

效果:

clipboard.png

源碼:https://codepen.io/protic_milos/pen/GRpYJKd

counter()

就我個人而言,我從未使用過這種方法,但它看起來是很有趣。這個函數返回指定計數器的當前值,需要與 counter-resetcounter-increment 配合使用。

我們可以用它來計算其他元素,比如有序列表。

<div class="counter">
  <span>Mars</span>
  <span>Bounty</span>
  <span>Snickers</span>
</div>

clipboard.png

源碼:https://codepen.io/protic_milos/pen/GRpYJKd

circle()

這個函數創建一個圓形區域來屏蔽它所應用的元素。你可以指定它的半徑和位置。通常與圖像一起使用來創建圓角形狀。此函數是clip-path屬性值。

另外,值得一提的是,除了圓之外,您還可以創建橢圓和多邊形形狀。

<img class="circle" 
  data-original="https://devinduct.com/Uploads/PostImages/1122dcb9-954a-4641-9ca6-c38e9472698f.png"
/>

css

img.circle {
  clip-path: circle(30%);
}

clipboard.png

源碼:https://codepen.io/protic_milos/pen/GRpYJKd

總結

正如我之前多次提到的,在很多情況下,開發人員都忽視了CSS的可能性,因此失去了web站點的簡單性。每一年我們都可以依靠CSS為我們提供所需的設計能力,這很好,JavaScript 應該把注意力放在其他事情上,而不是設計上。


代碼部署后可能存在的BUG沒法實時知道,事后為了解決這些BUG,花了大量的時間進行log 調試,這邊順便給大家推薦一個好用的BUG監控工具 Fundebug。

原文:https://devinduct.com/63/5-us...

交流

文章每周持續更新,可以微信搜索「 大遷世界 」第一時間閱讀和催更(比博客早一到兩篇喲),本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄,整理了很多我的文檔,歡迎Star和完善,大家面試可以參照考點復習,另外關注公眾號,后臺回復福利,即可看到福利,你懂的。

查看原文

贊 15 收藏 8 評論 1

認證與成就

  • 認證信息 前端開發工程師
  • 獲得 18788 次點贊
  • 獲得 106 枚徽章 獲得 2 枚金徽章, 獲得 26 枚銀徽章, 獲得 78 枚銅徽章

擅長技能
編輯

開源項目 & 著作
編輯

(??? )
暫時沒有

注冊于 2016-11-12
個人主頁被 119.8k 人瀏覽

一本到在线是免费观看_亚洲2020天天堂在线观看_国产欧美亚洲精品第一页_最好看的2018中文字幕 <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>