talk: prepare theses for 404fest

nodkz · Aug 8, 2021 · 1c5d7cf · 1c5d7cf
1 parent e3fa3fd
commit 1c5d7cf
Show file tree

Hide file tree

Showing 146 changed files with 32,443 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "test": "yarn jest",
     "watch": "yarn jest --watch",
     "lint": "eslint --ext .js ./articles",
-    "start": "yarn --cwd ./talks/2021.07.12-should-we-use-graphql start",
+    "start": "yarn --cwd ./talks/2021.09.25-how-to-apollo-client-3 start",
     "w1": "yarn --cwd ./talks/2020.04.08-workshop-graphql-on-client start",
     "w2": "yarn --cwd ./talks/2020.04.07-workshop-graphql-on-server start"
   },

diff --git a/talks/2021.09.25-how-to-apollo-client-3/README.md b/talks/2021.09.25-how-to-apollo-client-3/README.md
@@ -0,0 +1,17 @@
+# Как использовать ApolloClient 3?
+
+Презентация доступна по следующим ссылкам:
+- [темная тема](https://nodkz.github.io/conf-talks/talks/2021.09.25-how-to-apollo-client-3/index.html)
+- [светлая теме](https://nodkz.github.io/conf-talks/talks/2021.09.25-how-to-apollo-client-3/white.html)
+
+--------
+
+Павел Черторогов
+ps.kz, Архитектор информационных систем
+<https://www.dropbox.com/s/22mncow425wsvwu/%20HolyJS%20%D0%BF%D0%BE%D1%80%D1%82%D1%80%D0%B5%D1%82%D1%8B%20%D1%81%D0%BF%D0%B8%D0%BA%D0%B5%D1%80%D0%BE%D0%B2-53.jpg?dl=0>
+
+GraphQL евангелист, разработчик интернет-продуктов, опенсорс-мейнтейнер. Сделал более 15 докладов о GraphQL и провел более 5 воркшопов как на клиенте, так и сервере. В веб разработке с 2001 года. Обладает обширными практическими знаниями по бэкенду, фронтенду, администрированию и построению архитектуры. В 2016 начал разработку graphql-compose (генератора GraphQL-схем). Написал много материала о GraphQL на русском – <https://github.com/nodkz/conf-talks>. В 2019 начал формировать best practice по дизайну GraphQL-схем – <https://graphql-rules.com>.
+
+Twitter – @nodkz
+Telegram – <https://t.me/graphql_ru>
+GitHub – <https://github.com/nodkz>
diff --git a/talks/2021.09.25-how-to-apollo-client-3/index.html b/talks/2021.09.25-how-to-apollo-client-3/index.html
@@ -0,0 +1,230 @@
+<!doctype html>
+<html>
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+
+		<title>Как использовать ApolloClient 3? Сентябрь 2021, Pavel Chertorogov</title>
+
+		<link rel="stylesheet" href="reveal.js/css/reveal.css" />
+		<link rel="stylesheet" href="reveal.js/css/theme/nodkz.css" />
+		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
+
+		<!-- Theme used for syntax highlighting of code -->
+		<link rel="stylesheet" href="reveal.js/lib/css/atom-one-dark.css" />
+
+		<style>
+			.line { display: block; }
+			.line.focus { background: #fdf6e3; color: #657b83; }
+			.line.focus .hljs-comment, .line.focus .hljs-quote { color: #93a1a1; }
+
+			code {
+				counter-reset: line;
+			}
+			code > span.line, code > span.line > span.line {
+				counter-increment: line;
+			}
+			code > span.line:before, code > span.line > span.line:before {
+				content: counter(line);
+				text-align: right;
+				color: #454f60;
+				/* border-right: 1px solid #555; */
+				width: 40px;
+				padding-right: 8px;
+				margin-right: 8px;
+				display: inline-block;
+				-webkit-touch-callout: none;
+				-webkit-user-select: none;
+				-khtml-user-select: none;
+				-moz-user-select: none;
+				-ms-user-select: none; 
+				user-select: none;
+			}
+
+			code > span.focus:before {
+				color: #dadada;
+			}
+
+			.slide-menu-button { opacity: 0.1 }
+
+			.red {
+				color: tomato !important;
+			}
+
+			.orange {
+				color: darkorange !important;
+			}
+
+			.green {
+				color: greenyellow !important;
+			}
+
+			.apollo {
+				color: #15a4a2 !important;
+			}
+
+			.gray, .grey {
+				color: #818a91 !important;
+			}
+
+			.code-500 > * > code {
+				max-height: 500px !important;
+			}
+
+			.twitter-link {
+				position: absolute;
+				display: block;
+				left: 8px;
+				top: 8px;
+				z-index: 31;
+				font-family: Helvetica, sans-serif;
+				font-size: 16px !important;
+				line-height: 1;
+				color: #8093b3;
+				padding: 5px;
+			}
+
+			.reveal li {
+				line-height: 1.15;
+				padding-bottom: 20px;
+			}
+		</style>
+	</head>
+	<body>
+		<div class="reveal">
+			<div class="slides">
+				<section data-markdown="slides/00-start/index.md" data-separator-vertical="^-----\n"></section>
+				<section data-markdown="slides/01-need-if/index.md" data-separator-vertical="^-----\n"></section>
+				<section data-markdown="slides/02-dont-need-if/index.md" data-separator-vertical="^-----\n"></section>
+				<section data-markdown="slides/03-multiple-apis/index.md" data-separator-vertical="^-----\n"></section>
+				<section data-markdown="slides/05-summary/index.md" data-separator-vertical="^-----\n"></section>
+				<section data-markdown="slides/10-end/index.md" data-separator-vertical="^-----\n"></section>
+			</div>
+			<div class="twitter-link"><a href="https://twitter.com/nodkz" target="_blank"><img src="./slides/assets/logo/twitter.png" style="height: 1.4em; border: none; background: none; box-shadow: none; vertical-align: middle;" /> nodkz</a></div>
+		</div>
+
+		<script src="reveal.js/lib/js/head.min.js"></script>
+		<script src="reveal.js/js/reveal.js"></script>
+
+		<script>
+			Reveal.initialize({
+				pdfSeparateFragments: false,
+				dependencies: [
+					{ src: 'reveal.js/plugin/fixedMarkdown/marked.js' },
+					{ src: 'reveal.js/plugin/fixedMarkdown/markdown.js' },
+					{ src: 'reveal.js/plugin/notes/notes.js', async: true },
+					{ 
+						src: 'reveal.js/plugin/highlight.pack.js',
+						callback: function() {
+							hljs.registerLanguage("graphql",function(e){return{aliases:["gql"],k:{keyword:"query mutation subscription|10 type input schema directive interface union scalar fragment|10 enum on ...",literal:"true false null"},c:[e.HCM,e.QSM,e.NM,{cN:"type",b:"[^\\w][A-Z][a-z]",e:"\\W",eE:!0},{cN:"literal",b:"[^\\w][A-Z][A-Z]",e:"\\W",eE:!0},{cN:"variable",b:"\\$",e:"\\W",eE:!0},{cN:"keyword",b:"[.]{2}",e:"\\."},{cN:"meta",b:"@",e:"\\W",eE:!0}],i:/([;<']|BEGIN)/}});
+						},
+					},
+					{
+						src: 'reveal.js/plugin/reveal-code-focus.js',
+						async: true,
+						callback: function() {
+							RevealCodeFocus();
+						}
+					},
+					{ src: 'reveal.js/plugin/elapsed-time-bar.js'},
+					// { src: 'reveal.js/plugin/spotlight.js'},
+					{ src: 'reveal.js/plugin/reveal.js-menu/menu.js' },
+					// { src: 'https://d3js.org/d3.v4.min.js' },
+					// { src: 'reveal.js/plugin/d3js.js'},
+				],
+				// https://github.com/tkrkt/reveal.js-elapsed-time-bar
+				allottedTime: 40 * 60000,
+				progressBarHeight: 3,
+				barColor: 'rgb(66, 128, 246, 0.6)',
+				// https://github.com/denniskniep/reveal.js-plugin-spotlight
+				spotlight: {
+					size: 60,
+					toggleSpotlightOnMouseDown: true,
+					presentingCursor: "initial", // change to "none"
+					presentingCursorOnlyVisibleWhenSpotlightVisible: false
+				},
+				// https://github.com/denehyg/reveal.js-menu
+				menu: {
+					side: 'left',
+					width: 'normal', 	// 'normal', 'wide', 'third', 'half', 'full', or any valid css length value
+					numbers: false, // Add slide numbers to the titles in the slide list
+					titleSelector: 'h1, h2, h3, h4, h5, h6',
+					useTextContentForMissingTitles: false,
+					hideMissingTitles: false,
+					markers: true,
+					openButton: true,
+					keyboard: true,
+					sticky: false,
+					autoOpen: false,
+					delayInit: false,
+					openOnInit: false,
+					loadIcons: true
+				},
+				// standard options
+				history: true,
+				width: 1280,
+				height: 720,
+				slideNumber: true,
+				showSlideNumber: 'all',
+				keyboard: {
+					13: function () { // pause/resume time when Enter is pressed
+						ElapsedTimeBar.isPaused ? ElapsedTimeBar.resume() : ElapsedTimeBar.pause();
+					},
+					82: function () { // reset timer when 'r' is pressed
+						ElapsedTimeBar.reset();
+					},
+					37: function () { // left
+						Reveal.isOverview() ? Reveal.navigateLeft() : Reveal.navigatePrev();
+					},
+					39: function () { // right
+						Reveal.isOverview() ? Reveal.navigateRight() : Reveal.navigateNext();
+					},
+					38: function () { // up
+						Reveal.isOverview() ? Reveal.navigateUp() : Reveal.navigatePrev();
+					},
+					40: function () { // down
+						Reveal.isOverview() ? Reveal.navigateDown() : Reveal.navigateNext();
+					},
+					33: 'navigatePrev', // page up
+					34: 'navigateNext', // page down
+					36: 'navigatePrev', // home
+					35: 'navigateNext', // end
+				},
+			});
+
+			// Open all links in new window
+			Reveal.addEventListener('ready', function(event) {
+				var links = document.links;
+				for (var i = 0, linksLength = links.length; i < linksLength; i++) {
+					links[i].target = '_blank';
+				}
+			});			
+
+			// Set 0 index for vertical slide
+			// var stateHolder = 0;
+			// try {
+			// 	// On page load take slide from URL
+			// 	stateHolder = parseInt(window.location.hash.split('/')[1]) || 0;
+			// } catch (e) { 
+			// 	//o_O
+			// }
+			// Reveal.addEventListener('slidechanged', function( event ) {
+			// 	var state = Reveal.getState();
+			// 	if (state.indexh < stateHolder || state.indexh > stateHolder){
+			// 		state.indexv = 0;
+			// 		Reveal.setState(state);
+			// 	}
+			// 	stateHolder = state.indexh;
+			// });
+		</script>
+
+		<!-- 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 ) ? 'reveal.js/css/print/pdf.css' : 'reveal.js/css/print/paper.css';
+			document.getElementsByTagName( 'head' )[0].appendChild( link );
+		</script>
+	</body>
+</html>
diff --git a/talks/2021.09.25-how-to-apollo-client-3/package.json b/talks/2021.09.25-how-to-apollo-client-3/package.json
@@ -0,0 +1,14 @@
+{
+  "version": "0.0.1",
+  "name": "nodkz-reveal-talk",
+  "private": true,
+  "description": "Some talk",
+  "scripts": {
+    "start": "cd reveal.js && yarn && cd .. && ./reveal.js/node_modules/.bin/grunt --gruntfile ./reveal.js/Gruntfile.js serve --root=../"
+  },
+  "author": {
+    "name": "Pavel Chertorogov",
+    "email": "[email protected]"
+  },
+  "license": "CC-BY-NC-4.0"
+}