<commit_before><!DOCTYPE HTML>
<html lang="en">
<head>
	<title>Доклад. Frontend.</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=792, user-scalable=no">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<link rel="stylesheet" href="node_modules/shower-ribbon/styles/screen.css">
	<style type="text/css">
		.code-section {
			font-size: 14px;
		}
		pre.half {
			width: 49%;
			display: inline-block;
			vertical-align: top;
		}
		pre, .small-text {
			font-size: 14px;
		}
		.slide p, .slide pre, .slide ul {
			margin: 0 0 30px 0;
		}
	</style>
</head>
<body class="list">
	<header class="caption">
		<h1>Доклад. Frontend.</h1>
		<p><NAME>.</p>
	</header>
	<section class="slide cover" id="Cover"><div>
		<h2>Доклад. Frontend.</h2>
		<p>Современная frontend-разработка.</p>
		<p><NAME>на</p>
		<img src="pictures/dalee-logo.svg" alt="" />
		<style>
			#Cover {
				background-image: url('pictures/cat.jpg');
				background-size: cover;
			}
			#Cover * {
				color: #fff;
				text-align: center;
				text-shadow: 0 0 3px rgba(0,0,0,1);
			}
			#Cover h2 {
				margin:30px 0 0;
				font-size:70px;
				}
			#Cover p {
				margin:10px 0 0;
				font-style:italic;
				font-size:20px;
				}
			#Cover img {
				position: relative;
				width: 100px;
				margin: 20px 0 0 0;
			}
		</style>
	</div></section>
	<section class="slide"><div>
		<h2>Что было раньше.</h2>
		<p>Client-side:</p>
		<ul>
			<li class="next">HTML</li>
			<li class="next">CSS</li>
			<li class="next">JavaScript</li>
		</ul>
		<p class="next">Все это есть и сейчас!</p>
	</div></section>
	<section class="slide"><div>
		<h2>Что же изменилось.</h2>
		<ul>
			<li class="next">Новые технологии</li>
			<li class="next">Новые инструменты</li>
			<li class="next">Новые возможности => новые задачи</li>
		</ul>
		<p class="next">Без их знания невозможно эффективно работать.</p>
	</div></section>
	<section class="slide shout"><div>
		<h2>Технологии</h2>
	</div></section>
	<section class="slide"><div>
		<h2>JavaScript</h2>
		<p>— прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript. JS поддерживаемый сейчас большинством браузеров, работает на ES5.</p>
		<ul>
			<li>Транслирумые языки (CoffeScript, Babel)</li>
			<li>Плагины и библиотеки (JQuery)</li>
			<li>ECMAScript 6</li>
		</ul>
	</div></section>
	<section class="slide"><div>
		<p>Несмотря на то, что большинство разработчиков предпочитают работать с JS через библиотеки, такие как JQuery, необходимо понимать как работает язык и уметь пользваться его возможностями.</p>
	</div></section>
	<section class="slide"><div>
		<img src="pictures/1.png" alt="" style="height: 90%; display: block; margin: 0 auto;">
	</div></section>
	<section class="slide"><div>
		<h2>Шаблонизаторы.</h2>
		<p>Никто уже не пишет HTML руками.</p>
		<ul>
			<li>серверные</li>
			<li>клиентские</li>
		</ul>
	</div></section>
	<section class="slide code-section"><div>
		<b>Haml</b>
		<pre>
			<code>%.container</code>
			<code>  %h1 Заголовок</code>
			<code>  %h2 Подзоголовок</code>
			<code>  %p.text</code>
			<code>	   Текст</code>
		</pre>
		<b>HTML</b>
		<pre>
			<code>&lt;div class="container"&gt;</code>
			<code>	&lt;h1&gt;Заголовок&lt;/h1&gt;</code>
			<code>	&lt;h2&gt;Подаголовок&lt;/h2&gt;</code>
			<code>	&lt;p class="text"&gt;</code>
			<code>		Текст</code>
			<code>	&lt;/p&gt;</code>
			<code>&lt;/div&gt;</code>
		</pre>
	</div></section>
	<section class="slide"><div><commit_msg>slide<commit_after><!DOCTYPE HTML>
<html lang="en">
<head>
	<title>Доклад. Frontend.</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=792, user-scalable=no">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<link rel="stylesheet" href="node_modules/shower-ribbon/styles/screen.css">
	<style type="text/css">
		.code-section {
			font-size: 14px;
		}
		pre.half {
			width: 49%;
			display: inline-block;
			vertical-align: top;
		}
		pre, .small-text {
			font-size: 14px;
		}
		.slide p, .slide pre, .slide ul {
			margin: 0 0 30px 0;
		}
	</style>
