前端开发吐槽大会
Episode 1 · June 15th, 2020 · 57 mins 51 secs
About this Episode
白羊：我觉得我们录完没说到一起去啊。
Astrian：怎么讲？我觉得还成？
白羊：我一直在说元素排版的问题，你一直在说分辨率的事儿。
Astrian：🙄🙄🙄
久等了！因为这期的剪辑出了一点小问题，因此让大家等待的时间有点长，非常抱歉。
Echo.js（真正的）第一期节目，两位点了不少前端技能点的主播，简单谈了谈有关前端开发（网页开发）的历史，吐槽有关 HTML 历史遗留问题带来的各种奇形怪状的问题，其中就包括多屏幕适配、长期以来的排版样式问题，以及目前前端开发技术栈被替代的可能性。
➤ 节目索引
- 00:00:00 开场
- 00:01:17 为什么要吐槽前端开发？
- 00:04:00 响应式前端开发的由来
- 00:10:17 HTML 的「流式布局」
- 00:15:34 正常流程下做响应式网页的方法
- 00:19:41 让人又爱又恨的栅格系统
- 00:26:21 向 flex 开炮
- 00:33:38 Flex 是一个比栅格系统更灵活的排版系统
- 00:36:50 在网页做排版是一件「逆天而行」的事情
- 00:38:13 另类适配方案
- 00:55:43 马后槽：虽然会造成各种各样的问题，但意外很好用的…… 表格排版法
- 00:56:43 尾声
➤ STAFF
主播：Astrian、白羊
剪辑：白羊
特别感谢：Christopher
➤ 补遗
Christopher 在事后提醒我们，显像管显示器显示比例通常是 4:3 的重要原因是，更接近正方形的显像管显示器更容易以低成本方式生产。
➤ 相关链接
- 知乎上有关显像管显示器比例的讨论：为什么早期屏幕是 4:3 比例？
- 有关 WAP 的维基百科资料：无线应用协议
- 节目中提到的几个前端视觉框架：Bootstrap、iView 和 Element
- 拯救前端开发者们的 flex 样式特性的 官方文档
- 通过绘制的草图生成 HTML 的工具：Sketch2Code。我们当时看的好像不是微软做的，不过原理似乎差不太多。
- 在没有 Flex 的时候，设前后左右都是 50% 的居中方式：HTML+CSS，让 div 在屏幕中居中（水平居中 + 垂直居中）方法总结
➤ 关于 Echo.js & 联系我们
Echo.js 是一档关于编程与开发的播客节目。官网地址是 podcast.astrianzheng.com。我们推荐使用支持 RSS 方式订阅（即「泛用型」）的播客客户端收听。
有话想说？可以来小宇宙 app 订阅 Echo.js 并给节目发评论，也可以发邮件至 podcast(a)astrianzheng.com。
关注我们的：Telegram 频道、Twitter
➤ COPYRIGHT DISCLIMER
开场音乐：Track: TOKYO MACHINE & Guy Arthur - GET UP [NCS Release]. Music provided by NoCopyrightSounds. Watch: https://youtu.be/HV7mLcsUp5U, Free Download / Stream: http://ncs.io/GetUp