Tag: Linux

#CAT5TV – Web Development Part 2 – Slicing up the Images

Post author By Jimmy Dagger
Post date September 14, 2020
No Comments on #CAT5TV – Web Development Part 2 – Slicing up the Images

Hello, I’m Robbie, Ferguson, nice to have you here so last week. We well you I was Hannah here but secretly you created the yep. The design you’ve got there yeah. My great things happen. Look at that very cool. So that’s you over on on your Mac. It is this is me over on Linux. So, let’s see what we can do here, Krista sent me the PSD file, so here’s comp dot PSD.

This is the same file that you’re working with right, exact, same father: let’s bring it up in gimp, okay, there we go. There’s me and again: there’s you in Photoshop now, just just for the viewers sake. How much does Photoshop cost you roughly a thousand dollars, ask right it’s somewhere in that range, you can get a student discount if you’re going to school yeah that helps you took advantage of that.

Ok. So what with the student discount? How much did it cost uh? Well, the for the sweet, the cs4 or cs5, is about 510 bucks. I gets you image ready, photoshop illustrator dreamweaver, flash bridge. I said image ready my illustrator Emiratis going in design yeah. We don’t use that ok, so that’s so it can. You buy just photoshop. You can yeah, but a lot of times, it’s worth it just to get the package yeah Cesar.

It is especially if you ate, on the deck driver yeah with the proper programs. Ok, I’m going to bring up the web browser here, we’re just going to go somewhere where we can buy photoshop. I don’t know why i’m curious! I just I just want to know Photoshop. Oh here we go Photoshop. I know what cs5, but let’s buy it. Ok, select country, I’m in Canada, select which store should we go with the educational pricing? Let’s do that might as well, just because that’s going to be the best deal going right, so this is for students or faculty save up to eighty percent.

Well, that sounds great. Eighty percent of what shop the student store – okay, let’s see so we’re looking at a adobe photoshop cs5 superfast webcam there by the way – and of course, they’ve got it’s largely because they’re using flash. Why would adobe use flash all right? Okay, crib, sweet, creative, suite, creative suite they’ll, be photoshop, extended student and teacher edition, ok, so the cheapest version I can find here is this cs5 extended student and teacher edition.

Just photoshop says from 199: ok, so us one hundred and ninety nine dollars. So that’s the cheapest. I can possibly get right. Oh well! That’s nice! Yeah! That’s what it is so you’re just going to show off now. No i’m not showing! No! That’s not what this is. No, oh, that website loaded so fast. You invited me just to make fun of krista make for a crustacean. No, it’s not i’m not. When did I say: oh look, it didn’t look at krista she’s, slow input.

I said their website. Okay. Here, look, let’s just say we’re on windows: okay, okay, i’m in English, wait a minute but wait. I didn’t even have to pay and it wants to give me the full version of the software. Let’s go back and see what we have here: okay, go back to GIMP, o RG and let’s say we want to get it for mac OS. Oh and look. It’s also available for unix photoshop doesn’t work on the units how convenient Mac OS 10? Okay! Here we go the GIMP on Mac OS 10.

Let’s see how much this one costs. Oh, I bet it’s free you’re catching. I jumped the gun with that captain on. What’s that yeah, I got it again, but machine o stands for a GNU image. Manipulation program compatible with snow leopard leopard tiger going way back. Let’s say we got snow leopard. Well that looks strikingly similar a dmg file. Okay, you kind of know what I’m saying right. Okay, think I caught on.

Unless you want to draw out a picture for me that much I don’t want to say that Photoshop our drama fix it might help the fan, putting his skills to use here there there’s a picture for Krista. She asked for it. Okay, I don’t want to say the photoshop and gamers are identical: they’re, not the same product at all, they’re, not there they’re similar in their design, they’re similar and what they can do.

There’s a program called gimp shop, which is another version of the gimp. That looks a lot like photoshop and uses a lot of the same hotkeys. So it’s easier for someone such as krista to migrate over to the free product, not that I would but the GIMP is absolutely free. So if you want to get into photo manipulation, if you want to be doing things like we’re doing tonight, when we do graphic manipulation on the show, why not use a free piece of software that’s available for download at gimp.

Org? And this is going to allow me Here: I am on linux. Okay looks kind of like mac OS. This is linux. It’s also free gluten com. Ubuntu linux is a free distribution or a free operating system for your computer that works on pc. So it’s cheaper hardware. Free operating system versus the mac, here’s photoshop fair enough, all right so not the same product, but we want to just kind of emphasize that there’s a big difference because we’re saving two hundred bucks bare minimum.

If we were a student okay, I so get ya. That’s really great deal, but as a professional, I really like the you know the photoshop programming in it sure yeah absolutely and it does have its advantages, and I I do tend to use both professionally, because there are times when I absolutely need Photoshop. I totally can admit that she’s trying to make me feel better now that song – I am, I don’t ever use Photoshop only time I use photoshop is when you send over here, yeah cuz, all your crazy Photoshop layer mask and sweetie.

No, I’m just kidding going to add more next time. Okay, so here we are in the GIMP and what we’re going to do is kind of assess how we want to work with this file. Basically, as last week, Christa went through and and creatively came up with the design and decided for me and explained how she decides how to build the website as the person who’s going to be slicing it, which may be the same person if you ever do the Slicing yourself, the person who’s slicing needs to have a bit of an idea as to how they want to to do this.

Oh look at that. That’s the mac! That’s my next! Okay! So what I mean by that is, we’ve got this gradient background, so this is a red that changes shades of red. If you’re, not too sure what you can do is you can grab your and you can follow along with this krista. If you like, okay, photoshop, just following yeah, absolutely, we should do a split screen. It’s embarrassed you may be so what I’ve done is I’ve grabbed the little Doppler here, its color picker tool in GIMP, and if I click on my foreground, color – actually click on the doppler there and read this HTML notation there.

As I click on this red is b4c be5. What I want to do here, I’m going to change layers to be background there and now do that again. There we go so a 9000 okay. If I click somewhere else see the numbers, that’s eight nine thousand Wow. What’s so funny, let them laughing just thought of a funny joke from earlier. Ok, so now click down here it changes to 81 810,000. That’s an HTML reference for the color, so you see that it’s actually a gradient, there’s different colors here, a 0000 down here is eight thousand eight hundred thousand.

So what that tells us is that the gradient is not all one color of red. So what we need to first decide is how we’re going to work with our background when we’re doing this. So what we want to do in Photoshop is maybe zoom in to about 2,000 percent yeah so and then go down to the very very bottom. One of the things that we need to do when we’re slicing a website is: we need to make sure that things are fluid.

If the site becomes taller, we need the gradient not to have a cut-off point at the bottom of the gradient. You don’t want this thing to look like a square on a white page. You want that gradient to seem to flow. So what you’ll do with that? Zoom level is use your Doppler and get that HTML character code, the color code of the very very bottom. So as close to the lower edge as you can possibly get because that’s going to map this zoom level, it’s going to be like a very, very big pixel, so that I ready 840,000 right yep.

So if I bring it up in the GIMP, let’s see if I get the same thing so I’ve got my Doppler tool. Color picker need to zoom in go down to the very bottom and grab that bottom color, because that’s where our gradient basically ends. I think I actually got a little closer to the edge because i’m getting 82,000, if you might have been up just a little bit but regardless that’s that’s, going to be pretty close, so write down of the very very bottom here.

I’ve selected the color and it’s 8000: that’s this really deep red! So the reason we want to do that is now: we’ve got that color in our clipboard. And now, if you read, if I were to zoom out of this now, okay and if I were to resize this image, the canvas size which is exactly what’s going to happen on the web, if you get a page, that’s super long. Okay! Now, what’s going to happen in the background there once I fill that with this particular color, just to kind of give you an idea is that the gradient is not going to look like it breaks off.

You can’t see a line there where the gradient stopped. If I didn’t do it that way, if I didn’t pick that proper color and there was white behind it, you’d have the bottom of the website would basically look like that. So I’ve got my color, it’s eight thousand or eight hundred thousand and that’s what we’re going to use as our background color when we get into CSS so the actual coding of the site. But we need to know that off the get-go, because we need to actually create the background gradient file.

Okay, so we are looking at part two of developing a website and Krista, and I are actually slicing up the design she did last week and basically getting it set up so that we can turn that into an actual functional real website. At this point, it’s really just a mock, it’s just a pretty picture. Yet it’s something that we would send to a customer and say here’s the look of the website. What do you think that gives us a chance with in Photoshop or the GIMP to make changes to the design change the where the items are positioned or what menu items? There are it’s: it’s really, it’s just a graphic representation of what the websites going to look like at this point, we’re assuming that the client or asif it’s our own website.

We’ve said yeah. This looks great. This is exactly what we want, so we’re going to actually work with that. So looking at my computer here and Krista’s got this up in Photoshop as well, so I’m working in the GIMP Krista’s working in photoshop, I’m working for free she’s working for thousands! Okay, so that in just throw that in there yeah I’ll be seen patrick’s day by the way, two days off, I’m Robbie Ferguson, okay, so with this, we’ve got the background color i’m going to i’m just going to jot this down because we are going to need This next week, when we get into actually coding this website, my color is 88 hundred thousand.

That’s a hexadecimal number that corresponds with the RGB or red green blue color that we’ve chosen there. That’s the red and hexadecimal means it’s ready for HTML for coding for the web for CSS, so we can set that as our background color and it’s going to match exactly to that, photoshop tells you if it’s a web, safe color, which is kind of a cool Feature of photoshop, you want to bring up the color doppler there and just tell me if that, if it shows a thousand and i’ll show you what what it does there so 800,000.

If you look right here at the top there’s a little explanation point, and it shows us that that is not actually a web safe color. If you click on, it is going to change to a similar color which is web safe, and that is what seven an f-14 18 okay. So, let’s see in the gimp how different that is web safe colors are not as big of a problem as it used to be see. That’s not that’s. Nowhere close, I guess, on the stream.

You can’t really tell that I can tell that visually yeah. More of a pink than I read, it really is so I’m going to stick with a thousand. Typically, when we’re creating the mock-up, we might try sticking with ending the gradient on a web, safe color. So when we’re selecting the colors, we could, if we want to make it easier for the guy who’s slicing, that why you might do that in a case like this, where it’s not web safe.

What I might do is, I might actually choose a color that is web, safe, okay and colorize – that that’s my background. Color now use a square marquee / me and feather that, let’s start with 10 pixels go like that, create a new layer, transparent, remember! This is a feathered marquee right so now, if I fill that, what a feather means is that the was my background color the edge of that marquee is not a perfect square.

It’s actually got a little bit of a feathering to it kind of like a blur on the edges without without actually having to blur it. Sorry, I’m talking and trying to find Phil there we go so now. If I put that above and I can, I can set that up in such a way that the I might want more than a 10 feather, I want, let’s say 35. This is just one option: I’m not going to do this in this case, because it’s such a the color is is so far off that we’re just going to stick with it, but I want to show you what you can do to fix that edge.

Oh zoom sometimes does that to me, so I can move that see what I’ve done is I’ve created another gradient at the bottom, which merges the non web-safe color into a web, safe, color, nice and clean. So that’s a possibility in this case we’re not actually going to do that, we’ll pretend that we’ve got a web safe color and that we or that we don’t care or something that it’s all good. The other option.

In a case like this, we’ve got a non web-safe color at the base. Here’s a really quick option and this one’s going to surprise you eight hundred thousand, there’s no right or wrong way to to do this. It’s really your going to choose every time you do it, but what we need to do is we need to have this clean. We need to have a web safe easiest way to do that, create a new layer. First of all, let’s, let’s canvas size, this we’re going to go canvas size, we’re going to set it to something absurd that nobody’s going to ever have we’re going to set at the fifteen thousand pixels high.

So now our image actually looks like that with the website way at the top. If I create a new layer – and I fill that layer with my background color – which is the non web-safe color okay, now what happens is we’ve got something where it’s going to be? The perfect color, it’s not web safe, but it’s okay, because it’s going to be an image on the background. So now you say: okay! Well, that’s 50! What did I say? Fifteen thousand pixels high it’s going to be huge, but what we do now as part of our slicing and always keep your PDF file, don’t overwrite.

It is take that we’re going to go image canvas size, because this is a vertical only gradient. There’s nothing horizontal! That changes, so I’m going to set this to a pixel width of five pixels, which is going to actually crop that and it looks like it disappeared. If I zoom way in or push one to see it there’s my actual gradient. Okay. So it’s like that starts up. There goes all the way down for fifteen thousand pixels.

