Zur aktuellen Sendung ist Frederic Hemberger (Web, Twitter) zu Gast, der erst kürzlich mit uns über die Beziehung von DevOps zur Täglichen Arbeit als Webentwickler gesprochen.
Heute sprechen wir über Container-Software wie VMs, Docker und Kubernetes und wie diese ineinander greifen.
Keine News
Schaunotizen
- [00:00:34] DevOps – Was sind eigentlich diese Container (und mehr)?
- Erst mal müssen wir klären, was es mit diesen Container-basierten Systemen eigentlich auf sich hat und wie Docker dieses System umsetzt. Dazu sprechen wir über Virtual Machines und wie diese sich im Gegensatz zu Docker positionieren. Danach gibt Frederic uns einen Einblick in Kubernetes und was das System tut.
Keine Schaunotizen
- KubeWeekly
- DER wöchentliche Newsletter rund um Kubernetes.
- KubeCon’18 EU
- Präsentationen und Videos der KubeCon 2018 EU.
- Kubernetes Forum
- Für alle, die mal was diskutieren wollen (zum Thema Kubernetes).
Wir hatten mal wieder Frederic Hemberger (Web, Twitter) zu Gast, mit dem wir uns über das neueste aus der DevOps-Welt austauschten.
Schaunotizen
- [00:01:12] DevOps
- Wir quatschen über DevOps und tauschen Erfahrungen mit diverse Tools aus (bzw. stellen im Falle von Peter allerlei naive Fragen).
[00:49:58] Keine Schaunotizen
- Wildcard TLS-Zertifikate bei Let’s Encrypt
- Es gibt einiges neues bei Let’s Encrypt, nicht nur (aber auch) Wildcard-Zertifikate.
- Git’s Hidden Feature: Notes
- Eines der zahllosen Git-Features, die nicht jeder kennt.
- gitleaks
- Durchsucht die gesamte History eine Git-Repositories nach versehentlich eingecheckten privaten Schlüssen und mehr.
Wir haben uns kurz vor Heiligabend den Mario Heiderich eingeladen, um über grauenvolle, abstruse und schier unlösbare Sicherheitslücken moderner Browser zu reden. Der richtige Stoff für besinnliche Weihnachtsstimmung und frohlockende Ausblicke ins neue Jahr!
Schaunotizen
- [00:00:11] DOM Clobbering, XSS via CSS, Template Injection, etc.
- Mario Heiderich, ehemaliger Webentwickler, heutiger Security-Experte, erzählt uns von den ganzen, dunklen Seiten der modernen Webentwicklung, die verheerende Schäden anrichten können, ohne das wir uns richtig wehren können. So beschreibt er aktuelle Sicherheitslücken in den Template Engines von AngularJS oder KendoUI und hält auch fest, dass diese Dinge gerne von den Bibliotheksherstellern auch mal auf die lange Bank geschoben werden (wie beispielsweise Frederic Hembergers jQuery Pull Request von „neulich“ zeigt). Es gibt Hilfestellungen, wie beispielswiese Marios DOMPurify, mit dem man Zeichenketten auf verdächtigen Code prüfen und gegebenenfalls bereinigen kann.
Es muss allerdings nicht immer JavaScript sein. Mit CSS kann man mit Hilfe der @-moz-document Regel und Regular Expressions im Firefox ganz einfach Session Token aus der URL klauen. Mario erklärt ausserdem, wie man die Paint-Zyklen der Browser und CSS Filter dazu ausnutzen kann, um auf bestimmte Zeichen zu schließen, die der Benutzer eingibt. Zukünftige Spaßquelle bieten SVGs im Allgemeinen und SVGs in Webfonts im Speziellen.
Ebenfalls lückenreich und angriffsanfällig ist der DOM. Mit In the DOM, no one will hear you scream gibt es einen mittlerweile sehr bekannten Talk von Mario, der uns das Prinzip des DOM Clobbering näherbringt. Der Abwärtskompatibilität von HTML sei es geschuldet, dass man derartige Dinge überhaupt durchführen kann.
Dass man allerdings auch mit kommenden Technologien allerlei Unfung anstellen kann, zeigt der Ausblick auf Template Strings in EcmaScript 6. Mario sieht sich in seiner Rolle für die nächsten Jahre auf jeden Fall beschäftigt.
Abhilfe gewünscht? Mario lässt uns nicht im Schneeregen stehen, sondern gibt auch ein paar hilfreiche Schutzhinweise. Für hundertprozentige Absicherung empfiehlt die Workingdraft Crew eine Ausbildung zum Reisbauer auf dem zweiten Bildungsweg.
Weitere Links zu den Themen, die besprochen wurden:
Zu guter Letzt gibt es noch einige Hinweise auf themenbezogene Konferenzen.
[01:35:37] Keine Schaunotizen
- HTTPS Mythen
- Golem klärt auf, was es mit den herumschwirrenden HTTPS Gerüchten und Mythen tatsächlich auf sich hat.
- Let’s make a Firefox Extension, the painless way
- Ein knackiges Tutorial beschreibt, wie man Extensions für Firefox entwickelt.
- Flexbox Adventures
- Schon wieder ein Flexbox Tutorial? Ja! Dieses zeigt allerdings interaktiv und ausführlich, was es mit den Properties
flex-grow, flex-shrink und flex-basis auf sich hat.
Die Stammbesetzung von Schepp, Peter, Hans und Stefan durfte in der aktuellen Revision Frederic Hemberger als Gast begrüßen, um uns über die unterschiedlichen Use Cases von Vagrant zu informieren. Spontan stieß auch noch unser treuer Hörer Marius hinzu, der ebenfalls in die Lobeshymnen einstimmte.
Schaunotizen
- [00:01:03] Vagrant – Development environments made easy
- Die Entwicklungsumgebung braucht Java, man will sich die eigene Maschine aber nicht versauen? PHP in einer Uraltversion gefordert, die man lokal nicht mehr zum Laufen kriegt? Oder einfach zwischen den Kollegen die gleichen Rahmenparameter für die Entwicklung herstellen? Mit Vagrant alles kein Problem. Frederic und Stefan sind seit längerem Fan des Commandline Tools, welches das Aufsetzen, Steuern und Konfigurieren von virtuellen (Linux-)Maschinen kinderleicht und versionierbar macht. Die beiden machen — unterstützt von Marius — dem Rest der Truppe die Vor- und Nachteile an einigen Beispielen schmackhaft und sprechen vom ultimativen Test- und Reproduzierbarkeitsnirvana. Wer auf den Geschmack gekommen ist und mehr als Ubuntu braucht, wird übrigens auf Vagrantbox.es fündig. WordPressentwickler sollten sich VagrantPress genauer ansehehn.
- [00:20:30] Clientside JavaScript Error Reporting
- Die Hörerfrage von Marius wurde nicht nur über Twitter, sondern auch gleich live in der Sendung vom Fragesteller persönlich eingeworfen: Welche client-seitigen Fehlerreporting Tools verwenden wir eigentlich, und welche Dienste sind uns da am geläufigsten? Frederic schwört auf eine eigene Lösung, bestehend aus ca. 60 Zeilen Code, die ihm beim Ermitteln von Edge Cases schon einige Male enorm geholfen hat. Außerdem gab Paul Irish auf Google Plus einen guten Überblick über geläufige Services.
[00:30:48] Glücksrad
- Application Cache
- Der Application Cache war als Offlinemechanismus eine durchaus ambitionierte Angelegenheit, ging bei uns aber nie über den Demostatus hinaus. Wir erörtern die Gründe und geben auch Positivbeispiele. Erwähnung findet auch Frederics Manifest Validator und ein Blick in die Zukunft mit Service Workern.
[00:40:10] Keine Schaunotizen
- 10 Reasons we switched from an icon font to SVG
- Icon Fonts sind toll, haben aber ein paar Nachteile, die für die Autoren des Artikels Grund genug waren komplett auf SVG zu wechseln.
- How to measure Frontend Performance with Phantomas and Grunt
- Die 4Waisenkinder erzählen uns wie man Frontend Performance mit Phantomas und Automatisierungstools wie Grunt hervorragend messen kann.
- Slip
- Listen, die auf unterschiedliche Gesten unterschiedlich reagieren, gibt’s bei Pornels Slip.
- Accessibility Tools
- Frederic wirft drei hervorragende Accessibility Tools ins Rennen: Eine Chrome Extension nebst anschaulichen Lintern bei AccessLint und WAVE.
- Manageable Sass Components
- Wer mit Bower und Sass Komponenten arbeitet bzw. solche sogar entwickelt, kann in dieser Ode an das !default Flag erkennen, wie man diese für Außenstehende konfigurierbar macht.
- Kod.io Linz
- Stefans Wahlheimatstadt Linz bekommt eine Entwicklerkonferenz. Eine einmalige Gelegenheit mit einem ansehnlichen Line-Up, auch für Frontend Entwickler.
- I Want To Use
- Irgendein modernes Browserfeature erwünscht? Nicht sicher ob das alle mobilen Devices auch können? „On mobile, I want to use“ gibt Aufschluss.
- Donate your dusty device
- Die Open Device Labs der Welt fordern auf, euer ranziges Smartphone für den guten Testzweck zu spenden. Finden wir unterstützenswert!
[00:49:22] Der Tipp der Woche
- Option-Key + Click
- Man lernt eben nie aus: Im OS Terminal kann man bei gedrücktem Option Key und einem Klick die Cursorposition ändern. Enorm hilfreich bei langen Commandline-Befehlen.
Die Not macht erfinderisch: Aus akutem Mangel an Themen zauberten Schepp, Peter und Stefan eine sehr JavaScript-lastige Revision aus dem Hut, die sich mit brandneuen bzw. noch nicht so geläufigen Technologien auseinandersetzt:
Schaunotizen
- [00:00:26] DOM Mutation Events & Mutation Observers
- Bei seinen Arbeiten am object-fit Polyfill mit Anselm stieß Schepp auf die (älteren, mittlerweile obsoleten) DOM Mutation Events bzw. die (neueren, flotteren) Mutation Observer, mit denen sich Änderungen an DOM Knoten ab IE9 fein überwachen lassen. Schepp erzählt von seinen Erfahrungen und nennt Anwendungsmöglichkeiten, und verrät auch wie man rein theoretisch im alten IE8 etwas ähnliches nutzen könnte.
- [00:19:09] ECMAScript 6: Generators
- Aus dem Webtechnologienlabor des Erklärbärs kommt ein feiner Artikel zu den neuen Generator Funktionen, die mit ECMAScript 6 spruchreif werden, und in Chrome via Flag und den Nightly Builds von Firefox sogar schon eingesetzt werden können. Peter erklärt Syntax und Funktionsweise und gibt einen Anwendungsfall an, mit dem man der Callback-Hölle entfliehen und ins asynchrone Nirvana eintreten kann. Das Schöne: Mit ES6 auf ES3 Transpilern wie Traceur und dem dazu passenden Grunt task lässt sich das ganze sogar heute schon einsetzen!
[00:42:31] Keine Schaunotizen
- Chrome Dev Summit: Service Worker
- Ab 1:05:00 gibt’s einen tollen Ausblick auf die kommende Service Worker API.
- Responsive Comments
- Responsive Inhalte (wie z.B.: Bilder) ressourcenschonend in Kommentare verpacken und mit dieser JavaScript Bibliothek auslesen.
- noUISlider
- jQuery Plugins seien passé? Nicht wenn man so ein sauber implementiertes und sogar auf Touchgeräten absolut funktionierendes Sliding Control vorgesetzt bekommt.
- Unicode in Fonts
- Wer braucht denn gleich die Iconfont, wenn man mit Unicode Characters auch seine Herzchen bekommt. Diese Liste enthält alle Details.
- LocalForage
- Auf die IndexedDB mit der aus localStorage bekannten API zugreifen. LocalForage von Mozilla macht das möglich.
- Advent, Advent …
- Die besinnlichste Zeit des Jahres wäre nicht dasselbe ohne die beliebten Advent(s)kalender von 24 ways, Perfplanet und natürlich den Webkrauts. Gerade bei letzterem empfehlen wir Frederic Hembergers HTTP Header Artikel.
Eigentlich haben wir alle keine Zeit, aber das ist keine Ausrede – jedenfalls nicht für Schepp, Peter und Frederic.
[00:00:23] News
- Google and MPEG LA Agree, Free VP8
- Der VP8-Codec (verwendet in WebM) wird auch in Zukunft nicht in die Nichtexistenz geklagt werden.
- Opera 14 Beta
- Der erste Opera mit Webkit. Besonders schön: Läuft anders als Chrome und Co bereits ab Android 2.3.
- Node.js 0.10
- Neues Streams-Interface, stark verbesserte Performance und diverse Bugfixes.
Schaunotizen
- [00:01:51] Data Compression Proxy
- Google bastelt einen Performance-Proxy für mobiles Surfen, vergleichbar mit Opera Turbo. Jede (nicht-HTTPS) Anfrage wird durch einen Google-Server getunnelt, der Performancetuning mit z.B. SPDY und mod_pagespeed vernimmt, bevor die Daten an den Nutzer weitergeleitet werden. Performance-Papst Schepp findet die Idee total klasse, während sich Peter fragt, ob man wirklich jeden seiner HTTP-Requests zu Google tragen möchte – viel besser wäre es doch, die Mobilfunknetze auszubauen.
- [00:17:35] The Good & Bad of Level 4 Media Queries
- Noch sind Media Queries Level 4 alles andere fertig, aber ein bisschen Spec-Exegese kann man schon betreiben. Der Artikel von Stu Cox und wir reiben uns ein wenig am Media Feature
pointer, das nicht ganz durchdacht scheint. Nicht zuletzt fehlt eine Option für den Minority Report Mode. Wäre es nicht besser, wenn wir einfach weniger Annahmen über die Eingabegeräte der Nutzer machen würden?
- [00:27:48] http-client-hints
- Ilya Grigorik will, dass wir genauere Annahmen über die Endgeräte der Surfer machen können und spezifiziert einen HTTP-Header für solche Informationen. Peter fühlt sich bei sowas an die History of the browser user-agent string, Viewports und andere Flunkereien durch Browser erinnert und fragt sich, warum dieses mal alles anders sein sollte.
[00:40:05] HTML-Glücksrad
- Timed Text Tracks
-
Wir fabulieren ein wenig über Video-Untertitel, das WebVTT-Format, Security sowie Transloadit und andere Datei-Umwandel-Dienste. Außerdem empfehlen wir den Talk The State of HTML5 Video von Jeroen Wijering.
[00:51:05] Keine Schaunotizen
- Finer grained control of hyphenation with CSS4 Text – Generated Content by David Storey
- Funktioniert sogar schon in IE 10 und Safari.
- Using SVG
- Umfassender Überblick von Chris Coyier zum Thema.
- Codebase
- Github für mehr als nur Git plus Projektverwaltung.
- Spenden für Tern
- Open-Source-JavaScript-Autocompletion kann man nicht kaufen, aber crowdfunden.
- Meaningful Transitions
- Schöne Patterns für Transitions in UIs.
Verstärkt von Marc Hinse und Frederic Hemberger warfen sich Kahlil, Hans und Peter todesmutig den Themen der Woche in den Weg.
Schaunotizen
- [00:00:33] ProcessWire
-
Old and busted: MODx. New Hotness: ProcessWire! Der ehemalige MODx-Pontifex Marc und Peter granteln über Fehlentwicklungen bei MODx und Marc sowie CMS Critic kennen die Lösung. ProcessWire ist ein relativ neues CMS, das alles einfach hält und das richtig macht, was MODx in jüngerer Zeit so verbockt.
- [00:18:26] Sueddeutsche.de
-
Sueddeutsche.de hat sich einen Relaunch gegönnt. Während das Ergebnis aus Designperspektive ganz ok ist animiert die technische Umsetzung doch eher zum Gruseln. In Anbetracht recht erratisch erscheinender Tag-Verteilung nennt Marc den Quelltext „verunfallt“ und in der Tat muss man sich fragen, warum man eine seit Monaten veraltete jQuery-Version gleich zwei mal einbettet. Responsive ist das Ganze natürlich nicht, aber das wäre bei den ca. 2 MB Datenvolumen ohnehin nicht besonders hilfreich. Der Aspekt der Barrierefreiheit ist auch eher eigenwillig umgesetzt worden. Summa Summarum: Epic Fail.
- [00:37:57] File API – an introduction
-
Microsoft kredenzt uns einen Einstieg zu File API – löblich, auch wenn der Internet Explorer selbst in dieser Disziplin nicht gerade ein Campion ist. Peter betont, wie wichtig bei der File API das Technologie-Drumherum aus z.B. Indexed DB und Typed Arrays ist. David Flanagan hat das Thema mal bei einer JSConf sehr umfassend aufgedröselt.
- [00:47:38] Grunt
-
Wir nehmen zwei Artikel zum Thema Grunt zum Anlass, um nochmal über das nette kleine Buildsystem für Frontend-Devs zu quasseln.
- [01:05:19] The Nitty Gritty
- Ein neues Webtech-Blog von einigen der rasenden Working-Draft-Reporter.
[01:13:25] Keine Schaunotizen
- Adventskalender für Webentwickler
- Wir empfehlen mehrere Adventskalender.
- IE10 CSS Hacks
- Ersatz für die im IE 10 nicht mehr unterstützten Conditional Comments.
- Getting serious about SVG
- Tipps rund um SVG-Generierung mit der Library d3.
- Walkabout.js
- Test-Library, die eure jQuery-Funktionen nach dem Zufallsprinzip aufruft und mit Daten bewirft.
- Startup Ipsum
- Blindtext-Generator.
- Cologne.js meets Nodecopter
- Am 11. Dezember in Köln-Deutz.
Während alle anderen auf tollen Konferenzen rumturnen, trümmerten Sebastian, Anselm, Frederic und Peter eine weitere Revision eures Lieblingspodcasts ein. Extradicker Dank geht an Schepp, der die total mißratene Tonspur noch einigermaßen gerettet hat.
[00:01:08] News
- Media Fragments URI
- Habemnus Specs!
Schaunotizen
- [00:01:51] Safari for iPhone ignores viewport settings on .mobi domains
- Unfasslich aber wahr: je nach TLD (!) macht der mobile Safari mal dieses, mal jenes. Das war allerdings nicht der größte Smartphone-Hersteller-Fail dieser Woche …
- [00:13:34] Schwere Sicherheitslücke bei Samsung
- Mithilfe eines Iframes (ihr seht, es hat etwas mit Webentwicklung zu tun!) kann man Samsung-Telefone bricken. Nachdem man vor lachen wieder Luft bekommt, sollte man eine Fix-App wie diese installieren um sich abzusichern. Mit einem Hersteller-Update ist nicht zu rechnen, denn das würde bedeuten, dass Smartphones vollwertige Computer sind und das wollen SIE eigentlich gar nicht. Die Aluhüte Frederic und Peter verweisen auf den war on general computation.
- [00:28:06] Persona – BrowserID goes beta
- BrowserID (nicht zu verwechseln mit dem ranzigen Theming-System) bietet einen Login für das ganze Web … so wie OpenID nur in benutzbar. Und Persona, Mozillas Implementierung davon, ist nun in der Beta-Phase. Besonders schön ist, dass eine Migration vom Jetzt-Zustand in die BrowserID-Welt möglich scheint, da das System ein überzeigendes Design hat. Finden wie gut!
- [00:37:24] TypeScript
- TypeScript erschien erst wenige Stunden vor der Aufnahme der Sendung, aber ein bisschen oberflächlichen Spaß wollten wir und nicht nehmen lassen. Angeblich ist TS die Secret Sauce für JavaScript Development at Application Scale, aber wir ziehen eher kritische Vergleiche zu CoffeeScript und Roy.
[00:59:12] Keine Schaunotizen
- Subtle Patterns
- Texturen-Library mit cooler Vorschau-Funktion.
- iOS 6 html hardware acceleration changes and how to fix them
- Auch in iOS 6 ist wieder alles anders als zuvor.
- Thinkin’ Tags geht Live
- Dirk Jesses Rapid Prototyping Tool ist da!
- Jetstrap – The Bootstrap Interface Builder
- Bootstrap-Designs zusammenklicken.
- Styler
- Live CSS/Stylus editor.
- Videos von LXJS
- Wärmstens empfohlen von Sebastian.
- Cody Lindley frontend-tools list
- Eine weitere (lange) Liste mit Frontend-Tools.
- Dom Enlightment
- Ein kostenloses, sehr ambitioniertes Buch über das DOM.
Als Gast war diesmal wieder Frederic Hemberger am Start, der uns immer gerne mit seinem Fachwissen zur Seite steht.
Wir möchten auch noch einmal auf unseren Live-Stream und den IRC-Chat auf Freenode im Channel #workingdraft hinweisen. Wir sind immer montags ab 20 Uhr live, wenn nicht anders angekündigt. Die neusten Infos gibt’s immer auf Twitter und bei Google+.
Schaunotizen
- [00:00:18] JavaScript Styleguides
- Addy Osmani befasst sich mit Programmierrichtlinien in JavaScript. Er führt dabei idiomatic.js, den jQuery Core Style Guide und viele weitere Best Practices an, die wir diskutieren. Hans hat über seine persönlichen Richtlinien in HTML und CSS einen Post geschrieben.
Außerdem sprechen wir über Ben “Cowboy” Almans Blogpost zum Thema var-Deklarationen.
- [00:19:00] Barrierefreiheit und die Beschwerdekultur im Internet
- Domingos de Oliveira findet es schade, dass Accessibility-Experten sich aufregen, wenn Webseiten nicht perfekt zugänglich sind; sie sollten lieber mal die Dinge loben, die überhaupt gemacht werden. Marco Zehe gibt mit seinem MMT Talk einen guten Einblick, was es für Sehbehinderte Menschen bedeutet, Barrierefreiheit zu genießen.
- [00:35:20] A Step for Open Sharing: AddThis Integrates Web Intents
- Zum Thema Web Intents: Was ist das eigentlich? Und nutzt das jemand?
AddThis integriert Web Intents mit Fallback und schreibt darüber. Sieht vielversprechend aus!
[00:44:28] Keine Schaunotizen
- Videos vom MMT29
- So langsam gehen die Videos vom MMT 29 in Köln online. Hier findet ihr zum beispiel Peters.
- The Web Platform: Browser Technologies
- Schöne Übersicht über die einzelen Specs, Caniuse/MDN-Links, etc.
- Die neue Git-Homepage
- GitHub hat eine neue Präsentationswebseite mit Dokumentation für Git erstellt.
- Node WebKit Agent
- Die WebKit Developer-Tools für Node.
- Backbone.js CRUD Application
- Eine Single-Page CRUD Application mit Backbone.js und Twitter Bootstrap.
- Bessere Performance mit element.classList
- Mr. Paul Irish zeigt, wie man die Performance von bspw. Animationen mit
element.classList drastisch verbessern kann.
- Cross-Browser Fullscreen API
- Sindre Sorhus hat einen Wrapper für die Fullscreen API gebaut, der auf allen browsern funktioniert, die die Fullscreen API supporten.
- G+-Zirkelteiler mit nur JS-Menschen
- Für alle, die noch nicht genug Leute eingekreist haben.
Mit Frederic Hemberger als hochkarätigem Ersatz für den ausgeflogenen Peter stürzten wir uns auf aktuelle und liegen gebliebene Themen.
Schaunotizen
- [00:00:20] Kein Hot Pink mehr in der Boilerplate
- HTML5 Boilerplate hatte lange Zeit Pink als Hintergrundfarbe für markierten Text eingesetzt, im Vertrauen darauf, dass Webentwickler clever genug sein würden, das bei Bedarf zu ändern. Drollige Vorstellung.
- [00:08:14] Grunt
Grunt is a task-based command line build tool for JavaScript projects.
Frederic übersetzt das für uns.- [00:18:17] <dialog>
- Neue Elemente für HTML5? Immer wieder gerne!
- [00:28:44] Mobile Testing
- Wie testet man mobile? So geht das! Bleibt noch das leidige Problem mit dem Download unnötiger Ressourcen, doch auch da gibt es ja Ansätze.
- [00:43:05] jQuery – The Little Things
- Rodney Rehm in Hochform erklärt und demonstriert den Unterschied zwischen „It works“ und gutem Code.
[00:49:34] Keine Schaunotizen
- Uberspace-Videotutorial
- Wie der beste Hoster der Welt funktioniert, erklärt in bewegten Bildern.
- JavaScript Enlightment: Free PDF eBook
- Verflucht sei die elende Kostenloskultur im Internet.
- Miso Dataset
- Clientseitige Datentransformation vom Fach.
- BEM
- Umdenken für das Frontend.
- Modern Web Development, Part 1 – The Webkit Inspector
- Auftakt einer Serie über die optimale Webdev-Toolchain.
- dGrid
- Grid-Komponente für Dojo.
Revision 345: DevOps - Kubernetes, VMs und Co. [ 1:04:01 | 43.98 MB ] Jetzt abspielen | Play in Popup | Download