整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

适合 JS 新手学习的开源项目-在 GitHub 学编程

者:HelloGitHub-小鱼干

这里是 HelloGitHub 的《GitHub 上适合新手的开源项目》系列的最后一篇,系列文章:

  1. C++ 篇
  2. Python 篇
  3. Go 篇
  4. Java 篇
  5. JavaScript 篇

Java 篇中老荀说到当今互联网份额最大的编程语言是 Java,作为后辈我对此话是没有异议的。但,要说到国内互联网最火、最热闹的编程语言是什么?应该没人对 JavaScript 当选有异议吧。相对 C++、Java 这些老前辈,JS 可谓门槛之低,连 Python 都自叹不如。那作为一个新手要学习系统化地学习 JS,应该走哪几步呢?

  • 第一步:打开浏览器,输入网址:hellogithub.com
  • 第二步:选择 JavaScript 项目
  • 第三步:逐一学习

[手动狗头]有更快捷的方法吗?有!在本篇文章中你将从基础招式学习,了解 HTML、CSS、JS 等基础概念之后,实践一把吃豆人游戏制作,再开启性能调优之旅,最后闯荡前端江湖。

出发,前进

成神第一式:打好根基

1.1 前端成长之路:Web

HG #vol.036 Web 是一个前端入门的图文教程,记录了作者从 0-1 学习前端的过程。作为一个入门的图文教程,Web 遵循了事无巨细原则,在所有的介绍中详细讲 HTML、CSS、JS 等知识点,简单的移动端开发、Vue 等框架使用、Node.js 介绍也略有涉猎。值得一提得失,它所有的示例中代码注释清楚地标注了使用某个函数时你所需要注意的事项,贴心到不行。

不过,Web 项目在 JS 基础和进阶内容分层方面略有不足,会发现 16 个类目有许多重复内容,以及原先在前端进阶分类下的前端几道题被独立出来成为一个单独分类,收录了大量面试题和网友面经,但瑕不掩瑜,该 Repo 绝对是一个新手入门的实用教程。

由于作者没有对分类内容及分类下内容做脑图介绍,所以这里小鱼干绘制了它的脑图/目录结构,部分相同主题内容进行了折叠。