It’s never going to actually run into anything. So, let’s save that, let’s throw it on my desktop. I’r going to call this a jpeg reason, for it is because it doesn’t need a transparency. It’s just a flat flat file. We want it to be as small as possible, so we’re going to go with a jpeg. So, let’s go going to give it a logical name: i’ve called it body underscore BG jpg, save that in the gimp choose your quality 85 is the default.

It’s fine, and now we’ve got this file, which is that background color that background gradient? Ok, it’s huge, but if we look at the file size because it’s only 5 pixels wide you’ll notice, it’s 7.3 k, it’s actually very, very sit down, yeah anything, basically, images for web. You want them to be in the sub. You know if it’s a big image, you want to try to keep it down around 50 to 80 k a very, very high end depending on, but we have you basically use common sense and realize that the bigger the site is the longer it’s going to take.

The load – and so you don’t want it to be over the top huge, so, okay, so you you can easily do that on the neck. I could hear you could and, and that – and that makes sense is now when our website is there – it’s not going to it’s not going to over, like it’s not going to be a cut off on that gradient. Okay, so that’s our first slice, I’m going to reopen that PSD, because remember we never overwrite that file.

So I’ve got my first slice, I’m going to create a folder on my desktop here, where I’m going. To put it, it’s going to be my website, I’m going to cut that the image the first slice that we made and create a folder all lower case called images. So on my desktop, I’ve created this folder called website and if it a folder in that called images and I’ve cut that to my clipboard that image there’s my first image.

Ok, so now, looking at the rest of the site, Krista we’ve got the logo, ok, which what we’ll want to do is we want to actually have that as a transparent item, because we don’t want to have to worry about aligning it perfectly with the gradient. We don’t want to have a JPEG, because then we’ve got a flat image with the background. Color like we wouldn’t want that right. So what I’m going to do is I’m going to select the layer that has my logo just right there? If I turn it off and on, I can see that the logo disappears hit ctrl a i’m, not sure what your select all is on the neck.

Oh, it’s just a command a command, a yeah. So if you have a neck, so if you select your logo layer and obviously you have the master files for the logo and that’s fine too, but from this we’re working in high enough resolution. This is why we want to build our mock-ups in high res. So we don’t have to go back and redo the entire mock up again with high-res images, always do it in high res. So with a control, a it’s selected that logo and I can go control C or command C – probably to copy it to my clipboard and in the GIMP I going to go edit paste as new image and I’ve got a perfect, transparent version of the logo.

Ok, so because it’s transparent, I want to save that as a paint which is going to maintain that transparency, I’m going to again put that in web site images may going to call this. We want to be search engine friendly, so was it aspire logo? It was a spire place. Wasn’t. Ah, yes, it’s quiet place, ok, logo, dot, ping, we’re giving it a logical name because one it’s easier for us to find when we need to actually add it to our site, but also it allows the search engines to index that as the Aspire place logo.

So once we get submitted the search engines which is going to happen further on in the series, but we need to plan for that – we need to make sure that our site is search engine optimized and ready to be indexed by this by the search engines. Ok, so you’ve got have you got that file i’ll set up as well on your Mac? You’ve got a logo. I have a logo. Ok, so you follow along and I would try it. Oh is good wit winner, I’m you have the logo saved and I had the logo.

Savers, ok, perfect and remember that, because it’s copied from our mock-up, the dimensions of this logo are exactly as they would be on our mock-up 162 by 58. Perfect. So now you see these menu items. These are all fake, don’t get deceived by these. These are not the set menu items. I get this all the time. Do you get this or clients as well? I think we need to change about us to about. Oh all, the time and you’re saying no, this is just the mock-up, that’s not a real menu.

That’s just we put that there so that you can see what it’s going to look like when we put a real menu that we put this lorem ipsum text on the page, so that you can see what the text is going to look like. But it’s not the real text. You don’t need to tell us, you know, I’m going to said it best business. Now we can read that that’s all part of the mock-up, so one of the things we need to do is just get rid of it all.

So that’s text that we’re going to get rid of that’s text we’re going to get rid of ok, so we can get rid of all the mock-up stuff that we simply don’t need by turning off the layers. Ok, so now – and I’ve already got my logo so now I end up with something like that got my background, so I’m done with that. Ok, so really the only elements that we still have left here. I am on the gimp and kristas following along in Photoshop.

Doing the exact same thing so now we need to have our different layers here, so this here is predominantly a color, so we’ll get to that. But it’s going to be a color essentially with a little arrow pointing down at the bottom. So I’m going to turn off my feather, because I have that turned on on my select tool from earlier and I’m going to grab the guide that Krista has set up here with my marquee.

It’s you see that the GIMP snaps to those guides and I’m actually going to the mock-up, doesn’t have things don’t have to be exact to the mock-up, because I noticed that the guide is just a little bit off from like maybe at one pixel. So that’s that’s! Fine, so now i’m going to select the wood grain layer and I’m going to copy that and then edit paste as new image or in Photoshop file new image and it’s going to automatically set your proportion.

So now I’ve got this wood grain, which is exactly proportionate to what it is that is going to go at the top of the website and kristas following along in Photoshop as well. So she’s actually had to paste that into a new image in Photoshop, whereas I could just edit paste his name. So I’m going to save that. That’s my wood grain for the top one of the things about wood grain that you should know is that it’s got a lot of intricacy to it, so it can end up being a pretty large file again, there’s no transparency necessary here.

So we are going to work with a JPEG, so we’re going to try with this. I want to see how large the file is going to be. If I set it where I would like it to be, which is about eighty-five percent quality. So i’m going to call this wood grain VG jpg again, i’m saving it in my web design or web site. / images flatten the image save it as 85 and, let’s go for me, see how that is, how BIG’s the file on your system at eighty-five percent.

Oh you’re going wait. I have to she’s taking it down to quality 30 at the new 78k and only 60 60 percent mine turned out at eighty-five percent to be only 60 4.5 k. So what you want to try Crist is instead of save, as on Photoshop. Go file save for web safe or whether my vices just an outlet right there, yeah and now it’s automatically selecting jiff so change that to jpg and now you’ll see that the file size down at the lower left 76.

1 so now grab the quality slider and you Can slide that down right here, top right and you can actually see how that’s going to impact your file size as well as the quality, the output. So that’s pretty good. Essentially, what you’d want to do is go down as far as you can, without completely losing the quality of the file without losing the detail, because you don’t want it to look bad, but at the same time this is a background image and there’s going to be Stuff, on top of it, that is going to be really what you’re looking at so for me, 64k is too big.

So I’m going to save a game, I’m going to overwrite and bring my quality down to 70. Double click on it see how I like the quality, it’s fantastic, and at this point it’s only 40k. That’s a that’s a bit more reasonable, especially considering us of wood grain. How are you doing over there and forth with Photoshop we’re good 41 k for me and the quality is seventy percent quality? The wood grain is pretty crystal clear and how how large is the file size? I believe it was 3333.

I could keep going I’m at. Seventy percent – Oh 3737. Okay, so we’re pretty close, I’m 41, but I’ve got seventy percent quality. How long do you have to go? I think I was like forty percent. It was pretty low right. Alright, so now I’ve got that file ready to go and that’s going to be our background for the top area, so we can close that out go back to our mock-up and I don’t need that wood grain anymore.

One of the things I got to do is I got to get these cool Polaroid’s that Krista’s created, so we’re going to get rid of all this stuff because that’s all just in colors, these are just colors, the white stuff, we’re going to use a div, we’re Not going to use an image and I’m going to go control a and this time it’s a little bit different. I’ve got the crystal just get rid of that blue area as well, because that we’re going to use a div that as well as that.

So here I am in the GIMP there’s Krista in Photoshop control, a or command a to copy, all select all – and this time I’m not going to go copy because that’s only going to copy the selected layer, which is only the picture wan na, get everything. It’s going to copy visible or copy merged in Photoshop. I suppose so now that I’ve got that in my clipboard Krista’s got that in her clipboard. Let’s paste it as a new image.

Again, I’m going to go edit paste as new Krista’s going to create a new image and then paste it onto that canvas well and we didn’t get a merged clipboard. So go back to your your master file there and make sure when you copy go edit copy merged there. You go so now create a new file, a game. It won’t be that one because that one’s got the wrong dimensions. Is it still just kidding either yeah? That’s how it’s done.

Okay, go back to your so now I think what’s happening! Okay, because you’re you’ve got a marquee around just that image. If you do a control, a no, you just want the whole board. Yes, she just had the wrong mark either. So it was copying the merge, but ok, so now paste that into a new image there we go okay. So now again, this has got to be a pain right. Yours is coming up as it’s got a white background, so you need to get rid of that white background there you go and then export that as a pin, which is going to be a larger file.

Cuz, it’s got that transparency Here I am in the GIMP and you’ll notice that I also got a bunch of space over here. So in the GIMP I can just go right. Click image, auto crop image and it automatically sucks in the sides. That’s one thing that Photoshop is lacking: that the GIMP is totally awesome at i’m, going to save that image. I’r going to call this the Polaroids pull air, no breaching of copyrights intended or registered trademarks, okay, Polaroid’s, dot, pain.

Reason we go with paying again is because this has got a transparency, so we need to be able to put this on top of the rest of our website so that, what’s behind, it can actually shine through okay, so you’re at that point in Photoshop as well. I’r going to save it with a compression level of nine in the GIMP ping being a lossless format. It’s going to be very high quality, even at high compression there’s, my ping, and it’s it’s quite large.

That’s showing me as 160 7.7 k. How are you looking 299 299, so mine’s about half the size of yours but they’re, both too big for internet, so next week we’re going to come back to that we’re going to compress down that that Polaroids dot ping file on both well, if you’re, if you’re Here we can look at it on the map if you’re not, then we’ll definitely look at it on linux as well. You can kind of get an impression for how we’re able to do a lot of the same things between photoshop, the commercial software and the gimp on that which is free on a free operating system, which is a boon to the plugin.

The fact that free actually has really good these days – it’s not like 10 years ago, we’re free men, you’re, sacrificing quality and and getting you know a knockoff product, and now these days got it thanks to community on it’s a fantastic thing. So we’re going to be looking at actually taking those slices because we’ve actually sliced up that whole website now, there’s arm there’s our actual mock up as a sliced website.

That’s it. We’ve got our logo right, which is a transparent ping. On a white background it’s being displayed, so we can’t really see it because it’s white text we’ve got our background image, which is that thing there that’s going to be the gradient. We’ve got the Polaroids which we’re going to shrink down next week and we’ve got that guy right there, our wood grain, so those are really the only images that we need to get started with the website to make it look like you’re, ma club and then we’re Going to be using CSS as well as HTML and PHP, in order to actually turn that into a real functional working website, along with some cool little Java scripts and anything else, we need to do to make that work.

This is category 5 technology, TV and you’ll find us online triple w category 5 TV. You

Tags gimp, Linux, mac, photoshop, Web Development, web-design, windows

Online Marketing

lb: Blog System in Less Than 100 Lines of Shell Script!

Post author By Jimmy Dagger
Post date August 31, 2020
No Comments on lb: Blog System in Less Than 100 Lines of Shell Script!

So especially now that I’m starting my dissertation and I’m going to be like I’m basically going to be a neat like I don’t have to go to classes or anything at a daily basis, so it’d be nice to keep myself on task now.

I am NOT a big fan of a lot of blogging software out there. You know, I don’t want to use WordPress or anything. That’s too bloated. I want to have something that just generates HTML pages, really simply not even a static page generator, just something. That’s very. Like makes sense, I don’t have to you know, write anything and markdown and convert it to HTML and do all the silly stuff. So I ended up writing a little blog system that might be worth checking out if you’re interested, so it’s actually written in less than a hundred lines of shell script.

In fact, I think it’s. If I actually look at it, I think it’s considerably less yeah. It’s just 71 lines, that’s all you need, but it does everything that I need and it gives you some nice different interfaces that might be interesting. Let me show you how it looks on my website so right now. I just have it here so they’re different in are different ways of looking at it, so the pH I’ve linked here is a rolling blog page, and this is originally the only thing I wanted, but it has other stuff that, in addition to this – and that is When I put up in a blog entry, it appears here as a you know, a new entry, of course they’re in chronological order, auto generates the date, gives me a title.

