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 条评论
登录 后参与评论

相关文章

来自专栏工科狗和生物喵

微信小程序开发——跑步App+音乐播放

开篇语 好不容易,终于把所有的基础课程全部看完了!昨天,我很高兴地开始了看别人做的项目进行深度的学习。其实也说不上是项目吧,更多的像是一种给新手看的示例代码。然...

751120
来自专栏日常学python

同学利用Python爬虫制作王者荣耀出装助手,引来了隔壁班的女生!

暑假回家,”小皇帝”般的生活持续了几天,头几天还挺舒服,闲久了顿时觉得好没意思。眼看着10天的假期就要结束,曾信誓旦旦地说要回家学习,可拿回家的两本书至今一页未...

17520
来自专栏天天P图攻城狮

iOS 开发实践:iOS照片API的那些坑

在和图片打交道的那些日子里,遇到过不少图片相关的诡异问题。 在这里不会具体对照片API做介绍,而只会对其中的一些坑做一些总结。

58940
来自专栏数据小魔方

rmarkdown+flexdashboard制作dashboard原型

R语言作为一门统计计算和数据可视化为核心特色的工具性语言,其在可视化领域或者说数据呈现方面有着非常成熟和系统的解决方案。

19430
来自专栏用户2442861的专栏

前端开发介绍(包含调试什么的)

http://www.cnblogs.com/jikey/p/4259360.html

38820
来自专栏程序员互动联盟

【专业技术】chromium GPU 硬件加速合成

前言: 在传统浏览器网页渲染实现方案中,网页完全依赖CPU的能力去渲染网页(软件渲染简介:网页生成一张bitmap丢给CPU去绘制),然而一台机器的CPU不仅...

29860
来自专栏空帆船w

我的公众号文章是如何排版的?

文字排版是一篇文章展现给读者的第一印象,不知道大家怎么看,反正我每次看到排版错乱的文章,往下读的兴趣直接减少了一半。

40220
来自专栏HT

从IE6到IE11上运行WebGL 3D遇到的各种坑

这篇《基于HTML5的电信网管3D机房监控应用》基于WebGL技术的应用让少同学对HTML5 3D的应用产生了兴趣和信心,但有不少网友私信询问WebGL如何运行...

26150
来自专栏企鹅号快讯

前端框架最新的选择——根据MVVM的San

工欲善其事,必先利其器。 在 MVVM 早已被引入 Web 前端应用开发的今天,其实我们已经有了一些选择,有了一些应用开发的利器。它们的代表就是 Vuejs,R...

316100
来自专栏携程技术中心

干货 | Qreact,去哪儿网的迷你react方案

作者简介 钟钦成,网名司徒正美,著名的JavaScript专家,去哪儿网前端架构师。在GITHUB拥有复数个著名的轮子,著有《javascript框架设计》一书...

41680

扫码关注云+社区

领取腾讯云代金券