Code is Way of Life.
And I've been doing it for a very Long Time.
Demo Day Guidelines Prep
modified Sept2024
Outline
- very structured agenda
- kept short for important reasons
- starts with host intro
- each group does demo/preso
- 1 question per group (maybe a second followup)
- after demos, each group table, free for all some-on-somes.
MVP
- what does a User use your product for??
- decide on your main app points → Minimally Viable Product
- ok to add UI that doesn’t work
- avoid talking about what doesn’t work
- non-working UI gives the impression things are more developed
- define a demo flow
Demo Constraints
- Make sure your Demo Data is relevant
- if it’s Lorem Ipsum, you lose people
- 4 minutes total
- All (each) group members must say something substantive
- This gives audience a chance to see you in a strong position
- you’ve done work on the project
- you’ve prepped what you say
- you’ve practiced it
- you clearly care how you come across
- you care about the impression you make on the audience
- this does not include a question from the audience.
- Demo must have a point
- showing what you built into your app
- showing what works
- Demo must have a story arc
- like a good video, song or TV show, demo should tell a little story
- think like a Commercial; storytelling
- WRITE out your script
- Don’t care how smart you think you are
- Don’t care you think you’ll be all right
- Don’t care you think you don’t need to
- Do the work, write it out!
- Critical: Everyone must write their own words in their own voice
140 words per minute is maximum verbiage
So plan on LESS THAN 600 words total for the demo.
hardware/projector
- connect to projector
- maybe need to link to WiFi local
- have a backup laptop
Edward Tufte uses distinctive, simple, well-set typography; extensive sidenotes; and tight integration of graphics and charts. Tufte Bootstrap brings Tufte's style to the Bootstrap framework.
This project is directly inspired by Tufte CSS, which is based on Tufte-LaTeX and the R Markdown Tufte Handout.
If you see anything that Tufte Bootstrap could improve, we welcome your contribution in the form of an issue or pull request on the GitHub project: tufte-bootstrap.
Getting Started
Since this project stands atop Bootstrap's giant shoulders, it assumes your HTML5 already employs Bootstrap, whose starter template is a good guide to getting started.
To add Tufte Bootstrap, copy tufte-bootstrap.css
and the assets
directory to your project directory, then add the following to your HTML document’s head
block:
<link rel="stylesheet" href="tufte-bootstrap.css"/>
Now you just have to use the markup conventions described in this document. For best results, View Source and Inspect Element frequently.
Fundamentals
Sections and Headings
Organize your document with an article
element inside your body
tag. Inside that, use section
tags around each logical grouping of text and headings.
Tufte CSS uses h1
for the document title, p
with class lead
for the document subtitle, h2
for section headings, and h3
for low-level headings. More specific headings are not supported. If you feel the urge to reach for a heading of level 4 or greater, consider redesigning your document:
The English language . . . becomes ugly and inaccurate because our thoughts are foolish, but the slovenliness of our language makes it easier for us to have foolish thoughts.
[It is] notable that the Feynman lectures (3 volumes) write about all of physics in 1800 pages, using only 2 levels of hierarchical headings: chapters and A-level heads in the text. It also uses the methodology of sentences which then cumulate sequentially into paragraphs, rather than the grunts of bullet points. Undergraduate Caltech physics is very complicated material, but it didn’t require an elaborate hierarchy to organize.
As a bonus, this excerpt regarding the use of headings provides an example of block quotes. In Tufte CSS they are just lightly styled, semantically correct HTML using blockquote
and footer
elements. See page 20 of The Visual Display of Quantitative Information for an example in print.
In his later books, Tufte starts each section with a bit of vertical space, a non-indented paragraph, and the first few words of the sentence set in small caps. For this we use a span with the class newthought
, as demonstrated at the beginning of this paragraph. Vertical spacing is accomplished separately through <section>
tags. Be consistent: though we do so in this paragraph for the purpose of demonstration, do not alternate use of header elements and the newthought
technique. Pick one approach and stick to it.
Type
In print, Tufte has used the proprietary Monotype Bembo font. A similar effect is achieved in digital formats with the now open-source ETBook, which Tufte CSS supplies with a @font-face
reference to a .ttf file. In case ETBook somehow doesn’t work, the CSS shifts gracefully to other serif fonts like Palatino and Georgia.
Also included are separate font files for bold (strong) and italic (emphasis, cite), instead of relying on the browser to mechanically transform the text. This is typographic best practice.
If you prefer sans-serifs, use the sans
class. It relies on Bootstrap's default font stack for sans-serifs.
As always, these design choices are merely one approach that Tufte Bootstrap provides by default.
Figures
Tufte emphasizes tight integration of graphics with text. Data, graphs, and figures are kept with the text that discusses them. In print, this means they are not relegated to a separate page. On the web, that means readability of graphics and their accompanying text without extra clicks, tab-switching, or scrolling.
Figures should try to use the figure
element, which by default are constrained to the main column. Don’t wrap figures in a paragraph tag. Any label or margin note goes in a regular margin note inside the figure. For example, most of the time one should introduce a figure directly into the main flow of discussion, like so:
Tight integration of graphics with text is central to Tufte’s work even when those graphics are ancillary to the main body of a text. In many of those cases, a margin figure may be most appropriate. To place figures in the margin, just wrap an image (or whatever) in a margin note inside a p tag, as seen to the right of this paragraph.
Use Bootstrap's included figure classes: .figure
, .figure-img
and .figure-caption
classes to provide some baseline styles for the HTML5 <figure>
and <figcaption>
elements. Images in figures have no explicit size, so be sure to add the .img-fluid
class to your <img>
to make it responsive.
Code
Warning: the example below was carefully chosen to avoid the need for escaped characters, something that's often a challenge for technical writing on the web.
Technical jargon, programming language terms, and code samples are denoted with the code
class, as I’ve been using in this document to denote HTML. Code needs to be monospace for formatting purposes and to aid in code analysis, but it must maintain its readability. To those ends, Tufte CSS follows GitHub’s font selection, which shifts gracefully along the monospace spectrum from the elegant but rare Consolas all the way to good old reliable Courier.
Extended code examples should use a pre
tag with class code
. This adds control over indentation and overflow as well:
;; Some code examples in Clojure. This is a comment. ;; applying a function to every item in the collection (map tufte-css blog-posts) ;;;; if unfamiliar, see http://www.lispcast.com/annotated-map ;; side-effecty loop (unformatted, causing text overflow) - from https://clojuredocs.org/clojure.core/doseq (doseq [[[a b] [c d]] (map list (sorted-map :1 1 :2 2) (sorted-map :3 3 :4 4))] (prn (* b d))) ;; that same side-effecty loop, formatted (doseq [[[a b] [c d]] (map list (sorted-map :1 1 :2 2) (sorted-map :3 3 :4 4))] (prn (* b d))) ;; If this proselytizing has worked, check out: ;; http://howistart.org/posts/clojure/1
Epilogue
Many thanks go to Edward Tufte for leading the way with his work. It is only through his kind and careful editing that this project accomplishes what it does. All errors of implementation are of course mine.