Skip to content

Commit

Permalink
Add more slides
Browse files Browse the repository at this point in the history
  • Loading branch information
@MeFoDy
MeFoDy committed Nov 11, 2023
1 parent 3355371 commit e266892
Show file tree
Hide file tree
Showing 9 changed files with 80 additions and 2 deletions.
71 changes: 69 additions & 2 deletions css-first/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,18 +94,26 @@ <h2 class="shout">🤔 Заменить на CSS?</h2>
<h2 class="shout shadowed">JS vs CSS</h2>
</section>

<section class="slide title">
<img src="./pictures/js-boy.jpeg" alt="" class="place left circle" width="400" style="margin-left: 3em;">
<img src="./pictures/css-boy.jpeg" alt="" class="place right circle next" width="400" style="margin-right: 3em;">
</section>

<section class="slide title">
<blockquote class="big place">На сайт нужна каруселька!<br>
<span class="cite-author">Заказчик</span>
</blockquote>
<img src="./pictures/carousel.png" alt="" class="place right bottom" width="200" style="margin-bottom: 3em; margin-right: 3em;">
</section>

<section class="slide">
<img src="./pictures/npm-caruselka.jpeg" alt="" class="cover">
<img src="./pictures/js-boy.jpeg" alt="" class="place bottom right character">
</section>

<section class="slide">
<blockquote class="big place">ChatGPT, помоги найти хорошую карусельку в npm.</blockquote>
<img src="./pictures/js-boy.jpeg" alt="" class="place bottom right character">
</section>

<section class="slide">
Expand Down Expand Up @@ -245,6 +253,7 @@ <h2 class="shout">Отчасти 🙃</h2>

<section class="slide">
<h2 class="shout">🧐 CSS?</h2>
<img src="./pictures/css-boy.jpeg" alt="" class="place bottom right character">
</section>

<section class="slide">
Expand Down Expand Up @@ -316,6 +325,7 @@ <h2 class="shout">🧐 CSS?</h2>

<section class="slide">
<h2 class="shout">45 965 <span class="pink">−</span> 993 <span class="pink">=</span> 44 972 <br><br> ⬇️ 97%</h2>
<img src="./pictures/css-boy.jpeg" alt="" class="place bottom right character">
</section>

<section class="slide">
Expand Down Expand Up @@ -349,6 +359,7 @@ <h2 class="shout">☝️ Уточняйте требования заказчи

<section class="slide">
<img src="./pictures/npm-smooth-scroll.jpeg" alt="" class="place rounded" width="400">
<img src="./pictures/js-boy.jpeg" alt="" class="place bottom right character">
<a class="copyright" href="https://www.npmjs.com/package/smooth-scroll">Smooth Scroll</a>
</section>

Expand All @@ -367,6 +378,7 @@ <h2 class="shout">☝️ Уточняйте требования заказчи

<section class="slide">
<pre class="place big css"><code>scroll-behavior: smooth;</code></pre>
<img src="./pictures/css-boy.jpeg" alt="" class="place bottom right character">
</section>

<section class="slide">
Expand All @@ -376,10 +388,12 @@ <h2 class="shout">☝️ Уточняйте требования заказчи

<section class="slide">
<h2 class="shout">🤨 А если sticky-шапка?</h2>
<img src="./pictures/js-boy.jpeg" alt="" class="place bottom right character">
</section>

<section class="slide">
<pre class="place big css"><code>scroll-margin-top: 100px;</code></pre>
<img src="./pictures/css-boy.jpeg" alt="" class="place bottom right character">
</section>

<section class="slide">
Expand Down Expand Up @@ -409,6 +423,7 @@ <h2 class="shout">🤨 А если sticky-шапка?</h2>

<section class="slide">
<h2 class="shout">2 709 <span class="pink">−</span> 93 <span class="pink">=</span> 2 616 <br><br> ⬇️ 96.5%</h2>
<img src="./pictures/css-boy.jpeg" alt="" class="place bottom right character">
</section>

<section class="slide">
Expand All @@ -428,11 +443,13 @@ <h2 class="shout">2 709 <span class="pink">−</span> 93 <span class="pink">=</

<section class="slide">
<img src="./pictures/npm-react-scroll-parallax.jpeg" alt="" class="place rounded" width="400">
<img src="./pictures/js-boy.jpeg" alt="" class="place bottom right character">
<a class="copyright" href="https://www.npmjs.com/package/react-scroll-parallax">react-scroll-parallax</a>
</section>

<section class="slide">
<img src="./pictures/bundle-react-scroll-parallax.jpeg" width="800" alt="" class="place rounded">
<img src="./pictures/js-boy.jpeg" alt="" class="place bottom right character">
<a class="copyright" href="https://bundlephobia.com/package/[email protected]">[email protected]</a>
</section>

