forked from DPI-WE/base-slides
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
53 additions
and
178 deletions.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,76 +1,89 @@ | ||
| --- | ||
| marp: true | ||
| title: Marp CLI example | ||
| description: Hosting Marp slide deck on the web | ||
| theme: uncover | ||
| title: Estimating and Prioritizing | ||
| description: This lesson explores techniques to estimate and prioritize work. | ||
| transition: fade | ||
| paginate: true | ||
| _paginate: false | ||
| --- | ||
|
|
||
|  | ||
| # Estimating and Prioritizing | ||
|
|
||
| # <!--fit--> Marp CLI example | ||
| --- | ||
|
|
||
| Hosting Marp slide deck on the web | ||
| # Effort vs Impact | ||
|
|
||
| https://github.com/yhatt/marp-cli-example | ||
|  | ||
|
|
||
| <style scoped>a { color: #36c; }</style> | ||
| --- | ||
|
|
||
| <!-- This is presenter note. You can write down notes through HTML comment. --> | ||
| # Estimating Work | ||
| https://www.pointingpoker.com/ | ||
|
|
||
| --- | ||
| - 1 Point: a straightforward task that requires minimal implementation and integration effort. (half workday) | ||
|
|
||
|  | ||
| - 3 Points: involves some additional functionality, but is still relatively simple to implement. (1-2 workdays) | ||
|
|
||
| --- | ||
| - 5 Points: involves moderate effort. (3 workdays) | ||
|
|
||
| <!-- _backgroundColor: "#123" --> | ||
| <!-- _color: "#fff" --> | ||
| - 8 Points: requires a significant amount of effort. (~5 workdays) | ||
|
|
||
| ##### <!--fit--> [Marp CLI](https://github.com/marp-team/marp-cli) + [GitHub Pages](https://github.com/pages) | [Netlify](https://www.netlify.com/) | [Vercel](https://vercel.com/) | ||
| - 13 Points: a more challenging and time-consuming task. (~10 workdays) | ||
|
|
||
| ##### <!--fit--> 👉 The easiest way to host<br />your Marp deck on the web | ||
| --- | ||
|
|
||
| # Pointing Poker | ||
|
|
||
| As a user, I want to be able to search for products by their name, so that I can quickly find the items I'm interested in. | ||
|
|
||
| --- | ||
|
|
||
|  | ||
| # Pointing Poker | ||
|
|
||
| As a user, I want to be able to register with my email and password, so that I can create an account and access the application. | ||
|
|
||
| ## **[GitHub Pages](https://github.com/pages)** | ||
| --- | ||
| # Pointing Poker | ||
|
|
||
| As a user, I want to receive email notifications whenever my order status changes, so that I can stay updated on the progress of my purchases. | ||
|
|
||
| #### Ready to write & host your deck! | ||
| --- | ||
| # Pointing Poker | ||
|
|
||
| [](https://github.com/yhatt/marp-cli-example/generate) | ||
| As a user, I want to be able to upload a profile picture, so that I can personalize my profile. | ||
|
|
||
| --- | ||
| # Pointing Poker | ||
|
|
||
| As a user, I want to be able to create and manage multiple shopping lists, so that I can categorize my desired items for different occasions or stores. | ||
|
|
||
|  | ||
|
|
||
| ## **[Netlify](https://www.netlify.com/)** | ||
| --- | ||
|
|
||
| #### Ready to write & host your deck! | ||
| # Takeaways? | ||
|
|
||
| [](https://app.netlify.com/start/deploy?repository=https://github.com/yhatt/marp-cli-example) | ||
|
|
||
| --- | ||
| # Project Management Triangle | ||
|
|
||
|  | ||
|
|
||
|  | ||
| [source](https://en.wikipedia.org/wiki/Project_management_triangle) | ||
|
|
||
| ## **[Vercel](https://vercel.com/)** | ||
| - It's much easier to decide on a budget/timeline, then pare down an initial feature set based on these constraints. | ||
|
|
||
| #### Ready to write & host your deck! | ||
|
|
||
| [](https://vercel.com/import/project?template=https://github.com/yhatt/marp-cli-example) | ||
|
|
||
| --- | ||
|
|
||
| ### <!--fit--> :ok_hand: | ||
| # Further Reading | ||
|
|
||
| --- | ||
| - [A guide to producing software estimates](https://www.atlassian.com/agile/estimation) | ||
|
|
||
| - [A counterpoint: Why software estimation is a losing game](https://rclayton.silvrback.com/software-estimation-is-a-losing-game) | ||
|
|
||
|  | ||
| I tend to agree with the latter ^ | ||
|
|
||
| ### Created by Yuki Hattori ([@yhatt](https://github.com/yhatt)) | ||
| - [Building software with David Heinemeier Hansson](https://medium.com/computers-are-hard/computers-are-hard-building-software-with-david-heinemeier-hansson-c9025cdf225e) | ||
|
|
||
| https://github.com/yhatt/marp-cli-example | ||
| - [Flaws in Scrum and Agile](https://pandastrike.com/posts/20150304-agile/) |
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,116 +1,10 @@ | ||
| # DPI-WE Slides | ||
| # Estimating and Prioritizing | ||
| This lesson explores techniques to estimate and prioritize work. | ||
|
|
||
| [Slides](https://dpi-we.github.io/estimating-and-prioritizing) | ||
|
|
||
| ## Topics | ||
| - Software Estimation | ||
| - Project Management | ||
|
|
||
| **The good starter example for using [Marp] via [Marp CLI].** | ||
|
|
||
| - Write your slide deck by [Marp] Markdown. | ||
| - Manage the content of slides via Git. (Using [GitPitch](https://github.com/gitpitch/gitpitch) style `PITCHME.md`) | ||
| - Host your deck at GitHub, and publish as webpage with [GitHub Pages], [Netlify], and [Vercel]. | ||
| - Blazingly fast delivery out of the box. [Acquired all 100% Lighthouse scores!](#lighthouse) | ||
|
|
||
| [marp]: https://marp.app/ | ||
| [marp cli]: https://github.com/marp-team/marp-cli | ||
| [github pages]: https://pages.github.com/ | ||
| [netlify]: https://www.netlify.com/ | ||
| [vercel]: https://vercel.com/ | ||
|
|
||
| <p align="center"> | ||
| <a href="https://yhatt.github.io/marp-cli-example"><img src="https://yhatt.github.io/marp-cli-example/og-image.jpg" width="500" /></a> | ||
| </p> | ||
|
|
||
| ## See published slide deck | ||
|
|
||
| - <img src="https://icongr.am/octicons/mark-github.svg" width="24" height="24" valign="bottom" /> **[GitHub Pages]**: https://yhatt.github.io/marp-cli-example | ||
| - <img src="https://icongr.am/simple/netlify.svg?colored" width="24" height="24" valign="bottom" /> **[Netlify]**: https://yhatt-marp-cli-example.netlify.app/ | ||
| - <img src="https://icongr.am/simple/zeit.svg" width="24" height="24" valign="bottom" /> **[Vercel]**: https://marp-cli-example.yhatt.vercel.app/ | ||
|
|
||
| ### Lighthouse | ||
|
|
||
| <p align="center"> | ||
| <img src="https://user-images.githubusercontent.com/3993388/115988866-7cd7fe00-a5f6-11eb-9e51-7a62da998eca.png" width="615" alt="Acquired all 100% Lighthouse scores" /> | ||
| </p> | ||
|
|
||
| ## Usage | ||
|
|
||
| It's surprisingly easy to start publishing your slide deck! | ||
|
|
||
| ### <img src="https://icongr.am/octicons/mark-github.svg" width="24" height="24" valign="bottom" /> [GitHub Pages] | ||
|
|
||
| Create a new _public_ repository based on this repository, from **"Use this template"** button! | ||
|
|
||
| [](https://github.com/yhatt/marp-cli-example/generate) | ||
|
|
||
| We already have [GitHub Actions workflow](.github/workflows/github-pages.yml) to build and deploy automatically when merged to master branch. It's also available to deploy from any branch manually. | ||
|
|
||
| To get started, turn on GitHub Pages in repository's "**Settings** tab → **Pages**" [by setting source as "GitHub Actions"](https://docs.github.com/en/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site#publishing-with-a-custom-github-actions-workflow). | ||
|
|
||
| ### <img src="https://icongr.am/simple/netlify.svg?colored" width="24" height="24" valign="bottom" /> [Netlify] | ||
|
|
||
| Push **"Deploy to netlify"** button. [Netlify] will create your repository based on this example and host website from `master` branch automatically. | ||
|
|
||
| [](https://app.netlify.com/start/deploy?repository=https://github.com/yhatt/marp-cli-example) | ||
|
|
||
| ### <img src="https://icongr.am/simple/zeit.svg" width="24" height="24" valign="bottom" /> [Vercel] | ||
|
|
||
| Push **"Deploy"** button. [Vercel] can choose to create your repository based on this example. | ||
|
|
||
| [](https://vercel.com/import/project?template=https://github.com/yhatt/marp-cli-example) | ||
|
|
||
| > :information_source: To enable the auto-generated open graph image in Vercel, you have to turn on ["Automatically expose System Environment Variables"](https://vercel.com/docs/concepts/projects/environment-variables#system-environment-variables) in your Vercel project dashboard. | ||
| ## How to write | ||
|
|
||
| For Marp slide deck features, please see the documentation of [Marpit Markdown](https://marpit.marp.app/markdown), [the features of Marp Core](https://github.com/marp-team/marp-core#features), and the default example in [`PITCHME.md`](https://raw.githubusercontent.com/yhatt/marp-cli-example/master/PITCHME.md) for . | ||
|
|
||
| You have to install [Node.js](https://nodejs.org/) and run `npm i` at first if you want to write slide deck with [Marp CLI]. | ||
|
|
||
| ### Edit deck | ||
|
|
||
| Just edit **[`PITCHME.md`](./PITCHME.md)**! | ||
|
|
||
| #### Preview deck | ||
|
|
||
| **[Marp for VS Code]** extension is the best partner for writing Marp slide deck with live preview. | ||
|
|
||
| <p align="center"> | ||
| <a href="https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode"> | ||
| <img src="https://raw.githubusercontent.com/marp-team/marp-vscode/master/docs/screenshot.png" width="500" /> | ||
| </a> | ||
| </p> | ||
|
|
||
| **You can try edit and preview on the web now!** Open https://github.dev/yhatt/marp-cli-example/blob/master/PITCHME.md or hit <kbd>.</kbd> key on this repository, and install [Marp for VS Code] extension. | ||
|
|
||
| [marp for vs code]: https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode | ||
|
|
||
| #### Preview via CLI | ||
|
|
||
| ```bash | ||
| npm run start | ||
| ``` | ||
|
|
||
| It will be opened preview window via installed Google Chrome, and track change of `PITCHME.md`. | ||
|
|
||
| ### Assets and themes | ||
|
|
||
| - `assets` directory can put your assets for using in the deck. (e.g. Image resources) | ||
| - `themes` directory can put [custom theme CSS](https://marpit.marp.app/theme-css). To use in the deck, please change `theme` global directive. | ||
|
|
||
| ### Build deck via CLI | ||
|
|
||
| ```bash | ||
| npm run build | ||
| ``` | ||
|
|
||
| The built assets will output to `public` folder. | ||
|
|
||
| #### Build per assets | ||
|
|
||
| ```bash | ||
| npm run deck # Output static HTML to public/index.html | ||
| npm run og-image # Output image for Open Graph to public/og-image.jpg | ||
| ``` | ||
|
|
||
| ## LICENSE | ||
|
|
||
| [WTFPL](/LICENSE) | ||
| ## Highlights |
Binary file not shown.
Binary file not shown.
Oops, something went wrong.