Medium网友开发了一款应用程序 让学习算法和数据结构变得更有趣

Medium网友Peter Weinberg开发了一款名叫CS-Playground-React的应用程序,可以使大家更有意思、也更加轻松地学习算法和数据结构。

CS-Playground-React接口

  • CS-Playground-React地址:http://cs-playground-react.surge.sh/

Peter Weinberg的自述:我是一名自学成才的程序员。我觉得自己做得不够好,并且在掌握复杂的计算机科学概念方面处于劣势。

我对数学不是十分擅长。我总是把强大的数学技巧和天生擅长编程的能力联系在了一起。我觉得我必须比其他人(他们有天生的数学能力)更努力地学习相同的概念。这个想法深深扎根在我的大脑中,我很确定我永远无法学习像“二叉搜索树”这样的东西,以及如何在精神上分析像“归并排序”这样的递归噩梦。

所以我想和大家分享一下我的努力是怎样的,以及我所付出的努力的结果。

进入CS-Playground-React,它是一个浏览器内的JavaScript沙盒(sandbox),用于学习和练习算法和数据结构。这款无需注册的应用程序可以自动保存你的进度,当你困住的时候为你提供解决方案,还会提供一些有用的文章、教程和其他资源的链接,让你的学习过程变得更加轻松!

我承认,这款应用并不是什么开创性的东西。市面上有大量的应用程序,它们教授类似的技能,让你能够在浏览器中编写和运行代码。

为什么我做了这个 我开发这款应用的动机很简单:我想让学习变得更简单、更有趣。更重要的是,我为什么要学习这些特殊技能。在过去的18个月左右,我可以自信地说我已经学会了如何编码。尽管我仍然不愿自称为程序员。通过学习CS的基本原理,我希望不仅能对自己作为一名程序员更有信心,而且还能帮助其他人。自学成才的程序员是科技行业近年来更容易接受的一种人才。特别是在像硅谷这样的地方,在每个街角都有编程训练营。然而,对于希望进入这个行业而没有接受正规计算机科学教育的大多数程序员来说,仍然有很多障碍需要克服。

对我来说,学习某些东西的最好方法(尤其是枯燥的东西),就是把它和你喜欢的东西联系起来。所以当我在开发这款应用的时候,我也在为它开发内容。现在,学习算法和数据结构是我的最新项目的一个必要部分。每隔几天,我就在学习一种新的算法或数据结构。一旦我把它写下来,我就会编译学习资源并把它添加到应用程序中。现在,我可以在一个我自己构建的超级简单的工作空间中反复练习。这不是很酷吗! ?

我发现了一个非常棒的网站,它能让我们看到如何对算法和数据结构进行排序。这是快速排序在100个项目数组中执行的操作。你可以在下面的地址中找到完整的可视化列表。

  • 地址:https://www.cs.usfca.edu/~galles/visualization/Algorithms.html

技术堆栈和黑客 如果你感兴趣的话,我用React & React-Redux(尽管第一个版本是vanilla JS,CSS和HTML)构建了这个应用程序。它还使用了CodeMirror和React-Codemirror2来将一个编辑器嵌入到浏览器中(注意:原始版本的React-CodeMirror已经不再被维护,而且在新版本的反应中也没有很好地发挥作用)。

  • React & React-Redux第一个版本:https://github.com/no-stack-dub-sack/algos-and-data-structures
  • CodeMirror:https://codemirror.net/
  • React-Codemirror2:https://github.com/scniro/react-codemirror2

模拟控制台 每次用户在它们的代码中调用console.log时,一次小的hack就可以触发一次redux操作。通过这种方式,我可以捕获已登录的消息,然后在浏览器中模拟一个控制台以显示代码的输出。你可以在任何需要清除模拟控制台消息的时候运行clearConsole()。

import { store }from './index';

export const hijackConsole= ()=> {
  const OG_LOG= console.log;
    console.log= function(...args) {
    // map over argumentsand convert
    // objectsin to readable strings
    const messages= [...args].map(msg=> {
      return typeof msg !== 'string'
        ? JSON.stringify(msg)
        : msg;
    }).join(' ');
    store.dispatch({
      type: CONSOLE_LOG,
      messages
    });
    // retain original functionality
    OG_LOG.apply(console, [...args]);
  };
};

重新定义console.log捕捉和存储已记录的代码

持久化代码