.
|── 前端工具
|   ├──VS Code 的使用
|   ├──Git 使用
|   ├──Mac 安装和 iTerm2 配置
|   ├──Sublime Text 的使用
|   ├──WebStorm 的使用
|   ├──Atom 的使用
|   ├──GitHub 的使用
|   ├──VS Code 的使用累积
|   ├──Chrome 浏览器
|   ├──Emmet in VS Code
|   ├──iTerm2 + OhMyZsh + agnoster 搭建
|   ├──iconMoon
|   └──whistle 网络抓包
|──HTML
|   ├──认识 Web 和 Web 标准
|   ├──浏览器的介绍
|   ├──初识 HTML
|   ├──HTML 标签:排版标签
|   ├──HMTL 标签:字体标签和超链接
|   ├──HTML 标签:图片标签
|   ├──HTML 标签:图文详解
|   ├──HTML5 详解
|   ├──HTML5 举例:简单的视频播放器
|   ├──HTML 详解(二)
|   ├──HTML 详解(三)
|   └──HTML 基础回顾
|──CSS 基础
|   ├──CSS 属性:字体属性和文本属性
|   ├──CSS 属性:背景属性
|   ├──CSS 样式表和选择器
|   ├──CSS 选择器:伪类
|   ├──CSS 样式表的继承性和层叠性
|   ├──CSS 盒模型详解
|   ├──浮动
|   ├──CSS 属性:定位属性
|   ├──CSS 案例讲解:博雅互动
|   ├──CSS3 选择器详解
|   ├──CSS3 属性详解(一)
|   ├──CSS3 属性详解:动画详解
|   ├──CSS3 属性:Flex 布局图文详解
|   ├──CSS3 属性:Web 字体
|   ├──SaaS 入门
|   ├──浏览器的兼容性问题
|   └──CSS3 的常见边框汇总
|──CSS 进阶
|   ├──准备
|   ├──CSS 中的非布局样式
|   ├──CSS 布局
|   ├──网页开发和设计中的字体常识
|   ├──如何让一个元素水平居中
|   ├──CSS 开发累积
|   ├──CSS 文章推荐
|   ├──CSS 的一些小知识
|   └──CSS 面试题
|──JS 基础
|   ├──编程语言
|   ├──JS 简介
|   ├──变量
|   ├──变量的数据类型:基本数据类型和引用数据类型
|   ├──基本数据类型
|   ├──typeof 和数据类型转换
|   ├──运算符
|   ├──流程控制语句
|   ├──对象简介
|   ├──基础包装类型
|   ├──内置对象
|   ├──数组
|   ├──函数
|   ├──作用域和变量提升
|   ├──预编译
|   ├──this 指向
|   ├──call、apply 和 bind
|   ├──高阶函数
|   ├──闭包
|   ├──对象
|   ├──深浅拷贝
|   ├──原型链和原型继承
|   ├──类和构造继承
|   ├──正则表达
|   ├──事件
|   └──jQuery
|──JS 之 ES6 语法
|   ├──ES6 介绍和环境配置
|   ├──ES5 中的严格模式
|   ├──ES5 中的一些扩展
|   ├──ES6:变量 let、const 和块级作用域
|   ├──变量的解构赋值
|   ├──箭头函数
|   ├──剩余参数和扩展运算符
|   ├──字符串、数据和对象的扩展
|   ├──内置对象扩展:Set 数据解构
|   ├──Promise 入门详解
|   ├──ES7:async 函数详解
|   └──ES6:Symbol
|──JS 进阶
|   ├──var、let、const 的区别
|   ├──数据的赋值
|   ├──JS 开发累积
|   ├──call、apply、bind 的区别
|   ├──this
|   ├──作用域与闭包
|   └──创建对象和继承
|──前端基本功
|   ├──CSS 基础练习
|   └──DOM 操作练习
|──Ajax
|   ├──服务器分类及 PHP 入门
|   ├──Ajax 入门和发送 http 请求
|   ├──函数封装
|   ├──同源和跨域
|   └──模版引擎
|──移动 Web 开发
|   ├──Bootstrap 入门
|   ├──Bootstrap 使用
|   └──Less 详解
|──Node.js 和数据库
|   ├──Node.js 介绍
|   ├──Node.js 的特点
|   ├──Node.js 开发环境安装
|   ├──Node.js 模块化规范
|   ├──Node.js 内置模块
|   ├──Node.js 操作 MySQL 数据库
|   ├──CommonJS
|   ├──ES6
|   ├──JS 模块化:AMD
|   ├──JS 模块化:CMD
|   ├──JS 模块化:ES6
|   ├──KOA2
|   ├──Node.js 代码举例
|   ├──WebSocket
|   └──事件驱动和非阻塞机制
|──Vue 基础
|   ├──指令系统
|   ├──v-on 事件修饰符
|   ├──系统指令(二)
|   ├──举例:列表功能
|   ├──自定义过滤器
|   ├──自定义按键修饰符 & 自定义指令
|   ├──Vue 实例的生命周期函数
|   ├──Vue 中的 Ajax 请求
|   ├──Vue 动画
|   ├──Vue 组件的定义和注册
|   ├──Vue 组件之间的传值
|   ├──Vue-router 路由
|   ├──Vue.js 在开发中的常见写法累积
|   ├──Vue 开发累积
|   └──Vue 组件
|──React 基础
|   ├──React 介绍
|   ├──JSX 语法介绍
|   ├──React 组件:生命周期
|   ├──React 组件:常见属性和函数
|   ├──React 中绑定 this 并给函数传参的方法
|   ├──React  单向数据绑定
|   ├──React 路由的使用
|   ├──Ant Design 的基本使用
|   ├──AntD 框架的踩坑记录
|   ├──AntD 框架 upload 组件自定义
|   └──React Native 初识
|──前端面试
|   ├──面试必看
|   ├──面试题累积
|   └──网友面经
|──前端进阶
|   ├──代码规范
|   ├──常见专有名词
|   ├──数组的常见操作
|   ├──前端监控技术
|   ├──lazyload & 防抖动和节流阀
|   ├──Vue 开发累积
|   └──前端的几道题目
|──前端综合
|   ├──2019 Web 前端入门自学路线
|   ├──前端学习分享
|   ├──Express
|   ├──2018 前端日记
|   ├──2019 前端日记
|   ├──2020 前端日记
|   ├──CSS 开发总结
|   ├──Ajax 相关
|   ├──HTML 相关
|   ├──Json 字符串的解析和遍历
|   ├──Json 相关
|   ├──前端博客推荐
|   ├──前端开发累积
|   ├──前端语录
|   └──网络抓包和代理工具:Whistle
└──扩展阅读
    ├──2020 Web 前端最新导航
    ├──GitHub 项目推荐
    ├──网站推荐
    ├──前端文章推荐
    ├──上海有哪些互联网大厂
    ├──北京有哪些互联网大厂
    └──深圳有哪些互联网大厂

