presentations/meetup-hashtables.git

Samo Penic

2019-10-23 2d5ffe74fe63fe7b29640986207961ef58cdee63

commit \| author \| age
c43c7b	1	<html lang="en">
SP	2	<head>
	3	<meta charset="utf-8" />
	4	<meta name="viewport" content="width=1024" />
	5	<meta name="apple-mobile-web-app-capable" content="yes" />
	6	<title>Ljubljana Hardware Meetup :: Sputnik, 24.10.2019</title>
	7
	8	<meta name="description" content="Short presentation of what hash tabes are, how they are implemented and how to use them when you are an electrical engineer. This presentation is based on impress.js default demo presentation" />
	9	<meta name="author" content="Samo Penic" />
	10
	11	<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold\|PT+Sans:400,700,400italic,700italic\|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
	12
	13	<link href="impress.js/css/impress-demo.css" rel="stylesheet" />
	14
	15	<link rel="shortcut icon" href="favicon.png" />
	16	<link rel="apple-touch-icon" href="apple-touch-icon.png" />
0d52a3	17	<style>
SP	18	div.linkedlist{
	19	width:120px;height:35px;border:1px solid #000;font-size:16px;display:inline-block;padding-left:10px;margin-left:30px;
	20	}
	21	div.linkedlist::before{
	22	content: '\1F82A';
	23	font-size: 16pt;
	24	left: -1.5em;
	25	margin-top:-5px;
	26	position: relative;
	27	}
	28
	29	div.addrvertical{
	30	width:90px;height:35px;border:1px solid #000;background:grey;color:white;font-size:16px;display:inline-block
	31	}
	32
	33	</style>
c43c7b	34	</head>
SP	35
	36	<body class="impress-not-supported">
	37
	38	<div class="fallback-message">
	39	<p>Your browser <b>doesn't support the features required</b> by impress.js, so you are presented with a simplified version of this presentation.</p>
	40	<p>For the best experience please use the latest <b>Chrome</b>, <b>Safari</b> or <b>Firefox</b> browser.</p>
	41	</div>
	42
	43	<div id="impress">
2bee68	44	<script>
SP	45	var names;
	46	var phones;
	47	var memory;
2d5ffe	48	var backupmemory;
2bee68	49	var insert_idx=0;
0d52a3	50	var insert_idx_without_collision=0;
2bee68	51	function hash(stringval){
SP	52	hashval= 0;
	53	strlen=stringval.length;
	54	i=0;
	55	for(i=0;i<strlen;i++){
	56	hashval=hashval+stringval.charCodeAt(0);
	57	}
	58	console.log(stringval + " == " + hashval %13);
	59	return hashval % 13;
	60	}
	61
	62	function currentInner(element,data_index){
	63	element.innerHTML="Inserting <b>"+names[data_index]+ "</b>. Calculated hash_function is: <b>" + hash(names[data_index])+"</b>";
	64	}
	65
	66
	67
0d52a3	68	function insertMissingIntoLL(data_index){
SP	69	if(data_index==-1) data_index=insert_idx;
	70	hashval=hash(names[data_index]);
	71	console.log("f"+hashval);
	72	elll=document.getElementById("ll"+hashval);
	73	elll.innerHTML=elll.innerHTML+"<div class='linkedlist'>"+names[data_index]+"</div>";
	74
	75	memory[hashval]=data_index;
	76	insert_idx++;
	77	if(insert_idx==8){
	78	alert("Completed!");
	79	}
	80	else {
	81	currentInner(document.getElementById("s1current"), insert_idx);
	82	currentInner(document.getElementById("currll"), insert_idx);
	83	}
	84
	85	}
	86