我想让这个应用程序超级容易使用。因此,我选择了一种更简单的方法来保存进度,而不是实现数据库并请求用户登录。Redux在每个会话期间管理应用程序的状态,我使用localStorage来在会话中持久化代码。该应用程序将在下一次访问时检索这个保存的状态,并将Redux存储与它解除冻结。这样你就可以在你离开的地方找到你的位置。

如果出于某种原因你想要删除所有的进程,你可以在编辑器中的任何时候运行runresetState()。如果你不想将代码提交给本地存储,那么在操作之前,不要保存注释。这将防止保存任何代码,而不仅仅是为该文件保存。

import { store }from './fileWhereStoreLives';

// add this codein your app's entry pointfile to
// set localStorage when navigating awayfrom app
window.onbeforeunload= function(e) {
  const state= store.getState();
  localStorage.setItem(
    'local-storage-key',
    JSON.stringify(state.stateYouWantToPersist)
  );
};
import { importedState }from './fileWhereStateLives';

// define your reducer's initial state:
const initialState= {
  ...importedState;
};

// define default statefor each subsequent visit.
// if localStorage with this key exists, assign it
// to this variable, otherwise, use initialState.
const defaultState= JSON.parse(
  localStorage.getItem('local-storage-key')
) || initialState;

// set defaultState of reducer to result of above operation
const reducer= (state= defaultState, action)=> {
  switch (action.type) {
    case'DO_SOMETHING_COOL':
      return {
        ...state,
        ...action.newState
      };
    default:
      return state;
  }
}

export default reducer;

另一方面,事实证明有一个叫做Redux-Persist的安装包可以为你做这个。但是对于一个简单的用例来说,你是否可以用几行代码做一些事情,或者安装一个NPM包来做同样的事情? 就我来说,我每次都选择前者。你很有可能节省了数百行代码和一组全新的依赖关系。它总是相互迁就,你必须决定什么时候高度优化(但更重的)解决方案比简单的解决方案要好。

原文发布于微信公众号 - ATYUN订阅号(atyun_com)

原文发表时间:2017-11-28

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员互动联盟

【专业技术】PHP对战Node.js

整个故事正如好莱坞大片的经典剧情走向:两位昔日好友如今分道扬镳,甚至被迫陷入了你死我活的斗争当中。刚开始的分歧并不严重,无非是一位老友对于另一位伙伴长久以来占据...

2935
来自专栏花叔的专栏

你们真看懂519发布的小程序新能力么?

微信又发文了:“小程序开放转发按钮等新能力”。 一群人在转发官方发文,也一群人在拷贝内容到公众号上写文章,花叔也针对它YY一下。 519发布的这些新功能足以让程...

3207
来自专栏杨建荣的学习笔记

改和看别人的代码是一种什么感受

工作里面可能会沉淀下来很多的东西,比如文档,代码/脚本,或者图片,甚至你留下的趣事或者“案底”。 对于修改代码,我很多年前就体验过一次,是修改自己写的代码,记...

3508
来自专栏玉树芝兰

微信公众号Markdown Here排版的缺失环节

早上看了一下微信公众号后台。我上一篇微信公众号什么时间发的?看完我自己都吓了一跳——4月15日!

531
来自专栏北京马哥教育

如何阅读技术文档

“大神你好,请问我打算学习Django,应该怎么做?” 答:“去看文档” “Django的文档都是英文,我看不下去,怎么办” 答:“bla bla bla…...

2688
来自专栏SEO

「SEO插件」Google发布Lighthouse 3.0版

1685
来自专栏君赏技术博客

听了2017年 Swift 开发者大会一些感想

特别感谢@Flow.ci提供门票支持。 2017Swift 开发者大会在深圳举办了两天,第一天是外国嘉宾。因为需要上班,加上全天都是英文,去了也是听不懂,星期...

642
来自专栏玉树芝兰

幻灯视频素材怎么剪

把抽象概念形象化。例如化学课上,讲述不同元素发生反应会怎么样,单单语言描述或者静态配图无法把过程完整形象描摹出来,这时候一段化学反应的录像会立即让学生把握全貌。

702
来自专栏程序人生

产品解析:Github Atom

昨天github通知我可以开始试用atom了。惊喜之余,立刻开始体验。 Atom是什么 Atom是github内部的编辑软件,据说已经使用了6年之久。按照ato...

3288
来自专栏京东技术

单元测试高效之路——持续集成

互联网软件的开发和发布,已经形成了一套标准流程,最重要的组成部分就是持续集成(Continuous integration,简称CI)。

590

扫描关注云+社区