前端資訊週報 2.27 - 3.5: 如何設計一個優秀的HTML接口，深刻理解line-height

從本週起，每週一我都會分享上一週我訂閱的技術站點中，和解決問題的過程當中閱讀到的值得分享的文章，或者視頻教程，又或者圖書。

我的認爲國外的技術文章質量較高，並且發佈的技術資訊也走在行業前沿，因此比較關注他們的內容，因此分享的文章大可能是英文書寫，但別懼怕，其實英文的技術文章難度不超過英語四級。注意不排除某些文章須要魔法上網才能閱讀哦。

畢竟我的的閱讀量有限，也歡迎你們留言或者私信給我大家閱讀到的，對大家前端技術有幫助的任何內容，題材不限，語言不限。能夠是技術博客，也能夠是知乎或stackoverflow的問答。

若是你以爲這篇分享給你帶來了幫助，請不要吝惜的關注我和點個贊吧，謝謝啦！

本週推薦

1. HTML APIs:What They Are And How To Design A Good One

「知識的詛咒」是一種認知誤差，大意爲專家們常以技術術語交談，卻逐漸喪失與非專業人士溝通的能力。

程序員經常把本身編寫的功能所須要的接口和配置設計的極爲複雜，卻未曾想過並非每一位開發人員都有與你相同的水平來懂得如何調用接口。這篇文章就是教你如何打破這個思惟，設計出一個好的HTML接口。

2. Deep dive CSS:font metrics, line-height and vertical-align

從學習css的第一天起咱們就認識了字體、行高等樣式屬性，但卻沒有多少人能具體解釋它們的工做原理。這篇文章則是由淺入深的具體講解了系統字體、頁面中的字體、字體樣式以及行高之間的關係，以及它們是如何運做的。若是你以前對這些知識很苦惱，相信你讀完這篇文章以後會更苦惱。

3. JavaScriptStart-up Performance

性能永遠是我最感興趣的話題，這裏分享了關於Javascript 在編譯時的一些性能瓶頸，並給出了關於提升Javascript編譯性能的一些建議，最後以及Chrome瀏覽器在這方面所作的優化

4. How to Build Your Own Progressive Image Loader

相信你已經看到了知乎上模糊懶加載圖片的效果了吧，這裏正好有一篇文章教你如何作這樣的一個加載器。

Facebook和medium也有這樣的文章教你如何實現這個：

How Medium does progressive image loading

The technology behind preview photos

唱唱反調

5. You might not need a CSS framework

標題即表達了本文的中心思想：你其實不該該使用CSS框架！這篇文章總結了使用CSS框架可能會帶來的問題。在安利你不要使用CSS框架的同時，還給出了其餘的一些解決方案。

6. The benefits of learning how to code layouts with CSS

這篇文章做者的觀點和上一篇一致，他也認爲咱們不該該在使用CSS框架，而是從新學習CSS佈局，目前現有的樣式屬性例如Flexbox、Grid，足夠讓咱們編寫出富有創意的前端佈局。

若是你想從頭開始學習如何編寫CSS佈局，也能夠從這個做者的另外一篇文章開始：

Learn CSS Grid | Jen Simmons

基礎

7. HTML5 Form Attributes (Part 1) - SitePoint

8. Learning HTML5 Form Attributes (Part 2) - SitePoint

手把手教你認識HTML5表單的各個屬性

9. An Animated Intro to RxJS | CSS-Tricks

對RxJS的入門介紹，初步介紹了RxJS涉及到的一些概念還有事件和動畫方面的使用方法

其餘

10. Touch Devices Should Not Be Judged By Their Size | CSS-Tricks

這是老生常談了：咱們不能僅僅經過設備的屏幕尺寸來判斷設備類型，而是應該拋棄具體的設備類型，針對設備對某特性的支持狀況進行編程。在這篇文章中做者就以hover屬性進行舉例。

11. When Your Code Has To Work: Complying With Legal Mandates

在歐洲建站的時候是須要遵照Cookie Law的，也就是你須要告訴用戶你要是用他電腦上的數據，例如Cookie和LocalStorage，而且要徵得用戶的贊成才能使用它們。做者在這篇文章裏分享了他解決這個問題的技術方案。

12. JavaScript Debugging Improvements

介紹 webkit 在內核在Javascript調試方面作的一些改進

13. Base64 Encoding & Performance, Part 1: What’s Up with Base64?

使用Base64代替圖片或許並非一個好的選擇，下載慢，難以優化。

14. Working with the JavaScript Battery API

你可以經過API來獲取移動設備的電量啦，

目前兼容性狀況：

Can I use... Support tables for HTML5, CSS3, etc

講講道理

15. Feel like a loser?

在設計產品時，要照顧用戶的情緒。千萬不要給他們帶來負面的感覺，要讓他們感受本身是贏家！

16. How to Become a Better Developer by Coding Less

若是經過寫更少的代碼來成爲更優秀的程序員呢？這篇文章打動的個人是這句話：

Here’s the interesting thing about people performing at the highest levels. They don’t rely on what they think they can do, how they feel or what others say about them.They think about the outcome they want, then working backwards, they create a system that helps them get there.

冷知識

17. Mastering Google Search Operators in 67 Easy Steps

如何正確的使用 Google的67個步驟

 

本文也同時發佈在個人知乎專欄上：前端技術漫遊指南，歡迎你們關注。