One of the nice things at is it generates links so it generates. The first link is like a link to the header, so if I click on this link, it actually takes me directly to the header and of course you can copy this, I’m not even on my website, I’m on the offline one, but it doesn’t matter, but you Can just copy the HTML that it generates in the standalone link if you want to link directly to that entry, so you can just copy this share it with some Linnell and it goes directly to that entry.

As you know, you probably have seen in other sites, but it’s nice having this automatic um. Additionally, in addition to that, it generates a link to a standalone page. So if you just want to view one alone, you can do that just as well. Now I don’t have the kind of thing where, like it cuts off after a point, I might integrate that later. But really my goal like what I want to have like what I like in blogs is when they’re just everything is just on one page and if you only use plain text, it doesn’t really get that big.

So my idea is like write, my blog page here. This isn’t part of the system necessarily, but mine is 2008. The HTML and my idea is after 2008 I’ll start using 2009 or something like that. That way, the pages don’t get too big, but my idea is like on this page. Everything should be there, but you know if you don’t like it, you can probably change the the script around, but so it generates these links that generates standalone pages and stuff, like that it also when you finalize a link, it automatically R adds it to the RSS Feed, so you can check my RSS feed and you’ll see that all the syntax is actually here as well.

Actually, let me just open up my RSS feed manually, so you’ll see that it generates it. Of course it takes that AIT’s HTML takes all the metadata. It needs and puts it into some kind of you know, gives it a unique ID the date it’s stuff like that, then it needs to be read properly by RSS readers, so all of that is like totally automatic. Let me show you how you actually use oh and the other interface I should say, which is something I’ve been playing around.

I don’t know if you checked out my website recently, but I’ve been playing around with this for other stuff. Like you know, Apache has this. You know we’re all familiar with it. Probably, but people don’t use them much, often like where a putt Apache can just generate the directory contents for a folder. So you can see the content of the contents of my proto-indo-european folder here. But the same thing is true: if the blog posts, so you can go to slash blog and these are actually out of order because I’ve been playing around with them, but if you don’t mess around with them since you’re, not figure out the cyst like, I am It’ll automatically add them and you can list them in chronological order or something like that, if you don’t know how to do this, for you know, Apache just look up how to make an Apache.

What is it like indexes or something like that? But anyway, so how does this blog system actually work? What’s the actual interface, so I’m going to go to my website directory and you’ll, see here the script here lb. That’s the name of my blog system is symlink. T’, so if you just run it by default, it gives you some directions, but I’ll talk about those in a second to add a new entry. It really just has three commands new finalize and delete so new.

It asks for a title. Let’s say you know, this is a blog post title and you go into it opens up, I think, and it might be vim. I might want to change it to your default editor, but it opens up. You know a page where you can actually add the content. So this is the content and of course this is you know it’s just an HTML, so you can do whatever you want here, save that and now, when you’re done, modifying the file, it’s actually stored, as it says here, it’s stored in a slash blog, slash, dot Drafts now, if you want to get rid of that draft, all you have to do is just RM it.

That’s all you have to do, but if you want to finalize it, what you should do is run lb finalize and that will give you a list of all your drafts. Currently I just have one so I’m going to pick that one and it’s now finalized. Now what that means is, it adds it first off to the HTML like rolling blog page. So here it is here. This is the content artists that are generally a standalone page. This is the content average of that nice and simple.

As the author name below and stuff on the standalone page – and it also it’s not going to work on my URL link, but I can because I haven’t updated my website. But if I go to my RSS feed offline you’ll see that here it’s all been added to the RSS feed, read the RSS feed or whatever. So all of that is automatic. Now, let’s say this is just in an example. I don’t actually want to push this to my website, so what you can do is just run lb delete to delete an old post and that generates a list of all the posts that you have, and I want to get rid of.

I should probably have this ordered chronologically. That would be a little easier, but yeah I’ll do that in a second. So all you have to do is select the one you want to get rid of say yes and then it actually it deletes the file. The standalone file – and it also deletes all that information from the RSS feed and the rolling blog page. So if I go back to this this, that entry is now going to be gone.

Okay, so that’s pretty much all the system. Does it again? It’s really simple! You just create blog posts and it’ll, convert it to RSS syntax and whatever else you need, if you want to delete a post, it will do that automatically. So one thing the one thing it doesn’t do since it’s not like a database or it doesn’t generate pages on the fly is: if you want to modify a post, you would basically have to modify the standalone page and the you know the the rolling blog list And the RSS feeds separately – that’s not the intended interface just because, and it would probably be a little more difficult to add something like that.

Just because there can be there can be a lot that varies between files. So I mean I I’m the kind of person I don’t like revise things like, I don’t believe in correcting spelling checks, there’s spelling mistakes or whatever. So I don’t care, but you know whatever, so it might not be for you if you’re the kind of person who is like that. That’s what I’m trying to say um and the last thing is what is the last thing just two seconds ago in my head, I was like.

Oh, I got ta say this one more thing. What what is the the last thing? I have to say. I don’t know, maybe that is it I’m going to forget, I’m going to turn off the camera and come back in a second. When I remember okay, I remember the last thing is the the other things it’s sort of important to remember is like when it’s generating these entries in the web, like the rolling blog page. All of this is like I mean it actually creates.

If you look at the source of it, it is a div of the class entry or something like this, so all the user interface or not user interface. All the decoration. I have like the fact that this is a slightly darker gray and the the sidebar here. All of that is just CSS, so for a lot of this stuff, if you want like a your blog to look totally different from mine, you can change it all the stuff like how Andrew individual entries look or how you know if you want them all as Individual squares on a page or something something totally unreadable, all of that’s a possibility.

All the thing does and well I should say you can go into the actual script and change any number of variables of the things you know that are at stake. So, of course you know here you can set your individual website, which is obviously not the same as mine you’re, going to want to change that or the stuff up here. You can also change, I think, yeah things like the header or the footer to the the individual page, the date that is displayed on the website.

This stuff is lower down because it has to be called lower down, but yeah, so you can play around with it again. It is less than 75 lines, so it doesn’t have all the functionality and that again it can’t, like you know, like change the content. I’ve already published blogs unless you want to do it manually, but yeah I’ve really enjoyed like this is pretty much all I need for a blog, so it’s probably the kind of stuff I’m going to be using so anyway, but that’s about it and I’ll see you Guys next time hope you learn something

Don't have time to do the blogging thing?

Maybe Copywriting services are for you.

Tags #blog, apache, bloat, bloated, create, custom, gnu, html, hugo, jekyll, lb, less, Linux, Luke Smith, macos, meme, not related, osx, php, podcast, posts, site, static, suckless, system, tumblr, weblog, wordpress

Online Marketing

Linux for Chromebooks: Secure Development (Google I/O ’19)

Post author By Jimmy Dagger
Post date August 29, 2020
No Comments on Linux for Chromebooks: Secure Development (Google I/O ’19)

We are here to talk to you about Linux, for Chrome box, also known as crostini. We will start by introducing ourselves. My name is Sudan. I am a designer on crostini for Chromebooks hi, I’m Dylan, I’m the Chrome, OS virtualization lead and I’m Tom product manager for Linux on Chromebooks. Now it’s the end of day two at i/o and you’ve probably already been to a bunch of different sessions that have talked about all the new frameworks that you need to be using or the platforms that you need to be building for and everyone’s right.

You absolutely should be, but we’re not really here to talk about that. Instead, what we want to talk about is you as developers and how you can get more peace of mind by using Linux on Chromebooks, we give you that peace of mind by balancing simplicity and security. On that note, let’s do a quick user study. How many of you are developers in the audience? Wow, that’s full room as expected. Keep your hands raised, how many of you use your computers for anything else, other than development like doing your taxes, checking email, again, 100 % of you, okay, one last question: how many of you are worried about security? Good, that’s pretty! I mean you all should be so I’m glad to see many hands up anyway, so I don’t know about you, but when I start a new project I I get stuck a lot right.

I hit a lot of walls and I hit a lot of barriers and go to look for a problem, go to look for a solution and I turn to Google. Luckily, Google’s almost always got a great answer for me. Unluckily. Sometimes the answer looks like this, and I know I shouldn’t run this script from evil site, comm and pipe it to soo do. But you know that deadlines coming up. This may be, the site, looks kind of legit, so in this case I’ll make an exception and I’ll do this and then it happens again and again and eventually I end up with a system that I don’t trust as much as I should, because I don’t really Know what code I’ve run on it anymore? I don’t have time to read all these scripts.

My solution to this has been to carry two laptops, one for my developer world and one for my everything else world that I want to be secure in, but recently I switched to using one laptop and Tom’s going to talk about how I do that. So our goal with Chrome OS has been to give you a simple and secure experience from the start, but if you tried it previously, you might have seen that it wasn’t quite ready for developers in order to be simple and secure.

We couldn’t run all of the tools that developers need to get their job done, but that all changed at i/o. Last year, when we announced that we were going to start supporting Linux on Chromebooks Linux on Chromebooks lets, you run all of your favorite editors, IDs and tools, and it’s now supported on over 50 % of Chromebooks, including great devices with eighth generation. Intel CPUs like the Lenovo yoga book C 630 and the Acer Chromebook spin 13.

If you haven’t seen it we’re going to run through a few examples. First off, how do you get it? It’s really easy! It’s just a couple clicks now. In the background, this is downloading a virtual machine setting up containers configuring, it all Dylan’s, going to go more into that in a few minutes. But for you as a developer, it’s just a couple clicks to get started and this adds a terminal to your launcher.

Now, if you open that terminal, you’ll see that you have a pretty standard, debian environment and we’ve already loaded in a bunch of the tools that developers expect like git and vim. And if you need anything else, you have the apt package manager and you can install whatever packages you need and if you want to, instead install files or install programs via dev files, you can do that too. This gives you access to thousands of world-class developer tools.

Now, once you’ve installed, any graphical you’ll find that they all show up in your launcher, just like the rest of your Chrome, OS apps, and if you open them, they show up in your window manager again just like the rest of your Chrome, OS apps. This is the simple experience that people have come to expect from Chrome OS and we didn’t want to change that with Linux. But importantly, this is also secure.

You don’t have to worry about malware, accessing your files, snooping on your traffic or infecting your peripherals. I’d ask you to trust us on that, but this is way too important for you to take on Trust alone. So over the course of this talk, Dylan and Sudha are going to walk you through the principles behind the architecture and design of crostini. We’re then, going to dissect some common developer flows to show you how these principles apply and, finally, we’re going to share some tips and tricks for advanced usage for the power users out there.

So now I’m going to hand it over to Dylan to talk about the architecture. Okay, so Chrome OS has always had a layered approach to security, and our big layer has always been the browser and the renderer and running all untrusted code in a nice, isolated renderer, and that keeps the attack surface of your core system to an absolute minimum. They’re not allowed to make a lot of system calls, they can’t poke at random bits of your kernel and that worked really well for webpages web apps.

However, for developer tools, I need to install a lot of different programs. They need a lot of different privileges. They can do anything any app on Linux can do and that wasn’t acceptable for us on the core of Chrome OS. So we need that a layer, so we added a virtualization layer and that lives in the main, Chrome OS layer and that spins up a VM. And now this VM has a much more limited interface, while still exposing a full Linux kernel to the programs that run inside the VM.

The only way the VM can talk to Chrome OS proper is through a small API that that cross VM program on the left up there exposes to the guest. This was pretty good. Now we’ve got a lot greatly reduced attack surface. We were pretty happy with this. We wanted to go a little further, so we made sure that the guest VM was also signed by Google and somewhat trusted. This lets us trust some of the actions the guest VM takes, and it’s also read-only.

So users can only break things so much and that no matter what you do, you’re going to be able to boot a VM. However, with all that security solved, we’re back in a situation where you don’t have enough flexibility, your apps can’t do anything. It’s a read-only thing: you can’t install anything in it, so we had another layer and for this we stole used lxd from canonical. That teams been very helpful in getting this spun up with us.

It’s a pretty standard container run time. It’s built for running system containers and in our case we started a system container of Debian and exposed to that to the user so that cross VM layer. I was talking about that’s kind of the most important part of the security story. Here it’s the last line of defense before something gets into Chrome OS. So we went. We focused on this for a long time and made sure we got that as secure as possible.

