curran / example-viewer Goto Github PK
View Code? Open in Web Editor NEWA presentation tool and programming sandbox for code examples.
License: MIT License
A presentation tool and programming sandbox for code examples.
License: MIT License
It would be sweet to automatically generate thumbnails for each example, and use those in the README template index.
Once index.html gets to be more than 500 lines, I think it's time to adopt a build step and modularize.
Since the index.html is copied into client projects as the complete frontend, the build step should bundle all the modules and inline the bundle into index.html.
Tentatively thinking Rollup and Handlebars for this.
This would allow this code to go away:
// Transform into the format that magicSandbox expects.
// TODO make this the overall format? Seems better, more explicit.
const files = {};
Object.keys(loadedFiles).forEach(function (name){
files[name] = {
content : loadedFiles[name]
};
});
It would also allow more fields on individual files, like "loaded", "fetching".
The header should be fixed, so it stays visible while scrolling through longer examples.
One needed feature is an index of all examples. Perhaps the best solution would be to inject the index into the README of the project that uses example-viewer.
Similar to https://github.com/curran/screencasts/tree/gh-pages/introToD3#list-of-examples
Rather than quickly scrolling through the examples for a given module in the beginning of a video, it would be better to show a static screen with the images for all the examples. This would be easy to do once we have thumbnails and preview images #19
When changing to the previous or next example, the change that comes through in a video recording is pretty subtle, so the viewer needs to read the example number to tell whether the motion was forward or backwards.
It would be nice to add an indicator or animation to indicate which direction the change was.
Ideally, this could be an animated transition where the whole page "swipes" to the left or right, getting replaced with the new example. This might be tricky to implement.
Another option is to use the Notifier
infrastructure to display arrows. It turns out there are Unicode characters for arrows.
→
←
For when you hit the last or first example in the module:
⇥
⇤
in index.html
When hitting tab, currently a tab character gets added.
There should be a CodeMirror setting somewhere to change the behavior to add 2 spaces instead.
It feels icky, especially given that in all cases so far, it's only iterating over a single datum and we always know that in advance.
Rather than
body.datum(state)
.call(componentA)
.call(componentB);
, what if we use this pattern instead:
body
.call(componentA, state)
.call(componentB, state);
Ideally we could avoid d3.select(this)
, which feels like it should not be necessary.
When fetching the current example, it would be nice to prefetch the next example in the background so we don't need to wait for it to load on navigation.
It turns out CTRL + Arrow conflicts with a Mac key binding.
Perhaps add SHIFT + Arrow as an alternative for Mac folks.
save
backend to support multiple filesGitHub Pages does not expose dotfiles, so we need to work around this.
Test case: https://curran.github.io/d3-in-motion/#2/1/4
It's often the case that I want to delete an example, and shift all the subsequent examples "to the left".
There should be a new operation for deleting an example, maybe triggered by CTRL + D.
When the operation happens:
example-05
-> example-04
)Currently if an example is not found, the app fails silently and doesn't show anything.
Ideally the error should be reported to the user. Perhaps one good way is to use the existing Notifier infrastructure.
There'a a fear of switching to the next example to check what it is, because doing so may destroy the current scroll position, causing the scroll to jump around in the edited video.
Ideally, the scroll position would be preserved when navigating between examples. This can be accomplished by adding a large spacer to the bottom of the page.
Currently it's possible to go out-of-bounds for examples (e.g. -1, or beyond the last example).
Going beyond the last example is a feature in a sense, as it can be used to create new examples. It may be better, though, to have new example creation be an explicit operation.
Ultimately what would be best is to wrap around from one unit to the next.
If we guard against going beyond the edge of a list of examples, we should add the operation of creating a new example, which is a copy of the current example, and save it.
Maybe this could be CTRL+N
Problem: "example-10" comes before "example-9" in alphanumeric sorting.
Solution: Use two digits - "example-09" comes before "example-10".
This should apply to the directory names for units, modules, and examples.
d3.format("02")
Should do the trick.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.