1 00:00:05,240 --> 00:00:09,310 Moin und herzlich willkommen zur Folge 40 von einfach komplex. 2 00:00:09,710 --> 00:00:12,350 Ich weiß nicht, ob ihr schon gesehen hat, aber wir sind 3 00:00:12,360 --> 00:00:16,490 natürlich schon auf Platz 16 der Technology Spotify Technology 4 00:00:16,500 --> 00:00:18,920 Podcast Charts angekommen. Das ist super cool. 5 00:00:18,930 --> 00:00:22,350 Also mal vielen Dank, dass ihr immer zuhört und uns so treu 6 00:00:22,360 --> 00:00:26,730 seid, hätte mir gedacht und wir versuchen natürlich ja die 7 00:00:26,740 --> 00:00:30,300 Qualität des Contents aufrechtzuerhalten und deshalb 8 00:00:30,310 --> 00:00:32,439 geht es heute um die Chrome Developer Tools. 9 00:00:32,710 --> 00:00:35,630 Burkhard hat gesagt, die sollte man eigentlich kenne, ich kenne 10 00:00:35,640 --> 00:00:39,620 die auch schon so ein bisschen. Ich glaube, ich weiß maximal ja 11 00:00:39,630 --> 00:00:43,860 5% 10% was man machen kann. Burkhard, Warum muss man sie 12 00:00:43,870 --> 00:00:46,230 dann unbedingt kennen und warum sind die so cool? 13 00:00:46,880 --> 00:00:50,140 Ja, ich glaube, vielleicht kennen viele den Chrome als 14 00:00:50,150 --> 00:00:52,680 Browser. Also morgen erstmal von meiner 15 00:00:52,690 --> 00:00:56,700 Seite aus, aber egal und eigentlich was so richtig krass 16 00:00:56,710 --> 00:00:58,940 ist an dem Chrome ist eigentlich total versteckt, hat glaub ich 17 00:00:58,950 --> 00:01:01,210 normal der normale irgendwie noch nie gesehen. 18 00:01:01,580 --> 00:01:04,780 Man kann f 12 drücken und ich hab gerade geguckt ich sitz 19 00:01:04,790 --> 00:01:07,600 heute vorm Rechner aber ich ich brauch das jetzt die Developer 20 00:01:07,690 --> 00:01:09,240 von der Nase um diese Folge zu machen. 21 00:01:09,310 --> 00:01:11,190 Ja, wir sitzen hier ganz anders als sonst. 22 00:01:11,200 --> 00:01:13,570 Muss man dafür. Habe der Ton ist auch in Ordnung 23 00:01:13,580 --> 00:01:18,010 heute aber werden genau inspect ist glaube ich genau. 24 00:01:18,020 --> 00:01:20,650 Man kann also mit Rechtsklick wohl auch auf die Webseite gehen 25 00:01:20,660 --> 00:01:23,190 und dann kommt n Menü und. Also wenn nicht gerade die 26 00:01:23,200 --> 00:01:26,560 Webseite den Rechtsklick abholt, kann man auf Inspect drücken. 27 00:01:26,570 --> 00:01:28,920 Ich glaube, das ist der richtige Knopf und aber das gleiche wie f 28 00:01:28,930 --> 00:01:32,570 12 drücke f 12 und dann kommt man in so einem geheimnisvolle 29 00:01:32,580 --> 00:01:36,100 Welt der Developer Tools. Der Name sagt eigentlich alles, 30 00:01:36,560 --> 00:01:40,230 ich glaube es ist das Tool, ist halt ja Brot und Butter für alle 31 00:01:40,240 --> 00:01:42,710 die irgendwie Frontend Entwicklung machen im im Browser 32 00:01:42,720 --> 00:01:46,230 und man kann damit richtig richtig richtig richtig viel 33 00:01:46,240 --> 00:01:48,630 machen ja also und das wollen wir heute mal ein bisschen 34 00:01:48,640 --> 00:01:50,840 leuchten nur dann wirklich nur die Taschenlampe oben drüber 35 00:01:50,850 --> 00:01:54,340 halten, daraus könnte man locker 56 folgen machen wenn die 36 00:01:54,350 --> 00:01:57,760 reingeht. Vielleicht können wir ja mal ein 37 00:01:57,770 --> 00:02:00,020 Thema speziell anleuchten. Wollte irgendwas könnt ihr ja 38 00:02:00,030 --> 00:02:02,600 schreiben, wir gehen mal so oben drüber, so dass wir überhaupt 39 00:02:02,610 --> 00:02:04,300 dieses Ding da vorstellen, was da los ist. 40 00:02:04,310 --> 00:02:07,380 So, ja das ist der Plan. Das klingt gut und und warum 41 00:02:07,390 --> 00:02:08,750 Chrome vielleicht das im Hintergrund? 42 00:02:08,759 --> 00:02:12,990 Ich hab mal geschaut, Burkhard, das ist das, konnte man sich 43 00:02:13,000 --> 00:02:16,280 denken, der berühmteste oder am meisten genutzte Browser 44 00:02:16,290 --> 00:02:21,320 weltweit, und zwar mit 63%, mit weitem Abstand vor vor Safari, 45 00:02:21,360 --> 00:02:25,150 die so knapp 20% haben und dann weit abgeschlagen kommen viele 46 00:02:25,160 --> 00:02:29,410 andere kleinere Browser was ich Edge und Firefox und sonstwas. 47 00:02:29,650 --> 00:02:31,930 Also Chrome ist einfach extrem relevant. 48 00:02:32,560 --> 00:02:37,050 Ja, für uns alle und wenn es geht ja 16 Menschen auf der Welt 49 00:02:37,060 --> 00:02:39,850 benutzen einfach Chrome. Ja, und das ist ja nicht so, 50 00:02:39,860 --> 00:02:43,370 dass also es gibt soweit ich war jetzt fast in allen Browsern so 51 00:02:43,380 --> 00:02:45,770 ne Art sind developer Tools, dann mindestens Konsole, die 52 00:02:45,780 --> 00:02:47,610 sind natürlich alle unterschiedlich in der 53 00:02:47,620 --> 00:02:50,930 Mächtigkeit, aber es ist ja hier an der Stelle, wenn ich Frontend 54 00:02:50,940 --> 00:02:54,460 entwickelt vielleicht gar nicht ultra relevant, ob das jetzt die 55 00:02:54,470 --> 00:02:57,930 Chrome developer Tools sind oder irgendwelche anderen, weil ich 56 00:02:57,970 --> 00:03:00,900 einfach, also das ist einfach so richtig analysiert, sehr 57 00:03:00,960 --> 00:03:03,880 objektiv einfach das was ich da irgendwie auf diese Webseite 58 00:03:03,890 --> 00:03:06,400 ändere. Und ich kann mir meine CSS und 59 00:03:06,410 --> 00:03:08,960 des und weiter alles super angucken und auch hin und her 60 00:03:08,970 --> 00:03:12,540 spielen. Und das ist ja auch richtig für 61 00:03:12,870 --> 00:03:13,640 ne. Also würde ich dann 62 00:03:13,650 --> 00:03:16,010 typischerweise in kurz oder irgendwie und dann ist das 63 00:03:16,020 --> 00:03:19,300 trotzdem Funktionabel in Safari oder was weiß ich für Internet 64 00:03:19,310 --> 00:03:21,620 Explorer na Internet Explorer vielleicht. 65 00:03:22,050 --> 00:03:24,170 Gibt es gar nicht mehr. Ich Internet Explorer ist 66 00:03:24,850 --> 00:03:27,410 mindestens abgekündigt, das ist jetzt. 67 00:03:27,420 --> 00:03:30,180 Nehmen wir den ja genau, Edge heißt der heißt ja auch unter 68 00:03:30,190 --> 00:03:35,260 Entwicklern liebevoll Internet explodiere nicht gut. 69 00:03:35,360 --> 00:03:38,280 Du, ich weiß nicht, ob sie jetzt rein passt oder besser später. 70 00:03:38,590 --> 00:03:42,440 Erzähl mal, wie wir das dann genau aussieht, wie man das denn 71 00:03:42,450 --> 00:03:44,700 jetzt programmiert. Wie bezieht man jetzt sag ich 72 00:03:44,710 --> 00:03:48,790 mal diese developer Tools? 1 seine in seinen Alltag, der 73 00:03:48,800 --> 00:03:50,130 der Programmierung und der Entwicklung. 74 00:03:50,140 --> 00:03:52,510 Oder sollen wir das lieber besprechen, wenn du das bisschen 75 00:03:52,520 --> 00:03:56,830 genauer vorgestellt hast? Nö, können wir schon mal eisern. 76 00:03:57,540 --> 00:04:01,380 Also ich hab hier 3 Bildschirme vor mir und ich habe also wenn 77 00:04:01,390 --> 00:04:04,930 ich am Frontend arbeite, dann habe ich immer links, quasi dass 78 00:04:04,970 --> 00:04:08,440 das entstehende Frontend, das direkt von und dass man jetzt 79 00:04:08,450 --> 00:04:11,180 auch wie funktioniert das wir haben FÜPS gehabt. 80 00:04:11,800 --> 00:04:13,480 Also ich habe meinen Visual Studio in der Mitte. 81 00:04:13,490 --> 00:04:17,560 Im Screen ist der Code und dieser Code wenn man REACT zum 82 00:04:17,570 --> 00:04:20,140 Beispiel nutzt das richtig schön, da läuft quasi ein 83 00:04:20,149 --> 00:04:25,000 lokaler Web Server im in der Entwicklungs Umgebung, wenn ich 84 00:04:25,070 --> 00:04:27,730 quasi direkt starte dieses ganze Investment als Entwickler 85 00:04:27,740 --> 00:04:31,540 Development Modus natürlich und der spielt mir quasi das 86 00:04:31,550 --> 00:04:35,380 Frontend so wie ich es haben möchte direkt in meinen in 87 00:04:35,390 --> 00:04:38,480 meinen Browser rein, dann unter local host natürlich dann auch 88 00:04:38,490 --> 00:04:41,280 nicht auf dem Server deployed und dann habe ich meinen rechten 89 00:04:41,290 --> 00:04:43,880 Schirm habe ich meistens f 12 gedrückt und zieht diese 90 00:04:43,890 --> 00:04:47,310 developer Tools voll screen. Nach rechts, also links, habe 91 00:04:47,320 --> 00:04:48,870 ich die Anwendung. Entsteht in der Mitte habe ich 92 00:04:48,880 --> 00:04:52,000 den Code und rechts über Tools. Krass, ist ja alles gleich 93 00:04:52,010 --> 00:04:54,250 sehen, dann kann ich alles sehen und das coole ist, wenn ich den 94 00:04:54,260 --> 00:04:58,100 Code einfach verändern n bisschen und zum Beispiel NCSS 95 00:04:58,110 --> 00:05:00,630 Anweisungen anders mache oder irgendwas anderes anfährt oder 96 00:05:00,640 --> 00:05:04,110 Irgendsowas und speichere in Visual Studio Code das auch so 97 00:05:04,120 --> 00:05:07,650 cool mit React das halt quasi direkt live die Anwendung neu 98 00:05:07,660 --> 00:05:09,330 lädt. Also ich seh da sofort eine neue 99 00:05:09,340 --> 00:05:12,910 Seite quasi im Browser und kann mir auch angucken in den 100 00:05:12,920 --> 00:05:16,130 developer Tools was halt tatsächlich passiert ist ne also 101 00:05:16,140 --> 00:05:18,430 dann hast du das eine ist dein Quellcode, das andere ist so 102 00:05:18,440 --> 00:05:20,880 wird so sieht es aus. Für den User und das dritte 103 00:05:20,890 --> 00:05:23,140 Developer Tools zeigen die an inhaltlich. 104 00:05:23,150 --> 00:05:25,340 Was hat der Browser tatsächlich verstanden, gerendert und 105 00:05:25,350 --> 00:05:29,370 gemacht und so weiter und ultra wichtig ja weil also. 106 00:05:30,000 --> 00:05:34,170 Ich nehme ein Beispiel, wo ich das andauernd benutze, wenn wir, 107 00:05:34,770 --> 00:05:37,220 wenn wir also wenn man im Browser was schön darstellt, 108 00:05:37,230 --> 00:05:38,820 dann machst du das typischerweise auch schon 109 00:05:38,830 --> 00:05:42,100 gesprochen, das mit der Sprache CSS ja, also da kannst du die 110 00:05:42,110 --> 00:05:45,030 ganzen Margin Skala, Speck, ground und so weiter 111 00:05:45,040 --> 00:05:47,490 Transparency S und so weiter alles einstellen, ne? 112 00:05:48,330 --> 00:05:50,300 Das kannst du natürlich im Code immer wieder machen. 113 00:05:50,510 --> 00:05:53,180 Ja, und dann speicherst du immer wieder, immer neu und das ist 114 00:05:53,190 --> 00:05:55,640 schon alleine das, obwohl das schnell geht, ist auch immer 115 00:05:55,650 --> 00:05:59,080 noch irgendwie fusselig, ja weil du nicht weißt wie es aussieht, 116 00:05:59,430 --> 00:06:04,420 jetzt kannst du auch wir machen die Looks gehen und du hast 117 00:06:04,430 --> 00:06:07,500 gemacht im Code sag ich mal und dann kannst du diese Elemente 118 00:06:07,510 --> 00:06:10,900 herauspicken, tatsächlich was da angezeigt wird wenn n Knopf ist 119 00:06:10,910 --> 00:06:14,440 oder der Text auf dem Knopf und dir genauer angucken warum sieht 120 00:06:14,450 --> 00:06:17,420 er so aus wie der aussieht ja was ist das CSS was der Browser 121 00:06:17,430 --> 00:06:20,380 jetzt dahin geladen hat ja und dann kannst du das sogar live 122 00:06:20,390 --> 00:06:23,290 manipulieren ja und? Du siehst halt in Echtzeit 123 00:06:23,300 --> 00:06:24,870 direkt, wie sich das verändert hat. 124 00:06:25,190 --> 00:06:28,190 Also krasses Beispiel, man kann da sonst auch machen, aber du 125 00:06:28,200 --> 00:06:30,880 kannst quasi die normale Seite, jeder kennt die Google 126 00:06:30,890 --> 00:06:32,200 Startseite mit dem Search Element. 127 00:06:32,210 --> 00:06:35,820 Ja da könntest du hingehen, machst die f 12 ja und dann 128 00:06:35,830 --> 00:06:37,880 drückst du die richtigen Knöpfe und dann kannst du komplett 129 00:06:37,890 --> 00:06:40,160 dieses input Element was n weißen Hintergrund hat 130 00:06:40,170 --> 00:06:42,770 typischerweise einen roten Hintergrund haben lassen und so 131 00:06:42,780 --> 00:06:45,550 weiter was ich damit sagen will, du kannst ja ultra schnell 132 00:06:45,560 --> 00:06:49,150 angucken was muss ich müsste ich im Code tippen damit es so 133 00:06:49,160 --> 00:06:52,080 aussieht wie ich es haben möchte und dann geh ich schnell wieder 134 00:06:52,090 --> 00:06:54,970 zurück das Ausprobieren der Tools Tickets quasi fest in den 135 00:06:54,980 --> 00:06:57,960 Code rein und dann ist toll. Nur ein ganz kleines Beispiel 136 00:06:57,970 --> 00:06:59,360 von dem, was man damit alles machen kann. 137 00:06:59,370 --> 00:07:01,220 Perfekt, perfekt. Ich hab da immer so rumgespielt 138 00:07:01,230 --> 00:07:04,400 und Webseiten wird verändert, das ist echt cool, weil es liegt 139 00:07:04,410 --> 00:07:07,000 quasi daran, weil der Code ja nicht kompiliert ist. 140 00:07:07,010 --> 00:07:11,060 Also irgendwie ja lesbar ist im Browser durch die Tools und dann 141 00:07:11,070 --> 00:07:14,280 kann ich ihn einfach verändern. Du sagst Grad die ganze Zeit CSS 142 00:07:14,470 --> 00:07:16,860 ich bin mir nicht ganz sicher schon behandelt haben und da 143 00:07:16,870 --> 00:07:19,030 wiederhole nochmal was es. Genau. 144 00:07:19,040 --> 00:07:25,060 CS heißt Cascading Style Sheets und ist ja quasi die. 145 00:07:25,750 --> 00:07:29,910 Die Sprache oder die? Ja, die Art und Weise, wie ich 146 00:07:30,160 --> 00:07:34,480 Elemente HTML Elemente typischerweise an Maler und 147 00:07:34,490 --> 00:07:37,990 aussehen lasse, also Style Style ganz genau. 148 00:07:38,000 --> 00:07:40,500 Ja, also man kann, man könnte sagen, wenn man jetzt mal, wenn 149 00:07:40,510 --> 00:07:42,750 man ein Beispiel zieht, man könnte sagen, ich hab. 150 00:07:43,390 --> 00:07:46,110 Ein Dokument, ja, das hat besteht nur aus Text. 151 00:07:46,420 --> 00:07:48,640 Also früher war das so bei den Emails, die hatten ja keinen 152 00:07:48,650 --> 00:07:52,860 Highlight, der pure blanke Text, ja einfach eine Schriftart, die 153 00:07:52,870 --> 00:07:55,060 da gerade ist. Arial oder Irgendsowas eine 154 00:07:55,070 --> 00:07:57,220 Schriftgröße und dann gibt es nur den textuellen Inhalt, das 155 00:07:57,230 --> 00:08:01,260 ist quasi das HTML, eine moderne Seite wo ich mir nur den Rot die 156 00:08:01,270 --> 00:08:04,090 Rohinformationen angucken würde, furchtbar wirklich furchtbar 157 00:08:04,100 --> 00:08:06,940 aussah. Und, und jetzt fange ich an, 158 00:08:06,950 --> 00:08:09,820 aber jetzt nehme ich das Cascading Style Sheets Krams 159 00:08:09,830 --> 00:08:13,140 dazu und kann quasi jedes einzelne Element sehr akkurat 160 00:08:13,150 --> 00:08:17,510 anmalen, aussehen lassen, Fonds ändern, also alles was dick 161 00:08:17,520 --> 00:08:21,720 Schriftgröße, Drehungen, Animationen und so weiter ich 162 00:08:21,730 --> 00:08:24,930 kann extrem viel sehr sehr viel machen mit CS und das ist 163 00:08:24,970 --> 00:08:27,390 gewachsen und das am Anfang noch nicht so viel, jetzt gibt es s 164 00:08:27,400 --> 00:08:30,850 3, da kann ich ganze Knöpfe durch die Gegend fliegen lassen 165 00:08:30,860 --> 00:08:32,750 und so weiter und da habe ich noch keinen, das hab ich nicht 166 00:08:32,760 --> 00:08:34,880 programmiert, ist quasi ne Mark Language. 167 00:08:34,890 --> 00:08:37,630 Ja und jetzt mal das Beispiel zurückgekommen habe ich so n 168 00:08:37,640 --> 00:08:40,960 Text und zum Beispiel in Word. Ja, da geben sie auch den roten 169 00:08:40,970 --> 00:08:42,820 Text, aber dann fängst du den an zu stylen. 170 00:08:42,830 --> 00:08:46,040 Ne, also du fügst page breaks ein, du machst irgendwas fett, 171 00:08:46,370 --> 00:08:49,620 du hast andere Header sizes als für die für den normalen Text 172 00:08:49,630 --> 00:08:53,120 und dann auf einmal so Dokument auch gut auszusehen und so 173 00:08:53,130 --> 00:08:56,960 ähnliches Analogie ist halt quasi HTMCS. 174 00:08:56,970 --> 00:09:02,050 SOK perfekt ja, gute Wiederholung dann verstanden wie 175 00:09:02,060 --> 00:09:03,740 das benutzt. Ich habe noch eine Frage und 176 00:09:03,750 --> 00:09:06,060 zwar hast du ja gesagt, das ist für die Entwicklung ergibt ja 177 00:09:06,070 --> 00:09:09,120 auch Sinn, da nutzt es auch, kann man die auch nutzen wenn 178 00:09:09,130 --> 00:09:12,430 man wenn man Backend entwickelt oder ist es auch Anwendungsfall? 179 00:09:12,990 --> 00:09:14,280 Ja, klar, irgendwie gehört das zusammen. 180 00:09:14,290 --> 00:09:17,950 Also also wir machen ja Single Page Applications, das heißt, 181 00:09:17,960 --> 00:09:20,330 und das kann ich dann auch sehen, das heißt, haben wir 182 00:09:20,340 --> 00:09:23,100 schon mal gesagt, das heißt, wenn man loslegen mit der 183 00:09:23,110 --> 00:09:25,740 Anwendung, also im Browser die entsprechende URL eingibt, dann 184 00:09:25,750 --> 00:09:30,900 lädt sich nicht nur HTML und CSS hin, für die eine Seite und auch 185 00:09:30,910 --> 00:09:34,400 nicht vor gerendert aus dem Aus dem Server, sondern ich Krieg 186 00:09:34,410 --> 00:09:37,840 javascript Code runtergeladen und der fühlt sich aus und der 187 00:09:37,850 --> 00:09:41,440 manipuliert im Prinzip dann im Klienten, also ohne Server 188 00:09:41,450 --> 00:09:44,750 Interaktion, die die ganzen Elemente und so weiter und auch 189 00:09:44,760 --> 00:09:46,340 das alles kann nicht nachvollziehen. 190 00:09:46,430 --> 00:09:49,630 In der Tools ja. Insofern es ist natürlich auf 191 00:09:49,640 --> 00:09:53,810 jeden Fall schon für die für die Anzeige ne, also n Browser 192 00:09:53,920 --> 00:09:57,960 developer Tool, aber es hat. Irgendwie inhärent auch was mit 193 00:09:57,970 --> 00:10:00,240 dem Backend zu tun, auch wenn neue Daten rein fliegen. 194 00:10:00,250 --> 00:10:03,570 Ist ja so, ich reagiere ja mit meinem Freund auf die Daten, die 195 00:10:03,580 --> 00:10:06,200 aus dem Backend kommen ja wenn du wenn ich meinen Freund nicht 196 00:10:06,210 --> 00:10:08,760 ändern würde, ich sag mal was ich aus der Datenbank 197 00:10:08,770 --> 00:10:11,970 irgendwelche irgendwelche adress Informationen die im Detail 198 00:10:11,980 --> 00:10:15,580 anzeigen will und ich verändere Cheri ändere quasi den Browser 199 00:10:15,590 --> 00:10:17,480 nicht, ja dann habe ich die Daten zwar geladen auf dem 200 00:10:17,490 --> 00:10:20,370 Client aber keiner kann sich sehen ne also insofern ist das 201 00:10:20,990 --> 00:10:24,460 Connected so ja und auch genau das kann man sich alles gut 202 00:10:24,470 --> 00:10:26,100 angucken mit dem Development. O. 203 00:10:26,110 --> 00:10:30,100 Perfekt, dann hab ich verstanden und geh mal rein. 204 00:10:30,200 --> 00:10:33,380 Was kann man da so sehen? Also vielleicht nochmal 205 00:10:33,390 --> 00:10:36,420 wiederholen, um das selbst mal anzurufen, jetzt vielleicht für 206 00:10:36,430 --> 00:10:40,250 die wirklichen krassen Laien, die uns zuhören, auf irgendeine 207 00:10:40,260 --> 00:10:42,340 Website gehen, beliebige Website tatsächlich. 208 00:10:42,450 --> 00:10:44,490 Egal. Und dann einfach mal f 12 auf 209 00:10:44,500 --> 00:10:47,690 der Tastatur drücken oder Rechtsklick und ja Element 210 00:10:47,700 --> 00:10:49,450 untersuchen oder sowas kann man glaube ich einen. 211 00:10:49,460 --> 00:10:53,590 Ich hab auf Englisch eingestellt r int wahrscheinlich wie bei. 212 00:10:53,600 --> 00:10:57,130 Untersuchen, was auf Deutsch irgendwas genau und dann ist man 213 00:10:57,140 --> 00:10:59,350 da drinne. Ja so und nun geht was macht man 214 00:10:59,360 --> 00:11:00,790 da? Jetzt ja genau und ich würde 215 00:11:00,800 --> 00:11:03,430 sagen, also wir hatten ja die Folge, das ist halt komplex, ich 216 00:11:03,440 --> 00:11:06,620 les n bisschen vor. Ich muss sagen, ich hab ich hab 217 00:11:06,630 --> 00:11:09,240 jetzt hier auf Englisch also nehmt es mir nicht übel, müsste 218 00:11:09,250 --> 00:11:11,560 live übersetzen oder gerät sagt mir wie es auf Deutsch heißt 219 00:11:11,570 --> 00:11:13,270 laut wahrscheinlich. Auf Deutsch? 220 00:11:13,280 --> 00:11:16,210 Nee, das ist alles elements Console. 221 00:11:16,220 --> 00:11:19,160 Dann ist das sogar gleich. Ja, ich habe, aber ich weiß 222 00:11:19,170 --> 00:11:21,680 nicht verschiedene Einstellungen ich verschiedene Nutzer in 223 00:11:21,690 --> 00:11:24,300 Chrome ich auch, das ist toll aber auch jetzt das ist nicht so 224 00:11:24,310 --> 00:11:26,720 relevant, es geht hier um den Inhalt, ich hätte jetzt 225 00:11:26,730 --> 00:11:29,220 vorschlagen wir gehen einfach von also die Details sind so 226 00:11:29,230 --> 00:11:33,680 aufgebaut, dass du oben hast du ein riesiges Menü, also quasi ne 227 00:11:33,690 --> 00:11:36,340 von links nach rechts und ich würde mit euch einfach mal 228 00:11:36,350 --> 00:11:38,370 komplett durch diese ganzen Dinge durchgehen und einmal nur 229 00:11:38,380 --> 00:11:39,840 ganz kurz anreißen was da los ist. 230 00:11:39,910 --> 00:11:43,500 Dann haben wir unsere typische Zeit im voll und wir können das 231 00:11:43,510 --> 00:11:46,590 auch echt nur anreißen. So, ja und aber ich glaube dann 232 00:11:46,600 --> 00:11:49,220 so Idee was so los ist und was ich versteckt hab. 233 00:11:50,060 --> 00:11:52,370 Und dann gleich ganz links ist so ein Symbol. 234 00:11:52,380 --> 00:11:54,870 Das sieht aus, da ist so ein Pfeil in so einem gepunkteten 235 00:11:54,880 --> 00:11:58,620 Kasten, ne. Also wenn man die f wenn das F 236 00:11:58,630 --> 00:12:01,780 aufgemacht hat ja und und vielleicht auch mal wenn ich f 237 00:12:01,790 --> 00:12:05,130 12 drücke, beziehen sich die developer Tools auf die Seite 238 00:12:05,140 --> 00:12:07,850 auf der ich f 12 gedrückt hab. Ich kann auch mehrere Seiten 239 00:12:07,860 --> 00:12:10,390 gleichzeitig angucken, also ich kann ne andere Seite aufmachen 240 00:12:10,400 --> 00:12:12,760 und auch f 12 drücken, dann krieg ich ein zweites Desktop 241 00:12:12,770 --> 00:12:15,830 Fenster so ja also immer ist bezieht sich immer auf das was 242 00:12:15,840 --> 00:12:19,720 ich gerade hab ja OK wichtig so wenn ich jetzt diesen Pfeil 243 00:12:19,760 --> 00:12:23,050 anklicke in diesem in diesem in diesem gepunkteten Boxen, das 244 00:12:23,060 --> 00:12:25,760 ist das inspect Element, das ist cool, wenn nicht dann wenn er 245 00:12:25,770 --> 00:12:28,580 aktiv ist wird bei mir hinterlegt und dann auf die 246 00:12:28,590 --> 00:12:30,530 Seite rüber gehe ich gerade angucke. 247 00:12:30,870 --> 00:12:33,880 Dann merkt man schon, wie Chrome irgendwie diese ganzen Elemente, 248 00:12:33,890 --> 00:12:36,810 die so erkennt, alles kleinteilige markiert und so 249 00:12:36,820 --> 00:12:38,340 weiter. Das ist Ultra schnell. 250 00:12:38,350 --> 00:12:41,000 Ich mach das gerade in meinem meinen Posteingang. 251 00:12:41,320 --> 00:12:44,070 Typischerweise jetzt immer auf Fokussieren zum Beispiel. 252 00:12:44,080 --> 00:12:47,860 Also ich bin jetzt bei eigene Webseite heissen.com und da zum 253 00:12:47,870 --> 00:12:50,270 Beispiel auf den Knopf jetzt Demo vereinbaren, hab ich jetzt 254 00:12:50,280 --> 00:12:52,910 gerade live so und jetzt passiert da hin und wenn ich 255 00:12:52,920 --> 00:12:57,100 jetzt klicke, dann ist quasi dieser Modus aus wieder und er 256 00:12:57,110 --> 00:13:01,170 hat was gemacht und und dann bin ich quasi in dem Tab Elements. 257 00:13:01,210 --> 00:13:04,450 Ja und da sehe ich jetzt das HTML. 258 00:13:04,520 --> 00:13:08,290 Der Seite hier ja, und er markiert die Stelle im HTML, die 259 00:13:08,300 --> 00:13:11,900 jetzt relevant ist für diesen selektierten Teilbereich der 260 00:13:11,910 --> 00:13:14,140 Seite. Ja, in diesem Fall A Class 261 00:13:14,150 --> 00:13:18,300 Button, HF und so weiter und hier wenn man wenn man will kann 262 00:13:18,310 --> 00:13:21,140 man bei gut gemachten Webseiten kann man hier so ein bisschen t 263 00:13:21,150 --> 00:13:23,060 auch lernen. Ja AF ist zum Beispiel der 264 00:13:23,070 --> 00:13:27,770 Klassiker ist e Link so A ist halt n ist das Link Symbol ja 265 00:13:27,990 --> 00:13:30,260 und dann sehe ich sogar jetzt jetzt sehe ich sogar was da 266 00:13:30,270 --> 00:13:33,640 drinne steht AHF und dann seh ich wohin geht es HTPS Kalender 267 00:13:33,650 --> 00:13:37,470 Punkt Punkt Google. Und es gibt schon Inside, also 268 00:13:37,480 --> 00:13:39,720 wenn man da drauf drückt und dass ich jetzt gemacht habe, ich 269 00:13:39,730 --> 00:13:42,620 gucks mir news, da sehe ich schon OK, das leitet mich auf 270 00:13:42,630 --> 00:13:45,670 die Kalender Funktion von Google hin, ist genau das. 271 00:13:45,680 --> 00:13:48,700 Ja wir haben halt wir haben halt n Kalender Dingsda integriert wo 272 00:13:48,710 --> 00:13:53,150 man sich n Termin buchen kann man hin und krasser Weise könnte 273 00:13:53,160 --> 00:13:57,530 ich könnte ich dieses alles auch manipulieren ja ich könnte zum 274 00:13:57,540 --> 00:13:59,940 Beispiel und das ist aber nur gültig für mich ja nicht für den 275 00:13:59,950 --> 00:14:03,580 Server so ja ich könnte hier die Links manipulieren und das und 276 00:14:03,590 --> 00:14:07,020 so weiter ja. Aber was wichtiger ist, als ich 277 00:14:07,030 --> 00:14:10,180 hier in diesem Element bin. Und immer noch ne. 278 00:14:10,190 --> 00:14:12,360 Also. Du meinst die Elements, den 279 00:14:12,370 --> 00:14:14,200 Elements Tab? Elements, Tab ja, und dann habe 280 00:14:14,210 --> 00:14:15,600 ich irgendwie ein so ein so ein ich. 281 00:14:15,610 --> 00:14:18,820 Ich kann immer einzelne HTML Elemente hier markieren, ja und 282 00:14:18,830 --> 00:14:23,700 dann rechts ist per Default kommen die Styles ich weiß nicht 283 00:14:23,710 --> 00:14:24,990 ob du das siehst. Ja, seh ich. 284 00:14:25,030 --> 00:14:27,100 Voll unübersichtlich. Da muss man also, da hab ich am 285 00:14:27,110 --> 00:14:29,040 Anfang auch überhaupt nicht durchblickt, das ist auch ein 286 00:14:29,050 --> 00:14:31,240 bisschen krass. Jetzt muss man wissen, dass 287 00:14:31,250 --> 00:14:35,040 cascading Style das Wort cascading heißt, quasi, dass das 288 00:14:35,050 --> 00:14:39,180 ne Hierarchie hat, ja, ich kann halt quasi ganz globale Styles 289 00:14:39,190 --> 00:14:42,140 setzen und die immer feiner Ausdifferenzieren, je nachdem wo 290 00:14:42,150 --> 00:14:45,070 ich gerade bin. Kontextuell in meinem HTML, weil 291 00:14:45,080 --> 00:14:47,690 HTML ist ja auch nichts anderes als dies in D, in A und so 292 00:14:47,700 --> 00:14:50,620 weiter das ist ja geschachtelt. Ja, und diese Schachtelung, die 293 00:14:50,630 --> 00:14:53,950 nicht im TSS auch haben und deswegen sieht das so 294 00:14:53,960 --> 00:14:57,130 kompliziert, dass das quasi fängt irgendwie ganz unten an 295 00:14:57,140 --> 00:14:59,730 mit dem allgemeinen ganz runter scrollen, Styles sind quasi 296 00:14:59,740 --> 00:15:04,260 allgemeinsten Styles die gesetzt sind, HTML für alles was HTML 297 00:15:04,270 --> 00:15:07,480 ist macht das ja und dann streicht er auch wenn das 298 00:15:07,490 --> 00:15:10,830 definiert wurde, ja sind quasi die die die die die Mega 299 00:15:10,840 --> 00:15:14,230 defaults und dann wird es nach oben immer feiner und die auch 300 00:15:14,240 --> 00:15:16,230 nicht durchgestrichen typischerweise ich jetzt hier 301 00:15:16,240 --> 00:15:18,200 Punkt Button. Ja, das ist eine s klasse. 302 00:15:18,210 --> 00:15:21,440 Wir gehen heute nicht auf CSS sein, ne ja, aber es reicht 303 00:15:21,450 --> 00:15:24,020 schon zu spielen so weil das Ding ist so cool, man sieht halt 304 00:15:24,030 --> 00:15:26,540 schon du kannst jeden Style anwählen und auswählen mit einer 305 00:15:26,550 --> 00:15:29,400 Check Box kommt davor und wenn du die Ausmachst dann ist halt 306 00:15:29,410 --> 00:15:32,530 quasi ich hab jetzt mal Background Color abgewählt und 307 00:15:32,540 --> 00:15:34,880 schon ist der Button nicht mehr sichtbar ist noch der Text der 308 00:15:34,890 --> 00:15:37,480 war vorher ein grüner schöner Button jetzt Demo vereinbaren w 309 00:15:37,490 --> 00:15:40,460 background color D selektiere ich der Background und da steht 310 00:15:40,470 --> 00:15:43,420 noch jemand vereinbaren weiß orangen Hintergrund voll kacke 311 00:15:43,430 --> 00:15:46,600 ja oder ich geh hinten auf die Farbe Background color das jetzt 312 00:15:46,610 --> 00:15:49,290 quasi eine Farbe im CSS und ne beliebige andere Farbe und 313 00:15:49,300 --> 00:15:50,680 gucken wir mal wie es aussieht so ja. 314 00:15:50,750 --> 00:15:53,260 Dann kann ich die kann ich mal mit Farben spielen. 315 00:15:53,270 --> 00:15:56,660 Irgendwann mal bisschen. Spielen auf und genau. 316 00:15:56,670 --> 00:16:00,110 Dann gibt es Sachen, die Margins und Farben, also Abstände, 317 00:16:00,120 --> 00:16:03,100 Farben, puddings, alles was es zu bieten hat, kann nicht 318 00:16:03,110 --> 00:16:05,560 jemanden manipulieren, ne? Genau. 319 00:16:05,840 --> 00:16:08,420 Und vielleicht sage ich auch ganz, ganz oben. 320 00:16:08,460 --> 00:16:11,610 Ich weiß nicht, ob das sieht. Element, Punkt, Style ist n Grau 321 00:16:11,620 --> 00:16:15,840 hinterlegt und übrigens wer n bisschen aufgepasst hat hier 322 00:16:15,850 --> 00:16:19,160 sind wir wieder so ne Art Java also Jason die Folge von Jason 323 00:16:19,170 --> 00:16:21,540 hilft immer wieder das sind alles so Kleine dargestellt, 324 00:16:21,550 --> 00:16:24,500 dass ohne Jason Objekte so mit den Klammern und so SK Value 325 00:16:24,510 --> 00:16:27,360 immer ne es ist immer irgendeinen Key der bedeutet was 326 00:16:27,760 --> 00:16:30,490 und der sagt Halt was die Konfiguration ich sehe es auch 327 00:16:30,500 --> 00:16:33,190 so Element Style macht da quasi riesen Objekt auf und das ist 328 00:16:33,200 --> 00:16:36,490 alles da quasi nee nee also pass auf Element also es ist so dass 329 00:16:36,500 --> 00:16:39,030 CSS funktioniert, so dass das typischerweise in so Klassen 330 00:16:39,040 --> 00:16:41,410 angelegt ist. Das sind quasi Files, die im 331 00:16:41,420 --> 00:16:44,280 Server hinterlegt werden, die dann hier eingeladen werden und 332 00:16:44,290 --> 00:16:46,360 Element Style. Das nennt man inline Styling, 333 00:16:46,370 --> 00:16:48,850 das hat immer, deswegen steht das ganz oben, das hat die 334 00:16:48,860 --> 00:16:50,770 höchste Priorität, das überschreitet alles was 335 00:16:50,780 --> 00:16:53,610 irgendwie defaults da ist. Ja ganz oft ist das nicht 336 00:16:53,620 --> 00:16:56,740 gesetzt, gute Praxis, dass man das nicht so oft einsetzt, weil 337 00:16:56,750 --> 00:16:59,850 das für die Browser anstrengend ist, sag ich mal immer dieses 338 00:16:59,860 --> 00:17:02,500 inline Styling auszuwerten, aber wenn ich da irgendwas 339 00:17:02,510 --> 00:17:05,630 reinschreibe, dann wird das alles überbügeln was irgendwo n 340 00:17:05,640 --> 00:17:07,650 stand. Ja da kann ich genau das gleiche 341 00:17:07,660 --> 00:17:10,040 schreiben, also die gleichen Regeln, aber das heißt quasi das 342 00:17:10,050 --> 00:17:13,750 direkt an diesem Element inline bitte vorgenommen zu werden hat 343 00:17:13,760 --> 00:17:15,390 ja und ich muss nicht irgendeine Klasse überschreiben. 344 00:17:15,990 --> 00:17:17,930 OK, also. Perfekt. 345 00:17:17,970 --> 00:17:20,940 Gut, OK, aber jetzt haben wir schon lange nicht aber elements, 346 00:17:20,950 --> 00:17:23,190 das wichtigste wahrscheinlich einer der wichtigsten, ist der 347 00:17:23,200 --> 00:17:25,940 wichtigsten Dinge, also kannst du einfach klicken, Elements und 348 00:17:25,950 --> 00:17:28,430 dann machst du das ja. Also jetzt mal kurz, ich benutze 349 00:17:28,440 --> 00:17:31,900 das auch manchmal die Dev Tools manchmal so Webseiten ja wurde 350 00:17:31,910 --> 00:17:34,820 irgendwas hast. Also wenn die schlecht gemacht 351 00:17:34,830 --> 00:17:37,920 sind, dann hast du kannst du quasi einfach visuell mal von 352 00:17:37,930 --> 00:17:40,740 Banner wegklicken. Ja, manchmal hast du so n so n 353 00:17:40,750 --> 00:17:43,680 graues Ding da, dann kannst du mal ins Bett gehen und dann 354 00:17:43,690 --> 00:17:46,300 setzt du den zum Beispiel Party auf 0 oder sowas oder sagst 355 00:17:46,310 --> 00:17:49,240 Invisible kann ja mal gucken, kannst CS Sachen einfach. 356 00:17:50,080 --> 00:17:52,970 Wegmachen ne und dann kannst du da was dahinter steht, was man 357 00:17:52,980 --> 00:17:56,080 eigentlich nicht soll. Doch lesen ne guys wir gehen, 358 00:17:56,090 --> 00:17:58,940 wir gehen mal zum nächsten Tab nee wir gehen zum nächsten 359 00:17:58,950 --> 00:18:02,240 Knopf, der ist ganz cool also neben das sind ja 2 Icons wir 360 00:18:02,250 --> 00:18:04,030 haben jetzt das Insekt angeguckt, jetzt geh mal 361 00:18:04,040 --> 00:18:07,320 daneben, das sieht aus wieso ne wie ne wie Mobiltelefone und 362 00:18:07,330 --> 00:18:10,430 Desktop ist auch genau das was es sein soll Mega Monster super 363 00:18:10,440 --> 00:18:13,650 cool zum entwickeln ne da drauf klickst dann kommt bei mir 364 00:18:13,660 --> 00:18:16,630 direkt in das glaube ich unterschiedlich das iphone 12 365 00:18:16,640 --> 00:18:21,150 Pro an jetzt jetzt ist quasi also was ich mache was macht die 366 00:18:21,160 --> 00:18:24,140 Taste die tut so als wäre jetzt meinen Browser. 367 00:18:24,210 --> 00:18:26,510 Ein Mobiltelefon? Ja, und zwar ein beliebiges ja, 368 00:18:26,520 --> 00:18:28,760 und da steht ganz oben. Also jetzt guck ich quasi nicht 369 00:18:28,770 --> 00:18:32,110 in die sonder die Webseite, jetzt ist unsere unsere Webseite 370 00:18:32,120 --> 00:18:35,670 heise.com auf einmal so geändert wie sie aussehen würde im iphone 371 00:18:35,680 --> 00:18:39,270 12 und da steht da oben die Menschen das iphone 12 Pro einer 372 00:18:39,280 --> 00:18:42,510 Schweizer Feil stehen anklicke sehe ich ne ganze Set von 373 00:18:42,520 --> 00:18:47,110 aktuellen Smartphones. Nicht mehr ganz aktuell, aber. 374 00:18:47,150 --> 00:18:50,040 Stimmt, man kann bei Edit kann man, bei edit kann man noch 375 00:18:50,050 --> 00:18:52,810 welche hinzufügen und so weiter da kann ich mir aber echt viel 376 00:18:52,820 --> 00:18:54,690 angucken. I Pads wie es aussieht und so 377 00:18:54,700 --> 00:18:58,170 weiter Mega Monster wichtig, weil jetzt simulieren die Tools 378 00:18:58,180 --> 00:19:01,320 richtig echt. Wie, was quasi dieser Code 379 00:19:01,680 --> 00:19:03,860 erfahren würde, wenn es denn auf diesem Device wär. 380 00:19:04,010 --> 00:19:06,660 Ich muss mir also nicht mehr irgendwie alle i Pads der Welt 381 00:19:06,670 --> 00:19:09,660 und Telefone mit allen ihren Radius da auf den Tisch legen, 382 00:19:09,670 --> 00:19:13,980 kaufen teuer KX irgendwie so ne und dann seh ich mal wissen, 383 00:19:13,990 --> 00:19:17,980 würde also responsive Design mache ich damit ja das ist so 384 00:19:17,990 --> 00:19:20,400 der das Password dabei lassen es beenden. 385 00:19:21,250 --> 00:19:22,750 Genau. Und ich kann übrigens noch 386 00:19:22,760 --> 00:19:25,310 drehen, das ist auch ganz geil, der ganz rechts jetzt auf der 387 00:19:25,320 --> 00:19:27,920 Webseite bei mir in diesem Modus ist auch so ein kleines Ding, da 388 00:19:27,930 --> 00:19:30,260 kann ich auch die gedrehte Variante mir angucken, ja auch 389 00:19:30,270 --> 00:19:34,120 so ein kleines Gadget so also die Dev tools sind völlig 390 00:19:34,130 --> 00:19:36,340 überladen, also man ist optisch völlig überfordert und aber 391 00:19:36,350 --> 00:19:39,200 jedes einzelne Element hat Vollmacht, also das ist echt n 392 00:19:39,510 --> 00:19:43,120 ja ziemlich krasses Ding so OK ich krieg das wieder weg, also 393 00:19:43,160 --> 00:19:45,420 aus diesem Modus raus, so dass ich diese Webseite wieder ganz 394 00:19:45,430 --> 00:19:48,570 normal sehe, ich hier gerade und jetzt gehe ich von elements, das 395 00:19:48,580 --> 00:19:51,610 haben wir gerade besprochen auf den nächsten Reiter Konsole 396 00:19:51,990 --> 00:19:56,200 Konsole auf Englisch ja. So, hier sehe ich jetzt bei 397 00:19:56,210 --> 00:19:59,780 unserer Webseite gar nichts, was ganz cool ist. 398 00:19:59,790 --> 00:20:01,360 So ja, also das ist eigentlich clean. 399 00:20:01,370 --> 00:20:03,490 Ja, also was ist die Konsole wenn. 400 00:20:04,790 --> 00:20:08,340 Das kennt ihr vielleicht ja, wenn man Software schreibt, dann 401 00:20:08,350 --> 00:20:10,540 kann man ja, wenn man normales Programm schreibt, dann in 402 00:20:10,550 --> 00:20:15,170 verschiedenen Sprachen irgendwie Print, Prince Out, Print Line, 403 00:20:15,370 --> 00:20:17,240 das heißt jede Programmiersprache anderes 404 00:20:17,280 --> 00:20:21,900 Befehl, wie ich quasi ja textuelle Informationen raus 405 00:20:21,910 --> 00:20:23,360 machen. Ja, das ist oft so Debug ging 406 00:20:23,370 --> 00:20:26,670 Informationen ne. Irgendwas ne Ausgabe letzte. 407 00:20:26,680 --> 00:20:29,980 Ausgabe einfach ne Ausgabe im Code in Java Script ist das 408 00:20:29,990 --> 00:20:34,140 Konsole Punkt log typischerweise und wenn ich n Konsole Punkt log 409 00:20:34,150 --> 00:20:37,850 mache, dann wird quasi ja das was da irgendwie an der Stelle 410 00:20:37,860 --> 00:20:39,990 wo eine vorbeikommt wird eingerichtet. 411 00:20:40,490 --> 00:20:42,700 Das ist, das kann ich halt nehmen, wenn ich, wenn ich die 412 00:20:42,710 --> 00:20:45,140 Buggy zum Beispiel, ich komme irgendwo an der Stelle vorbei im 413 00:20:45,150 --> 00:20:48,280 Code, dann würdet, dass mir hier angezeigt werden, alle kommen so 414 00:20:48,290 --> 00:20:51,840 Logs stehen hier, das sind quasi noch die Bug Nachrichten der 415 00:20:51,850 --> 00:20:53,300 Entwickler, wenn man so will, ja. 416 00:20:53,650 --> 00:20:57,240 Ich finde produktive, sehr saubere Webseiten sollten da nur 417 00:20:57,250 --> 00:20:59,480 noch ganz minimal, wenn überhaupt irgendwas bringt. 418 00:20:59,490 --> 00:21:03,570 Jetzt frage, ich habe ja dort schon mal rote Nachrichten 419 00:21:03,580 --> 00:21:06,640 gesehen und sind farblich kennzeichnen manchmal orangene, 420 00:21:07,190 --> 00:21:10,730 ich meine auch weiße genau, ich hätte jetzt gedacht, also ich 421 00:21:10,740 --> 00:21:13,210 hab jetzt gerade offen ist tatsächlich nichts. 422 00:21:13,730 --> 00:21:15,790 Dachte es gibt immer. Ich dachte, das ist einfach so. 423 00:21:15,800 --> 00:21:20,470 Hey nee, ich OK, ja das ist voll der Sache der Entwickler, wenn 424 00:21:20,480 --> 00:21:23,120 man kann voll ab. Also Shut up gibt es auch ja 425 00:21:23,560 --> 00:21:25,870 genau, du hast natürlich recht weiß und so weiter es gibt die 426 00:21:25,880 --> 00:21:27,640 Konsole log habe ich gerade ein bisschen vereinfacht 427 00:21:27,650 --> 00:21:29,580 dargestellt, gibt es in verschiedenen Stufen, also man 428 00:21:29,590 --> 00:21:32,430 kann auch Konsole Punkt Info schreiben im Code und wann und 429 00:21:32,440 --> 00:21:37,410 error genau und wenn n Fehler passiert und also entweder weil 430 00:21:37,420 --> 00:21:40,070 ich den Fehler rausbringe oder weil ich den nicht abfangen Code 431 00:21:40,080 --> 00:21:42,870 dann wird das hier in der Konsole auch angezeigt mit roten 432 00:21:42,920 --> 00:21:46,540 Dingern und ganz viele also es ist also ich finde jetzt gerade, 433 00:21:46,550 --> 00:21:50,240 dass wir, aber man muss ja nicht selber programmiert da auch n 434 00:21:50,250 --> 00:21:53,060 paar. Wir benutzen hier einen CRM für 435 00:21:53,070 --> 00:21:54,650 unsere Webseite, die haben das sehr gut gemacht. 436 00:21:54,660 --> 00:21:55,850 CMS. C. 437 00:21:55,860 --> 00:21:59,580 Entschuldigung, genau danke. Gerit haben das ja gemacht da 438 00:21:59,590 --> 00:22:03,050 einfach ist einfach gar nichts. Ja und aber viele Seiten haben 439 00:22:03,060 --> 00:22:05,180 irgendwie dann r und so, das heißt nicht, dass die Anwendung 440 00:22:05,190 --> 00:22:07,760 komplett, dann wird hier das nicht geladen ist, immer 441 00:22:07,770 --> 00:22:10,940 komplexe Dinosaurier so ne Webseiten ne, aber jetzt will 442 00:22:10,950 --> 00:22:13,280 ich dazu noch eine Sache sagen, dass ich zwar nicht, aber ich 443 00:22:13,290 --> 00:22:16,590 hab einen blinkenden Cursor wahrscheinlich auch ja und ich 444 00:22:16,600 --> 00:22:20,890 habe jetzt hier Zugriff auf also ich kann hier quasi javascript 445 00:22:20,900 --> 00:22:23,680 auch einschreiben und n paar Sachen auswerten und so weiter 446 00:22:23,790 --> 00:22:25,880 jetzt muss man wissen, es gibt ein mächtiges Objekt. 447 00:22:25,950 --> 00:22:28,020 Das heißt, es ist das Windows Objekt. 448 00:22:28,620 --> 00:22:32,230 Damit komme ich auf die ja auf alle Funktionalitäten zu, damit 449 00:22:32,240 --> 00:22:34,100 die mir der Browser zur Verfügung stellt. 450 00:22:34,380 --> 00:22:37,130 Programmatisch also in meinem Code, aber jetzt auch in den 451 00:22:37,140 --> 00:22:39,730 Tools ja nicht, wir machen nur eine Sache wir jetzt Windows 452 00:22:39,740 --> 00:22:42,630 einfach schon jetzt bin ich auf diesem Windows Objekt. 453 00:22:43,260 --> 00:22:47,440 Und da geh ich jetzt mal hin und schreibe Punkt. 454 00:22:47,490 --> 00:22:50,490 Also Windows Punkt komme ich nächstes Level und hat ich mal 455 00:22:50,500 --> 00:22:53,390 Navigator ein der Windows Navigator. 456 00:22:54,640 --> 00:22:58,000 Nein, du machst ja schon komplett Return Navigator und 457 00:22:58,010 --> 00:22:59,710 jetzt hab ich hier ne Zeitung bekommen. 458 00:22:59,720 --> 00:23:01,660 Das ist die Auswertung von diesem Befehl. 459 00:23:02,730 --> 00:23:06,170 Guck mal, das geht hier bei uns. Doch jetzt geht es bei mir 460 00:23:06,180 --> 00:23:08,260 nicht. Ich hab es genau, ich habe es, 461 00:23:08,270 --> 00:23:12,070 musste nochmal zurück nicht so und jetzt kann ich das Ausklappt 462 00:23:12,080 --> 00:23:15,250 was da kommt nur so einen Kleinen hinzugeben, vielleicht 463 00:23:15,260 --> 00:23:17,690 habt ihr schon was von Tracing gehört oder irgendwas ne wir 464 00:23:17,700 --> 00:23:21,240 haben ja die viele Webseiten wollen ja irgendwie wissen wer 465 00:23:21,250 --> 00:23:23,890 war der User der bei mir war und deswegen werden ja viele Cookies 466 00:23:23,900 --> 00:23:26,070 gesetzt ne und dann irgendwie personalisierte Werbung 467 00:23:26,080 --> 00:23:29,260 einzuspielen und so weiter ja der Winter Navigator und 468 00:23:29,270 --> 00:23:32,300 vielleicht habt ihr schon gibts ohne Cookies ja so eine Art 469 00:23:32,310 --> 00:23:36,540 fingerprinting oder sowas Sensor Ring ja ein Beispiel machen kann 470 00:23:36,550 --> 00:23:39,160 der Windows Punkt Navigator. Ich könnte jetzt auch die App 471 00:23:39,170 --> 00:23:41,420 aufrufen. Innen drin ne ganz normal. 472 00:23:41,430 --> 00:23:46,320 Das sind alles Sachen die der. Die der der Webseiten Betreiber 473 00:23:46,330 --> 00:23:48,320 über mich wissen kann. Öffentliche Informationen. 474 00:23:48,330 --> 00:23:51,110 K den Kram hier Navigator, den bringe ich jetzt mit in meinem 475 00:23:51,120 --> 00:23:52,960 Browser. Genau, und den kann er auslesen. 476 00:23:52,970 --> 00:23:55,560 Ja, weil die Funktion Navigator aufrufen kann mit der Website 477 00:23:55,570 --> 00:23:57,720 und nach Hause schicken, seine Datenbank ja und da steht schon 478 00:23:57,730 --> 00:24:00,070 eine ganze Menge drin. Ich weiß nicht wie, aber n 479 00:24:00,080 --> 00:24:01,970 Mozilla, hier stehen erstmal die Informationen mit welchem 480 00:24:01,980 --> 00:24:04,600 Browser bin ich unterwegs auf welchem Betriebssystem ja ich 481 00:24:04,610 --> 00:24:09,430 hab Mozilla Nets Cape Version 50 Linux x 8664 schon drin, dass 482 00:24:09,440 --> 00:24:12,440 ich Linux bin mein Clip Board hätte ich jetzt irgendwas im 483 00:24:12,450 --> 00:24:14,400 Clip Board also in der Zwischenablage kannst du 484 00:24:14,410 --> 00:24:16,140 auslesen ja. Pass auf, bei mir steht gerade 485 00:24:16,150 --> 00:24:18,760 lustigerweise ipad, weil ich gerade in sozusagen. 486 00:24:19,070 --> 00:24:22,230 Im device ipad angucke. Ja, genau das ist ja dann auch 487 00:24:22,240 --> 00:24:23,230 richtig. Genau. 488 00:24:23,300 --> 00:24:26,310 Also ich bin ja am Rechner, aber ich tue so, als hätte ich i. 489 00:24:26,320 --> 00:24:28,330 Chrome, ja. Ja genau, weil du noch diesem 490 00:24:28,340 --> 00:24:31,630 Device Modus an hast, was ja und dann spannende Sachen wie zum 491 00:24:31,640 --> 00:24:33,510 Beispiel Device Memory ja, da steht. 492 00:24:33,520 --> 00:24:37,090 Also das heißt tatsächlich, wieviel Arbeitsspeicher hat das 493 00:24:37,100 --> 00:24:39,490 Gerät mein Laptop gerade an dem ich hier sitze bei mir ist 8 494 00:24:39,500 --> 00:24:43,210 Gigabyte 8 steht da einfach nur so geolocation und so wenn du 495 00:24:43,220 --> 00:24:46,150 das hättest du jetzt auch noch auslesen wo du gerade bist hab 496 00:24:46,160 --> 00:24:50,670 ich nicht GPU Informationen über die GPU Hardware Concurrency und 497 00:24:50,680 --> 00:24:53,190 so weiter und sofort da gibt es richtig viele Sachen languages. 498 00:24:53,270 --> 00:24:56,430 Wie mein Keyboard z ist und dann auch noch interessant Media 499 00:24:56,440 --> 00:24:58,330 Devices. Da kannst du genau rausholen 500 00:24:58,340 --> 00:25:01,050 welche Media Devices hast du und so weiter ja welche Kamera von 501 00:25:01,060 --> 00:25:04,150 welchem Typ und so weiter weil das wichtig ist um die um 502 00:25:04,160 --> 00:25:05,960 später. Es gibt ja viele Web Apps wo du 503 00:25:05,970 --> 00:25:07,790 mit der Kamera irgendwie interagieren. 504 00:25:07,800 --> 00:25:11,050 Genau da muss aber nochmal zu stimmen, dass das dann auch 505 00:25:11,060 --> 00:25:12,170 benutzt werden. Zustimmen. 506 00:25:12,180 --> 00:25:15,450 Aber was ich sagen will, diese Hardware Informationen. 507 00:25:15,760 --> 00:25:18,530 Also wenn das jetzt alles zusammen ziehst ne und daraus 508 00:25:18,540 --> 00:25:21,250 quasi einen Hashmat haben wir schon besprochen diese ganzen 509 00:25:21,260 --> 00:25:24,900 Informationen und machst quasi kryptographischen Kita raus, 510 00:25:25,440 --> 00:25:27,750 dann wird ja schon ziemlich unique. 511 00:25:27,820 --> 00:25:31,400 Ja, also damit kannst du schon vielleicht nicht so 100% da aber 512 00:25:31,410 --> 00:25:34,610 zu einer großen Prozentzahl. Da steht drin wie 513 00:25:34,620 --> 00:25:36,890 Arbeitsspeicher hast du noch wie Festplattenspeicher hast du noch 514 00:25:36,900 --> 00:25:39,070 ne, was hast du für Kameras verbaut und welche Version von 515 00:25:39,080 --> 00:25:40,680 welchen Browser, auf welchen Betriebssystemen? 516 00:25:41,000 --> 00:25:43,120 Und dann kannst du schon ziemlich einen ich wollte nur 517 00:25:43,130 --> 00:25:46,690 sagen, dass das so solche Sachen werden genutzt um Tracking zu 518 00:25:46,700 --> 00:25:49,860 machen ohne Cookies ja also wir sind nie ganz anonym unterwegs 519 00:25:49,870 --> 00:25:52,590 im Netz, wenn wir nicht ja bin ich kein Experte, müssen viele 520 00:25:52,600 --> 00:25:55,990 Experten, dass auch Änderungen immer wieder so ne darauf genau, 521 00:25:56,030 --> 00:25:59,040 aber das ist halt, man kann ja sehen was was zurzeit gerade los 522 00:25:59,050 --> 00:26:00,780 ist. Da muss man nur diesen Navigator 523 00:26:00,790 --> 00:26:02,770 aufdecken, das ist nur eine der Möglichkeiten, da gibt es noch 524 00:26:02,780 --> 00:26:03,640 mehr. Also das Ding. 525 00:26:03,650 --> 00:26:06,490 Der Befehl war auf Konsole gehen oder auf Konsole und dann 526 00:26:06,500 --> 00:26:09,760 window. Punkt Navigator und dann Enter 527 00:26:09,770 --> 00:26:12,100 oder Return kommt der ganze Kram ganz genau. 528 00:26:12,140 --> 00:26:13,960 Mir ist gerade aufgefallen, wir klicken hier die ganze Zeit rum, 529 00:26:13,970 --> 00:26:16,530 hätten bestimmt viele Mausklicks in der Aufnahme, der 530 00:26:16,540 --> 00:26:19,130 wahrscheinlich ein bisschen darüber hinweg, genau lass mal 531 00:26:19,140 --> 00:26:22,070 weiter bevor wir sind schon irgendwie bei der halben Stunde 532 00:26:22,080 --> 00:26:24,190 Aufnahme. Ich hab jetzt hier Recorder 533 00:26:24,200 --> 00:26:27,840 Performance Insights mit so einer mit so einem echt ich hab 534 00:26:27,850 --> 00:26:31,080 jetzt erstmal sources ich weiß ich hab in meinem Browser n 535 00:26:31,090 --> 00:26:33,590 bisschen das Experiment Tools von Google die ich eingeladen 536 00:26:33,600 --> 00:26:37,150 hab die Räder hab ich schon auch ganz am Ende steht das andere 537 00:26:37,730 --> 00:26:41,810 OKOK lassen wir weg wir machen direkt bei Sources weiter und. 538 00:26:41,880 --> 00:26:43,940 Auch nur ganz kurz hier, weil das ist so heftig. 539 00:26:44,090 --> 00:26:46,870 Hier ist quasi. Also hier werden quasi nochmal 540 00:26:46,880 --> 00:26:51,480 die die die die die Quellcode so gut es Development Google 541 00:26:51,490 --> 00:26:55,940 Developer Tools kann hingezeigt ja also die Quellcode, 542 00:26:55,950 --> 00:26:58,820 javascript und alles so geladen ist durch die Seite und da kann 543 00:26:58,830 --> 00:27:01,440 ich auch ein bisschen gewissen, nämlich durch Navigieren und so, 544 00:27:01,450 --> 00:27:04,030 das braucht richtig Expertenwissen, ich kann INDEX 545 00:27:04,070 --> 00:27:07,230 JS lesen und das ist auch. Also auch nicht so aufbereitet, 546 00:27:07,240 --> 00:27:09,440 dass lesen kann. Und so lassen wir deswegen auch 547 00:27:09,450 --> 00:27:11,010 weg. Aber da also was das Macht ist 548 00:27:11,020 --> 00:27:12,540 nicht quasi, kann auf die Quellen gucken. 549 00:27:12,550 --> 00:27:17,600 Ja richtig so ne, also genau. OK, weiter Netzwerk ist der 550 00:27:17,610 --> 00:27:20,820 nächste Tab Network bei mir ganz wichtig, benutze ich ganz oft. 551 00:27:21,770 --> 00:27:23,540 Auch ganz cool, dass das funktioniert. 552 00:27:23,550 --> 00:27:28,010 Am besten, wenn man, wenn man einmal auf dieses Schild, also n 553 00:27:28,020 --> 00:27:30,780 verboten Schild das nicht clever Icon drückt, dann ist alles weg 554 00:27:30,790 --> 00:27:34,970 von Netzwerk und wenn ich dann die Seite neu lade, also auf der 555 00:27:34,980 --> 00:27:39,220 Seite Refresh mache raus Refresh, dann fühlt sich dieses 556 00:27:39,230 --> 00:27:43,100 Netzwerk Dings wieder relativ komplett und komplexe Sache, 557 00:27:43,620 --> 00:27:47,470 aber ich hab quasi ne Tabelle und da steht dein Name bei mir 558 00:27:47,480 --> 00:27:50,600 jetzt hier heißen wir.com fängt jetzt gerade an Index JS Project 559 00:27:50,610 --> 00:27:55,360 CS hier wird jedes einzelne fürzchen sag ich mal. 560 00:27:55,430 --> 00:27:57,490 Was irgendwie geladen wird, aufgelistet. 561 00:27:57,500 --> 00:27:59,440 Also alles, was übers Netzwerk geht, ja. 562 00:27:59,660 --> 00:28:02,450 Ja, ich sehe gerade, dass das unser Gif, was wir drauf haben, 563 00:28:02,690 --> 00:28:04,310 viel zu groß ist. Muss ich mal. 564 00:28:04,320 --> 00:28:08,240 Kleiner machen genau das ist zum Beispiel auch was ne und dann. 565 00:28:08,280 --> 00:28:11,130 Also hier kannst du gucken was wird alles quer geladen und so 566 00:28:11,140 --> 00:28:13,410 weiter hier gucke ich gerne mal beiseite, so von einer Behörde 567 00:28:13,420 --> 00:28:15,970 oder Irgendsowas das sollte ziemlich sauber sein und auch im 568 00:28:15,980 --> 00:28:18,440 besten Fall was ihr aus der Domain geladen werden, wo ich 569 00:28:18,450 --> 00:28:21,590 halt quasi die Website aufrufe, also hier würde auch auffallen 570 00:28:21,600 --> 00:28:24,290 wenn ich jetzt irgendwie Party javascript Code irgendwie quer 571 00:28:24,300 --> 00:28:27,210 rein laden von Google Analytics oder irgendwas steht hier alles 572 00:28:27,220 --> 00:28:29,240 ja hier kann sich nicht verstecken mehr. 573 00:28:29,620 --> 00:28:33,360 Und was ich eigentlich noch interessanter als die einzelnen 574 00:28:33,370 --> 00:28:35,010 Dinger, die kannst du nochmal klicken und gucken. 575 00:28:35,020 --> 00:28:37,770 Die Request Response Sachen und so weiter da kann man echt ins 576 00:28:37,780 --> 00:28:40,080 Detail gehen. Ist übrigens oft eine Fangfrage, 577 00:28:40,090 --> 00:28:43,890 kann hiermit machen manchmal fragen wir haben sogar die haben 578 00:28:43,900 --> 00:28:47,110 gesagt ja gibt uns doch mal was wir im Header Request Header 579 00:28:47,120 --> 00:28:49,700 mitschickt da steht irgendwie das Stichwort oder irgendwas ja 580 00:28:49,950 --> 00:28:52,060 an dieser Stelle kann man. Das auch so, ja. 581 00:28:52,070 --> 00:28:54,130 Genau an dieser Stelle kann man auch klicken und dann sowas 582 00:28:54,140 --> 00:28:57,450 anzeigen lassen. Ne führt zu weit kürzlich auch 583 00:28:57,460 --> 00:29:00,680 hier ab, was ganz wichtig ist, wenn man unter der Tabelle 584 00:29:00,690 --> 00:29:03,710 direkt diese Zeile anguckt. Unauffälliges Ding. 585 00:29:04,010 --> 00:29:08,110 Da steht, sorry, da steht jetzt bei mir 56 requests, 139, 586 00:29:08,120 --> 00:29:11,560 Kilobyte, transfert, 18,9, MB Resources. 587 00:29:12,340 --> 00:29:16,750 Das voll nicht unwichtig, denn das sagt jetzt quasi wieviel, 588 00:29:17,200 --> 00:29:20,770 also wie groß ist der Quatsch, den ich mir jetzt bei jedem 589 00:29:20,810 --> 00:29:24,000 Refresh runterladen muss und dass die Webseite angezeigt wird 590 00:29:24,040 --> 00:29:28,350 hier bei unserer Webseite sind nur 139 Kilobyte, es hat extrem 591 00:29:28,360 --> 00:29:32,760 wenig, ja im ersten Schuss so ja, also 256 Requests werden 100 592 00:29:32,770 --> 00:29:34,770 Kilobyte erstmal runtergezogen Third. 593 00:29:35,750 --> 00:29:38,030 Weil das jetzt auch gedacht, ich müsste, wenn ich das jetzt 594 00:29:38,040 --> 00:29:41,390 machen würde, ich drücken und ich glaube, dass das gilt, was 595 00:29:41,400 --> 00:29:44,090 wir drauf haben. Ich bin gerade so schön weiter 596 00:29:44,100 --> 00:29:47,520 House wo hinkommen denk ich mal das das wird angeprangert, dass 597 00:29:47,530 --> 00:29:50,260 das Gift zu groß ist. Ja so jetzt hab ich Meer 598 00:29:50,270 --> 00:29:52,970 draufgedrückt auf dem gleichen Netzwerk jetzt hier 18,4 599 00:29:52,980 --> 00:29:56,680 Megabyte Transfer das ist das ist quasi so ungefährliche Größe 600 00:29:56,990 --> 00:30:00,610 die jemand runtergeladen bekommt in seinen Klienten wenn er 601 00:30:00,620 --> 00:30:02,450 unsere Website aufmachen. Das erste Mal quasi. 602 00:30:02,460 --> 00:30:05,260 Beim ersten Mal ja, beim zweiten Mal ist dann halt die sind halt 603 00:30:05,270 --> 00:30:07,990 90% von Cash und dann sind sie noch ein Kilobyte ne. 604 00:30:09,000 --> 00:30:12,420 Dass dieses Casting Krams, wenn man jetzt selber Entwickler ist, 605 00:30:12,430 --> 00:30:14,380 dann hat man nicht so ein super Gefühl für. 606 00:30:14,390 --> 00:30:17,560 Ich bin irgendwie n dings und so weiter aber muss nochmal schien, 607 00:30:17,570 --> 00:30:20,230 dass die Anwendungen nicht zu groß wird, wenn irgendwas von 608 00:30:20,240 --> 00:30:23,950 300 oder irgendwas Megabyte, dann weißt du OK das ist krass 609 00:30:23,960 --> 00:30:26,310 so ja dann also wenn du Mobiltelefon hast mit 3 g, dann 610 00:30:26,320 --> 00:30:29,490 bist du irgendwie gestorben ja plus und das muss ich auch sagen 611 00:30:29,500 --> 00:30:32,440 wir dann noch ganz wichtig als Entwicklertool jetzt gucken wir 612 00:30:32,450 --> 00:30:35,520 mal kurz in dieser gleichen Netzwerk Tab ganz nach oben, da 613 00:30:35,530 --> 00:30:39,360 steht no throttling. Wenn man da drauf klickt. 614 00:30:40,080 --> 00:30:42,150 Da kann man die Netzwerk Presets einstellen. 615 00:30:42,400 --> 00:30:45,630 Vorher haben wir tun so als wären wir i pad oder oder 616 00:30:45,640 --> 00:30:47,190 Telefon. Hier kann ich sagen ich tu mal 617 00:30:47,200 --> 00:30:51,510 so als hätte ich nur 3 g ja Netz geschwindigkeit ja, kann also 618 00:30:51,520 --> 00:30:54,260 quasi so tun als hätte ich ein schlechtes Internet. 619 00:30:54,700 --> 00:30:57,590 Voll wichtig, weiter leider noch relevant, ne. 620 00:30:58,350 --> 00:31:01,710 Ja, aber ich meine, wenn du natürlich App baust, gerade so 621 00:31:01,720 --> 00:31:03,970 wie wir, wenn wir bauen, dann können wir nicht davon ausgehen, 622 00:31:03,980 --> 00:31:06,210 dass jeder irgendwie immer 4 g oder 5 g. 623 00:31:06,220 --> 00:31:08,350 Meine ich ja leider, leider noch relevant nicht. 624 00:31:08,360 --> 00:31:11,390 So genau in Deutschland, vor allen Dingen ja stimmt und dann 625 00:31:11,400 --> 00:31:14,270 mal auf 3 G gedrückt und dann nochmal neu. 626 00:31:14,340 --> 00:31:17,160 Dann merkt man schon, wie das alles ein bisschen zäher wird. 627 00:31:17,170 --> 00:31:21,280 So ja, und wer sich so langsam mal hin rappelt und kann man 628 00:31:21,290 --> 00:31:25,020 auch sehr cool mal, das ist nämlich die hohe Kunst, hat auch 629 00:31:25,030 --> 00:31:27,600 schon mal seine Anwendungen so optimiert, dass man erst mal was 630 00:31:27,610 --> 00:31:30,540 sieht, dann vielleicht der wichtigste hinten rein geladen 631 00:31:30,550 --> 00:31:34,820 wird, aber dann schnell schnelle Display Rendering Time hat quasi 632 00:31:34,830 --> 00:31:38,300 ja, da gibt es so mehrere Sachen, also Time die Zeit des 633 00:31:38,310 --> 00:31:41,060 Ersten sichtbar Machens der Seite ist wichtig und dann gibt 634 00:31:41,070 --> 00:31:43,510 es noch einen zweiten Benchmark ist wann ich das erste Mal 635 00:31:43,520 --> 00:31:46,020 irgendwie mit der Maus interagieren so das kann man 636 00:31:46,030 --> 00:31:48,080 optimieren da und vor allen Dingen auch unter schlechten 637 00:31:48,090 --> 00:31:49,850 Netzwerk. OK. 638 00:31:49,860 --> 00:31:51,650 Bei der Performance kommt bei mir dann. 639 00:31:53,030 --> 00:31:56,720 Performance Ja, Performance Memory Application Security 640 00:31:56,730 --> 00:31:58,120 kommt alles. Noch so nächstes. 641 00:31:58,130 --> 00:32:00,460 Genau die machen wir jetzt. Performance Performance, Ich 642 00:32:00,470 --> 00:32:04,080 komm ja müsst ihr euch mal rein denken, das sind so komplexe 643 00:32:04,090 --> 00:32:06,910 Charts hier, also die werden die quasi aufgemalt, hier noch ein 644 00:32:06,920 --> 00:32:10,480 bisschen dargestellt, der macht quasi Screenshots zu jederzeit 645 00:32:10,490 --> 00:32:13,380 ne nachladen, das kann ich ja auch nochmal schriftlich machen, 646 00:32:13,390 --> 00:32:15,980 dann wird. Und hab das vorher geklärt. 647 00:32:16,090 --> 00:32:18,650 Dann wird quasi die ganze Performance aufgezeichnet und 648 00:32:18,660 --> 00:32:20,940 dann sieht man quasi auch das, was man noch nicht sieht in der 649 00:32:20,950 --> 00:32:23,410 Seite und so weiter und dann nach wieviel Millisekunden sehe 650 00:32:23,420 --> 00:32:26,530 ich was? Das alles zum das ist alles 651 00:32:26,540 --> 00:32:27,870 jetzt für die Entwickler. Ne. 652 00:32:27,910 --> 00:32:30,730 Wir Entwickler sind ja daran interessiert unsere unseren 653 00:32:30,740 --> 00:32:33,180 Seiten Aufbau möglichst schnell machen, die User Experience zu 654 00:32:33,190 --> 00:32:35,930 optimieren, das kann ich hiermit angucken, cool gut. 655 00:32:37,100 --> 00:32:38,790 Memory lass dich gleich mal ganz weg. 656 00:32:38,840 --> 00:32:40,230 Also da steht auch noch mal drin. 657 00:32:40,240 --> 00:32:43,450 Wieviel memory wird jetzt runtergeladen worden, wieviel 658 00:32:43,460 --> 00:32:46,500 braucht die Anwendung insgesamt zur Laufzeit und so weiter viel 659 00:32:46,510 --> 00:32:50,060 interessanter für jetzt jetzt vielleicht die oder irgendwas 660 00:32:50,070 --> 00:32:53,300 und auch wirklich mal nutzbar ist Application der Tab. 661 00:32:54,130 --> 00:32:58,560 Da bin ich jetzt und jetzt kommt es drauf an, was ich für eine 662 00:32:58,570 --> 00:33:00,240 Webseite hab. Ich hab mal ganz oben steht 663 00:33:00,250 --> 00:33:03,240 Manifest. 1. Manifest muss zum Beispiel jede 664 00:33:03,250 --> 00:33:06,310 progressive Web haben, wenn ich die als, also wenn ich ne ne 665 00:33:06,320 --> 00:33:08,870 Seite als Web App installieren kann, hat die typischerweise 666 00:33:08,880 --> 00:33:11,300 Manifest mit Icons und so weiter jetzt bin ich gerade hier bei 667 00:33:11,310 --> 00:33:13,850 uns auf der Homepage, die kann man jetzt nicht als App 668 00:33:13,860 --> 00:33:15,040 installieren, soll sie auch nicht. 669 00:33:15,050 --> 00:33:17,310 Ja Homepage steht da halt nix da. 670 00:33:18,120 --> 00:33:20,310 Genau. Und dann aber spannend ist ja 671 00:33:20,320 --> 00:33:24,460 der der nächste Reiter Links Storage K siehst du das? 672 00:33:24,500 --> 00:33:27,110 Ja ich hab die Service workers noch dazwischen ja genau Service 673 00:33:27,120 --> 00:33:29,760 workers, dass ich auch mal kurz aus Service hier kann man jetzt 674 00:33:29,770 --> 00:33:34,790 Servers angucken, das sind quasi das sind das sind ja die. 675 00:33:34,800 --> 00:33:36,590 Brauchen wir nicht nur die Applikation? 676 00:33:36,600 --> 00:33:40,830 Da da ne aber application geht es halt um die um um was macht 677 00:33:40,840 --> 00:33:45,140 die Application also was macht die Dinge Storage was sind da 678 00:33:45,150 --> 00:33:48,450 lässt die quasi für kleine Hundehäufchen auf meinem 679 00:33:48,460 --> 00:33:51,910 Rechner, das kann ich hier sehen ne und hundehäufchen können. 680 00:33:51,980 --> 00:33:55,330 Können Anwendungen auf viele Arten heutzutage hinterlassen 681 00:33:55,490 --> 00:33:58,690 und die Arten der Hundehäufchen Hinterlassung ist unter Storage 682 00:33:58,700 --> 00:34:01,520 zu sehen. Ne Kekse hab ich genau Kekse 683 00:34:01,530 --> 00:34:06,370 genau da hab ich jetzt local storage und Session Storage 684 00:34:06,410 --> 00:34:10,790 Local Storage ist quasi ein ein Browserbasierter also im Browser 685 00:34:10,800 --> 00:34:15,840 Speicher der der quasi Informationen über Page Load 686 00:34:15,850 --> 00:34:18,780 hinweg hält, also alles was im Local Storage steht. 687 00:34:19,520 --> 00:34:22,489 Bleibt erhalten, auch wenn ich die Seite komplett zu mache ich 688 00:34:22,500 --> 00:34:23,820 nächstes mal wieder reinkomme ist noch. 689 00:34:23,830 --> 00:34:29,110 Da Unterschied zwischen 18 b und n paar Kilo bytes was? 690 00:34:29,120 --> 00:34:30,659 Nicht? Ja genau, es gibt so viele 691 00:34:30,670 --> 00:34:34,060 Caches und so weiter und da kommen normalerweise ja, da 692 00:34:34,070 --> 00:34:39,560 kommen die Sachen drin rein, die halt, das ist eigentlich so wie 693 00:34:39,570 --> 00:34:42,719 Cookies, ja andere Art des Cookies werden Sachen 694 00:34:42,730 --> 00:34:46,320 reingesetzt damit du ne ich sag mal was du hast zum Beispiel 695 00:34:46,330 --> 00:34:47,570 deine App n bisschen konfiguriert. 696 00:34:47,580 --> 00:34:49,870 Du hast zum Beispiel Spotify bist du hast zum Beispiel den 697 00:34:49,880 --> 00:34:52,340 Slider verändert, dass du mehr von dem Menü siehst oder 698 00:34:52,350 --> 00:34:53,900 irgendwas wird typischerweise im Lokal. 699 00:34:54,010 --> 00:34:56,310 Deutscher MT festgehalten und wenn du das nächste Mal in 700 00:34:56,320 --> 00:34:58,510 Spotify reinkommst, siehst du aus wie das letzte Mal verlassen 701 00:34:58,520 --> 00:34:59,050 hast. Ja. 702 00:34:59,720 --> 00:35:02,780 Das ist ein ganz typischer Anwendungsfall für sowas, oder 703 00:35:03,370 --> 00:35:06,780 du hast auf Xing umgeschaltet, dann soll das ja, willst du 704 00:35:06,790 --> 00:35:09,820 nicht jedes Mal wieder von Light of Dawn schalten, die besuchst 705 00:35:09,830 --> 00:35:12,910 ja lösche den Browser und den Local Storage, das kannst du 706 00:35:12,920 --> 00:35:16,390 hier machen, indem du rechtsklickst Clear, dann wirst 707 00:35:16,400 --> 00:35:19,980 du sehen, dass ich ich empfehle das jetzt gerade nicht für 708 00:35:19,990 --> 00:35:22,490 Seiten, die durch konfiguriert habt, dann ist wieder weg und du 709 00:35:22,500 --> 00:35:25,980 musst wieder neu konfigurieren, so genau dann gibt es Storage 710 00:35:25,990 --> 00:35:28,670 sag ich nur der ist halt quasi nur gültig während du den Tag 711 00:35:28,680 --> 00:35:30,350 auf hast. Ja also den Tag schließt wird 712 00:35:30,360 --> 00:35:33,710 das schon gelöscht, hat halt nicht so lange Lebenszeit. 713 00:35:33,780 --> 00:35:37,570 Ja, und dann gibt es noch viele andere, gibt Index DB Web SQA 714 00:35:37,580 --> 00:35:39,790 dann die berühmten Cookies, die man sich angucken. 715 00:35:39,800 --> 00:35:41,240 Was für Cookies wurden überhaupt gesetzt? 716 00:35:41,250 --> 00:35:44,740 So ja, ich war auch ganz spannend, ja und alles andere 717 00:35:44,750 --> 00:35:48,540 was noch so an Cash und Speicher herumfliegt, das ist halt sehr 718 00:35:48,550 --> 00:35:50,540 viel, können wir nicht auseinandernehmen, ihr seht 719 00:35:50,550 --> 00:35:53,920 aber, wenn ihr euch das mal angucken wie komplex das alles 720 00:35:53,930 --> 00:35:55,440 ist. So das ist auch so ein bisschen, 721 00:35:55,450 --> 00:35:58,310 wo ich immer graue Haare krieg, es gibt so viele Möglichkeiten 722 00:35:58,320 --> 00:36:01,000 discussions und des Speichers im Browser, dass du selbst als 723 00:36:01,010 --> 00:36:04,180 Entwickler manchmal gar nicht mehr genau weißt, wo muss ich 724 00:36:04,190 --> 00:36:06,780 denn jetzt hier waren, wenn ich jetzt irgendwie ne oft hört ihr 725 00:36:06,790 --> 00:36:10,190 das so bei. Wir Software, die ihr müsst mal 726 00:36:10,200 --> 00:36:13,750 clean so ja und clean heißt halt, dass ich das möglichst 727 00:36:13,760 --> 00:36:16,530 wegfällt, dann würde alles weg, Fenster und was der Weiß von 728 00:36:16,540 --> 00:36:18,130 dieser Seite von vorhin. Quasi. 729 00:36:18,170 --> 00:36:21,550 Man möchte als Entwickler an der Stelle nochmal anfangen und das 730 00:36:21,560 --> 00:36:24,510 Verhalten dann beobachten. Quasi weil es manchmal ein 731 00:36:24,520 --> 00:36:27,510 Problem du hast zum Beispiel Teaming irgendwie irgendein alte 732 00:36:27,520 --> 00:36:29,950 Einstellungen der neuen Version von einem Code gibt es nicht 733 00:36:29,960 --> 00:36:32,860 mehr und verursacht nur noch Schaden, wenn das da rumsteht 734 00:36:33,320 --> 00:36:36,240 und da muss man sich unglaublich viele Gedanken machen, weil 735 00:36:36,250 --> 00:36:39,010 jedes Mal wenn du Hunde hundehäufchen gelassen hast beim 736 00:36:39,020 --> 00:36:41,440 Klienten hast kommt das Hundehäufchen die wieder 737 00:36:41,450 --> 00:36:43,430 entgegen. Auch wenn der schon in der 738 00:36:43,440 --> 00:36:46,030 nächsten Version bist, weil Deployen und Versions Upgrade 739 00:36:46,040 --> 00:36:48,830 können wir heute einfach machen. Aber du musst mit diesen hohen 740 00:36:48,840 --> 00:36:52,190 klarkommen. 1. Der Herausforderung so mehr sag 741 00:36:52,200 --> 00:36:55,680 ich dazu nicht, wir gehen weiter zum Security Tab. 742 00:36:56,840 --> 00:37:00,500 Nee, gehen wir auch nicht, weil ich mich selber nicht so aus 743 00:37:00,510 --> 00:37:04,500 also da steht, weil ist halt mehr so n so vor, da kannst du 744 00:37:04,510 --> 00:37:06,860 halt nur das sehen, was du auch Rechtsklick auf der Seite und 745 00:37:06,870 --> 00:37:08,870 schließt das Zertifikat. Angucken. 746 00:37:08,880 --> 00:37:11,860 Genau, genau angucken. Wie sicher ist die Connection, 747 00:37:11,870 --> 00:37:15,080 was für hatten wir auch schon mal irgendwie handshake und so 748 00:37:15,090 --> 00:37:15,940 weiter. Und dann habe ich noch 749 00:37:15,950 --> 00:37:19,010 Lighthouse und das ist ja das, was ich tatsächlich auch hin und 750 00:37:19,020 --> 00:37:20,660 wieder benutze. Ja, aber wie benutzt? 751 00:37:20,670 --> 00:37:22,170 Das benutze ich zum Beispiel gar nicht so. 752 00:37:22,180 --> 00:37:27,060 Oft Lighthouse ist quasi n SEO Werkzeug, wenn man so will. 753 00:37:27,070 --> 00:37:31,430 Also du kannst da quasi die Performance und die. 754 00:37:31,670 --> 00:37:33,700 Ja, die Performance messen deiner Website. 755 00:37:33,710 --> 00:37:37,300 Du kannst diese Accessibility messen, also sind die Buttons 756 00:37:37,340 --> 00:37:40,380 weit genug auseinander. Schlug also all diese Faktoren 757 00:37:40,390 --> 00:37:43,520 die Google ist auch ein Google Produkt, dann wieder in seine. 758 00:37:44,150 --> 00:37:46,440 Zumindest glaubt man das in seine Such Algorithmen 759 00:37:46,450 --> 00:37:49,830 einfließen lässt, um sich dann eben da gut oder weniger gut zu 760 00:37:49,840 --> 00:37:53,650 positionieren. Es ist quasi ja n SEO Developer 761 00:37:53,660 --> 00:37:55,890 Werkzeug, wenn man so will. Ja, voll mächtig. 762 00:37:55,900 --> 00:38:02,250 Ich hab mal legt sich nicht benutzt A Maier Charts 98% City 763 00:38:02,290 --> 00:38:05,680 O 47% Performance. Die Performance wird manchmal 764 00:38:05,690 --> 00:38:08,010 ein bisschen beeinträchtigt, durch welche Extensions, die man 765 00:38:08,020 --> 00:38:10,040 hat. Aber ich habs gemacht und ich 766 00:38:10,050 --> 00:38:12,070 habe jetzt zum Beispiel hier konkret den Vorschlag bekommen, 767 00:38:12,080 --> 00:38:14,110 dieses also wäre. Auf unserer Website war sieht 768 00:38:14,120 --> 00:38:17,130 das n großes GIF was unsere Software Plattform immer so 769 00:38:17,140 --> 00:38:18,610 vorstellt und das läuft so durch. 770 00:38:18,880 --> 00:38:21,860 Und der Vorschlag wäre quasi dieses Gif ja eben einmal 771 00:38:21,870 --> 00:38:24,340 auszutauschen gegen ein moderneres Format, in dem Fall 772 00:38:24,350 --> 00:38:28,610 ein MP 4 Web m Video. Siehst du mal. 773 00:38:28,650 --> 00:38:32,650 Alle Bilder bei uns schon was? Ja, weil viele Webseiten J oder 774 00:38:32,660 --> 00:38:35,660 PS, die sind ja riesig im Vergleich zu dem was und 775 00:38:35,700 --> 00:38:40,160 anscheinend würde man einen Gift durch einen MP 4 Web M Format 776 00:38:40,170 --> 00:38:43,400 austauschen, das ist der konkrete Vorschlag hier an an an 777 00:38:43,410 --> 00:38:47,290 uns für unsere Website durch das Lighthouse und ganz ehrlich 778 00:38:47,330 --> 00:38:50,900 bisschen aus dem Nähkästchen was viele Agenturen die da draußen 779 00:38:50,910 --> 00:38:54,420 anbieten für teuer Geld oder? Am Anfang als Gratisleistungen 780 00:38:54,430 --> 00:38:57,550 technisches technisches Review von eurer Website. 781 00:38:57,560 --> 00:39:00,510 Die machen nichts anderes sehen, einmal in F 12 Lighthouse und 782 00:39:00,520 --> 00:39:02,900 drücken die Seite analysieren das glaub ich machen Screenshot 783 00:39:02,910 --> 00:39:05,950 schicken, dann sagen bitteschön ja gratis. 784 00:39:05,960 --> 00:39:08,550 Also könnt ihr euch sparen. Drückt der f 12 wir haben noch 785 00:39:08,560 --> 00:39:11,830 oder ich noch sonnig, aber das hab ich schon, das glaube ich 786 00:39:11,840 --> 00:39:14,790 schon, hab ich schon erlebt da genau jetzt sind wir einmal 787 00:39:14,800 --> 00:39:17,700 durch das Tool, ich glaube wir lassen es gibt natürlich auch 788 00:39:17,710 --> 00:39:19,910 immer noch die Spitze vom Eisberg von diesem Mann, das 789 00:39:19,920 --> 00:39:22,760 nämlich auch wie die DS mit Plugins und so weiter auch noch 790 00:39:22,770 --> 00:39:25,000 erweitern 1. Sage ich noch, deshalb habe ich 791 00:39:25,010 --> 00:39:26,730 gerade neulich irgendwie installiert, total cool. 792 00:39:26,800 --> 00:39:30,410 Das heißt Sensors, und das taucht dann auf in dieser, in 793 00:39:30,420 --> 00:39:32,770 dieser, in diesem zweiten Teil, den ich unterschrieben kann. 794 00:39:32,780 --> 00:39:35,480 Ganz unten ist immer so ne noch so ne Abteilung, irgendwie 795 00:39:35,490 --> 00:39:38,720 irgendwie Informationen steht Noeding is und so weiter und da 796 00:39:38,730 --> 00:39:41,560 hab ich jetzt noch so was hast du nicht geritzt, wahrscheinlich 797 00:39:41,570 --> 00:39:44,820 nicht und da kann ich jetzt sogar noch auswählen, da kann 798 00:39:44,830 --> 00:39:47,720 ich jetzt quasi vorgaukeln der Website jetzt da reinkommt als 799 00:39:47,730 --> 00:39:50,120 wäre ich irgendwo anders, kann ich die Location auswählen, Herr 800 00:39:50,130 --> 00:39:52,850 Berlin, London, Moskau, Mountain View, San Francisco, was auch 801 00:39:52,860 --> 00:39:55,560 immer, was auch total wichtig ist, wenn man nämlich, was wir 802 00:39:55,570 --> 00:39:58,040 jetzt gerade gemacht habe, ich jetzt entwickelt, dass der 803 00:39:58,050 --> 00:40:00,540 Browser erkennt, wo bin ich und dann gleich die richtige Sprache 804 00:40:00,550 --> 00:40:03,010 nimmt. Die App ja, und wenn man da so 805 00:40:03,020 --> 00:40:06,080 programmiert hat, ja willst du testen, ja kannst du auch wieder 806 00:40:06,090 --> 00:40:09,530 teilnehmen sagt Ich bin in San Francisco hab und die Local ja 807 00:40:09,540 --> 00:40:14,910 also ENUS oder irgendwas ja und schwups könnst du reagiert der 808 00:40:14,920 --> 00:40:17,040 Browser richtig, dann kannst du gucken ob das richtig 809 00:40:17,050 --> 00:40:19,350 programmiert hast dann auch die englische Sprache kommt oder 810 00:40:19,360 --> 00:40:21,770 Polnisch oder Türkisch oder was auch immer du dich hin machst 811 00:40:21,780 --> 00:40:26,510 perfekt Frau cool also ja ist einfach Sau mächtig und ich 812 00:40:26,520 --> 00:40:29,370 glaube in jetzt in einem Satz zusammengefasst die developer 813 00:40:29,380 --> 00:40:33,410 Tools erlauben die halt quasi deine deine deine Web 814 00:40:33,420 --> 00:40:37,810 experience. So vorzubereiten für beliebige 815 00:40:37,820 --> 00:40:41,860 Devices, für beliebige Locations unter guter Performance und so 816 00:40:41,870 --> 00:40:44,910 weiter da kannst du das selber nutzt jeden Tag, dann kriegst du 817 00:40:44,920 --> 00:40:48,160 irgendwann ne Web Anwendung hin, die halt echt unter jeder unter 818 00:40:48,170 --> 00:40:49,990 jeder Bedingung halt richtig cool läuft. 819 00:40:50,000 --> 00:40:54,090 So also wie gesagt, ich hab das immer auf wenn ich entwickelt 820 00:40:54,100 --> 00:40:58,040 das Tool und hab immer im Auge brauchen wir nicht so viel 821 00:40:58,050 --> 00:41:01,430 Speicher funktioniert das kommt keine komischen Fehlermeldungen 822 00:41:01,440 --> 00:41:04,650 und unter also empfehle ich jeden also also ich glaube alle 823 00:41:04,660 --> 00:41:08,350 w Entwickler die sagen ja ja kenne ich natürlich so ja aber 824 00:41:08,360 --> 00:41:10,380 halt die Laien so und einfach mal zum angucken. 825 00:41:10,450 --> 00:41:13,610 Wir, die Webseite macht ja oder man wordpress oder irgendwas 826 00:41:13,620 --> 00:41:16,230 dann einfach mal gucken. Ja, vielleicht gibt es irgendwas 827 00:41:16,240 --> 00:41:19,260 ganz krass irgendwie einem gleich ins Auge sticht und so O 828 00:41:19,380 --> 00:41:23,080 hier beschwert sich aber ganz schön heftig, kann man 829 00:41:23,090 --> 00:41:25,480 vielleicht schnell aussortieren. Finde ich spannend. 830 00:41:25,490 --> 00:41:29,010 Ja noch Anwendungsfall, wenn jetzt nicht so n so NCMS und 831 00:41:29,020 --> 00:41:32,700 Content Management System hat wie wir, sondern vielleicht die 832 00:41:32,710 --> 00:41:36,590 Website noch selbst gebaut hat T und CSS und javascript, dann 833 00:41:36,600 --> 00:41:39,950 kann man als Marketing Abteilung auf die aktuelle Website gehen 834 00:41:39,960 --> 00:41:43,470 oder als für die Website verantwortliche Abteilung und 835 00:41:43,480 --> 00:41:47,010 kann dann in dem HTML. PS Halt Dinge ändern ja klar und 836 00:41:47,020 --> 00:41:49,810 einen Screenshots machen und das dann so an die Entwicklung hier 837 00:41:49,820 --> 00:41:52,340 ist ne gute Idee schicken und sagen bitte baut mir das mal 838 00:41:52,350 --> 00:41:55,050 genauso um meine musst du jetzt nicht mehr eingehen und erst mal 839 00:41:55,060 --> 00:41:57,310 Frames machen aber wenn du benutzt deine Webseite wenn es 840 00:41:57,320 --> 00:41:59,050 nur Kleinigkeiten sind. Ja, genau, ja. 841 00:41:59,060 --> 00:42:01,510 Das hab ich. Mal gemacht in der Vergangenheit 842 00:42:01,520 --> 00:42:04,380 also k ob das jetzt noch irgendwie relevant aber sein ne, 843 00:42:04,470 --> 00:42:07,670 das macht auch Spaß, macht Spaß, da kann man gucken, muss man 844 00:42:07,680 --> 00:42:10,210 einfach mal gehört also bei uns auf jeden Fall in den Podcast 845 00:42:10,220 --> 00:42:13,420 rein, weil ist halt einfach so n Ding muss man gehört haben wenn 846 00:42:13,430 --> 00:42:15,810 man irgendwie mit mit Chrome unterwegs ist. 847 00:42:15,820 --> 00:42:21,160 Oder gut, cool, dann fertig. Ohne Spicker heute durchgekommen 848 00:42:21,200 --> 00:42:24,030 Spicker live vor der Nase. Gehört sie weiter Computer? 849 00:42:24,040 --> 00:42:27,190 Also sorry nochmal das klicken, aber ihr werdet verkraften. 850 00:42:27,200 --> 00:42:28,840 Ja, wenn ihr jetzt hier angekommen seid ihr schon 851 00:42:28,850 --> 00:42:32,020 verkraftet, also danke fürs Zuhören und bis nächste Woche, 852 00:42:32,060 --> 00:42:34,240 dann war einfach. Komplex ja, alles klar. 853 00:42:34,250 --> 00:42:38,460 Tschüss Hamburg. Einfach komplex wird produziert 854 00:42:38,470 --> 00:42:41,560 und präsentiert von Heisenberg. Weitere Informationen findest du 855 00:42:41,570 --> 00:42:44,640 unter heißen ware.com. Vielen Dank fürs Hören dieser 856 00:42:44,650 --> 00:42:47,080 Folge und bis nächste Woche Tschüss Hamburg.