We wrote it in a memory safe programming language. We chose rust. This eliminates buffer overflows and integer overflows a lot of common bugs related to memory safety that are exploited by attackers. We were pretty happy with that, but we again added another layer of security here in that we broke up the virtualization program into pillars and made sure that each pillar that interfaces with the guest only has access to small parts of your hosts Chrome OS system.

So your host Chrome, OS system, you’ve got your bank’s web page open. You’ve got your online tax filing thing. Open you’ve got all kinds of personal identifiable information everywhere. We really wanted to protect that, but we needed to give the guest access to things like a random number, a display, a USB device, so each of those got their own jail and they can only see the thing they need, so our random number generator can generate Random numbers: it can’t access any files, it’s in an empty file system.

From its perspective, it doesn’t have any network access the display driver, it can access the display again, it can’t touch the network, it can’t go, grab your files and upload them, even if somebody gets into it and tries to make it do things we didn’t intend it To this is all a little complicated, but we’ve added a great amount of system UI to make this easy for you to use. So when you’re just doing your job as a developer, you don’t have to worry about these.

Pretty pictures I’ve drawn for you and I’ll show you of what we did. Thank You. Dylan security is absolutely top of mind for us. While crafting the Linux experience on Chromebooks, we came up with three high-level design goals. The first goal was to keep your experience intuitive. Everyone here in this room has been using computers for a long time and you have just established your workflows and habits.

So, basically, what we wanted to do is to match to those those expectations. We wanted to provide an experience, that’s natural to you. We want developers everywhere to be using Chromebooks and feel right at home doing it. The second goal was to make your experience native. We could have taken the easy path by giving you a full Linux desktop in a VM, but that wasn’t good enough. Our goal was to bring the Linux apps.

You depend on for development into your native Chrome, OS experience. The third goal was to make your experience simple, and I think this is very important. There’s a lot of complexity, that’s going on under the hood, and we want to leave it there. Our guiding principle is that complexity shouldn’t interfere with the user experience. There’s a couple of things. We are trying to balance here. The security concerns that come with installing Linux apps on Chromebooks and the simplicity that comes with sticking to design patterns established by Chrome, OS and our mission was to find that sweet spot all right.

So now we’re going to talk about three common developer flows and see how they work with crusting. The first of these is accessing files as developers. We have to do this all the time our editors need to access files, as do our compilers, our source control and a whole lot more, but the problem is that our file systems have a lot more than just code. They have our personal photos, our tax returns.

Maybe that novel that you’ve been working on a lot can go wrong. Ransomware can hold all of that data hostage. Malware can upload your files to some rain server, or maybe you just get something that goes and deletes everything for the fun of it. We built crostini with those threats in mind to limit what can go wrong and Dylan will tell you how so our goal, sharing files with your VM and with your container, was to make it easy for you to get the files you needed for your development tasks.

Where you need them, but not expose things, you don’t want exposed to untrusted code, because ultimately we don’t trust the code. That’s running inside this VM. To do this, we took a layered approach, your files all live in Chrome OS at the very bottom, and we share them out to the VM with a 9p server. We named it 9s again. We wrote it in rust, so it’s memory safe. We fuzzed it to make sure unexpected inputs, don’t cause unexpected behavior and we put it in a in a tight jail.

So it can access only the files you share with it and it takes those files and exports them to the VM. The VM mounts the 9p thing, that’s built into Linux and then lxd takes that mount and exposes it into your container, where your development tools are running. The important thing here is that your container can only see files. You say I want to share with my development environment. Your VM can only see those same files and even the server that we wrote running on Chrome OS can only see those files.

It doesn’t get to see everything. So somebody exploits this stack all the way back into Chrome OS. They still don’t have access to the files you haven’t shared with the container. That’s a lot of stuff to set up setting up 9 P mounts bind mounting things into containers. We had to do this manually for a while. We were developing it. It was painful, so let’s do to show you how easy we made it for you.

There are a lot of layers going on, but let’s see how simple this is in the UI right out of the box, you have a directory called Linux files, which is your home directory within Linux. Anything in this directory is automatically shared with Linux. Outside of this directory anywhere else on the device, Linux doesn’t have access to anything until you grant permissions I’ll walk you through a couple of examples here, let’s say you’re working on a project, and you see yourself needing files from this.

One folder called illustrations to share this: all you have to do is access the right-click menu and click on share with Linux. In as simple as two steps, you now share this folder with Linux. If you notice, this is in Google Drive and that’s a cool thing when you don’t want to share this anymore, you can do that by going to settings and unshare here’s another example where we made quick edits, really simple for you.

You have a data file in your downloads folder and when you double-click it automatically opens in vs code when this happens in the background it’s implicitly shared and the sharing last until you restart. This is the balance of security and simplicity. We wanted to bring you. Thank you so, for our second developer flow that we’re going to talk about we’re going to look at running a web server. Now being Chrome OS.

We care a lot about people making great web apps and we want to make sure that they can create those on a Chromebook and being able to run a web server is pretty central to being able to build any web app. Unfortunately, web servers also need a pretty low level of access, and that can cause some problems. The code that can run a web server is also capable of snooping on your internet traffic. It can know what sites you’re accessing and, in some cases, even see the contents of those pages.

This means that a malicious web server could potentially track everything that you’re doing now again, we thought of this as we design crostini, and we made sure that we prevented this kind of attack. Linux Dylan will tell you how I can be called Linux. It’s my job. All right so starting a web server from crostini, simple we’ve got a good demo over in the web, dev sandbox already type of command. You fire up your web server, just like you would on any Linux distribution out there what’s actually happening under.

The hood, though, is you’re in a container, and you open up a port that ports in a network namespace inside a VM running under our special hypervisor, which puts its network stack in another namespace on the host and then finally out to Chrome, so Chrome can’t get Back in which is great for security, you’ve got wonderful isolation, but if I want to test this new PWA or webpage, I’m running in my VM, how do I get chrome to talk to it? This was not simple.

So for that we had to add some demons along the way. Actually, every layer gets a daemon for this there’s the first one is running in the in the VM and it’s sitting there waiting to check if any container that’s running happens to open a port, and then it’s got to figure out which container open that port and Bundles that information up sends it to Chrome OS, so hey this port in this container is listening.

The user might want to use that port and on the Chrome, OS side we say – ok, the other daemon responds says I will set up a route to do some forwarding I’m going to forward all of this over Vee sock, which is a protocol used to talk To local VMS, on on machines, that’s kept under the hood, so either end talks HTTP in in to the demons and the daemons dog Vee sock to each other. So the key here is that the web server gets to talk.

Http Chrome gets to talk, HTTP everything’s, normal everything works. Just like you would well under the hood. We’ve got all this extra daemons and V sock forwarding going, but we’ve hidden that one other important thing we’ve made it trusted. So you can get all your PWA features. You can install it to your desktop, even though it’s not technically the same machine. We know it is because we’ve got the information we set up the VM, so we allow that to be trusted domain and all this complexity, I think, makes one of our best demos.

Today of how complicated we made it under the hood and how simple you’re going to see it is to actually use. I totally agree that this is very complicated under the hood, but in the UI it’s exactly like you would expect it to be. Let’s say: you’re experimenting with building this cool PWA here in terminal you’re in your folder pwe, a starter kit, you’re running a commands to start your web server and if you see at the bottom of this screen, it’s listening at port 8080.

At this point, you can launch your browser, go to localhost 8080 and test your web app on the screen here on the left. You have your web app in Chrome and on the right if you’re noticing it it’s in Chrome. Yes, you can test your web app on a Chromebook in Firefox too, if you noticed, we did not prompt you to give any permissions while we were in this flow. This is because the host is accessing the VM and not the other way around again.

This is another way we kind of balanced the security and simplicity factor. We were talking about all right for finally for our third demo, we’re going to talk about testing an Android app now this is really exciting, because just yesterday we announced that Android studio is officially supported on Chromebooks and we even created an installer just for Chrome OS To make it really easy to get started with now, of course, Android studio isn’t the only thing that you need in order to build a great Android app.

You also need something to test that app on usually a phone and well. You could do that over Wi-Fi with ADB remote all this sort of stuff. We wanted to make it easy, just the experience that you’d expect on any other vice. I can plug my phone in over USB and test my app that way. Now, if I’m an Android developer, sure I’ll plug my phone in to test my app, but I’m also going to plug in a lot of other devices over USB over the course of my day, I’m a plug in a USB Drive that has a lot of family Photos on it, I’m a plug in a wearable that has some health information I may even plug in my security key for work.

That gives me all of my access. Malware can take advantage of these devices to uniquely identify you as you move between machines to spread itself or even to make changes to them again. We thought of these threats at when designing crostini and made sure that we were preventing them. Implementing USB was a lot of fun, for us might have been our most painful stack same principles. Apply, we’ve got our layers, we protect the host there’s a lot of attack surface in a hosts USB stack to very complicated kind of loosely spec to protocol.

It’s an exact spec, that’s loosely implemented by a lot of people, so we’ve hidden that kept that on the host side wrote a device that we live in cross VM jail again, we’ve got a USB driver, it’s pretty complicated. It’s got a lot of code in it. I’r sure there’s a bug or two, so we made sure it was very well isolated. It can’t get to your files, they can’t get to the network, it also can’t get to any USB device.

You have to explicitly say hey. I want to give this USB device to my development environment. We’ve tried to make that as easy as possible and what actually happens under the hood. We’ve always got an emulated USB bus running so that the guest always sees hey. I’ve got a USB bus. There’s nothing plugged in and once you indicate that I want to give this to my VM, it says: ok, I’m going to add this device to this bus and then we show it to the guest and then the guest again in turn, has to forward that into The container and the container can see it there’s two things we were really focused on here.

One was security: again we dressed that with the jail, and we made sure the attack surface was as minimal as possible. It’s also written in rust and it’s nice and memory safe and it’s fuzz. But the other issue here is its privacy, because people somehow use lists of USB devices attached to machines to fingerprint and track users, and we wanted to make sure the untrusted code running inside the container couldn’t be another way to do that again.

This is a lot of steps. We have to create a device, we have to export it to a VM. We have to export it to a container. We have to decide which device to export and not and again we’ll have a demo that shows how easy it is. Okay, what this is the last demo, let’s say: I’m on my Linux and Abel Chromebook and you’re plugging in your phone you’ll see a notification that prompts you to connect to Linux.

At this point, only Chrome OS has knowledge of your phone. Linux doesn’t even know that your phone exists and that’s a good thing. If you see here, your phone is not listed in the USB list, but when you rerun the command once you connect on the notification, your phone shows up in the list. At this point, you established access to Linux to your phone. Let’s say: you’re working on a project, you’re developing a cool app again in Android studio and you’re, ready to test it out.

You hit, run and select the phone and boom just like that. You’re able to test your phone test, your app on your phone at this point you can debug and test out your app. Finally, you can go to settings and manage what Linux access to at any point of time. So you can see how security is at the core of your Linux experience on Chromebooks you, the user, are in full control at all times of what linux has access to.

We take advantage of a variety of UX patterns to make it simple to use and also native to Chrome OS. The combination of principles of Chrome, OS and crostini make this experience pretty unique thanks. My turn all right good. We got plenty of time, so we’ve been talking about a lot of details and I’ve been talking a lot about layers and jails and all that’s important and it’s a good reason for you to trust our normal flows and at when I’m using my Chromebook.

I almost always stay within these common workflows that we’ve polished and made sure work. However, a lot of that technical detail I was talking about is still usable and we’ve left hooks in for you to play with it. So I’m glad I’ve got time left. So I can go through a few of these examples and kind of just wait. Your appetite for what else you can do. We don’t test this stuff. We don’t support this stuff.

We really want the standard flow to be enough for everybody, but every once in a while there might be a reason you want to do something a little more advanced or you know you might just want to go, have fun and play with things under the hood. We’re tinkerers right supposed to be so we’ll go through and show how some of this stuff works. All this is going to be from the Chrome, OS shell. This has been in Chrome OS since longer than I have and so ctrl alt T gets you a shell.

There’s a set of debug commands. You can run we’re going to focus on one command, which is the the VMC command that we added to control virtual machines and containers the basic command. You can do a VM C list. It’ll show you what VMs you have installed on your system. I, the default VM, is called termina, so hopefully the fonts big enough and you can see what size it is. The terminal VM is the one that all the demos were done for the slides before.

