一个全栈增长工程师的练手项目集

English version is Ongoing, welcome to join us.

你是不是在为提高编程技术而发愁？

你是不是在为找不到合适的练手项目而烦恼？

你是不是在为有合适的项目，但是没有指南而烦恼？

我的其他电子书：

• 《一步步搭建物联网系统》
• 《GitHub 漫游指南》
• 《RePractise》
• 《Growth: 全栈增长工程师指南》
• 《Growth: 全栈增长工程师实战》

欢迎关注我的微信公众号（扫描下面的二维码或搜索 Phodal）.

目录

• 分析网站日志，打造访问地图
  • 概况
    • 背景
    • ShowCase
    • Hadoop + Pig + Jython + AmMap + ElasticSearch
  • 步骤
    • Step 1: 搭建基础设施
    • Step 2: 解析access.log
    • Step 3: 转换IP为GEO信息
    • Step 4: 展示数据到地图上
    • 练习建议
• 书籍录入移动应用：条形码扫描
  • 概况
    • 背景
    • ShowCase
    • Ionic + Zxing
  • 步骤
    • Step 1: ZXing扫描与Douban API
    • Step 2: 存储数据库
    • 练习建议
• 制作专属Badge
  • 概况
    • 背景
    • ShowCase
    • SVG与SVGWrite
  • 步骤
    • Step 1: 基本图形
    • Step 2: 高级Badge
• 微信文章编辑器
  • 概况
    • 背景
    • ShowCase
    • CKEditor + Ractive
  • 步骤
    • Step 1: hello,world
    • Step 2: Require.js模块化
    • Step 3: 初始化
    • Step 4: 创建对应的View
    • 练习建议
• JavaScript制作Slide框架
  • 概况
    • 背景
    • Showcase
    • 需求
  • 步骤
    • Step 1: 基本的Slide功能
    • Step 2: 解析Markdown
    • Step 3: 事件处理
    • Step 4: 解析字幕
    • Step 5: 进度条
    • Step 6: 同步
    • 练习建议
• 编辑-发布-分离的博客系统
  • 概况
    • 背景: 编辑-发布-开发分离
    • 用户场景
  • 步骤
    • Step 1: 构建工具
    • Step 2: 静态页面生成
• Solr实现多边形地理搜索
  • 概况
    • 背景
    • Showcase
    • Solr
  • 步骤
    • Step 1: Solr Flask
    • Step 2: Google map Polygon
• 一份代码打造跨平台应用
  • 概况
    • 背景
    • ShowCase
    • Ionic & Electron & Cordova
  • 步骤
    • Step 1: 从Web到混合应用，再到桌面应用
    • Step 2: 响应式设计
    • Step 3: 平台特定代码
    • 未来
• Ionic与ElasticSearch打造O2O应用
  • 概况
    • 背景
    • Showcase
    • 构架设计
  • 步骤
    • Step 1: Django GIS 设置
    • Step 2: 配置Haystack
    • Step 3: Django Haystack Model创建
    • Step 4: 创建search_index
    • Step 4: Ionic ElasticSearch 创建页面
    • Step 5: Ionic ElasticSearch Service
    • Step 6: Ionic OpenLayer 地图显示
• 一步步搭建JavaScript框架
  • 概况
    • 背景
  • 步骤
    • Step 1: 注册npm和bower包
    • Step 2: 生成Javascript项目框架
    • Step 3: 寻找所需要的函数
    • Step 4: 整合
    • Step 5: 测试
    • 练习建议
• 制作简易Mac OS上的伪锁屏工具
  • 概况
    • 背景
  • 步骤
    • Step 1：屏幕截图
    • Step 2：调节亮度
    • Step 3：全屏图片
• 基于Virtual DOM的测试代码生成
  • 概况
    • 背景
    • ShowCase
    • 基本原理
  • 步骤
    • Step 1: Virtual-dom与HyperScript
    • Step 2: 标记DOM变化
• 基于Backbone的单页面移动应用
  • 概况
    • 背景
    • Showcase
    • jQuery + Backbone + UnderScore + Require.JS
  • 步骤
    • Step 1: 使用Require.js管理依赖
    • Step 2: 添加路由
    • Step 3: 创建主页View
    • Step 4: jQuery Sidr
    • Step 5: Django Tastypie示例
    • Step 6: RequireJS Plugins
    • Step 6: 简单的博客
    • Step 7: 重构
    • Step 8: 移动CMS滑动
• Oculus + Node.js + Three.js 打造VR世界
  • 概况
    • 背景
    • Showcase
    • 框架： Oculus Rift & Node NMD
  • 步骤
    • Step 1: Node Oculus Services
    • Step 2: Node.js Oculus Hello，World
    • Step 3: Node Oculus WebSocket
    • Step 4: Oculus Effect + DK2 Control
    • Step 5: Three.js KeyHandler
    • 练习建议
• 手动制作照片地图
  • 概况
    • Background:把照片放在地图上
    • Showcase
    • 框架： EXIF & ExifRead & CartoDB
  • 步骤
    • Step 1: 解析读取照片信息
    • Step 2: 上传数据
    • 练习建议
• D3.js打造技能树
  • 概况
    • 背景
    • Showcase
    • Graphviz
  • 步骤
    • Step 1: 打造简单的技能树
    • Step 3: D3.js Tooltipster
• 技术雷达趋势
  • 概况
    • 背景
    • Showcase
    • D3.js
  • 步骤
    • Step 1: Schema与原始代码
    • Step 2: 处理数据
• 文本转Logo
  • 概况
    • 背景
    • ShowCase
    • 需求说明
  • 步骤
    • Step 1: Python 文字转Logo实战
• GeoJSON与ElasticSearch实现高级图形搜索
  • 概况
    • Showcase
    • jQuery + Mustache + Leaflet
  • 步骤
    • Step 1: 离线地图与搜索
    • Step 2: 从地点到地图上显示
    • Step 3: 从地图到地点上显示

License

© 2016 Phodal Huang. This code is distributed under the Creative Commons Attribution-Noncommercial-No Derivative Works 3.0 License. See LICENSE in this directory.