Nick Strayer

Shiny UI Editor Project Walkthrough || Nick Strayer || RStudio

The Shiny UI Editor is a dynamic drag-and drop interface to help you design beautiful Shiny apps. The Shiny UI Editor is a visual tool for building the UI portion of a Shiny application that generates clean and human-readable code.

The goal of the Shiny UI Editor is to allow people to build the broad-level UI for their Shiny app without writing code. The editor is intended for those who may not be comfortable with the HTML-style code of Shiny’s UI functions or who simply don’t want to fiddle with sizes to get things laid out correctly.

Shiny UI Editor Feature Tour || Nick Strayer || Posit (RStudio)

The Shiny UI Editor is a dynamic drag-and drop interface to help you design beautiful Shiny apps. The Shiny UI Editor is a visual tool for building the UI portion of a Shiny application that generates clean and human-readable code.

The goal of the Shiny UI Editor is to allow people to build the broad-level UI for their Shiny app without writing code. The editor is intended for those who may not be comfortable with the HTML-style code of Shiny’s UI functions or who simply don’t want to fiddle with sizes to get things laid out correctly.

Hey Shiny Team, what are some of your biggest learnings from 2022? || Shiny Developers || RStudio

BIG THINGS happened on the Shiny team in 2022! Our team built out a new Shiny UI Editor, Shiny for Python, and Shiny for Python in the browser using WebAssembly. So we asked some of our Developers what their biggest learnings have been from building these products!

Nick Strayer || Part IV: Styling a Shiny Wordle App with CSS || RStudio

00:00 Introduction 00:44 Switching from verbatimTextOutput to uiOutput 01:42 Switching from renderText to HTML DOM elements 03:17 In-line styling with divs 07:30 Converting individual letters from block elements to adjacent grids with CSS grid 08:56 Adding CSS at the head of the UI variable in Shiny with tags$head (and wrapping with HTML!) 10:36 CSS targeting of the background color 12:24 Link: Complete Guide to CSS Grid 14:05 Moving text position within each individual div using CSS classes 16:48 Creating a gap between grid elements 17:13 Rounding border edges for letter grids 19:00 Formatting letter grid background color to indicate result “correctness” 21:30 Increasing font size 23:37 Updating the legend to use color, not text indicators 26:40 Adjusting padding to improve app aesthetic 28:08 Formatting the app UI with justified centering 31:56 Adjusting the text input and Go button 34:07 Why Flexbox is the right tool for this task 35:09 Exploring Flexbox Dev Tools in Chrome 39:14 Adjusting the colors of letter grids using Inspect Element 40:40 Making text bold with font-weight 41:04 Hint on how to approach formatting the keyboard

In final installment of this four-part series, RStudio’s Nick Strayer walks through using CSS to stylize our Shiny Wordle app.