So it’s up and running, we’ve made a shortcut to enter a container inside of yem. So if you want to go into the default container, the containers name penguin again, that’s that’s where we were doing all these demos from so the there’s, a BMC container command to get you into there will pop out of there and then we’ll pop back into just The VM so VMC start enters your virtual machine without entering your container.

So if you go back to my layers, it’s the one in the middle. The thing that LXDE runs in – and the reason you want to be in here is if you want to manipulate or change containers, so I mentioned we used lxd, there’s going to be a lot of LXE commands, that’s the lxd control program. This is well documented online and most of it will work inside Chrome OS, just like it does on a default. It want to install the first one you can do is a list you can see, we’ve got penguin running, we have one container it’s up and running.

It’s got an IP address, so we’ve got our one container. We might want to play with it a little bit and before we do, maybe I want to make sure I can get back to a state where I know it’s good right, because I’ve broken them before. It’s nice to be able to just go back to where I was and play around without worrying, so standard LXE command, it’s called snapshot and you give it your container name and you can give it the name of your snapshot and now you’ve got an image saved.

That you can go back to if you break things, there’s a copy on right. We use butter FS in the VM, so you’re not eating up a ton of disk space. We can get info on our container. This gives a bunch of information. Again, you can go poke around with this on a Chromebook. If you want to the important bit here, is that we’ve got one snapshot at the bottom, the i/o one snapshot we just created, you can have multiple snapshots.

It’s got a date on it to help. You remember if you didn’t use a very creative name and then, when you want to restore it back, Alex see restore these are well-named commands. They did a better job with this than I did. If you really want to go and play with different things, sometimes you want more than one container, so I’ve got my penguin container and I’m going to go say, install some different libraries in this one.

Maybe I want to have a container. That’s got Python two seven and a different one. That’s got Python three or maybe I want a different container for writing. Go then the container I have for writing rust. So we let you do that you can create as many containers as you want disk space limited. These do do cost this space. The most basic way to start off a new container is to copy an existing one. There’s an LXE copy command.

The example up here copies the the default penguin container over to a new container named Kingfisher. You can list the containers. We’ve got two by default: containers are stopped, so we have to start them now. We can list two there it’s running and you can jump in you say hey. I want to run bash in Kingfisher and now I’ve got a shell in my new container and I can go off and install whatever random toolchain.

I didn’t want in my default container, taking that one step further. We chose Debian because it was kind of the easiest thing for us to do. We didn’t want to tie you down to that, though. We support the Debian workflow. We support some guest packages that are installed in Debian by default, but some people want to use their favorite distro and there is a huge amount of distres available from the image server.

That canonical runs will install an arch one here, I’m not I’m not an arch guy. I don’t really know much about arch, but some of my co-workers talked me into doing this and playing with it. So now you can see, we’ve got three containers and I’ve got two Debian containers, my penguin and my Kingfisher, and now I’ve got something called arch test and again I can enter it by telling it to run bash, and if I want to install packages in this One I’ll use pac-man instead of app it’s actually it’s actually arch.

I promise that’s just a taste of what you can do from here. If you go and look at the LXE and lxd documentation online, you can get some more ideas, there’s even some help online about installing other ones and getting them to integrate better with the GUI. If you want more than just a command line, all right, so Dillon just showed you a bunch of the really cool tricks you can do with crostini. When you go under the hood and if you’re interested in this kind of thing, we really recommend checking out the crostini subreddit.

The folks they’re buying features as soon as we release them, sometimes even sooner and they’re, also really welcoming to new users of Linux on Chromebooks. So if you have any questions, please check it out and a big thanks to the folks there. So that’s Linux. On Chromebooks, as you can see, we already support a lot of web and Android developer flows and there’s a lot more to come, both in supporting other developers and in expanding what we can do with new capabilities like multiple containers and backup and restore we’re going to Keep applying these principles of simplicity and security to give you the best developer experience possible whenever you’re ready, we hope you’ll join us.

Thank you. You

Tags Chromebooks, Crostini, developer news, Developers, google, google 2019, Google I/O, Google I/O 2019, Google IO, google io updates, google livestream, I/O, IO, io 19, io announcements, io19, Linux, Linux for Chromebooks, sandbox for development

Online Marketing

Linux for Chromebooks: Secure Development (Google I/O ’19)

Post author By Jimmy Dagger
Post date August 21, 2020
No Comments on Linux for Chromebooks: Secure Development (Google I/O ’19)

Thank you. You

Tags Chromebooks, Crostini, developer news, Developers, google, google 2019, Google I/O, Google I/O 2019, Google IO, google io updates, google livestream, I/O, IO, io 19, io announcements, io19, Linux, Linux for Chromebooks, sandbox for development

Online Marketing

How We Make YouTube s: The Gear, Process, Kdenlive, Gimp, OBS & Other Open Source Software

Post author By Jimmy Dagger
Post date June 26, 2020
No Comments on How We Make YouTube s: The Gear, Process, Kdenlive, Gimp, OBS & Other Open Source Software

So this is how I make youtube articles. I’ve actually gone through a lot of iterations, but because this is the first one I think I’ve documented top to bottom we’re going to call it version 1.0. When, technically, I have lost track of versioning, but for purposes of YouTube here and when I go back and say: okay, what did I change? I can make version, you know one point whatever or when I do a lot of changes.

Maybe a version to X, we’ll figure out like all projects that are open-source and you try to figure out what you’re going to do for versioning numbers and that can be the complicated part. Occasionally at least for me, because I think gives us a big change. An incremental change, but let’s get started. What we have here is, and I’m going to swap between the cameras and then I’m going to show how I actually put this article together on the editing side, and the reason I have to do both is because my youtube blog is obviously a lot of tutorials And some articles like this, so there’s a mix of things I do and I want to kind of show all of them.

So this part is the filming part is freely called filming. Nothing is film, it’s all digital, but this is the part where we do things in the studio and how we edit it together up. Here I have a GoPro just out of frame. Then we have two lights. I have my Aston microphone in shotgun mode, which is currently the audio source and I’m trying to figure out how to get the audio when I do behind here. I guess I’ll just be oh, so I have my aperture light and my cheap softbox from I well.

I think I got it either for me, I was on or ebay I’ll find an Amazon link for you. This is not an expensive one at all. That’s a little bit more money, but not excuse me that one’s a little bit more money, but I still really like it because it works really. Well, it’s an LED light. It’s portable. It’s got batteries on it, but now that we’re doing more studio stuff, I’m leaving these set up more often anyways.

So when we’re doing a product review, for example, I got a couple of products here. I got my pixel phone, which I’m getting get ready to do a review on. I currently have my GoPro mounted to a boom stand over here, and this boom stand works really good to hold a camera. Now I’ve Marvin’s camera’s, not here right now, I’ve been borrowing his 70d until I can decide whether or not a one of I another, seventy which I think I have a deal on a line on one right now, but that’s primary.

What we’re shooting with over there is the Canon 70d. I’m really happy to the camera everyone’s like. Oh, it doesn’t do 4k or doesn’t do this. I’m like. I don’t think my tutorials would be any better in 4k if they not adding any value, then yeah. Why even add it to there? Also we for the TV hookup, so we can see what we’re doing we have a wire going from that. So this is what I see over here. So kcci do glance over there.

Try never to look, but when we’re setting up this is an easy way for me to see. What’s going on is to look, we just plug it into the TV. I understand everything is going on with the camera and you know gives me a good idea of things on there now with the magic lantern software, it’s nice, because it gives me the audio level. So I can make sure the audio is good on this, and this asked a microphone I’ll leave a link to below I’m really happy with this purchase.

Now everyone’s, like. Oh rode, mic Pro this that I tried the rode mic I had the road might go. I liked it, but I liked the audio quality better on the Aston and it does stereo. So when we did that group setting where we had all of us here doing hot sauce, the acid microphone didn’t phenomenal job. We have it. This is also on a boom. Stand but I will show you that these lights here and the couple poles it’s all – I really need to get a lot of this done.

I am, though, prop maybe today I’ll do this. I didn’t like it I’m kind of getting sick of the orange behind us because I think it detracts from some of the colors, so we’re going to switch to just a gray background. We want to do maybe some color splashes that’ll be like a version 1.1. Changing the background is hardly a major change, but what’s important is the workflow and how this gets done and how the articles get produced.

So this is filming. That’s filming I’m going to splice in a little bit of filming off of this, so I can pull the whole project together and show you what’s going on, but I switch the camera on here right now or maybe I should do the GoPro I’ll do the GoPro. It’s got a better audio because I can put a microphone on the GoPro and I’ll walk around and kind of show you from the other side what this looks like.

So this is the aperture light. I know it’s kind of rigged in here that’s unfortunate, but we’re going to we’re going to put that inner right. That’s like! Shall we to do list? It’s got screw, it’s really solid, isn’t going where this is battery-powered. This is the aperture al5 tu es. So we can dial in if we need to do this, it’s on a tilts, it’s keep it plugged in. But if I unplug it like, I said it’s on battery, so you loses no brightness works really well.

This is the less expensive and hopefully the microphone doesn’t pick up too much noise shrimp. If I don’t get you close, this mic on the GoPro picks up a hum just generic cheap soft box from Amazon with for us and tubes in it, which is why it causes problems with this microphone. This I really like I’ll leave a link to this. This is the boom stand that we use for holding the camera up works really well, and this is one thing that’s really cool about this boom stand.

Let me break it down real quick and it drops down simple as that. Now it’s locked in place and then those legs fold up, so we can make it nice and small same with this. We hang the ear kind of up here when I’m not using it. That way, when we need more chairs and more places, which we keep the chairs all nice and neat kind of on the wall here. This is where all the extra gear ends up. So these are lots of connectors doodads.

There’s all our podcasting equipment, different ball heads. I really like these Joby heads they’re great, for holding things on this little case is where we put things like the GoPro and the other cameras. That’s how we do our time. Louses charging drone stuff the drones actually up there in shelf and when it’s all done, everything goes in here. We lock it that way when we have like get-togethers with random people coming in and out all the gear and all the little doodads.

No, I don’t want to be touching them. It is less I’m worried about people stealing it it’s much more, that people pick things up and touch it and lenses are super expensive, speaking of which that also brings me to this. This is my lenses, the Sigma 10 to 20, so this is for the real wide-angle shots. I really like this lens. I’ve had it for like ten years this, they call the Canon nifty 50. 50 millimeter.

It is a F 1.8. You can pick this lens up for like really cheap. It’s super inexpensive. I definitely like it quite a bit, but some of the other gears just miscellaneous stuff. You know lens cleaner stuff, like that. Maybe I’ll do a separate gear article. I do have a lapel mic in here and that’s what this is. I just don’t use it that often it’s kind of nice when you want to walk around and I get the microphone, but I don’t do that as much when I do.

These are the audio technica Pro 8 8 w RS pick these up for dirt cheap on eBay. I just dislike the fact that they use a 9-volt battery and they create a little bit of a history in the background so anytime I use it. I have to edit that out – and it annoys me, the Canon 70d itself is got the kit lens the 18 to 135, with the Image Stabilizer. We leave it off because it actually uses a little bit of battery when it’s on the tripod, but I use it.

Of course, if I’m trying to your free hand, which is pretty rare, free handing the camera unless you’re a really good camera man – which I am not that needed, so I try to tripod as much as I can. Even this has some shake now. This is just using HDMI out that goes up there. There’s your HDMI in the wall goes through. The ceiling comes back down behind the TV and it’s hard to see, but back there behind the TV is where all the lines come through to get that signal from over here to over there.

That’s simple effective though, and I like it here, is I dislike wires along the floor. If you didn’t notice, even these wires go plug in underneath and over here, so there’s nothing across our path. The only thing that kind of goes across the path is the audio cable. When I plug it into the Canon, but that’s life you’ve got a. I haven’t really found an easy solution, but that’s why we run it on this tall or boom stand from the Aston microphone up over back to the camera.

It’s easy enough for people to walk right under it, and this is that as tuned microphone, that has both the stereo and mono features low-pass filters. Some boosting the auto mode is my favorite because it automatically turns on when the camera turns on and it turns back off. So let’s turn all these things off and get to editing’s. That’s how we see where the open source comes into play and how holla’d all actually happens in case you’re wondering my GoPro setup, pretty simple: it’s a GoPro with one of them metal cages, a little hot shoe mount and the road might go and the stupid $ 50 GoPro adapter that you need to have to make this all work.

