Skip to content

Commit

Permalink
Первый
Browse files Browse the repository at this point in the history
  • Loading branch information
Vadim Makeev committed Jun 3, 2020
0 parents commit e5901c1
Show file tree
Hide file tree
Showing 116 changed files with 3,516 additions and 0 deletions.
3 changes: 3 additions & 0 deletions 10/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# 10. Skillbox, оптимизация графики, Squoosh и элемент picture

[Подробнее в видео](https://youtu.be/gHLPBlzGRT8)
Binary file added 10/images/[email protected]
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 10/images/[email protected]
Binary file not shown.
Binary file added 10/images/[email protected]
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 10/images/[email protected]
Binary file not shown.
Binary file added 10/images/[email protected]
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 10/images/[email protected]
Binary file not shown.
Binary file added 10/images/[email protected]
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 10/images/[email protected]
Binary file not shown.
29 changes: 29 additions & 0 deletions 10/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>10. Skillbox, оптимизация графики, Squoosh и элемент picture</title>
<style>
img {
max-width: 100%;
}
</style>
</head>
<body>
<picture>
<source srcset="images/[email protected] 1x,
images/[email protected] 2x"
media="(min-width: 600px)"
type="image/webp">
<source srcset="images/[email protected] 1x,
images/[email protected] 2x"
media="(min-width: 600px)">
<source srcset="images/[email protected] 1x,
images/[email protected] 2x"
type="image/webp">
<img src="images/[email protected]"
srcset="images/[email protected] 2x"
alt="Девушка пьёт кофе">
</picture>
</body>
</html>
3 changes: 3 additions & 0 deletions 11/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# 11. Прототип изоляции стилей для Shower на веб-компонентах

[Подробнее в видео](https://youtu.be/_FRIRJZYlxU)
9 changes: 9 additions & 0 deletions 11/deck/deck.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
:host {
display: block;
box-sizing: border-box;
padding: 25px;
min-height: 100vh;
overflow: hidden;
background-color: #585a5e;
font-family: 'PT Sans', sans-serif;
}
19 changes: 19 additions & 0 deletions 11/deck/deck.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
customElements.define('shower-deck', class extends HTMLElement {
constructor() {
super();

this.attachShadow({
mode: 'open'
});

const template = document.createElement('template');
template.innerHTML = `
<link rel="stylesheet" href="deck.css">
<slot></slot>
`;

this.shadowRoot.appendChild(
template.content.cloneNode(true)
);
}
});
37 changes: 37 additions & 0 deletions 11/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Shower</title>
<style>
body {
margin: 0;
}
</style>
</head>
<body>
<shower-deck>
<shower-slide>
<h2>Slide One</h2>
</shower-slide>
<shower-slide>
<h2>Slide Two</h2>
<style slot="styles">
::slotted(h2) {
color: tomato;
}
</style>
</shower-slide>
<shower-slide>
<h2>Slide Three</h2>
<style slot="styles">
::slotted(h2) {
color: limegreen;
}
</style>
</shower-slide>
</shower-deck>
<script src="deck/deck.js"></script>
<script src="slide/slide.js"></script>
</body>
</html>
15 changes: 15 additions & 0 deletions 11/slide/slide.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
:host {
display: block;
box-sizing: border-box;
margin-bottom: 25px;
padding: 15px 20px;
width: 256px;
height: 144px;
background-color: white;
}

::slotted(h2) {
margin: 0;
color: #585a5e;
font-family: 'PT Sans Narrow', sans-serif;
}
29 changes: 29 additions & 0 deletions 11/slide/slide.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
customElements.define('shower-slide', class extends HTMLElement {
constructor() {
super();

this.attachShadow({
mode: 'open'
});

const template = document.createElement('template');
template.innerHTML = `
<link rel="stylesheet" href="slide.css">
<slot></slot>
<slot name="styles"></slot>
`;

this.shadowRoot.appendChild(
template.content.cloneNode(true)
);

const styles = this.shadowRoot
.querySelector('slot[name="styles"]')
.assignedNodes();
if (styles.length) {
this.shadowRoot.appendChild(
styles[0]
);
}
}
});
3 changes: 3 additions & 0 deletions 12/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# 12. Как вставить двадцать видео с Ютуба и не скачать слона

[Подробнее в видео](https://youtu.be/4JS70KB9GS0)
56 changes: 56 additions & 0 deletions 12/after.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="video.css">
</head>
<body class="page">
<div class="video">
<a class="video__link" href="https://youtu.be/neHA4MJwpnY">
<picture>
<source srcset="https://i.ytimg.com/vi_webp/neHA4MJwpnY/maxresdefault.webp" type="image/webp">
<img class="video__media" src="https://i.ytimg.com/vi/neHA4MJwpnY/maxresdefault.jpg" alt="1. Пилот, разборы, ответы и лайвы">
</picture>
</a>
<button class="video__button" aria-label="Запустить видео">
<svg width="68" height="48" viewBox="0 0 68 48"><path class="video__button-shape" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path class="video__button-icon" d="M 45,24 27,14 27,34"></path></svg>
</button>
</div>
<div class="video">
<a class="video__link" href="https://youtu.be/neHA4MJwpnY">
<picture>
<source srcset="https://i.ytimg.com/vi_webp/neHA4MJwpnY/maxresdefault.webp" type="image/webp">
<img class="video__media" src="https://i.ytimg.com/vi/neHA4MJwpnY/maxresdefault.jpg" alt="1. Пилот, разборы, ответы и лайвы">
</picture>
</a>
<button class="video__button" aria-label="Запустить видео">
<svg width="68" height="48" viewBox="0 0 68 48"><path class="video__button-shape" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path class="video__button-icon" d="M 45,24 27,14 27,34"></path></svg>
</button>
</div>
<div class="video">
<a class="video__link" href="https://youtu.be/neHA4MJwpnY">
<picture>
<source srcset="https://i.ytimg.com/vi_webp/neHA4MJwpnY/maxresdefault.webp" type="image/webp">
<img class="video__media" src="https://i.ytimg.com/vi/neHA4MJwpnY/maxresdefault.jpg" alt="1. Пилот, разборы, ответы и лайвы">
</picture>
</a>
<button class="video__button" aria-label="Запустить видео">
<svg width="68" height="48" viewBox="0 0 68 48"><path class="video__button-shape" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path class="video__button-icon" d="M 45,24 27,14 27,34"></path></svg>
</button>
</div>
<div class="video">
<a class="video__link" href="https://youtu.be/neHA4MJwpnY">
<picture>
<source srcset="https://i.ytimg.com/vi_webp/neHA4MJwpnY/maxresdefault.webp" type="image/webp">
<img class="video__media" src="https://i.ytimg.com/vi/neHA4MJwpnY/maxresdefault.jpg" alt="1. Пилот, разборы, ответы и лайвы">
</picture>
</a>
<button class="video__button" aria-label="Запустить видео">
<svg width="68" height="48" viewBox="0 0 68 48"><path class="video__button-shape" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path><path class="video__button-icon" d="M 45,24 27,14 27,34"></path></svg>
</button>
</div>
<script src="video.js"></script>
</body>
</html>
50 changes: 50 additions & 0 deletions 12/before.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title></title>
<style>
.page {
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}

.video {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
background-color: #000000;
}

.video__embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body class="page">
<div class="video">
<iframe class="video__embed" width="512" height="288"
src="https://www.youtube.com/embed/neHA4MJwpnY"></iframe>
</div>
<div class="video">
<iframe class="video__embed" width="512" height="288"
src="https://www.youtube.com/embed/neHA4MJwpnY"></iframe>
</div>
<div class="video">
<iframe class="video__embed" width="512" height="288"
src="https://www.youtube.com/embed/neHA4MJwpnY"></iframe>
</div>
<div class="video">
<iframe class="video__embed" width="512" height="288"
src="https://www.youtube.com/embed/neHA4MJwpnY"></iframe>
</div>
</body>
</html>
6 changes: 6 additions & 0 deletions 12/page.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.page {
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px;
}
68 changes: 68 additions & 0 deletions 12/video.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
.video {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
background-color: #000000;
}

.video__link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.video__media {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}

.video__button {
position: absolute;
top: 50%;
left: 50%;
z-index: 1;
display: none;
padding: 0;
width: 68px;
height: 48px;
border: none;
background-color: transparent;
transform: translate(-50%, -50%);
cursor: pointer;
}

.video__button-shape {
fill: #212121;
fill-opacity: 0.8;
}

.video__button-icon {
fill: #ffffff;
}

.video__button:focus {
outline: none;
}

.video:hover .video__button-shape,
.video__button:focus .video__button-shape {
fill: #ff0000;
fill-opacity: 1;
}

/* Enabled */

.video--enabled {
cursor: pointer;
}

.video--enabled .video__button {
display: block;
}
51 changes: 51 additions & 0 deletions 12/video.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
function findVideos() {
let videos = document.querySelectorAll('.video');

for (let i = 0; i < videos.length; i++) {
setupVideo(videos[i]);
}
}

function setupVideo(video) {
let link = video.querySelector('.video__link');
let media = video.querySelector('.video__media');
let button = video.querySelector('.video__button');
let id = parseMediaURL(media);

video.addEventListener('click', () => {
let iframe = createIframe(id);

link.remove();
button.remove();
video.appendChild(iframe);
});

link.removeAttribute('href');
video.classList.add('video--enabled');
}

function parseMediaURL(media) {
let regexp = /https:\/\/i\.ytimg\.com\/vi\/([a-zA-Z0-9_-]+)\/maxresdefault\.jpg/i;
let url = media.src;
let match = url.match(regexp);

return match[1];
}

function createIframe(id) {
let iframe = document.createElement('iframe');

iframe.setAttribute('allowfullscreen', '');
iframe.setAttribute('src', generateURL(id));
iframe.classList.add('video__media');

return iframe;
}

function generateURL(id) {
let query = '?rel=0&showinfo=0&autoplay=1';

return 'https://www.youtube.com/embed/' + id + query;
}

findVideos();
Loading

0 comments on commit e5901c1

Please sign in to comment.