d01ede	87	function insertMissingIntoOpen(data_index){
SP	88	insert_idx=insert_index_without_collision;
2d5ffe	89	if(data_index==-1) data_index=insert_idx;
d01ede	90	hashval=hash(names[data_index]);
SP	91	console.log("f"+hashval);
2d5ffe	92	while(backupmemory[hashval]!=-1) hashval=(hashval+1)%13;
SP	93	backupmemory[hashval]=data_index;
d01ede	94	insert_idx++;
2d5ffe	95	insert_index_without_collision++;
SP	96	//else {
	97	console.log(names[data_index] + "==> REMAPPED ==>" + hashval);
d01ede	98
SP	99	el1=document.getElementById("o"+hashval);
	100	el2=document.getElementById("of"+hashval);
	101
	102	el1.innerHTML=names[data_index];
	103	el2.innerHTML=phones[data_index];
2d5ffe	104	if(insert_idx==8){
SP	105	alert("Completed!");
	106	document.getElementById("open1current").innerHTML="DONE!";
	107	} else{
	108	currentInner(document.getElementById("open1current"), insert_idx);
	109	}
	110	//}
d01ede	111
SP	112	}
0d52a3	113
2bee68	114	function insertIntoMemory(data_index){
SP	115	if(data_index==-1) data_index=insert_idx;
	116	hashval=hash(names[data_index]);
	117	console.log("f"+hashval);
	118	if(memory[hashval]!=-1){
	119	alert("Collision!!!");
0d52a3	120	insert_index_without_collision=insert_idx;
2bee68	121	}
SP	122	else{
	123	el1=document.getElementById("f"+hashval);
	124	el2=document.getElementById("nf"+hashval);
	125
	126	el1.innerHTML=names[data_index];
	127	el2.innerHTML=phones[data_index];
0d52a3	128
SP	129	elll=document.getElementById("ll"+hashval);
	130	elll.innerHTML=elll.innerHTML+"<div class='linkedlist'>"+names[data_index]+"</div>";
d01ede	131
SP	132	el1=document.getElementById("o"+hashval);
	133	el2=document.getElementById("of"+hashval);
	134
	135	el1.innerHTML=names[data_index];
	136	el2.innerHTML=phones[data_index];
0d52a3	137
2bee68	138	memory[hashval]=data_index;
2d5ffe	139	backupmemory[hashval]=data_index;
2bee68	140	insert_idx++;
0d52a3	141	if(insert_idx==8){
2bee68	142	alert("Completed!");
SP	143	}
	144	else {
	145	currentInner(document.getElementById("s1current"), insert_idx);
d01ede	146	currentInner(document.getElementById("open1current"), insert_idx);
0d52a3	147	currentInner(document.getElementById("currll"), insert_idx);
2bee68	148	}
SP	149	}
	150	}
	151
	152
	153	function loadNames(){
	154	names=[
	155	document.getElementById("name1").value,
	156	document.getElementById("name2").value,
	157	document.getElementById("name3").value,
	158	document.getElementById("name4").value,
	159	document.getElementById("name5").value,
	160	document.getElementById("name6").value,
	161	document.getElementById("name7").value,
	162	document.getElementById("name8").value
	163	];
	164	phones=[1,2,3,4,5,6,7,8]
	165	for(i=0;i<8;i++){
2d5ffe	166	phones[i]="(01)"+Math.floor((Math.random() * 9000) + 1000)+"-"+Math.floor((Math.random() * 900) + 100);
2bee68	167	}
SP	168	memory=[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1];
2d5ffe	169	backupmemory=[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,-1];
2bee68	170
SP	171
	172	/* Slide 1 actions */
	173	//Names goes into storages s0-s4 on first slide...
	174	document.getElementById("s0").innerHTML=names[0];
	175	document.getElementById("s1").innerHTML=names[1];
	176	document.getElementById("s2").innerHTML=names[2];
	177	document.getElementById("s3").innerHTML=names[3];
	178	document.getElementById("n0").innerHTML=phones[0];
	179	document.getElementById("n1").innerHTML=phones[1];
	180	document.getElementById("n2").innerHTML=phones[2];
	181	document.getElementById("n3").innerHTML=phones[3];
	182	//
	183	document.getElementById("intro0").innerHTML=names[0];
	184	document.getElementById("intro1").innerHTML=names[0];
	185	document.getElementById("s0result").innerHTML=document.getElementById("s0").innerHTML;
2d5ffe	186	document.getElementById("s3value").innerHTML=document.getElementById("s3").innerHTML;
SP	187	document.getElementById("s0number").innerHTML=document.getElementById("n0").innerHTML;
2bee68	188	/* End Slide 1 */
SP	189
	190	/Filling the values into array demo until collision occurs /
	191
	192	currentInner(document.getElementById("s1current"), 0);
	193	/end demo until collision/
	194
	195	}
	196
	197
	198	</script>
