看点

• 地图的经纬度、瓦片、墨卡托投影介绍与简单实现。

• 普通人的网页配色。

• 一些学习方法：主动接近大佬、围绕工作学、常用 debug、言之有物，不要无病呻吟、多查官方标准。

知识

从零打造一个 Web 地图引擎

本文从零实现了一个栅格地图，栅格地图是由一个个小方块图片组成的，这个小方块叫瓦片，瓦片有固定的编号规则，后端生成了所有的瓦片，前端想要展示地图只要找到对应的瓦片显示出来即可，经纬度通过 web 墨卡托投影后能计算出对应的瓦片编号，之后计算出屏幕要展示的瓦片，以及监听拖动和缩放即可。

普通人的网页配色方案

没有 UI 设计，前端自己开发网页时，使用配色的建议。

思考

对于颜色的理解，前端应该具备基本的美感，如：使用好看的颜色、合适的布局、边距使用 8 12 16 px 等等。

可选的配色：网页设计的 12 种颜色、各种国外 ui 的颜色、material ui color、bootstrap ui Color、Ant Design 色彩、设计变量 Semi Design Tokens、arco 设计，以及好看的阴影。

vs code 调试网页 JS 代码

配置.vscode/launch.json文件可在 vs code 中调试网页代码，并且还能查看性能分析。

思考

vs code 调试相比于浏览器调试的优势：一些写代码的惯性操作可以直接复用，如：代码搜索、折叠等操作，而不是在浏览器和编辑器之间频繁切换。

方法

聊聊我遇到的那些贵人

主动接近各种大佬，展现出自己的潜力。肯知识付费，这样能获得高质量的知识，算是一种高回报投资了。

四句话总结我的学习观

围绕工作学，才能使你对于这方面更加深入，而不是仅停留在 demo 级别。常用 debug。你学习了一些知识，如果没用到实践中的话，那就是没学会，如果不能给别人讲明白的话，那就是没学透彻。

写文章注意

经验与思考简约，尽量不展示多余内容。

有时一图抵千言，有时只会拖慢网页加载速度。

言之有物，不做无痛之呻吟。

杜绝难理解的长句子，如果不能将其拆分成几个简洁的短句，说明理解的并不清晰。

多查官方标准文档

多看好的文档，可以节约你的时间，如 MDN、ECMAScript 2021 标准，最近分享了浮点数相关知识，看标准给了我很大帮助。

还有 whatwg html 规范、css 规范（css规范比html难读一些），可参考：大漠：我认识的 W3C 规范。

2022-01-23 ~ 2022-02-27（第 7 期）

好歌推荐：踏雪 等什么君(邓寓君)