You could read all the words below, or ... watch this video
To understand what's going on here the first thing to know is that you are using
a static server, like the liveServer extension for Visual Studio Code. This
means you can use $ study to develop your HTML/CSS/JavaScript projects as you
normally would. You'll just have to refresh manually when you make changes.
The differences begin when you start adding URL Query Parameters (Thomas, wikipedia). This server supports a few custom query parameters called lenses because they help you see and study your code in new ways. You can add parameters to your URL by writing them directly in address bar and refreshing.
PS. The links with a ? in this file will only work properly when you are
reading this in Study Lenses
You can study different files in different ways. Here are some examples you can try out to get the feel:
JavaScript
- /smiley.js - get the source code for a .js file
- /smiley.js?study - study it as a live exercise in the debugger
- /smiley.js?parsons - or a parsons problem
- /smiley.js?flowchart - or a flowchart
- /smiley.js?highlight - or highlighted source
- /smiley.js?variables - or highlight the variables
- /smiley.js?blanks - or a fill-in-the-blank exercise
- /smiley.js?pseudo&highlight - or convert the code to pseudocode
Markdown
/README.md- get the source code for a markdown file/README.md?highlight- or highlight it/README.md?render- or render it into a web page/README.md?study- or study it (JS code blocks will have lens buttons)/README.md?slides- each divider (---) will be a new slide
HTML
/index.html- open an HTML file without parameters ... and it's a website/index.html?highlight- highlight the source code/index.html?study- try out some changes in real-time
Besides single files, you can also add lenses to view entire directories.
- ./?study - view it as a navigable directory structure with each file using the default lenses. if there is a README, it will be rendered underneath the directory contents.
- ./?json-explorer - or examine the virtual directory as a JSON object
If you navigate to a directory without adding any parameters, what you see will depend on what files are in the directory:
- if there is an
index.html, that will be served as a web page - if there is a
README.mdand noindex.html, then the README will be rendered and served as a web page - if there is no
index.htmlorREADME.md, you will get a 404 error
Study Lenses also has a few sandbox environments for working with throw-away
examples. You can open a sandbox from any URL with the ?--sandbox option but
you can't save your work:
- JavaScript Editor:
?--js - JavaScript Repl:
?--repl - HTML:
?--html - Whiteboard:
/?--draw - p5.js:
?--p5 - Logo:
?--logo - Dirty Turtle:
?--turtle
Different ways you can view the same resource
Ways to modify the server's behavior, kind of like CLI options