c43c7b	199
SP	200
	201	<div id="naslovnica" class="step slide" data-x="-1000" data-y="-1500">
	202	<h1>Hardware Meetup - Sputnik, 24. october 2019</h1>
	203	<q>Hash tables</q><br />
	204
	205	<p class="center"> ... the background of their implementations.</p><br />
	206
	207	<p class="footnote">Samo Penič</p>
	208	</div>
	209
	210	<!--
	211
	212	The `id` attribute of the step element is used to identify it in the URL, but it's optional.
	213	If it is not defined, it will get a default value of `step-N` where N is a number of slide.
	214
	215	So in the example below it'll be `step-2`.
	216
	217	The hash part of the url when this step is active will be `#/step-2`.
	218
	219	You can also use `#step-2` in a link, to point directly to this particular step.
	220
	221	Please note, that while `#/step-2` (with slash) would also work in a link it's not recommended.
	222	Using classic `id`-based links like `#step-2` makes these links usable also in fallback mode.
	223
	224	-->
	225	<div class="step slide vsebina" data-x="-250" data-y="-1250" data-z="1500">
2bee68	226	<h1 class="naslov">About me...</h1>
c43c7b	227	<img class="samo" src="images/Samo1.png">
SP	228
	229	<ul>
2bee68	230	<li> phD in Electrical engineering</li>
SP	231	<li> working at the Faculty of electrical engineering, teaching fundamentals of EM fields</li>
	232	<li> promoting open source since... ever?</li>
	233	<li> hobby programmer </li>
c43c7b	234	</ul>
SP	235
	236	</div>
	237
2bee68	238	<div class="step slide vsebina" data-x="-250" data-y="-500" data-z="750" data-rotate-x="90">
SP	239	<h1 class="naslov">Let's fill in the data...</h1>
	240	<form>
	241	<ol>
	242	</li> Name: <input id="name1"></input><br />
	243	</li> Name: <input id="name2"></input><br />
	244	</li> Name: <input id="name3"></input><br />
	245	</li> Name: <input id="name4"></input><br />
	246	</li> Name: <input id="name5"></input><br />
	247	</li> Name: <input id="name6"></input><br />
	248	</li> Name: <input id="name7"></input><br />
	249	</li> Name: <input id="name8"></input><br />
	250	</ol><br /><br />
	251	<button onClick="loadNames()">Save data</button>
	252	</form>
	253	</div>
c43c7b	254
2bee68	255	<div class="step slide vsebina" data-x="0" data-y="-1500" data-z="0">
SP	256	<h1 class="naslov">What is a hash table</h1>
	257	<p>Sometimes also called associative array or dictionary. <b>It is a data structure used to map key into values</b></p>
	258	<br /><br />
	259	<p class="center" style="font-size:18pt">data["<span id='intro0'>Yoda</span>"] gives us all the information stored for <span id="intro1">Yoda</span>.</p>
	260	<br /><br />
	261	<p style="font-size:18pt">It is widely used to build things such us dictionaries, telephone books, book indexes, ...</p><br />
	262	<p>Hash table provide <b>Insertion, Deletion and Retreival</b> in <b>constant time</b>!</p>
	263	</div>
	264
	265
	266
	267	<div class="step slide vsebina" data-x="1000" data-y="-1500" data-z="0">
	268	<h1 class="naslov">However...</h1>
	269
	270	<p class="" style="margin-bottom:30px">The memory is accessible by addressing the data numerically.</p>
c43c7b	271
2bee68	272	<span style="width:150px;height:110px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white">data[0]</div><div id="s0">Yoda</div><div id="n0" style="font-size:15pt">(01)123-1234</div></span>
SP	273	<span style="width:150px;height:110px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white">data[1]</div><div id="s1">Obi</div><div id="n1" style="font-size:15pt">(01)222-2222</div></span>
	274	<span style="width:150px;height:110px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white">data[2]</div><div id="s2">Luke</div><div id="n2" style="font-size:15pt">(01)123-1234</div></span>
	275	<span style="width:150px;height:110px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white">data[3]</div><div id="s3">Darth</div><div id="n3" style="font-size:15pt">(01)111-1111</div></span>
2d5ffe	276	<p style="margin-top:30px;font-size:15pt">e.g.: Accessing the item at memory location data[0] yields name of the person <b><span id="s0result">Yoda</span></b> and person's phone number: <span id="s0number">(01)123-1234</span></p><br />
2bee68	277
SP	278	<p>Finding phone number of <span id="s3value">Darth</span> requires linear search through the array, which is not efficient.</p>
	279
