# 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)
* http://sourcebinder.org/
* http://en.wikipedia.org/wiki/Quartz\_Composer
* [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-reference)
* [hchbaw/auto-fu.zsh: #zsh automatic complete-word and list-choices. Originally incr-0.2.zsh by y.fujii \<y-fujii at mimosa-pudica.net>](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/)
