-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
60 changed files
with
1,987 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,59 @@ | ||
# Apple Development Intensive 2024 Code of Conduct | ||
|
||
Adapted from: <https://github.com/processing/p5.js/blob/master/CODE_OF_CONDUCT.md> | ||
|
||
## Apple Development Intensive 2024 community statement | ||
|
||
Apple Development Intensive 2024 is a community interested in exploring the creation of art and design with technology. | ||
|
||
We are a community of, and in solidarity with, people from every gender identity and expression, sexual orientation, race, ethnicity, language, neuro-type, size, ability, class, religion, culture, subculture, political opinion, age, skill level, occupation, and background. We acknowledge that not everyone has the time, financial means, or capacity to actively participate, but we recognize and encourage involvement of all kinds. We facilitate and foster access and empowerment. We are all learners. | ||
|
||
We like these hashtags: #noCodeSnobs (because we value community over efficiency), #newKidLove (because we all started somewhere), #unassumeCore (because we don't assume knowledge), and #BlackLivesMatter (because of course). | ||
|
||
In practice: | ||
|
||
- We are not code snobs. We do not assume knowledge or imply there are things that somebody should know. | ||
- We insist on actively engaging with requests for feedback regardless of their complexity. | ||
- We welcome newcomers and prioritize the education of others. We strive to approach all tasks with the enthusiasm of a newcomer. Because we believe that newcomers are just as valuable in this effort as experts. | ||
- We consistently make the effort to actively recognize and validate multiple types of contributions. | ||
- We are always willing to offer help or guidance. | ||
|
||
In times of conflict: | ||
|
||
- We listen. | ||
- We clearly communicate while acknowledging other's feelings. | ||
- We admit when we're wrong, apologise, and accept responsibility for our actions. | ||
- We are continuously seeking to improve ourselves and our community. | ||
- We keep our community respectful and open. | ||
- We hear everyone. | ||
- We are mindful and kind in our interactions. | ||
|
||
In the future: | ||
|
||
- The future is now. | ||
|
||
## Apple Development Intensive 2024 Code of Conduct | ||
|
||
- **Be mindful of your language.** Any of the following behaviour is unacceptable: | ||
|
||
- Offensive comments related to gender identity and expression, sexual orientation, race, ethnicity, language, neuro-type, size, ability, class, religion, culture, subculture, political opinion, age, skill level, occupation, or background | ||
- Threats of violence | ||
- Deliberate intimidation | ||
- Sexually explicit or violent material that is not contextualized and preceded by a considerate warning | ||
- Unwelcome sexual attention | ||
- Stalking or following | ||
- Or any other kinds of harassment | ||
|
||
Use your best judgement. If it will possibly make others uncomfortable, do not post it. | ||
|
||
- **Be respectful.** Disagreement is not an opportunity to attack someone else's thoughts or opinions. Although views may differ, remember to approach every situation with patience and care. | ||
- **Be considerate.** Think about how your contribution will affect others in the community. | ||
- **Be open minded.** Embrace new people and new ideas. Our community is continually evolving and we welcome positive change. | ||
|
||
If you believe someone is violating the code of conduct, we ask that you report it by emailing [b.stopher@arts.ac.uk](mailto:b.stopher@arts.ac.uk). Please include your name and a description of the incident, and we will get back to you as soon as possible. | ||
|
||
Sometimes, participants violating the Code of Conduct are unaware that their behaviour is harmful, and an open conversation clears things up to move forward. However, if a participant continues with the behaviour, the Diploma in Apple Development team may take any action they deem appropriate. | ||
|
||
--- | ||
|
||
This statement is licensed under a [Creative Commons license](https://creativecommons.org/licenses/by-sa/4.0/). Please feel free to share and remix with attribution. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,2 +1,81 @@ | ||
# AppleDevelopmentIntensive2024 | ||
# Apple Development Intensive 2024 | ||
|
||
Slides and other content for the Apple Development Intensive course given at the Creative Computing Institute, London from the 5th February - 9th February 2024. | ||
|
||
## Information | ||
|
||
- Location: [Creative Computing Institute(CCI)](https://www.arts.ac.uk/creative-computing-institute), Camberwell, London. | ||
- Lecturer: [Joel Gethin Lewis](https://joelgethinlewis.com/). Contact me via email via my website. | ||
- [Lecture and Workshop slides](https://github.com/JGL/AppleDevelopmentIntensive2024) | ||
- Please see the [course wiki for all non-lecture notes, reading lists and other resources](https://github.com/JGL/AppleDevelopmentIntensive2024/wiki). | ||
- Daily schedule: | ||
- 1000-1100: Lecture | ||
- 1100-1230: Workshop | ||
- 1230-1300: Discussion | ||
- 1300-1400: Lunch break | ||
- 1400-1500: Lecture | ||
- 1500-1630: Workshop | ||
- 1630-1700: Discussion | ||
- Schedule for the week: | ||
- Monday: Introduction, Constants and Operators - how can I demo this in SwiftUI? | ||
- 1000-1100: Lecture 1: Introduction to the course. 1-01 Introduction to Swift and Playgrounds.key | ||
- 1100-1230: Workshop 1: Introduction to GitHub. Introduction to GitHub. Introduction to Swift. Introduction to the Swift REPL. Lab - Introduction.playground | ||
- 1230-1300: Discussion 1: What do you want to make? | ||
- 1300-1400: Lunch break | ||
- 1400-1500: Lecture 2: 1-02 Constants Variables and Data Types.key, 1-03 Operators.key | ||
- 1500-1630: Workshop 2: Lab - Constants and Variables.playground, Lab - Operators.playground | ||
- 1630-1700: Discussion 2: Different ways of counting? | ||
- Tuesday: Control flow, Strings, Functions and Structures - how can I demo this in SwiftUI? | ||
- 1000-1100: Lecture 3: 1-04 Control Flow.key, 2-01 Strings.key | ||
- 1100-1230: Workshop 3: Lab - Control Flow.playground, Lab - Strings.playground | ||
- 1230-1300: Discussion 3: ? | ||
- 1300-1400: Lunch break | ||
- 1400-1500: Lecture 4: 2-02 Functions.key, 2-03 Structures.key | ||
- 1500-1630: Workshop 4: Lab - Functions.playground, Lab - Structures.playground | ||
- 1630-1700: Discussion 4: ? | ||
- Wednesday: Classes, Collections, Functions and Structures | ||
- 1000-1100: Lecture 5: 2-04 Classes.key, 2-05 Collections.key | ||
- 1100-1230: Workshop 5: Lab - Classes.playground, Lab - Collections.playground | ||
- 1230-1300: Discussion 5: ? | ||
- 1300-1400: Lunch break | ||
- 1400-1500: Lecture 6: 2-02 Functions.key, 2-03 Structures.key | ||
- 1500-1630: Workshop 6: Lab - Functions.playground, Lab - Structures.playground | ||
- 1630-1700: Discussion 6: ? | ||
- Thursday: Loops, Options, Type Casting, Guard, Scope and Enumerations | ||
- 1000-1100: Lecture 7: 2-06 Loops.key, 3-01 Optionals.key, 3-02 Type Casting and Inspection.key | ||
- 1100-1230: Workshop 7: Lab - Loops.playground, Lab - Optionals.playground, Lab - Type Casting.playground | ||
- 1230-1300: Discussion 7: ? | ||
- 1300-1400: Lunch break | ||
- 1400-1500: Lecture 8: 3-03 Guard.key, 3-04 Scope.key, 3-05 Enumerations.key | ||
- 1500-1630: Workshop 8: Lab - Guard.playground, Lab - Scope.playground, Lab - Enumerations.playground | ||
- 1630-1700: Discussion 8: ? | ||
- Friday: ? | ||
- 1000-1100: Lecture 9: | ||
- 1100-1230: Workshop 9: | ||
- 1230-1300: Discussion 9: | ||
- 1300-1400: Lunch break | ||
- 1400-1500: Lecture 10: | ||
- 1500-1630: Workshop 10: | ||
- 1630-1700: Discussion 10: | ||
|
||
## Code of Conduct | ||
|
||
You can find the UAL Disciplinary Code For Students here: [Disciplinary Code For Students](https://www.arts.ac.uk/study-at-ual/academic-regulations/student-regulations/disciplinary-code-for-students). | ||
|
||
You can find our code of conduct here: [code_of_conduct.md](CODE_OF_CONDUCT.md), it was cloned from <https://github.com/processing/p5.js/blob/main/CODE_OF_CONDUCT.md>. | ||
|
||
[Golan Levin](https://www.flong.com/) also offers a useful thought from his children's school: | ||
|
||
> When communicating, ask yourself: | ||
> | ||
> - T – is it True? | ||
> - H – is it Helpful? | ||
> - I – is it Inspiring? | ||
> - N – is it Necessary? | ||
> - K – is it Kind? | ||
## Thanks | ||
|
||
Thanks 🙏🏻 to Abbie Vickress, Laura Knight, Rocio Rey Aloe, Becca Rose, Naho Matsuda, Cheska Lotherington, Véronique Bolhuis, Brenda Brierley, Lukas Alperowitz, Lise Hansen, Filippo Romeo, Herman Ho, Val Toro, Murad Khan, Matthew Plummer Fernandez, Alex Fefegha, Anna Troisi, Ben Kelly, Cathy Hoste, Charlotte Webb, Julia Makivic, Kenneth Lim, Matt Jarvis, Melisa Simpson, Rebecca Fiebrink, Sheldon Brown, Tom Lynch, Eva Wilkinson, Vali Lalioti, Indira Knight, Alice Stewart, Ben Stopher, Mick Grierson, Georgina Capdevila Cano, Alan Warburton, Rebecca Ross, Jaap de Maat, Lauren McCarthy, Kyle McDonald, Jonathan Harris, Zach Lieberman, Jessica Bland, Rick Walker, Graham Bennett, Toby Milner-Gulland, Liam Walsh, Golan Levin, Greg Smith, Mark Lundin, Xiaohan Zhang, Lia, Joshua Goldberg, Rosa Menkman, Daniel Shiffman, Tega Brain, Caitlin Morris, Harri Lewis and Rune Madsen. | ||
|
||
🖖🏻🇬🇧🏴🏴☠️🏳️🌈🏳️⚧️ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,198 @@ | ||
# Change Log | ||
|
||
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines. | ||
|
||
# [3.6.0](https://github.com/tmcw/big/compare/v3.5.1...v3.6.0) (2019-02-22) | ||
|
||
|
||
### Bug Fixes | ||
|
||
* **package:** update marked to version 0.6.0 ([160f23e](https://github.com/tmcw/big/commit/160f23e)) | ||
|
||
|
||
### Features | ||
|
||
* background image preloading ([9a3bb9e](https://github.com/tmcw/big/commit/9a3bb9e)) | ||
|
||
|
||
|
||
<a name="3.5.1"></a> | ||
## [3.5.1](https://github.com/tmcw/big/compare/v3.5.0...v3.5.1) (2018-11-04) | ||
|
||
|
||
### Bug Fixes | ||
|
||
* **package:** update get-port to version 4.0.0 ([#163](https://github.com/tmcw/big/issues/163)) ([69dfede](https://github.com/tmcw/big/commit/69dfede)) | ||
* **package:** update marked to version 0.5.0 ([#166](https://github.com/tmcw/big/issues/166)) ([c9220b9](https://github.com/tmcw/big/commit/c9220b9)) | ||
* **package:** update mustache to version 3.0.0 ([#170](https://github.com/tmcw/big/issues/170)) ([e05bc39](https://github.com/tmcw/big/commit/e05bc39)) | ||
|
||
|
||
|
||
<a name="3.5.0"></a> | ||
# [3.5.0](https://github.com/tmcw/big/compare/v3.4.1...v3.5.0) (2018-07-31) | ||
|
||
|
||
### Features | ||
|
||
* **compose:** Make theme configurable with a --theme or -t CLI flag ([8435450](https://github.com/tmcw/big/commit/8435450)) | ||
|
||
|
||
|
||
<a name="3.4.1"></a> | ||
## [3.4.1](https://github.com/tmcw/big/compare/v3.4.0...v3.4.1) (2018-07-20) | ||
|
||
|
||
### Bug Fixes | ||
|
||
* main export ([#162](https://github.com/tmcw/big/issues/162)) ([7dfd427](https://github.com/tmcw/big/commit/7dfd427)) | ||
|
||
|
||
|
||
<a name="3.4.0"></a> | ||
# [3.4.0](https://github.com/tmcw/big/compare/v3.3.0...v3.4.0) (2018-06-10) | ||
|
||
|
||
### Bug Fixes | ||
|
||
* **package:** update marked to version 0.4.0 ([#150](https://github.com/tmcw/big/issues/150)) ([1e2ede6](https://github.com/tmcw/big/commit/1e2ede6)) | ||
|
||
|
||
### Features | ||
|
||
* **jump:** Better navigation in jump mode ([#151](https://github.com/tmcw/big/issues/151)) ([6491c07](https://github.com/tmcw/big/commit/6491c07)), closes [#138](https://github.com/tmcw/big/issues/138) | ||
|
||
|
||
|
||
<a name="3.3.0"></a> | ||
# [3.3.0](https://github.com/tmcw/big/compare/v3.2.3...v3.3.0) (2018-05-29) | ||
|
||
|
||
### Features | ||
|
||
* Listen for connections on the specified port ([#156](https://github.com/tmcw/big/issues/156)) ([3d54f90](https://github.com/tmcw/big/commit/3d54f90)) | ||
|
||
|
||
|
||
<a name="3.2.3"></a> | ||
## [3.2.3](https://github.com/tmcw/big/compare/v3.2.2...v3.2.3) (2018-05-16) | ||
|
||
|
||
### Bug Fixes | ||
|
||
* Add page breaks in print mode ([#149](https://github.com/tmcw/big/issues/149)) ([f89c9fd](https://github.com/tmcw/big/commit/f89c9fd)) | ||
|
||
|
||
|
||
<a name="3.2.2"></a> | ||
## [3.2.2](https://github.com/tmcw/big/compare/v3.2.1...v3.2.2) (2018-05-12) | ||
|
||
|
||
### Bug Fixes | ||
|
||
* **package:** update cpy to version 7.0.0 ([#146](https://github.com/tmcw/big/issues/146)) ([d96a22c](https://github.com/tmcw/big/commit/d96a22c)) | ||
|
||
|
||
|
||
<a name="3.2.1"></a> | ||
## [3.2.1](https://github.com/tmcw/big/compare/v3.2.0...v3.2.1) (2018-04-15) | ||
|
||
|
||
### Bug Fixes | ||
|
||
* **package:** update cpy to version 6.0.0 ([#107](https://github.com/tmcw/big/issues/107)) ([22b2c41](https://github.com/tmcw/big/commit/22b2c41)) | ||
* **package:** update ecstatic to version 3.0.0 ([#103](https://github.com/tmcw/big/issues/103)) ([d4612b4](https://github.com/tmcw/big/commit/d4612b4)) | ||
* **package:** update ecstatic to version 3.1.1 ([#115](https://github.com/tmcw/big/issues/115)) ([e62bb04](https://github.com/tmcw/big/commit/e62bb04)), closes [#114](https://github.com/tmcw/big/issues/114) | ||
* Use event.key instead of event.which ([#131](https://github.com/tmcw/big/issues/131)) ([41e46d4](https://github.com/tmcw/big/commit/41e46d4)), closes [#129](https://github.com/tmcw/big/issues/129) | ||
|
||
|
||
|
||
<a name="3.2.0"></a> | ||
# [3.2.0](https://github.com/tmcw/big/compare/v3.2.0-0...v3.2.0) (2017-08-04) | ||
|
||
|
||
|
||
<a name="3.2.0-0"></a> | ||
# [3.2.0-0](https://github.com/tmcw/big/compare/v3.1.0...v3.2.0-0) (2017-08-04) | ||
|
||
|
||
### Features | ||
|
||
* command-line interface for generating presentations from markdown ([c5e3aa7](https://github.com/tmcw/big/commit/c5e3aa7)) | ||
|
||
|
||
|
||
<a name="3.3.0-0"></a> | ||
# [3.3.0-0](https://github.com/tmcw/big/compare/v3.1.0...v3.3.0-0) (2017-08-04) | ||
|
||
|
||
### Features | ||
|
||
* command-line interface for generating presentations from markdown ([c5e3aa7](https://github.com/tmcw/big/commit/c5e3aa7)) | ||
|
||
|
||
|
||
<a name="3.1.0"></a> | ||
# [3.1.0](https://github.com/tmcw/big/compare/v2.0.3...v3.1.0) (2017-06-01) | ||
|
||
|
||
### Bug Fixes | ||
|
||
* Remove unused groupEnd argument ([f37e9fd](https://github.com/tmcw/big/commit/f37e9fd)) | ||
|
||
|
||
### Features | ||
|
||
* apply data-bodyclass also on print/jump views ([#80](https://github.com/tmcw/big/issues/80)) ([52e6a31](https://github.com/tmcw/big/commit/52e6a31)) | ||
* Make it beautiful ([fd5d14f](https://github.com/tmcw/big/commit/fd5d14f)) | ||
|
||
|
||
|
||
<a name="3.1.0-alpha.0"></a> | ||
# [3.1.0-alpha.0](https://github.com/tmcw/big/compare/v2.0.3...v3.1.0-alpha.0) (2017-06-01) | ||
|
||
|
||
### Bug Fixes | ||
|
||
* Remove unused groupEnd argument ([f37e9fd](https://github.com/tmcw/big/commit/f37e9fd)) | ||
|
||
|
||
### Features | ||
|
||
* apply data-bodyclass also on print/jump views ([#80](https://github.com/tmcw/big/issues/80)) ([52e6a31](https://github.com/tmcw/big/commit/52e6a31)) | ||
* Make it beautiful ([97c5972](https://github.com/tmcw/big/commit/97c5972)) | ||
|
||
|
||
|
||
## 3.0.0 | ||
|
||
* **modes**: hit t, p, and j for talk, presentation, and jump modes | ||
* **tooling**: now has cli tools to init, serve, and offline-pack presentations | ||
* **breaking change**: background images are now specified with the data-background-image | ||
property, rather than an img tag | ||
* **code style**: now uses normal style, longer, more commented code | ||
|
||
## 2.0.3 | ||
|
||
* Nested `<div>` elements are now allowed in slides. | ||
|
||
## 2.0.2 | ||
|
||
* Notes in `<notes>` are no longer included in the title of slides. | ||
|
||
## 2.0.1 | ||
|
||
* Fixes an issue where clicking on a link in a slide advanced the slide | ||
as well as clicked the link. | ||
|
||
## 2.0.0 | ||
|
||
* [63](https://github.com/tmcw/big/pull/63): a big performance improvement! | ||
Flipping between slides is now much faster. | ||
|
||
## 1.0.0 | ||
|
||
* [50](https://github.com/tmcw/big/issues/50) Fixed IE9 and earlier support by accessing data attributes with `getAttribute` | ||
rather than the `dataset` object. | ||
* [53](https://github.com/tmcw/big/issues/53) **Speakers notes**: adding | ||
notes in a `<notes>` element will show those notes in your developer | ||
console when you visit that slide. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,46 @@ | ||
# Contributor Covenant Code of Conduct | ||
|
||
## Our Pledge | ||
|
||
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. | ||
|
||
## Our Standards | ||
|
||
Examples of behavior that contributes to creating a positive environment include: | ||
|
||
* Using welcoming and inclusive language | ||
* Being respectful of differing viewpoints and experiences | ||
* Gracefully accepting constructive criticism | ||
* Focusing on what is best for the community | ||
* Showing empathy towards other community members | ||
|
||
Examples of unacceptable behavior by participants include: | ||
|
||
* The use of sexualized language or imagery and unwelcome sexual attention or advances | ||
* Trolling, insulting/derogatory comments, and personal or political attacks | ||
* Public or private harassment | ||
* Publishing others' private information, such as a physical or electronic address, without explicit permission | ||
* Other conduct which could reasonably be considered inappropriate in a professional setting | ||
|
||
## Our Responsibilities | ||
|
||
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. | ||
|
||
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. | ||
|
||
## Scope | ||
|
||
This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. | ||
|
||
## Enforcement | ||
|
||
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at tom@macwright.org. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. | ||
|
||
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. | ||
|
||
## Attribution | ||
|
||
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] | ||
|
||
[homepage]: http://contributor-covenant.org | ||
[version]: http://contributor-covenant.org/version/1/4/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
# Blue Oak Model License | ||
|
||
Version 1.0.0 | ||
|
||
## Purpose | ||
|
||
This license gives everyone as much permission to work with | ||
this software as possible, while protecting contributors | ||
from liability. | ||
|
||
## Acceptance | ||
|
||
In order to receive this license, you must agree to its | ||
rules. The rules of this license are both obligations | ||
under that agreement and conditions to your license. | ||
You must not do anything with this software that triggers | ||
a rule that you cannot or will not follow. | ||
|
||
## Copyright | ||
|
||
Each contributor licenses you to do everything with this | ||
software that would otherwise infringe that contributor's | ||
copyright in it. | ||
|
||
## Notices | ||
|
||
You must ensure that everyone who gets a copy of | ||
any part of this software from you, with or without | ||
changes, also gets the text of this license or a link to | ||
<https://blueoakcouncil.org/license/1.0.0>. | ||
|
||
## Excuse | ||
|
||
If anyone notifies you in writing that you have not | ||
complied with [Notices](#notices), you can keep your | ||
license by taking all practical steps to comply within 30 | ||
days after the notice. If you do not do so, your license | ||
ends immediately. | ||
|
||
## Patent | ||
|
||
Each contributor licenses you to do everything with this | ||
software that would otherwise infringe any patent claims | ||
they can license or become able to license. | ||
|
||
## Reliability | ||
|
||
No contributor can revoke this license. | ||
|
||
## No Liability | ||
|
||
***As far as the law allows, this software comes as is, | ||
without any warranty or condition, and no contributor | ||
will be liable to anyone for any damages related to this | ||
software or this license, under any kind of legal claim.*** |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,251 @@ | ||
# Big | ||
|
||
<p align="center"> | ||
<img width="540" src='.github/logo.png' /> | ||
</p> | ||
|
||
<p align="center"> | ||
<strong>Big.</strong> The antidote to your presentation procrastination. | ||
</p> | ||
|
||
A presentation system that works great for creative, hurried people making focused presentations. Stop tweaking fonts and filling slides with text. Big is a configuration-free system that naturally encourages good style. | ||
|
||
- [Features](#features) | ||
- [Quickstart installation: Glitch](#quickstart-installation-glitch) | ||
- [Alternative method: Local installation](#alternative-method-local-installation) | ||
- [Writing a presentation](#writing-a-presentation) | ||
- [Giving presentations](#giving-presentations) | ||
- [Using Big](#using-big) | ||
- [Layouts & Images](#layouts--images) | ||
- [Customizing the aspect ratio](#customizing-the-aspect-ratio) | ||
- [Avoiding line breaks](#avoiding-line-breaks) | ||
- [Auto advancing slides](#auto-advancing-slides) | ||
- [Showing code](#showing-code) | ||
- [Backgrounds & body classes](#backgrounds--body-classes) | ||
- [Themes](#themes) | ||
|
||
## Features | ||
|
||
- The entire system is about 16kb | ||
- Slide layouts based on CSS Grid | ||
- Speakers notes appear in your developer console, which you can put on your other screen | ||
- Themes are just CSS, and easy to make | ||
|
||
## Quickstart installation: Glitch | ||
|
||
The absolute fastest way to get started is with Glitch. Just click the link below, and you’ll get the freshest version of Big, in a Glitch app that you can edit and publish. | ||
|
||
<!-- Remix Button --><a href="https://glitch.com/edit/#!/remix/tmcw-big"> <img src="https://cdn.glitch.com/2bdfb3f8-05ef-4035-a06e-2043962a3a13%2Fremix%402x.png?1513093958726" alt="remix this" height="33"></a> | ||
|
||
With Glitch, your presentation will be online and open source by default. You can download it and continue to work on it offline, or if you want to start offline by default and have the files locally, follow the alternative method below 👇 | ||
|
||
## Alternative method: Local installation | ||
|
||
If you use NPM, the fastest way to get a copy of Big is this way: | ||
|
||
```bash | ||
$ npx degit tmcw/big | ||
``` | ||
|
||
Preview the presentation locally by double-clicking on `index.html`. Create a repository with it to share the presentation with Github Pages, or post the files to any other hosting service. You’ll want to eventually use a real server instead of opening the file - to do that, install `serve` and run it: | ||
|
||
```bash | ||
$ npm install -g serve | ||
$ serve | ||
``` | ||
|
||
## Writing a presentation | ||
|
||
Big presentations are webpages: slides are `div` elements, and any text styling or additional elements are addable by using HTML. The text in each div is sized to fit the screen. A slide can be as simple as: | ||
|
||
```html | ||
<div>Big</div> | ||
``` | ||
|
||
If you want speakers notes - notes that you can see on your laptop screen but aren't shown on the main projector - you can use a `<notes>` element: | ||
|
||
```html | ||
<div> | ||
Citrus | ||
<notes>Aren't oranges, lemons, and limes great?</notes> | ||
</div> | ||
``` | ||
|
||
Open your [developer console](http://debugbrowser.com/), and you'll see your speaker notes in it when you visit that slide! In most browsers, the console is detachable, so you can move it to a different screen or window when you're giving the presentation. | ||
|
||
That's all you need to start writing presentations! | ||
|
||
## Giving presentations | ||
|
||
You can advance slides the usual way, by clicking them. You can also use the left & right arrow keys, and the up and down arrow keys. On touch devices, you can navigate forward by tapping and also navigate forward and backwards by swiping. | ||
|
||
 | ||
|
||
Big also has three modes if you want to quickly jump to a slide, or print a presentation. You can switch between modes by hitting the `t`, `p`, and `j` keys. | ||
|
||
* **t**alk is the default mode. Slides are shown one at a time. | ||
* **p**rint: is useful for print output or as an overview: it'll include | ||
two slides per printed page, and shows speakers notes along with slides | ||
* **j**ump: Shows many slides per page, useful for quickly finding a slide and 'jumping' to it. When you're in jump mode, you can use the arrow keys to quickly select a slide and hit Enter to jump to that slide, or click the | ||
slide you want. | ||
|
||
## Using Big | ||
|
||
Big is designed to be simple, so if you just want to give a [Takahashi](https://en.wikipedia.org/wiki/Takahashi_method) style presentation with just text, you don't need to read any further! But it can also go far beyond the basics. | ||
|
||
### Layouts & Images | ||
|
||
Let's say you want to add some pictures to a presentation. If you just want the slide to _be_ an image, you can just make it the only thing on the slide: | ||
|
||
```html | ||
<div> | ||
<img src='airplane.gif'/> | ||
</div> | ||
``` | ||
|
||
And Big will appropriate size and place the image in the center. | ||
|
||
If you want an image and text, you'll need a little more infrastructure: this is where _layouts_ come in. See, the idea of Big is that it sizes text as big as it can be. This has the effect that if you include something else on a slide, like an image, then it'll be squeezed out by ever-expanding text. So if you want to include an image and some text, you'll need to set some ground rules for how much space each is permitted to take up. Luckily, this also lets us do flexible layouts of image and text - you can choose how they're arranged, and they'll gleefully comply. | ||
|
||
```html | ||
<div | ||
class='layout' | ||
style='grid-template-columns: 1fr;grid-template-rows:75% 25%;'> | ||
<img src='airplane.gif'/> | ||
<div>A longer description!</div> | ||
</div> | ||
``` | ||
|
||
So you'll see that we have two new attributes for this laid-out slide: | ||
|
||
`class='layout'` triggers a few styles from `big.css` that give the slide [grid layout](https://developer.mozilla.org/en-US/docs/Web/CSS/grid), make its subsections [flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox), and tweaks how images work. For all slides that use layout, they'll use the layout class. | ||
|
||
The second bit - the `style` attribute, is where the customization comes in. The MDN documentation for [grid-template-rows](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows) and [grid-template-columns](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns) is where to start if you want to learn this inside & out, but for those that tend to learn from examples, here are some! | ||
|
||
**50% / 50% split columns: picture on the left, text on the right** | ||
|
||
```html | ||
<div class=layout style='grid-template-columns: 50% 50%;'> | ||
<img src='airplane.gif'/> | ||
<div>A longer description!</div> | ||
</div> | ||
``` | ||
|
||
Grids read from left to right, top to bottom, unless you customize that with extra CSS. You'll need to specify at least grid-template-columns or grid-template-rows to divide up a cell: if you specify columns, it'll be divided horizontally, if rows, vertically. | ||
|
||
**75% image on the top, 25% text on the bottom** | ||
|
||
```html | ||
<div class='layout' style='grid-template-rows:75% 25%;'> | ||
<img src='airplane.gif'/> | ||
<div>A longer description!</div> | ||
</div> | ||
``` | ||
|
||
This slide will be laid out vertically, with the image taking up 75% of the vertical space, text 25%. | ||
|
||
***Three rows of a 25% image and 75% text*** | ||
|
||
```html | ||
<div | ||
class=layout | ||
style='grid-template-columns: 25% 75%;grid-template-rows:repeat(3, 30%);'> | ||
<img src='airplane.gif'/> | ||
<div>Yes</div> | ||
<img src='airplane.gif'/> | ||
<div>No</div> | ||
<img src='airplane.gif'/> | ||
<div>Just right, a lot of text goes here.</div> | ||
</div> | ||
``` | ||
|
||
### Customizing the aspect ratio | ||
|
||
To keep presentations uniform across devices, Big keeps the aspect ratio of presentations constant by default: by default, presentations are 4:3 aspect ratio. | ||
|
||
You can customize the aspect ratio by setting a `BIG_ASPECT_RATIO` variable _before_ Big is included on a page: | ||
|
||
```html | ||
<script>BIG_ASPECT_RATIO=2;</script> | ||
<script src='big.js'></script> | ||
``` | ||
|
||
You can also turn this feature off, by setting `BIG_ASPECT_RATIO` to `false`, which will let presentations occupy the aspect ratio of the device they're displayed on: | ||
|
||
```html | ||
<script>BIG_ASPECT_RATIO=false;</script> | ||
<script src='big.js'></script> | ||
``` | ||
|
||
### Avoiding line breaks | ||
|
||
By default, Big will wrap lines of text. Sometimes you don't want this to happen, if you have some text that would look odd wrapped. In this case, you can use the `nowrap` class to keep some text from wrapping. | ||
|
||
```html | ||
<div> | ||
beyond the <code>for</code> loop | ||
<br /> | ||
<small class=nowrap>@tmcw / Tom MacWright</small> | ||
</div> | ||
``` | ||
|
||
### Auto advancing slides | ||
|
||
Sometimes you'll give presentations like [PechaKucha](https://en.wikipedia.org/wiki/PechaKucha) and [Ignite](https://en.wikipedia.org/wiki/Ignite_(event)) involve auto-advancing slides. You can achieve this by adding a `data-time-to-next` attributes to slides: this will cause them to auto-advance after a specific number of seconds: | ||
|
||
```html | ||
<div data-time-to-next=20> | ||
My sales pitch in 20 seconds | ||
</div> | ||
``` | ||
|
||
### Showing code | ||
|
||
There are many ways to do code highlighting in presentations. My personal | ||
philosophy is that you should never show more than 8 lines of code | ||
on a slide, and instead of using traditional semantic highlighting, you should | ||
manually add emphasis to focus points in the code. | ||
|
||
```html | ||
<div> | ||
problem one: make some animals rock | ||
<pre>var animals = <em>['cats', 'dogs']</em>;</pre> | ||
</div> | ||
``` | ||
|
||
```css | ||
pre { | ||
margin:0; | ||
padding:0.2em; | ||
background:#fff; | ||
color:#000; | ||
font-weight:normal; | ||
} | ||
|
||
pre em { | ||
color:#000; | ||
background:yellow; | ||
} | ||
``` | ||
|
||
But if you want traditional code highlighting, you can include [highlight.js](https://highlightjs.org/) to do just that. You'll want to include [the library](https://highlightjs.org/download/), and use `hljs.initHighlightingOnLoad();` like [in their usage instructions](https://highlightjs.org/usage/). | ||
|
||
### Backgrounds & body classes | ||
|
||
You might want to customize the class & style of the body element for a single slide. For example, maybe you want to change the background of the full page. You can do this with two attributes: `data-body-style` and `data-body-class`: | ||
|
||
```html | ||
<div data-body-style="background-image:url(airplane.gif)"> | ||
<div>Slide will have an airplane background</div> | ||
</div> | ||
``` | ||
|
||
### Themes | ||
|
||
Big presentations are hackable, so you can design yours from scratch, or by customizing one of the default themes, but there are also a few default themes so that you can get going with a solid aesthetic right off the bat. | ||
|
||
At the very least, themes are CSS files. You can pick a theme by picking one in the `themes` directory. Bundled with Big are these themes: | ||
|
||
- **dark**: near-black background and near-white text, this one is my go-to for most presentations that rely on underpowered projectors. | ||
- **light**: like dark, but flipped. | ||
- **white**: instead of tastefully off-white and off-black, this theme uses stark, literal black & white colors. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,23 @@ | ||
# Upgrading to Big 4 | ||
|
||
Change for the better. Big 4 is a lot different. | ||
|
||
## No more NPM | ||
|
||
Big used to provide a bunch of utilities: big-compose so you could write presentations in Markdown, big-offline so you could make them work offline, big-init to start presentations, big-serve so you could serve them. I removed all of these. | ||
|
||
**I removed big-compose** because I never used it, and it was never possible to do everything in Markdown, especially not layouts. Big is opinionated software: in particular, my opinions, and those I acquire from smart people along the way. One of those opinions is that HTML’s a pretty good language and if you aren't writing a lot, it’s perfectly usable as a markup language for text. | ||
|
||
**big-offline** was cool, but I recommend using your browser’s “save webpage” feature instead, which produces a more efficient result and you already have in your web browser. I really recommend making your presentations work offline by default, too, by uploading images and keeping all your resources close. | ||
|
||
**big-serve** was just a HTTP server. I don't underestimate the difficulty of setting up an HTML server for a lot of folks, but those folks are better served by double-clicking the `index.html` file, and local servers are really good in other projects, like the `serve` module. | ||
|
||
**big-init** should just be a download. Now it is. | ||
|
||
## No more audio tracks | ||
|
||
It was a really cool feature, but I have a suspicion – and hard data — that almost nobody used it. Big is about minimalism, and niche features cut against that. | ||
|
||
## No more Rubik font | ||
|
||
The San Francisco font included with macOS is really good. Web fonts just rub me the wrong way, and I’ve tried really hard to avoid them in new projects – they’re big binary dependencies that make everything more complex. You can really use web fonts in your presentations, and please do if you find one you love, but it wasn’t a good default. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,121 @@ | ||
html { | ||
height: 100%; | ||
} | ||
|
||
body { | ||
font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, helvetica neue, helvetica, Ubuntu, roboto, noto, segoe ui, arial, sans-serif; | ||
font-weight: 700; | ||
margin: 0; | ||
padding: 0; | ||
} | ||
|
||
h1, | ||
h2, | ||
h3, | ||
p { | ||
margin: 0; | ||
} | ||
|
||
em { | ||
font-style: normal; | ||
} | ||
|
||
.nowrap { | ||
white-space: nowrap; | ||
} | ||
|
||
* { | ||
box-sizing: border-box; | ||
} | ||
|
||
div.slide-container { | ||
background-size: 100%; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
} | ||
|
||
div.slide { | ||
cursor: pointer; | ||
cursor: hand; | ||
} | ||
|
||
div.imageText { | ||
text-shadow: 0 0 5px rgba(0, 0, 0, 0.2); | ||
} | ||
|
||
/* normally not good, but ok in context of full screen directional navigation */ | ||
.talk-mode .slide:focus { | ||
outline: 0; | ||
} | ||
|
||
body.talk-mode { | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
height: 100%; | ||
} | ||
|
||
body.print-mode { | ||
background: #fff; | ||
color: #000; | ||
font-weight: normal; | ||
padding: 0px; | ||
} | ||
|
||
body.print-mode div.sub-container { | ||
padding: 10px 20px; | ||
display: flex; | ||
flex-flow: row wrap; | ||
break-inside: avoid; | ||
} | ||
|
||
ul.notes-list { | ||
display: inline-block; | ||
float: left; | ||
vertical-align: top; | ||
} | ||
|
||
body.print-mode div.slide-container { | ||
border: 1px solid #000; | ||
} | ||
|
||
body.jump-mode { | ||
padding: 10px; | ||
} | ||
|
||
body.jump-mode div.sub-container { | ||
display: inline-block; | ||
vertical-align: top; | ||
padding: 2px; | ||
} | ||
|
||
body.jump-mode div.slide-container { | ||
border: 1px solid rgba(255, 255, 255, 0.2); | ||
cursor: pointer; | ||
} | ||
|
||
body.jump-mode div.slide-container:hover { | ||
border: 1px solid rgba(255, 255, 255, 0.8); | ||
} | ||
|
||
.layout { | ||
display: grid; | ||
} | ||
|
||
.layout div { | ||
display: flex; | ||
align-items: center; | ||
} | ||
|
||
.layout img { | ||
object-fit: contain; | ||
width: 100%; | ||
height: 100%; | ||
} | ||
|
||
div.slide > img:only-child, | ||
div.slide > canvas:only-child, | ||
div.slide > video:only-child { | ||
width: 100%; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,216 @@ | ||
let ASPECT_RATIO = window.BIG_ASPECT_RATIO === undefined ? 1.6 : window.BIG_ASPECT_RATIO; | ||
|
||
function parseHash() { | ||
return parseInt(window.location.hash.substring(1), 10); | ||
} | ||
|
||
function emptyNode(node) { | ||
while (node.hasChildNodes()) node.removeChild(node.lastChild); | ||
} | ||
|
||
function ce(type, className = "") { | ||
return Object.assign(document.createElement(type), { className }); | ||
} | ||
|
||
addEventListener("load", () => { | ||
let slideDivs = Array.from(document.querySelectorAll("body > div")); | ||
let pc = document.body.appendChild(ce("div", "presentation-container")); | ||
slideDivs = slideDivs.map((slide, _i) => { | ||
slide.setAttribute("tabindex", 0); | ||
slide.classList.add("slide"); | ||
let sc = pc.appendChild(ce("div", "slide-container")); | ||
sc.appendChild(slide); | ||
return Object.assign(sc, { | ||
_notes: Array.from(slide.querySelectorAll("notes"), noteElement => { | ||
noteElement.parentNode.removeChild(noteElement); | ||
return noteElement.innerHTML.trim(); | ||
}), | ||
_i | ||
}); | ||
}); | ||
let timeoutInterval, | ||
{ body } = document, | ||
{ | ||
className: initialBodyClass, | ||
style: { cssText: initialBodyStyle } | ||
} = body, | ||
big = (window.big = { | ||
current: -1, | ||
mode: "talk", | ||
length: slideDivs.length, | ||
forward, | ||
reverse, | ||
go | ||
}); | ||
|
||
function forward() { | ||
go(big.current + 1); | ||
} | ||
|
||
function reverse() { | ||
go(big.current - 1); | ||
} | ||
|
||
function go(n, force) { | ||
n = Math.max(0, Math.min(big.length - 1, n)); | ||
if (!force && big.current === n) return; | ||
big.current = n; | ||
let sc = slideDivs[n], | ||
slideDiv = sc.firstChild; | ||
if (sc._notes.length) { | ||
console.group(n); | ||
for (let note of sc._notes) console.log("%c%s", "padding:5px;font-family:serif;font-size:18px;line-height:150%;", note); | ||
console.groupEnd(); | ||
} | ||
for (let slide of slideDivs) slide.style.display = slide._i === n ? "" : "none"; | ||
body.className = `talk-mode ${slideDiv.dataset.bodyClass || ""} ${initialBodyClass}`; | ||
body.style.cssText = `${initialBodyStyle} ${slideDiv.dataset.bodyStyle || ""}`; | ||
window.clearInterval(timeoutInterval); | ||
if (slideDiv.dataset.timeToNext) timeoutInterval = window.setTimeout(forward, parseFloat(slideDiv.dataset.timeToNext) * 1000); | ||
onResize(); | ||
if (window.location.hash !== n) window.location.hash = n; | ||
document.title = slideDiv.textContent; | ||
} | ||
|
||
function resizeTo(sc, width, height) { | ||
let slideDiv = sc.firstChild, | ||
padding = Math.min(width * 0.04), | ||
fontSize = height; | ||
sc.style.width = `${width}px`; | ||
sc.style.height = `${height}px`; | ||
slideDiv.style.padding = `${padding}px`; | ||
if (getComputedStyle(slideDiv).display === "grid") slideDiv.style.height = `${height - padding * 2}px`; | ||
for (let step of [100, 50, 10, 2]) { | ||
for (; fontSize > 0; fontSize -= step) { | ||
slideDiv.style.fontSize = `${fontSize}px`; | ||
if ( | ||
slideDiv.scrollWidth <= width && | ||
slideDiv.offsetHeight <= height && | ||
Array.from(slideDiv.querySelectorAll("div")).every(elem => elem.scrollWidth <= elem.clientWidth && elem.scrollHeight <= elem.clientHeight) | ||
) { | ||
break; | ||
} | ||
} | ||
fontSize += step; | ||
} | ||
} | ||
|
||
function onPrint() { | ||
if (big.mode === "print") return; | ||
body.className = `print-mode ${initialBodyClass}`; | ||
body.style.cssText = initialBodyStyle; | ||
emptyNode(pc); | ||
for (let sc of slideDivs) { | ||
let subContainer = pc.appendChild(ce("div", "sub-container")), | ||
sbc = subContainer.appendChild(ce("div", sc.firstChild.dataset.bodyClass || "")); | ||
sbc.appendChild(sc); | ||
sbc.style.cssText = sc.dataset.bodyStyle || ""; | ||
sc.style.display = "flex"; | ||
resizeTo(sc, 512, 320); | ||
if (sc._notes.length) continue; | ||
let notesUl = subContainer.appendChild(ce("ul", "notes-list")); | ||
for (let note of sc._notes) { | ||
let li = notesUl.appendChild(ce("li")); | ||
li.innerText = note; | ||
} | ||
} | ||
big.mode = "print"; | ||
} | ||
|
||
function onTalk(i) { | ||
if (big.mode === "talk") return; | ||
big.mode = "talk"; | ||
body.className = `talk-mode ${initialBodyClass}`; | ||
emptyNode(pc); | ||
for (let sc of slideDivs) pc.appendChild(sc); | ||
go(i, true); | ||
} | ||
|
||
function onJump() { | ||
if (big.mode === "jump") return; | ||
big.mode = "jump"; | ||
body.className = "jump-mode " + initialBodyClass; | ||
body.style.cssText = initialBodyStyle; | ||
emptyNode(pc); | ||
slideDivs.forEach(sc => { | ||
let subContainer = pc.appendChild(ce("div", "sub-container")); | ||
subContainer.addEventListener("keypress", e => { | ||
if (e.key !== "Enter") return; | ||
subContainer.removeEventListener("click", onClickSlide); | ||
e.stopPropagation(); | ||
e.preventDefault(); | ||
onTalk(sc._i); | ||
}); | ||
let sbc = subContainer.appendChild(ce("div", sc.firstChild.dataset.bodyClass || "")); | ||
sbc.appendChild(sc); | ||
sc.style.display = "flex"; | ||
sbc.style.cssText = sc.dataset.bodyStyle || ""; | ||
resizeTo(sc, 192, 120); | ||
function onClickSlide(e) { | ||
subContainer.removeEventListener("click", onClickSlide); | ||
e.stopPropagation(); | ||
e.preventDefault(); | ||
onTalk(sc._i); | ||
} | ||
subContainer.addEventListener("click", onClickSlide); | ||
}); | ||
} | ||
|
||
function onClick(e) { | ||
if (big.mode !== "talk") return; | ||
if (e.target.tagName !== "A") go((big.current + 1) % big.length); | ||
} | ||
|
||
function onKeyDown(e) { | ||
if (big.mode === "talk") { | ||
switch (e.key) { | ||
case "ArrowLeft": | ||
case "ArrowUp": | ||
case "PageUp": | ||
return reverse(); | ||
case "ArrowRight": | ||
case "ArrowDown": | ||
case "PageDown": | ||
return forward(); | ||
} | ||
} | ||
let m = { p: onPrint, t: onTalk, j: onJump }[e.key]; | ||
if (m) m(big.current); | ||
} | ||
|
||
function onResize() { | ||
if (big.mode !== "talk") return; | ||
let { clientWidth: width, clientHeight: height } = document.documentElement; | ||
if (ASPECT_RATIO !== false) { | ||
if (width / height > ASPECT_RATIO) width = Math.ceil(height * ASPECT_RATIO); | ||
else height = Math.ceil(width / ASPECT_RATIO); | ||
} | ||
resizeTo(slideDivs[big.current], width, height); | ||
} | ||
|
||
window.matchMedia("print").addListener(onPrint); | ||
document.addEventListener("click", onClick); | ||
document.addEventListener("keydown", onKeyDown); | ||
document.addEventListener("touchstart", e => { | ||
if (big.mode !== "talk") return; | ||
let { pageX: startingPageX } = e.changedTouches[0]; | ||
document.addEventListener( | ||
"touchend", | ||
e2 => { | ||
let distanceTraveled = e2.changedTouches[0].pageX - startingPageX; | ||
// Don't navigate if the person didn't swipe by fewer than 4 pixels | ||
if (Math.abs(distanceTraveled) < 4) return; | ||
if (distanceTraveled < 0) forward(); | ||
else reverse(); | ||
}, | ||
{ once: true } | ||
); | ||
}); | ||
addEventListener("hashchange", () => { | ||
if (big.mode === "talk") go(parseHash()); | ||
}); | ||
addEventListener("resize", onResize); | ||
console.log("This is a big presentation. You can: \n\n* press j to jump to a slide\n" + "* press p to see the print view\n* press t to go back to the talk view"); | ||
body.className = `talk-mode ${initialBodyClass}`; | ||
go(parseHash() || big.current); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" /> | ||
<title>Big</title> | ||
<link href="big.css" rel="stylesheet" type="text/css" /> | ||
<script src="big.js"></script> | ||
<style> | ||
body { | ||
background-color: #EDD1B0; | ||
} | ||
</style> | ||
</head> | ||
<body class="light"> | ||
<div> | ||
Your presentation goes here | ||
<notes>Speakers notes go here.</notes> | ||
</div> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
body { | ||
background: #272c32; | ||
color: #fff; | ||
} | ||
|
||
em { | ||
color: #fadb03; | ||
} | ||
|
||
a { | ||
color: #7cbfe5; | ||
text-decoration-skip: ink; | ||
} | ||
|
||
a:hover { | ||
background: #4e5b6f; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
body { | ||
background: #f5f5f5; | ||
color: #34383e; | ||
} | ||
|
||
a { | ||
color: #0889d1; | ||
text-decoration-skip: ink; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
body { | ||
background: #fff; | ||
color: #000; | ||
font-weight: 420; | ||
} | ||
|
||
a { | ||
color: #0889d1; | ||
text-decoration-skip: ink; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
body { | ||
background: #fff; | ||
color: #000; | ||
font-weight: 800; | ||
} | ||
|
||
a { | ||
color: #0889d1; | ||
text-decoration-skip: ink; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,349 @@ | ||
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ | ||
|
||
/* Document | ||
========================================================================== */ | ||
|
||
/** | ||
* 1. Correct the line height in all browsers. | ||
* 2. Prevent adjustments of font size after orientation changes in iOS. | ||
*/ | ||
|
||
html { | ||
line-height: 1.15; /* 1 */ | ||
-webkit-text-size-adjust: 100%; /* 2 */ | ||
} | ||
|
||
/* Sections | ||
========================================================================== */ | ||
|
||
/** | ||
* Remove the margin in all browsers. | ||
*/ | ||
|
||
body { | ||
margin: 0; | ||
} | ||
|
||
/** | ||
* Render the `main` element consistently in IE. | ||
*/ | ||
|
||
main { | ||
display: block; | ||
} | ||
|
||
/** | ||
* Correct the font size and margin on `h1` elements within `section` and | ||
* `article` contexts in Chrome, Firefox, and Safari. | ||
*/ | ||
|
||
h1 { | ||
font-size: 2em; | ||
margin: 0.67em 0; | ||
} | ||
|
||
/* Grouping content | ||
========================================================================== */ | ||
|
||
/** | ||
* 1. Add the correct box sizing in Firefox. | ||
* 2. Show the overflow in Edge and IE. | ||
*/ | ||
|
||
hr { | ||
box-sizing: content-box; /* 1 */ | ||
height: 0; /* 1 */ | ||
overflow: visible; /* 2 */ | ||
} | ||
|
||
/** | ||
* 1. Correct the inheritance and scaling of font size in all browsers. | ||
* 2. Correct the odd `em` font sizing in all browsers. | ||
*/ | ||
|
||
pre { | ||
font-family: monospace, monospace; /* 1 */ | ||
font-size: 1em; /* 2 */ | ||
} | ||
|
||
/* Text-level semantics | ||
========================================================================== */ | ||
|
||
/** | ||
* Remove the gray background on active links in IE 10. | ||
*/ | ||
|
||
a { | ||
background-color: transparent; | ||
} | ||
|
||
/** | ||
* 1. Remove the bottom border in Chrome 57- | ||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. | ||
*/ | ||
|
||
abbr[title] { | ||
border-bottom: none; /* 1 */ | ||
text-decoration: underline; /* 2 */ | ||
text-decoration: underline dotted; /* 2 */ | ||
} | ||
|
||
/** | ||
* Add the correct font weight in Chrome, Edge, and Safari. | ||
*/ | ||
|
||
b, | ||
strong { | ||
font-weight: bolder; | ||
} | ||
|
||
/** | ||
* 1. Correct the inheritance and scaling of font size in all browsers. | ||
* 2. Correct the odd `em` font sizing in all browsers. | ||
*/ | ||
|
||
code, | ||
kbd, | ||
samp { | ||
font-family: monospace, monospace; /* 1 */ | ||
font-size: 1em; /* 2 */ | ||
} | ||
|
||
/** | ||
* Add the correct font size in all browsers. | ||
*/ | ||
|
||
small { | ||
font-size: 80%; | ||
} | ||
|
||
/** | ||
* Prevent `sub` and `sup` elements from affecting the line height in | ||
* all browsers. | ||
*/ | ||
|
||
sub, | ||
sup { | ||
font-size: 75%; | ||
line-height: 0; | ||
position: relative; | ||
vertical-align: baseline; | ||
} | ||
|
||
sub { | ||
bottom: -0.25em; | ||
} | ||
|
||
sup { | ||
top: -0.5em; | ||
} | ||
|
||
/* Embedded content | ||
========================================================================== */ | ||
|
||
/** | ||
* Remove the border on images inside links in IE 10. | ||
*/ | ||
|
||
img { | ||
border-style: none; | ||
} | ||
|
||
/* Forms | ||
========================================================================== */ | ||
|
||
/** | ||
* 1. Change the font styles in all browsers. | ||
* 2. Remove the margin in Firefox and Safari. | ||
*/ | ||
|
||
button, | ||
input, | ||
optgroup, | ||
select, | ||
textarea { | ||
font-family: inherit; /* 1 */ | ||
font-size: 100%; /* 1 */ | ||
line-height: 1.15; /* 1 */ | ||
margin: 0; /* 2 */ | ||
} | ||
|
||
/** | ||
* Show the overflow in IE. | ||
* 1. Show the overflow in Edge. | ||
*/ | ||
|
||
button, | ||
input { /* 1 */ | ||
overflow: visible; | ||
} | ||
|
||
/** | ||
* Remove the inheritance of text transform in Edge, Firefox, and IE. | ||
* 1. Remove the inheritance of text transform in Firefox. | ||
*/ | ||
|
||
button, | ||
select { /* 1 */ | ||
text-transform: none; | ||
} | ||
|
||
/** | ||
* Correct the inability to style clickable types in iOS and Safari. | ||
*/ | ||
|
||
button, | ||
[type="button"], | ||
[type="reset"], | ||
[type="submit"] { | ||
-webkit-appearance: button; | ||
} | ||
|
||
/** | ||
* Remove the inner border and padding in Firefox. | ||
*/ | ||
|
||
button::-moz-focus-inner, | ||
[type="button"]::-moz-focus-inner, | ||
[type="reset"]::-moz-focus-inner, | ||
[type="submit"]::-moz-focus-inner { | ||
border-style: none; | ||
padding: 0; | ||
} | ||
|
||
/** | ||
* Restore the focus styles unset by the previous rule. | ||
*/ | ||
|
||
button:-moz-focusring, | ||
[type="button"]:-moz-focusring, | ||
[type="reset"]:-moz-focusring, | ||
[type="submit"]:-moz-focusring { | ||
outline: 1px dotted ButtonText; | ||
} | ||
|
||
/** | ||
* Correct the padding in Firefox. | ||
*/ | ||
|
||
fieldset { | ||
padding: 0.35em 0.75em 0.625em; | ||
} | ||
|
||
/** | ||
* 1. Correct the text wrapping in Edge and IE. | ||
* 2. Correct the color inheritance from `fieldset` elements in IE. | ||
* 3. Remove the padding so developers are not caught out when they zero out | ||
* `fieldset` elements in all browsers. | ||
*/ | ||
|
||
legend { | ||
box-sizing: border-box; /* 1 */ | ||
color: inherit; /* 2 */ | ||
display: table; /* 1 */ | ||
max-width: 100%; /* 1 */ | ||
padding: 0; /* 3 */ | ||
white-space: normal; /* 1 */ | ||
} | ||
|
||
/** | ||
* Add the correct vertical alignment in Chrome, Firefox, and Opera. | ||
*/ | ||
|
||
progress { | ||
vertical-align: baseline; | ||
} | ||
|
||
/** | ||
* Remove the default vertical scrollbar in IE 10+. | ||
*/ | ||
|
||
textarea { | ||
overflow: auto; | ||
} | ||
|
||
/** | ||
* 1. Add the correct box sizing in IE 10. | ||
* 2. Remove the padding in IE 10. | ||
*/ | ||
|
||
[type="checkbox"], | ||
[type="radio"] { | ||
box-sizing: border-box; /* 1 */ | ||
padding: 0; /* 2 */ | ||
} | ||
|
||
/** | ||
* Correct the cursor style of increment and decrement buttons in Chrome. | ||
*/ | ||
|
||
[type="number"]::-webkit-inner-spin-button, | ||
[type="number"]::-webkit-outer-spin-button { | ||
height: auto; | ||
} | ||
|
||
/** | ||
* 1. Correct the odd appearance in Chrome and Safari. | ||
* 2. Correct the outline style in Safari. | ||
*/ | ||
|
||
[type="search"] { | ||
-webkit-appearance: textfield; /* 1 */ | ||
outline-offset: -2px; /* 2 */ | ||
} | ||
|
||
/** | ||
* Remove the inner padding in Chrome and Safari on macOS. | ||
*/ | ||
|
||
[type="search"]::-webkit-search-decoration { | ||
-webkit-appearance: none; | ||
} | ||
|
||
/** | ||
* 1. Correct the inability to style clickable types in iOS and Safari. | ||
* 2. Change font properties to `inherit` in Safari. | ||
*/ | ||
|
||
::-webkit-file-upload-button { | ||
-webkit-appearance: button; /* 1 */ | ||
font: inherit; /* 2 */ | ||
} | ||
|
||
/* Interactive | ||
========================================================================== */ | ||
|
||
/* | ||
* Add the correct display in Edge, IE 10+, and Firefox. | ||
*/ | ||
|
||
details { | ||
display: block; | ||
} | ||
|
||
/* | ||
* Add the correct display in all browsers. | ||
*/ | ||
|
||
summary { | ||
display: list-item; | ||
} | ||
|
||
/* Misc | ||
========================================================================== */ | ||
|
||
/** | ||
* Add the correct display in IE 10+. | ||
*/ | ||
|
||
template { | ||
display: none; | ||
} | ||
|
||
/** | ||
* Add the correct display in IE 10. | ||
*/ | ||
|
||
[hidden] { | ||
display: none; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
/* fullscreen fun via https://dev.to/lennythedev/css-gotcha-how-to-fill-page-with-a-div-270j*/ | ||
|
||
/* include border and padding in element width and height */ | ||
* { | ||
box-sizing: border-box; | ||
} | ||
|
||
/* override browser default */ | ||
html, | ||
body { | ||
margin: 0; | ||
padding: 0.42rem; | ||
} | ||
|
||
/* use viewport-relative units to cover page fully */ | ||
body { | ||
height: 84vh; | ||
width: 84vw; | ||
background: white; | ||
background-color: white; | ||
color: black; | ||
text-rendering: optimizeLegibility; | ||
-webkit-font-kerning: normal; | ||
font-kerning: normal; | ||
-webkit-text-size-adjust: 100%; | ||
-moz-text-size-adjust: 100%; | ||
-ms-text-size-adjust: 100%; | ||
text-size-adjust: 100%; | ||
-webkit-font-smoothing: antialiased; | ||
-moz-osx-font-smoothing: grayscale; | ||
font-size: 21px; | ||
/* medium.com size! */ | ||
font-style: normal; | ||
font-family: -apple-system, | ||
BlinkMacSystemFont, | ||
Segoe UI, | ||
Helvetica, | ||
Arial, | ||
sans-serif, | ||
Apple Color Emoji, | ||
Segoe UI Emoji; | ||
/* via https://css-tricks.com/three-css-alternatives-to-javascript-navigation/ */ | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,57 @@ | ||
<!DOCTYPE html> | ||
<!-- 🖖🏻🇬🇧🏴🏴☠️🏳️🌈🏳️⚧️ --> | ||
<html lang="en-GB"> | ||
|
||
<head> | ||
<meta charset="utf-8"> | ||
<meta name="viewport" content="width=device-width"> | ||
<!-- Stylesheets below --> | ||
<link rel="stylesheet" type="text/css" href="css/normalize.css"> | ||
<!-- Normalize.css (sic) https://necolas.github.io/normalize.css/ --> | ||
<link rel="stylesheet" type="text/css" href="css/style.css"> | ||
|
||
<!-- Favicon link below, via https://emojitofavicon.com --> | ||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🖖🏻</text></svg>"> | ||
|
||
<title>Apple Development Intensive 2024, 🍎👩🏻💻</title> | ||
<meta name="description" content="Lecture and Workshop slides for the Apple Development Intensive 2024, 🍎👩🏻💻"> | ||
<style> | ||
body { | ||
background-color: #EDD1B0; | ||
} | ||
</style> | ||
</head> | ||
|
||
<body> | ||
<h1>Lecture slides for the <a href="https://github.com/JGL/AppleDevelopmentIntensive2024">Apple Development Intensive 🍎👩🏻💻</a> by <a href=" https://www.joelgethinlewis.com">Joel Gethin Lewis</a>.</h1> | ||
|
||
<p><a href="https://github.com/JGL/AppleDevelopmentIntensive2024">Please see the course GitHub repo and wiki for other information, including information on reading lists, weekly schedule, assessment details and course outcomes</a>. | ||
</p> | ||
|
||
<h2>Slides:</h2> | ||
|
||
<p> | ||
Monday 5th February, 2024: | ||
<ol> | ||
<li>1000-1100: <a href="lecture_01.html">Lecture 1: Introduction to the Intensive</a>.</li> | ||
<li>1100-1230: <a href="workshop_01.html">Workshop 1: Introduction to the Intensive</a>.</li> | ||
|
||
</ol> | ||
</p> | ||
|
||
<h2>Other information:</h2> | ||
|
||
<p>Slides made using <a href="https://github.com/tmcw/big">Big</a> presentation system.</p> | ||
|
||
<p>Background colour of pages chosen as a result of <a href="https://www.cs.cmu.edu/~jbigham/pubs/pdfs/2017/colors.pdf">this paper</a>, thanks to <a href="https://www.beccarose.co.uk">Becca Rose</a> for bringing it to my attention.</p> | ||
|
||
<p>Thanks 🙏🏻 to Abbie Vickress, Laura Knight, Rocio Rey Aloe, Becca Rose, Naho Matsuda, Cheska Lotherington, Véronique Bolhuis, Brenda Brierley, Lukas Alperowitz, Lise Hansen, Filippo Romeo, Herman Ho, Val Toro, Murad Khan, Matthew Plummer Fernandez, Alex Fefegha, Anna Troisi, Ben Kelly, Cathy Hoste, Charlotte Webb, Julia Makivic, Kenneth Lim, Matt Jarvis, Melisa Simpson, Rebecca Fiebrink, Sheldon Brown, Tom Lynch, Eva Wilkinson, Vali Lalioti, Indira Knight, Alice Stewart, Ben Stopher, Mick Grierson, Georgina Capdevila Cano, Alan Warburton, Rebecca Ross, Jaap de Maat, Lauren McCarthy, Kyle McDonald, Jonathan Harris, Zach Lieberman, Jessica Bland, Rick Walker, Graham Bennett, Toby Milner-Gulland, Liam Walsh, Golan Levin, Greg Smith, Mark Lundin, Xiaohan Zhang, Lia, Joshua Goldberg, Rosa Menkman, Daniel Shiffman, Tega Brain, Caitlin Morris, Harri Lewis and Rune Madsen. | ||
</p> | ||
|
||
<p><a href="https://github.com/JGL/AppleDevelopmentIntensive2024">Please see the course GitHub repo and wiki for other information</a>. | ||
</p> | ||
|
||
<p>🖖🏻🇬🇧🏴🏴☠️🏳️🌈🏳️⚧️</p> | ||
</body> | ||
|
||
</html> |
Large diffs are not rendered by default.
Oops, something went wrong.