c43c7b	280	</div>
SP	281
	282	<!-- <div id="overview" class="step" data-x="3000" data-y="1500" data-z="0" data-scale="10">
	283	</div>
	284	-->
2bee68	285
SP	286
	287	<div class="step slide vsebina" data-x="2000" data-y="-1500" data-z="0">
	288	<h1 class="naslov">Mapping key to index</h1>
	289
0d52a3	290	<p>... is performed by so called hash functions. It can be as simple as <b>sum(ascii_code[i]) % array_size</b></p><br />
2bee68	291
0d52a3	292	<p>Let's try it out for our phone directory (array_size=13):</p><br />
2bee68	293	<div id="s1current"></div><br />
SP	294	<button onclick="insertIntoMemory(-1);">Insert</button>
	295	<br /><br />
	296
	297	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[0]</div><div id="f0" style="font-size:18px"> </div><div id="nf0" style="font-size:11pt"> </div></span>
	298	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[1]</div><div id="f1" style="font-size:18px"> </div><div id="nf1" style="font-size:11pt"> </div></span>
	299	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[2]</div><div id="f2" style="font-size:18px"> </div><div id="nf2" style="font-size:11pt"> </div></span>
	300	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[3]</div><div id="f3" style="font-size:18px"> </div><div id="nf3" style="font-size:11pt"> </div></span>
	301	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[4]</div><div id="f4" style="font-size:18px"> </div><div id="nf4" style="font-size:11pt"> </div></span>
	302	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[5]</div><div id="f5" style="font-size:18px"> </div><div id="nf5" style="font-size:11pt"> </div></span>
	303	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[6]</div><div id="f6" style="font-size:18px"> </div><div id="nf6" style="font-size:11pt"> </div></span>
	304	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[7]</div><div id="f7" style="font-size:18px"> </div><div id="nf7" style="font-size:11pt"> </div></span>
	305	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[8]</div><div id="f8" style="font-size:18px"> </div><div id="nf8" style="font-size:11pt"> </div></span>
	306	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[9]</div><div id="f9" style="font-size:18px"> </div><div id="nf9" style="font-size:11pt"> </div></span>
	307	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[10]</div><div id="f10" style="font-size:18px"> </div><div id="nf10" style="font-size:11pt"> </div></span>
	308	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[11]</div><div id="f11" style="font-size:18px"> </div><div id="nf11" style="font-size:11pt"> </div></span>
	309	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[12]</div><div id="f12" style="font-size:18px"> </div><div id="nf12" style="font-size:11pt"> </div></span>
	310
	311	</div>
	312
	313
	314	<div class="step slide vsebina" data-x="2000" data-y="-1500" data-z="-1500">
	315	<h1 class="naslov">Collisions!</h1>
	316
	317	<p>They will occur. The probability depends on Load factor (LF=number_of_items/array_size)</p>
	318
	319	<p>We can cope with collisions in multitude of ways:</p>
	320	<ul>
	321	<li>Closed addressing (chaining)
	322	<li>Open addressing (linear probing) (million ways how to do it)
	323	<li>using alternate hash functions (million ways how to do it)
	324	<li>Resize array ;) (not a scientific way to do it)
	325	</ul>
	326	</div>
	327
	328
	329	<div class="step slide vsebina" data-x="2000" data-y="-2500" data-z="0">
	330	<h1 class="naslov">Closed addressing</h1>
0d52a3	331	<table style="width:100%">
SP	332	<col width="70%">
	333	<col width="30%">
	334	<tr>
	335	<td>
	336	<div id='ll0'><div class="addrvertical">data[0]</div></div>
	337	<div id='ll1'><div class="addrvertical">data[1]</div></div>
	338	<div id='ll2'><div class="addrvertical">data[2]</div></div>
	339	<div id='ll3'><div class="addrvertical">data[3]</div></div>
	340	<div id='ll4'><div class="addrvertical">data[4]</div></div>
	341	<div id='ll5'><div class="addrvertical">data[5]</div></div>
	342	<div id='ll6'><div class="addrvertical">data[6]</div></div>
	343	<div id='ll7'><div class="addrvertical">data[7]</div></div>
	344	<div id='ll8'><div class="addrvertical">data[8]</div></div>
	345	<div id='ll9'><div class="addrvertical">data[9]</div></div>
	346	<div id='ll10'><div class="addrvertical">data[10]</div></div>
	347	<div id='ll11'><div class="addrvertical">data[11]</div></div>
	348	<div id='ll12'><div class="addrvertical">data[12]</div></div>
	349	<div id='ll13'><div class="addrvertical">data[13]</div></div>
	350	</td>
	351	<td>
	352	<div id="currll"></div>
	353	<button onclick="insertMissingIntoLL(-1);">Insert</button>