I have no idea. This is a cheap tripod that I bought all this off, Craigslist a guy who was just dumping it for really cheap – or at least this metal case. And this thing, so I don’t know what brand is some off-brand x-series, but it gets the job done for well doing what I just did with it. So it’s definitely handy for that. So for those of you see my desk before you know, I have a three desk layout, I’m going to jump to the other camera here and show you I zoom back out against the wall.

These are the three monitors, so everything’s kind of spread across all these screens, and now I’m going to insert that article into the article of me making the article now. This is actually could be showing me how to screw up making a article, because I added at the end of it and did a bunch of editing on how I did the editing and I don’t like the any of the ending of it. So I’m going back and re editing and Reese, placing just the ending of it.

I realized that I was a little bit too zoomed out trying to show three screens it’s how I edit and that didn’t portray well at all on YouTube. You just couldn’t see what I was doing, so I’m going back to dragging everything. So this is the three screen layout with well there’s different layouts here. This is a three screen layout. This is how my layout actually looks when it’s in process and then working.

This is a preview window on one side, but obviously this is really hard for you guys to see. What’s going on, I realized after I recorded me editing, but the article is edited, so I’m just going to cut out the end and redo that part. I tried it like this, and this is also hard to see what I’m doing so, we’re just going to drink everything to the middle screen and get rid of the webcam, so you can see what I’m doing for the editing parks this.

This is the hard part to show because there’s a lot that goes into editing, so I showed some of how I copied files and things like that, and that’s I thought maybe the interesting but maybe not imposed so I do is I’m done. I kind of proof most of my articles I try to prove from, but we’ll just bring over here and show you what I do so here is the editing part that I didn’t like this is going to get deleted.

Here’s all the stuff that came off of all the cameras I use so I had my GoPro. I had my screen capture, which I’m doing again right now, which was called. Finally, I just named it that you know my naming schema. That’s whatever makes it work for you, but what I will talk about is a couple little things, so one of them is – and I’ve talked about before I use sync thing: singing is backing up my article folder continuously, as I drop things in here.

I’ve did a whole article on that and whatever your workflow is making sure you have a solid backup. I like automated backups, specifically using the syncing tool and it backs up to my FreeNAS continuously, so it’s on my hard drive it’s backing up over to there. So that’s getting copied over then we just drag all these files, which I’m not going to direct them again, but you just drag them all in a kdenlive and then we drag them all to the tracks and I’m holding the ctrl key zooming in and out.

I got a tutorial on how to use Kate and live, and you know putting all this together now I started the intro of this article with a little classic 8-bit song. Let me see if I can change the view here so there’s my little preview that I dragged right there, so you can see going through editing the normally I edit on the other, monitor but, like I said, there’s not an easy way to 40-percent a dual monitor Layout it just unless you have a 4k and I export this at 4k.

You wouldn’t be able to read all this, but this is me cutting between all of them. You line up the audio, you get it all say: okay, here’s the audio! This is the GoPro article. This is the main camera article and it’s how I cut between them for the overhead shots and then I’m using OBS at the end, which I’ll drag my OBS screen over here, which it just goes to infinity, because it’s recording, OBS, recording, recording, OBS, recording and makes Kind of a cool effect in the background – and it OBS, is how I do my voiceover, so I got my setups here and this is what it looks like back on a three screen layout.

So let’s do this view. This is actually how it looks. I’ve Shrunk the screens over here, just going to give you guys an idea and a view, and all the voiceovers are recorded on a Yeti microphone in my little office with soundproofing here and very important soundproofing on the other side, because your voice goes this way. It reflects back so the back is to get rid of sound reflection at the back and the front and get rid of the sound reflection in front to kind of keep a dead area for the voice-over work.

But you know these tools are all free and open source and wonderful. Kdenlive is great OBS great cobia, cisco cross-platform, and someone will ask this kdenlive. I know they are working on a Windows version. Sorry, I’ve tried it that doesn’t work very well, it’s once it’s all done we’re going to render in process and then we jump over to GIMP and I have a template saved here in GIMP. That’s got the little black bar at the bottom and then I just go on the web and literally like the Canon 70d I typed in Canon 70d transparent there.

It is there I typed in Kaden, and these are just google image search while she this one didn’t need to be. I went to their website and it’s part of that’s their logo. Author header, I just grabbed it and you can actually just go copy image. Edit paste new layer – and you can get things added on there just like that and GIMP GIMP – is not as easy to use as Photoshop. It’s been a struggle because I’m a Photoshop guy, so I started learning it.

But if you started out, we get there’s some great tutorials you can find on it. I’m not good enough to make a tutorial on it, but I will tell you: I’ve been doing my thumbnails and everything for quite a while and editing the basics like what you’re seeing here in camp, and it’s worked out really well for me. So it definitely definitely can be done and once it’s all done, cuz GIMP saves in its own special format.

We file we export this and I called it how we make youtube articles, the gear and the process and the open source software and, like I said like going in-depth on the software, I have a tutorial on kdenlive already. I don’t really have one on OBS, but it’s maybe I’ll do one at some point. Obs feels almost self-explanatory. You just keep adding the different scenes like the webcam and then that’s what all these are.

Some are just microphones middle screen, webcam just left screen right screen. All my screens with me at the bottom and then you can just go here and if I want to put myself in the middle for this, but this is well technically. This is where I sit, because this is the the layout you’re seeing above is my three screen layout. That’s in here, so hopefully this was helpful kind of give you an idea how we do this.

I will leave links below to the tutorials. I have on how to use kdenlive how to get started with kdenlive in editing article. That’s probably the part break people find the most challenging recording stuff with OBS load it it’s pretty straightforward. Maybe I’ll do a specific tutorial on there, but OBS is a great way to do screen capture. I might do a specific review on a 7, but there’s a lot of mouths to die.

Cameras been around since 2013. So that’s it’s a I’m still happy with it’s a really great camera. I don’t really people like oh go, mirrorless yeah cool. Maybe I have the 70d. I don’t plan to replace it until it breaks. So, for now it’s a great camera and it’s not about the camera. It’s about coming up with teaching someone something the story, and the narrative is much more important. The tutorial the knowledge sharing is important.

1080 seems good enough for knowledge sharing, at least for me. For now, if my thought, my knowledge would look better in 4k great, I don’t have a 4k monitor and statistically most people don’t either. I know it supposed to be future thinking, but especially tech stuff. I have to keep producing because all this is completely irrelevant. Privation. That’s generally how it works. Hopefully, you found some of this helpful.

Give me an idea of behind the scenes how we produce YouTube articles, how this works. You know if you like to count in here like and subscribe. I will do my best to reply to all the comments. I’ve complained before about YouTube comments. Sucking I don’t see all the messages, it’s a YouTube thing. I’ve talked to other youtubers are the same problem. We also have the forums to help alleviate that over on Facebook links are below plus all the gear links and some of the details of all the stuff we use will be in here.

So hopefully this was helpful. I have a great day and enjoy get started on this open source. Editing if you’re interested in this I mean go, get these programs are free, start dabbling and playing and read my other kdenlive tutorials to get you started on this part of. It says the article edit, the press record, is easy. The editing I won’t lie. This is some this little effort that goes into this there’s a learning curve, but I think it’s worth it.

Thanks.

Videos are truly an awesome way to get the point across. Any type of content from your business is important!

Online Marketing

Music production with open-source software and Linux?

Post author By Jimmy Dagger
Post date June 18, 2020
No Comments on Music production with open-source software and Linux?

.., 還有混音的決策, 這些全都在你的掌控下, 而你使用什麼DAW或者功能插件只扮演了很小的角色, 我有超過十年的電子音樂製作經驗, 我可以同意他們這段說法, 你不會看到開放原始碼軟體被宣傳或者被行銷, 但是它們的能耐已不能再被忽視, 例如說：3D動畫業界已不能再無視Blender, 的存在, 它是一個功能齊全的開放原始碼3D動畫製作軟體大包裝, 我認為音樂產業也會發生一樣的事情, 我相信我們正在開放原始碼軟體革命的浪潮上, 這個進程可能有點緩慢, 但是每一年，開放原始碼工具集都會變更好, 更強大、更滿載的特色, 以及更為多樣性, 開放原始碼的世界有許多強力DAW軟體，像是,.

.., Ardour、LMMS、Qtractor, 以及驚人數量的虛擬樂器與效果器插件, 即時Loop工作站、, 電吉他綜合效果器、, 取樣機、合成器吉他六線譜軟體和製譜軟體（五線譜）這些全部就都在那裡！現在正等著你來探索與使用它們又不花你任何錢只需要花費時間學習（RTFM=請先好好閱讀手冊）, 一旦你學起來，你就自由了, 此外，支援Linux, 的原生商業專屬DAW, 軟體數量也在成長中, 例如Bitwig、Renoise、Reaper、Traction, waveform, 或者, Harrison mixbus（商業版Ardour ）, 這顯示業界開始意識到Linux, 是音樂製作的可行平台, 如果你要嘗試用Linux, 有一些偉大或說特殊風格的Linux, 發行套件, 人們界定它們為特化於音樂製作的, 這些發行套件已經預載了大量適合的軟體讓你好開始, 而且也幫你做好一些設定，讓你好上手, 它們都可以從USB隨身碟或者附加硬碟開機, 所以你可以實驗性用看看而不用擔心影響到原有的系統, 我以前其實就是這樣做了很多測試以後, 才真正把Linux, 安裝到硬碟成為預設的開機系統, 而且,.

.., （噓～小聲）, 你可以透過Wine, 安裝FL, Studio, 到Linux, 系統上, 我聽說運作起來還不賴呢, 說到現在，你可能懷疑,…, 我幹麻要這樣作？, 我為什麼選擇了只使用開放原始碼軟體和Linux, 明明有那麼多優秀的商業專屬軟體可以使用, 甚至包含在Linux, 上可執行的商業專屬軟體, 告訴你吧，因為我相信開放原始碼是這個世界應該走去的方向, 不論你的收入是多是少，它允許任何人進一步開發與施展創意, 這也是通往真正擁有我們軟體之完整掌控權的道路, 沒有人可以在一夜之間把你的軟體變成訂閱商城或強迫你升級甚至扣住你的資料而在我們這邊，沒有人作「產品」你擁有這個軟體，我們也擁有這個軟體這是我們「一起作的」（自由軟體之歌, Free Software Song, ）我已經嘗試、測試了許多年非常榮幸地我想要宣佈, 開放原始碼軟體生態圈已經夠完美, 能同時應付業餘/專業的音樂製作與音效設計的工作流程, 過去幾年我釋出了數張專輯唱片證明了這點, 身為藝術家，我和開發者攜手合作讓軟體更好, 我也示範了我音樂製作的工作流程, 我分享了以開放原始碼軟體作音效設計的技巧與創意, 在這裡我想要助長開放原始碼系的音樂製作社群發展, 我認為開放原始碼讓世界變得更美好, 所以，我邀請你來瞧瞧我其他的影片, 希能啟發你咬緊牙關破除束縛你的鎖鏈, 而成為我們社群的一份子, 謝謝觀賞，我希望這個影片值得您看, 我也感謝Patreon, （創作群募平台）上的支持者，他們讓我能順利地製作像這樣的影片, 如果你想加入贊助的行列，讓系列節目能繼續製作下去, 請到, patreon.

Com/unfa, 這次就講到這裡, 現在去吧！, 去作些音樂吧～,

Videos are truly an awesome way to get the point across. Any type of content from your business is important!

Tags ardour, AV Linux, gnu/linux, kxstudio, libre music production, Linux, music production, open-source software, Ubuntu Studio, unfa - Suppressed, unfa music, unfa vlog

Online Marketing

Top 5 Graphic Design Programs (Open Source / Free)

Post author By Jimmy Dagger
Post date May 12, 2020
No Comments on Top 5 Graphic Design Programs (Open Source / Free)

These programs are Inkscape, GIMP, Scribus font, Forge and Daiya, and each of these programs is completely free to download and use for both personal and commercial use. They are all open-source software and all of them work on Windows, Macintosh and Linux operating systems.

If you want to download these and try them out for yourself, you can find download links at my website. Tj free com. Let’s take a look at this first program Inkscape, which is a program very similar to Adobe Illustrator. So it will. Let you draw an edit art in there, that’s vector images, and so it gives you a lot of control over those vector images you can. You can actually with vector images if you’re not familiar with them, they can be scaled up into large sizes without becoming pixelated, and you can do all kinds of really cool stuff.