GitHub 地址→https://github.com/qianguyihao/Web

1.2 寓教于乐:Pacman

HG #vol.029 Pacman 是基于 HTML5 的吃豆人游戏。核心代码就两个文件,主程序仅有 1000 行代码,且代码有注释、整洁。对于新手来说是个很好的实践项目,也能让你养成阅读他人代码的好习惯。

GitHub 地址→https://github.com/mumuy/pacman

1.3 新手关卡:33-js-concepts

HG #vol.031 33-js-concepts 是一个国外知名的 JS 项目,作为基础最后一道门槛,它帮你查漏补缺,让你对每个 Javascript 开发者应该知道的 33 个概念熟记在心,开启下一个阶段的进阶之旅。

GitHub 地址→https://github.com/leonardomso/33-js-concepts

成神第二式:招式变化

2.1 深度乃广度基础:Web-Series

HG #vol.028 Web-Series 是小鱼干很喜欢的一名前阿里工程师:王下邀月熊编写的 Web 全栈开发、工程架构与性能调优。在你熟悉前端基础概念,制作简单的例如吃豆人游戏之后,是时候在上一层楼了解下进阶的性能调优、工程架构问题。作为一名十多年开发经验的前端工程师,在 Web-Series 系列,王下邀月熊致力于探索,如何有效地提升团队的研发效能,在整个产品迭代的生命周期中都能及时、可靠地完成交付;同时能够控制住系统整体的复杂性,并且不断地、持续地进行系统的性能与体验优化。可以说升职加薪就差这招 [手动狗头]

GitHub 地址→https://github.com/wx-chevalier/Web-Series

2.2 简化操作流程:D3.js

HG #vol.031 D3.js 的全称是(Data-Driven Documents),该库提供了各种简单易用的函数,大大简化了 JavaScript 操作数据的难度。该库的使用是数据可视化必须掌握的技术。

最重要的一点在于,D3.js 项目本身提供了极度丰富的 demo 供你直接使用,化身做一个“调参工程师”绘制各种酷炫力导图,呈现各种可视化数据,例如:红楼梦的人物关系组图。等你在 demo 中习得基本使用之后,就可以根据自己的业务需求将任意数据绑定到 DOM 上,或直接操作 DOM完成 W3C DOM API 相关操作,能限制 D3.js 强大的只能是你的想象力。

GitHub 地址→https://github.com/d3/d3

2.3 包罗万象:x-build

HG #vol.040 x-build 是面向小型项目的脚手架工具,通过终端命令最快在几秒钟初始化项目目录。该库内部集成了 Webpack、Babel、ESLint 等前端常用的工具。通过该项目可以了解脚手架的开发,并且可以熟悉如何在工具中集成 Webpack 这对自定义脚手架开发很有帮助。

GitHub 地址→https://github.com/codexu/x-build

成神第三式:问鼎武林

3.1 同设计把酒言欢:next

HG #vol.054 前端工程师的对手之一便是设计师,像素级还原度挡住了多少前端工程师的晋升之路。Next 便是你的闯关宝剑,阿里开源的企业级中后台 UI 解决方案,致力于解决设计师与前端在工作协同、产品体验一致性、开发效率方面的问题。就是设计师修改颜色之类的元素之后,可以生成一个 NPM 主题包,前端拿到这个包就可以直接还原设计师的设计。Next 真妙 ‍♂️

GitHub 地址→https://github.com/alibaba-fusion/next

3.2 得 Chrome 者得天下:chrome-extensions-searchReplace

HG #vol.052 chrome-extensions-searchReplace 一款搜索并且替换文本的谷歌插件,也是一个极佳的插件开发实践。

GitHub 地址→https://github.com/Summer-andy/chrome-extensions-searchReplacet

最后

本文《GitHub 上适合新手的开源项目》收官篇,大家从这个系列有没有找到适合自己进阶的方向或感兴趣的项目呢?如果还有什么想看的系列可以留言告诉我们,也可以聊聊想对 HG 说的话!


