Lecture 4

Installing the DANL Tools

Byeong-Hak Choe
bchoe@geneseo.edu

SUNY Geneseo

February 1, 2024

Announcement

GitHub Notifications Setting

  • If you want to avoid a ton of notification emails,
    1. Go to https://github.com, and log in.
    2. Click the mailbox icon at the top right corner next to the profile icon.
    3. Click “Manage notifications” at the bottom of the side bar.
    4. Click “Notification settings”.
    5. Scroll down to the “Subscriptions” menu.
    6. Click “Notify me on …” from the “Watching” sub-menu, uncheck “Email”, and save it.
    7. Click “Notify me on …” from the “Participating, …” sub-menu, uncheck “Email”, and save it.

Tasks & Objectives

  • Setting up the DANL tools
    • R/RStudio or Posit Cloud
    • tidyverse Package
    • Personal Website
  • Learning
    • Markdown Basics
    • R Basics

RStudio Workflow

Shortcuts for RStudio and RScript

Mac

  • command + shift + N opens a new RScript.
  • command + return runs a current line or selected lines.
  • command + shift + C is the shortcut for # (commenting).
  • option + - is the shortcut for <-.

Windows

  • Ctrl + Shift + N opens a new RScript.
  • Ctrl + return runs a current line or selected lines.
  • Ctrl + Shift + C is the shortcut for # (commenting).
  • Alt + - is the shortcut for <-.

Workflow

Shortcuts for Lecture Slides

  • o or Esc overviews lecture slides

    • Use arrow keys to move around.

  • You can also click the menu button at the top-right corner, and go to a specific slide.

  • Ctrl + Shift + F to search.

Posit Cloud

  • Posit Cloud is a cloud version of RStudio, and it has a free version.

  • Posit Cloud is a good option for those who could not install tidyverse package on a laptop.

  • Regarding the website building and management, Posit Cloud users should follow the instruction in Classwork 2.

  • Regarding local data files, Posit Cloud users needs to upload them on a RStudio cloud project.

Installing the Tools

Installing the Tools

Building a Website

  • Let’s do Classwork 2 if you have not finished it up.

Installing the Tools

Practice Markdown

  • Quarto and GitHub-based Discussion Boards use markdown as its underlying document syntax.

  • Let’s do Classwork 3.

Getting Started with Quarto

Getting Started with Quarto

YAML

  • An YAML (yet another markup language) header surrounded by ---.
    • It is commonly used for document configuration (e.g., title, author, date, style, …).
  • Chunks of Python/R code surrounded by three backticks, \(\text{```}\).

Getting Started with Quarto

Knitting / Rendering

  • When we knit the document, Quarto sends the .qmd file to jupyter/knitr, which executes all of the code chunks and creates a new markdown (.md) document which includes the code and its output.

  • The markdown file (*.md) generated by jupyter/knitr is then processed by pandoc, which is responsible for creating the output file.

Getting Started with Quarto

Markdown, Quarto, and HTML

  • The very original version of Markdown was invented mainly to write HTML content more easily.
    • For example, - SOME_TEXT in “.md” is equivalent to <ul><li> SOME_TEXT </li> in ”.html”
  • Pandoc makes it possible to convert a Markdown document to a large variety of output formats, such as HTML.

Getting Started with Quarto and HTML

Markdown, Quarto, and HTML

  • To create an HTML document from Quarto, we specify the html output format in the YAML metadata of our document.

    • By default, format: html is set.

  • In RStudio, we can create a new Quarto file from the menu, File -> New File -> Quarto Document.

  • Open an empty Quarto file.

    • Type the following YAML metadata to the empty Quarto file.
---
title: "Habits"
author: YOUR_NAME
date: January 30, 2024
format: 
  html
---

Getting Started with Quarto

Quarto Basics

  • In RStudio, close the project USERNAME.github.io.Rporj if it is on.
    1. Click USERNAME.github.io.Rporj at the top-right corner.
    2. Click Close Project.
  • Download the Quarto file, danl-200-quarto.qmd from Brightspace, and open it from RStudio.

Getting Started with Quarto

Quarto Basics

  • The following syntax is part of YAML metadata in danl-200-quarto.qmd.
    • In YAML, indentation really matters!
    • tab (or four spaces) defines a level in YAML.
---
title: 
subtitle: 
author: 
date: last-modified

format: 
  html:
  
execute: 
  echo: true
  eval: true
---

Managing a Website with Quarto

Quarto Websites

  • In RStudio, open the project USERNAME.github.io.Rporj.
    1. Click Project: (None) at the top-right corner.
    2. Click USERNAME.github.io.Rporj.
  • Your website has a _quarto.yml configuration file.
    • This file provides options for HTML documents within the website.
---
project:
  type: website

website:
  title: "YOUR NAME"
  navbar:
    left:
      - text: Project
        href: project.qmd
      - text: Blog
        href: blog-listing.qmd
format:
  html:
    theme: cosmo
    css: styles.css
    toc: false
---

  • The _quarto.yml file configures the website settings.

  • Indentation matters!

Quarto Websites

Custom CSS

  • Cascading Style Sheets (CSS) is used to format the layout of a webpage (color, font, text size, background, display, etc.).

    • HTML will format the architecture of the house.

    • CSS will be the carpet and walls to decorate the house.

    • JavaScript (*.js) adds interactive elements in the house, such as opening doors and lighting.

  • We are not front-end web developers.

    • We will not cover discuss the use of CSS and JavaScript.

Quarto Websites

Rendering

  • The Render button (command/Ctrl + shift + K) renders a single Quarto file.

  • quarto render from Terminal renders all Quarto files in your local working directory:

quarto render

  • We should use quarto render when we have changes in _quarto.yml.

  • Make changes only from your local laptop.

    • Do not make any change from the GitHub repo webpage.

Quarto Websites

Appearance and Style

  • theme specifies the Bootstrap theme to use for the page (themes are drawn from the Bootswatch theme library).
    • Valid themes include default, bootstrap, cerulean, cosmo, darkly, flatly, journal, lumen, paper, readable, sandstone, simplex, spacelab, united, and yeti.
  • highlight-style specifies the code highlighting style.
    • Supported styles include default, tango, pygments, kate, monochrome, espresso, zenburn, haddock, breezedark, and textmate.

Quarto Websites

About

Quarto Websites

Icons and Emojis

Quarto Websites

  • We can add a new page to the website through navbar in _quarto.yml
left:
- text: Project
  href: project.qmd
- text: Blog
  href: blog-listing.qmd
- text: Homeowrk
  href: hw.qmd

Quarto Websites

  • We can also create a navigation bar menu by including a menu
left:
  - text: "Projects"
    menu:
      - project_1.qmd
      - project_2.qmd

Quarto Websites

Colors

Website Basics