首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >51. 精读《Elements of Web Dev》

51. 精读《Elements of Web Dev》

作者头像
黄子毅
发布于 2022-03-14 08:11:58
发布于 2022-03-14 08:11:58
2910
举报
文章被收录于专栏:前端精读评论前端精读评论

1 引言

本周精读, 来一起总结web开发的环节, 知识块和技能点. 是不是像xx速成班宣传的一样, 培训三个月, 经验顶三年, 入职BAT, 年薪三十万?

本文虽然是罗列知识点, 但我想很有意义. 对于学习的人来说, 提供一个路线图. 对从业者来说, 对全局有更好的把控, 利于看到自己的强项和不足. 对组建团队, 更能起到一个点将谱的作用.

在网上我没有搜到任何深入全面的总结, 提供的那几篇已经算稍微好一些的了. 其他的要么太过笼统(前端-后端-数据-运维, 完毕)要么太细太窄(并不是不好, 只是和本文性质不一样). Generalist和Specialist之间永远是一对辩证矛盾, 持续思考.

本文提供了有层级的列表形式, 如果有兴趣的读者可以把它做成概念图形式, 相互关联与距离相关, 可能会有意料之外的效果.

2 列表

列表形式, 方便搜索浏览, 加上一些解释和列举

Backend

  • authentication, oauth
  • API design, RESTful, GraphQL
  • payment integration
  • social integration
  • session/cookie management
  • user management
  • Server, e.g. nginx, connection model, conf, rewrite
  • CRM

Deployment, Env management, Container

  • rollback/rollforward
  • no downtime, non-disruptive deployment
  • deploy to downstreams, e.g. npm, chrome extension store
  • artefact management, e.g. gzips, OS specific builds
  • container technology e.g. Docker, AWS ami

DB

  • schema design
  • ORM
  • language/env specific driver
  • test/seed data
  • backup
  • batching, DB perfgomance
  • query syntax, e.g. SQL, mongo query syntax
  • connection pool/concurrent connection management
  • connection restriction e.g. localhost only

MessagingQueue/Middleware

Testing

  • parallel execution
  • UI automated testing
  • browser/OS compatibility, e.g. headless browser, cloud solutions
  • screenshot diff regression
  • unit test, isolation
  • mocking
  • integration test techniques
  • coverage (line coverage, path coverage etc.), permutations

Security

  • CSRF, XSS, SQL injection, DDoS, brute force etc.
  • automated tools

OS

  • OS differences, e.g. filesystem, path separator
  • run daemon, startup job, process manager
  • ssh
  • everything bash, zsh, powershell, e.g. wildcard, expansion, syntax
  • everything *nix, du, filesystem, ps, process model, netstat, pipes

networking

  • HTTP, and everything it entails e.g. CORS, MIME types, chunked
  • websocket
  • webworker, service worker
  • proxy

Web visualization technologies and principles

  • webgl
  • 2D/3D coord system and calculations

Web standards, e.g. webassembly

performance tuning

  • frontend: lighthouse
  • backend: load balancing, perf monitoring and profiling

Source control

  • work flow
  • tagging, release, branching
  • PR, collaboration
  • commit message conventions

Project management, Product management

  • main success scenario
  • PRD doc, sketch
  • milestone, timeline, estimate
  • daily report, weekly report

Software Monitoring

  • performance monitor
  • exception monitor
  • alert and alarm rules
  • logging

Engineering

  • lint, prettier, custom rules, autofix
  • editor, IDE, plugins, e.g. intellisense
  • debugging, remote debug, debug mobile

Analytics

  • heatmap
  • conversion
  • bounce rate

Frontend

  • data flow
  • state management
  • componentization
  • transpile, packing tool, e.g. webpack gulp coffeescript Typescript
  • templating, e.g. handlebar
  • ajax, jsonp etc.

Design / styling

  • cascading rules
  • preprocessor, e.g. scss less
  • box model
  • z-index
  • flexbox
  • design principles, layout, color, theme

3 参考阅读

https://medium.com/coderbyte/a-guide-to-becoming-a-full-stack-developer-in-2017-5c3c08a1600c

https://medium.com/codingthesmartway-com-blog/the-2018-roadmap-to-fullstack-web-development-8884ff02557a

https://www.lynda.com/learning-paths/Web/become-a-full-stack-web-developer

4 更多讨论

讨论地址是:精读《Elements of Web Development》 · dt-fe/weekly

