SnapCoderr Pedegogy

This page details SnapCoderr EDITORS

Best Content for LEARNER on the internet#

Layout notes on 1/9/2022#

• 3 column lauout ; we finalized on this one
• this is second best free-dev
• codejar ; Embdeable code editor ; see if we can use this in Read only mode with VERTICAL strip next to it.
• when user clicks on Vertial strip link, it copies only part of Code relavant for that section (not whole Code page)

Editors notes on 12/31/2021#

• PenEditor : site ; github
• can Live run: HTML/CSS/js and React.js ; we tested it works ....
• Icrate editor : site ; github repo is basic no website CODE
• we can use Icreate Editor Layout , with PenEditor Codebase ...

Editors notes on 12/16/2021:#

• exercism site is going circles, seems actual CODE for local deployment is OpenSource ( started by a British lady)
• cs-playground-react site: we got CONSOLE pane moved to top , it works. code checked-in. But so much Redux and other code, All we need is just how to display conspole.log() in a Pane.
• so instead of taking all that burden of cs-playground-react CODE, we may use JSChallnenger site format. It is very fast and tailwind CSS
• for our site, main is Search page, editor part is small .
• programirz jS site HTML is saved as GIST here

Editors#

• all JS problem sets : Challenges . This is our ideal 'Serach ' screen , add 'code exuction boxes'.
• Best beginner Lessonsshrew.app. see the exeuction code, we may do some thing like this.
• This has source code for Eval(). . Do Butify js of the code to see CLEAN code
• OurJSEditor : good source code . Creating users, adding comments works. only Editor rendering errors. Compare to main website and try to fix Editor render errors.
• jseditor . pay attention to this also ..
• React live : this works with JS code also
• some editor tricks to learn
• MU editor in action . Debug 4 buttons appear only when DEBUG runs else HIDING. Show what is absolute required in that CONETEXT.
• some UI inspiratoin
• liveweave.com . Based on this blog date 2014 (goto page 3). This guy Amit Sen developed good Technlogy, but no Business development. He would have offered HTML/CSS/JS lessons to make it success.

Code Editor - old notes#

• SR: let us not waste time with react-Ace anymore, do with Codemirror6 for it real-time colloboration capabilities.
• SR: build similar to codeshare.io; documentation of colloborative editing of codemirror is here
• codemirror 6 seems modern rewrite ; GOLD sponsors are Mozzila, Repl.it, Prisma, that speaks volumes
• also this codeshare.io used the same codemirror ; creator codeshare is Tejesh mehetha
• Reference : 7 tools and services for real-time collaborative coding
• Code Editor suppliments
• codemirror-react2 : working site cs-playground ; github repo
• code typing with Tween : can be used as Visual part while playing Lesson Audio ; github repo ; see gsap": "^3.6.0"
• Codemirror-react2 with Next.js
• markmore editor : full code , codemirror. This is CLOSE to PROGRAMIZ python editor
• with JS hint errors : bare min code, we may use JSHint part of THIS into MARKMORE editor
• Split pane : Code mirror with Split pane
• css flitht: 3 panes split