序
在和四个实验室 Web 服务端大一学弟的为期俩周的准备下，2017 年 04.08 号这一整天，终于成功举办了这场编程马拉松活动。从最初的简单分享到发现时间不足而拓展成编程马拉松，也终于敲定了活动名称，确定了活动流程。此之谓：
小全栈编程马拉松
如果你还不了解我，不了解这场活动在大学氛围能够成功举办的背景，不妨看看这三篇文章，当然更多的故事在我的简书和微信订阅号之中（@韩亦乐）。
- 面向未来<-一位软工男的大一故事。里面讲了我大一的故事，分享出来的反馈效果真心不错。
- 思沃学院所带给我们的。影响我一生的暑期特训营经历，学到了编程软硬技能，找到了自己的使命。
- freeCodeCamp西安第一次线下编程活动体验。开始了自己成为小小开源编程社区组织者的心路全历程。
并且整场活动的文章内容在这里：
景
这场活动在西邮通院科协邀请下，由我所在的 CreatShare 互联网实验室主讲，包括全天流程及其干货内容都由 CreatShare 互联网实验室（其实就是我和四个学弟啦）策划并完善。我是这么形容这场活动对我的意义，其中可见从我的俩个大学实验室到我组织的本地 FCC 西安开源前端（全栈）社区活动，融汇了我俩年的“毕生所学”。
那么不多说，活动流程如下，用 MindeNode 绘制，贯穿 Web 前后端的基础知识点和软技能，激情的开始吧。
入
整场活动从前端到后端，首先便是 HTML + CSS 的必备基础内容。我们在这里引入了自己的思考，开启一场独特的“大前端”之旅。
HTML + CSS
以下三个图是从学弟的 PPT 中取材，HTML 可以了解结构和历史，CSS 可以看看选择器和属性，并用流行的 Sublime 编辑器做个 Demo 体验（匹配一下上面第一个学弟帅哥的照片，激发一下学习欲望）。
我做了总结和扩充，从真实世界到前端，从大前端看 Web。
写一个 Demo 解释一下吧~请忽视我的“高耦合”：
<!-- HTML 标签是由尖括号包围的关键词，比如 <html>，用来描述网页 -->
<html>
<head>
<title>这是我的第一个页面。</title>
</head>
<!-- Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们 -->
<body>
<h1>这是我的第一个大标题。</h1>
<!-- HTML 标签通常是成对出现的，比如 <b> 和 </b> -->
<p>这是我的第一个段落。</p>
<br/>
<hr/>
<h2>我比大标题小那么一丢丢</h2>
<p><a>这是我的第一个链接</a></p>
<p>别跑，我的头像好帅气</p>
<!-- 即将插入一个图像，虽然源码的耦合度不同 -->
<p></p>
</body>
</html>
这场名曰“ Web 全栈”的活动，怎么能不讲讲 Web 的背景？
好巧的是，查资料的时候，看到万维网之父刚刚获得图灵奖，实至名归，激动万分。
JavaScript + ChromeDevTool
相比“PHP 是世界上最好的语言”，JavaScipt 应该算是世界上最“全能”的语言了。JS 从最初的网页前端交互到现在的 Web 前后端、移动端混合应用、物联网甚至 AR、VR ，无所不在。毕竟，Atwood 定律告诉我们：
凡是可以用 JavaScript 来写的应用，最终都会用 JavaScript 来写。
[图片上传失败...(image-b400c6-1509644504877)]](http://upload-images.jianshu.io/upload_images/2558748-8e9718d163fb7f5b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
来场实战，想必在座的大学生大多都不怎么关注自己的“专业培养计划”，结合代码实战，来在西邮官网上实战抓取专业培养计划，利用了 JS 的 DOM 操作。
[图片上传失败...(image-63529b-1509644504877)]](http://upload-images.jianshu.io/upload_images/2558748-8b3f6459bfc4a6a8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
var v1 = document.getElementsByTagName("table")[2];
var nameArr = [];
var classCount = v1.childNodes[1].childElementCount - 1;
for (var i = 0; i < classCount; i++) {
var name = v1.childNodes[1].childNodes[i+1].childNodes[2].innerHTML;
var nature = v1.childNodes[1].childNodes[i+1].childNodes[6].innerHTML;
if (nature === "选修课") {
name += "(选)"
}
nameArr.push(name);
}
console.log(nameArr.join("，"));
是否是选修课也进行了判断，最终获得到四年培养计划的所有课程，短短的 JS 代码避免了多少手工记录，还加深了多少 DOM 知识呢？
发完讲师的照片就跑真刺激。（谁让比他大一级，逃。。
freeCodeCamp
啊啊啊，这个在线 JS 全栈编程平台向别人介绍的太多了。直接放图和链接吧！在早上的活动最后，向大家推荐了这个全球性开源编程社区平台。
Why...Why...Why always me to create blogs to review and share -- Virgo Me.
除了左下角的各大其他城市线下 JS 编程活动缩影外，其他三张都是我组织的 FCC 西安线下编程活动。认识到了五湖四海的大家。
影
8 小时的活动~！干货很多，软技能很多，怎么不来点 VIDEO~不能白白浪费了免费 Wi-Fi，大大的投影和热情参与的同学们啊，俩个视频来分享。相关链接可以在 Youtube、优酷等国内外平台搜在这里就不给你们贴链接了，劳动劳动更有意义吧。
从上面的第一个视频可以总结到，今天的程序员是未来的巫师，掌握着改造世界的方法。影片贯穿着生动的全球 IT 牛人变成回忆录：
- 比尔·盖茨，1955年10月28日出生，13 岁接触计算机，18岁考入哈佛大学，一年后从哈佛退学，接着与好友保罗·艾伦一起创办了美国微软公司。美国富豪400强榜单常居榜首。
- 杰克·多西，1976年11月19日出生，8 岁有自己的 Machintosh。2008 年 成为 Twitter 联合创始人兼CEO。
- 马克·扎克伯格，1984年05月14日生于美国纽约州白原市，小学 6 年级开始学编程，2004 年推动 Facebook 正式上线。
- 克里斯·波什，1984 年出生，美国职业篮球运动员，NBA 全明星。
绝对不会告诉你们的是，《TED 编织我的梦》这部 TED 演讲我在去年面向大一新生的 DIY 电脑俱乐部软件部第一次分享的主讲过程中就放映过，也认识到了这次的几位服务端大一学弟，实则，成功圈粉一大波迷弟。
乱入我在去年 DIY 电脑俱乐部软件部主讲的分享文章，和缩影一张。
没办法，我就是爱玩。哎，快大三了，这病，得治。
后
可能是我的“同性相惜(吸)”的气质太浓重了罢，短暂的午饭和午休过后，到了下午进行服务端分享的时候，早上的女生，就剩通院科协参与组织的了。
迷弟们，你们走吧，我想静静。( ತಎತ)
Full-Stack-Developer
什么是全栈工程师？我们该不该以全栈工程师为奋斗目标？我们又能从全栈工程师的方向中学习到什么？这里凝聚了我的感悟。
详细内容，记得去看看 我的第一个开源电子书：Little-FSD
[图片上传失败...(image-6ee8d1-1509644504877)]](https://github.com/bmorelli25/Become-A-Full-Stack-Web-Developer)](http://upload-images.jianshu.io/upload_images/2558748-d3e0d4da018a1d3a.png?imageMogr2/auto-orient/strip%7CimageView2/2)
正如精读和粗读，广度和深度也是永远矛盾的话题，先来一波知乎黑。
当然，我不这么认为，我理解的“全栈工程师”的重点不在于去复古曾经最早的下搞电路设计，中写汇编代码，上知设计模式的“全能程序员”，而是新时代的，拥有极强学习能力的编程“终生学习者”。
公司的事，就是你的事，不要局限在自己的职位内。转译自 Facebook。
从软件工程思考到的全栈工程师从某种角度可以说，就是产品运营、运营经理、视觉设计、前端工程师、服务端工程师，统统吃一口。下图是我在去年为我所在的 CreatShare 互联网实验室纳新准备的组织结构图可以参考。
关于这次活动的技术点，我也快速画在了概念图中，以做头脑风暴：Web 前端，Web 后端，框架、平台、工具、基础知识点等等。。
Linux + Apache
从下图链接中学弟的 PPT 中可以学习到，Linux 操作系统的基础知识和用法以及 Apache 服务器的用处、须知。这是我见过的，最详细的 PPT 没有之一。。
[图片上传失败...(image-63049d-1509644504877)]](http://upload-images.jianshu.io/upload_images/2558748-41728931a857a711.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
偷一张 PPT 放到这里：
PHP + MySQL
PHP。。我的大一便以服务端做为方向，PHP 作为学习语言来学习，在一定的了解过后，前后端的通吃的时间、精神压力下，终于选择了 JavaScript 作为找工作时的重点语言。PHP + MySQL 便是最后一位大一学弟的分享。
[图片上传失败...(image-c9cb56-1509644504877)]](http://upload-images.jianshu.io/upload_images/2558748-f6d7767182df2086.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
可以在 Windows 平台安装 XAMPP 的 PHP 运行环境傻瓜包，或在 MacOS、Linux 下更难更干货地安装开发环境，进行Apache、PHP 、MySQL的深入学习。这里贴一段代码，看看 PHP 怎么链接数据库，So Easy！
<?
$conn=mysql_connect('localhost','root','');
//状态
if(!$conn){
echo "connection failed";
exit;
}
//选择数据库
$sql='use student';
//conn通道进行
$rs=mysql_query($sql,$conn);
//设置字符集
$sql='set names utf8';
mysql_query($sql,$conn);
?>
PHP 当然必须得有收接 HTTP 请求的能力，比如处理 GET、POST 请求：
还可以模拟客户端发送 GET、POST 请求哦，就让爬虫开始吧。
可以用 postman 这类的 HTTP API 模拟工具实战。
真正的 Web 全栈工程师，是不需要依赖浏览器的。 -- 引用自 phantomjs 官网。
架构之战
到了这里，活动也接近尾声，分享的内容慢慢，但后端也只涉及了 LAMP 架构，即 Linux + Apache + MySQL + PHP，常被用来做传统的多页面网站。然而还有 MEAN 架构、.net 等等开发架构，可以幽默的解释为什么我们要学习后端？
MEAN 架构，发扬了 Web 单页面应用的存在需求。MEAN 便是基于 JavaScript 的全栈框架 MongDB、Express.js、Angular.js、Node.js 。freeCodeCamp 在线编程平台便是用 MEAN 架构实现。技术没有优劣性，开发者可以择一而入。
另外俩个大一服务端学弟也在这里，能看出来吗？就是站着的俩位（逃。
我，终于，露脸了，围观请打赏~Two Three Three。
曲
我在 DIY 电脑俱乐部软件部分享的回顾文章里就以下面这段话结尾：
分享到最后时间也晚了，教室也要关门了。这次分享结束，但人生未尝不是一次重新开始~
是啊，这次，再一次重新开始，再一次与众不同，期待未来的更加精彩吧！
[图片上传失败...(image-6e1734-1509644504877)]](http://upload-images.jianshu.io/upload_images/2558748-8985814dd5364c87.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
全栈，是一种心态！
- Hello，我是韩亦乐，现任本科软工男一枚。软件工程专业的一路学习中，我有很多感悟，也享受持续分享的过程。如果想了解更多或能及时收到我的最新文章，欢迎订阅我的个人微信号：韩亦乐。我的简书个人主页中，有我的微信个人订阅号二维码和 Github 主页地址；我的知乎主页 中也会坚持产出，欢迎关注。
- 本文内部编号经由我的 Github 相关仓库统一管理；本文可能发布在多个平台但仅在上述仓库中长期维护；本文同时采用【知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议】进行许可。
