04软技能的掌握

优质资源-各类主流学习编程的社区和网站平台

• Stack Overflow
• Scrimba
• YouTube
• freeCodeCamp
• Codecademy
• Dev.to

有效学习

学习 web 开发更多的是解决问题和学习模式，而不是学习大量语法。

了解资源的使用时机

常见文档类型：

• 参考资料：编程书，通常包含开发者可能会用到的各特性的目的和语法
• 教程：允许开发者学习如何使用新技术，适合初学者
• 指南/使用方法：通常只在解决具体问题
• 概念/解释：侧重于解释特定技术背后的高层次概念和用例
• 问答/论坛：供提问和让其他人回答问题的网站

关于复制粘贴

• 复制粘贴并使用不是自己编写且不能理解的代码的做法不被推荐
• 亲自操作是记住技能或概念的关键
• 可能引发许可问题
• 应当先试着弄清楚工作原理再进行复制粘贴。

有效搜索

• 查阅官方文档
• 检查所找资源的日期
• 即使新出版的资源也可能包含过时的信息
• 交叉参考不同的资料来源
• 尝试使用人工智能解决问题

• • 加快研究和搜索速度，帮助构建代码和副本
  • 不全是正确的，应该对其进行测试并与其他来源的信息进行交叉验证

有效解决问题

将问题拆分为小部分

任务：构建一个简单的两栏网站，拆分为

• 创建 HTML 结构
• 确定基本的网站排版
• 确定基本的配色方案
• 实现整体布局——包括页眉，横向导航菜单，含主栏和侧栏的主要内容区以及页脚
• 实现横向导航菜单
• 等

对某些部分进行拆分，实现横向导航菜单，拆分为

• 编写菜单项的 HTML 列表
• 将菜单项水平排列成一行
• 移除表的默认间距和项目符号
• 为菜单项设置合适的悬停、聚焦和激活状态样式
• 均匀排列菜单项
• 给菜单项流出足够的垂直间距
• 确保每个菜单项内的文本居中
• 等等

识别模式

Web 开发主要是关于解决问题和识别模式

通常导航菜单是由一组链接组成，

<ul>
  <li><a href="">菜单一</a></li>
  <li><a href="">菜单二</a></li>
  <li><a href="">菜单三</a></li>
</ul>

使用弹性盒子实现水平排列并移除间距和项目符号

ul {
  display: flex;
  list-style-type: none;
  padding: 0;
}

查看他人的代码

浏览器内自带的开发者工具F12允许查看任何网站构建时所用的代码，当使用类似功能时，可以寻找网站，并查看他们是如何实现的。

典型技术组合

使用不同的技术组合，通常称为技术堆栈，一个简单的网站需要

• 快速加载（ 这是性能的目的）
• 同时处理大量用户（必须扩展）
• 设计得当，用户可轻松访问其中包含的信息和服务
• 团队易于工作和维护

web 应用程序技术堆栈如下：

Front-end
HTML,CSS,JavaScript
|
Back-end
Node.js, .NET, PHP, Python...
|
Database
MySQL, Postgres, MongoDB...
|
Web server
Apache, Netlify...

指代 Poplar 技术堆栈的首字母缩略词

• MEAN：MongoDB,Express,Angular,Node
• LAMP：Linux,Apache,MySQL,PHP/Python

前端部分：

• JavaScript 框架（ React ) 来定义一起创建用户页面的组件
• 该框架可能会使用某种模板语言（ Mustache）来定义 HTML 结构，也提供动态包含可变内容的功能
• 通过 CSS 设置内容样式，可能是纯 CSS，也可以是 CSS 框架（Tailwind）或者预处理器（ Sass）编写的
• JavaScript 项目应该包括测试，以确保任何新代码添加都不回破坏其功能，测试通常使用测试框架（ Jest）实现
• 较大的网站将使用打包/构建工具（ Parcel），通过减小文件大小，从生产代码中删除未使用的组件来提高性能

Web 开发团队中的角色、技术项目阶段、工作管理流程

工作角色

• 产品经理
• 项目管理人
• 用户体验（UX）设计师
• 平面设计师
• 前端开发人员
• 后端开发人员
• 全栈开发人员
• 质量保证工程师
• 内容专家/技术作家

技术项目阶段

1. 产品经理确定网站的一组新用户需求
2. 团队讨论，添加功能以满足这些需求
3. 项目经理与团队讨论新功能所需的单个工作项，并创建流程来管理
4. UX 设计人员为新功能设计一个工作流，并设计线框图
5. 平面设计师设计一个模型，显示该功能在网站上的外观，以及所选用的字体和调色板
6. 内容专家编写该功能所需的 UI 文本，以及支持该功能所需的文档
7. 后端开发人员创建必要的系统来安全地存储和处理为该功能提供支持的数据
8. 前端开发人员根据平面设计师的模型创建交互功能，并将其链接到后端，以便检索数据
9. QA 工程师对新功能进行彻底测试，并就发现的问题撰写详细报告
10. 开发人员修复错误
11. 修复错误并签署项目，发布网站上线

工作管理流程

项目经理讲使用某种流程来管理网站项目，监控不同工作项的进度，确保它们按时按顺序完成等

• 瀑布流程

指在明确、固定的阶段运行一个项目，其中每个阶段都依赖于前一个阶段，并且预计需求不会发生太多变化。通常，在项目结束时会交付一个大结果。团队的管理往往更加官僚化，自主权较少。

• 敏捷流程

指更灵活地运行一个项目，其中多个阶段可以同时进行，并且倾向于在整个项目的各个不同里程碑上交付多个较小的结果。需求的变化是预期的，并且可以通过根据需要改变优先级来处理。团队通常更加自主。