Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add slides for 4/2022 #42

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add slides for 4/2022 #42

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
369 changes: 369 additions & 0 deletions 2022-04.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,369 @@
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">

<title>charmCityJs</title>

<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/charmcity.css" id="theme">
<link rel="stylesheet" href="lib/css/zenburn.css">
<link href="https://fonts.googleapis.com/css?family=Droid+Sans|Oswald" rel="stylesheet">

<style>
body {
color: white;
/* background-color: #17a2f3; */
}

.reveal a,
.reveal a:hover {
font-weight: bold;
color: #510ad6;
}

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
color: black;
}
</style>

<!-- Code syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css">

<!-- Printing and PDF exports -->
<script>
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match(/print-pdf/gi) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>

<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>

<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<h3 style="color: #222;">Welcome to</h3>
<h1 style="font-size: 3em; color: #000; font-weight: normal; font-family: 'Roboto', arial, sans-serif;">
CHARMCITY<b>JS!!</b>
<br />🌹🍀👩🏽
</h1>
</section>

<section>
<h2 style="font-size: 3em; color: black;">ABOUT CCJS</h2>
</section>

<section>
<h2><b>charmcityjs.org</b></h2>
<h4>Is our website!</h4>
</section>

<section>
<h4>We have an anti-harassment policy</h4>
<h2 class="fragment">bit.ly/ccjs-safe</h2>
<p class="fragment">
<span style="font-size: 1.25em;">
If you are being harassed, notice that someone else is
being harassed, or have any other concerns, please contact a member
of meetup organizers immediately.
</span>
</p>
</section>

<section>
<h2 class="our-organizers">Organizers!</h2>
<div class="organizers" style="display: flex; flex-wrap: nowrap; margin-top: 50px; justify-content: space-around;">
<div class="organizer">
<img src="./assets/organizers/asa.jpg" style="width: 100px; height: 150px; border: 1px outset white; border-radius: 15px 0px 15px 0px; overflow: hidden;" />
<p>asa</p>
</div>
<div class="organizer">
<img src="./assets/organizers/glen.png" style="background: #cbcdcb; width: 100px; height: 150px; border: 1px outset white; border-radius: 15px 0px 15px 0px; overflow: hidden;" />
<p>glen</p>
</div>
<div class="organizer">
<img src="./assets/organizers/troy.jpg" style="width: 100px; height: 150px; border: 1px outset white; border-radius: 15px 0px 15px 0px; overflow: hidden;" />
<p>troy</p>
</div>
</div>
</section>

<section>
<h2 style="">We are<br/>actively seeking</h2>
<h2 style=""><b>MORE ORGANIZERS</b></h2>
<h4>
Slack Glen (@arei) for Details!
</h4>
</section>


<section>
<h2 style="">Join us on Slack!</h2>
<h4>
<a href="http://slack.charmcityjs.org">http://slack.charmcityjs.org</a>
</h4>
</section>

<section>
<h2>Talks</h2>
<h3>You are powering this meetup! And we are so grateful for the all the talks being submitted!</h3>
<br />
<h4>Keep them coming!</h4>
</section>

<section>
<h2 style="color: black;">Submit A Talk</h2>
<h3>github.com/charmcityjs/talks</h3>
<br />
<h2 style="color: black;">Submit A Person</h2>
<h3>github.com/charmcityjs/talks</h3>
</section>

<section>
<h2 style="font-size: 3em; color: black;">PROGRAMMING NOTES</h2>
</section>

<section>
<h2 style="border-bottom: 8px solid rgba(255,255,255,0.3);"><b>Next CCJS</b></h2>
<h2><b>Wed May 4th 2022</b></h2>
<h4>Virtual</h4>
</section>

<section>
<h2 style="font-size: 3em; color: black;">ANNOUNCEMENTS</h2>
</section>

<!-- <section>
<h2><b>Syntax R Us</b></h2>
<h4>https://www.meetup.com/syntax-r-us/</h4>
<h4><b>First Event Oct 31</b></h4>
<h4>Syntax R Us is a software development club!<br/>We learn, help, and study together<br/>as a group. Severn Maryland.</h4>
</section> -->

<section>
<h2>Anyone have<br/><b>AN ANNOUNCEMENT?</b></h2>
<h4>Job Posting? New Library?</h4>
<h4>Speak on Up!</h4>
<h4>(No Recruiters)</h4>
</section>

<!--
<section>
<h2>FreeCodeCamp Baltimore</h2>
<br/>
<h4>2nd Monday of Every Month</h4>
<h4><b>Monday, March 9th</b></h4>
<h4><b>Betamore City garage</b></h4>
<br/>
<p>https://www.meetup.com/FreeCodeCamp-Baltimore/</p>
</section>

<section>
<h2>NodeSchool<br/>is BACK!<br/>🥳</h2>
<h4>THIS SATURDAY</h4>
<h4>Oct 5 - 1pm to 5pm</h4>
<h4>Betamore City Garage</h4>
<h4><a href="https://nodeschool.io/baltimore/">nodeschool.io/baltimore</a></h4>
</section> -->

<section>
<h2 style="font-size: 3em; color: black;">SPONSORS</h2>
</section>

