Weekly#7
Table of Contents
News | Article
Six Things I Know For Sure About Marketing To Engineers
关于向工程师营销时的六件事:
- 工程师的购买决策更注重逻辑而非情感
- 工程师希望了解功能和规格,而不仅仅是优点
Opinions for Writing Good CSS
编写优秀 CSS 的意见:
- 不要包含不需要的 CSS,不然久了就分不清是否需要
- 使用注释,说明一些特殊的 CSS,或者不知道为什么这面写的 CSS
- 避免
!important
- 保持一致性,例如统一用 BEM 或 CUBE
- 充分利用 CSS 变量
- 提前考虑响应式设计,而不是在后面再添加,这样修改成本比较大
- 避免组件的外边距(margin),和容器的内边距(padding), 推荐看看 No Outer margin
- 避免复制粘贴别人的 CSS,尽量自己写,明白每一个 CSS 定义的含义和作用
Seafaring for Women in Software Engineering - Part I - Performance & Promotion
想要什么需要说出来,自己去争取。
公司是希望以你愿意接受的最低金额雇用你,除非你提出要求,否则晋升或加薪并不符合他们的利益。
My best career advice:
At every job you should either learn or earn.Either is fine.Both is best. Bust if it's neither, quit.
在每份工作中,你要么学习,要么赚钱。两者任何一个都可以,最好是两者兼得。 如果两者都没有,那就辞职。
Tutorial
The Ultimate Guide to Font Performance Optimization | DebugBear
字体优化的教程,通过优化字体提高页面性能。
A Complete Guide to Beginning with JavaScript – Frontend Masters Boost
学习 JavaScript 之前的一些预备知识,扫除入门 JavaScript 的一些障碍,并提供了相关的学习资源。
Code
Elastic Overflow Scrolling
CSS 模仿手机上拉下拉的回弹效果。
Double your specificity with this one weird trick
写 CSS 的时候,需要增加某个选择器的权重,可以重复相同的类名去增加权重。
这样可以避免 !important
, 避免一些多余的类名,同时重复的类名也可以看出选择器被故意增加了权重。
关于 CSS 权重,推荐看看 Misconceptions about CSS Specificity 。
The web's clipboard, and how it stores data of different types
文章介绍了浏览器粘贴板是如何存储不同类型数据的。
The Two Lines of CSS That Tanked Performance (120fps to 40fps)
降低性能的两行 CSS(从 120fps 降至 40 fps)。
排查性能问题先要了解页面的渲染过程(布局 Layout -> 绘制 Paint -> 组合 Composite),然后去分析每个过程的时间,找到出现问题的地方。
CSS-only infinite scrolling carousel animation
纯 CSS 实现轮播图。
Cool Bit
drwa me a comment
通过绘画留言,挺有趣的。
Experience the Apollo 11 Lunar Landing
体验 Apollo 11 月球登录的过程。
PaddingLeft
一个淘宝商店,可以购买一些贴纸,卖出的贴纸会为对应的开源项目捐赠 1 元。
Is My Blue Your Blue?
通过几次选择,判断你对绿色和蓝色的分辨程度,在蓝色和绿色之间的一些颜色,确实有点分不清。
Button Stealer | Anatoly Zenkov
一个 Chrome 插件,可以“偷”你访问的网页的按钮,一段时间后可以看看自己都“偷”了什么按钮。
Tool | Library
logo surf
logo 创建小工具。
Avatars - a list of free and fun avatars for your projects
一组免费的头像,可以用来作为系统的头像库。
Reasonable Colors
一些颜色面板,具有高对比度,符合 Web Content Accessibility Guidelines (WCAG) 2.1 推荐对比度。
@bramus/style-observer
可以监听 CSS 的变化的库,不过浏览器支持要求版本比较高。
Arc Browser
最近将浏览器换成了 Arc 浏览器,它是基于 Chrome 内核的,原来的插件,页面的调试都没有什么影响。
喜欢它的点是:
- 页面简洁,可以隐藏侧边栏
- 新增页面,切换页面地址栏的快捷键好用
- 浏览器内可以分屏看多个网页
- 页面 pin 比较好用
- 临时页面会打开一个 peak 小窗口,方便
缺点是在 windows 上似乎需要开启 tun 模式才能正常打开,对网络有一些要求。