Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[B0E]中国首届开发者关系大会分会场 | freeCodeCamp西安线下编程活动体验#06 #46

Open
hylerrix opened this issue Sep 20, 2017 · 0 comments
Open

[B0E]中国首届开发者关系大会分会场 | freeCodeCamp西安线下编程活动体验#06 #46

hylerrix opened this issue Sep 20, 2017 · 0 comments
Labels
article community memorable

Comments

@hylerrix
Copy link
Owner

这个是大一服务端学弟哦 q(´･ω･`)p

那就开始吧！

序

在和四个实验室 Web 服务端大一学弟的为期俩周的准备下，2017 年 04.08 号这一整天，终于成功举办了这场编程马拉松活动。从最初的简单分享到发现时间不足而拓展成编程马拉松，也终于敲定了活动名称，确定了活动流程。此之谓：

小全栈编程马拉松

如果你还不了解我，不了解这场活动在大学氛围能够成功举办的背景，不妨看看这三篇文章，当然更多的故事在我的简书和微信订阅号之中（@韩亦乐）。

并且整场活动的文章内容在这里：

景

这场活动在西邮通院科协邀请下，由我所在的 CreatShare 互联网实验室主讲，包括全天流程及其干货内容都由 CreatShare 互联网实验室（其实就是我和四个学弟啦）策划并完善。我是这么形容这场活动对我的意义，其中可见从我的俩个大学实验室到我组织的本地 FCC 西安开源前端（全栈）社区活动，融汇了我俩年的“毕生所学”。

那么不多说，活动流程如下，用 MindeNode 绘制，贯穿 Web 前后端的基础知识点和软技能，激情的开始吧。

最帅的大一学弟没有之一 (´థ౪థ ) ☞

入

整场活动从前端到后端，首先便是 HTML + CSS 的必备基础内容。我们在这里引入了自己的思考，开启一场独特的“大前端”之旅。

HTML + CSS

](http://upload-images.jianshu.io/upload_images/2558748-f79355886097698c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

以下三个图是从学弟的 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>![](http://upload-images.jianshu.io/upload_images/2558748-699f535e2b458353?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</p>
    </body>
</html>

这场名曰“ Web 全栈”的活动，怎么能不讲讲 Web 的背景？

好巧的是，查资料的时候，看到万维网之父刚刚获得图灵奖，实至名归，激动万分。

JavaScript + ChromeDevTool

相比“PHP 是世界上最好的语言”，JavaScipt 应该算是世界上最“全能”的语言了。JS 从最初的网页前端交互到现在的 Web 前后端、移动端混合应用、物联网甚至 AR、VR ，无所不在。毕竟，Atwood 定律告诉我们：

凡是可以用 JavaScript 来写的应用，最终都会用 JavaScript 来写。

https://ppt.baomitu.com/d/e3804f96#

来场实战，想必在座的大学生大多都不怎么关注自己的“专业培养计划”，结合代码实战，来在西邮官网上实战抓取专业培养计划，利用了 JS 的 DOM 操作。

http://222.24.62.120

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 知识呢？

发完讲师的照片就跑真刺激。（谁让比他大一级，逃。。

这个是大一服务端学弟哦 q(´･ω･`)p

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 电脑俱乐部软件部主讲的分享文章，和缩影一张。

漫游C世界--DIY软件部编程之旅

秀秀秀 迷迷迷

没办法，我就是爱玩。哎，快大三了，这病，得治。

后

可能是我的“同性相惜(吸)”的气质太浓重了罢，短暂的午饭和午休过后，到了下午进行服务端分享的时候，早上的女生，就剩通院科协参与组织的了。

迷弟们，你们走吧，我想静静。( ತಎತ)

Full-Stack-Developer

什么是全栈工程师？我们该不该以全栈工程师为奋斗目标？我们又能从全栈工程师的方向中学习到什么？这里凝聚了我的感悟。

详细内容，记得去看看 我的第一个开源电子书：Little-FSD

[github@bmorelli25/Become-A-Full-Stack-Web-Developer](https://github.com/bmorelli25/Become-A-Full-Stack-Web-Developer)

正如精读和粗读，广度和深度也是永远矛盾的话题，先来一波知乎黑。

全栈黑~

当然，我不这么认为，我理解的“全栈工程师”的重点不在于去复古曾经最早的下搞电路设计，中写汇编代码，上知设计模式的“全能程序员”，而是新时代的，拥有极强学习能力的编程“终生学习者”。

公司的事，就是你的事，不要局限在自己的职位内。转译自 Facebook。

从软件工程思考到的全栈工程师从某种角度可以说，就是产品运营、运营经理、视觉设计、前端工程师、服务端工程师，统统吃一口。下图是我在去年为我所在的 CreatShare 互联网实验室纳新准备的组织结构图可以参考。

关于这次活动的技术点，我也快速画在了概念图中，以做头脑风暴：Web 前端，Web 后端，框架、平台、工具、基础知识点等等。。

驾驭头脑风暴

Linux + Apache

从下图链接中学弟的 PPT 中可以学习到，Linux 操作系统的基础知识和用法以及 Apache 服务器的用处、须知。这是我见过的，最详细的 PPT 没有之一。。

git@icorvoh/Little-FSD

偷一张 PPT 放到这里：

PHP + MySQL

PHP。。我的大一便以服务端做为方向，PHP 作为学习语言来学习，在一定的了解过后，前后端的通吃的时间、精神压力下，终于选择了 JavaScript 作为找工作时的重点语言。PHP + MySQL 便是最后一位大一学弟的分享。

git@icorvoh/Little-FSD

可以在 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 架构实现。技术没有优劣性，开发者可以择一而入。

LAMP V.S Node.JS

另外俩个大一服务端学弟也在这里，能看出来吗？就是站着的俩位（逃。

最后俩个大一学弟在哪里 ( _ ͡° ͜ʖ ͡° )_

我，终于，露脸了，围观请打赏~Two Three Three。

曲

我在 DIY 电脑俱乐部软件部分享的回顾文章里就以下面这段话结尾：

分享到最后时间也晚了，教室也要关门了。这次分享结束，但人生未尝不是一次重新开始~

是啊，这次，再一次重新开始，再一次与众不同，期待未来的更加精彩吧！

git@icorvoh/Little-FSD

全栈，是一种心态！
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
article community memorable
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@hylerrix