It is now We're gonna spend three thirty nine minutes and fifty eight seconds talking about the wonderful world of SVG It's gonna be amazing. My goal is to get you excited about SVG and stuff Maybe I'll not stand right in front of it. Although. I like to pace a little bit I work on a pretty cool app called codepen and there's gonna be a bunch of codepen demos and stuff in here Just because that's exciting and fun and I like showing off other people's work SVG is a language It's built with angle brackets and attributes and values between those things and stuff. It looks a little bit familiar to our friend HTML they're both kind of XML, right, but in HTML land the tags are Divs and spans and things that make sense for documents whereas in SVG the elements are slightly different They're rectangles and ellipses and things for drawing and things to affect drawings, but they're familiar and they're fun They hang out together and that type of thing Let's look at a little bit of syntax for context, you know what we're talking about here how SVG works. It's not particularly complicated in fact Of all that you know like if you're right in HTML There's like you don't have to like have a cheat sheet of elements next to you usually is you kind of just know what to use That like a SVG is kind of that same way There's not so many elements that it's hard to memorize the important ones that you need or not even memorize It's kind of rare the actually have to write them yourself But the point is there's just not that many in fact for the shapes that do drawing in SVG That's all of them really there's really not that many is lines and rectangles and both circles and ellipses Polyline is a polygon that's just not closed and then paths are fun because they can draw anything They have their own kind of special syntax pretty cool little element there. Let's look at a little bit of syntax Pretty easy to understand the dashed area there will be the SVG context that we're working in it'll be an SVG tag around This rectangle, but there's an X and a Y coordinate, which is kind of the where it lives You know, that's that's 10 10 right there Sure, and then it has a width and a height and then those are equal So that's why it's a square and we've drawn a we've drawn a circle that's filled with yellow and struggle It's pretty easy to understand. It's just some attributes on XML elements and you've kind of Syntastically declared a rectangle pretty nice there circles work the same way There's an X and Y coordinate and a radius involved and it draws a circle there So pretty kind of pretty kind of easy to understand System there there's XY points that and then that's how a polygon works is just XY points and it draws a shape between them You can kind of draw anything It's it doesn't take too much of a stretch of imagination to understand that you could with those tools draw beaker freaking out There's just circles and polygons and stuff You know like the tools are there if you can draw rectangles and circles and stuff and fill them with colors You can draw a lot. Those are the kind of the tools of art There's these are the little electricity things are poly lines Unclosed polygons and stuff that the tools are kind of there a little bit more syntax. You could declare a gradient That's how it's done in in SVG. It's a little it's a little wordy Maybe for a little bit compared to CSS, but it's not too bad. There's actually a gradient element That doesn't draw anything at all by itself You're just kind of declaring this gradient in which to kind of apply to other elements later We've given it an ID here And this is like a fancy designer gradient where it fades to like green to like slightly different green to slightly different green just so it's perfect and there It's any lips and we'll draw the ellipse and we'll fill it with a reference to that gradient And it's a gradient with a fancy green thing on it, right? We can take because it's been declaratively defined We can then draw something else We'll have a path element with a bunch of funny numbers in there But that you know member path can kind of draw anything in this case We drew a little leave and we filled it with green and we were able to refer to the same Gradient that we've already defined so that's kind of the Syntaxical declarative nature of SVG that's kind of cool with those tools now so you can draw any shape You can fill it with any color you can stroke it with any color There's you can do all the all the tools of art are there It's not too much of a stretch of imagination to think that you could just do anything You know I have all the tools that's that's all the that's all you can do in any kind of visual languages draw shapes and fill them with Colors, maybe I guess texture we don't have but that's about it in SVG So this particular image in the background though There's kind of limits to the practicalities of SVG in that way I happen that's one that comes with like illustrator when you buy it is like look at the cool shit illustrator can do But it's like a lot as SVG It's like 11 megabytes and it was just weird territory for SVG I mean it came as a dot AI files whatever But you would probably not use that an SVG format on the web because it's like impractically large and the pull point of SVG is the web really I mean there you might like argue for some archival reasons why it exists, but It's a vector format for the web. It was born for the web It was specced out by web people to be used on websites So what's kind of interesting about that is there's no there's no it doesn't enforce any particular like performance Limits or anything, but there's certainly files that like totally definitely should be SVG on your websites Totally definitely shouldn't be SVG on your websites like that weird Whatever that was happening in that one and then and then like gray in between right of ones that are like Probably should be SVG, but maybe not or how do I guess?  I Can just tell is like 80 bytes, you know It's like a it's like a couple of a couple of elements just a little bit of code that it would take to draw that in SVG with The stroke it's super minimal code and it will render like it is now render perfectly well On a website that's kind of in the like definitely category like if that's the image you're trying to use in your website That is like SVG town definitely use that then as we move into the middle ground Territory, there's like maybe like kind of cartoony stuff like this vision of your grandmother here is like in that gray area Kind of like it's a it's complex enough That the file size compared to the PNG version of it is like I don't even know so when you're in this kind of territory, which we'll talk a little bit more as we move on You should probably be comparing the zipped file size of it compared to cool The zipped size of the of the of the of the JPEG version of it to be kind of to be kind of fair about it And then you have to make choices like is it are you am I just playing it that big on the website? And it needs to look super crisp or am I shrinking it down to like avatar size and there's like 12 of them There's like decision-making that you have to do their file size being one of them in comparing the the gzip file size of SVG which we're going to look at in a minute this version of your grandma. It's it's raster. It's pixel by pixel There's no there's no reason for that to be SVG SVG isn't it's a it's a cool file format It's useful for lots of things raster not really being one of them unless it's like weird clown car stuff That was a best cackle ever nope Cool, this would be like maybe in the maybe category right it's pretty complicated SVG could totally handle it It looks beautiful, but it's fairly complicated. It would probably be a pretty big SVG file, but it's moves Which puts it firmly in the SVG category because that's awesome And the SVG has great animation tools We'll talk about that as we move forward a little bit here as someone who looks at a lot of demos on code pan Occasionally, I'll see something like this where it's really cool. You're like nice You made it I kind of an SNES controller that looks awesome It does look awesome cool little experiment wouldn't take that away from anybody But you do look at the code and in this particular case It was just div town right which is cool and clever and interesting you can take We've come we've talked about this many times you can take a rectangle and apply border radius to it and absolutely position it and rotate it And you can make this happen with divs and there's nothing really the wrong with that from experimental perspective Other than that it was probably kind of hard to do that and it probably would have taken like 10 seconds an illustrator to draw The things that just exported as SVG and then it would have been an SVG file Which is cementically appropriate thing that has more design possibilities to it. There's more places you can take it There's more animation that could be done to it in an easier way. So this kind of drawing with divs stuff is weirdly common and should be just play with SVG kind of thing not to mention there's tools to do it like like I said You could probably draw that Without too much skill and something like illustrator barely quickly an illustrator speaks SVG very well It's a native file format of illustrator, which is great. So I think here's just me Smurfing around and in there just just to prove that like look It's made from points and you can move things and rotate them and crop them and remove other garbage and stuff I probably should have made this video so long and boring But I think the point is I get to a point where I'm saving it because I need I need an SVG file in which to use And the drop-down menu has SVG as a format. It's not just you don't just export to You know, it's not like you have a PSD and they're like I'm gonna temporarily make a jpeg but I had me to keep the PSD around because otherwise it won't be editable the SVG and illustrator can be saved as a SVG in a kind of fully editable Kind of way and we'll we'll get a little bit in more into that later and kind of what you should and shouldn't do there I think I might even have this kind of this is like one of those like major dialogues that you're confronted with when you Do that that's like holy buckets. Is there a lot of things in there? SVG SVG 1.1 is the kind of the correct choice there This is the thing like let's say you have type in an SVG file. It says like Chris okay, and then that's editable so I can click into it and like change the letters to something else it remains Editable text, but then like in SVG there's an actual element called text and that's kind of great because the text remains editable selectable indexable searchable findable whatever text actually in the SVG document Which is great and it's really tiny and efficient that way But it's subject to the fonts that are available in the document that you put it in So if you use like cool Gotham or whatever designers are using these days Gotham light You can't like you can't just use that the text it won't little be in Times New Roman or whatever the default is right unless you Happen to be load that at font face font and use it But if you're like, but I really want to use Gotham light on you can like convert all that stuff to outlines I'm sure you've done that before it's not really type anymore. It's just a vector shape of this We'll just kind of do that on the fly for you. That's what that one is It's just kind of convenient when you save it. This this is an important one the preserve illustrator editing capabilities. That's like If you like guides, you know, you can drag in the little blue bastards from the side and they Luffer line and stuff up that's data that goes into a file And you would maybe expect that the next time you open that file that they would be there But that's stuff that's got to be in there if you save an SVG format. There's no SVG Element for a guide.  I don't even know what it looks like in the file But it's there totally useless for the web. So it's tempting to like turn that off so that you It's not there because it doesn't need to go across the pipes of the internet. That would be kind of useless information Maybe just leave it on though because Like it's something to do your like just get some optimization of SVG going here But it's like maybe not like there's probably a build step that will do most of the optimizations You might as well kind of leave this file as like nice as it can be with your guides and your precision and stuff And then do the optimization stuff later. Maybe that's up for debate. That's the only right answer to that one Let's cruise through this UTF-8 the whole web Responses a good Checkbox there you'll get a viewport if you leave that checked, which is good. That's a boring slide Let's move on there's tools in Photoshop for vector editing stuff, too That you may or may not be aware of One of them is like if you kind of if you like right click on on that's like a vector That's a shape layer in Photoshop, right? You can kind of go if that layer is like you can go file or you can go click right click on the thing and go Extract assets from the flyout menu now you get this weird export screen that has it cropped to that logo And you can be like I want a PNG version of it. I want an SVG version of it I want a 2x version of a 3x version of it just an export and I'll give you all those Pieces which is kind of nice for web design people.  Thanks. I'm sure my users will love that digging into that View source generated in point four two seconds Thanks Sketch is pretty good though Sketch is good any element you like click on and sketch whether it's a group or what I don't know how many people use sketch Sketch is great, but yes nice. I saw a tweet the other day that was pretty funny about sketch There's like a guy like fell down a well or something and he's like help and a designer walks by and he's like You haven't switched to sketch yet So you can click you can click on stuff and then you click make exportable And you get the same same kind of stuff where you could be like I want the SVG version of it I want a PNG version. I want a 2x version of it. I want a 4x version of it Whatever you just tell sketch what you want we'll zoom in on that like that's this is this is good for that responsive images Stuff if you're if you're if you like, okay, I get it source set 2x 3x like how do I generate those versions? Well, you just you put the high res one and sketch get it to the size that you want it say I want the 1x the 2x the 3x whatever just hit export and Throw them in and now now you have all those versions for source set to use This is part of that workflow kind of so that's pretty useful for the SVG portion of it You could you would use picture because picture has a way to do to do media type fallback stuff, which is pretty good So yeah, throw them back. Yeah, you like He loves that stuff Great, so that's what like the syntax would like for picture if you If you have a you'd have a source that points to the SVG file And if it fails then it then it will kind of fall back to the PNG stuff And that's how you would use that The problem with that kind of is that picture element any any browser that sports picture certainly sports SVG as well So it's not really that useful unless you use a polyfill for picture Which is great because there's a really good one called picture fill But in order for picture fill to really like do its thing and be efficient you can't have image source It will the browser will find that with the pre-fetchor thing we learned about and it will download it anyway So this isn't this isn't all that useful unless you use picture fill and kill the source part Kind of move that down into source set, which is fine It's just invalid and then locks you into using picture fill forever Which is maybe fine because picture fills cool But just know that like this isn't maybe the always the perfect way to kind of handle that We'll talk about more fallback techniques for SVG Later so now you have some SVG. We made it an illustrator. We found it on the web Whatever we have something dot SVG and we intend to use it. There's a whole bunch of ways to use it on the web I think there's pretty much only three that are are useful in any way One of them is just to put it as the source of an image tag. That's the kind of the easiest way One of them is the background image in CSS Which is cool and one of them is in line SVG the other ones being objects and embeds and iframes and stuff And of all the years I've worked with SVG I've never done that so whatever go away We're gonna have an image tag and we're gonna just point it to an SVG file You can do that if and anybody didn't know that now you do and that's a I think a kind of an excellent takeaway It works just great for the most part The con the the use case for that is images that belong in content They're part of a blog post or a page or they live in CMS or somewhere. They're not really part of the design of the page They're part of the content that goes there. It's part of the design of the page. It's kind of CSS territory. Anyway, so there's the There's a blog post. It's got a cheesy thing box border box is cool It lives there it lives in the RSS feed that I read for it It goes out to it this gets put into an email that goes out to people the image will show up fine in the email Images are perfect for that SVG is a great use case there If the image is vectory and small and fits into the definitely category and all that stuff Yes, it works in email for the most part If not use an alt tag good enough May the This is how you use it and it's just you just use it in the same way you'd use JPEG GIF ping whatever you just put it in the background with the URL thingy and there it is this would be like a use case for that It's an ad there's people in the background. That's totally vectory. That's gonna look great an SVG No matter how you do background size you could do for example background size Cover or whatever it is which just unabashedly resizes it It doesn't care to make sure that it fills whatever the element is that would be kind of dangerous Maybe in with when you're using raster cuz like what if it makes it bigger?  I need to not step on that It can just be an HTML document and it will draw the rectangle right in the document Which is pretty great now. I have drawing tools right in HTML What's kind of nice about that is those other two ways that we just looked at it's referencing a dot SVG file that it has to Traverse the internet to go get and then come back which is fine because that's how the internet works except for that when you're looking at Making web pages more performant the less times you have to do that faster your website Which is great, so this doesn't have to go anywhere all the instructions for drawing it are right in the document Which is good for speed and it's good because it's like in the DOM and you can control it with CSS and you can Attach event handlers to it. You can do anything that you would could do with a div. I think maybe even more. I don't know So let's think those those three ways that I think are important. Here's a fictional website about doughnuts to demonstrate such Cool, so it's not like they're all interchangeable ways. You'd probably reach for them in different circumstances I would say that the doughnuts themselves I could see being content that like goes out to an email or is generated by a CMS it's like these are like posts almost I could see that making sense to be like this is Content that's going on the page that is going to go elsewhere, too. That's a fine use case for SVG as image There's the little purple wavy things that are part of the design of the site that makes sense that it would be in CSS SVG views that way we could size it we could do stuff that way and then there's like the logo And then there's like the add to cart buttons have a little cart those are vector I would say the inline SVG makes sense for that because we can build a system to do that and we're going to do that Soon I think if not next I thought we'd just interject a little thing like can we talk about why SVG at all? The obvious one is resolution independence SVG will always look as good as they possibly can on any screen despite It's how you size it or what pixel density the screen is and stuff. It doesn't matter. They're made from math Little look fine.  You have a vector graphic It's just one less thing on the things to worry about list that we all have I Have one there's a you know another cool reason is that you can use SVG as a system We looked at the syntax and how it's declarative and programmatic and stuff That's like a pretty compelling reason to use SVG computers can do cool stuff with it So that's cool and all the design possibilities like animation and controlling it through CSS and that type of thing That's pretty I mean the list could go on farther, but those are some pretty compelling reasons to look for it This is the most like typical cliche conference graphic ever like there's different size screens these days Have you thought about that? That's a I have a phone right here in my pocket And then so anyway But you've but it's kind of true and SVG will eliminate some of that problem you can put SVG on it anywhere and It will look as good as it can look which is kind of great I think I have a sound for this one But this was like kind of the year that the smart people that decided SVG should be a thing do Rock the rock the modem sound a little slow cool. That's like the environment that the SVG was Was invented and it was a low bandwidth time and we knew it, you know everything sucked and kind of Not really the matrix was that year, but Amazing But it's we knew that it took a long time it was that was definitely even to this day Like the network is the bottleneck, but it was really the bottleneck then that sucked, you know so We did we the it was born in this fire of like let's send like Instructions on how to draw something instead of the thing that's already been drawn because we can either computers more powerful than it go I'm not saying anything else Cool. Yeah, this was like the graphic that supported what I just said, which is why send pixels when you can send math It was good. I thought I think those are good slides Nice so yeah, why send pixels when you can send geometry because math is more efficient let the let the let the computer Do the drawing which is interesting because I think we had we had mr. Tom Dale actually on a podcast We was talking about MVC frameworks and ember and how like it's a big payload, but once it comes down to your computer It's a lot more efficient what goes across the network wires in an MVC world is like less and it's like let the computer Do more and the network do less which is kind of thing Which is interesting parallel right? It's the same kind of Concept come on buddy. There you go There's a thing and he found cool. He would agree with me that svg similar different concepts There's like big thought stuff tweetable maybe Let's talk about svg efficiency a little bit svg's already very efficient because its instructions on how to draw something so like that by nature is a pretty efficient thing But because of the file format in the nature of it it can be like even more efficient, which is pretty great For example at g-zips super well g-zips is just something you like tell your server to do and it does it for you for the most part If you've configured it correctly There's a little bit of code to do that It's mod deflate and stuff not something to write down But this one is like make sure that you serve it in the right file format because occasionally Servers are weird about that and then while you're at it g-zip it on its way out You'd probably be g-zipping a lot of stuff, but see how it matches the file format there Yeah mod deflate. It's pretty good stuff This is a cool video like kind of to understand how g-zip works. This is how g-zip works on a poem Which is cool. So once upon a midnight dreary Yeah, and any in the wind and when it comes across some text that's already been printed that like kind of collapses into nothing It's just turns into a pointer of where that text has previously appeared kind of thing So anything that's read kind of like gets collapsed in the kind of final file So as the as the poem goes on more and more of it becomes Code that you know will kind of not be there in the final thing. It's just the black that's that you know I get I'm not very good at explaining it, but the yeah, look at that that appeared somewhere else. That's amazing Anyway, so g-zip is really efficient. Can you imagine how G how how how it is in an svg file It's done a friggin poem with fancy words in it It's like wrecked wrecked wrecked wreck x equals x equals x equals angle brackets all over the place It's super repetitive.  It's rid of g-zip's incredibly well So that's just g-zipping and then it can also be optimized like like the like imagine a polygon where it's at like 1.872 and 4.378 or whatever like does it need that much decimal precision? We could probably like chop off some decimal precision.  This is just the the graphical version of svgo There's a bunch of versions of it We drag grandma on there and we get 20 to 20 percent presumably without it looking any differently than it did before So it's very compressible just with that then with g-zip then the fact that it's efficient anyway It's like it's a super efficient format for the web kind of great Cool, let's talk about icon systems a bunch because I think that's like a hot cool thing Or I've decided it is a hot cool thing in svg land a lot of websites need icon systems I've got a ton of you work on sites that have one here's github.com They make there's like a few places on their site where they use icons I was able to identify a handful of them where they need it where they just they've decided to opt for an icon No judgment there the point is that like if each each one of these was like image source equals gear dot svg Or whatever that would be a whole heck of a lot of HTTP requests. We already covered that's kind of bad news for the web So we reduce the if we could smash all those into one request that would be kind of great for performance It would be a nice system. Let's build a system. We've been building systems like that for for kind of a long time Yeah, that's that's the deal. It's 20 requests very slow. So in our system We want all the way to smush all the icons into one request That would be nice for performance and then just make it easy on us Give us some tools to kind of make it not so hard as a front-end developer We solved this problem in the past with with with sprites and we had creative solutions for that you could hand code them You could use tools to build them. This is the same problem with the same solution smash all the things into one request Serve them somehow we solved the same thing with icon fonts was like that, you know, it's like that's a system It's somewhat easy to use and we've smashed all the icons into one file. We're solving the same problem here I'm gonna solve it again with svg and what I think is kind of the best way to do it probably for the future as a quick aside The things that we're gonna talk about are probably not gonna be super important in HTTP 2 I don't know what the timeline is. I'm sure there's smarter people in this room for that but I think the idea is that There's not as much penalty for requesting multiple files from the same host in the future and It might be better not to do this, but I wouldn't like wait for that necessarily I don't know what the timeline is but for now. Let's keep smashing stuff together. It's pretty good for performance So here's that we're gonna use inline svg to pull this off and this is gonna be our little odyssey here This is how svg works. There's an opening and closing tag, right? We're gonna put some drawing elements inside of it Let's say the top one draws the Twitter bird or something the bottom one draws the code pen logo Which is the thing and then the other element is the circle There's you can put whatever you want in here lots of shapes lots of stuff gradients whatever you want then around each each icon We're gonna put for now a g tag and a g tag doesn't mean anything in svg.  It's group and it's just convenient for like the cascade You know kind of referencing a group of things together for styling reasons or whatever We're gonna put that in a depth tag in svg. That means I'm just defining this stuff to use later I'm not gonna don't draw it right now For now, we're gonna drop it right in the document right and HTML document We're gonna make sure that svg doesn't render because the even though depths won't draw the stuff an svg element still takes up space So let's squish it to nothing. You might even want to kick it off the page something like that with css And then when we want to draw that shape we use the use tag It's a new one We're looking at in this funky looking attribute the x link href attribute and we're going to put with the value of it The identifier that points to one of those g tags with all the drawing shapes inside of it And that will work wherever this appears in our document. It will draw That icon which is useful. So it's like we've set up all the icons We want to draw and then we just sprinkle this in our document wherever we want to draw it So it's kind of the basis of an icon system, which is great in this case. We've put them in some anchor links We put it in some things Put some some words next to those next to those shapes That's the old school design of CSS tricks did that it was just drawn in svg and then use use use use Fill orange fill red fill blue whatever I just drew in a tab once and I used it over and over and over And I was able to draw that shape, which would be pretty hard to draw Exactly as is in CSS with the outro would be pretty difficult to pull off probably Cool. Yeah, so that's how those tabs work But certainly it could be just like a little cabin next to the word home or whatever and the more traditional use for For svg icons, but let's level up this a little bit Let's make it a little better if we can we're going to do some things to it We're going to use the symbol element instead of g symbol is perfect for it It's kind of that's the whole purpose that exists in svg is to you know Have a thing that you can reference and use later We're going to use a build tool make our computer do some work for us because that's what they're for and We're going to Ajax for that file, which we'll get to in a second. That's efficient because we can then cache it Instead of dropping it in the document and then we're going to deal with all the fallback stuff So this is going to be the final little journey we're going on first. We just looked at some code. So It's my chill out slide Cool, let's get into it though. This is what we used to do We have the g and then what later when we want to use it We have to actually do a little bit more work We have to bring a view box with us to set up the context that that drawing was in we have to put that's not even That's a bare minimum for accessibility You probably have to put some aria rolls on it and title tags and stuff and actually where you draw the icon Is a little bit more robust than what I just showed you have to kind of do all that stuff Well, let's let's replace it for with the symbol tag You don't really need deaf symbols don't draw automatically you could leave it in there That doesn't really matter the the symbol tag and this one We're going to put the view box Which is the the context in which the shapes are drawn is on there the our correct aria labels are on there the correct Title and description and stuff is right there now later when we go to use it and draw it in our document We don't have to have a view box all the aria stuff just comes along for the ride It just gets plucked up and put in here instead and it just becomes easier to use So like that's kind of the way to do it and if we could have a computer build that thing for us That would be great because the implementation that is super easy So this is kind of what we actually want This is the final output file that we want is just an SVG then symbol symbol symbol symbol symbol symbol Just the each one of these is a an icon that we intend to use our logo the Twitter bird whatever it ends up being That's what the kind of final Production output is going to look like although the white space and stuff would probably be removed We're going to make that to a devs file or call it whatever you want icon sprites, whatever we were one file is the output That's the one thing we're hoping to be our whole icon system And we'll make the computer do it a tool for that one of them is icomoon That's pretty cool one. It's like I want this one this one this one this one this one click click click They can be your own ones that you upload they can be from other sets or whatever you click download you get this little folder Stuff to check out we're going to open that folder probably And it gives you all of them individually, which is nice, but it also gives you This file what is it svg symbol symbol symbol symbol so it's a build tool It's a web-based one, but it gives you what we're talking about. That's the output that we're looking for That's like a production icon file ready to use and then whatever you want to use it You go svg use excellent href icon headphones and you can draw the icon right there. It's great There's grunt ones. There's gulp ones. Whatever here's here's a grunt one We'll look at a little workflow of a grunt setup with this thing going on So we have a folder full of svg files each one draws its own little unique icon in this case It's the cart we have grunt watch set up to watch the folder full of those svg files when one of them changes is Updated deleted removed added whatever Grunt will trigger some things it's going to trigger one that optimizes the svg files And then it's going to run one called svg store which is the one that smashes them all together in that file So here I'm I'm in illustrator. I'm changing the color of the card. I'm going to remove its wheels So I'm just making a change and I'm going to hit save and then when grunt watch runs It's going to run all its tasks and immediately refresh the browser and all of the icons have been changed So it's like once you have this workflow set up. It's pretty great I'm just working with the individual icons and as soon as I hit save they're optimized They're smashed into a new devs file the browser is refreshed. It's a pretty nice pretty nice workflow It's I think a lot easier than working with icon fonts and I got used to do this whole showdown with icon fonts I'm not even doing it anymore.  This is awesome end of story This is how you test for svg support inline svg support don't even worry about it But I like makes you know I'm sure people are like you do I get it but if you don't know it makes a div It injects some svg in there and checks of its namespace is correct That's a true false situation will turn either true or false true if the browser supports svg and false if it doesn't which allows us to write some logic like this if the browser supports svg cool Do stuff in this case. We're going to end up age xing for that file. We just made Otherwise we're going to need to do something else for fallbacks if you care if you're in a position where you need to care If you don't care forget it just just Age x for the file without this logic That's a modern Age x request if you don't need to care about older browsers and stuff which you do or you don't but it'll just grab that file And it just drops it in the document So you have this html document you want to use the icons all over it just trigger an age x request do it async do However, you want to do it you know for performance and for your sites loading capabilities age x for the file And then this just drops it in the document so it's ready to go So it's ready to reference the things the reason we have to do this is basically because ie Like you should be able to use a use element and then put the full file path to the SVG defs file right in there and it will just go grab the icon that it needs and put it there It doesn't work in edge. Nothing. It doesn't work in anywhere in ie land. So we do this instead It's not that big of a deal the browser would have to make the request for the file anyway So it's like well now do it with age x whatever, you know, it's it's kind of a horse at peace Cool so what for the fallback situation there is a thing called grunt to con it does a great job at SVG fallback kind of stuff so you can use it instead I'm gonna blast through it because it's like you know Just look at the grunt to con docs is the point really but it's like you put a class name on the svg And then in the false situation like it's not supported then call the grunt to con thing But grunt to con deals with the success situation too So just remove that and the grunt to con will do the fallbacks It ends up working in all the browsers you expected to and working in things where in Inline SVG doesn't work like old Android and old IE's and stuff These are PNGs that grunt to con has created for you. So it's a great fallback tool So yeah, and what's kind of cool about doing it this way is that one day when you stop caring about Fallbacks for all the browsers you just pull that out just pull grunt to con out and it's then you're You're kind of modernized. You're not reliant on a polyfill forever We heard the noun project. It's pretty sweet. There's just you just type anything and there's a great icon for it It works great for this icon flow kind of thing. They have a Mac app. That's fairly new. That's pretty nice It's just this tiny little thing you type stuff in it. I'm have illustrator I just dragged and dropped and boom. I have an eyeball, you know It's like you need you need icons and eat them quick or any kind of SVG vector version of things Just search you get them you drag and drop them. It's like the future Anyway, that's sketch works great with sketch. Anyway, noun project is sweet crop it save it out dot SVG It's part of your system. Love it. What if you do all this? What do you get out of that? How do you what is the what is what is in it for you? All your icons are vector. That's pretty great You don't have to worry about the you have the different screen sizes and all that stuff They're gonna look great forever And as opposed to some of the other systems there you can be multicolor It could be a cabin with green trim and white smoke or whatever. No problem You can draw anything you can draw an SVG can be used in this system You can make the smoke animator the door open or whatever just because it's in the DOM any CSS animation you apply you can just do whatever you want that way. It's great You can script stuff you can have I want to when I click on the smoke it gets smokier I don't know do whatever you can in JavaScript It's better accessibility because you know you tab to the icon and it announces what it is or it doesn't to do That or you kind of have controller with icon fonts You really have to jump through hoops to get that to work Semantically it makes more sense. You're using SVG which is semantically an image Which is what it is on the page You don't have to fake that garbage and there's so many build tools and cool processes for it You just get a whole lot. I feel like that adds up to one big fat rainbow of awesome these are some Once they're in the DOM let's say these were all our icons third They have some class names applied to them because why not now that they're in the DOM I can just be like I'm just going to change the fill color and they all kind of change You know I'm just using the web inspector to because I'm styling them through CSS I can change the fills and all that stuff Leah was doing with strokes and making that all happen through CSS that's in line SVG with CSS the same thing It's going on here SVG has some pretty cool animation tools We'll just kind of go through real quick except for smile because that's kind of gone So let's just stop talking about it. I guess rip RIP and Yeah, CSS is one of them that we already kind of covered. This is a little robot guy. He's floating around real cute I mess with them for a while in this video. I'm like your arm, buddy. Go on Don't have it These are the art design patterns page on code pen. These aren't animations But just transitions when your mouse goes over it There's a hover state that I just move things around with I just translate it up or change scale or change fill You know and apply transitions to them. That's all just inline SVG that draws that stuff really Simple things you can do JavaScript, of course can animate stuff I'm not going to dwell on this but it's like JavaScript can do anything, right? So here's just a really simple loop where we move the the position of a circle by by 10 every 20 milliseconds That's like not how you would do it these days There'd be like request animation frame and stuff but more likely you'd use a library like snap SVG is kind of like JQuery for SVG. It's really nice syntax green sock is really powerful for animating anything including SVG does a great job with I think we're gonna hear from Sarah a little later on that four o'clock. I think SVG DSD at D3 does a lot of data stuff. You've probably seen it Here's just some here's some syntax of how snap SVG looks and how kind of like it does the chaining and stuff That you may be familiar with from the jQuery days. I think we're calling them now back then Here's just the syntax of work I'm just moving the clouds across the screen. It's kind of perform it and nice MailChimp uses it to high five you and you send a Campaign, which is pretty fun Chris Ganon does a really great stuff on with green sock on code pen little fun animations like that that kind of draw Themselves and spin around here's a nice one from from him Yeah swinging stuff all kinds of stuff. It's all time lined out with green sock, which is pretty good They have a nice API for that. I'm not gonna take the stuff away But y'all should check out Sarah Drasner's portfolio on code pen or I don't know what we call them profiles I guess she has a zillion excellent SVG animations. We're gonna see some of these later I think this is a really particularly beautiful one. I think SVG has this concept of filters in it, which is pretty great Which we're not gonna I'm not I used to do this Visual explanation of it, but we're gonna we're gonna cruise cuz time is going look at the goo happening That's when blur and contrast fight each other So cool because and and blur is contrast only natural enemy You can draw stuff in SVG. Look at that. You just do that with where you just animate the like like the Dash offset or whatever. That's just that's the trick. That's one dash That's as long as the whole thing is so if you animate it the length of itself it draws itself pretty cool So charting is pretty good in SVG I just want to kind of get to the end because we got more stuff to learn It's good for maps. It's good. Look at look at clipping and masking. Yeah, nice It's just because that the bones is above it, but it's only showing this circle of it It's following the mouse, which is pretty great that works with the clip path element Which is it's which is different than masking clipping is vector masks are raster or at least they can be I want to get to this fun ending quote here Scott Gell said that you know there's database people and we kind of refer to them as architects JavaScript people are always engineers, of course, but SVG people are archaeologists because it's freaking old It's kind of like discover. We kind of discovered like cool one cackle. That's cool And then yeah, I have this list about every SVG thing that's kind of ever been done So anyway, I'll make the slides available. Thanks for listening very much to my talk


