整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
最近在 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小時內與您取得聯系。