中国北京和美国马萨诸塞州剑桥,2021年11月4日——博雅辑因将在第63届美国血液学会(ASH)年会上以海报形式报告其关于造血干细胞的两项研究:可以支持长期造血干细胞重建的新表面标志物微管聚合抑制对造血干细胞归巢和植入的促进功能。本次ASH年会将于2021年12月11日至14日在美国亚特兰大举行。


博雅辑因报告的第一项研究显示,CD66e是一个有效的功能性造血干细胞生物标志物,可用于支持长期造血干细胞高效鉴别和重建。另一项研究则证明了短期的微管聚合抑制能够促进造血干细胞的归巢和植入。这两项研究成果有望被应用于造血干细胞基因疗法的开发和造血干细胞移植的临床应用。


目前,博雅辑因针对输血依赖型β地中海贫血患者的基因编辑造血干细胞研究产品ET-01正在中国开展Ⅰ期临床研究。ET-01即CRISPR/Cas9基因修饰BCL11A红系增强子的自体CD34+造血干细胞注射液,通过对患者自体的造血干细胞进行基因修饰,并重新注入患者体内以治疗疾病。


“针对造血干细胞的研究成果将帮助我们进一步拓展基因编辑造血干细胞移植治疗的潜力,”博雅辑因首席执行官魏东博士表示,“基于对造血干细胞的深入研究和不断提升的基因编辑技术转化能力,我们期望能够让现有的变革型疗法平台再上一个新台阶,以帮助更多患有严重疾病的患者。”


“基因编辑作为一项平台技术,可以与包括造血干细胞移植在内的多种治疗方式结合,开发出创新疗法,”博雅辑因科学创始人魏文胜博士表示,“在细胞疗法中对细胞内的特定基因进行编辑,有望帮助患者摆脱长期乃至终身治疗,并带来治愈顽疾的希望。”


海报展示详细信息:


标题:CD66e富集增强人类长期造血干细胞的重建能力

海报编号: 2156

分会场:501. 造血干细胞、祖细胞和造血功能:基础研究与转化;二号海报

时间:美国东部时间:2021年12月12日下午6:00-8:00

北京时间:2021年12月13日上午7:00-9:00

地点:Georgia World Congress Center, Hall B5

摘要链接:https://ash.confex.com/ash/2021/webprogram/Paper148235.html


标题:微管聚合抑制促进人类造血干细胞的归巢和植入

海报编号:3820

分会场:701. 移植实验:基础研究与转化;三号海报

时间:美国东部时间:2021年12月13日下午 6:00-8:00

北京时间:2021年12月14日上午7:00-9:00

地点:Georgia World Congress Center, Hall B5

摘要链接:https://ash.confex.com/ash/2021/webprogram/Paper149294.html


关于博雅辑因



清华大学、北京大学公布了2019高校自主招生简章之后,两校又分别公布了《2019年领军人才选拔招生简章》(以下简称“领军计划”)、《2019年“博雅人才培养计划”招生简章》(以下简称“博雅计划”),开启了选拔进程。

“领军计划”、“博雅计划”是有别于两校自主招生的另一种特殊类型招生,考生可以同时报考,报考时专业志愿的填报相互独立,互不影响。如考生同时报考“领军计划”、“博雅计划”与自主招生均通过初审,测试不会冲突。但有以下两点需要考生注意:

招生对象上,自主招生主要选拔具有学科特长和创新潜质的学生,两校均要求报考学生在国际或全国权威性高、公信力强的学科竞赛和相关专业学习实践活动中获得优异成绩。“领军计划”、“博雅计划”主要招收志向远大、素质全面、品学兼优,综合成绩在全年级前列的学生

在教育部阳光高考平台特殊类型招生中,报考高校自主招生须在招生类型中选择“普通自主招生”进行报考,”报考“领军计划”、“博雅计划”须选择“综合评价”进行报考。有意愿报考的考生请厘清“领军计划”、“博雅计划”与自主招生的区别,认清定位,科学报考。“领军计划”、“博雅计划”招生简章要点如下:

清华大学

领军人才选拔计划

招收对象:

志向远大、追求卓越、品学兼优、素质全面,一贯优秀并具创新潜质的普通高中毕业生均可申请,综合学业成绩应在全年级前列。

招生专业:

报名方式:

