dlang-tour / core Goto Github PK
View Code? Open in Web Editor NEWD Language online tour (https://tour.dlang.org/) and online editor (https://run.dlang.io/)
License: Boost Software License 1.0
D Language online tour (https://tour.dlang.org/) and online editor (https://run.dlang.io/)
License: Boost Software License 1.0
In an effort to make it similar to dlang.org ...
http://dlang-tour.steinsoft.net/tour/gems/3 runs locally but returns empty result setup when run throught the Docker container.
Could be quite useful for e.g. the basic types as
type | size | default value |
---|---|---|
int | 32bit | 0 |
Idea from the GoLang tour:
They just use prefill the issue via URL parameters - probably the only thing needed would to make the page url in their dynamic ;-)
The links to the next and previous section (or chapter) are calculated on each request. This could be cached easily with memoize or something similar from the standard library.
As per Mark Isaacson in the D mailing list:
An easy(?) suggestion that would make this easier to browse:
make the left/right arrow keys control advancing to the next
page.
As we don't allow networking or file writes, pretty much anything could be cached. We might of course search for exception (e.g. time if we can't fix this like on the GoTour, see below). The reason for this is obvious, most of the time the user directly click on run without changing the file, so spawning a new docker container and compiling the file just takes unnecessary time.
Btw citing from the GoTour.
In the playground the time begins at 2009-11-10 23:00:00 UTC (determining the significance of this date is an exercise for the reader). This makes it easier to cache programs by giving them deterministic output.
just an idea: automatic code formatting could be quite a help for newbies. For D the tool is called dfmt.
Everything should be positioned absolute so that scrolling just scrolls the content and leaves the rest of the layout as it (if it makes sense).
The user should be able to resize the source code editor and content DIV to adjust to personal preference.
Possible implementation for AngularJS: https://github.com/Reklino/angular-resizable
The program output looks awkward. Its size should be adapted and should fit the rest of the layout.
Use overflow: scroll
property accordingly to support scrolling on long outputs.
Instead of directly returning cache contents, add small 500ms-2s delay. This keeps user from suspecting weird stuff.
When the user changed the source code in the editor the content will be lost as soon as another section is navigated to. The source code editor content should be saved somehow and restored to allow changing source and navigating through the content at the same time.
The Go Tour implements this by having a full stack Angular JS application that keeps the data on the client side. But this means more logic on client side and not on server/vibe.d side.
Instead of using AngularJS to show or hide the source code editor this should be done statically with D syntax of DIET templates. Currently there the source editor might quickly flash when loading the page and this could be prevented by just not rendering the source code editor when not needed.
I think it would be nice if a method is mentioned that we provide links for the reader to deeper dive into the docs - they support anchors ;-)
I think just linking inline should be okay.
If possible a "Resources" list at the bottom (or "Dive deeper") would be cool too for a couple of pages.
According to https://developers.google.com/speed/pagespeed/insights/ there is much potential for optimizing the Tour for mobile.
Items to address according to PageSpeed Insights:
I already created an A entry to 46.101.210.109, so feel to change your server config.
The following configuration block should be configurable through environment variables in the Docker container:
# For docker driver
config:
memory_limit: 256
maximum_queue_size: 10
time_limit: 10
maximum_output_size: 4096
This is needed to adapt to different production servers.
Bootstrap, Angular and maybe other libs used support using CDNs. So more bandwidth is saved on the servers running the tour because basic libraries are loaded from e.g. Google CDN. And loading the tour should be faster because the client either has those libs cached already and is able to open more concurrent connections.
As per Bubbasaur's suggestions, don't make the bottom bar fixed as it is a waste of space. The behaviour just has been copied from the Go tour.
Caching of program output doesn't work with "final" Docker container that is deployed on dlang-tour.steinsoft.net.
The new logo with the planets and the arc looks a lot better!
Your dlang tour already looks great, there are a couple of small issues, but you definitely should get this public soon! This is great!
again this is just an idea.
The idea is that both the left text and the right text box have a fixed height, so that the reader can always see the navigation menu at the bottom.
Moreover decoupling the two views allows to scroll in the code box without the text moving with your scrolling.
We could map the common navigation key (key {up,down}, page {up, down}) to currently focussed box and by default to left text box.
In the node world Nodeschool is pretty popular:
http://nodeschool.io/#workshopper-list
You can see its online version here: http://generalhenry.com/
Their idea is pretty simple - download this guide and verification tool. Run it afterwards on your output to validate whether you did the right thing. Maybe the dlang-tour could do something similar to all those
algorithm contest websites (e.g. hackerrank supports D) and check the user output.
As phobos does it all comments should have the /**
and */
syntax for comments.
Add something like a "Fork me on GitHub" or report issues on GitHub button somewhere on the webpage (without being too intrusive) so that users can report issues and send pull requests directly to the right place.
Content should be expanded if source code is empty. Add a playground button which hides/shows the D playground editor.
The content and the internal content representation have been designed to allow translations but this should be also reflected in the frontend and made available to users.
According to Mark Isaacson's comment:
My one complaint is that the section of the screen that contains the code doesn't scale well vertically when my browser window is large. The written explanations scale to fit the content, the code editor does not. I'd just make it stretch vertically to fill the screen :). At that point you might also consider putting the Run/Reset buttons at the top.
As we all are used to read content from the left to right, it makes sense to have the explanation and description on the left as the GoLang Tour does.
Compile errors should be shown graphically by e.g. putting the erroneous line in red.
Collect visits per section, number of compiles (incl. failures) and create overview page to show usage stats of the tour.
probably makes sense to move it over to dlang, s.t. other people can help to maintain this and it's gets visibility and an official status.
Ping @CyberShadow
compared with:
I actually separated the menu
from the other JS on dlang.org, so it should be easy to use.
See e.g.
https://github.com/dlang/dub-registry/blob/master/views/layout.dt
https://github.com/dlang/dub-registry/blob/master/public/scripts/menu.js
and https://github.com/dlang/dub-registry/tree/master/public/styles
The DLang spec is pretty awesome, e.g. https://dlang.org/spec/module.html
and whenever possible the section should link the reader to it.
this is just an idea, but I feel more structured in this way.
Optionally we make the entire menu collapse/ toggle-able.
It seems to be a general trend to use ssl and nowadays Google puts that into their ranking too. Thanks to the letsencrypt project we can have ssl for free :)
Hey I accidentally came by a couple of such tours or schools, lately and I thought I post this list here as a starting point for inspiration and further ideas. Have fun browsing.
http://rustbyexample.com/
http://twitter.github.io/scala_school/
https://tour.golang.org/
http://nodeschool.io/
https://phpschool.io/
http://tryruby.org/
Hi! I'm developing a library that generalizes ranges so they can be used in more contexts like for example async IO and metaprogramming. In the long term I plan to propose it for std.experimental
, but first I need to introduce people to some new concepts and techniques, before I can convince them that it's a worthwhile addition.
So, obviously I was thinking about making a tutorial for my library, but then I noticed your project and I thought that it would be great if I could use it to present my library and to let others play with it.
What do you think about letting other people make tutorials about their libraries and to publish them on dlang-tour
(of course, after your permission)? This would require some basic dub support (in order to specify external dependencies) and maybe some small reorganization (maybe adding a third-party drop-down, next to vibe-d).
Speaking of DUB, I'm willing to contribute a tutorial for it, but I haven't looked at your backend code, so I don't if it would be a large effort to support it in addition to rdmd.
Would be convenient if we would have an edit this page button, s.t. people can easily reach this repo and help to improve the content.
Some source code code might break the page layout.
The Dlang Tour is using Bootstrap but the layout should be tweaked to at least support mobiles devices like IPads. I have an IPad Mini and the layout break the content and the source code editor in two rows which looks weird. I would be in favour of also having the source side by side to the content.
To increase usability of bottom bar maybe the section titles could be added to the next and forward links. This sould only be done if the mobile layout isn't broken by this feature!
Github will display a link to this file on every issue & PR - might be a good opportunity to highlight some key points and link to other README's (e.g. the one at public/content)
Add a README which explains how to setup the dlang-tour in a bare Server sich docker-compose. Automatic updates should be explained using https://github.com/CenturyLinkLabs/watchtower.
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.