想成为顶级开发者吗?亲自动手实现经典案例

译者按: Github上资源很多,关键在于如何有效挖掘!

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。

只有努力去实践,你才可能成为一个厉害的开发者!我举一个形象的例子:你不可能因为仅仅读了几本如何健身的书就变得身材棒棒哒,你真正需要的是去健身房挥洒汗水。编程也有同样的奥妙在里面。

这里我列出8个很棒的项目可以用来锻炼你的编程“肌肉”!目标是使用任何你熟悉的技术把每一个应用实现出来。当然,写代码少不了会写bug,Debug就用Fundebug

1. 克隆Trello

这里是Indrek Lasn的一个Demo: Cloned Trello。 克隆一个Trello,你可以学到:

  • 路由技术(Routing)
  • 拖放技术(Drag and drop)
  • 创建新的对象(面板、列表、卡片)
  • 处理输入并且验证数据
  • 客户端:如何使用local storage,将数据存到local storage,从local storage读取数据
  • 服务端:如何使用数据库,将数据存到数据库,从数据库读取数据

这里是一个用React和Redux实现的代码示例: simple-trell

2. 管理面板

示例来自: laravel-5.4-crud-example on Github

这是一个简单的CRUD应用,对于掌握基础很有用。你会学到:

  • 创建用户、管理用户
  • 和数据库交互:创建、读取、编辑、删除用户
  • 输入验证和表单处理

3. 虚拟货币追踪(原生移动应用)

示例来自: react-native-redux-crypto-tracker on Github

这是一个原生应用,由Swift、Object-C、React Native、Java、Kotlin开发。

你会学到:

  • 原生应用如何工作
  • 从API获取数据
  • 原生应用如何布局
  • 如何使用手机模拟器

4. 从0开始个性化配置自己的webpack配置

恩,从技术上说这不是一个应用,但是对于理解webpack底层如何工作十分有用。对于你来说,webpack不再是一个黑盒子(blackbox),而是一个非常强力的工具。

需求:

  • 把es7编译到es5。(基础)
  • 把jsx编译到js或则.vue到.js。(你会学到loaders)
  • 配置webpack开发服务器(dev server),以及模块热加载(hot reloading)。(vue-cli和create-react-app使用了这些技术)
  • 使用webpack构建一个生产版本并部署到Heroku、now.sh或则Github pages。(你会学到如何部署webpack项目)
  • 配置你最喜欢的css预处理器将scss、less、stylus编译到css。
  • 学会配合webpack使用image和svg。

这里有很多对于初学者的资源:How to setup Webpack +2.0 from scratch in 2017

5. 克隆Hackernews

每个人都喜欢去实现自己版本的hacker news - 我们也来吧^_^!

你会学到:

  • 和hackernews API交互
  • 创建单页面应用
  • 实现一些功能:查看评论、单个评论、个人资料
  • 路由

这里是Hacker News的API文档:Hacker News API

6. Todo App

示例来自:todomvc官网

真的吗?一个todo应用?已经有多少个了!是的,我知道。不过,听我说,它如此流行是有原因的。

todo应用是一个掌握基础知识很好的方式。可以尝试用基本的vanilla JavaScript来编写整个应用,然后再使用你最喜欢的框架或则库再来写一遍。

你会学到:

  • 创建新任务
  • 输入验证
  • 过滤任务(完成、正在做、所有)。请使用filter和reduce函数
  • 学习JavaScript的基础

7. 一个可以排序的拖放列表

示例来自:atlassian/react-beautiful-dnd

对于理解拖放api很有用。如果你会使用这些api,那么比必然与众不同。 你会学到:

  • 拖放api
  • 创建富UI

8. 克隆聊天应用(原生应用)

如果你同时会原生和网页应用开发,那么你将超然于众人! 你将会学到:

  • Websockets(实时通讯)
  • 原生应用如何工作
  • 原生应用如何布局
  • 原生应用如何路由

这些资源可以让你忙一到两个月了。来吧,开始动手吧!

以上提供的一些练习项目希望能够助你锻炼开发的能力,就像Fundebug能够助你Debug一样!

原文链接:https://medium.freecodecamp.org/the-secret-to-being-a-top-developer-is-building-things-d3d058e4e472

原文作者:Indrek Lasn

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Data Analysis & Viz

手把手教你完成一个数据科学小项目(7):经纬度获取与BDP可视化

请先阅读“中国年轻人正带领国家走向危机”,这锅背是不背? 一文,以对“手把手教你完成一个数据科学小项目”系列有个全局性的了解。

1372
来自专栏后端之路

土鳖的jsp改造

背景 前端世界变化太快,各种模板各种新的技术框架出现。 虽然如此,我们java后端也有模板三宝 jsp freemarker velocity 当然还有一些gr...

28110
来自专栏极客编程

8个写完以后就可以让你成为顶尖开发者的有趣应用程序

只有不断的努力才能成为伟大的开发人员。想象一下 ——你不能通过阅读大量关于健身,成为一个身体健康的人。你实际上需要去健身房,把时间和汗水放进去!同样的概念也适...

2471
来自专栏Java3y

图书管理系统【总结】

感想 该项目是目前为止,我写过代码量最多的项目了.....虽然清楚是没有含金量的【跟着视频来写的】,但感觉自己也在进步中...... 写的过程中,出了不少的问题...

3785
来自专栏大数据和云计算技术

大数据和云计算技术周报(第50期):NoSQL特辑

本期有 Redis、分布式、HBase、impala与hive、protobuf、Phoenix。 希望大家会喜欢!欢迎喜欢的同学打赏、转发支持社区!

893
来自专栏Seebug漏洞平台

精选 Flexport 在 HackerOne 这一年 6 个有趣的安全漏洞

一年前,我们推出了在 HackerOne 上的赏金计划,以提高 Flexport 的安全性。 HackerOne 让我们为业余爱好者和专业渗透测试人员提供赏金来...

3698
来自专栏FreeBuf

“同形异义字”钓鱼攻击,钉钉中招

技术交流:allen.lan#hotmail.com(# > @) 同形异义字钓鱼攻击号称“几乎无法检测”,是最狡猾的钓鱼攻击!这种攻击产生的原因是国际化域名...

2647
来自专栏FreeBuf

工具解析 | 杀毒引擎惨遭打脸,黑帽大会爆惊天免杀工具

今年的黑帽大会上,可谓是精彩不断。与往届大会对比看来,当属2017这届最有看头。各种推陈出新的技术暂且不论,光是爆出的新免杀工具AVET就足以惊艳全场。 该工具...

2232
来自专栏FreeBuf

“优雅”的Linux漏洞:用罕见方式绕过ASLR和DEP保护机制

最近国外研究人员公布的一段exp代码能够在打完补丁的Fedora等Linux系统上进行drive-by攻击,从而安装键盘记录器、后门和其他恶意软件。 这次的ex...

2457
来自专栏施炯的IoT开发专栏

Application Architecture Guide 2.0 - CH 19 - Mobile Applications(4)

本文翻译"Porting"、"Power"、"Synchronization"、"User Interface"和"Performance Considerat...

1905

扫码关注云+社区