2019年4月2日-4月15日,,登录“清华大学领军人才选拔报名系统” (http://gaokao.chsi.com.cn/zhpjbm/),进入“网上报名”,注册并登录后按要求准确完整地填写申请表,并打印、签字后扫描或拍照上传。

注意:

1.申请材料无需邮寄。

2.学生需在“招生类型”中选择“综合评价”,在“报考类型”中选择“领军人才选拔”。

3.学生可不受自身文理分科限制进行学科类型申请,每人最多允许填报3个专业类(方向)。

选拔程序:

2019年5月20日左右,公布初评结果并公示,学生可在报名系统内查询。

初评结果分为:优秀、良好、通过、不通过四档。其中“优秀”的学生可免于参加初试,直接进入复试;“良好”的学生可参加初试、复试;“通过”的学生可参加初试;“不通过”的学生不能进入之后的考核评价环节。

2019年6月10日左右,初试(具体测试时间以报名系统内公布为准)。初试采用笔试形式,考试科目为:数学与逻辑、理科综合(物化)或文科综合(文史)

2019年6月15日-18日,复试(具体测试时间以报名系统内公布为准)。复试内容包括但不限于综合面试、专业考察(根据学生的申请材料、志愿填报情况、初评及初试情况确定考察名单)、体质测试等,均在清华大学校内进行。

2019年6月22日,公布认定结果并公示,学生可在报名系统内查询。

优惠政策:

获得认定学生的高考成绩(含政策加分)应不低于本省同科类第一批次录取控制分数线(合并本科批次的省份,为相应的自主招生控制分数线),且在各省自主招生批次填报的专业志愿需与被认定的学科类型或专业类(方向)保持一致。

对于可以获得领军人才选拔认定优惠的学生,体质测试成绩优秀者,将给予额外的5分降分。

了解详情,请访问清华大学本科招生网:

http://www.join-tsinghua.edu.cn/publish/bzw/7545/2019/20190403084215457638189/20190403084215457638189_.html

北京大学

博雅人才培养计划

招生对象:

综合素质优秀,符合国家规定条件,参加2019年全国普通高等学校统一招生考试的高中毕业生。

(一)申请考生须具备以下条件:

1.志向远大明确、有强烈的社会责任感;

2.具有发展潜能、有强烈的好奇心;

3.学业成绩突出、基础学业成绩原则上应位居全年级前1%以内(文理科类分列)。

(二)申请报考医学类专业者除上述条件外还须具备以下条件:

1.理科考生;

2.对医学类专业有浓厚兴趣,致力于医学事业发展;

3.身心健康,身体条件符合《普通高等学校招生体检工作指导意见》和《关于进一步规范入学和就业体检项目维护乙肝表面抗原携带者入学和就业权利的通知》文件要求。

招生计划和招生专业:

注意:普通类专业和医学类专业不可兼报

报名方法:

2019年4月2日至4月15日24:00,请考生登录网上报名平台(http://gaokao.chsi.com.cn/zhpjbm/),登录后请选择“综合评价”进行报名。按网上要求注册、填写各项申请信息、上传相关证明材料扫描件,打印、盖章并扫描上传《北京大学2019年“博雅人才培养计划”申请表》。

网上报名注意事项:

本次报名无需邮寄申请材料,因此考生在上传申请材料(申请表格、获奖证书及相关证明材料)扫描件和中学、社会团体及专家个人在上传推荐材料扫描件时须确保电子文件清晰可读。

选拔程序:

2019年5月中旬,考生可查询初审结果。初步审核评价结果分为:A+、A、B、C四档。初审评价结果为“A+”的考生直接进入面试环节;初审评价结果为“A”和“B”的考生获得笔试、面试资格;初审评价结果为“C”的考生不再参加后续的选拔环节。

2019年6月11-14日(具体地点以网上报名系统内通知为准),获得测试资格的考生根据网上报名系统内的测试通知要求,参加我校组织的测试。

2019年6月22日左右,公布测试结果。入选资格考生,按教育部相关规定进行公示。

公示合格的入选资格考生,根据我校认定结果中的要求填报。

录取按我校认定结果进行录取。录取时间以当地省级招生考试机构安排为准。

优惠政策:

上海市、浙江省获得相关优惠条件的考生,具体政策以最终认定公示结果为准。

了解详情,请访问北大招生网:

https://www.gotopku.cn/index/detail/1098.html

新闻来源:清华大学本科招生网、北大招生网

文字整理:上海高招发布