This is the Doctor, speaking. I'm recording this message for the cyber leader who's currently setting up their little factory on the planet Circulus. I'm giving you one chance.  Otherwise, some random soul in the universe is about to be scared of this thing about who doesn't satisfy me, but not stopping sooner.


We're making an ocean! Respirators, etc. It's a beautiful day in the neighborhood. It's a beautiful day in the neighborhood. Won't you be mine? Isn't that how it goes? I can't remember. Anyways We are getting artistic today. I had some leftover resin earlier and decided to make these a little bitty baby tiles and They were fun and We loved them. So he's gonna do a larger one And so far it looks like this these boards are just They're masonite, right? Yeah, they're just masonite panels.  I think some people use them as dry erase board I think I don't know That's where I'm at on that and that and that So if I can do this without dropping it on the artwork because that would be cool Whole disclosure. I'm not the best videographer in the world And I hit something And I didn't record part of this video on accident. So I have made you Dun dun dun a reenactment This is what it looked like Before I messed it up We did a line of blue a line of green and the line of silver I'm on a blue line of green and the line is over. I'm not kidding. That's what it looked like And then we tilted it forward And he did it backwards and he did it To the right and he did it and to the left and I realized that the camera was off. So Let's take it from here That's gonna do awesome things It's like it's not even sticking to to that I don't understand how it does that I'm just like blowing it to where The light blue shows through No, it's just doing it. It's because it's so thin Oh, you're looking like the cells are under it That's what I that's what I was I was picturing this the teals going over the silver.


