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

相关文章

来自专栏Web项目聚集地

前端面试题(HTML和CSS)

我会推出前端面试题的专栏,每一期我会推出10个经典面试题,面试题一部分由小伙伴提供,一部分从面试真题中选出,最后会来一个大汇总。主要目的是帮助那些还没有前端开...

562
来自专栏理论坞

如何入行用户体验设计

1、Windows:https://developer.microsoft.com/en-us/windows/desktop/design

571
来自专栏腾讯大讲堂的专栏

H5游戏开发指南

在上月底,一则有关HTML5游戏的的消息震惊业界,蝴蝶互动宣布旗下的《传奇世界》月流水破1500万,成为业内首款千万级别爆款游戏,这无疑给H5游戏行业注入了一针...

40310
来自专栏IT派

【前端必看】2017 年 JavaScript 全面崛起大运势

最受欢迎项目 ? 下面是年度最流行的项目,不区分类别。 Vue.js蝉联冠军 Vue.js 再次强势登顶年度排行榜冠军,今年在 GitHub 上新增了超过 40...

3075
来自专栏李嘉的专栏

分享一些有意思的极客设计和技术:荟萃001

极客是美国俚语“geek”的音译。随着互联网文化的兴起,这个词含有智力超群和努力的语意,又被用于形容对计算机和网络技术有狂热兴趣并投入大量时间钻研的人。本文给大...

800
来自专栏Android 开发者

为长屏幕设备做好准备

1293
来自专栏Youngxj

YoungxjTools全新上线

1234
来自专栏非著名程序员

推荐一个我梦寐以求的开源库

注意:今天我分享的这个开源库,真的是非常的好,是我近半年以来非常需要的一个开源库。这个开源库是关于微信小程序的。

964
来自专栏儿童编程

Scratch做高逼格的互动艺术作品(一)

最近在郎师兄推荐下初步了解了一下processing互动编程艺术,真是美轮美奂,直接跪了。今天我用Scratch也做了一个互动的小作品,自我感觉挺好(大神勿喷~...

1774
来自专栏phodal

祭奠那些年,我弃坑的开源轮子

谨以此篇纪念我那些已经弃坑的轮子。 作为一个有理想、有追求的程序员,我造过许许多多的轮子。不幸的是,大部分轮子都死在沙滩上了,只有用 markdown 写的项目...

1959

扫码关注云+社区