With this program, I’ll show you an example of some art ooh. This is the art of some art that can be created using Inkscape, here’s example of a guitar, and once it’s all drawn up, we can quickly change the coloring and that keeps the lighting and shading. Another example is of working with layers in Inkscape. We have these different layers of this tooth animation and we can toggle them on and off.

We can lock them or unlock them so that we don’t accidentally select them while we’re working with a different layer. So it’s a great tool, lots and lots of good features and tons of different applications. This next program, GIMP, is that bitmap image editor is similar to Adobe Photoshop, and it has a lot of the same functionality that you’d expect to have with in Photoshop. It can do some pretty cool stuff.

I’ve covered it in some of my other programs, so I’m not going to spend too much time on it, but you can apply different effects and layers and filters, and things like that. I won’t do one because it might take too long on the article, but it’s a good program. You can also just create art from scratch. Oh I’ll show you here too, you can work with transparent backgrounds, which is cool. You can remove the background like if you want to create a product product image, and then you can then just fill the background with a solid color, so good program GIMP this next one Scribus is similar to adobe, indesign or quarkxpress.

It’s a desktop publishing tool and you can use it to create books, calendars, business cards, anything that has printed text basically, and it gives you a lot of manipulation over that text. So we can come here. Let’s go to this one here. This is the cat’s in the cradle that picture that one of my images isn’t coming up. But if I go to edit text we can see it lets you have a you, can have different style sheets, so we have a mmm, always that is centered, but so the title has its own style, that the author has its own style and then, if we Change, I can then change the style and it will change it on every page you can so you can collectively edit the footers and the styles of multiple pages at once, without having to go through and physically change it on each page.

Just one of the many features you can do drop caps, it’s great for creating, like I said anything with printed text this next, one font Forbes for Buju is a program for editing and creating fonts. So, for example, here we have I’ll grab the toolbar over here. The letter R we can edit this font and do some different kind of things with it. You can also create fonts from scratch. It’s compatible with several different font formats and you can actually use it to convert fonts from one format to another.

So it’s a good tool: font Forge this last program. Daiya is a program for creating flow charts and diagrams. For example, we can just very quickly sketch up a diagram and then linked ideas together, and it gives you a lot of control and manipulation over how this diagram works, and you can put text we can. We could write text inside this, this box, if you wanted to so it’s great for expressing ideas, but also, if you’re, a designer or into architecture or things like that, it’s got all kinds of different presets like here’s electrical.

So if we want to put in some electrical symbols and create an electrical diagram, we can do that. We can import a background image and draw the these elements on top of it, and you can create your own, your own symbols too, but it’s got a lot of different a lot of different things that you’ve added Cisco Networking. You could do a Cisco network diagram, so good for network network diagrams, make these bigger and see what I’m doing here so cool program, lots of different features and applications for it as well and really quickly before we go.

I want to show you this program. G pic it’s a Windows and Linux only program I think, and it’s, but it’s also open source and it’s a color picker or a scheme jet color scheme generator. It will help you when you’re, creating art, help you find complementary colors. When you find them, you can just double click them and it’ll put them over here in this color lineup that you can then export and use with programs like GIMP and all these ones.

I’ve showed you today, I think, are compatible with these different palettes. You can also use them too. You can drag and drop. It’s not letting me do it because of this screen. I’m doing a screencast right now, but you can come over here and actually apply these colors to a sample webpage or a sample menu and figure out. You know which colors are going to be best for that, so it’s a color picker and scheme generation tool and that’s again, that’s G pick well, these are the programs I want to share with you today appreciate you reading um, if you’re interested I’d like you to Check out some of my other articles, where I do some web design tools, I also have 2d and 3d animation tools so check out my other articles go ahead and comment and subscribe if you’d like to – and I hope you have a wonderful day –

Need a logo????

Online Marketing

My Open Source Editing Workflow Using Linux, OBS, Kdenlive, Gimp & Shutter

Post author By Jimmy Dagger
Post date May 11, 2020
No Comments on My Open Source Editing Workflow Using Linux, OBS, Kdenlive, Gimp & Shutter

I’ve been using it for a while. I want to do some more tutorials on it. The problem is, I don’t do a lot of complicated things with kdenlive, as I’ve been a little bit slow to get more tutorials out there. It’s a wonderful article, editor! It’s really easy to use it’s very, very powerful, and I’m going to show you a little bit of like my editing setup and how I do things now, I’m actually using right now, OBS 3 chords, so OBS is part of my workflow.

I’m going to drag it in here, so you can kind of see it if you’re not familiar with OBS. It’s a pretty amazing program. It’s free, it’s cross-platform! So if you’re a Windows user reading, my articles, you go, how do you do your screencast and recording OBS? You can use it in different platforms. Now I have it set up with different views like middle screen, left screen right screen, and then I have three screens without me in it and three screens with me in it with a webcam here.

So I got the webcam at the bottom and because you’re seeing OBS it’s not behind something you’re seeing some recursion of you know infinitely looking down into it. I record all my OBS streams and the Yeti microphone that I have up here been using it for a while. You can pick up Yeti for pretty reasonably priced. Is that the thx model? I think you can find these under $ 100 on eBay. I bought this one slightly used.

He still came in a box that said refurbished, never had a problem with it. I got it won the bid really cheap on eBay for him, so they’re a really high quality camera great for doing these voice recordings – and you know if you want to do YouTube articles having good camera, are having a good microphone really important. The camera is just a standard, logitech, hmm, the name of it C 720. I think you can they’re not expensive, nothing, real special about it and some lighting setup so back to the actually editing and workflow.

So right now this is being recorded with OBS, but we’re going to first go start with a project that wasn’t recorded and it’s one that was done with a series of articles that I took at a Chamber of Commerce event. So I’m going to leave it with all three screens pulled up now something kind of strange about kdenlive when you are out of focus on it and versus when it’s in focus. It has the third window over here.

So I’ll play the little thing that I did here and I’ll show you what I did to create this. So in my preview, clips are still here in the middle, but I drag it. So I have a big high res screen over there to view the the output, so I want to be able to look at it in high res, so I can kind of understand what it’s doing so you know I this was a little car bash event. They did so then we got Marvin there.

I threw with a little title at the bottom and then I cut while he’s talking. So you have the narration here and all these other clips are muted, so we create the whole effect, and what it’s doing here is all the clips are named right in here smells zoom into the middle screen now and the way they had the way they got All these names was – and I just drag them and drop them in. I download all the clips right out of my camera.

I play each clip and figure out which ones which you know, which one that so I had one that’s called bacon beer beer twos. I took pictures of beer cans, the DGA ones. I don’t need a name. I know DJ as my drone article, so I had two different drone shots that I included in this and then I have. I have one I labeled narration and he’s two. They were kind of useless, so they didn’t even get named. They didn’t get dragged into the project and in all you have to do from there drag over the files.

Let them go on top of there and then they’re here and then you can preview them and figure out. Okay. Where do I want to start so I’m going to drag one way over here and I just drag them in and I’m going to go back to the three screen mode. So you can see – and I drag it figure out – okay, where’s it going to start, and then I put that at the bottom tracks. That’s four they’re going to be for the narration part.

So that’s this bottom track that you see here and with the bottom track. That’s the whole narration, then each one of these I drag the mute over to so like I have have this one. The effect is mute and the way you drag effects on there is really easy. You just go over here, mute and it’ll double up a fact. If you want to apply effect twice because at two different ratios or anything like that, that’s easily supporting kdenlive, so I’ve mute all these other top ones across here.

This is the title clip and in a title, clip is just their logo for the chamber of commerce. That we put on top now this is where, when you’re doing the interaction to make sure it kind of, let me put it the three screens, so you can see the preview or I’ll just put it there we go so I wanted the it to fade over Here so it kind of fades in and out and then fades away now, there’s a little trick to doing that when you’re setting up the fades, when you want some of the things to come over the top on there and the way you’re I’m doing that is The dissolve is what I’m doing so.

I did a dissolve, but you have to choose what it interacts with. So it’s interacting with article because article is over the top of the narration article, but on the last part I have it interacting with article one, because I want it to dissolve into that article because they’re at different layers on there. So you got to make sure that so this one dissolves there, this one’s a solitaire, pretty easy to do and then, with the title clips they are – and I didn’t name this one because there’s only one but there’s multiple title clips, where I want to put an Overlay things on there, you just take and drag a PNG in here.

Woofster not drag it because it doesn’t support drag-and-drop. But you add, image find the PNG which I threw in there. Their logo is actually a PNG and her website just downloaded it and throw it in there, but you can use any other tools to create and manipulate the photos, drag the put the PNG in air and then to give it some contrast. I just drew a rectangle with the rectangle tool up here, so you can just add a rectangle and then you can set the color of the rectangle and the Alpha blend on it.

So I didn’t want a solid rectangle. I wanted a semi-transparent and then I wanted it underneath, so you can go up here to the top where it says, Z, index and hit down, and it puts it at the very bottom. So let me cancels, I don’t really want to make that change to this. So it’s pretty straightforward and then you just drag a few fades in here. So I fade between all the different cuts as it goes through and Marvin.

You know, Nick isn’t doing the narration at the bottom and when he mentioned something. So I listen to the narration and where he mentions things I at that point a shot of it, so he talks about the beer available at this event, so we cut to the beer scene. You know other time, it’s when he’s not seeing anything. That’s visually relevant! He’s talking with his hands a little bit then I’ll reference back to the drone shot and that’s what these are here.

So I can reference the shots. I got there. He mentions word bacon, so I reference to the bacon shot here. So it’s pretty straightforward when I’m doing the editing – and you know it’s not not real complicated, so I haven’t unloaded tutorials, it looks a little bit complicated of all. She was dragging across time lines and doing there. I don’t really do much more than some dissolve fades and things like that’s just to get the point across because you know there’s plain people are really good at editing.

It really talented and they’re do so amazing stuff. I just really haven’t taken the time to do that, because, as long as I get my YouTube articles done I’ve kind of stopping okay, that’s good enough for now. Maybe I learned some advanced stuff later now. I’ll show you a little bit of how we do the OBS ones. So when we do the OBS ones and say no, but I can save any changes on here. You’ll notice that the article is split, then the reason why and if you can see this it says offset 5.

There is a 5 frame delay to get the audio synched up with this, and the way you do that it’s actually pretty easy. Someone start a new project and show you what this and the five frame delay is because I run a 30 frames a second and when I record with OBS, it seems to cut the audio I’ve played with the delay settings inside of OBS didn’t work. It’s not it. I it’s easier to split. It split the audio so when I first get something done in OBS, a my OBS folder here, where it records things well drag see which articles this one yeah, it’s one of you, so I drag it here.

I think you right-click on the article and you’re going to say, split audio and then it’s quicker. If I do, I use the mouse and control the zoom in all the way. However, you want to zoom in it doesn’t matter and I’m going to ungroup the clips. So they’re now two separate entities and then I count frames 5 frames over just drag this and I know it’s a 5 frame upset. Now that’s going to vary based on your system, your setup, your computer, but this is how you split the audio out.

If you need to for OBS, because it’s annoying, if the voice isn’t synced up with what I’m doing, that’s that’s a weird thing like reading someone talk but the audio it’s. It is really annoying. I’ve accidentally done it a couple times tonight publish articles. So I try to be very conscious and do this so once I have this and then you select the clips again hold the control key, just like both scripts and then I go ahead and group the clip back together.

Now the reason you group it is because I’m going to start slicing and dicing in here, so I go to the cut tool and I’m going to slice out the beginning doesn’t say nothing. I just usually let it you know, start scrolling and get myself composed and start playing a article but other times there may be another clip you go. I don’t want this in here, so you take that out. If I didn’t have it grouped, I would be happen to line up and drag this, especially if I did something like this and put another article in between or anything like that, you want to make sure that this stays aligned.

That’s, why did the grouping of the clips? So it’s really straightforward for editing like that and most of the time when I’m doing these tutorial articles, you know on firewalls or anything like that, where I’m using OBS as a screen capture. I just go in here and clip out things that are irrelevant: I’ve, readed the peeks and say. Okay, can I cut this out if I really paused her um, it’s one of those things like okay.

There’s got to take this part out now. Another thing I do maybe notice, maybe you don’t – I leave long pauses when I screw up and then I cut it out and try to remember where I left off and I think I get it pretty accurate, but I part of the quality testing I’m doing is Going through here and making sure that okay, is that good or not like okay, I screw that up. I said this wrong, so I’ll leave a long pause, so I don’t have to start the article over and that’s how I know.

