UI for developpers

• traceglMPL/tracegl: TraceGL MPL release and Issues · codegl/tracegl

• TEXTREME by Ash K, Maxim Loboda - Code editor with graphical Fx, 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

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

• Computer programming | Khan Academy

• The Chrome Javascript editor can do hot swapping

• About Bret Victor's inventing on principle talk and LIVEditor

• Bret Victor on Vimeo

• Bret Victor, beast of burden - Learnable Programming

What append for previous registered listeners, timeout|timeintervals, created objects, states, etc.

LOD

Global overview of code

Sublime

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

• Customizing GitHub Gists: Filters - Palette hue, brihtness, contrast, saturation

• Your syntax highlighter is wrong – James Fisher – Medium

• The Typography of Code | the hamstu

• Frame-Based Editing

Sticky blocks / smart folding (context, label, compound):

• nsTextFrame.cpp - mozsearch

Use font size, style and weight to make differences and differents glyphs for better reading

• Programming Fonts - Test Drive

• JetBrains Mono: A free and open source typeface for developers | JetBrains: Developer Tools for Professionals and Teams

• 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.

• tonsky/FiraCode: Monospaced font with programming ligatures

• Typography of Code at Adobe Max - YouTube

• i-tu/Hasklig: Hasklig - a code font with monospaced ligatures

• Open source typeface “Hack” brings design to source code | Ars Technica

Visual programming

XmlGridEditor

Scratch Project Editor

ResponsiveFacade1

Conduit Fcp 060927

Conduitflashpb Screenshot 01

ComponentVB2

dataflow / diagrammatic programming

node-based VPL

• Prototyping with Facebook Origami on Vimeo

• http://sourcebinder.org/

• http://en.wikipedia.org/wiki/Quartz_Composer

• Visual programming language — Wikipedia

• Visual Programming Languages - Snapshots

• cables

• vvvv - a multipurpose toolkit | vvvv

• Cycling '74

• NoFlo | Flow-Based Programming for JavaScript

• Houdini - 3D modeling, animation, VFX, look development, lighting and rendering | SideFX

• kousun12/eternal: 👾~ music, 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.

• On TermKit — Acko.net

• 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

• TermKit + HTTP - YouTube

Hotwire Shell (python):

• Google Code Archive - Long-term storage for Google Code Project Hosting.

• desirable-objects/hotwire-shell: Ressurecting hotwire shell!

• Hotwire Shell — Ubuntu Apps Directory

• Hotwire, hybrid text/graphical shell - YouTube

• hotwire 0.721 : Python Package Index

Other:

• Repl.it - CLUI: Building a Graphical Command Line

• ｡ﾟ･\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

• command line - How do I make my terminal display graphical pictures? - Ask Ubuntu

Shell autocompletion:

• Programmable bash completions

• 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>

• junegunn/fzf: A command-line fuzzy finder

• Aloxaf/fzf-tab: Replace zsh's default completion selection menu with fzf!

Notebook

Aka document code

• Jupyter Notebook (IPython Notebook) .ipynb

• Literate CoffeeScript .litcoffee .coffee.md

two-column Docco

• Notebook interface - Wikipedia

• Starboard - gzuidhof/starboard-notebook: In-browser literal notebooks

• CoffeeScript

• Literate programming - Wikipedia

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

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. It's more complicated for imperative code (or procedural code), 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

Breadcrumbs

• Breadcrumb navigation — Wikipedia

• Code Navigation in Visual Studio Code

• Breadcrumbs | IntelliJ IDEA

Sticky context

Or sticky scope

See also 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

• wellle/context.vim: Vim plugin that shows the context of the currently visible buffer contents

• minibuffer - Display the beginning of a scope when it is out of screen - Emacs Stack Exchange

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