welcome back everybody on this morning of Thursday at the cyber trade verse the morning cyber group has everybody doing music is still playing is it really let me stop playing up everyone has everything good to see you Lita good to see you Phil Michael everybody on YouTube Facebook live a couple of big things happening obviously you hear what's going on the news with Disney I'll talk a little about that that's taking a big hit couple of really nice stocks yesterday is there anything trading this morning we'll go out and but there are a few things that did move so we'll check them out in the meantime let's talk about the big news so anyway regarding about the Dow that happened yesterday you could see what happened you know we had the inflation numbers come out they were they were doing a little bit better had a little bit of a bounce but they dwindle down I mean the market literally dropped and came down a lot you can see we're from 33,700 we went to 33,200 think drop about 500 points and then we had a little bit of a kickback so yesterday was a little bit more of just trading brand name stocks we did have a couple of stocks that did move in the market a lot of them actually and we'll point them out to you but yesterday was more of like a market stock like listen I know a lot of you hear especially on social media you keep hearing keep playing Intel's the Microsoft's you know the Teslas the AMD's and all that but sometimes they don't always move but when you have the market very volatile the way it was yesterday it actually kind of worked out better so we had a nice little bounce or about 300 points go right into the you know right into the open going to the close after around 130 so it was pretty good pretty good movement but there were a couple of stocks let's talk about really quick some of the stocks that we found so anyway Corvano was actually he's been on a minute not only been a good day trade it's been a good swing trade it was kind of hard to trade yesterday but you could see here when we're looking at the bigger chart right here on the long-term stock was right around six dollars it's almost up about a hundred percent in the past week so it's been a really really good swing trade we've been trading that stock obviously earnings came out and we know that earnings make such a big deal on the stocks movement you know we hear pharmaceutical stocks we trade a lot of them we get these huge two 300 percent move sometimes a thousand we see if you've been here every morning regarding about the short squeezes but earnings are a different bowl game you know I mean like it's a when you have price per share you know and you start calculating the book value and I'm not here to teach you what I've learned in my series seven license but but when you when you look at the P.E. price per earning which basically the abbreviation of it really that's what that's what gauges the value what the stock was worth do what the company is in values worth so that's basically that comes out but that's been doing pretty well another couple of stocks and the S. move pretty decent the stock was a very inexpensive stock started right around ten o'clock at around a dollar fifty ran away to two thirty and you know we're usually done around the ten thirty when we do our broadcasting our audio broadcasting in the cyber group room which by the way if you're watching right now on any social media just take your phone and just make sure you scan that qr code and you could join us whenever you like to if you want to be in a trading room for a whole day here's your opportunity to do it but but that was that stock we did we we've done commentary right around and like I said ten thirty but I had a nice little move right around twelve o'clock and for some of us you know that we always talk about this you know you can't trade every day but there are people around the world is always a time to some way to trade you get programmed training kicks in at certain times couple of stock marriage did really well too also you could see the stock has been making higher highs on the long term chart Coinbase is doing pretty well rides doing pretty well marriage been kind of our favorite the stock's been at a six dollar price range almost a double since less than a year so that one's doing pretty well PLPR PLTR I don't know what's up with the stock but this is another earning stocks that we traded stock was seven dollars already at ten it had major major resistance what was nice about this stock is that I'm going to be on metastock today at four o'clock for any of you familiar with metastock one of the oldest most prestigious platforms one of the greatest platforms out there to trade on and I'll have a couple of examples on that regarding a PLTR but that thing just like another earnings announcement exactly like Carvana stock was moving now what did not work pretty well and I told you this before PayPal let me tell you I I buck the trend I really did buck the trend on the stock and I lost money on it and let me and let me tell you I tell you all the time traders losing money is a good thing if you know why you lost it so I had a stop order loss in that stock I thought I was going to I basically did a swing trade and it was it came right around this 69 and I thought that like you know what when I go back in history I saw that 69 even going back into July of 2022 and May big big support levels it was going to bounce well there were big block orders at that price I took a shot and sure enough stock went down and look it's down to 63 so how many times could you ever say like oh man thank God I got out of that position so and the reason why I don't want to sound like a broken record because I've been talking about for the last two three days due to earnings but look what happened yesterday that thing got demolished got crushed yesterday a couple of the stocks that did pretty well KKNO was a really nice and expensive stock big pop in the morning from $1 to $1.40 AMD obviously we talked about that in the video you know they got these listen stocks been doing phenomenal but it's had a major resistance levels right around a hundred but AMD once again we're all familiar with the AI stocks and you know what these are the chips that make them the super chips they run it run them and they're actually benefiting from it now the big news this morning is Disney okay let's try to learn our mistakes on Disney okay what happened with PayPal I'm actually quite shocked that the stock is down I was watching some of the financial stations and everyone's like don't don't don't don't bet against Disney you know especially I'm gonna go see one of my favorite movies you know today and people like you're gonna watch it now yeah I'm gonna go I'm taking my kids and my nephews and everyone we're gonna go see Garden of the Galaxy so big big fan I don't know if you guys I mean anyone cares about it but but but I would think that that stock would generate and do well but I guess when especially with the new when the old CEO came back and looking big fan too Cindy all right they'll make me feel bad all right but you learn something new about everyone you know and you know come in here in the room but anyway earnings are not that good you probably could see is probably a good short the stock is still trending down you could see have had a really good push you know right around this one or two kind of broke out but sure enough you got a lot of support levels try to be careful trying to find you know and catch a falling knife but Disney as of right now DIS looks pretty good and I and what's nice about this is that you will get good iceberg orders on it when I mean the stock traded over and you didn't trade a lot of shares I mean only trade about a million Michael said streaming problems with Disney well you know what the you can only watch the same shows over and over and over and over again right I mean how many times could you watch them so Paramount's obviously doing a pretty good but Disney I mean which really on Disney I mean how many times could you watch you know Garden of Galaxy reruns or even though they were the biggest the biggest revenue generated movies in the industry but I'm just a hop over here and see what's going with Disney anyway that's what we got going on here so you show you guys because usually you get good iceberg water the only bad thing about this stock right here is it didn't trade that much volume alright so it just hit a big iceberg water just now and you could see it right here you see that big volume bar right there look at that bull right there eighty eight thousand shares got traded that's about almost 10% what already traded this morning it was a big support level it held there at 840 it just broke it now it's going to this twenty thousand share and I don't see anyone out there look at it there's no one out there look I'm dropping down the ninety okay there's really no one out there those would two really major support levels and remember support levels get driven by buyers and sellers so if they're not out there better watch you back fellow traders anyway Disney let me move on now here's a stock that just came out of nowhere it just popped right now okay SBFM what's nice about this stock is it's cheaper it's got 2.5 billion shares traded obviously news just came out on it I don't know what it is because I'm talking to you but we will get inside the group room lot of orders just showed up and not the greatest but you can see it looks kind of messy looks like having a lot of algorithms going on right now so anyway that looks pretty cool that when I mean listen overall this morning was crappy I mean we found this stock the biggest percentage gained up 65% it's going nowhere almost looks like a buyout a BST this is a buyout because you could see the trend really hasn't gone anywhere garbage garbage great volume cheap stock of 24% but not going anywhere all these stocks APP on the other hand I don't know remember the biggest thing we teach you when you take our classes phase in in lesson one phase one 50% of the traders will fail because I trade a stock that's not tradable meaning big spreads you know all that too volatile small tier sizes all those things you got to look for because remember if you buy a stock you got to get out of it GT what's going on here looks like GT Tire I have to trade that stock a while ago GT is doing pretty well big big support levels right around 10 has been hovering here forever look at that it's finally all picking up some momentum it is testing some resistance levels remember you get a lot of program trading it kicks in around 9am so GT is going to go on there is this one hundred flowers not really going anywhere heard some news about them they're getting into the AI business Oh now I know why I know why when a flowers is moving it's Mother's Day by the way get everyone don't forget your mama all right so there's that PR PR that stock we traded USA PR PL looks like it's backing off not shocked all right losers what we got going on losers what happened this AI stock this one took a little bit of a beating and rushed this stock we traded this thing went from two dollars to seven look at that the snap of the finger I think it's going to go higher you blew up your whole account all right New York stock can change doesn't look like anything's pretty much moving there on the on the losers list on the NASDAQ New York on the other hand 9% second biggest percentage gainer fever these old garbage these things are not moving nothing going on there I like I'll say it once I'll say it twice I'll say a thousand times big fan of NASDAQ because you always find NASDAQ has the more volatility of stocks and without the volatility you got nothing all right the only thing that made that list was that Disney trade all right so anything I'm missing I did not pull out Peloton recalled 2.2 million bikes as hazard ooh is that what it was what's the was a symbol on that again was a symbol on a Peloton I didn't see the losers on it was a P we trade that stock so many times was a PL anybody know at the top there had a piton dead they P T O N yeah it was taking a really big hit P T O N you know what Peloton was awesome when we had you know COVID people want to get in shape the monitors everything the stock was in 90 $100 range and was even higher not yet 180 actually I didn't get a big big catastrophe first of all it that bike course like 4,000 6,000 dollars you know I mean like come on right I don't it's on a shortlist but definitely check all right cyber trades let's get ready for the market open up we got about 15 minutes once again on if you're watching on YouTube Facebook Live we watch a recording take your phone scan that little QR code if you want to join our trading room and do some workshops will teach you more how we find these iceberg orders could be a beautiful week and here in New York I know where you are so I'm probably not expecting to be a very volatile one going into tomorrow but Thursday is always our big day Tuesdays Wednesdays and Thursdays so let's try to make the best of it and if you see something say something for everybody else we'll see back here at 230 so trade safe