2bee68	354
0d52a3	355	</td>
SP	356
	357	</tr>
	358	</table>
	359
2bee68	360	</div>
SP	361
	362
	363	<div class="step slide vsebina" data-x="2000" data-y="-3500" data-z="0">
	364	<h1 class="naslov">Open addressing</h1>
d01ede	365
SP	366	<div id="open1current"></div><br />
	367	<button onclick="insertMissingIntoOpen(-1);">Insert</button>
	368	<br /><br />
	369
	370	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[0]</div><div id="o0" style="font-size:18px"> </div><div id="of0" style="font-size:11pt"> </div></span>
	371	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[1]</div><div id="o1" style="font-size:18px"> </div><div id="of1" style="font-size:11pt"> </div></span>
	372	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[2]</div><div id="o2" style="font-size:18px"> </div><div id="of2" style="font-size:11pt"> </div></span>
	373	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[3]</div><div id="o3" style="font-size:18px"> </div><div id="of3" style="font-size:11pt"> </div></span>
	374	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[4]</div><div id="o4" style="font-size:18px"> </div><div id="of4" style="font-size:11pt"> </div></span>
	375	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[5]</div><div id="o5" style="font-size:18px"> </div><div id="of5" style="font-size:11pt"> </div></span>
	376	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[6]</div><div id="o6" style="font-size:18px"> </div><div id="of6" style="font-size:11pt"> </div></span>
	377	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[7]</div><div id="o7" style="font-size:18px"> </div><div id="of7" style="font-size:11pt"> </div></span>
	378	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[8]</div><div id="o8" style="font-size:18px"> </div><div id="of8" style="font-size:11pt"> </div></span>
	379	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[9]</div><div id="o9" style="font-size:18px"> </div><div id="of9" style="font-size:11pt"> </div></span>
	380	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[10]</div><div id="o10" style="font-size:18px"> </div><div id="of10" style="font-size:11pt"> </div></span>
	381	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[11]</div><div id="o11" style="font-size:18px"> </div><div id="of11" style="font-size:11pt"> </div></span>
	382	<span style="width:90px;height:100px;border:1px solid #000;margin:0px;display:inline-block;margin-left:-8px;"><div style="background:grey;color:white;font-size:18px">data[12]</div><div id="o12" style="font-size:18px"> </div><div id="of12" style="font-size:11pt"> </div></span>
2bee68	383	</div>
SP	384
	385
	386
	387	<div class="step slide vsebina" data-x="3000" data-y="-1500" data-z="0">
	388	<h1 class="naslov">Hash function properties</h1>
	389	<ul>
	390	<li>Hash function should minimize collisions
	391	<li>Uniformly distribute hash values
	392	<li>Are easy to calculate
	393	</ul>
	394	</div>
	395
	396	<div class="step slide vsebina" data-x="4000" data-y="-1500" data-z="0" data-rotate="90">
	397	<h1 class="naslov">Python dictionaries</h1>
	398	</div>
	399
	400
	401	<div class="step slide vsebina" data-x="4000" data-y="-2500" data-z="0" data-rotate="90">
	402	<h1 class="naslov">Hash tables in firmware</h1>
	403	</div>
	404
	405
	406	<div id="overview" class="step" data-x="3000" data-y="1500" data-z="0" data-scale="10">
	407	</div>
	408
	409
	410
c43c7b	411	</div>
SP	412
	413	<div id="impress-toolbar"></div>
	414
	415	<div class="hint">
	416	<p>Use a spacebar or arrow keys to navigate. <br/>
	417	Press 'P' to launch speaker console.</p>
	418	</div>
	419	<script>
	420	if ("ontouchstart" in document.documentElement) {
	421	document.querySelector(".hint").innerHTML = "<p>Swipe left or right to navigate</p>";
	422	}
	423	</script>
	424
	425	<script src="impress.js/js/impress.js"></script>
	426	<script>impress().init();</script>
	427
	428
	429	</body>
	430	</html>
	431