Expand Down Expand Up @@ -470,6 +487,7 @@ <h2 class="shout">2 709 <span class="pink">−</span> 93 <span class="pink">=</
@keyframes slide {
to { translate: var(--x) var(--y); }
}</code></pre>
<img src="./pictures/css-boy.jpeg" alt="" class="place bottom right character">
<a class="copyright" href="https://twitter.com/jh3yy/status/1714404585660379593">jh3yy tweet</a>
</section>

Expand Down Expand Up @@ -535,6 +553,7 @@ <h2 class="shout">2s <span class="pink">=</span> 100%</h2>

<section class="slide">
<img src="./pictures/bundle-readprogress.jpeg" alt="" class="place rounded" width="800">
<img src="./pictures/js-boy.jpeg" alt="" class="place bottom right character">
<a class="copyright" href="https://bundlephobia.com/package/[email protected]">readprogress</a>
</section>

Expand Down Expand Up @@ -694,12 +713,14 @@ <h2 class="shout">Interop 2024</h2>
const vh = window.innerHeight * 0.01;
document.documentElement.style.setProperty('--vh', `${vh}px`);
});</code></pre>
<img src="./pictures/js-boy.jpeg" alt="" class="place top right character">

<a class="copyright" href="https://stackoverflow.com/a/56671096">Safari Viewport Bug</a>
</section>

<section class="slide">
<pre class="place big"><code>height: 100dvh;</code></pre>
<img src="./pictures/css-boy.jpeg" alt="" class="place top right character">
</section>

<section class="slide">
Expand Down Expand Up @@ -731,6 +752,7 @@ <h2 class="shout">Interop 2024</h2>

<section class="slide">
<img src="./pictures/npm-lightgallery.jpeg" alt="" class="place rounded" width="400">
<img src="./pictures/js-boy.jpeg" alt="" class="place bottom right character">
</section>

<section class="slide">
Expand All @@ -748,6 +770,7 @@ <h2 class="shout">Interop 2024</h2>

<section class="slide">
<h2 class="shout">🤔 CSS?</h2>
<img src="./pictures/css-boy.jpeg" alt="" class="place bottom right character">
</section>

<section class="slide">
Expand All @@ -758,6 +781,7 @@ <h2 class="shout">🤔 CSS?</h2>
&lt;a href=&quot;#&quot; class=&quot;lightbox&quot; id=&quot;img1&quot;&gt;
&lt;span style=&quot;background-image: url(&#39;./large.jpg&#39;)&quot;&gt;&lt;/span&gt;
&lt;/a&gt;</code></pre>
<img src="./pictures/css-boy.jpeg" alt="" class="place bottom right character">
</section>

<section class="slide">
Expand All @@ -775,6 +799,7 @@ <h2 class="shout">🤔 CSS?</h2>
.lightbox:target {
display: block;
}</code></pre>
<img src="./pictures/css-boy.jpeg" alt="" class="place bottom right character">
</section>

<section class="slide">
Expand All @@ -794,6 +819,7 @@ <h2 class="shout">🤔 CSS?</h2>

<section class="slide">
<img src="./pictures/npm-focus-trap.jpeg" alt="" width="400" class="place rounded">
<img src="./pictures/js-boy.jpeg" alt="" class="place bottom right character">
<a class="copyright" href="https://www.npmjs.com/package/focus-trap">focus-trap</a>
</section>

Expand All @@ -805,6 +831,7 @@ <h2 class="shout">🤔 CSS?</h2>
&lt;dialog open&gt;
Content
&lt;/dialog&gt;</code></pre>
<img src="./pictures/html-girl.jpeg" alt="" class="place bottom right character">
<a class="copyright" href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inert">inert</a>
</section>

Expand Down Expand Up @@ -832,10 +859,12 @@ <h2 class="shout">🤔 CSS?</h2>
&lt;button&gt;Close&lt;/button&gt;
&lt;/form&gt;
&lt;/dialog&gt;</code></pre>
<img src="./pictures/html-girl.jpeg" alt="" class="place bottom right character">
</section>

<section class="slide">
<pre class="place big"><code>dialog.showModal();</code></pre>
<img src="./pictures/js-boy.jpeg" alt="" class="place bottom right character">
</section>

<section class="slide">
Expand All @@ -852,6 +881,7 @@ <h2 class="shout">🤔 CSS?</h2>

<section class="slide">
<img src="./pictures/npm-accordion.jpeg" alt="" width="400" class="place rounded">
<img src="./pictures/js-boy.jpeg" alt="" class="place bottom right character">
<a class="copyright" href="https://www.npmjs.com/package/@radix-ui/react-accordion">react-accordion</a>
</section>

Expand All @@ -878,10 +908,12 @@ <h2 class="shout">🤔 CSS?</h2>

<section class="slide">
<h2 class="shout">🤔 CSS?</h2>
<img src="./pictures/css-boy.jpeg" alt="" class="place bottom right character">
</section>

<section class="slide">
<h2 class="shout">🙃 HTML</h2>
<img src="./pictures/html-girl.jpeg" alt="" class="place bottom right character">
</section>

<section class="slide">
Expand Down Expand Up @@ -937,6 +969,7 @@ <h2 class="shout">🙃 HTML</h2>
<section class="slide">
<img src="./pictures/npm-gsap.jpeg" width="400" alt="" class="place rounded">
<a class="copyright" href="https://www.npmjs.com/package/gsap">GSAP</a>
<img src="./pictures/js-boy.jpeg" alt="" class="place bottom right character">
</section>

<section class="slide">
Expand All @@ -946,6 +979,7 @@ <h2 class="shout">🙃 HTML</h2>

<section class="slide">
<pre class="big place"><code>animation-timing-function: linear(0, 1);</code></pre>
<img src="./pictures/css-boy.jpeg" alt="" class="place bottom right character">
</section>

<section class="slide">
Expand All @@ -963,8 +997,12 @@ <h2 class="shout">🙃 HTML</h2>
'animation-timing-function',
'linear(0, 1)'
)</code></pre>
<img src="./pictures/js-boy.jpeg" alt="" class="place bottom right character">
</section>