What's up, everyone? It's your girl, Kenzie here from Leighton Sports Cards, and I'm ripping a couple different orders here for Robert W. First order, we've got two 2020, 21 Panini Illusions basketball teamals. Second order, we've got the 2022 Zero Cool Jackass box and the 2022 Father's Day packs. And last order, we've got a select USCH2. Again, we're going to rip this all in one video here for you, Robert. I'm going to start with the Father's Day packs. Again, these come in lots of five. We've got one, two, three, four, and five. Good luck. We've got Riley Greenbase and a Chris Alave Rookie. Zion and Rookie of Cade cutting him. Now, is that, is that right, six? Christ Harper and Rookie of Jonathan Cumminga, pack four. Yannis Santicumbo and Tom Brady. Last Father's Day pack here for you. Max Crosby base and a Franz Wagner Rookie. I'm going to move on to the Illusions here next. You did pretty strike from Seattle. Yeah, empty. Base here. Killian Hayes Rookie, James Harden, LeBron on the scope. RJ Hampton, Luca. Got Jada McDaniels Rookie and a Devin Vassal Rookie Base. Well, is Riley, are you watching the game? Is that what you're talking about? Nice. Anthony Edwards on the scope, Rookie. Here you go, Roberts. Najee Marshall, RJ Barrett. We've got amazing acetate of Demi and Lillard, Butler, Borne and a Peyton Pritchard Rookie Base. I'm going to play. Got Xavier Tillman Rookie, Montrez-Herald, Red, Aaron Gordon, Krillinian Shack, Rookie Reflection, Malachi Plan, Wood, Rookies of Denia Diaz and a Kenyan Martin Jr. Last Pack, box one. Yeah, I love those jerseys, those Seahawk jerseys are cool. Rookie of Campazo, Jalen Smith, Dennis Cantor. We've got Mystique Acetate of Paul George, Kara Slovert, Kuzma and a Tyrese Maxi Rookie to end that box off. Illusions number two, Patrick Williams Rookie Scope, Luca Dodgecitch. Another LeBron, here you go, Roberts. Rookie Reflections called Anthony Jamal, Adam or Jamal Murray. Paul Reed Rookie and a Pokhasevsky Rookie. Rookie Scopes of RJ Hampton, Sabin Lee, RJ Barrett, Ant-Man on the Instant Impact Rookie, Shining Stars Acetate LeBron, nice one there. LeBron Magnets and Anthea Maldon Rookie. Rookies of Moses Brown, Shaw, we've got Red, Clint Capella on the color match there for the Hawks. Kawhi Leonard, Parker Maldon, Sexton, Zeke Najee and a Desmond Bain Rookie base. Last pack here for you, Roberts. Then we'll get into your select UFC and with the Jackass. Got Jay Sean Tate Rookie, Lamar Stevens, Dennis Cantor. We've got Amazing Acetate of Anthony Davis, Westbrook Fox and Isaiah Joey. Select each two, good luck. It can be base. A Silver of Usman, concourse level. Neil Strickland, we've got Disco Dan Hooker concourse. Red Premier level, Brandon Moreno, 62 out of 99 and Disco Rookie Premier level, Grant Dawson. Can't tell if they're booing or cheering on. Evans, we've got Disco Rookie Premier level, Thiago Moises and last pack of BH2. Oh, we've got Gold. We've got Gold here for you, Roberts. Good luck. Gold Rookie of Amir Al-Bazi on the Premier level. Heist Gold Rookie, that is eight out of 10. Grats on that. I love Gold. Another solid UFC.  All right. And now your jackass box. Good luck. We got red. Red box here. This is number 83. Who just caught that? Yeah, Riley, you're watching. 83 for Denver. Turn it off. It does. I still didn't see it. Um, no, I'm sorry. I'm thinking of bangles. All right, here we go. Again, we're not going to show the cards with any profanity on them or anything like that. We've got Pin the Tail on the donkey. Wee man. Eric Monaco Rookie and The Quiet Game of Rachel. Beauty and the Beast, picture. Hi, I'm Tony Hawk. Rich Kosick, legend and the master or marquee explosion. The Bed of Nails. Climb the Lens. Team card there. I wanted to nudity. So we've got a rookie chrome of Rachel Wolfson. And slimed by the Ponisaurus. Andrew Bow. Oh yeah. Now they show this card again. The Pooh behind the lens. Jackass number two. Zach Holmes rookie and Zachass. Field goal. That one was funny. The sweatsuit. That one was nasty. Tori Balessi. Steve Oh. And Scorpion lip injections. Ever seen any of these movies? I've seen like the first couple. I haven't seen this one. The Helicopter. I'm not going to show that one. Behind the Lens. Jackass 3D. We got chrome of the helicopter. The milkshake. The high five. One of my all time favorites. Behind the Lens. Tyler the creator. Spike Jones legends. And the mush. Not going to show that one. The Invisible Man. A Chrome. Hi, I'm Johnny Knoxville. Got a couple. Couple crumbs in here. Blue. The Tarantula helmets. That one is 20 out of 50. Red. The Field goal. That one is 18 out of 25. And the musical chair bags. Exploding Room. Behind the Lens. We got Chrome behind the lens. A Legend Refractor out of 100. Hi, I'm Lance Bangs. And the Pontosaurus. I'm not going to show that one on camera. All right. Last pack here for you, Robert. Jetski. Behind the Lens. Butterbean. Chris Pontus. And the Koi Game Poopies. Alrighty, Robert. That will do it for your boxes. Thanks again for your order. And we'll get these right out to you.


