diff --git a/docs/dashboards.qmd b/docs/dashboards.qmd index c3fba548..66c23445 100644 --- a/docs/dashboards.qmd +++ b/docs/dashboards.qmd @@ -80,6 +80,7 @@ To create a sidebar layout with multiple pages, just put each page's content in Cards are great for visually grouping together related content, and it's best practice to place related components together in a card. Here you'll also have an opportunity to add a header, footer, add `full_screen` capability, and more. +As we'll see later, cards are also useful for making outputs stand out from one another when there are multiple outputs to display. ```{shinylive-python} #| standalone: true @@ -203,7 +204,9 @@ Did you know the app viewer above is resizable? Try resizing it to see how the l ### Tooltips and popovers -Tooltips and popovers are a useful means for both displaying (tooltips) and interacting with (popovers) additional information in a non-obtrusive way. In the [actual dashboard](#altogether-now), we'll leverage a popover to effectively add a toolbar with additional inputs controls to card headers. +Tooltips and popovers are a useful means for both displaying and interacting with additional information in a non-obtrusive way. +Tooltips are shown on hover, whereas popovers are shown on click, making them more suitable for interactive content like inputs. +In the [actual dashboard](#altogether-now), we'll leverage a popover to effectively add a toolbar with additional inputs controls to card headers. ```{shinylive-python} #| standalone: true @@ -233,6 +236,8 @@ with ui.popover(title="Popover title"): Let's put it all together to create a dashboard for exploring restaurant tipping data. +Here we use a [sidebar](#sidebar-layout) to hold our "global" inputs, and place outputs in [cards](#cards). These cards are laid out [column-wise](#multi-column-layout), and [value boxes](#value-boxes) highlight the most important numbers. Finally, inputs that are specific to each are placed in a [popover](#tooltips-and-popovers) so that they are unobtrusive and don't distract the user from the main application content. + ::: {.column-page-right} ```{shinylive-python} diff --git a/docs/debug.qmd b/docs/debug.qmd index 4378e668..f61d7880 100644 --- a/docs/debug.qmd +++ b/docs/debug.qmd @@ -67,7 +67,7 @@ The [VS Code debugger](https://code.visualstudio.com/docs/editor/debugging) is a ### Breakpoints -A `breakpoint()` is a point in your code where you want to pause execution and inspect the program state. +A `breakpoint()` is a point in your code where you want to pause execution and inspect the program state via the [Python debugger (pdb)](https://docs.python.org/3/library/pdb.html). ```python @render.text @@ -76,6 +76,9 @@ def bad(): return str(a_missing_variable) ``` +When a breakpoint is hit, the program will pause and you can them send commands like `break` (i.e., exit) and `continue` to the debugger. `Ctrl+D` will also exit the debugger. + + ### Print statements A quick and simple way to debug Shiny applications is to add `print()` statements. diff --git a/docs/install-create-run.qmd b/docs/install-create-run.qmd index a35bd98a..c5af8608 100644 --- a/docs/install-create-run.qmd +++ b/docs/install-create-run.qmd @@ -83,7 +83,7 @@ conda update -c conda-forge shiny ### VS Code -We recommend installing the [Python][vscode-python] and [Shiny][vscode-shiny] extensions for [Visual Studio Code][vscode]. As you'll see below, this provides a play button in the top right corner of your editor that will run your Shiny app (among other things). +We recommend installing the [Python][vscode-python] and [Shiny][vscode-shiny] extensions for [Visual Studio Code][vscode]. This provides, among other things, a play button in the top right corner of your editor that will run your Shiny app. If [type checking is important](https://john-tucker.medium.com/type-checking-python-306ad8339da1) to you, in addition to installing the [Python VSCode extension][vscode-python], you may want to do some additional configuration for a smooth experience with types in Shiny. See the tip below for more details.