Skip to content

Commit

Permalink
docs: simplify reading experience
Browse files Browse the repository at this point in the history 
- move detail blocks into 1 faq block
- remove extra headers
- make guiding gifs collapsed by default to make it easier on the eyes and less motion unless it is helpful to the reader
- added tools used for tutorial gifs
- added instructions (gif) on how to use efficiently across tabs
  • Loading branch information
@aretecode
aretecode committed Jul 19, 2021
1 parent 1ed6aaa commit d6f03bf
Showing 1 changed file with 36 additions and 43 deletions.
79 changes: 36 additions & 43 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
# System design template: excalidraw (emoji edition)
# System design template: excalidraw - `emoji edition`

> Rough shapes to do rapid system design in front-end, full-stack, back-end, distributed, and product settings.
<details open><summary>Preview</summary>
Expand All @@ -12,7 +13,6 @@
</ol>
</details>


## Usage

### [1. Download]
Expand All @@ -22,76 +22,69 @@
gh repo clone aretecode/system-design-templates-excalidraw && cd system-design-templates-excalidraw/src && ((open .) || (open `pwd`))
```

<details open><summary><strong>Command execution gif</strong></summary>

<details><summary><strong>See in action</strong></summary>

![system-design-template-aretecode--how-to-download](https://user-images.githubusercontent.com/4022631/126106274-4e416beb-9bd9-4c76-92e4-d0c33a145245.gif)
_clones repo, cd to cloned dir, and opens in finder/explorer._

</details>



<details><summary><i>Other ways to download</i></a></summary>

<h5>wget</h5>
<pre><code class="lang-bash">wget -O "system-design-template-emoji.excalidrawlib" "https://raw.githubusercontent.com/aretecode/system-design-templates-excalidraw/main/src/system-design-template-emoji.excalidrawlib"
</code></pre>

<h5>Save file</h5>
<ol>
<li>Open the <a href="https://github.com/aretecode/system-design-templates-excalidraw/raw/main/src/system-design-template-emoji.excalidrawlib">raw library file</a></li>
<li>Press <a href="https://support.google.com/chrome/answer/95759?hl=en&amp;co=GENIE.Platform%3DDesktop"><code>Command-S</code> (<em><code>[Cmd ⌘]</code> + <code>[s]</code> on osx, <code>Ctrl+S</code> on windows</em>) to save the file</a>.</li>
<li>Append <code>.excalidrawlib</code> extension to the file name <strong>and</strong> change format from <code>txt</code> to <code>all files</code>.</li>
<li>Click save in the save-as modal.</li>
</ol>

<hr />

</details>

###
### [2. Use in excalidraw]
[2. Use in excalidraw]: #-use-in-excalidraw

<details><summary><strong>Steps in a gif</strong></summary>
<details><summary><strong>See how to</strong></summary>

![system-design-template-aretecode--how-to-import-to-excalidraw](https://user-images.githubusercontent.com/4022631/126106181-d37baa44-105f-4253-8fea-3d5b88fa22c4.gif)

</details>

<details><summary><i>Steps in text</i></summary>
## More

<details>
<summary><u><i>How to customize?</i></u> <a href="#-tips-faq--customization">🔗<a></summary>
<p><img src="https://user-images.githubusercontent.com/4022631/126106291-eb966e66-6ee2-4abb-9f8c-e7649d9e03da.gif" alt="system-design-template-aretecode-excalidraw--how-to-customize-and-use-tips" /></p>
</details>
<details>
<summary><u><i>There are so many icons, how do you use this in a real world setting?</i></u> <a href="#-tips-faq--too-big">🔗<a></summary>
<p>Open 2 tabs, 1 you can drop in all the icons, then copy into the other tab, delete the unused, then re-arrange as-needed.</p>
<p><img src="https://user-images.githubusercontent.com/4022631/126108386-952c197f-46c0-4dee-b7ca-bb10d71122af.gif" alt="system-design-template-aretecode--how-to-use-across-tabs-quickly" /></p>
</details>
<details>
<summary><u><i>Why are the shapes not each in their own library component?</i></u> <a href="#-tips-faq--why-shapes-in-1">🔗<a></summary>
<p>When I used other libraries on excalidraw, it was difficult to see the shape from the thumbnail/preview. Without a search feature, I found myself dragging and dropping each shape 1-by-1 to find the one I was looking for. The shapes here are loosely-grouped. This (ideally) makes the icons easier to find and copy in to any system design.</p>
</details>
<details><summary><i>How to use in excalidraw without a gif?! TLDR</i></summary>
<ul>
<li>Open <a href="https://excalidraw.com">excalidraw</a>.</li>
<li>Open library (<em>at the top right</em>).</li>
<li>Click import (<em>folder icon</em>).</li>
<li>Select the <code>.excalidrawlib</code> from your computer.</li>
</ul>
</details>

---

### More

<details>
<summary><strong>F.A.Q.</strong> <a href="#-tips-faq">🔗<a></summary>
<section>
<header><u><i>Why are the shapes not each in their own library component?</i></u><a href="#-tips-faq--why-shapes-in-1">🔗<a></header>
<p>When I used other libraries on excalidraw, it was difficult to see the shape from the thumbnail/preview. Without a search feature, I found myself dragging and dropping each shape 1-by-1 to find the one I was looking for. The shapes here are loosely-grouped. This (ideally) makes the icons easier to find and copy in to any system design.</p>
</section>
<section>
<header><u><i>How to customize?</i></u> <a href="#-tips-faq--customization">🔗<a></header>
<p><img src="https://user-images.githubusercontent.com/4022631/126106291-eb966e66-6ee2-4abb-9f8c-e7649d9e03da.gif" alt="system-design-template-aretecode-excalidraw--how-to-customize-and-use-tips" /></p>
</section>
<details><summary><i>I want to download some other way, how?</i> <a href="#-tips-faq--why-shapes-in-1">🔗<a></summary>
<h5>wget</h5>
<pre><code class="lang-bash">wget -O "system-design-template-emoji.excalidrawlib" "https://raw.githubusercontent.com/aretecode/system-design-templates-excalidraw/main/src/system-design-template-emoji.excalidrawlib"
</code></pre>
<h5>Save file</h5>
<ol>
<li>Open the <a href="https://github.com/aretecode/system-design-templates-excalidraw/raw/main/src/system-design-template-emoji.excalidrawlib">raw library file</a></li>
<li>Press <a href="https://support.google.com/chrome/answer/95759?hl=en&amp;co=GENIE.Platform%3DDesktop"><code>Command-S</code> (<em><code>[Cmd ⌘]</code> + <code>[s]</code> on osx, <code>Ctrl+S</code> on windows</em>) to save the file</a>.</li>
<li>Append <code>.excalidrawlib</code> extension to the file name <strong>and</strong> change format from <code>txt</code> to <code>all files</code>.</li>
<li>Click save in the save-as modal.</li>
</ol>
<hr />
</details>

<details>
<summary><strong>Tools</strong> <a href="#-more--tools">🔗<a></summary>
<summary><u><i>What tools did you use?</i></u><a href="#-tips-faq--tools used">🔗<a></summary>
<section>
<ul>
<li><a href="https://excalidraw.com">excalidraw</a> to create and use the library</li>
<li><a href="https://imageoptim.com/">imageoptim</a> to reduce size of images exported by excalidraw</li>
<li><a href="https://github.com/excalidraw/excalidraw-libraries">excalidraw libraries</a> for naming, formatting, library standards and instructions</li>
<li><a href="https://emoji.muan.co/">emoji.muan</a> to search for emoji</li>
<li><a href="https://github.com/sindresorhus/Gifski">Gifski</a> to convert mov recordings to gif</li>
<li><a href="https://github.com/keycastr/keycastr">keycastr</a> to show key strokes</li>
<li><a href="https://docs.github.com/en/github/writing-on-github">github md docs for reference</a> <a href="https://github.github.com/gfm/">gfm</a></li>
</ul>
</section>
Expand Down

0 comments on commit d6f03bf

Please sign in to comment.