Ukraine stores electricity transmission supplies abroad in expectation of winter attacks. Preparing for a new attack on the energy system, Ukraine will manufacture or order 100 new high-voltage transformers to replace those destroyed by Russian attacks, most of them are stored abroad. The Economist media outlet reported this. 100 new high-voltage transformers have been ordered, half to be produced domestically and half procured abroad, but attacks on Ukrainian factories have meant that few domestic ones have actually been made. As they arrive, the foreign ones will be kept safe in Poland and Romania until they are needed. The article says, the Economist writes that Ukrainian engineers did a good job. They have developed unique schemes for distributing electricity and equipment throughout the country. Also, after the modernization, many old but only recently decommissioned transformers remained in Ukraine, which can be reconnected if necessary. Herman Halushenko, the Minister of Energy of Ukraine, says Ukraine now has much experience dealing with large-scale attacks. But he expects the Russians to also learn from their experience of failing to disrupt the system. The country needs more air defense systems, Halushenko says.


This study examined the effects of mesoscale eddies on air-sea heat and freshwater exchanges in the tropical Atlantic Ocean. The results showed that about 40% of cyclonic eddies contributed to warm SST anomalies, while 40% of anti-cyclonic eddies contributed to cold SST anomalies. These eddies also played a role in the variability of latent heat flux, sensible heat flux, and infrared fluxes as well as precipitation. Additionally, the study found that horizontal advection processes did not significantly affect the overall heat fluxes or precipitation over eddies, but vertical processes did. Finally, the study found that there was a strong correlation between heat fluxes and precipitation underneath the intertropical convergence zone, indicating that eddies may have an important influence on these processes in this area. This article was authored by Habib Michael Ayagweju, Alexis Shainio, Isabel Dodu, and others.


