整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
最近在 GitHub 上发现了一个 vanillawebprojects[1] 开源仓库，里面收集了 20 个 JavaScript+Html+CSS的练手项目，没有使用任何框架，可以让你从基础入门到深入学习。这些项目原本是 Udemy 上 20 Web Projects With Vanilla JavaScript 课程的一部分，但是如果你已经拥有了一些基础，不妨试着看一下源码，然后模仿实现吧
判断输入的表单字段是否合法
一个简单的电影座位预定演示项目
一个简单的网页视频播放器
计算不同货币的兑换汇率
练习如何操作 DOM 数组
练习如何弹出登录注册窗口，以及滑动弹出菜单
练习如何判断隐藏字符是否正确
简单的点餐查询应用
简单的购物车结算应用
简单的网页音乐播放器
网页无限向下滚动实现
简单的打字输入游戏
文本阅读器
测试记忆的记忆卡片
网页歌词搜索器
模拟呼吸的节奏
简单的网页破冰游戏
网页新年倒计时
网页财富榜单
说出数字，猜测数字
今天我们给大家分享了，20 个 JavaScript+Html+CSS 练手小项目，大家觉得哪个最简单，哪个最复杂呢？赶紧去 Github 仓库拉取项目，码上行动吧
欢迎关注公众号：KnowHub 知识加油站！
[1]
vanillawebprojects: https://github.com/bradtraversy/vanillawebprojects
文原创并首发于公众号【Python猫】，未经授权，请勿转载。
原文地址：https://mp.weixin.qq.com/s/ObDK4Mt8adL4-De354rMuQ
今天，猫哥要推荐一本非常著名的开源书籍：《500 Lines or Less》。
在开始正题之前，先介绍一下它所属的系列。该系列叫 AOSA，是“The Architecture of Open Source Applications”的简称，即“开源程序的体系结构”，目前有四本书，本期主角是最近的一本（发布于 2016.7.12）。
这个系列最初的目的是：研究那些优秀的开源项目，从中吸取精华的实践经验。
在前三本书中，研究对象已多达 50 几个，其中不乏名头响亮者，例如 Eclipse、Selenium、Git、matplotlib、nginx、Puppet、Pypy、SQLAlchemy 与 Twisted 等等。
每个章节的作者都是开源软件的核心参与者，介绍了项目是如何设计的、为什么这样设计、主要的组成部分是什么、各模块间如何互动、开发中的优秀成果有哪些……
这些书拆解了开源界的明星项目，通过阅读，你能了解到开源作者们的思考方式，了解到各类困难问题的解决方案，学习使用现成的轮子。所谓见多识广，学习吸取经验，有望“站在巨人的肩膀上”。
但是，这几本书主要偏向于架构和工程方面，项目代码量基本是几千上万行，对于初级程序员来说不够实用，想要吃透，挑战性太大。
针对这个问题，该系列新出了一本《500 Lines or Less》，专注于 500 行或更少代码的小型项目。
关注编写代码时所作出的设计决定与权衡 ：
简而言之，这本书聚焦于一些相对较小但又很具代表性的课题，并通过 500 行以内的代码来实现它。
书中写了 22 个项目，下面逐一简介：
1、Blockcode: A visual programming toolkit（可视化编程工具包）
使用语言：HTML、CSS、JavaScript
该项目基于开源的 Waterbear 工具，提供可视化的操作界面，通过简单而直观的交互方式，实现图形编程。
2、A Continuous Integration System（持续集成系统）
使用语言：Python 2
CI 是软件开发中重要的持续集成系统，保障新功能的稳定实现。这个项目介绍了 CI 系统的工作原理，并尝试构建自己的 CI 系统，实现监听器、测样例调度器和测试运行器。
3、Clustering by Consensus（分布式系统）
使用语言：Python
探索如何实现一个网络协议，用于可靠的分布式计算。为了解决共识性问题，使用了 Paxos 算法的衍生 Multi-Paxos。学习这个项目，能接触很多分布式的知识。
4、Contingent: A Fully Dynamic Build System（动态构建系统）
使用语言：Python
构建系统（build system）用于将源代码生成用户可用的目标（如库、可执行文件、脚本等），常见的有 GNU Make、CMake、Apache Ant 等。Python 中的 PyInstaller 也是构建系统的一种。本项目实现了一个构建系统，且试图对“动态交叉引用”问题提出一个解决方案。
5、A Web Crawler With asyncio Coroutines（使用协程实现的爬虫）
使用语言：Python
作者之一是 Python 之父（Guido van Rossum），使用标准库 asyncio 实现异步的网页爬虫。（学习爬虫者必看）
6、Dagoba: an in-memory graph database（内存中的图形数据库）
使用语言：JavaScript
图形数据库是 NoSQL 数据库的一种，使用图形理论来存储实体间的关系。这个项目介绍了图形数据库要解决的几个问题，然后将它实现。
7、DBDB: Dog Bed Database（狗床数据库）
使用语言：Python
用 Python 实现一个简单的键值对存储数据库(key/value database)，其特点是在电脑崩溃或程序出错时，也能保证数据的安全。学习这个项目，可以掌握关于数据库的一些核心特性，例如原子性(atomicity)、一致性(consistency)、独立性(isolation)和持久性(durability)。
8、An Event-Driven Web Framework（事件驱动的Web框架）
使用语言：Common Lisp
构建一个以事件驱动的 Web 框架，使用 HTTP 做通信协议。
9、A Flow Shop Scheduler（流水车间调度器）
使用语言：Python 2
流水车间调度问题是查找最优解问题的一种，本项目基于局部搜索（local search）方法，实现流水车间调度器。
10、An Archaeology-Inspired Database（受考古学启发的数据库）
使用语言：Clojure
主流的数据库是面向空间编程 （place-oriented programming），即在更新数据的时候，新数据会占据老数据的空间。本项目开了个脑洞，用考古学家的视角设计数据库，记录数据的所有变化轨迹，更新数据时并不删除老数据。最终实现代码仅 360 行，作者称这个数据库为CircleDB 。
11、Making Your Own Image Filters（图片滤镜）
使用语言：Java
Processing 是一种用 Java 构建的开发环境，本项目介绍了它的特性与配置，并最终实现自己的滤镜 APP。功能比较简单，但实现过程涉及很多图像处理的内容。
12、A Python Interpreter Written in Python（Python解释器）
使用语言：Python
它的结构跟 CPython 解释器差不多，作者命其名为 Byterun。 文中详细讲解了解释器的工作原理，跟着学习，将极有帮助。
13、A 3D Modeller（3D建模）
使用语言：Python
3D 图形化编程，使用到了 OpenGL 来渲染图形。
14、A Simple Object Model（对象模型）
使用语言：Python
当今最主流的编程范式依然是面向对象编程，而它的核心则是对象模型。编写一些简单的对象模型可以更好地理解现有语言的内部工作原理，并且深入地了解面向对象语言的设计理念。
15、Optical Character Recognition (OCR，光学字符识别)
使用语言：Python、JavaScript、HTML
基于人工神经网络（ANNs）实现的简单 OCR 系统，并设计了一个 Web 客户端。
16、A Pedometer in the Real World（现实计步器）
使用语言：Ruby
计步器的设计依据是什么，如何在现实世界中把它实现呢？该文回答了这个问题，它还设计了一个友好的 Web 界面。
17、The Same-Origin Policy（同源策略）
使用语言：Alloy
同源策略（SOP）是当今浏览器中安全机制的重要组成部分，用于控制浏览器中脚本间的通信。文中使用 Alloy（一种用于建模与分析软件设计的语言）来构建一个可执行的 SOP 模型。
18、A Rejection Sampler（采样器）
使用语言：Python
“采样”是指从一些概率分布中生成随机数，文中介绍了如何从非标准的概率分布里进行采样，以及如何计算样本在分布里对应的概率。
19、Web Spreadsheet（Web 电子表格）
使用语言：HTML、CSS、JS
电子表格是办公软件的必备，我们最熟知的是微软的 Excel。文中用 AngularJS 框架来实现一个简单的 Web 电子表格，所用代码仅 99 行。效果可在这查看：https://audreyt.github.io/500lines/spreadsheet
20、Static Analysis（静态分析）
使用语言：Julia
“静态分析”指的是在不运行代码的情况下检查代码（类型、格式、编码规范等等），这项工作通常是由各种 IDE 编辑器来完成。本项目使用 Julia，实现了一些基本的静态分析功能。
21、A Template Engine（模板引擎）
使用语言：Python
“模板引擎”是 Web 开发中很重要的东西，支持将用户界面与实际业务数据分离，通过它可生成标准的 HTML 文档。文中所用的模板引擎语法基于 Django，总代码量仅 262 行。
22、A Simple Web Server（Web服务器）
使用语言：Python、HTML
实现了一个简单的 Web 服务器，主要使用了标准库中的 BaseHTTPServer 。另外，它还介绍了 CGI（通用网关接口） 协议，给服务器实现了运行外部程序的功能。
所有项目介绍完毕。可以看出，22 个项目中有 13 个使用了 Python，占60%，难怪网上有些不明真相的同学直呼它是“一本Python神书”。
有些项目初看的话，你难以想象只需不到 500 行代码就能实现，但是经过必要的问题裁剪，并使用恰当的现成轮子（开源库、工具、框架等），就能取得简单的成果。
与之相对的，不要以为 500 行以内的项目就很简单。每个项目的作者都大有来头（连 Python 之父都亲自上阵啦），文章中写到的技术背景、实现原理以及设计思路，全都值得仔细研读（很多还不一定能读懂）。
这本书是开源的，在官网上可以免费阅读。它还配套了 Github 仓库，存放了完整的项目代码，目前已经获得 20000 多颗星星啦。
Github 上有对它的中文翻译计划，但是翻译者寥寥，只有 10 几篇翻译了出来，翻译质量还不敢恭维。
不管如何，这么优质而诚意十足的开源书籍，非常值得推荐！作为咱们 Python 猫荐书系列的第八期，也非常合适。
最后附上该书在开篇中的寄语：
We hope that the experiences of the authors in this book will help you grow out of your comfort zone in your own programming practice.
我们希望本书作者的经验能够帮助您在自己的编程实践中成长。
相关链接：
书籍官网：http://aosabook.org/en/index.html
Github英：https://github.com/aosabook/500lines
Github中：https://github.com/HT524/500LineorLess_CN
编程这件事，光有理论是不够的，动手实践是必修课。
不过，从什么项目入手，往往让人犯了难。
如果你还在纠结，应该拿什么项目来开始自己的编程练习，不妨来看看这份“程序员都应该尝试的挑战性项目”清单。
这是田纳西大学助理教授奥斯汀·亨利（Austin Z. Henley）结合自身经验，给出的良心推荐。不仅总结了知识要点，让你在学习中有的放矢，还贴心整理了拓展阅读资料。
你可以多次构建这些项目，每次从中收获新的知识。
每当我不知道该拿什么练手，或者想学习一种新的编程语言或框架时，我就会从以下项目中选择一种开始coding：
不使用GUI框架中内置的文本框组件，要如何搭建支持光标移动、选择、插入和删除操作的文本框？
这个项目中，存在两个主要挑战：
不要小看这些基础的功能，其中有许多细节值得注意。比如当光标位于文本当中，按下向上箭头，光标会移动到何处？
如果你觉得这太简单，还有进阶测试：
最后总结一下知识要点：
别忘了还有拓展阅读哟：
即使是最简单的游戏也需要考虑数据结构和设计模式。
在这个项目中，你的任务是从头到尾实现一个定义明确的游戏。最好使用SDL，SFML，PyGame这样的2D图形库。
第一步，创建对象移动的效果。
第二步，了解有关游戏循环的所有信息。游戏实际上是在绘图、获取用户输入和处理游戏逻辑之间循环。
第三步，处理用户输入。
第四步，学习如何创建和管理所有游戏对象及其状态。比如如何生成动态数量的敌人。
第五步，学习如何应用游戏的逻辑。子弹头位置何时更新？什么时候会有更多敌人出现在屏幕上？怎么判定敌人被干掉了？游戏何时结束？
甚至，在进阶阶段，你还可以考虑引入AI，来制造更加“智能”的敌人。
从头开始编写一种非常小的类似于BASIC的语言编译器，然后将其编译为任何其他语言。比如，用Python编写可以输出C#代码的Tiny BASIC编译器。
知识点：
从这个项目开始，难度就加大了。
操作系统依赖于硬件，因此入门门槛比较高。但这个项目可以帮助你更好地理解计算机底层都发生了什么。
作者亨利推荐了一本免费电子书《使用Rust构建RISC-V操作系统》作为入门教材（地址见文末）。
知识点：
如果以上四个项目，你都觉得so easy，那么就来尝试一下最后这两个高难度项目吧。
电子表格应用程序（如Excel）将文本编辑器和编译器的挑战结合在了一起。
在这个项目中，你需要学会如何在内存中表示单元格内容，并实现用于方程式的编程语言解释器。
这是一个操作系统+编译器的二合一挑战项目。
挑战内容是，编写一个虚拟机，让虚拟机可以像真实的CPU和其他硬件组件一样运行。
亨利的建议，是从简单的虚拟控制台入手，比如CHIP-8。
博客一出，在Hacker News、Reddit上受到了广大码农们的欢迎。
有网友说：
这些项目能让我接触到完全不同的领域和问题，比我日常的工作更能激励我。
并且，网友们纷纷建言献策，又推举出好几个优质上手项目：
所以，这些项目是否激发了你的灵感？
Talk is cheap. Show me the code. 快动手练起来吧~
博客地址：
http://web.eecs.utk.edu/~azh/blog/challengingprojects.html
Hacker News讨论（内含更多项目推荐）：
https://news.ycombinator.com/item?id=21790779
《使用Rust构建RISC-V操作系统》：
http://osblog.stephenmarz.com/index.html
— 完 —
量子位 QbitAI · 头条号签约
关注我们，第一时间获知前沿科技动态
*请认真填写需求信息，我们会在24小时内与您取得联系。