</head>
<body class="list">
	<header class="caption">
		<h1>Доклад. Frontend.</h1>
		<p><NAME>гина.</p>
	</header>
	<section class="slide cover" id="Cover"><div>
		<h2>Доклад. Frontend.</h2>
		<p>Современная frontend-разработка.</p>
		<p><NAME></p>
		<img src="pictures/dalee-logo.svg" alt="" />
		<style>
			#Cover {
				background-image: url('pictures/cat.jpg');
				background-size: cover;
			}
			#Cover * {
				color: #fff;
				text-align: center;
				text-shadow: 0 0 3px rgba(0,0,0,1);
			}
			#Cover h2 {
				margin:30px 0 0;
				font-size:70px;
				}
			#Cover p {
				margin:10px 0 0;
				font-style:italic;
				font-size:20px;
				}
			#Cover img {
				position: relative;
				width: 100px;
				margin: 20px 0 0 0;
			}
		</style>
	</div></section>
	<section class="slide"><div>
		<h2>Что было раньше.</h2>
		<p>Client-side:</p>
		<ul>
			<li class="next">HTML</li>
			<li class="next">CSS</li>
			<li class="next">JavaScript</li>
		</ul>
		<p class="next">Все это есть и сейчас!</p>
	</div></section>
	<section class="slide"><div>
		<h2>Что же изменилось.</h2>
		<ul>
			<li class="next">Новые технологии</li>
			<li class="next">Новые инструменты</li>
			<li class="next">Новые возможности => новые задачи</li>
		</ul>
		<p class="next">Без их знания невозможно эффективно работать.</p>
	</div></section>
	<section class="slide shout"><div>
		<h2>Технологии</h2>
	</div></section>
	<section class="slide"><div>
		<h2>JavaScript</h2>
		<p>— прототипно-ориентированный сценарный язык программирования. Является реализацией языка ECMAScript. JS поддерживаемый сейчас большинством браузеров, работает на ES5.</p>
		<ul>
			<li>Транслирумые языки (CoffeScript, Babel)</li>
			<li>Плагины и библиотеки (JQuery)</li>
			<li>ECMAScript 6</li>
		</ul>
	</div></section>
	<section class="slide"><div>
		<p>Несмотря на то, что большинство разработчиков предпочитают работать с JS через библиотеки, такие как JQuery, необходимо понимать как работает язык и уметь пользваться его возможностями.</p>
	</div></section>
	<section class="slide"><div>
		<img src="pictures/1.png" alt="" style="height: 90%; display: block; margin: 0 auto;">
	</div></section>
	<section class="slide"><div>
		<h2>Шаблонизаторы.</h2>
		<p>Никто уже не пишет HTML руками.</p>
		<ul>
			<li>серверные</li>
			<li>клиентские</li>
		</ul>
	</div></section>
	<section class="slide code-section"><div>
		<b>Haml</b>
		<pre>
			<code>%.container</code>
			<code>  %h1 Заголовок</code>
			<code>  %h2 Подзоголовок</code>
			<code>  %p.text</code>
			<code>	   Текст</code>
		</pre>
		<b>HTML</b>
		<pre>
			<code>&lt;div class="container"&gt;</code>
			<code>	&lt;h1&gt;Заголовок&lt;/h1&gt;</code>
			<code>	&lt;h2&gt;Подаголовок&lt;/h2&gt;</code>
			<code>	&lt;p class="text"&gt;</code>
			<code>		Текст</code>
			<code>	&lt;/p&gt;</code>
			<code>&lt;/div&gt;</code>
		</pre>
	</div></section>
	<section class="slide code-section"><div>
		<pre>
			<code>{</code>
			<code>	"name": "Lisa",</code>
			<code>	"profession": "frontend-developer",</code>
			<code>	"city": "Moscow"</code>
			<code>}</code>
		</pre>
		<b>mustache</b>
		<pre>
			<code>&lt;dl&gt;</code>
			<code>	&lt;dt&gt;Имф&lt;/dt&gt;</code>
			<code>	&lt;dd&gt;{{name}}&lt;/dd&gt;</code>
			<code>	&lt;dt&gt;Профессия&lt;/dt&gt;</code>
			<code>	&lt;dd&gt;{{profession}}&lt;/dd&gt;</code>
			<code>	&lt;dt&gt;Город&lt;/dt&gt;</code>
			<code>	&lt;dd&gt;{{city}}&lt;/dd&gt;</code>
			<code>&lt;/dl&gt;</code>
		</pre>
	</div></section>
	<section class="slide"><div>
{'fraction_non_alphanumeric': 0.20852641334569044, 'fraction_numerical': 0.01827088574076526, 'mean_word_length': 3.790107799619531, 'pattern_counts': {'":': 3, '<': 345, '<?xml version=': 0, '>': 347, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2040658', 'n_tokens_mistral': 3735, 'n_tokens_neox': 3424, 'n_words': 607}