> For the complete documentation index, see [llms.txt](https://mmems.gitbook.io/calepin/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mmems.gitbook.io/calepin/development/human-interface/ui-for-developpers.md). # UI for developpers * [traceglMPL/tracegl: TraceGL MPL release](https://github.com/traceglMPL/tracegl) and [Issues · codegl/tracegl](https://github.com/codegl/tracegl/issues) * [TEXTREME by Ash K, Maxim Loboda](https://le-von.itch.io/textreme) - Code editor with graphical Fx, [memetrooper/TEXTREME](https://github.com/memetrooper/TEXTREME) [Ludipe on Twitter: "I love when I come up with a game concept and I find out it already exists and it looks more awesome than it did in my head. TEXTREME is the text editor you didn't know you needed. https://t.co/FFn3I1K7oz https://t.co/8f12oxq79c" / Twitter](https://twitter.com/ludipe/status/1055434835743948800?lang=en) ![TEXTREME FX](https://github.com/mems/calepin/blob/main/Development/Human%20Interface/TEXTREME%20FX.mp4) ### Live coding Without reload all code and replay all interactions and data inputs * [COLT.IO: Development tool for angular.js, node-webkit, node.js, phonegap](http://codeorchestra.com/#/) * [Computer programming | Khan Academy](https://www.khanacademy.org/computing/computer-programming) * [The Chrome Javascript editor can do hot swapping](http://smotko.si/using-chrome-as-a-javascript-editor/) * [About Bret Victor's inventing on principle talk and LIVEditor](http://liveditor.com/bret-victor-inventing-on-principle-inspirations.html) * [Bret Victor on Vimeo](https://vimeo.com/worrydream) * [Bret Victor, beast of burden - Learnable Programming](http://worrydream.com/LearnableProgramming) What append for previous registered listeners, timeout|timeintervals, created objects, states, etc. ### LOD Global overview of code ![Sublime](https://github.com/mems/calepin/blob/main/Development/Human%20Interface/sublime.png) ### Typography of code Aka Code color sheme, coding font, typeface for developers Color and fonts Comment shouldn't use grey, but more visible color like red, because it's important. * [dempfi/ayu: 🎨🖌 Modern Sublime Text 3 and 2 theme](https://github.com/dempfi/ayu) * [Customizing GitHub Gists: Filters](http://codepen.io/lonekorean/pen/dvXPqm) - Palette hue, brihtness, contrast, saturation * [Your syntax highlighter is wrong – James Fisher – Medium](https://medium.com/@MrJamesFisher/your-syntax-highlighter-is-wrong-6f83add748c9) * [The Typography of Code | the hamstu](http://web.archive.org/web/20131001172035/http://blog.hamstu.com/2008/02/03/the-typography-of-code/) * [Frame-Based Editing](https://www.greenfoot.org/frames/) Sticky blocks / smart folding (context, label, compound): * [nsTextFrame.cpp - mozsearch](https://searchfox.org/mozilla-central/source/layout/generic/nsTextFrame.cpp#1327) Use font size, style and weight to make differences and differents glyphs for better reading * [Programming Fonts - Test Drive](https://web.archive.org/web/20221113030422/https://www.programmingfonts.org/) * [JetBrains Mono: A free and open source typeface for developers | JetBrains: Developer Tools for Professionals and Teams](https://web.archive.org/web/20221111185733/https://www.jetbrains.com/lp/mono/) * [microsoft/cascadia-code: This is a fun, new monospaced font that includes programming ligatures and is designed to enhance the modern look and feel of the Windows Terminal.](https://github.com/microsoft/cascadia-code) * [tonsky/FiraCode: Monospaced font with programming ligatures](https://github.com/tonsky/FiraCode) * [Typography of Code at Adobe Max - YouTube](https://www.youtube.com/watch?v=r2JePjrDggE) * [i-tu/Hasklig: Hasklig - a code font with monospaced ligatures](https://github.com/i-tu/Hasklig/) * [Open source typeface “Hack” brings design to source code | Ars Technica](https://arstechnica.com/information-technology/2015/08/open-source-typeface-hack-brings-design-to-source-code/) ### Visual programming ![XmlGridEditor](https://github.com/mems/calepin/blob/main/Development/Human%20Interface/Visual%20programming/xmlGridEditor.gif) ![Scratch Project Editor](https://github.com/mems/calepin/blob/main/Development/Human%20Interface/Visual%20programming/Scratch%20Project%20Editor.png) ![ResponsiveFacade1](https://github.com/mems/calepin/blob/main/Development/Human%20Interface/Visual%20programming/responsiveFacade1.jpg) ![Conduit Fcp 060927](https://github.com/mems/calepin/blob/main/Development/Human%20Interface/Visual%20programming/conduit_fcp_060927.jpg) ![Conduitflashpb Screenshot 01](https://github.com/mems/calepin/blob/main/Development/Human%20Interface/Visual%20programming/conduitflashpb-screenshot-01.jpg) ![ComponentVB2](https://github.com/mems/calepin/blob/main/Development/Human%20Interface/Visual%20programming/ComponentVB2.jpg) dataflow / diagrammatic programming node-based VPL * [Prototyping with Facebook Origami on Vimeo](https://vimeo.com/85578380) * * * [Visual programming language — Wikipedia](https://en.wikipedia.org/wiki/Visual_programming_language) * [Visual Programming Languages - Snapshots](http://blog.interfacevision.com/design/design-visual-progarmming-languages-snapshots/) * [cables](https://cables.gl/) * [vvvv - a multipurpose toolkit | vvvv](https://vvvv.org/) * [Cycling '74](https://cycling74.com/) * [NoFlo | Flow-Based Programming for JavaScript](https://noflojs.org/) * [Houdini - 3D modeling, animation, VFX, look development, lighting and rendering | SideFX](https://www.sidefx.com/) * [kousun12/eternal: 👾\~ music, eternal \~ 👾](https://github.com/kousun12/eternal) ### Rich shell Aka CLUI (command line user interface), beagle (wrong keyword) TermKit (node + webkit): * [unconed/TermKit: Experimental Terminal platform built on WebKit + node.js. Currently only for Mac and Windows, though the prototype works 90% in any WebKit browser.](https://github.com/unconed/TermKit/) * [On TermKit — Acko.net](http://acko.net/blog/on-termkit/) * [18 months ago, TermKit, a next-generation terminal, was revealed to the world. It got 977 upvotes here and over 3,500 stars on GitHub. Yet the last activity was over a year ago. Is the project dead? Why? : programming](https://www.reddit.com/r/programming/comments/137kd9/18_months_ago_termkit_a_nextgeneration_terminal/c71iiec/) * [TermKit + HTTP - YouTube](https://www.youtube.com/watch?v=dAeZTgRuWsU) Hotwire Shell (python): * [Google Code Archive - Long-term storage for Google Code Project Hosting.](https://code.google.com/archive/p/hotwire-shell/) * [desirable-objects/hotwire-shell: Ressurecting hotwire shell!](https://github.com/desirable-objects/hotwire-shell) * [Hotwire Shell — Ubuntu Apps Directory](https://apps.ubuntu.com/cat/applications/lucid/hotwire/) * [Hotwire, hybrid text/graphical shell - YouTube](https://www.youtube.com/watch?v=xpsZcC5Gb7o) * [hotwire 0.721 : Python Package Index](https://pypi.python.org/pypi/hotwire/0.721) Other: * [Repl.it - CLUI: Building a Graphical Command Line](https://blog.repl.it/clui) * [｡ﾟ･\m\\(＞Д＜＃)/m/･ﾟ｡🏳️‍🌈 on Twitter: "Cool functionality in Apple A/UX 3.0.1 (a Unix OS from 1991): opening a Unix command/script from the Finder opens an interactive dialog (like 'adduser' in this case). It writes out a terminal command based on the input you give. This is perfect if you're new to Unix. https://t.co/WTBoEj7MoE" / Twitter](https://twitter.com/dada78641/status/1228438627807571974?s=12) * [command line - How do I make my terminal display graphical pictures? - Ask Ubuntu](https://askubuntu.com/questions/97542/how-do-i-make-my-terminal-display-graphical-pictures) Shell autocompletion: * [Programmable bash completions](broken://pages/-M5m69UxWCfYm78ta618#programmable-bash-completions) * [hchbaw/auto-fu.zsh: #zsh automatic complete-word and list-choices. Originally incr-0.2.zsh by y.fujii \](https://github.com/hchbaw/auto-fu.zsh) * [junegunn/fzf: A command-line fuzzy finder](https://github.com/junegunn/fzf) * [Aloxaf/fzf-tab: Replace zsh's default completion selection menu with fzf!](https://github.com/Aloxaf/fzf-tab) ### Notebook Aka document code * Jupyter Notebook (IPython Notebook) .ipynb * Literate CoffeeScript .litcoffee .coffee.md two-column [Docco](http://ashkenas.com/docco/) * [Notebook interface - Wikipedia](https://en.wikipedia.org/wiki/Notebook_interface) * [Starboard](https://starboard.gg/) - [gzuidhof/starboard-notebook: In-browser literal notebooks](https://github.com/gzuidhof/starboard-notebook) * [CoffeeScript](http://coffeescript.org/#literate) * [Literate programming - Wikipedia](https://en.wikipedia.org/wiki/Literate_programming) ### Outline Also called Document map. Outline important elements like : * pages * sections and sub-sections * titles and sub-titles * Objects : packages, classes, methods, properties, etc. ### Minimap Graphical dezomed view of document like navigator panel in Photoshop ### Code hightlighting Aka syntax hightlighting * [Syntax highlighting is a waste of an information channel • Buttondown](https://buttondown.email/hillelwayne/archive/syntax-highlighting-is-a-waste-of-an-information/) ### Code flow Save all calls, contexts (like closures), parameters, time, duration ### Code reload * live reloading: reload completely, loose the app state * hot reloading: reload partial parts, but keep current app state Works easily for [declarative code](https://en.wikipedia.org/wiki/Declarative_programming). It's more complicated for [imperative code](https://en.wikipedia.org/wiki/Imperative_programming) (or [procedural code](https://en.wikipedia.org/wiki/Procedural_programming)), where the code controle the app state with control flow > Declarative programming contrasts with imperative and procedural programming. Declarative programming is a non-imperative style of programming in which programs describe their desired results without explicitly listing commands or steps that must be performed * [javascript - What is the difference between Hot Reloading and Live Reloading in React Native? - Stack Overflow](https://stackoverflow.com/questions/41428954/what-is-the-difference-between-hot-reloading-and-live-reloading-in-react-native/41429055#41429055) ### Breadcrumbs * [Breadcrumb navigation — Wikipedia](https://en.wikipedia.org/wiki/Breadcrumb_navigation) * [Code Navigation in Visual Studio Code](https://code.visualstudio.com/docs/editor/editingevolved#_breadcrumbs) * [Breadcrumbs | IntelliJ IDEA](https://www.jetbrains.com/help/idea/settings-editor-breadcrumbs.html) ### Sticky context Or sticky scope See also [breadcrumbs](#breadcrumbs) * [Luna 💙 on Twitter: "I have been wanting this sort of thing for years, and while I don’t use Xcode, I hope other editor vendors will follow suit" / Twitter](https://twitter.com/lunasorcery/status/1533899690479058950?s=12\&t=SkNGL_Dv1RwrUZnkPz6JBQ) * [wellle/context.vim: Vim plugin that shows the context of the currently visible buffer contents](https://github.com/wellle/context.vim) * [minibuffer - Display the beginning of a scope when it is out of screen - Emacs Stack Exchange](https://emacs.stackexchange.com/questions/3145/display-the-beginning-of-a-scope-when-it-is-out-of-screen/3148#3148) ### Code vision > contextual information and navigation displayed at the top of classes, interfaces, and members * [Code Vision in Rider: Enriching the Editor with Contextual Information and Navigation | The .NET Tools Blog](https://blog.jetbrains.com/dotnet/2018/12/10/code-vision-rider-enriching-editor-contextual-information-navigation/)