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

项目首页：https://github.com/phodal/ideabook

目录

分析网站日志，打造访问地图

Step 1: 搭建基础设施

Step 2: 解析access.log

Step 3: 转换IP为GEO信息

Step 4: 展示数据到地图上

练习建议

背景

ShowCase

Hadoop + Pig + Jython + AmMap + ElasticSearch

概况

步骤

书籍录入程序

Step 1: ZXing扫描与Douban API

Step 2: 存储数据库

练习建议

背景

ShowCase

Ionic + Zxing

概况

步骤

制作专属Badge制作

Step 1: 基本图形

Step 2: 高级Badge

背景

ShowCase

SVG与SVGWrite

概况

步骤

Web文本编辑器

Step 1: hello,world

Step 2: Require.js模块化

Step 3: 初始化

Step 4: 创建对应的View

练习建议

背景

ShowCase

CKEditor + Ractive

概况

步骤

JavaScript打造Slide应用

Step 1: 基本的Slide功能

Step 2: 解析Markdown

Step 3: 事件处理

Step 4: 解析字幕

Step 5: 进度条

Step 6: 同步

练习建议

背景

Showcase

需求

概况

步骤

编辑-发布-分离应用

Step 1: 构建工具

Step 2: 静态页面生成

背景: 编辑-发布-开发分离

用户场景

概况

步骤

Google Map与Solr实现多边形搜索

Step 1: Solr Flask

Step 2: Google map Polygon

背景

Showcase

Solr

概况

步骤

一份代码打造跨平台应用

Step 1: 从Web到混合应用，再到桌面应用

Step 2: 响应式设计

Step 3: 平台特定代码

未来

背景

ShowCase

Ionic & Electron & Cordova

概况

步骤

Ionic ElasticSearch打造O2O应用

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 地图显示

背景

Showcase

构架设计

概况

步骤

一步步搭建JavaScript框架: Lettuce

Step 1: 注册npm和bower包

Step 2: 生成Javascript项目框架

Step 3: 寻找所需要的函数

Step 4: 整合

Step 5: 测试

练习建议

背景

概况

步骤

基于Virtual DOM的测试代码生成

Step 1: Virtual-dom与HyperScript

Step 2: 标记DOM变化

背景

ShowCase

基本原理

概况

步骤

单页面移动应用

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滑动

背景

Showcase

jQuery + Backbone + UnderScore + Require.JS

概况

步骤

Oculus + Node.js + Three.js 打造VR世界

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

练习建议

背景

Showcase

框架： Oculus Rift & Node NMD

概况

步骤

制作照片地图

Step 1: 解析读取照片信息

Step 2: 上传数据

练习建议

Background:把照片放在地图上

Showcase

框架： EXIF & ExifRead & CartoDB

概况

步骤

D3.js 制作技能树

Step 1: 打造简单的技能树

Step 3: D3.js Tooltipster

背景

Showcase

Graphviz

概况

步骤

技术雷达趋势

Step 1: Schema与原始代码

Step 2: 处理数据

背景

Showcase

D3.js

概况

步骤

文本转化为Logo

Step 1: Python 文字转Logo实战

背景

ShowCase

需求说明

概况

步骤

GEOJSON与ElasticSearch实现高级图形搜索

Step 1: 离线地图与搜索

Step 2: 从地点到地图上显示

Step 3: 从地图到地点上显示

背景

Showcase

jQuery + Mustache + Leaflet

概况

步骤