<section class="slide">
<h2>loading=lazy</h2>
</section>

<section class="slide">
<h2>Ресайзилка https://twitter.com/jh3yy/status/1707514774685106581?s=52&t=bjYuNpX1kBifO2rkUV1HWA https://til.simonwillison.net/css/resizing-textarea</h2>
Expand All @@ -991,16 +1029,45 @@ <h2>Стилизация селектов https://talks.hiddedevries.nl/iohQPm/s
</iframe>
</section>

<section class="slide clear" style="background-color: black;">
<h2 class="shadowed" style="font-size: 3em; font-weight: 500; color: var(--color-white); text-align: center;">CSS First.<br>Когда JavaScript не нужен</h2>
<p style="margin-top: 180px; color: var(--color-yellow); text-align: center;">Никита Дубко, HR Tech Яндекса</p>
<img src="./pictures/shedevrum.jpeg" alt="" class="cover width place bottom" style="filter: blur(5px);">
</section>

<section class="slide clear" style="background-color: var(--color-pink);">
<h2 class="shadowed" style="font-size: 3em; font-weight: 500; color: var(--color-white); text-align: center;">JavaScript First.<br>Когда CSS<br>не нужен</h2>
<p style="margin-top: 180px; color: var(--color-yellow); text-align: center;">Никита Дубко, HR Tech Яндекса</p>
<img src="./pictures/shedevrum.jpeg" alt="" class="cover width place bottom" style="filter: blur(5px); mix-blend-mode: difference;">
</section>

<section class="slide">
<h2>тг-канал</h2>
<img src="./pictures/meme_girl_car.webp" alt="" class="cover">
</section>

<section class="slide title">
<img src="./pictures/js-boy.jpeg" alt="" class="place left circle" width="300" style="margin-left: 3em;">
<img src="./pictures/css-boy.jpeg" alt="" class="place right circle next" width="300" style="margin-right: 3em;">
<img src="./pictures/html-girl.jpeg" alt="" class="place circle next" width="300" style="margin-right: 3em;">
</section>

<section class="slide">
<h2 class="shout">📚 Знайте свои инструменты</h2>
</section>

<section class="slide">
<h2>arc собрать все ссылки из доклада</h2>
<h2 class="shout">🗞️ Будьте в курсе</h2>
</section>

<section class="slide clear">
<img src="./pictures/wst.jpeg" alt="" class="cover">
<a class="copyright" href="https://web-standards.ru/">Веб-стандарты</a>
</section>

<section class="slide">
<img src="./pictures/mefody_dev_tg.jpeg" alt="" class="place rounded left" width="700">
<img src="./pictures/qr-code-tg.png" alt="" class="place right" width="250" style="margin-right: 100px;">
</section>

<section class="slide clear" id="final">
<h2>Давайте жить дружно!</h2>
Expand Down
Binary file added css-first/pictures/carousel.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added css-first/pictures/css-boy.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added css-first/pictures/html-girl.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added css-first/pictures/js-boy.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added css-first/pictures/mefody_dev_tg.jpeg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added css-first/pictures/meme_girl_car.webp
View file
Binary file not shown.
Binary file added css-first/pictures/qr-code-tg.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 11 additions & 0 deletions css-first/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -330,3 +330,14 @@ a.copyright:hover,
a.copyright:focus {
opacity: 1;
}

.circle {
border-radius: 100%;
}

.character {
border-radius: 100%;
margin: 3em;
width: 5em;
box-shadow: 0 0 0.3em var(--color-grey);
}

0 comments on commit e266892

Please sign in to comment.