Hello and let's talk about the global COVID-19 situation. On Sunday, the World Health Organization reported the single largest increase in the number of cases worldwide for one day. This is even as the three top countries contributing to this increase, that's Brazil, the United States and India, are in deep confusion or even in denial regarding the spread of the disease. Meanwhile, other countries are dealing with new outbreaks, raising larger questions on what is a sustainable strategy to control and limit the spread of the disease. We'll talk about this more, but here are the details. According to a WHO update on Sunday, over 183,000 cases were reported in the previous 24 hours. Brazil reported nearly 55,000 cases. The US came second with over 36,000 cases and India reported close to 15,500 cases. In terms of the total number of cases, as of today afternoon, the worldwide number is close to 9 million with over 468,000 deaths. The US has over 2.2 million cases while Brazil is over 1 million. Russia, India and Peru are next on the list. In terms of deaths, the US has close to 120,000 deaths while as Brazil is reported over 50,000. The UK has reported 42,000 deaths and India has reported close to 13,700 as of today morning. 445 deaths were reported in India in the preceding 24 hours. China and South Korea among the countries reporting new rounds of infections. The Chinese capital city of Beijing saw a fresh wave in the second week of June, but authorities say they are expecting to see a sharp drop in the number in a day or two. According to Al Jazeera, 236 cases have been reported from the capital so far. South Korea too has been reporting cases in the dozens, mainly in and around the capital Seoul. Germany too reported over 500 cases yesterday. In order to discuss some of these issues, we talked in the newsflakes Prabir Pulkastar. Here is what he had to say. Thank you Prabir. China continues to be a spike in cases, although in many countries this may no longer be the main subject of discussion. We have seen that the United States, as Trump is doing in India, it has moved in some other direction. But nonetheless, the fact is that COVID-19 is very much in the centre of our day-to-day life and yesterday's case numbers prove that. So especially when you take the top three countries, that's Brazil, India and the United States, how do we see the way these countries are handling this crisis? Well, you know, of course the cases will shift from country to country, continent to continent as you go along. So I think the first was China, the second in that sense was the European Union, what I would call the core European Union countries, which are also very well connected amongst each other. If one goes up, so do the others and then of course the United Kingdom also being closely connected. So that set of countries and of course then you have the United States, very close again to European Union in terms of connections, people flying back and forth. And then now you have the Latin America, so what I would call the Americas. They have taken over and as is India. So you have shifting locations of the epidemic. And that's the nature of the pandemic because it's not the virus which is transmitted automatically. It's really people transmitting the virus. So it's a contact between people, the density of the population, how people were infected, are separated from others or not. All of that really determines the nature of the epidemic and it's very clear that countries like Brazil and countries like the United States really stumbled badly. The US because it failed in its initial phase, the CDC tests failed, so they're trying to blame China for not telling them one week before or something like that. The point remains that they had almost one and a half months in which to scale up at least the possibility of testing and WHO is applying test kits to all other countries. So it's very surprising that the US stumbled on that. But also the fact that Trump and Bolsonaro both had a common attitude to the virus. Then Trump got convinced that he needs to take more responsibility and started saying yes of course we are controlling it, we are the best, we have the best tests, we have the best systems and everything. And then when it finds that he's really not able to do it, now his position is it's a state's problem, it's not our problem. And now we should really reopen the economy. His skepticism regarding the pandemic, the COVID-19 epidemic seems to have come back in some form or the other and then saying the economy matters more than the pandemic and this is what we do and at the end of it it's really also about his elections. So what matters to him for the elections? The reality is that we have this two right wing, what shall I call them, chauvinist shall we say national chauvinists, national supremacists in some sense internally, also extremely right wing and in the case of Trump close to white supremacy and so is Bolsonaro. And then of course we have the case of India which had a very draconian lockdown. So not that the lockdown wasn't there, the lockdown was definitely there and it was a lockdown which was in terms of the scale of the lockdown was quite severe. So what is it that makes India come to the same scale as others? And we have discussed it in India, in fact the failure has been to treat it as a life normal problem and use sticks where you need public health measures. So looking at it is also the vision of the Modi government, another right wing government, another one who wanted to blame the minorities for even the COVID-19 initially tried to stigmatize a group of people on that count. And also the fact that it has sort of now decided having lost grip of the epidemic, having now shifted the blame entirely to the state only what Trump is doing. So you see a commonality of all of this but the underlying issue is that it is a public health disaster that is in the making, particularly in the countries which are unable to control it and I would now have to put India also in that camp because it appeared that India was cheatering on the brink for quite some time. We have discussed it a number of times, it's a touch and go, it's not very good situation. The numbers are going up, there's really no control over it as it is being claimed and now it's very clear that yesterday I think we have 15,000 numbers. We are going up very steadily and as you can see of course we are behind the United States, Brazil and Russia but in terms of new infections we are number three and the number of deaths also, deaths per day, the last 24 hours of deaths, again we are number three. Well Russia the absolute numbers are higher, total numbers are higher but the number of infections are slowly coming down. So I'm going to come down very quickly, that's very clear, unless you do something like the Chinese who are successful in doing, most countries have come down slowly and Russia is on that track, so is Iran on that track, the blips aside. So what you are likely to see is Brazil certainly not in any control, Latin America varying degrees of India shall we say, that means losing control of the epidemic and daily figures are continuing to rise. India we have seen daily figures started with 8,000, 7,000, 8,000, 10,000, 12,000, now we have reached 15,000 per day and what happens is two weeks later then you see the death count goes high because these are the people then who becomes very sick, some of them and then of course some of them will die. So it's a cascading effect that we have seen and the fact that we are not in control of it is very worrying for all the three reasons I talked about the United States, America's and now South Asia. Pakistan is not too far behind in terms of per capita number of cases, it's very closely following on India's heels, so I think this is the South Asian problem that we are also going to get, but these numbers are also rising and I think one thing is now very clear that this is not related to the climate, that means hot season is not going to make a significant difference because India, it is summer at the moment, we are seeing temperatures above 40 degrees in North India consistently, so it's very clear that the climate may reduce or increase transmission by some amount, the primary transmission vectors are human beings and it is that contact that really decides the nature of the epidemic and unless we have a vaccine I don't think we are going to be at the moment going to be able to control it, not with the policies we have and not the way a lot of the countries are going. The fact that we have learned from Chinese experience, we have learned from the European Union, particularly Germany did, which managed to keep its death count very low, similarly Russia, high infections but death count low because they really had good hospital facilities for taking care of those who really become sick. So all of those lessons if we don't take and it doesn't look like we are taking those lessons either in Brazil, India, rest of the Americas and of course the United States of America itself where the death count is high. So we are seeing all of this shows that what WHO is saying, what everybody is saying, that we are going to see this continuing of the pandemic at least for the next six months if we don't you know drastically alter the way we look at the pandemic itself, look at it as a public health issue and control it as any public health response should be. And another key issue which of course has a lot of experts also worried is the fact that both China and South Korea reported, I don't know if it's right to call it a fresh wave of cases but at least China had a lot of cases in Beijing, South Korea reporting quite a few in Seoul. Both countries are good examples of how to tackle the disease and they seem to have managed to handle it quite well but it does show that even if the curve is flattened for a while there's always the possibility that again cases might emerge again. Yeah you know it's very simple that spikes will take place because you're not stopping all global movement so people will come from outside and the genomic analysis of the virus that's infected the people in Beijing seems to show it came from Europe that means somebody coming back from Europe somebody or a foreigner whatever it is did bring the virus in he may have been completely asymptomatic infected one or two people from which it spread and South Korea is similarly connected to various places and that's the most likely source of the of new infections but once it comes in and assuming that it continuously will unless you decide to cut yourself off completely from the work then it will come in the question is do you have the trip wires and do you have the quick mechanisms to control it and both China and South Korea have it they're not the only ones it's also true that Cuba has controlled it Vietnam has controlled it and looking in Southeast Asia both Thailand and Malaysia have controlled it and they're not countries which can be accused of being either highly developed and you know part of the elite countries of the world they are countries like India and Pakistan for instance and Iran though went through a rather difficult phase has also seemed to have controlled it better than they round the case curve is quite flat and they seem to have done it better than for instance for the European Union country state if you look into figures so behind all of this is an attitude to the epidemic itself that the epidemic is not a public health issue is a law and order issue and the other part of it that if we fail if we control we get the credit if we fail and this is true in Modi's case in Trump's case as well then let's distract the people distract the people with various things India at the moment we have a I'm not going to say this is because of the crisis of the pandemic but we have a issue with China on the border which has since old the skin let's focus on that okay so that this issue then goes to the background and both Trump and both you have the common idea that let's blame the state governments and say it's not our headache because the states are supposed to do everything so the credit is to be if we fail that the discredit is to them it's a kind of head I didn't tell you lose approach that Modi and Trump seem to be taking but the essential part of it the pandemic is not going to go away and irrespective of what the government do the governments do or don't do the point is you can see the fear in the people and the fact that the hospitals are getting overcrowded facilities are not available you can slowly see how irrespective of the lockdown being lifted or not you already see that the effect of the people is on there so it's not a question of just a policing lockdown a lockdown one two as Modi government is saying or whatever Trump is saying it's also the social discourse already has factored in there is an epidemic and there is an impact and it's going to affect the economies as well so if you don't address the pandemic I do not think ideas that you will open the economy by itself in world you need to really do both and the fact that the governments seem to be doing an either or approach and of course sacrificing the poor helping the rich that's the other part of all of these three governments we are talking about which today head the covid list in terms of new infections and death I think this is the key issue that we need to address thank you so much for being in our next segment we look at the sporting world in the context of ongoing tensions with China over the past few weeks there have been all sorts of calls for a so-called commercial retaliation against China and the sporting world has not been immune but does this really make sense we talked in news clicks Leslie Xavier to find out thank you Leslie for speaking to us so we have seen over the past couple of weeks there's been a lot of jingoism there's been a lot of talk especially the TV channels about boycotting in China and you know taking a step against China and the commercial sector now many experts have pointed out that this is in fact not really feasible the economic relations between India and China are very very strong and actually are in some sense in China's favour so if something like that were to happen India would suffer but in the field of sports how do we how is this whole issue playing out especially because sports is a lot of talk about and then there's a lot of there's a narrative about what do you call solidarity there's a narrative about internationalism here also it's a space for a lot of jingoism so how is it playing out speed response it's like those like that common relationship status that people put up on social media it's complicated so let's start with cricket so suddenly out of the blue last friday it was DCC I tweeted out saying that they will have a ICC governing council meeting this coming week this week on the trying to decide on the fate of IPL's main sponsor the title sponsor which is Vivo the mobile manufacturer of chinese brand and the the BCCI in itself is sponsored the biggest sponsor one of the biggest sponsors is PATM which as a Alibaba group has a majority stake in that around 30 33 percent or something so they are trying to focus on the IPL bit because that's the that's the that's the question because on social media and it all stems from not by policy decisions and all that but or economic thought put into it but from from the clamoring that happens on social media and generally the jingoism that's doing the round with the incident happening in the border so they will I mean I don't know the because the contract runs till 2022 and if they if they want to get rid of Vivo then they have to break contract that means a financial loss and also the basic understanding of our sponsorship deal works seems to be lacking especially in the higher among the higher officials of DCC because the BCCI treasurer himself no less was was quoted by media as saying that we are doing the economy a favor by letting Vivo sponsor us because they are paying money it's not like we are paying the money but they don't understand the idea of business that it's it's it's a deal where both parties are involved to gain something out of it otherwise why would why would a brand put in money to sponsor sponsor again so that's that's cricket's part so it's it's a meaningless meeting I would say because the intricacies of sponsorship in sport and especially when economy is going on a slide and to sustain such sponsorship in the in the near future would be very difficult for these brands and so and and for the sporting entities to get more sponsors out there would be very difficult at this point if you buy by women and fancies and by jingoistic emotions if you go about cutting and severing ties that's that's not going to help Indian sport at all and so that is cricket's part and Indian Olympic Association's main sponsor is leaning which is Chinese sports goods manufacturer so specifically the the company's focus area has been badminton but but they also make jerseys and all that which has been used by the national teams of various court so again ios come on record saying that they will look at the sponsorship deal after they get a directive from the government of course the government won't take any directive they are playing behind the scenes as usual because they can't possibly take a give a direction that we should cut all these sponsorship ties because that doesn't make any economic sense at all but then again we're talking about a bunch of people who have made decisions which sometimes make no sense at all but yeah uh so if you cut it it's it's not just about the national teams that suffer because leaning's equipment is being used by a lot of academies say for instance the gopijand academy which which nurtures a lot of younger younger players so so so how do you how do you go about it their equipment supply their uh uh i mean playing surface suppliers everything goes out of the window and then where would they turn to obviously there's no system in place domestically to manufacture these equipments at the level that that is required for them to play and bring up bring up their game you are not talking about recreational players here right you are talking about players who are developing and going up there to fight the world so so these two cases i will clearly point at the futility of of of such a move if at all such a move has been adopted by two of the biggest sporting bodies in the country right and simultaneously the question would be that does this even make sense from uh from the angle of sport from which we've been talking about for the past couple of weeks of seeing sport as something that is not constrained by narrow ideas of patriotism and also something that can actually help help build bridges promote better relations so should sport in the first place even be brought into this kind of a narrative so to speak the idea of organized sport uh and any any any sporting endeavor for that matter it it revolves around sport being not constrained by boundaries by borders so the olympic ideal it's it's all about you universality of sports and so and over the course of years and be uh be it because of the sporting action and the kind of competitions that have been i mean set up over the years or be it the business model of sport everything is intricately connected so uh to cut off one country and and this is no ordinary country that you're talking about a major player in in sport not just in the industry but also in performance sport because uh china comes right up there as far as the olympic medal style you're concerned and they are the biggest sporting nation in in in asia and in the world one of the biggest in the world so on that regard itself it's it's so uh you're talking about banning chinese equipment right let's talk about that so then you need our players need replacement so one couple of uh specific instances i can i can narrate here just to prove that point one is table tennis so i mean you know table tennis is a sport that is uh i mean dominated by southeast i mean east very east countries china korea and all these nations coming from southeast asia so uh beyond that dominance the equipment equipment that is used for table tennis the biggest manufacturers are from china and if you look at the world tour and the world championship the balls that are provided for these players to play is made by a chinese manufacturer and there are only three players uh three big brands which which manufacturer balls for for table tennis and all three i mean one is a swedish brand uh one is a indian brand and the other one is uh you must have come across that name that is the indian brand we are talking about which also makes table tennis tables and the uh the point is all the other brands are also manufactured in china the manufacturing happens in china so for our players the elite players or the youngsters to play and get used to the bounds and the specific characteristics of this particular brand of ball that is used for all the competitions across the world they need to train with it so if you completely cut off and take away that facility from our players then how will our players develop so that is that is just one aspect of one small specific game let's talk about cricket and the manufacturing that happens so india has a slight monopoly as far as manufacturing cricket bats i mean we have a couple of brands which which which are extensively used by cricketers worldwide sg being the prominent of it sg balls are being used when india plays at home and the bats the test bat that sg manufactures and that's mirrored base the company's mirrored base but uh beyond that when you look at equipment manufacturing there was a point when india was big in manufacturing uh footballs but then we have lost out to even our neighboring country pakistan initially and then to china and vietnam and taiwan because the cost of production they have they have made it and it's it's they have made it in such a efficient setup that they have these countries have been able to bring down the cost of production and also maintain that quality that is required for for for these these manufacturers so uh nike for instance they make their football exclusively in china and vietnam and uh we have our indigenous manufacturers like nivea or wax uh but uh these manufacturers also and it has been reported reported in the media the uh raw materials that is used for manufacturing the molded ball which is the most modern iteration of the football right it it is important from china because because it's readily available there and it also makes business sense for them to import it from china rather than trying to set up a manufacturing system in this country so system is the key word here so when you talk about a jingoistic jingoistic narrative where we'll shut out uh a a country completely a country which has been providing us a lot of things not just a not just finished products but uh raw materials with which our manufacturing systems work make in india works with with raw materials that is that has been important imported from china and from other countries as well but predominantly from china so there is no system in place to ensure that these companies companies can effectively make quality products in india and also uh there is a system in place for to help these industries to come up come up in a uh indian sport manufacturing india industry has been in a long decay and and no measures have been taken by the government to to to show up their their systems and their uh effectiveness so that so that they are strong enough to pose a challenge to imports it's not happened and now with lockdown things have gotten much more bleak so sporting action is not happening and i mentioned sg earlier which manufactures cricket manufacturers cricket bats with cricket not happening cricket ball is not in demand so these companies are shut so so then even even in areas even in sporting manufacturing where we add some semblance of monopoly that is those industries are also struggling and now we are talking about setting things up from scratch in in areas where we have no standing at all at present and it's it's it's it's pointless pointless is the blunt and the right uh way to put it thank you so much let's do the talking to us that's all we have in this episode let's talk we'll be back tomorrow with the latest news developments the day until then keep watching news click