That’s the Edit point. The other option is going through and writing down the minutes and seconds. So when I did something the hardest part about that is, when you start clipping things out of beginning you’ve, now offset the minutes at the end, so kind of my recording tip I do screw up. I don’t just rip these well. Sometimes I do. If I get lucky rip them in one set, without any pauses, without any stopping without any breaks but a lot of times, but there’s pauses, there’s breaks, there’s me pausing to make sure I pull up a screen off to the other side and look at the specs.

I sometimes put a couple notes if I could have to read detailed specs or like a CV, vulnerability or some some really specific detail that I want to make sure I’m accurate on how long she pause, and I got my phone in front of me and I Look at the phone read the number again and I just leave a pause in there. That way. You know we cut out the pause cut out me looking at the phone and keep the article going also a few sneeze, or something like that.

This is helpful. Just leave a long pause makes it easy to find in the article – and I know, there’s at least one long pause towards the end here. I think in this one. No, maybe not, but I just look for those that way. You can just quickly find the spot that you paused and cut it out for editing without having to start the whole project over. So that’s kind of the basics for how I get the article done, how to beat the article recording nothing real, complicated there.

The next thing we do is I’m going to grab a screenshot of things to build. My thumbnails, because in YouTube is important to build good thumbnails, because you want them to be contextually important, not just randomly generated. Cuz YouTube will pick a frame and you know it didn’t let you choose, but that’s not the best way to do it, and I used Photoshop for the longest time today and I’m still not a big fan of GIMP.

But I got good enough at GIMP in order to make this happen, so I bust up my trusty screenshot tool. Let me pull it up, put it over to the right window here and I grab a screenshot of whatever we’re doing so I’ll pull these up. So this is just a screen grab from it. So what I’m adding – and I mean put it back to three screen frame – real quick. So too I say: okay, maybe I want that screen. You’ll see it over here on the right and then I just use the screenshot tool, and I have it set on timer on purpose.

I’ll show you why and now that has grabbed a screenshot. All of that and then I can quickly edit the screenshot. If I need to do something in here, like you know, put an arrow or something things like that, this is now the first piece of it, so I grab screenshot now the other time. The screenshot tool is really handy and, and the reason it’s not a countdown as if I have to show you a menu for something.

So if I wanted to show you the control menu here, we are going to go ahead and grab a screenshot, and I want to grab it of this enter and a delay reaction of the reason I have it set to a two. Second, timer is so then I can grab a screen grab of something like a menu or a context. Menu just have to help some websites where I want to show something in motion so to speak, and you hold it open to give you the idea of that.

It’s there so that’s kind of the reason for the delay. All the other things is so the mouse over when you do drag it over, doesn’t get kicked off, and that can be a pain in about two. Like I mouse over on a YouTube ad, where you get the tile, I only want to screenshot to the YouTube article in stead of the little the play button and things like that. So, by doing it and letting it fade for two seconds, it’ll fade out the tools on there now, the other way I do this is and grab a window and drag it over here is you know, needing logos for things and stuff like that, so Google logo And we just do a quick image search.

So if I’m talking about a company, I can just grab their logo from them this one’s animated. I don’t want an animated one and I can either use a screen grab or we’re going to show you how I do this in GIMP. So let’s open up GIMP real quick. So I pretty much don’t use GIMP for anything about this. So here’s the clip I made for that a citroen research, article and everything’s just a series of layers, so I don’t touch these top layers that I have in here.

There make sure the webcam is out of the way these top layers up here. I don’t really mess with so we’re going to go ahead with this one. I see it says: citron exposés, that’s the text layer. This is my logo. This is a bottom template and then here’s the clipboard one clipboard. So we’re going to purge that clipboard purge that clipboard and if we want to edit the text I just go down here. My article editing workflow will actually do this article.

Why not? Well, I can’t really give you the screen grab for it. Well, I could do some things I’ll do a couple things here, give you an idea. So my using Linux and Cayden live. I got small things right, see Linux. We need some commas in here Linux and comma kdenlive kind of a gimp imma was the screen tool. Shudder so well I’ll finish this, I’m just going to make sure you guys have an idea now, along the way it keeps a crash, doesn’t seem to be pretty stable, but it doesn’t crash often so I saved that now KJ.

I want to put more things in here, so we’re actually going to downsize the text a little bit like this and put the word using here then I’ll go down the bottom using git and shutter. I pretty much the tools I use for almost all my articles and hang up. We got a head OBS in here, OBS put a comma alright. Now a Vinci. Now I got ta go pull the logos for those things I kind of like. I said I like having logos on there.

This is where it gets pretty easy for doing this and GIMP, and normally I do this on my split screen. Tiles. Keep it all in one screen for you, but let’s say we want a few kdenlive logo getting live view image and it’s a PNG file. You can see here so we’re just going to go copy image go over here to get edit paste as new layer. Simple really easy to do now. This is where it gets a little confusing.

Normally I’m used to Photoshop, where I can just grab bars around it and resize it. You have to use the scaling tool and GIMP and then, by default the scaling tool isn’t synched. So I want to synced, so if I do scale it it, I don’t want to screw up the logo like that. So I’m going to do this. Do this and then I can adjust and scale it. So it doesn’t skew the logo into some unusual sides and I click scale and away we go.

Then I go back over to the this tool. Then I can manipulate it move it around wherever I want. So you know I’m just pasting each one as a new layer, so I don’t have to download it off the internet or do you think that which is actually pretty handy, so I can just go here now: we’re going to have the OBS logo like this one. It says open broadcast software copy image, edit paste as new layer. Oh someone knows a shortcut key to paste this new layer.

Let me know, because I see how it there ctrl shift V pastes it, but it doesn’t do it as a new layer doesn’t do what I wanted to do so yeah that so one of those little details, if you know some shortcuts, if I’m doing something you Know, hey Tom there’s a better way like I said, I’m still, learning GIMP and still getting better at it. I want to keep everything in Linux much as I can because Photoshop real easy to do this, and I would probably I could do things so much faster in Photoshop and I’m putting some effort in here to learn kemp.

So then we get the OBS logo shutter logo, but you get the idea that you go through here and then that’s how I create the thumbnails now the other step, that’s going in their face. This new layer move this down here. The other step is exporting it now. It saves it in a format. That’s a GIMP format, so you’re not able to do that, and I don’t save my thumbnails. Like you see, if you see the name at the top here, it’s YouTube.

2017 template GIMP dot. Xcf! That’s the GIMP format file for that it’s 1280 by 720, which was the recommended, as I understand for 2017 size for a thumbnail for YouTube, and so when I’m done, I export it and I title it workflow for editing in Linux, and I just dropped that to My data drive, I have a bunch of different folders and things like that, but I drop it right to the data drive and hit export yep at standard PNG format when it’s done and then when I do my Youtube upload I go through and you know render To article export the article to the article folder and then this I don’t really keep a lot of my.

I don’t keep any of the templates like once I edit this and I edit and save over again. I keep the output results because they’re not that important. I rarely go back to a thumbnail and go oh man. I you know want to redo this thumbnail, so I’m not big on CV to save all of them. Then I realized I just had piles and piles of everything, and I’m like this is useless. The same with the articles right now, I’m only keeping about 6 months of source, so the source material that went into it unless it was a special project that I think is worth saving most of my articles.

I do not keep the source for for lack of knowing what to do it that I you was archiving it at. You know you’re you’re, creating terabytes and terabytes a day. I don’t know it’s like. I could. You know I’m very big on redundancy. So if I’m going to save it, I save it everywhere. I make double copies and then, when you have like 9 terabytes double copied, you’re like I now have a harddrive collection and what I’m going to do with all this source footage.

I save only the output footage of and one of the reasons. Why is, for example, when I do my larger projects with clients that go on, for you know maybe a few months well like a big wiring job we end up with, and it’s funny things we’re producing a huge volume of data with all the time-lapse cameras. But it’s not only useful, we just shoot it all, and then I organize it all and say: what’s worth keeping and the rest of it, you can’t scrap.

Sometimes the camera looked at nothing for a long time or it just was not interesting. It wasn’t worth adding to the article, so I come back to it and I go yeah. This isn’t uh. This isn’t really worth keeping. So that was a lot of what my source footage would be, so yeah hardly became worth duplicating. All of that now a little piece of my workflow, though that is going on actively because of the fact that some of these projects take weeks to complete all of my article folder on my local computer, is synced up with sync thing to our rate array.

Just for all my articles, so even as I save this, it’s resyncing as I render it out any of these articles – it’s resyncing it on there as I download cards. It gives me confidence because a lot of people have done this, where they download a card to the computer and they go alright. Now I’m going to use this cardigan somewhere in between before you get around to editing before you before you get to back up the hard drive got here in computer.

Now, you don’t have either you’re like crap. I lost it all. So in fear of that I win, you know because my computer’s, it could be a single point of failure. It’s just constantly, as my computer’s running syncing everything to the server, so I don’t have to think about it. So I don’t mind dumping a card and reusing it, and I have several cards. I try to hold on to them until they’re edited, but sometimes I got more stuff to shoot and it’s going on for weeks.

So that’s kind of the general editing workflow for this and then when I’m done, I just you know upload it to YouTube, which I don’t think. I need to show you how to do that that part’s, the easiest part of all this, but you can see quickly. You can build these little templates and this is all open source. This is all you know: kdenlive gimp and shutter running I’m running this on academia, but you can run this on a bun too or most any other Linux distribution of your choice and it’ll run pretty smooth on there.

I’ve really been happy with how it works in kdenlive or KDE neon and kdenlive. The themes seem to work really good together and it’s been just smoothest, so the latest iterations of Keaton live have become very, very stable. Like the software, all the editing work, I used to be like a religious, a verse, a verse clicking save all the time, and I don’t have to seem to do that. It is often because it just doesn’t crash like it used to but uh.

That’s it for kind of my workflow and how I get things done. I guess I could show. I got another one of how to clean up audio in audacity, I’m not going to get deep into audacity in this article. I have another article already covered doing some of the audio cleanup, but if you have a good microphone, not much of a need for it. The only time I’ve ever had you already clamp is when I, when something gets messed up and there’s like some background noise that has to be edited out, then I will break out audacity for that and that I did a separate article already and I’m not going To cover the topic again, but the pro tip on audacity is: you can actually support your tracking job, so you can actually take the article you edit it and drag it right on top of audacity and it’ll import, just the audio, then you can process it export.

It and I, in that article, I believe I left the script. You know elevate blow to it, that you can reemerge from the command line and put them back together or you can, if you want split out audio and then import it back as a second track. So I had some audio that was really tricky to edit, so I actually pre process the audio in audacity and then merge it back together in kdenlive and you can drag audio files and kdenlive and they work just fine.

So hopefully that gives you an idea of the editing. I do if you have questions comments or you think you’d like me to expand more on one thing I other than the little tutorial I gave you that’s my basic usage of GIMP. I have not gotten much better than edit. I yeah. I did it’s it’s a lot for me to learn still because after using Photoshop for at least 15 years, maybe longer probably longer, I think I started Photoshop.

Oh yeah, it’s 2017, so I started learning Photoshop. Like 99 98, so after spending that many years in Photoshop, it’s not that it’s GIMP, just it’s a very different environment, so I’ve done everything I can to make it a little bit more photo like find all the equivalencies. That’s usually I do. Is I start with how to do this and GIMP like Photoshop and some of the YouTube searchers there’s a few youtubers out there that have some great compute GIMP tutorials that are really well done and very very well.

So look for those if you’re fighting you can usually find a good tutorial on yep of how to get something done, and but this is the basics of I figured out how to do the layers. I heard I’ve had a right-click and drag in there, so I can quickly create the thumbnails and get processing done. This also allows me to get articles done really fast, because I don’t have to spend a ton of time jumping between virtual machines, like I did before, with okay, how to spin up my virtual machine just so I can run Photoshop, so I can get a thumbnail Made you know anything that adds to my workflow time cuts down time, that’s just not as productive so but happy to get it all in here.

Alright! Well, thanks for reading, if you like to Contin here like and subscribe and have a great day,

Videos are truly an awesome way to get the point across. Any type of content from your business is important!

Tags kdenlive, Linux, obs, Open Source, Video Editing Workflow