diff --git a/.gitignore b/.gitignore index 330d167..aa82eec 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,164 @@ +# Byte-compiled / optimized / DLL files +__pycache__/ +*.py[cod] +*$py.class + +# C extensions +*.so + +# Distribution / packaging +.Python +build/ +develop-eggs/ +dist/ +downloads/ +eggs/ +.eggs/ +lib/ +lib64/ +parts/ +sdist/ +var/ +wheels/ +share/python-wheels/ +*.egg-info/ +.installed.cfg +*.egg +MANIFEST + +# PyInstaller +# Usually these files are written by a python script from a template +# before PyInstaller builds the exe, so as to inject date/other infos into it. +*.manifest +*.spec + +# Installer logs +pip-log.txt +pip-delete-this-directory.txt + +# Unit test / coverage reports +htmlcov/ +.tox/ +.nox/ +.coverage +.coverage.* +.cache +nosetests.xml +coverage.xml +*.cover +*.py,cover +.hypothesis/ +.pytest_cache/ +cover/ + +# Translations +*.mo +*.pot + +# Django stuff: +*.log +local_settings.py +db.sqlite3 +db.sqlite3-journal + +# Flask stuff: +instance/ +.webassets-cache + +# Scrapy stuff: +.scrapy + +# Sphinx documentation +docs/_build/ + +# PyBuilder +.pybuilder/ +target/ + +# Jupyter Notebook +.ipynb_checkpoints + +# IPython +profile_default/ +ipython_config.py + +# pyenv +# For a library or package, you might want to ignore these files since the code is +# intended to run in multiple environments; otherwise, check them in: +# .python-version + +# pipenv +# According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control. +# However, in case of collaboration, if having platform-specific dependencies or dependencies +# having no cross-platform support, pipenv may install dependencies that don't work, or not +# install all needed dependencies. +#Pipfile.lock + +# poetry +# Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control. +# This is especially recommended for binary packages to ensure reproducibility, and is more +# commonly ignored for libraries. +# https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control +#poetry.lock + +# pdm +# Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control. +#pdm.lock +# pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it +# in version control. +# https://pdm.fming.dev/#use-with-ide +.pdm.toml + +# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm +__pypackages__/ + +# Celery stuff +celerybeat-schedule +celerybeat.pid + +# SageMath parsed files +*.sage.py + +# Environments +.env +.venv +env/ +venv/ +ENV/ +env.bak/ +venv.bak/ + +# Spyder project settings +.spyderproject +.spyproject + +# Rope project settings +.ropeproject + +# mkdocs documentation +/site + +# mypy +.mypy_cache/ +.dmypy.json +dmypy.json + +# Pyre type checker +.pyre/ + +# pytype static type analyzer +.pytype/ + +# Cython debug symbols +cython_debug/ + +# OSX +.DS_Store +*.swp +*~.nib +# Thumbnails +._* + # Xcode # # gitignore contributors: remember to update Global/Xcode.gitignore, Objective-C.gitignore & Swift.gitignore diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md new file mode 100644 index 0000000..76eeb9e --- /dev/null +++ b/CODE_OF_CONDUCT.md @@ -0,0 +1,59 @@ +# Apple Development Intensive 2024 Code of Conduct + +Adapted from: + +## 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. diff --git a/README.md b/README.md index daa95db..9c8567b 100644 --- a/README.md +++ b/README.md @@ -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 . + +[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. + +🖖🏻🇬🇧🏴󠁧󠁢󠁷󠁬󠁳󠁿🏴‍☠️🏳️‍🌈🏳️‍⚧️ diff --git a/docs/big/CHANGELOG.md b/docs/big/CHANGELOG.md new file mode 100644 index 0000000..066f170 --- /dev/null +++ b/docs/big/CHANGELOG.md @@ -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)) + + + + +## [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)) + + + + +# [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)) + + + + +## [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)) + + + + +# [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) + + + + +# [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)) + + + + +## [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)) + + + + +## [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)) + + + + +## [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) + + + + +# [3.2.0](https://github.com/tmcw/big/compare/v3.2.0-0...v3.2.0) (2017-08-04) + + + + +# [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)) + + + + +# [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)) + + + + +# [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)) + + + + +# [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 `
` elements are now allowed in slides. + +## 2.0.2 + +* Notes in `` 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 `` element will show those notes in your developer + console when you visit that slide. diff --git a/docs/big/CODE_OF_CONDUCT.md b/docs/big/CODE_OF_CONDUCT.md new file mode 100644 index 0000000..5152787 --- /dev/null +++ b/docs/big/CODE_OF_CONDUCT.md @@ -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/ diff --git a/docs/big/LICENSE.md b/docs/big/LICENSE.md new file mode 100644 index 0000000..c5402b9 --- /dev/null +++ b/docs/big/LICENSE.md @@ -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 +. + +## 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.*** diff --git a/docs/big/README.md b/docs/big/README.md new file mode 100644 index 0000000..4567ed6 --- /dev/null +++ b/docs/big/README.md @@ -0,0 +1,251 @@ +# Big + +

+ +

+ +

+ Big. The antidote to your presentation procrastination. +

+ +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 this + +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 +
Big
+``` + +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 `` element: + +```html +
+ Citrus + Aren't oranges, lemons, and limes great? +
+``` + +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. + +![](./.github/big-modes.png) + +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 +
+ +
+``` + +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 +
+ +
A longer description!
+
+``` + +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 +
+ +
A longer description!
+
+``` + +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 +
+ +
A longer description!
+
+``` + +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 +
+ +
Yes
+ +
No
+ +
Just right, a lot of text goes here.
+
+``` + +### 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 + + +``` + +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 + + +``` + +### 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 +
+ beyond the for loop +
+ @tmcw / Tom MacWright +
+``` + +### 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 +
+ My sales pitch in 20 seconds +
+``` + +### 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 +
+ problem one: make some animals rock + 
var animals = ['cats', 'dogs'];
+
+``` + +```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 +
+
Slide will have an airplane background
+
+``` + +### 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. diff --git a/docs/big/UPGRADING.md b/docs/big/UPGRADING.md new file mode 100644 index 0000000..604eb65 --- /dev/null +++ b/docs/big/UPGRADING.md @@ -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. \ No newline at end of file diff --git a/docs/big/big.css b/docs/big/big.css new file mode 100644 index 0000000..1c14cee --- /dev/null +++ b/docs/big/big.css @@ -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%; +} diff --git a/docs/big/big.js b/docs/big/big.js new file mode 100644 index 0000000..f68d2c0 --- /dev/null +++ b/docs/big/big.js @@ -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); +}); diff --git a/docs/big/index.html b/docs/big/index.html new file mode 100644 index 0000000..b6203cc --- /dev/null +++ b/docs/big/index.html @@ -0,0 +1,21 @@ + + + + + + Big + + + + + +
+ Your presentation goes here + Speakers notes go here. +
+ + diff --git a/docs/big/themes/dark.css b/docs/big/themes/dark.css new file mode 100644 index 0000000..d2a02f6 --- /dev/null +++ b/docs/big/themes/dark.css @@ -0,0 +1,17 @@ +body { + background: #272c32; + color: #fff; +} + +em { + color: #fadb03; +} + +a { + color: #7cbfe5; + text-decoration-skip: ink; +} + +a:hover { + background: #4e5b6f; +} diff --git a/docs/big/themes/light.css b/docs/big/themes/light.css new file mode 100644 index 0000000..b2de9ba --- /dev/null +++ b/docs/big/themes/light.css @@ -0,0 +1,9 @@ +body { + background: #f5f5f5; + color: #34383e; +} + +a { + color: #0889d1; + text-decoration-skip: ink; +} diff --git a/docs/big/themes/lightWhite.css b/docs/big/themes/lightWhite.css new file mode 100644 index 0000000..0d0a483 --- /dev/null +++ b/docs/big/themes/lightWhite.css @@ -0,0 +1,10 @@ +body { + background: #fff; + color: #000; + font-weight: 420; +} + +a { + color: #0889d1; + text-decoration-skip: ink; +} diff --git a/docs/big/themes/white.css b/docs/big/themes/white.css new file mode 100644 index 0000000..89aa1b0 --- /dev/null +++ b/docs/big/themes/white.css @@ -0,0 +1,10 @@ +body { + background: #fff; + color: #000; + font-weight: 800; +} + +a { + color: #0889d1; + text-decoration-skip: ink; +} diff --git a/docs/css/normalize.css b/docs/css/normalize.css new file mode 100644 index 0000000..192eb9c --- /dev/null +++ b/docs/css/normalize.css @@ -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; +} diff --git a/docs/css/style.css b/docs/css/style.css new file mode 100644 index 0000000..d96a914 --- /dev/null +++ b/docs/css/style.css @@ -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/ */ +} diff --git a/docs/images/01Borucki_sanger.jpg b/docs/images/01Borucki_sanger.jpg new file mode 100644 index 0000000..b2ae9ba Binary files /dev/null and b/docs/images/01Borucki_sanger.jpg differ diff --git a/docs/images/AnneGallowayQuoteViaSuperFlux.jpg b/docs/images/AnneGallowayQuoteViaSuperFlux.jpg new file mode 100644 index 0000000..d3a6076 Binary files /dev/null and b/docs/images/AnneGallowayQuoteViaSuperFlux.jpg differ diff --git a/docs/images/Borges_1921.jpg b/docs/images/Borges_1921.jpg new file mode 100644 index 0000000..0de3fbd Binary files /dev/null and b/docs/images/Borges_1921.jpg differ diff --git a/docs/images/CassieRobinsonThoughts.jpg b/docs/images/CassieRobinsonThoughts.jpg new file mode 100755 index 0000000..6f74546 Binary files /dev/null and b/docs/images/CassieRobinsonThoughts.jpg differ diff --git a/docs/images/ChuckWendigMagicSkeleton.png b/docs/images/ChuckWendigMagicSkeleton.png new file mode 100755 index 0000000..f03d4d8 Binary files /dev/null and b/docs/images/ChuckWendigMagicSkeleton.png differ diff --git a/docs/images/CornellBox.jpg b/docs/images/CornellBox.jpg new file mode 100644 index 0000000..86126f9 Binary files /dev/null and b/docs/images/CornellBox.jpg differ diff --git a/docs/images/DhiruThadaniDesigningForPedestriansNotVehicles.png b/docs/images/DhiruThadaniDesigningForPedestriansNotVehicles.png new file mode 100644 index 0000000..184884b Binary files /dev/null and b/docs/images/DhiruThadaniDesigningForPedestriansNotVehicles.png differ diff --git a/docs/images/Hankycode.jpg b/docs/images/Hankycode.jpg new file mode 100644 index 0000000..13502c3 Binary files /dev/null and b/docs/images/Hankycode.jpg differ diff --git a/docs/images/HarvestJulianOliver.jpg b/docs/images/HarvestJulianOliver.jpg new file mode 100644 index 0000000..2073c8f Binary files /dev/null and b/docs/images/HarvestJulianOliver.jpg differ diff --git a/docs/images/HyperobjectPaula_Dawson.jpg b/docs/images/HyperobjectPaula_Dawson.jpg new file mode 100644 index 0000000..237860d Binary files /dev/null and b/docs/images/HyperobjectPaula_Dawson.jpg differ diff --git a/docs/images/JimCampbellFormula_for_computer_art.jpg b/docs/images/JimCampbellFormula_for_computer_art.jpg new file mode 100755 index 0000000..fc74ccb Binary files /dev/null and b/docs/images/JimCampbellFormula_for_computer_art.jpg differ diff --git a/docs/images/KenIsaacs.png b/docs/images/KenIsaacs.png new file mode 100755 index 0000000..4d7846b Binary files /dev/null and b/docs/images/KenIsaacs.png differ diff --git a/docs/images/Lapping.JPG b/docs/images/Lapping.JPG new file mode 100644 index 0000000..f1acdbe Binary files /dev/null and b/docs/images/Lapping.JPG differ diff --git a/docs/images/Months.png b/docs/images/Months.png new file mode 100644 index 0000000..afe6662 Binary files /dev/null and b/docs/images/Months.png differ diff --git a/docs/images/PointToTesseract.gif b/docs/images/PointToTesseract.gif new file mode 100644 index 0000000..7acf47b Binary files /dev/null and b/docs/images/PointToTesseract.gif differ diff --git a/docs/images/RotatingThingsDhiruThadani.jpg b/docs/images/RotatingThingsDhiruThadani.jpg new file mode 100644 index 0000000..474c7d3 Binary files /dev/null and b/docs/images/RotatingThingsDhiruThadani.jpg differ diff --git a/docs/images/Rubber_duck_assisting_with_debugging.jpg b/docs/images/Rubber_duck_assisting_with_debugging.jpg new file mode 100644 index 0000000..b2d98da Binary files /dev/null and b/docs/images/Rubber_duck_assisting_with_debugging.jpg differ diff --git a/docs/images/SisterCoritaKentsRulesForArtCollege.jpg b/docs/images/SisterCoritaKentsRulesForArtCollege.jpg new file mode 100755 index 0000000..dbd3dbe Binary files /dev/null and b/docs/images/SisterCoritaKentsRulesForArtCollege.jpg differ diff --git a/docs/images/SusanWendell.jpg b/docs/images/SusanWendell.jpg new file mode 100755 index 0000000..4fbfcf3 Binary files /dev/null and b/docs/images/SusanWendell.jpg differ diff --git a/docs/images/WillliamGibsonByGonzoBonzo.jpg b/docs/images/WillliamGibsonByGonzoBonzo.jpg new file mode 100644 index 0000000..b309411 Binary files /dev/null and b/docs/images/WillliamGibsonByGonzoBonzo.jpg differ diff --git a/docs/images/YohjiYamamoto.jpg b/docs/images/YohjiYamamoto.jpg new file mode 100755 index 0000000..a963bc2 Binary files /dev/null and b/docs/images/YohjiYamamoto.jpg differ diff --git a/docs/images/_2010-10-22_DC_MG_8487.jpg b/docs/images/_2010-10-22_DC_MG_8487.jpg new file mode 100644 index 0000000..0178329 Binary files /dev/null and b/docs/images/_2010-10-22_DC_MG_8487.jpg differ diff --git a/docs/images/airplane.gif b/docs/images/airplane.gif new file mode 100644 index 0000000..69f882d Binary files /dev/null and b/docs/images/airplane.gif differ diff --git a/docs/images/autumn-halloween-eerie-background-wallpapers-161690.jpg b/docs/images/autumn-halloween-eerie-background-wallpapers-161690.jpg new file mode 100644 index 0000000..8ff1831 Binary files /dev/null and b/docs/images/autumn-halloween-eerie-background-wallpapers-161690.jpg differ diff --git a/docs/images/bird-vision.jpg b/docs/images/bird-vision.jpg new file mode 100644 index 0000000..5877d82 Binary files /dev/null and b/docs/images/bird-vision.jpg differ diff --git a/docs/images/birdVisionByIliaSolovyovAndKlausSchulten.jpg b/docs/images/birdVisionByIliaSolovyovAndKlausSchulten.jpg new file mode 100644 index 0000000..5877d82 Binary files /dev/null and b/docs/images/birdVisionByIliaSolovyovAndKlausSchulten.jpg differ diff --git a/docs/images/davidBowieQuote.jpg b/docs/images/davidBowieQuote.jpg new file mode 100755 index 0000000..74b534a Binary files /dev/null and b/docs/images/davidBowieQuote.jpg differ diff --git a/docs/images/designingForPedestriansNotVehiclesByDhiruThadani.png b/docs/images/designingForPedestriansNotVehiclesByDhiruThadani.png new file mode 100644 index 0000000..184884b Binary files /dev/null and b/docs/images/designingForPedestriansNotVehiclesByDhiruThadani.png differ diff --git a/docs/images/dory.jpg b/docs/images/dory.jpg new file mode 100644 index 0000000..b8e607c Binary files /dev/null and b/docs/images/dory.jpg differ diff --git a/docs/images/harvestByJulianOliver.jpg b/docs/images/harvestByJulianOliver.jpg new file mode 100644 index 0000000..2073c8f Binary files /dev/null and b/docs/images/harvestByJulianOliver.jpg differ diff --git a/docs/images/jarmuschquote.jpg b/docs/images/jarmuschquote.jpg new file mode 100755 index 0000000..1243b21 Binary files /dev/null and b/docs/images/jarmuschquote.jpg differ diff --git a/docs/images/jobs.png b/docs/images/jobs.png new file mode 100755 index 0000000..6316bc6 Binary files /dev/null and b/docs/images/jobs.png differ diff --git a/docs/images/pace_layering.jpg b/docs/images/pace_layering.jpg new file mode 100644 index 0000000..15bed74 Binary files /dev/null and b/docs/images/pace_layering.jpg differ diff --git a/docs/images/paperPrototyping.jpg b/docs/images/paperPrototyping.jpg new file mode 100644 index 0000000..1a063ba Binary files /dev/null and b/docs/images/paperPrototyping.jpg differ diff --git a/docs/images/pedagogy-andragogy.png b/docs/images/pedagogy-andragogy.png new file mode 100755 index 0000000..d529843 Binary files /dev/null and b/docs/images/pedagogy-andragogy.png differ diff --git a/docs/images/russell.jpg b/docs/images/russell.jpg new file mode 100644 index 0000000..acae3e4 Binary files /dev/null and b/docs/images/russell.jpg differ diff --git a/docs/images/skateBoardNotCar.PNG b/docs/images/skateBoardNotCar.PNG new file mode 100755 index 0000000..82f4f4b Binary files /dev/null and b/docs/images/skateBoardNotCar.PNG differ diff --git a/docs/images/spaceFilling.gif b/docs/images/spaceFilling.gif new file mode 100644 index 0000000..c838c5a Binary files /dev/null and b/docs/images/spaceFilling.gif differ diff --git a/docs/images/tentacularBySuperFlux.jpg b/docs/images/tentacularBySuperFlux.jpg new file mode 100644 index 0000000..9ba8200 Binary files /dev/null and b/docs/images/tentacularBySuperFlux.jpg differ diff --git a/docs/images/vaneyckplaygrounds.jpg b/docs/images/vaneyckplaygrounds.jpg new file mode 100644 index 0000000..cfa4061 Binary files /dev/null and b/docs/images/vaneyckplaygrounds.jpg differ diff --git "a/docs/images/veraMolnarByFran\303\247oisMolnar.jpg" "b/docs/images/veraMolnarByFran\303\247oisMolnar.jpg" new file mode 100644 index 0000000..35ba2df Binary files /dev/null and "b/docs/images/veraMolnarByFran\303\247oisMolnar.jpg" differ diff --git a/docs/index.html b/docs/index.html new file mode 100644 index 0000000..80dc2e3 --- /dev/null +++ b/docs/index.html @@ -0,0 +1,57 @@ + + + + + + + + + + + + + + + + Apple Development Intensive 2024, 🍎👩🏻‍💻 + + + + + +

Lecture slides for the Apple Development Intensive 🍎👩🏻‍💻 by Joel Gethin Lewis.

+ +

Please see the course GitHub repo and wiki for other information, including information on reading lists, weekly schedule, assessment details and course outcomes. +

+ +

Slides:

+ +

+ Monday 5th February, 2024: +

    +
  1. 1000-1100: Lecture 1: Introduction to the Intensive.
    2. +
  2. 1100-1230: Workshop 1: Introduction to the Intensive.
    3. + +
+

+ +

Other information:

+ +

Slides made using Big presentation system.

+ +

Background colour of pages chosen as a result of this paper, thanks to Becca Rose for bringing it to my attention.

+ +

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. +

+ +

Please see the course GitHub repo and wiki for other information. +

+ +

🖖🏻🇬🇧🏴󠁧󠁢󠁷󠁬󠁳󠁿🏴‍☠️🏳️‍🌈🏳️‍⚧️

+ + + diff --git a/docs/lecture_01.html b/docs/lecture_01.html new file mode 100644 index 0000000..2371425 --- /dev/null +++ b/docs/lecture_01.html @@ -0,0 +1,261 @@ + + + + + + + Apple Development Intensive 2024, 🍎👩🏻‍💻: Lecture 1: Introduction + + + + + + + + + + + + + + + +
Apple Development Intensive 2024, 🍎👩🏻‍💻: Lecture 1: Introduction.
Back to slide index.
+
+ 👋🏻 Hi! I'm Joel. My pronouns are he/him. I'm 43 and I live in London near Epping Forest with my fiancée and one cat. +
+
+ Welcome to the Creative Computing Institute! +
+
+ Welcome to the Apple Development Intensive 🍎👩🏻‍💻! +
+
This is a brand new course, so I'd love to hear all your feedback - please please please DM me on Instagram with your thoughts, or email me, via my website. I'm particularly looking out for good YouTube channels, so please share those if you find them.
+
By the end of this lecture, we'll have learnt about: +
    +
  • How to confirm your attendance in class by using the Seats Mobile App.
    • +
  • Introduction to the course and each other via the Diploma homepage, GitHub readme.md and the GitHub wiki.
    • +
  • How to make use of the Disability services at CCI.
    • +
  • How to make use of the Library services at CCI.
    • +
  • How you can get support around the cost of living crisis.
    • +
  • Selection of course representatives.
    • +
  • 10 thoughts for the Future.
    • +
  • My expectations of you through this year.
    • +
  • Tutorials - every Monday morning.
    • +
  • Important methods for succeeding on this course (and in general)
    • +
  • My background.
    • +
  • What is Creative Computing?
    • +
  • What are we going to learn?
    • +
  • Other coding resources.
    • +
  • Some situating yourself in the world resources.
    • +
  • Brain exploding resources.
    • +
  • What are we going to make?
    • +
  • Homework!
    • +
+
+
+ First, are you all on the CCI Slack? If so, let's move on to confirming your attendance in this class! This will be your responsibility to do in every class that you attend. If you miss classes, you will be contacted by the CCI admin team. This is important not just for your learning, but most importantly for your welfare. +
    +
  1. Download the Seats Mobile app from the iOS app store.
    2. +
  2. Login with your UAL ID.
    3. +
  3. Say yes to all the permission requests - notifications, Bluetooth (make sure it's turned on) and location.
    4. +
  4. Then you should be able to simply check in.
    5. +
  5. If you get stuck, message me on Slack for Student Guide or a video guide.
    6. +
+
+
+

Next, let's go around the room and introduce ourselves, with how you like to be addressed, how you are feeling today and which BA you are on at UAL.

+

+ Let's take a look at the + Diploma homepage, GitHub readme.md and finally the GitHub wiki. + Please send me your GitHub ID's on Slack and I'll add you to the GitHub, so that you can edit your own introduction. Don't forget to find your Wu-Tang name! I'll demonstrate how to do that now. +

+
+
+ How to make use of the Disability services at CCI. You'll have already seen this on the GitHub readme.md Don't wait until to your Masters to get support like I did. Support is available - make use of it, you'll be glad you did. Our main contact for the Apple Diploma is Becky Keen: b.keen@arts.ac.uk. +
+
+ How to make use of the Library services at CCI. You'll have already seen this on the GitHub readme.md - but I just wanted to say that Benelia is amazing! Make use of the library - you'll be glad you did. She's provided an introduction presentation, let's go through it now. +
+
+ How you can get support around the cost of living crisis - the following article was recently posted by UAL management. If you are finding it tough, financially, physically, mentally or psychically, please don't hesitate to get in contact with me directly or the UAL student advice service. They are great. The sooner you ask, the more support we can give. Don't suffer in silence. London can be a lonely place. The hardship fund is something I'd recommend applying to if you even think you might need extra support. +
+
+ Are any of you interested in becoming the course rep? We must recruit two as by 11th October 2023! Who's interested? Slack me if you are - great for your CV. No voting, just volunteering. +
+
+ As a break, a presentation I gave recently on 10 thoughts for the future. +
+
My expectations of you through this year: +
    +
  • I expect you to be in person at CCI on the days that you have lectures - Tuesdays, Thursdays and Fridays.
    • +
  • Make use of the other resources here at CCI. The technicians, the researchers the other lecturers.
    • +
  • I expect you to be checking the CCI Slack at least once every day (apart from weekends). Download the iOS Slack app. Right now if you haven't already.
    • +
  • In terms of what you are going to make - by the end of this year I expect you to have created a pair of apps on the app store - one in a team, the other on your own. This will be real apps! I'm excited and I hope you are too.
    • +
+
+
Tutorials - every Monday morning. Tutorials are every Monday morning from 1030-1300 on the CCI Slack. They are 20 minutes long and can be about anything you like - the course, how you are, challenges you are having, ambitions, career advice, music selections. Whatever you like. I've got over 20 years of experience doing interesting things with computers, so make use of that! Let's look at the schedule for next Monday and the one after.
+
Important methods for succeeding on this course (and in general)
+
+
Some things to keep in mind: +
    +
  1. 🐟 Dory
    2. +
  2. 🛹 Henrick Kniberg on making skateboards
    3. +
  3. ⛑ Cassie Robinson's thoughts
    4. +
  4. 💀 Chuck Wendig on being a magic skeleton
    5. +
  5. 🌊 David Bowie on being out of your depth
    6. +
  6. 📸 Yohji Yamamoto on copying
    7. +
  7. 🐌 On going slow
    8. +
  8. 🙉 Susan Wendell on hearing disabled people
    9. +
  9. 🦆 A rubber duck and 🪱🍎 being a worm inside Apple
    10. +
+
+
+
+ +

What does Dory do? This is the most important thing in creative coding (and life).

+
+
+ +
+ Henrick Kniberg on how to make a car. In other words, if you want to make a car, make a skateboard, then a scooter, then a bicycle, then a motorbike and THEN a car. I want you to make lots of skateboards. +
+
+
+ +

Cassie Robinson's thoughts on what to think about when you make something.

+
+
+ +
Chuck Wendig on what to remember.
+
+
+ +
Just a little out of your depth is the right place to be.
+
+
+ +
Yohji Yamamoto is right. Copy what you love!
+
+
+ +
Just try. As soon as you try you are way ahead of most other people.
+
+
+ +
Susan Wendell wrote powerfully about disability and feminism. What explosion of knowledge could you make with your life?
+
+
+ +
Rubber duck debugging is a very powerful technique.
+
+
To help you in this, I've brought you your very own worm (just as good as a duck to speak to (-;) in an Apple. I want you to be like this! I want you to burrow into the Apple ecosystem and make new, beautiful, caring and playful apps that you want and you want to make for other groups that are important to you. Who might those be?
+
My Background
+
🏴󠁧󠁢󠁷󠁬󠁳󠁿 Wales and being bored.
+ +
✨ Imperial and Star Wars.
+
⏰ Royal College of Art and being earlylate.
+
🇮🇹 Fabrica and not starving.
+ +
📖 Hellicar&Lewis and open source.
+
🧘🏻‍♀️ Teaching and psychic load and meditation.
+
👯‍♀️ Universal Everything and people not projects.
+ +
What you are we going to learn in this next year?
+
We are going to learn about Creative Computing - a blend of Computational Thinking and Creative Coding.
+
What is Computational Thinking?
+
+
    +
  • To learn how see problems at many levels (abstraction), break down problems (decomposition), find the order in them (pattern recognition), make solutions using a series of steps (algorithms) and realise that you might be able to use that solution in lots of areas (generalisation).
    • +
  • Most of all, to learn how to be autodidacts.
    • +
  • First task: what is an autodidact?
    • +
+
+
Look it up! What did you find?
+
What is Creative Coding?
+
I believe all coding is creative, as all life is creative. Specifically, creative coding is about blending creative techniques with software engineering. I want you to learn how to write code but also how you could use computing to change your practice. You can make lots of earth credits writing software, but I'm much more interested in giving you the tools to change yourself, your practice and the world.
+
Next, a really important diagram.
+
+ +
Jim Campbell's formula for Computer Art. Realise that you can use things without understanding every aspect of them. All that computers do is process inputs into outputs. That's it.
+
+
But what are we going to learn?
+
+
We are going to learn Swift, which is one of the most top paying programming languages in the world as well as audience of over 1.5 billion devices. But it isn't about the money, it's about the impact. I want you to realise that your apps have just as much of a right to be on the home + screen as anyone else's. Also, I have a feeling that the Apple Glasses are coming. You are all going to be in a superb position to make the first great apps for that device when it arrives.
+
+
+ Other coding resources: + +
+
Some situating yourself in the world resources:
+
+ We are in a stressful time at the moment. Here are some resources for situating yourself in the world, and how to keep going, set up a studio (if you want) and what you (maybe) should be doing: + +
+
+ Some brain exploding resources: + +
+
What are we going to make?
+
You are going to make two apps, a caring app in a group in Product One and a playful app on your own in Product Two (with help from me all along the way). You are also going to make your own ML model in ML Two. BTW, the idea of the playful and caring approach comes from this amazing presentation from David Graeber. More about him in a moment.
+
+ For inspiration for the things you can make on Apple platforms, let's take a look at the Apple Design Awards 2023 winners and finalists. Lots of behind the scenes articles at the bottom of that page too. +
+
+

My aim is to have our final show in the Apple Headquarters in Battersea! I'm working on that as I speak. Would you like to see what students presented there last year?

+
+ + +
+
+ Homework: +
    +
  1. Install Xcode on your computers.
    2. +
  2. Install Apple Books on your computers and iPhones and get all the textbooks.
    3. +
  3. Sign up to GitHub and message me your ID's on Slack.
    4. +
  4. Once I've acknowledged that, you'll be able to complete filling out your part of the wiki introductions page - so send me your GitHub IDs as soon as possible.
    5. +
  5. Sign up to the Apple Authorised Training Centre evaluation system with your UAL emails.
    6. +
  6. Send me your Apple ID's so I can add you to our iOS development team at CCI.
    7. +
  7. Read and watch all of The Steve Jobs archive
    8. +
  8. Watch the David Graeber play and care video before Product One on Friday!
    9. +
  9. A reminder: your next lecture is on Thursday morning at 0930 in room PR_B501-03 with Xiowan-Yi on Machine Learning. Be nice!
    10. +
  10. See you this Friday, right here, at 0930.
    11. +
+
+
+ Thanks!
Back to slide index. +
+ + +