<section>
<div style="display: grid; grid-template-columns: auto; justify-content: center; align-items: center;">
<!-- <h3 style="display: inline-flex; align-items:center; ">
<span style="display: block;padding-right: 50px;font-size:70px;">🏢</span>
<img src="./assets/verizon-media.png" class="logo" style="height: 60px; padding-right: 50px; display: block; float: left;">
<span style="display: block; text-align: left;">Verizon Media</span>
</h3> -->
<h3 style="display: inline-flex; align-items:center; justify-items:center;">
<span style="display: block;padding-right: 50px;font-size:70px;">🍕🥤</span>
❤️ YOU ❤️
</h3>
<h3 class="fragment" style="display: inline-flex; align-items:center; justify-items:center;">
<span style="display: block;padding-right: 50px;font-size:70px;">🤝🏽</span>
<img src="./assets/whitebox.png" style="height: 250px; margin: -200px 0px -225px -100px;" class="logo">
</h3>
<h3 class="fragment" style="display: inline-flex; align-items:center; justify-items:center;">
<span style="display: block;padding-right: 50px;font-size:70px;">🔒</span>
<img src="./assets/teampassword.png" style="height: 500px; margin: -225px 0px -225px -70px;" class="logo">
</h3>
<h3 class="fragment" style="display: inline-flex; align-items:center; justify-items:center;">
<span style="display: block;padding-right: 50px;font-size:70px;">📅</span>
<img src="./assets/tenonio.png" style="height: 100px; margin-left: -33px;" class="logo">
</h3>
</div>
</section>

<section>
<h2 style="font-size: 3em; color: black;">TONIGHT'S TALKS
<br><br>
🥁🧻🙏🏽
</h2>
</section>

<!-- SPEAKER 1 -->
<section>
<h2 style="font-size: 1em;">assert(talks[0],"<b>Aaron Yoshitake</b>");</h2>
<h3 style="font-size: 2em;"><b>Keyboard Accessibility: What, Why, and How.</b></h3>
</section>

<!-- SPEAKER 2 -->

<section>
<h2 style="font-size: 1em;white-space:nowrap;">assert(talks[1],"<b>Nitzan Frock</b>");</h2>
<h3 style="font-size: 2em;"><b>The Importance of Consistency</b></h3>
</section>


<section>
<h3 style="font-size: 2em;">Intermission</h3>
</section>

<!-- SPEAKER 3 -->
<section>
<h2 style="font-size: 1em;">assert(talks[2],"<b>Thomas Knickman</b>");</h2>
<h3 style="font-size: 2em;"><b>You're Not Too Small For A Monorepo</b></h3>
</section>

<!-- <section>
<h2>After the talks...<br />Join us for BEER!</h2>
<br />
<h3><b><u>Silks</b></u><br>2641 Hudson St<br>Baltimore, Maryland 21224</h3>
<h4>Just follow the crowd!</h4>
</section> -->

<section>
<h2>Point of Order</h2>
<h4 style="color: black;">Please mute your mic during speaker talks</h4>
<h4 style="color: black;">And unmute them for the open discussion!</h4>
<h4 style="color: black;">The organizers will also be<br />muting open mics aggressively</h4>
<h4 style="color: black;">There will additional chatting time after the last talk for all who stay.</h4>
<h4 style="color: black;">Thank you!</h4>
</section>

<section>
<h2 style="font-size: 3em; color: black;">HERE WE GO!</h2>
<h4 style="font-size: 1.5em; text-align: left; padding-left: 200px">
🍕 Get some food<br>
🪑 Sit back<br>
🤸🏾‍♀️ Enjoy!
</h4>
</section>

<section data-state="in-intermission">
<h2 style="font-size: 3em; color: black;">INTERMISSION</h2>
<h4 style="font-size: 1.5em;text-align: left; padding-left: 225px">
🍕 Get some food<br>
👋 Say hello<br>
🤸🏾‍♀️ Relax!
</h4>
<br />
<div class="timer" style="font-size:2em;font-family:monospace;font-weight:bold;line-height:20px;">10:00</div>
<br />
<h6>Website: <a href="http://charmcityjs.org">charmcityjs.org</a></h6>
<h6>Join Slack: <a href="http://slack.charmcityjs.org">http://slack.charmcityjs.org</a></h6>
<h6>Submit Talk: <a href="https://github.com/charmcityjs/talks">github.com/charmcityjs/talks</a></h6>
</section>
</div>

<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>

<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,

transition: 'slide', // none/fade/slide/convex/concave/zoom

// Optional reveal.js plugins
dependencies: [{
src: 'lib/js/classList.js',
condition: function() {
return !document.body.classList;
}
},
{
src: 'plugin/markdown/marked.js',
condition: function() {
return !!document.querySelector('[data-markdown]');
}
},
{
src: 'plugin/markdown/markdown.js',
condition: function() {
return !!document.querySelector('[data-markdown]');
}
},
{
src: 'plugin/highlight/highlight.js',
async: true,
condition: function() {
return !!document.querySelector('pre code');
},
callback: function() {
hljs.initHighlightingOnLoad();
}
},
{
src: 'plugin/zoom-js/zoom.js',
async: true
},
{
src: 'plugin/notes/notes.js',
async: true
}
]
});
</script>
<script>
let started = null;
const e = document.body.querySelector("[data-state=in-intermission] .timer");
setInterval(function() {
if (document.body.parentElement.classList.contains("in-intermission")) {
if (!started) started = Date.now();

const duration = 600000; // 10 minutes
const remaining = duration - (Date.now() - started);
let mm = (remaining / 60000) | 0;
let ss = ((remaining - (mm * 60000)) / 1000) | 0;
if (remaining < 0)[mm, ss] = [0, 0];
const t = (("" + mm).padStart(2, 0)) + ":" + (("" + ss).padStart(2, 0));

e.textContent = t;
} else {
e.textContent = "10:00";
started = null;
}
}, 1000)
</script>
</body>

</html>