25 lines
30 KiB
HTML
25 lines
30 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US" dir="ltr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>Clientside UI | DreamFreely Library</title>
|
||
<meta name="description" content="Community Conscious Creations">
|
||
<meta name="generator" content="VitePress v2.0.0-alpha.15">
|
||
<link rel="preload stylesheet" href="/assets/style.tE5om2fv.css" as="style">
|
||
<link rel="preload stylesheet" href="/vp-icons.css" as="style">
|
||
|
||
<script type="module" src="/assets/app.CNf1Hw3L.js"></script>
|
||
<link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
|
||
<link rel="modulepreload" href="/assets/chunks/theme.DVARhRSD.js">
|
||
<link rel="modulepreload" href="/assets/chunks/framework.BfS8l2sS.js">
|
||
<link rel="modulepreload" href="/assets/rebel_coding_step6.md.VjnlTvFQ.lean.js">
|
||
<script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
|
||
<script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
|
||
</head>
|
||
<body>
|
||
<div id="app"><div class="Layout" data-v-1df9f90f><!--[--><!--]--><!--[--><span tabindex="-1" data-v-331ec75c></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-331ec75c>Skip to content</a><!--]--><!----><header class="VPNav" data-v-1df9f90f data-v-da52a441><div class="VPNavBar" data-v-da52a441 data-v-70946a35><div class="wrapper" data-v-70946a35><div class="container" data-v-70946a35><div class="title" data-v-70946a35><div class="VPNavBarTitle has-sidebar" data-v-70946a35 data-v-1e38c6bc><a class="title" href="/" data-v-1e38c6bc><!--[--><!--]--><!----><span data-v-1e38c6bc>DreamFreely Library</span><!--[--><!--]--></a></div></div><div class="content" data-v-70946a35><div class="content-body" data-v-70946a35><!--[--><!--]--><div class="VPNavBarSearch search" data-v-70946a35><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-70946a35 data-v-39714824><span id="main-nav-aria-label" class="visually-hidden" data-v-39714824> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/welcome/" tabindex="0" data-v-39714824 data-v-52a1d768><!--[--><span data-v-52a1d768>Welcome</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/welcome/support.html" tabindex="0" data-v-39714824 data-v-52a1d768><!--[--><span data-v-52a1d768>Support</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-70946a35 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-70946a35 data-v-0394ad82 data-v-d07f11e6><!--[--><a class="VPSocialLink no-icon" href="https://canin.dreamfreely.org" aria-label="bookalope" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><span class="vpi-social-bookalope"></span></a><a class="VPSocialLink no-icon" href="https://shop.dreamfreely.org" aria-label="tina" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><span class="vpi-social-tina"></span></a><a class="VPSocialLink no-icon" href="https://digisnaxx.com" aria-label="ghostery" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><span class="vpi-social-ghostery"></span></a><a class="VPSocialLink no-icon" href="https://manifestingempathy.com" aria-label="hasura" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><span class="vpi-social-hasura"></span></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-70946a35 data-v-bf2fac68 data-v-42cb505d><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-42cb505d><span class="vpi-more-horizontal icon" data-v-42cb505d></span></button><div class="menu" data-v-42cb505d><div class="VPMenu" data-v-42cb505d data-v-25a6cce8><!----><!--[--><!--[--><!----><div class="group" data-v-bf2fac68><div class="item appearance" data-v-bf2fac68><p class="label" data-v-bf2fac68>Appearance</p><div class="appearance-action" data-v-bf2fac68><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bf2fac68 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><div class="group" data-v-bf2fac68><div class="item social-links" data-v-bf2fac68><div class="VPSocialLinks social-links-list" data-v-bf2fac68 data-v-d07f11e6><!--[--><a class="VPSocialLink no-icon" href="https://canin.dreamfreely.org" aria-label="bookalope" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><span class="vpi-social-bookalope"></span></a><a class="VPSocialLink no-icon" href="https://shop.dreamfreely.org" aria-label="tina" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><span class="vpi-social-tina"></span></a><a class="VPSocialLink no-icon" href="https://digisnaxx.com" aria-label="ghostery" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><span class="vpi-social-ghostery"></span></a><a class="VPSocialLink no-icon" href="https://manifestingempathy.com" aria-label="hasura" target="_blank" rel="me noopener" data-v-d07f11e6 data-v-591a6b30><span class="vpi-social-hasura"></span></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-70946a35 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-70946a35><div class="divider-line" data-v-70946a35></div></div></div><!----></header><div class="VPLocalNav has-sidebar empty" data-v-1df9f90f data-v-db738f89><div class="container" data-v-db738f89><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-db738f89><span class="vpi-align-left menu-icon" data-v-db738f89></span><span class="menu-text" data-v-db738f89>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-db738f89 data-v-0bf0e06f><button data-v-0bf0e06f>Return to top</button><!----></div></div></div><aside class="VPSidebar" data-v-1df9f90f data-v-af661f50><div class="curtain" data-v-af661f50></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-af661f50><span class="visually-hidden" id="sidebar-aria-label" data-v-af661f50> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Welcome</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/welcome/" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Chibu / Hola / Hello</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/welcome/dreamfreely.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>About DreamFreely</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/welcome/canin.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>About Canin Carlos</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Rebel Coding 101</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Intro to Coding</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/orientation.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Orientation</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/termintro.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Intro to CLI</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/step1.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Step 1: HTML & CSS</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/step2.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Step 2: JavaScript</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/step3.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Step 3: Python Scrapers</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/step4.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Step 4: The Full Stack</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/appendices.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Appendices</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0 has-active" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Rebel Coding 102</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/v2.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Reviewing the Full-Stack</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/v2Orient.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Planning Our App</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/step5.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Step 1: Server</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/step6.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Step 2: Client</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/step7.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Step 3: Deployment</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/step8.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Step 4: Scaling, etc</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/rebel_coding/more-appendices.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>More Appendices</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Manifesting Empathy</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Welcome</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/egg.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>The Egg (0-5)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/hatchling.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>The Hatchling (5-12)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/flight.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Flight (12-18)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/flying.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Flying (18-25)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/learning.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Learning (25-35)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/building.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Building (35-45)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/helping.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Helping (45-60)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/enjoying.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Enjoying (60+)</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/onward.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Outro</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/appendices.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Appendices</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><!----><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1" data-v-d81de50c data-v-d81de50c><div class="item" role="button" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><p class="text" data-v-d81de50c>Diversity Inverted</p><!----></div><!----></div><div class="VPSidebarItem level-1" data-v-d81de50c data-v-d81de50c><div class="item" role="button" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><p class="text" data-v-d81de50c>The Guidebook</p><!----></div><!----></div><!--]--></div></section></div><div class="no-transition group" data-v-8d50c081><section class="VPSidebarItem level-0" data-v-8d50c081 data-v-d81de50c><div class="item" role="button" tabindex="0" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><h2 class="text" data-v-d81de50c>Manifesting Empathy (archived)</h2><!----></div><div class="items" data-v-d81de50c><!--[--><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Welcome</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/sexism.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Sexism</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/racism.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Racism</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/able-ism.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Able-ism</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/power-dynamics.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Power Dynamics</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/onward.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Onwards</p><!--]--></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-d81de50c data-v-d81de50c><div class="item" data-v-d81de50c><div class="indicator" data-v-d81de50c></div><a class="VPLink link link" href="/mempath/appendices.html" data-v-d81de50c><!--[--><p class="text" data-v-d81de50c>Appendices</p><!--]--></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-1df9f90f data-v-c87f25bf><div class="VPDoc has-sidebar has-aside" data-v-c87f25bf data-v-7011f0d8><!--[--><!--]--><div class="container" data-v-7011f0d8><div class="aside" data-v-7011f0d8><div class="aside-curtain" data-v-7011f0d8></div><div class="aside-container" data-v-7011f0d8><div class="aside-content" data-v-7011f0d8><div class="VPDocAside" data-v-7011f0d8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-60d5052e><div class="content" data-v-60d5052e><div class="outline-marker" data-v-60d5052e></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-60d5052e>On this page</div><ul class="VPDocOutlineItem root" data-v-60d5052e data-v-1ce71065><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-7011f0d8><div class="content-container" data-v-7011f0d8><!--[--><!--]--><main class="main" data-v-7011f0d8><div style="position:relative;" class="vp-doc _rebel_coding_step6" data-v-7011f0d8><div><h1 id="clientside-ui" tabindex="-1">Clientside UI <a class="header-anchor" href="#clientside-ui" aria-label="Permalink to “Clientside UI”"></a></h1><hr><h3 id="overview-apis-user-interaction" tabindex="-1">Overview - APIs & User Interaction <a class="header-anchor" href="#overview-apis-user-interaction" aria-label="Permalink to “Overview - APIs & User Interaction”"></a></h3><p>How APIs work, and why we use them.</p><h3 id="why-vue" tabindex="-1">Why Vue? <a class="header-anchor" href="#why-vue" aria-label="Permalink to “Why Vue?”"></a></h3><p>Because it’s minimal while working with a VirtualDOM similar to ReactJS.</p><h3 id="vue-template-page" tabindex="-1">Vue Template Page <a class="header-anchor" href="#vue-template-page" aria-label="Permalink to “Vue Template Page”"></a></h3><p>Template. Script. Style. Any of it look familiar?</p><h3 id="consuming-the-apis" tabindex="-1">Consuming the APIs <a class="header-anchor" href="#consuming-the-apis" aria-label="Permalink to “Consuming the APIs”"></a></h3><p>How does it happen</p><h3 id="routing-in-vue" tabindex="-1">Routing in Vue <a class="header-anchor" href="#routing-in-vue" aria-label="Permalink to “Routing in Vue”"></a></h3><p>We’ve got our Vue Template pages, now what?</p><h3 id="vue-store" tabindex="-1">Vue Store <a class="header-anchor" href="#vue-store" aria-label="Permalink to “Vue Store”"></a></h3><p>Just a sneak peak</p><h3 id="module-templating" tabindex="-1">Module Templating <a class="header-anchor" href="#module-templating" aria-label="Permalink to “Module Templating”"></a></h3><p>Let’s put some of this together …</p><p>What if we …</p><h3 id="styling-frameworks-elementui" tabindex="-1">Styling Frameworks / ElementUI <a class="header-anchor" href="#styling-frameworks-elementui" aria-label="Permalink to “Styling Frameworks / ElementUI”"></a></h3><p>We can add some additional styling as well; by bringing in another library.</p></div></div></main><footer class="VPDocFooter" data-v-7011f0d8 data-v-e257564d><!--[--><!--]--><!----><nav class="prev-next" aria-labelledby="doc-footer-aria-label" data-v-e257564d><span class="visually-hidden" id="doc-footer-aria-label" data-v-e257564d>Pager</span><div class="pager" data-v-e257564d><a class="VPLink link pager-link prev" href="/rebel_coding/step5.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Previous page</span><span class="title" data-v-e257564d>Step 1: Server</span><!--]--></a></div><div class="pager" data-v-e257564d><a class="VPLink link pager-link next" href="/rebel_coding/step7.html" data-v-e257564d><!--[--><span class="desc" data-v-e257564d>Next page</span><span class="title" data-v-e257564d>Step 3: Deployment</span><!--]--></a></div></nav></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||
<script>window.__VP_HASH_MAP__=JSON.parse("{\"api-examples.md\":\"CLsEsApn\",\"df_guide_1_basic_psych.md\":\"DwYn8aJz\",\"df_guide_2_medi_vibes.md\":\"BL-BuG9R\",\"df_guide_3_with_loneliness.md\":\"Bo6ULJ8y\",\"df_guide_4_enter_alchemy.md\":\"DcZx6NAy\",\"df_guide_5_test_ethic.md\":\"nyIQpJwM\",\"df_guide_6_social_physics.md\":\"CNA2jQCU\",\"df_guide_7_quantum_realm.md\":\"BFXlzHiT\",\"df_guide_8_topol.md\":\"BjXlxBWE\",\"df_guide_appendices.md\":\"CDMgMihK\",\"df_guide_index.md\":\"xD8OyHvK\",\"exocto_analytics.md\":\"BM3Pg91r\",\"exocto_appendices.md\":\"sVwSvUYe\",\"exocto_automation.md\":\"DEvrDE4y\",\"exocto_cooltools.md\":\"BC6_kCf0\",\"exocto_index.md\":\"DHdM3bQG\",\"exocto_licences.md\":\"Dk7QbXAY\",\"exocto_mailinglists.md\":\"D42Z_f3S\",\"exocto_payments.md\":\"BwzhBIvJ\",\"exocto_seo101.md\":\"CRJt4LE8\",\"exocto_socialmedia.md\":\"B9APVBs4\",\"exocto_websites.md\":\"6J92idVL\",\"index.1.md\":\"D7r5zJY5\",\"index.md\":\"DcciJnS6\",\"markdown-examples.md\":\"B9ZdJivL\",\"mempath_able-ism.md\":\"Dof--8TS\",\"mempath_appendices.md\":\"DBar2q2m\",\"mempath_gender-studies.md\":\"BcTGweUU\",\"mempath_index.md\":\"Dn2o6A3M\",\"mempath_notes.huggingface.md\":\"CGBrM3lA\",\"mempath_onward.md\":\"DxhCj56a\",\"mempath_openai.playground.md\":\"C3ceZL9Q\",\"mempath_outline.huggingface.md\":\"BFuiOEVO\",\"mempath_power-dynamics.md\":\"CQWNxegt\",\"mempath_racism.md\":\"CxVF4Hbn\",\"mempath_sexism.md\":\"Db1tqU4H\",\"rebel_coding_appendices.md\":\"gQ1t-5b7\",\"rebel_coding_index.md\":\"BgfENPxu\",\"rebel_coding_orientation.md\":\"BjaO66hJ\",\"rebel_coding_step1.md\":\"CgXIS7sX\",\"rebel_coding_step2.md\":\"C1zU29Lh\",\"rebel_coding_step3.md\":\"DPGBP964\",\"rebel_coding_step4.md\":\"Bp6KMb-K\",\"rebel_coding_step5.md\":\"Dpyx0NUO\",\"rebel_coding_step6.md\":\"VjnlTvFQ\",\"rebel_coding_step7.md\":\"Cv22hGLG\",\"rebel_coding_step8.md\":\"hfdnDA5D\",\"rebel_coding_termintro.md\":\"yqyXwJUh\",\"rebel_coding_v2.md\":\"C_Ab_PCg\",\"rebel_coding_v2orient.md\":\"Cih4N80W\",\"welcome_canin.md\":\"BVaWnSlf\",\"welcome_dreamfreely.md\":\"C8ZaDhcw\",\"welcome_index.md\":\"IohpDKGr\",\"welcome_support.md\":\"CIaYjdmV\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"DreamFreely Library\",\"description\":\"Community Conscious Creations\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"Welcome\",\"link\":\"/welcome/\"},{\"text\":\"Support\",\"link\":\"/welcome/support\"}],\"sidebar\":[{\"text\":\"Welcome\",\"items\":[{\"text\":\"Chibu / Hola / Hello\",\"link\":\"/welcome/\"},{\"text\":\"About DreamFreely\",\"link\":\"/welcome/dreamfreely\"},{\"text\":\"About Canin Carlos\",\"link\":\"/welcome/canin\"}]},{\"text\":\"Rebel Coding 101\",\"items\":[{\"text\":\"Intro to Coding\",\"link\":\"/rebel_coding/\"},{\"text\":\"Orientation\",\"link\":\"/rebel_coding/orientation\"},{\"text\":\"Intro to CLI\",\"link\":\"/rebel_coding/termintro\"},{\"text\":\"Step 1: HTML & CSS\",\"link\":\"/rebel_coding/step1\"},{\"text\":\"Step 2: JavaScript\",\"link\":\"/rebel_coding/step2\"},{\"text\":\"Step 3: Python Scrapers\",\"link\":\"/rebel_coding/step3\"},{\"text\":\"Step 4: The Full Stack\",\"link\":\"/rebel_coding/step4\"},{\"text\":\"Appendices\",\"link\":\"/rebel_coding/appendices\"}]},{\"text\":\"Rebel Coding 102\",\"items\":[{\"text\":\"Reviewing the Full-Stack\",\"link\":\"/rebel_coding/v2\"},{\"text\":\"Planning Our App\",\"link\":\"/rebel_coding/v2Orient\"},{\"text\":\"Step 1: Server\",\"link\":\"/rebel_coding/step5\"},{\"text\":\"Step 2: Client\",\"link\":\"/rebel_coding/step6\"},{\"text\":\"Step 3: Deployment\",\"link\":\"/rebel_coding/step7\"},{\"text\":\"Step 4: Scaling, etc\",\"link\":\"/rebel_coding/step8\"},{\"text\":\"More Appendices\",\"link\":\"/rebel_coding/more-appendices\"}]},{\"text\":\"Manifesting Empathy\",\"items\":[{\"text\":\"Welcome\",\"link\":\"/mempath/\"},{\"text\":\"The Egg (0-5)\",\"link\":\"/mempath/egg\"},{\"text\":\"The Hatchling (5-12)\",\"link\":\"/mempath/hatchling\"},{\"text\":\"Flight (12-18)\",\"link\":\"/mempath/flight\"},{\"text\":\"Flying (18-25)\",\"link\":\"/mempath/flying\"},{\"text\":\"Learning (25-35)\",\"link\":\"/mempath/learning\"},{\"text\":\"Building (35-45)\",\"link\":\"/mempath/building\"},{\"text\":\"Helping (45-60)\",\"link\":\"/mempath/helping\"},{\"text\":\"Enjoying (60+)\",\"link\":\"/mempath/enjoying\"},{\"text\":\"Outro\",\"link\":\"/mempath/onward\"},{\"text\":\"Appendices\",\"link\":\"/mempath/appendices\"}]},{\"text\":\"Diversity Inverted\"},{\"text\":\"The Guidebook\"},{\"text\":\"Manifesting Empathy (archived)\",\"items\":[{\"text\":\"Welcome\",\"link\":\"/mempath/\"},{\"text\":\"Sexism\",\"link\":\"/mempath/sexism\"},{\"text\":\"Racism\",\"link\":\"/mempath/racism\"},{\"text\":\"Able-ism\",\"link\":\"/mempath/able-ism\"},{\"text\":\"Power Dynamics\",\"link\":\"/mempath/power-dynamics\"},{\"text\":\"Onwards\",\"link\":\"/mempath/onward\"},{\"text\":\"Appendices\",\"link\":\"/mempath/appendices\"}]}],\"socialLinks\":[{\"icon\":\"bookalope\",\"link\":\"https://canin.dreamfreely.org\"},{\"icon\":\"tina\",\"link\":\"https://shop.dreamfreely.org\"},{\"icon\":\"ghostery\",\"link\":\"https://digisnaxx.com\"},{\"icon\":\"hasura\",\"link\":\"https://manifestingempathy.com\"}]},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false,\"additionalConfig\":{}}");</script>
|
||
|
||
</body>
|
||
</html> |