如果你想参与讨论,请点击这里,每周都有新的主题,每周五发布。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-06-17,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端精读评论 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
1 条评论
热度
最新
contentWindow.onload "Blocked a frame with origin "http://localhost:5000" from accessing a cross-origin frame."
contentWindow.onload "Blocked a frame with origin "http://localhost:5000" from accessing a cross-origin frame."
回复回复点赞举报
推荐阅读
窗口间通信方案——postMessage
postMessage 是 html5 引入的 API,postMessage 方法允许来自不同源的脚本采用异步方式进行通信,其实同源不同页面的脚本也可以采用 postMessage 方法进行通信。
用户6256742
2024/05/31
2730
postMessage与postMessage跨域
HTML5学堂今日postMessage跨域教学流程 先为大家讲解postMessage的基本知识 之后,我们书写一个实例:使用静态的iframe,实现A域前端页面与B域前端页面之间的数据传递 最后,我们使用JS动态的生成iframe,实现A域的前端页面与B域的前端页面“互通”,并在B域中使用AJAX申请B域的后台数据 1 postMessage通信的方法与事件 postMessage的跨域方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。 想要完成“一个域”与“另
HTML5学堂
2018/03/13
3.2K0
postMessage与postMessage跨域
Web中的窗口通讯方式及使用(postMessage/MessageChannel/BroadcastChannel)
三种常用的跨窗口通信技术:postMessage、MessageChannel 和 BroadcastChannel。
码客说
2024/01/06
2.4K0
postMessage的使用
postMessage是H5的API,用来解决跨页面通信的。postMessage的使用分为发送方和接收方。
全栈程序员站长
2022/09/14
1.1K0
iframe 与 postMessage 方法
既是发消息,就有发送方与接收方,发送方要调用 postMessage 方法,接收方要注册 onmessage 事件处理函数,处理接收的消息。
挥刀北上
2023/06/20
8880
iframe 与 postMessage 方法
【JS】504- HTML5 之跨域通讯(postMessage)
本文来自公众号【前端早读课】,最近工作中用在使用 postMessage ,所以一起分享给大家一下~
pingan8787
2020/02/26
1.9K0
【JS】504- HTML5 之跨域通讯(postMessage)
跨域方法汇总
做 Web 开发经常需要面对跨域问题,跨域问题的根源是浏览器安全中的同源策略,比如说,对于 http://www.a.com/1.html 来说:
四火
2022/07/18
6540
跨域方法汇总
《前端实战总结》之使用postMessage实现可插拔的跨域聊天机器人
首先要强调的是跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的。我们常用的跨域技术主要有如下几种:
徐小夕
2019/11/14
1.2K0
《前端实战总结》之使用postMessage实现可插拔的跨域聊天机器人
postMessage使用
参考自文档:https://www.runoob.com/js/met-win-postmessage.html
蓓蕾心晴
2022/06/30
5910
web messaging与Woker分类:漫谈postMessage跨线程跨页面通信
iframe_contentWindow.postMessage(message, targetOrigin, [transfer]);
周陆军
2021/07/03
2.4K0
postMessage 还能这样玩
在日常工作中,消息通信是一个很常见的场景。比如大家熟悉 B/S 结构,在该结构下,浏览器与服务器之间是基于 HTTP 协议进行消息通信:
ConardLi
2020/11/26
2.1K0
postMessage 还能这样玩
详解使用postMessage解决iframe跨域通信问题
这周碰到一个让人头疼的需求:要在我的web项目中嵌入另一个第三方web项目。第一时间想到的就是用iframe了,但问题来了,我和第三方web项目是有交互的,这就违反同源策略了,处理跨域问题是最让人头疼的事之一。
用户1289394
2021/10/13
4.9K0
JSONP && CORS
  前天面试被问到了跨域的问题,自我感觉回答的并不理想,下面我就分享一下整理后的总结分享给大家
超然
2018/08/03
1.4K0
JSONP && CORS
通过postMessage进行跨域通信
最近工作中遇到一个需求,场景是:h5页作为预览模块内嵌在pc页中,用户在pc页中能够做一些操作,然后h5做出响应式变化,达到预览的效果。
Keller
2021/12/14
8040
前端:跨域
同源策略(same-origin policy)是一个重要的安全策略。它用于限制从一个源(origin)加载的文档或脚本,如何与另一个源(origin)的资源进行交互。
WEBJ2EE
2020/05/22
1.3K0
前端:跨域
如何利用postMessage窃取编辑用户的Cookie信息
某天,当我在做某个项目的漏洞测试时,在登录的一些HTTP请求记录中,我发现了一种利用postMessage方式窃取和编辑用户Cookie的方法。由于该测试是邀请测试,出于保密,我只能在下文中和大家分享一些方法思路。
FB客服
2019/05/09
1.7K0
如何利用postMessage窃取编辑用户的Cookie信息
深入理解 <iframe>的双向通信:从基础到实战
在现代 Web 开发中,<iframe> 是一个常用的 HTML 元素,用于在页面中嵌入另一个网页。然而,<iframe> 的嵌入页面与父页面之间的通信一直是一个复杂且容易出错的问题。本文将深入探讨 <iframe> 的双向通信机制,从基础概念到实战应用,帮助开发者彻底掌握这一技术。
Front_Yue
2025/03/12
5900
深入理解 <iframe>的双向通信:从基础到实战
你真的了解跨域吗
相信每个前端对于跨域这两个字都不会陌生,在实际项目中应用也很多,但跨域方法的多种多样让人目不暇接,前段时间公司同事出现了跨域问题,又一时找不到问题所在,所以在此总结下跨域知识,一篇由浅入深的万字Web基操文
isboyjc
2022/03/28
2.6K0
你真的了解跨域吗
postMessage实现跨域通信
web通信(洋名:web messaging)是一种文档中独立的浏览上下文间的DOM不会被恶意的跨域脚本暴露数据分享方式。
javascript.shop
2019/09/04
1.8K0
postMessage实现跨域通信
web跨域解决方案
阅读目录 什么是跨域 常用的几种跨域处理方法: 跨域的原理解析及实现方法 总结 摘要:跨域问题,无论是面试还是平时的工作中,都会遇到,本文总结处理跨域问题的几种方法以及其原理,也让自己搞懂这方面的知识,走起。 什么是跨域     在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略)。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制,即JavaScript只能访问与包含它的文档在同一域下的内容。   JavaScript这个安全策
hbbliyong
2018/03/06
2.9K0
web跨域解决方案
相关推荐
窗口间通信方案——postMessage
更多 >
LV.0
这个人很懒,什么都没有留下~
目录
  • 1 引言
  • 2 列表
    • Backend
    • Deployment, Env management, Container
    • DB
    • MessagingQueue/Middleware
    • Testing
    • Security
    • OS
    • networking
    • Web visualization technologies and principles
    • Web standards, e.g. webassembly
    • performance tuning
    • Source control
    • Project management, Product management
    • Software Monitoring
    • Engineering
    • Analytics
    • Frontend
    • Design / styling
  • 3 参考阅读
  • 4 更多讨论
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档