Your PWA is still a webpage that customers can find in their usual ways. You want to apply reasonable search engine optimization and ensure the page is available to search engines. You can use JavaScript on your pages and Google will index it as long as you follow some best practices. You can use the fetch as Google tool from the Google webmasters site to see how your app looks when crawled discoverability helps get customers to your site.
But how can you measure their behaviors once they get there? That’s where analytics comes in Google Analytics is a service that collects processes and reports, data about an applications, use patterns and performance. Adding Google Analytics to a web application enables the collection of data like visitor traffic, user agent, the user’s location, etc. This data is sent to Google Analytics servers where it’s processed.
The reports are available in the Google Analytics web interface and through a reporting API, Google Analytics is free and highly customisable. Integrating Google Analytics is simple. First, you must create a Google Analytics account. Each account has properties, and these aren’t JavaScript properties, but refer to individual applications or websites. Google Analytics then generates a tracking snippet for each property.
This is a piece of JavaScript that you pasted into your page. It sends data to the Google Analytics back-end. You can also use the analytics library to create custom analytics, such as tracking specific user actions or tracking push notifications. I want to say a bit more about properties. An account has properties that represent individual collections of data. These properties have property, IDs, also called tracking IDs.
That identify them to Google Analytics if an account represents a company. One property in that account might represent the company’s website, while another property might represent the company’s mobile application. If you only have one app, the simplest scenario is to create a single Google Analytics, account and add a single property to that account. This is the key part of the tracking snippet.
The entire snippet needs to be pasted into every page. You want to track at a high level when this script runs. It creates an async script tag that downloads analytics AS the analytics library it defines the GA function called the command queue. It creates a tracker that gathers user data and it sends this data as a pageview hit via HTTP request to Google Analytics. This data is analyzed in stored in your analytics account.
In addition to the data gathered by tracker creation, the page view event allows Google Analytics to infer what pages the user is visiting, how long they are visiting them and in what order for simpler applications. This is the only coding required note. You can replace analytics GS with analytics underscore debug KS for console debugging. Using this version will log detailed messages to the console for each hit, sent it also logs warnings and errors for your tracking code.
The data is sent to Google Analytics backend where it is processed into reports. These reports are available through the Google Analytics dashboard. Here is the audience overview interface. Here you can see general information such as page view, records bounce rate, ratio of new and returning visitors and other statistics. You can also see specific information like a visitor’s language, country, city, browser operating system, service provider, screen resolution and device.
Here we are looking at the user City, it’s also possible to view the analytics information in real time. This interface allows you to see hits as they occur on your site. I encourage you to take some time and explore there’s an extensive set of features in the dashboard. You should explore the standard reports and look at creating your own. Knowing how to use analytics for improving your business or increasing revenue is a skill within itself.
Fortunately, the Google Analytics Academy offers a free set of online courses. Google Analytics supports custom events that allow fine, grained analysis of user behavior. This code uses the G a command Q, which is defined in the tracking snippet. The send command is used to send an analytics event. Values associated with the event are as parameters. These values represent the event, category event, action and event label.
All of these are arbitrary and used to organize events. These custom events allow us to deeply understand user interactions with our site. For example, here we are sending a view more event. This might be used to indicate that the user has viewed an item from our site. The event label tells us that it was a premium product. I mentioned earlier that you might use events to track push notifications.
You can add events to fire when users subscribe or unsubscribe to push notifications as well as when there is an error in a subscription process. This can give you an understanding of how many users are subscribing or unsubscribing to your app here. We send a subscribe event, letting us know that a user has subscribed to our notifications. Let’s talk about what happens when analytics meets service workers, they won’t work without a little help.
That’s because the service worker script runs on its own thread and doesn’t have access to the GA command queue object established by the tracking snippet code on the main thread. It also requires the window object. Service workers must use the measurement protocol API instead of the command Q. This is a simple set of HTTP parameters documented at the Google Analytics site. Here’s an example of recording when the user closes a push notification.
The service worker manages the notification lifecycle, so it receives a notification close event when the event fires, the service worker, sends a hit via post with tracking ID custom event parameters and the required parameters for the API. Remember that we don’t want this service worker to shut down before we complete the post, so we wrap this code in event. Wait until since hits are effectively HTTP requests, they can’t be sent if the user is offline using service worker and indexeddb hits can be stored when users are offline and sent it a later time when they have reconnected.
Fortunately, the SW offline, google analytics and PM package abstracts this process for us to integrate offline analytics, install the package in your project with the npm install command. Then, in the service worker script import, the offline, google analytics import, je and initialize. The google and google analytics object. This adds a fetch event handler to the serviceworker that only listens for requests made to the Google Analytics domain.
The handler attempts to send Google Analytics normally if the network request fails, it will be stored in indexdb. Instead, the stored hits will be resent when online. You can test this behavior by enabling offline mode in developer tools and then triggering Google Analytics hits on your app indexdb will show a list of urls that represent the unsent hit requests. You may need to click the Refresh icon inside the indexdb interface to see them.
If you disable offline mode and refresh the page, you should see that the urls are cleared indicating that they have been sent now. It’s your turn. Go to the analytics API lab in there. You will create an account, add analytics to an app look at the results and make this work in a progressive web, app good luck and have fun if you’re an instructor. This final slide links to more information on analytics.
If you’re a student, these links can be found in your textbook. You may want to use these while you are working on the lab. There are additional slides at the end of this presentation that show the major analytic screens and explain how to get there, use these to deepen your knowledge or create live demonstrations. You
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
Everyone I am Dan Tuscola school, I’m a developer advocate at Google and tonight we’d like to talk to you about why Chrome OS is an awesome choice as a web developer platform, and there are too many reasons for why you should develop on Chrome OS. The first is that Chrome OS is an unprecedented convergence of technology stacks.
It brings together web applications because it’s no less. That has a browser as its UI, but you can also run Android apps and with full Google Play support. You can install and reprocess that you can test your web apps on and starting with chrome 69. You can install Linux and you can run your familiar. Development will workflow there, and this is a sneak preview of. What’s coming into the talk, you can see here a terminal, an IDE, a couple browsers and, of course pwe.
So the second reason why you should develop on Chrome OS on target Chrome OS is that it powers a very wide variety of devices. You might have seen. Chrome, most laptops or Chromebooks from a variety of manufacturers, and also you might have seen some convertibles again from various manufacturers and also all in ones like the LG chrome base and small form-factor pcs. This is the chrome box, which was diluted by Samsung 2012 and then HP, asus and other manufacturers followed suit, and this is the mini form factor PC.
It weighs three ounces, you plug it into the HDMI port of a display, and it turns that one into a computer. You can attach a mouse or a keyboard via USB or bluetooth, and then there are mega displays. This is the chrome box, commercial, it powers, digital signage or qsr displays, and this summer we saw the first tablet powered by Chrome OS. This is the Acer chrome top ten and, of course, Google has our own language of devices.
This is the pixel book, the flagship device which is at 75 % off for you guys, yeah and our latest, offering the pixel slate, which was announced last month. So in one slide, what are you from os because of a large and increasing market share? You probably heard that we have a very extensive presence in the edu space. Condos are very popular there. Then, if you optimize for promise you’ll actually target a variety of these convertible form factors, devices that have or have not, that a keyboard or a mouse or a stylus or internal touchscreen.
So this could also future proof you from devices that haven’t been invented. Yet, though, after I put this slide together, Samsung actually released a foldable screen phone that becomes a tablet, so the future is here already so again in one slide, the reason is diversity. You can develop apps on Linux and test them on a variety of Android. Linux. Browsers so Chrome OS brings together your own development workflow.
The one you’re familiar with your own development tools, a variety of form factors from mobile to tablet, to convert the boat, to desktop and browsers on Android on Linux, and there are quite a few of them edge and Samsung. The internet work on the pixel slate. The others should be able to be installed on Google picture as well, and this is edge and you see browser and Firefox running going on the same Chrome, OS machine.
Then you can install so desktop browser, so you can test in full, desktop Firefox. You can install the Linux version of it. This is Firefox, and this is Epiphany okay, gnome web, and you can also install docker, which I’ve heard many of you are interested during the forum. This is I’m official support for it, but there is a thread on reddit if you search for on docker now working in the crostinis subreddit you’ll find this thread, try out your own risk, but it does work.
So how does it work? How does Chrome OS managed to stick to his principles, which are speed, simplicity and security? How can it run all these different web, apps and Android us from play, and Linux apps like GIMP, while staying fast, simple and secure? This boils down to the containers architecture, which shall let Steve tell you more about next n. So when we were bringing Linux apps to Chrome OS, it was really important that we maintain all of the things that make Chrome, OS, Chrome OS.
So simplicity was first, it shouldn’t feel like you’re running a separate OS, but instead have the Linux terminal and GUI apps seamlessly blend in with chrome and Android apps, and we’ve managed to do this while keeping things fast. So Android and Linux support. Don’t do any emulation by using lightweight containers and hardware virtualization support your code will run natively and, of course, security is always on the mind for Chrome OS, so crostini uses both virtualization and containers to provide security and depth so to expend a bit on security.
We’re starting from a secure foundation and we’re working our way up with features from there so right now, Linux is pretty isolated from the rest of Chrome OS, but we’re working on the ability to share files and folders with it and soon we’ll be adding support for Google Drive as well so you’ll be able to keep all of your dot files projects and other important work safe in the cloud. So let’s take a look under the hood real, quick.
The first time you launch a Linux app after logging in we’ll start up a lightweight, VM and container, so this VM is actually providing the outer security boundary and gives you a real Linux kernel and it’s actually a minim minimal version of Chrome OS. That was designed specifically to run containers, and the container inside is where you do all of your work. This container is very tightly integrated with the rest of Chrome OS, so things like launch icons and graphical apps work, just like any other Chrome, OS or Android app, and the most important thing, of course, is that you get a terminal.
So how does it actually feel? What’s it like, an answer should be like most of their Linux systems, so crostinis based right now on Debian stable, because a lot of developers are familiar with apt package management and Debian based systems and for now we’re starting out targeting web developers because Chrome OS is A web-based OS and we think it’s appropriate – that you should be able to develop web apps on a web-based OS.
So to do this, we provide some nice integration features like right now, we’ll do port forwarding. It doesn’t seem like you’re running a container. You get local hosts to connect to and that’s treated as a secure origin, just like it should be. But if you do want to treat your container like a separate system, you can and we provide a penguin Linux test. Dns alias and we do want to support more developer workflows than just the web, so we will be adding USB GPU audio support file systems in userspace and better file sharing and upcoming releases, and now dan will talk a bit more about using Chromebooks for web development And show us what crostini looks like in action.
Thank You Steen. So we know how it works. We know why it’s awesome. Let’s see how to actually use it for developing web apps. The goal is to let developers do everything they need locally and the crostini support is still in development, but most things work as expected. You can run editors, IDs databases like Mongo or my sequel, local servers and pretty much anything can install with apt to set up crostini search for Linux in settings and then you’ll see this dialog.
Once you tap install in about a minute or two depending on your network, speed you’ll have Linux installed on your Chromebook, and this is a terminal. So we have a terminal whoo-hoo, let’s build the desktop web app for it. So books write a bit about how these apps are usually built. A lot of development of desktop device is done with electron or node WebKit, but the problem with that is electron means chromium plus nodes.
So you ship a rendering stack along with your app, and that might be useful if you have needs for low-level access, but consider Carlo, which is a Google project that is essentially a headful node app framework and provides applications with chrome, rendering capabilities. So with Karl, you don’t have to ship chromium or any rendering engine with your app. It uses a locally detected instance of Chrome and it connects to a process pipe and then expose the high-level API for you to render in chrome from your node script.
But if you don’t need all this low level or as features, you can do something even simpler, which is to build a progressive by that, and this is what Spotify has done. You can see here that I’m going to open open the Spotify I’ll, come in a tab and click that install a button, and once I accept the install prompt, the tab becomes pwe without URL bar and it has its own buttons like close, and you can find It in the shelf, you can launch it from there and once you launch it, there is no more install app button because it’s an installed progressive web app and it’s also accessible from the shelf.
So this system level integration features are provided by Chrome and they are available on chrome, OS things from 67, which is Asian by now and Dorgan on some windows, starting with Chrome, 70, the current version stable and on Mac with chrome 72 or, if you wan na, Give it a sneak peek check the Enable desktop it always flag. This is thanks to Service Worker support, which has implemented by all major browsers, and they are also working on a stance features such as payment request.
Firefox is working on that age. Has both notifications and out of home screen now and Safari is also working on authentication api’s, so, ok, we’ve talked a lot, let’s try and do a demo and see if anything blows up, so I’ve set up Christine already, because that will take two minutes which I Don’t wan na waste we’re going to install node and you have already vs code NPM and then we’ll check out Skoosh.
You might have seen it in one of the earlier talks. It’s an imagery compression app will open that in vs code to check out the code run. The webserver and the most interesting part is we’re going to open Skoosh from an android browser on the very same device and if things work also going to do some remote debugging. So these are the instructions to install node. Now what would a random? Because it takes a bit and I’ve switched to the demo station, I’m going to run NPM install NPM build, does take a while, then npm start to start the web server for the Skoosh app, and you see that it tells you it runs at port 8080 heat Bound to all local addresses, so let’s run chromium for linux.
This runs in the reno’s container and once squash has started, which seems to be the case. Let’s go to a local host 8080 and there Skoosh an. Why is it failed, but it certainly works. You can open images or not. This is a live demo after all, the point here is that you have access to localhost from the Dinos container and now, let’s try running chrome, dev from play and then choosing chrome dev here to be able to distinguish.
The icons looks like we need to update it. Hopefully the update won’t break anything, so I’m going to launch it before it gets a chance to update now. Localhost’ here will not work and that’s a non-issue steve is working on it. We need to get even mean to put you on the spot if we need to get the IP address of the Android container, which is this one. There is this command IP address show. So I’m going to just copy that and paste it in chrome dev, which I thought I launched somewhere a quick.
Has it updated? Okay? Well, I hope you didn’t break anything. So this is who’s running in chrome and all let’s try something even more dangerous. Let’s try to remote the bucket with chromium on the same machine. I know it’s called remote debugging, but it’s on the same machine, because these are different containers. So to do that, we need to put a device in developer mode and then enable it to be debugging.
Here which I’ve done and then we need to run this command, that fixed IP is actually documented on our Android setup page, it’s the IP of the our container and we set up an ADB bridge to it. So now, if things are on my side, you’ll be able to go to chrome, inspect and see a number of remote targets here, and we actually see two of them. So it’s open the squash one, I’m not click inspect, and this appears to work surprisingly well for a demo, so I’m going to resize the window and try something really spectacular, I’m going to scroll.
So this is live, not an animated gifs. This is actually remote debugging and, whatever I’m doing here, whether this app works or not, you can actually remote debug it with chromium on Linux. Debugging an Android browser running your progressive web app doesn’t make sense. This is what I wanted to show and let’s get back to the slides. So these are the instructions for installing note, there’s nothing special here.
You follow what no publishes on their github. Then you check out who’s using it again. Your visual development, workflow and Oh something else, maybe Steve, has to show this. We can run vs code to check out the code so until we switch to the demo disk Rancher shows what we actually are going to do, but great. Why not do it live now? So still is going to double tap that after he copies it to the Linux container and in the Linux container.
If you double tap a Dib file, you are prompted to install it as a Linux. App so Chrome OS supports that out of the box and once the installation completes you should be able to see visual code in the launcher and even a cancellation, prompt will say, fine, visual coding, the launcher, and this is not network dependent. So we should be as fast as it was when we rehearsed, though 58 percent is not terribly fast.
Okay, 91 cool so show us some clothes. If I only wait one second for two seconds there it is had to search – and here we go yes, code yeah. I have a manifest: that’s why it’s a progress. App has a start: URL, ok! So let’s switch back to the slides for some best practices for on. Oh, No, let’s actually look at this once more. It’s really cool right. How you can draw those in sync yeah! I had to brag about that, so the way to set this up is not reveal, which is why I posted a medium post this morning with complete instructions.
It’s about 17 steps. You need to follow so check out bit: / b, dot li /, CR, OS remote debug, or take a picture of this line. Okay, I see the phones down next, how to actually optimize PW is for Chrome OS, which is not really a topic. It’s more of an on topic. You shouldn’t detect that running on Chrome OS. You should use lighthouse as used for any in PW. If you only have five minutes to spend on optimizing, your app check out lighthouse the auditing tool that will give you a checklist of what to do and make sure that your app installs.
This is one bit that might be different on Chrome OS. I, like on all the versions of Chrome on mobile, your users will not be prompted automatically at the bottom to install the app you need to catch it before install prompt and then save that front and call the prompt method. And this is the code to do that. So you add an event listener for before install front, then you prevent default for all the browser’s.
Save the prompt in this deferred variable and then show your install button. So here we just set a display to block and then, in the click listener for that install button, you hide it call the prompt method from that save variable, and then you check the user choice, property and particularly the outcome field, to see if the user has Accepted your installation, okay, so, as I said earlier, the answer to this question is no.
You have your app installed on Chrome OS, but you should not do browser sniff it, but doing instead feature detection and the reason is there is a wide variety of input devices and form factors that Chrome OS can run on. So you might have a touch screen hole. You might not some lower end devices, don’t have a touch screen, there might be a trackpad or you might be the Acer tab. 10 tablet that I mentioned earlier.
There might be a keyboard, so if your app can use keyboard shortcuts, it’s go to a support for them. There might be a mouse. So I support for that. If it makes sense, then also be a stylus useful for drawing apps also make sure to build, responsive and take advantage of all the screen real estate. This is an example of an app that supports a large or wide display rather and displays a number of days in the weather forecast, but also, if it’s resized to a phone size screen, it shows less information and you can even support a rolled up state.
If the user just wants to glance at the weather of continuously, but for a media player out to be more useful example, you can have previous and next controls, and this is an example from Starbucks. They found that building responsive pays off, because users would actually order. On the desktop and use their mobile device to pick up their order so build responsive. It also pays off to optimize your forms because nobody likes to fill in the forms, and we have some guidance that G dot cos.
/ amazing web forms and some amazing URL and if you want to handle, touch in an optimized fashion, check out G Delco slash web touch. There are also pointer events, and these are a unifying model for also two pointer. Input touch trackpad, Mouse stylus, and you have a lot of events that are supported in Chrome, Firefox, Opera, ie edge and Samsung such as pointer move. You simply add a listener for it or sorry.
You have a pointer, enter pointer down, pointer up, cancel out, leave and so on. More at G dot go slash, pointer events, and this is an example of code that distinguishes between the pointing device you can check if there is mouse or touch or pen or something that has not yet been supported by the browser. Okay. So, what’s going to happen in the future, we are working on improving a desktop PW support.
One improvement is keyboard shortcuts. Another one is badging for the lunch icon, so you don’t have notified the user for everything we can display a number of notifications just like for Android iOS, apps and then also link capturing, which should make Twitter very happy. They have a great little way, but when you click on a link is not captured yet so in the future. We hope to enable this such that, when you click on a link that I wrapped in handle your app will actually open and handle that link, and for that you need to define the scope parameter in the manifest and the scope parameter is used to determine when Your user has left your web app and needs to be bounced in a tab.
We are also working on low latency canvas contexts which are introduced in chrome 71 beta, and these are very useful for how interactive apps they use OpenGL ES for rendering for a string and how it works is that your pixels get written to the front buffer directly. So this bypasses several steps of the rendering process and chrome writes there in that piece of memory that is used by the Linux, rendering subsystem and is scanned out the screen.
So this low latency context run the risk of tearing, but if you don’t interact with the Dom, such as in a game or rather have interactive app, it’s useful to use it. This is an example of how to set up a low, latency canvas context. You pass the latency parameter through and also on. It needs to be opaque, so you pass alpha and false, and this is the last slide. I had no idea what to put on it, but I figured that I should add that Chromebooks are these Convergys machines that run Linux, Android and Google Play natively without emulation, so they run very fast.
You should totally take advantage of the 75 % off discount and please do explore Chromebooks and give us feedback. We love feedback. We have the chromium, OS death group in the Google Group and also the reddit, the subreddit crostini. If you find issues, please check it. They’re very reported at CR Balcom, otherwise file them using the shift out. I and add the crostini tag and we are done and Steve and thank you
Okay. Recently github has provided this feature that you can also publish the same package to github as a github module. So we will try to explore both the options, how you can publish a package to npm, which is a node package registry node, package manager right and with there we have all the packages are available.
If you look at the express react, angular all the packages, we are doing the installation and we are fetching from the npm registry right now. You can also think about how can I publish my own package? You created some kind of utility, some kind of a commander tool, some kind of helper tool, cli tool which you wanted to publish like. You created some kind of a mock library which is going to mock your database in local storage or any other kind of http library, which is helping you same as xeos cache apis and all you wanted to publish those kind of packages.
So how can you publish and what all kind of module system you can support like uh? Consider this particular package react, or you can say express so express – is a npm module right and this some somebody has published this particular package, and now you will be able to install this particular package and use in your application right. So somebody has published it, and now, if I wanted to use, I can use it just like using require commonjs module or you can also use it in the typescript support ufi.
You can see import express as alias from express, so it is supporting everything because the alias type type script – typing type definitions are available for express. Similarly, if we just talk about angular angular has at the rectangular, where we have all the packages like angular c lines. Now, if I wanted to install it, what I will do is, I will simply do npm install minus c, it’s like a utility package, so you will install it globally and then you can.
You will be able to run all these different different commands right. Similarly, all these packages are published by someone you can see that this is the reference repository. This is the home page last published versioning. You can see the semantics versioning where you are actually major minor and patch version right. So all these things you have to manage now to support all these different things like your package, should be able to be imported as a common gs modules or the esx module.
When I talk about es6 module means you will be using the required syntax as a common gs module right if you are using import, export import, react from react or construct equal to require react. Both both are different right. So simple, like i’m just using this writer import react construct equal to require it. This is a common json view of common gsb of importing the module, but your module, which you publish to npm, should support common gs export so that you will be able to use it like this or otherwise.
You will do import react from react. Library – and this is what you do – this is a es6 view of import right, so we will see how you can publish a simple utility and which can support both and what we are going to do. We are going to support both the system, common gs and esx import, and we will use typescript for it because if you are using es6, so you should also be providing the typescript interface and typing the type definition for your library.
So, if any typescript project you are writing for the node.Js or the client side, you should be able to provide type definitions for it. Okay, so we will take a look, the basic things before publishing any npm module. So, first of all, you should have a npm account. Npm account means you should be able to login like you can do the sign in and you should be able to create a package. So I do have my account just try to see.
If I can do, I don’t have password on the system, so you should be able to do a login right. So how you can you can do all these logins using just simply npm login, okay here it will ask you your username. So if you have account, then you would be able to provide it and your npm password enter password. When you create your account, you should be getting it and your email id okay. So I am logged into this repository to this registry.
It’s npm global registry. Here I can publish my public project, a public library or private library. Okay, now coming to the code code, can be as simple as basic type script code or basic javascript code. What I am doing is, I am creating the build for common json eses es6 support. So I am using the typescript here if you can see the package.Js the definition here, I am using the type config right so few things which you just need to take care.
While you are publishing a typescript package, because you are writing code in typescript, you will be uh exposing the interface all the type definitions. So you should always make the declaration. True four types of packages – and this emit metadata decorations, experiment and decorations if you’re using any third-party module, they may need these flags as a tool so that you can expose the typings used by those modules and target is 2015 module system.
Is this strict true? So you will not be using any everywhere. You will be defining the types. These are the compiler options which you have defined and what you are including and type root. You will be adding a type root so in in index.Ps on your both the packages and output directory. When the compilation typescript build is done, you will get a liv esm, okay, so this is the kind of utility you are going to build.
Don’t treat these library as that they are. You are going to get an output as a ui, it’s just a cli library or some kind of utility and you’re just writing those classes which whoever is going. The end user is going to import this module and you you will be using these classes to execute some function, so your code can be as simple as just a simple like this functions, calculator or anything. Also.
I should consider that I am just exposing these two things. One is a function and one is a class okay. Now what i’m doing is, first of all the package.Json definitions and typing typing.Json, these two things you have to take care here. I will be supporting both the module system esm and here this cgs common gs and esm modules. So for common gs, this is another typing.Json. I will just extending the ts config, and I will be just overriding.
These two attributes in my compiler config, which is a model system, will be config and output directory for uh compiler types compiler will be cgs, so i’m using common js here here, i’m using esm. Okay, esm and cgs both outputs – I will be get when I do npm rental, so I did already npm install when I do npm run build for this particular code. So I i’m trying to get the build for both here. I’r executing both the things by passing both the configs in the tsc so as mentioned, output directory is different for both output directory and output directory for this ts, config is different.
So if you see the lib right, it’s a cgs common gs right. So if you take a look on to the index.Js, it is exporting like this, so whenever I wanted to use it, I will. However, I do it on hello equal to consider. This is a hello.Js file or library, hello. Okay, so I will just importing npm install uh this library name and then I will be able to install this package, something like this from that library.
Okay, this this library is just exporting one class and I will be getting it like this, so it is exporting, say hello and the class. So i’m getting two things from here: uh class, hello and the say hello function, so I will be able to import them. Something like this, like commonjs module way where you just use, require and in the require this particular module. Commonjs module is exporting two things module so how we do it module exports.
But here we are exporting two things say hello and hello, so you can selectively get either hello or say hello or both while you just require it. So you can write your code and you will be able to require. Similarly, if I just take a look on to my esm here, I will be getting the export import syntax right, so it is exporting two things. So what I can do is either you can just use import everything as uh.
All from this module, like uh module, name library name right now, I can just do – is everything dot here? I will just use the hello in my code or like everything, dots here. This is, how will I use, or I can just use import selective import either. Just like say, hello or hello, wrong library name, which i’m going to publish okay, and when you just put a library name, it will look into the node modules before, because you will publish this module, then you will install it.
This module will be available in the node modules and when you do it something like this, it will look inside a node modules inside index.Ts and it will find okay. Yes, I got the definition of hello and clo, so it will import that. Similarly, we can just do a selective impact input for this commonjs module here here you will just uh const like get everything constructs equal to, you can say, require this library name and then you can just do a dot around it and you can get see hello Or you can just get the hello okay, so this is the different way of importing exporting things, and i’m supporting my library, my library, supporting both things right before that you can also write your test coverage and all these things you can write.
So all the setup is done here. You can just look at the code if you want here, I have package.Json. So what is minimum thing to require to publish on the package to npm? Nothing, you just need a code. You don’t even need a repository, because npm is putting the repository what you have defined in the configuration. It is not saying. Okay, you just need to have a repository, but obviously, if you are publishing something we will be managing the version, so we create a github track tags and all and then from there we run a ci cd which indirectly publishing the module to the npm.
Now the data modules are also there, so you might be publishing the same module on the github as a getter module. So what I did is, I just did npm login, okay and one. The name of the package is test package right. So if you just look at the test package globally, there may be 100 package already there with name test package, but package name is unique, so I will be using my username as a prefix. So for tksarma, this test package is unique right right.
So i’m just putting my alias this is you can say the scope is my username or my own repository there i’m putting test package okay. So you have to select the name wisely. So i’m putting a test package in my repository and it is a public package. So, first of all, we have already done npm in it. What we need to do is, after once we are done. Npm init. We can just let’s try to do and claim publish so here you have to take care of publishing this package as the public package, so I have already written these instructions here how you are going to publish a package okay, so you just need to provide this Access public and if your package is already published, then you have to manage the versioning here.
I have a package.Json here. If the package 2 1.2.2 is already published, npm publish x is public, so you can see it is now published mobile package and it will publish the version latest version and now it is successful. I don’t see any error, and this is now package is available. You can just locate it or I can just show you okay. So this is my package name and it’s a public package so while defining it as a npm install npm, install minus minus save, you have to use this particular name.
Add that tk semaphore slash test package. The scope of this is around this okay, so my package name is unique. I don’t need to worry about the conflict you can see now you have to link it with some repository, so all these instructions you are specifying in your package.Json. The repository author registry registry is npm registry. It is common global repository, the repository url, because the same configuration will be published on the npm repository here.
You will see the link uh, the repository of the page. All the descriptions which you provide in the package.Json will be published on the npm site, and here is a description. Okay main will be the index.Js for commonjs and for the modules it will be index.Js in the esl. Okay, I just need a build instruction. Simply npm run build, so it will just generate a build for esm and cgs. Both and rest. You can do the testing and all these things length length fixed because you are, you might be writing a huge amount of code for a library.
So you need to take care of the linting library, uh linting testing testing coverage. You should be writing good code for this okay, so you can see see the author publish config repository and all right now, if I did npm publish, I did nothing. I just have a package.Json and you can create a package.Json using npm in it, and you can just provide the username basically tk server. Okay, there, you can initialize your uh basic package.
Json with the tksm as a username for the scope, okay, so publishing something to uh. I can say: npm is quickly very easy. You just need to have account. Second, you just log in npm, login and then publish npm login. Just you have just have a username password and your package will be published same as like this okay. Now, what? If I want to publish the same package to a gator module, okay, few things for the github module, it’s like a same process, but now what we are going to have, we are going to have it.
We are going to target github, only not npm as a publisher right. So few things which you need to change in your code is the publish config. So what published config is published, config is saying that now publish it will be targeting npm module, npm github, so it will be pointing to this domain npm.Package.Json.Com, and your repository name should be valid because before publishing, it will look at your github.
This is the username. Okay, do you have this repository there? The name of the package can be received, okay repository and you are now in the depend just just plug in with these things, so I already have this package.Get.Json with all the changes. So what we do is we will just rename it to package.Json and rename the existing one. Here I already have all the changes published config repository and the basic things, the package name and all it should be unique.
Okay and types types will be available in index dot d, dot ts, which is same in earlier version. Also in the package location, we were having lib integra dot d dot ts. So if you can see here here, I have whatever the code I have written. These are the types available for it, so whenever you import this package in the typescript project, where it will look for the default definition, typing is in the index.
Ts. So if you are using these classes, see hello and all these things, then it will look for the default typings here. Okay, the name is, it is expecting as a string if you are importing this library and passing name something else, and it will give an error because the typings are in the index.D index: dot d: dot, ts, okay, okay, so let’s get ready for publishing it to The github module, so what we need to do after doing all the changes, let’s rename it to existing package rotation to something, and here we can rename it to package.
Json okay. So it’s saying we have all the definitions here also, I will be publishing this library for both cgs and esm. Okay and library files will be in the live. The same instructions build a notch, only the publish configuration. The repository should be that available already, and I have this – is a typescript package. So if, if we talk about what is needed for the typescript library, okay, obviously you just need to have a typescript uh in the dependencies like.
I have a lot of things because i’m doing a testings and all these things – nyc moca, chai bluebird. All these things I need. But if you are writing a simple package without test and coverage and all then you just need to have a typings node.Js or a minimal typescript like here, okay, otherwise, once your package is published, if you see the dependencies dependencies are published here, you can see it.
These are the dependencies, and these are the dev dependencies – try not to increase by these too much, because your packet should be lightweight and you should not have a dependencies and on too many things too many external package try to write more on your own code. Okay, now, first of all, if we just go there, how to publish a github package, so you just need to have a github account that a basic thing, and now you can just follow the basic instructions npm login.
Okay, here is the command which you have to little bit careful about. You just need to log in first of all with the registry, it is npm login registry this and follow the prompts like this. Here I change the registry right now. It is targeting to npm.Package.Github.Com. So it is not seen as your npm login, and here, if you have two factored authentication enabled, then you have to pass your personal access token.
Okay, most probably yes, i’m logged in now. This is about when you wanted to use it. Okay. What I can do is, I can just figure the simple instructions: npm publish, okay, let’s see if we get any errors, so I think I bumped up the version, so it’s packaged or decent. So currently, the version is this: you can change this to one dot, one. So it is also following the same instructions, and now your one dot one is published.
Okay, it is quickly straightforward. You just did npm login. Just you just need to specify what you are targeting the registry is this right, so you will be targeting this registry and you are publishing npm package. This is also a public package. You already done. Npm run build so it will just create a live folder with the both the support, cgs and esf. Now we just need to do npm publish same as we are doing for the npm publish right now.
It will just see okay, where you’re logged in i’m logged in with npm, so it will just push this package now. If you wanted to see where it is published, and we can just see at github here, you can see. I have this test package and it is published auto product one right and I just have a dummy, redo file. I will just clean it just to see so if you wanted to use it, then npm install this. You have to use it in your code and this is how you will define it in your package.
Json okay, so your package is published here, 1.4.1 right, and so when you have a github package, you will just use the you can use the github actions to actually Create a tag for the previous package, so you will have you will maintain the the previous packages also and their code also right, so you can just create a github tag before publishing the new package and you should maintain the consistency of this versioning 1.
1 major miner And patch version – and you should be running all this – you can just configure a basic pipeline like this travis, where you will doing npm install and payment, build, npm, run test, and then npm pack or npm publish what it just needed. It just needed a github token, which you can just use the github environment variables to pass it okay, but here we just talked about how you can just create a basic package or basic library and can publish it to npm and github.
It just matter of your typing or ps, config and the compiler options. What you are targeting you just need to take care of very few things. Declaration should be true, you just define output directory your target and your module system. Module system can be a common js or can be. Es6 is 1020 here. For this I am using common js module pattern. I just creating the different different bundles. So when your package is being imported, you can import it as a requirements: module sorry, common js module where you are just doing a require, or you can use the import export like a es6 module where you can use it.
So the same code base, a typescript enabled where you have the typings defined, can be used as a es6 module as a common js module so most of the packages what they like is they don’t have the type type definitions available. So what they create is they create a type pack type definitions as a separate module right. Are they types? If you see so here around this, you will see type node s react react dom.
So if you have a big library, then you can define the typing separately right. So we have a node and type nodes, so it is providing the type definitions for all the node.Js core library things: okay, okay, so this is all about how you can publish a library written in the typescript and node.Js I mean we are just writing typescript and Javascript and you can publish it for the common json es6 module thanks.
Everyone thanks for reading. Please like subscribe, my blog, if you like the article
Modern web development involves quite a few tasks, running servers, optimizing images and processing source code. Now these are the kinds of manual tasks that you can automate with: gulp grunt make or other build tools. The world of build tools is constantly changing, but we chose gulp here for its relative longevity and its relative simplicity simply put gulp reads: a file called the gulp file to tell it what to do it then processes your source files, transforms them and writes the results To a build directory, this is a sample golf rjs file, it’s written in JavaScript with a couple of no js’ extensions for loading, other files, the require statements of the top load, the core gulp commands and the gulp interface to uglify.
These are known as gulp plugins and by the way, uglify is a program to compress and minify javascript. Now, gulp files are divided into a series of tasks. A task might run a server minify some code or even delete files. Each task should be one self-contained action. We define a task named uglify j/s and write some JavaScript to implement it. The gulp dots sauce task reads all the J’s files from source J s.
We then pass all those files into the uglify tool using the pipe command. Now the output of each command is ready to pipe into the next, so we use the gulp nest command to write the result into new files under dist J s. Snap formerly gulp is a cross-platform streaming task. Runner that lets developers automate many development tasks at a high level, gulp reads: files as streams and pipes the streams to different tasks.
These tasks are code based and use. Plugins the tasks modify the files building source files into production files to get an idea of what gulp can do check the list of gulp recipes on github gulp is an ode package and the plugins that it uses are also node packages. So you need to install node.Js first, this also installs the node package manager, and you should also enable gulp from the command-line and to do this install the gulp CLI package.
You can then go into your project or create a new one and have NPM install the gulp plugins. You need into your project right, your gulp file, j/s, and you can begin using gulp from the command-line here’s an example of creating a project and installing gulp plugins. The first line creates a new NPM project. This generates a package JSON file that lists your project’s plugins. The following commands install various example plugins, including gulp itself: the save dev flag updates the package JSON file with the corresponding plug-in the plugins are installed in a node modules directory with this method, you can easily reinstall all plugins and their dependencies later by using the package.
Json file, rather than reinstalling each plug-in individually, now note that plugins, a B and C a imaginary we’re just using those names to show how plugins work once the plugins are installed. They need to be loaded into the gulp file using require now you’re ready to define tasks. This task is named task ABC. It takes file from the some sources, files path and pipes and through functions from each of the plugins which modify the files.
The processed files are passed to gulp tests, which writes the files to some destination path. The task we just defined can be run from the command line by typing gulp space and the task name in this case. It’s gulp space task, ABC here’s a set of links for learning more about gulp ins. We’ve also built a code lab that takes you through common tasks, follow the link to get to the lab. Now don’t worry if you’ve missed any details, just look at the gulp documentation and our to find out more.
We supply gulp files with our code labs, so you’ll be all set for now. Let’s get back to writing PWA s and i’ll see you soon.
So what is Django well Django is a web development framework that saves you time and makes web development a joy using Django. You can build and maintain high-quality web applications with minimal fuss, and we are all going to do that on the Raspberry Pi.
The Raspberry Pi is a tiny computer with enough power to run a Django development server. So here we’re going to attempt installing and deploying our first Django project on the Raspberry Pi and maybe develop a web application on later articles. You may be asking why don’t we just build a web application from scratch without a framework? Well, there will come a time when your application would be needing to connect to a database, and you would end up duplicating your database connection code to other parts of your application.
The practical way is to refactor it into a reusable function. Another problem you’ll encounter is you have to remember to close your database every time and you will end up with a lot of boilerplate code that is prone to mistakes. Your application may not be reusable in a different environment because of some environments, specific configuration. And lastly, if a web designer, who has no experience in coding, wants to redesign the page, he or she might crash the application, because, ideally the logic of the page or the retrieval of information from the database would be separate from the presentation which is the HTML Display of the page, these problems are precisely what a web framework intends to solve.
I’r sure some of you are already familiar with the MVC design pattern or Model View controller design pattern for beginners MVC, like what I mentioned earlier, is a django architecture that separates the logic, the model and the controller from the presentation. The view in django it’s more like an mtv or model template view design pattern. Don’t worry about that now, we’ll get more into that later.
In the meantime, let’s go ahead and install django on the raspberry pi. Okay, so I have here a freshly installed raspbian, which is the official operating system of the raspberry pi. What we’re going to do here is to open up a terminal and install virtual ends, which stands for a virtual environment. To put it simply, virtual environment is an isolated working copy of Python, which allows you to work on a specific project without worry of affecting other projects.
So let’s go ahead and install virtual end, but before we do that, let’s update our package lists by typing sudo. Apt-Get update and when it’s done updating we can go ahead and type in sudo, apt-get install virtual end hit enter, and in my computer, my or my raspberry pi, it’s already been installed. Now that we have our virtual environment installed. We can now create our virtual environment directory that we are going to use for our project to do that.
We just type virtual end dot. Then P, slash user, slash bin, slash Python 3. What this code does is. It makes a hidden directory called vent because in Linux beginning your directory name with the dot, makes that directory hidden and the dash B is an option. You pass virtual environment on what version of Python you want to use. In this case, we want to use Python 3 inside slash user USR, slash bin now hit enter, and when it’s done, if you type LS la you would see that it created our project directory as expected to use it.
We just type source that Ven slash bin. Slash activate you will see our prompt has changed, indicating that we are now in our isolated Python environment. We just type the activate to go back to our regular, prompt and escape our isolated Python environment. We can now install django. There are other ways to install django, but for simplicity, we’ll use pip to install the latest version of django available from PI P or the Python package index repository to do that.
We just type pip, install django and hit enter to test Jiang, the Django installation. You just start up a Python, interactive interpreter by typing Python, and if the installation was successful, we should be able to import Django and check its version. Okay. Moving on, we can now take our first step into creating our first project. A project is a collection of settings for an instance of Django, including database configuration Django, specific options and application specific settings.
So let’s exit our Python shell and type sy, Django admin, the PI or just Django admin, start project. Then the name of our project, which we’ll just name my site for now then hit enter okay. So it says that my site directory already exists just going to delete, delete it for now and make another one. So I’m just going to repeat the command Django admin that I start project my site and then hit enter.
What the start project command does is it creates a directory containing six files? Okay, there we are my site, which is the outer. My site directory is just a container for our project. It name doesn’t matter to Jango, you can rename it to anything. You like manage that PI py is a command line utility that lets you interact with this Jango project in various ways. Type Python manage that hi-oh. We just have to change into the directory first and type Python manage that py help to get a feel for what it can do.
Okay, so here are your options now you should never have to edit this file. It’s created in this directory purely for convenience. Okay, so let’s go back to files that were created. Oh now, it has added a few more files, but we’ll just go over on the basic files that we are concerned about. The next is the inner my site directory. It is the actual Python package for your project and we have our ini’ that py, it’s an empty file required for python to treat the my site directory as a package example a group of python modules – and we also have our settings that pi, which is the Settings configuration for this Django project take a look at it to get an idea of the types of settings available along with their default values.
Okay, so we’ll just skip that for now and we have our URL stat pot, the URLs that PI for this Django project is the table of contents of your jungle powered site. Next. Is we have our WSGI pi an entry point for WSGI compatible web servers to serve your project? And lastly, we have Ras GI that pipe as well as WSGI Jango also supports deploying on a SGI which is the emerging python standard for a synchronous, web servers and applications.
Now to see our barebone application in action. Let’s run the server by changing into the directory of our project, CD, my site and type the command that slash manage, that pi run server the run server launches the built-in django development server, which is a lightweight web server that we can use while developing our site. We will receive a warning message in red telling us we have unapplied migrations welljust.
We will just ignore that for now. Okay, now, if we open up our browser and go to HTTP colon, slash slash 127.0.0.1 colin 8000, which is the IP address that stands for home on port 8000 and if everything goes well, then we’ll see that it works by default. The run server command starts the development server on port 8000, listening only for local connections. If you want to change the server sport, pass it a command-line argument like so so, let’s just ctrl C and run our command again run server and we want to run it on port 8080.
So that’s how you change the port? Ok! So now we will access it here on port 8080. If you want other computers on your local network to be able to view your Django site by visiting your IP address in their web browsers, then you type manage that slash manage that pie run server. 0.0.0.0. 8000. Well, that’s all we have for now in this tutorial. If you have any questions or comments, please post it in the comment section below down below and I’ll do my best to answer them.
If you enjoy the article, please hit the like button and kindly support my blog by subscribing again. My name is Ryan and you are reading recurse TV see you next time.
” All right, so today, We have a special guest Alycia from Sucuri. Thank you so much for coming on today. Yeah thanks, I’m happy to be here Awesome, so we’re Talking about what is a CMS and which one should you Use for your website, Can you tell us a little Bit about what a CMS is So CMS stands for. Content management system and it’s basically an easier way to put pages, live on your Website or blog post manage your image media Library all that kinda stuff Awesome and now, let’s Go over the top three CMSs, I’m going to be a little bit! Biased in this episode, That’s my disclaimer right there, I’m going to start with WordPress WordPress is the most popular Content management system out there today powers Over 1/3 of the internet, It has tons of plug-ins tons of options and it’s pretty resourceful And probably my favorite Reason for why I use WordPress is the community behind it.
They’re such a large community that that just all comes Together, there’s meetups, there’s wordcamps and everyone just helps each other out For sure, and I mean with 40,000 plugins almost like you, have no end to the kind of functionality you can add to your CMS Absolutely. So what are some other CMSs that we can possibly use For sure, yeah,,’cause everybody’s heard of WordPress, so Yeah Drupal is another very popular one.
It’s been described to me as Kinda, like a Swiss cheese, you need to be a bit more Technical to use Drupal, but it does have a lot Of different features compared to WordPress, it has A different user experience and ultimately it’s been Used for a lot of things like government websites, And that kinda thing because of its ability to be a little more secure in some areas: yeah Yeah and it’s definitely One not for like the smaller business type sites as Enterprise or large Corporation type sites right, Yeah, yeah for sure Yeah Joomla – is another really Popular one as well, It’s got a really good.
Community – and it’s got, I think, the second highest Market share after WordPress, Although WordPress is Like 30 % – and I think, like It’s, a giant Joomla’s like 6 %, so just A little bit of a gap there between the top two but Joomla’s, also a really awesome CMS to use You wan na make sure that you’re using the most latest version. If possible, There are two active versions: Available that you can use Yeah, you definitely wan na stay on the most recent branch.
Of any CMS, if possible, Yeah that’s just a best practice there. All right. Let’s talk! About really figuring out, which one should you use right Like what are some of the first Steps we wan na think about. Definitely you wan na Make sure that you know what your requirements Are for your website, So how does it need to Be for your users to use! How are you going to go about? Actually creating posts and what are the processes that you’re going to use as part of that And then once you have all that you can kinda look at each CMS and see what are the extensions and Themes that are available And see if they’ll match the Requirements that you have for your website, That makes sense and It all comes down to figuring out what’s right for you Like, I will stand by WordPress all day, but WordPress may not be Right for your situations, Figuring out those requirements, With those applications are super important, Yeah and usually a Lot of the CMS websites have a great community Because they are open-source, So tell us a little about open-source Yeah for sure.
So all Those top three CMSs they’re open-source they’re, also free, which is very important, Open-source, basically Means that the source code used to build WordPress Or Drupal or Joomal, it’s all open and available, and anybody can contribute to it as well Right on So that just means it’s Constantly being improved by the community and the Community’s also checking to make sure that, what’s Being added is secure All right, so we want our Website to look good right, So is that something to think About when we’re choosing what platform we use and how easy it is to create those sites Totally so different themes will have different attributes like They may have a sidebar on the left or the right, Or they may be all one column in a never-ending scrolling website.
Different themes will Allow you to accomplish, maybe what you need by Having custom backgrounds or custom menus, so you Wan na look at the options for your theme and you also don’t wan na discount like premium themes, A lot of premium themes out, there will add extra functionality, So you’re, essentially Paying for the theme, even though the CMS is free, That’s an awesome option. There’s premium plug-ins as well, Depending on what you Need the default themes that come with it are Sometimes a little restrictive, so you wan na take a look at What the default themes are: Try some different free themes and see what the options are to get your site to look.
The way you want it to Yeah and what was kind Of controversial at first in WordPress and 5.0 remember Gutenberg, Oh yeah, Gutenberg is essentially The new WordPress editor, The whole point is to kinda mirror the printing press of just Blocks and everything else, Yeah, what you see is what you get So as you’re typing — Whizzy, wig, Yeah whizzy wig, Thank you So as you’re typing Yeah, you see exactly what you would see on the website, So that comes default by WordPress.
It has made the experience. Especially for first-time users easier to create, Then there are page Builders like Elementor or Beaver Builder or WPBakery Builder, that makes that user-experience A little bit easier, If you’re going on the WordPress realm and really want something: That’s pretty customizable, you don’t have to be a Web developer or guru to build that website For sure CMSs are having to Make things a little easier, You know, there’s a lot of Different places out there that are creating website builders that are super easy for people to use, and so it’s helpful for These open-source CMSs to make the user-experience a little easier All right.
So another thing we probably have to think about. Is the hosting requirements We’re going to need for our applications? Talk us through a little Bit of what that looks like For sure, so most of These are running on PHP, so you want the most Updated version of PHP, especially if you want The latest features and to make sure that you’re Getting those security updates? Yes, So that’s really important.
A lot of hosting companies will offer one-click Install for most of these major CMS applications, Some hosting companies Especially when I first started creating websites – and I Was on a super budget, but also a very secure host, it took me a long time. It took me like three days to install WordPress and they have a famous 5-minute install You wan na look and see, and maybe talk to your hosting company.
About what the options are for getting this CMS Installed on your server Right,,’cause, taking three Days to get a website going just the beginning is not Something you wan na do There’s a lot of places out there that will do managed hosting Especially with WordPress There’s managed WordPress that has just already automatically installed some extra security features And then what most people End up going with is like a cPanel type Hosting Since it does have that one-click install with Installatron or Softaculous, Whatever they’re, using Totally Couple of clicks of a button and then it’s there, You can start building and Designing, however, you want All right, so the real Reason I brought you on to this.
Episode is really talking about security with CMSs They’re open-source. You Constantly have to update them, so there’s lots of things. That we need to really think about to make sure Our stuff’s protected Totally well with It being open-source not only are all the good People contributing code, but all the bad people can Also, look at that code as well and find vulnerabilities. So that’s something that a lot of people are concerned about.
Especially with WordPress being so popular, it is a large target. The CMS itself is actually quite secure because there’s a great Community checking things out. You wan na make sure that you’re Not installing more plug-ins than you need Trying to make sure that you’re keeping everything up to date. If you have a managed solution, They’ll, do it for you, Which is awesome. Yup, You wan na make sure That you have something some kind of security plug-in That’s monitoring your site, letting you know if there is A problem that they detect There are some that can also Add features for protection like adding Two-Factor Authentication, which is a second password on your phone that you need to enter in Order to get into your website There’s all kinds of Cool security, plug-ins security utilities that You can use with your CMS Yeah, I know with WordPress the top security plug-ins That come to mind, of course, Sucuri has This security plug-in, but there’s also Wordfence And then with having an SSL on your site, super important just to Encrypt that password,’cause, you have to login The beauty with CMSs that You can access them anywhere right, Yup, So you wan na make sure that wherever you’re accessing’em Your password isn’t being sniffed out by someone in the middle Yeah.
You wan na, be careful. You don’t wan na. Maybe do It in like an airport or coffee shop, Wi-Fi Unless you’re using a VPN.’Cause, if you are sitting There on public, Wi-Fi and there’s a hacker sitting next to you, they could sniff your password As you’re typing it in And then the next thing you know, there’s a bunch of spam pages on your site that you need to deal with. So what about firewall? I’ve heard that it should be important.
Should be added to the site, What’s the validity with that? Definitely one of the nice things about a website firewall Is that it will virtually patch your CMS? So if There is a security issue, essentially the firewall’s Taking care of that, It surrounds your website. And if somebody’s trying to exploit a vulnerable Plug-In on your site, the firewall will catch. That attempt and block it They’ll see a blocking page.
Meanwhile, all of your legitimate Visitors are being sped-up because of the global Network of the firewall and content delivery network, So we’ve figured out what Cms we’re wanting to use We’ve got it installed, how Do we go about documentation, learning the program itself? There are some awesome Resources out there, You talked about WordPress WPBeginner has some awesome? Training guides and tutorials There’s an awesome community.
For all of these CMSs, with very active, like support forums, That’s a great way to go about it And then, obviously, if you have a developer, Or something like that, that’s helping you get some customization. They can usually help you. You wan na make sure that You’re documenting everything as part of your website as well, so It’s just going to help you Later on down the line, if you know you have a List of all the users, all the plug-ins and that kind of stuff and you’re keeping that up-to-date Yeah, especially if you Have people on your team that needs to access the site, Giving them documentation on What they should be accessing, what they shouldn’t be, because sometimes the wrong click can Make just chaos happen Totally and good user passwords making sure that you’ve Got the right role levels assigned to your users? Whether they’re just an editor or author or contributor Right Those roles are usually built into the CMS to allow you to make Sure they can only access what they should be allowed to access.
You only wan na grant admin privileges to somebody for as long as they need it, and that kind of thing Now, with this website, I know many of the entrepreneurs or even solopreneurs out there with their stuff, has Many hats to wear right, Sometimes maintaining it, isn’t always something that they have time for Yeah. It may not be top of mind Right. What should we be? Doing with those updates Yeah, definitely I would say that it’s very important to make sure that you always retain Access to your property, your web property, So I’ve seen cases where a developer will leave a client and Leave with the passwords and then you can’t get Into your hosting account, or you can’t into WordPress, It’s not ideal, so make sure you always have access to those things And make sure that you’re just practicing safe security practices.
Throughout all of it Right on and with WordPress and Joomla everything else, we Talked about it earlier, make sure you’re at least going in there every now and then to update It to the next latest version: It’s not only for performance, but it is for security Yeah for sure I mean with some CMSs there might be different branches that are still being actively developed So having a firewall That can virtually patch and make sure if there Are any vulnerabilities you have a little bit of an extra window.
‘Cause whenever there’s a Security update released, the hackers are looking going. “: Okay, here’s the old file; “, here’s the new file; oh look: “! There’s the security flaw!”, So it can be –. Then send all our bots out Totally it can a matter of minutes hours after a security patch is released before there’s active attacks in the wild So definitely update your Sites as soon as possible, Auto-updates are amazing, WordPress has auto-updates on most hosts, Yeah and or you can hire developers like most designers or Developers will have like a website care plan, so you Can them just do it for you, If you’re using WordPress, Godaddy ProSites or ManageWP has the one-click updates.
So you can update all your Plug-Ins and your themes, You even have a safe update option. So what it does is It’ll update your site, take a snapshot of before and after and make sure they’re all the same. And if there’s an issue It’ll retract, back to it It’s a free option for you Yeah, that’s perfect! You hit on a good point, It’s not a set it and forget. It thing with a website: You need to make sure that You’re maintaining it And that it’s part of your business, it’s how your business looks.
So you should definitely Make sure that you have some kind of plan for keeping It up-to-date and maintained All right. The last point that we should really talk about is really your time and investment with the CMS of your choice. Talk us through a little Bit of that about that For sure we’ll you Wan na go in and realize that it’s going to take you Time to setup all the pages that you want Right: It may take you time to find the right plug-ins, so you wan na kinda think through whether You want to hire somebody or get some help with that To find the functionality and the look and feel that you’re after Definitely budget when It comes to free CMSs.
Well, you don’t have to pay for the CMS. So that’s helpful Right! But it’s customization and security and all Those things that you definitely wan na consider as part of the whole package of having a website On-going costs for domain WHOIS privacy, SSL certificates, Right firewall, All that kind of stuff, All that good things Totally yeah, there’s A lot of accessories that go on with having a website, So you wan na figure like I said at the beginning what those requirements are And then make sure you have a plan for how you’re going to budget and the timelines around When you wan na launch Perfect and with Drupal And Joomla they are, they do have that smaller market share, So there’s really specific requirements of when you wan na use those applications.
Those developers that you hire for Drupal or Joomla might cost more than a WordPress designer as well For sure yeah, and you wan na make sure that you’re really looking at the work that the developer has done and make sure that it Matches what you’re, after There’s lots of great Websites out there that you know can tell you more About how to pick a developer depending on what you’re after Well? Thank you so much for Coming out on the show today and helping us figuring Out what a CMS is why we should use one You’ve been awesome Thanks my pleasure.
Well, if you liked this article go ahead and smash that, like button, add a comment below on Something that you’ve learned and subscribe to this blog and ring that bell, if you’d like to see these episodes first, This is “ The Journey.,” we’ll see you next time.
I want to fight with you to really thank you. Truly, I’m not fightin. It basically sushi fish here, that’s Coco. What so main folder keep utilities stop engines? Oh I want this. I appreciate an unexpected if I was a boom. Bitches shut up programs shampoos here Janice. It won’t point about the prohibition, a gravel road change it to 20 she’s effective June with Umbra she’s uh.
Back to this vitamin egg do busy kazoo! That’s a beauty: she kebab blogs are a blue. She kicks and parsley lips close shows it put the bunny ear, for it should be active, but it still it can give me taro or interpret the programming language which it can under Python. Simple cash code table today would be from the computer screen is Julie. She she – I was a brochure which alone can open book hermano tooth into Karrueche, put’em hello.
I turn a position. I’r not. The Google is a search goody, top programming language 2020, Tommy, I’m predictable by tundra, che egg dome, f-number e TT o current a blow by Tony. Bravo: heart fight on machine learning, diffusion intelligence, Kimba web development and mocha Java hardcore aquatic ape enter a mobile, app development of items in it in a geometry of a wood chip in for a up, another Juneau hammer should take the solution.
Third base. She develop programming. Circuitry kanakam IDE download, Corvina ID. You know, mulatto jaqen, a program, decay compile clarify a Caronia for the nacho-cheese current computer AIT download crack it to jungle, of whom no connection with a photonic a familiar part, a piranha egg. Do it in try correct time for programming? It’s headed by a timer bubonic bundu Kim Bauer needs a shadow, Putin, Putin OHA so going to come.
Id download, Corvina Abner computer is Judy available, Wi-Fi connection okay, so they have not a softer tip. I work with different Google as a search Corbin, our EP l, dot ID dignity, put AAT softer province, shade it along incorrect Abner gmail account their the register, Corbin color or a language. He shall be Python touches cordovan tahole of not air. Come octopus Pavan they own. A kanay Python, three point: eight point: one dvorkovich, a jetty Python, a shop see latest fashion.
They want a pure class. We could develop our simulator, which is from I lack going to tycoon, welcome ID downloaded, Shyamalan, RJ Cooper, J, a customer. Could the param Toby on a cable topology? I wanted to available Wi-Fi connection named Alec Eger book Hamish, Hamilton, read, say after AI de Beauvoir could the button Tony it is specially Python and juno te Kura 80 download could therefore there could be seekers to Havana topo, Judy up Naja Mellish, a MOOC in horn.
So another common books at Jonathan progeny, Umbra, a tear for Allah, DirecTV duty record book. It can Iraq the shots. They said, you’re the only K about both of our a Jay. I was at the computer, the laptop Nate. Okay, I’m going to give up a programming code book now the schaumschau Shyamalan row, its head show the of narcotic the Android phone. Take a is your sister up, not programming, shrew courage, you know I mean so application and humble.
Is it sigil I’ve not a place to take a coupe shows a download create programming should with the Bourbon. Both of my jet is got the whole. Your decoder didn’t cook paper. Take the app it a place to recoup Shoji page 7 among download core upon another. It about could the could be shipped Acosta Havana. The way it is how much leverage a tibia more could tape. Removal of show em be tucked. The hub is OD after MB, not a get over Finity Bauer.
Could the Bourbon now only cover both of our edgy? I wanted more so maybe talking of internet connection tagging alcoholic he could go so Vitara aft power could different. Aft after offline a power cut, the power will itself brother, Eric pepper Kosovo, g q, python 3 l android for python for android integrate the offline app. Do 10 g connect, download, Karenin evan programming sugar. It in. I should applaud schakal programming so much in Cudahy.
She blows hard, indeed, ability so not ever programming each object. Amra equals same also tinted in Ipoh bottom develop output, the theoretical of variable. I want it a little variable type put to me: output, some pork, it to Bellini output, an active short uterine delay after output. Every shuttle could charge a booster bargain, I’m not Judy. Google help is Ajay among shaken and j-rock on am resorts, Karachi top programming language 2020.
Talk on Google came to a mother. Arrow calm case would result occasion Jessica. I’r the on internal information. Victor Chi is the information below you looking to output. It’s a direct order on this. After I’d open facebook AJ, I brought their phone number Kim the Gmail ID the a tarp or a password. They login a click. Current talking to Facebook up at the news pretty near Jack, is a Facebook about the news pretty near: yellow attack him to output, children ever ah Jack Python programming, amra corrector code, an output give her back and book output.
As you know, Python Abhishek to shop the beber core avoid shaking color print print like helper, a after they’re, both oh, my first bracket did the hobbit first predator. With her a quotation signal is cut away after a single quotation, came a double rotation jq- ever cook. The parens so by / Shui character with duper shake, do pressure quotation, duty, aikidoka, motorway, a bark rotational victory, amra supposed hola mi amor nam, tok click la let her pour a me to the Ranbir Tony Lee, curry Toby it can output is awake in term 1.
Lambda Big Dipper Qi or thought I’m Jay could tell Islam Shaytan out, put it in the AMIA one ant addictive achi ogre they quite to be sure to kill right away. Shaitan, hello print. Let’s assume oil in the / show printed Peter show to half their voter base Jody. It have got a deal Toby it color in to change Havana arkovich in snaffle eating into cash of Havana. Sorry, I’m not a unit collector change, Vegas, a.
J, kuna ID to the back wall, current of a pigpen J bring through Tata. Lately it all wrong to put even with it’s a romper. You go through Qi, money et, that’s cool babe it! Sarah! I wish I had a first bracket: you’ve cooked away mmm fast break until bitter a potential chin, nose, cooked away mmm quotation. Chin nose do push a kid Okamoto be do the upload the code to their own decay. A partial double quotation use correlation a precious Demi single quotation.
You scurry cover for a run, but only click curry. So may they come again. Even the program does successfully run hot China Karen it a pool like duper, shape, Akira come see, Nova har could Hebei judy Abner duper che, who I up like a double quotation and I do single condition, never good the way I shall go to booster bar changeup Pythonic Kaimuki, so output, cockatoo, Tasha read ever children. I’r rachel is a variable.
A variable shop, the deck into the Apollo, make hell current. Even I won’t have any deeksha with it and so restarts could have Bangladesh interval. Bangla, Ashby pulley would turn she thought. Coupe. Charles babbage JJ information, GUI button hi a actually variable security variables from porque up Nora to hulu, clear, which and Joan quite a variable up another key deck. Hi para games. Sharpener cutter only variable M on gene easier to blow ot neo to change.
I German Abner boyish landscape on a road, I’m not just into asshole of a big family, what to say to her with a machete keen to show true if I may keep the Abner boyish, booty, neo to change, shape and age. Eighteen step I take into variable. I like to show you turn me jerk on Facebook, a after you can connect a post current token possibility hotel Abner door stuck in the corner to like hi ed got the pony, keep those shitty exo-k Modesto like wage.
I hate you put in Utah like go change it change it change ho. Take into variable should inquire on. They can unblock the kitchen if the ambos of equal to move upon a leaky temper upper hombre is dilemma. Sorry Tamra about SD, lambda, equal D, solo dilemma. Then Umbra sba equal, the shuttle up DARPA a a bra. Ever it are output to take book, monitor, output, white tunic. You have a deck, a hot-shit each other.
I worship, printable topic print PA equals XI. Node atomic bomb air betray is leaked away, like a poor average. The run button, a click curry the way I’m not victor Babu output, a shooter addictive achieve you. Can it I’m reporter my variable lacquer style tech to calculate variable like her to know put them up like it is subject: licked awake in a subjective Umbra? Is you scratching that probability equals into the table a doubt? Pouring a blur J information tachanka become shop, daughter, Siddalee lake, her poor opera previa, the bracket and v3 she’s subject a lately output is away shaded exa job a it can elected in each category.
Even again, tumblr tEEN TOP variable legacy came to a camera out. Push of addictive Archie anthem last victim, you know, Karen ever with your home Kuno variable lack of it talkin printing shop. A last trick. Today, cutaway shop called a Decker option outside the machete Emre arrow porridge, a chic book opposite or umrah variable can be liquefied FM variable concept, a key shader, some poor kid to clear tirana near a key.
I’r going to arrow cracked a variable that hike gem on like equal x upon Josh, then print ta-dah like delay, run button and economically kirbo talk on I’m extra punch. Esther output is away dicta Boche, I’m racked up variable K, declare Cola. It can act official character way up in supreme territory, variable as subject alike built on him take any kind of bracket. You score a job in a happening to the bracket.
Sorry kanakam quotation, chin! No, you score! A Havana opposes the quotations in no use Korean public. In traitor successfully are run Havana, a chakra parry, a polar concept, uploader catch, a clear which him air for a amrap variable type near catch scorebook, variable, mulatto, teen, praça, bottom T, low string, D, 30, hello, number, FM, t, t OT, hello, flute bottom. I am restraining a catabolic string, hello’ molotov j-job do da do do not her own.
A variable declare core ahoy dobisch ATK string, malahide stringer, Vijay, Khanna, caciotta /, a German nom nom Kimba. Oh no karo nam came back on later kin, McCullough paragraph or top. I’r Rob or know by work, Ray J variable technically occur. Bo che, take him to stream. Quite a stringer on the head table. Brother cuz are clear, homogeneous term yeah, one name you can. I am subject, namely club named a equal.
The last echo name Eric an affinity crank above or cut the Bourbon Pinero kin, bachou thorough now applique over, should buy work of table a connector shop, though German I mean I’m on, am too late. L’r in a Thai hello, mulatto stream airport amra it again print cool book. It can t be shy of my cake to hell right away. Applicant stream declare Corbin dock hone up like a overjoyed string and she sobbed a decade, double quotation and veto reductive obey.
So the ethnicity Nara can so be him to print Havana. They’re gone. It is successful leak into output. It should be amia one namkha, dicta patchy economies. The quotations in no time, surely at the table, take on a TV show. I mean for our new for a. I mean the run, but when a clip curry the way they can eating in to successfully run hot China, what’s up stream variable it up like a subsidy, a turn for equal Chin movie, a tarp or a DJ variable tallied been shaken or show double quotation.
Peter Iraq, the Hebei 10 Quinto eater successfully run Javed airport after emridge a variable Tanika, conversatio low number number hula bullet of shankha shouts. For me, Shankar Jaya, Shankara is a variable. Take a declare chorus of a shitty hello number number, a bird. We poke our egg in teaser from Dewey float into the hollow, punish, Anka J variable. A of napoo notion can declare carbon she’ll, ok, integer, Bala fight a bomb J variable a up.
My float declare sorry door show mix, Shankara Ditchley a curveball. She cool, ok, fluid Paulo fire turn amra intezaar. Declare, curry, I’m not to be is leaky is like her four equally boo. Equally amra, auto Apollo roll, a clump it correct official calendar. Coon is therefore a up Nikki up nom nom before cut the power of the power good turbine, now a plug it into a connector, strong, kebab or cut away at each honker birthday.
Hello number variable it can. I am break people no Shankar Babar Karrueche tie. I take the integer, I’m ready Pond Road or show me pass you scream so alt visible AP flute. Did you be a variable T blow boolean boolean air concept of not read Potomac to clear Carini, boolean, hello, Evan, hyper variable j j variable across honking baku? No need to shop Dutch heritage Anna need to shove. The volt Umrah through kimba, false k, buchiach’ a boolean variable, a do.
They output assure with definite, I say, Taylor, true Kimba, false a do of the boolean variable que trabajar con ahoy yeah, I’m City bully. I am a programmer equal. I mean Kim two variable Alicia babe Cornish, Wonka in BA no going to stop the power cut the power behind it. Can I work a bolt of a hair and program, one nah nah, I’m programming nah, i’m rishabh in life, a taking? Yes, but no Kim a negative, positive negative of the power cord into it kind of programming and especially fight on programming.
It up like a true Kimba falls. Backward coulda been a tutor of thee, come on Judy Q approach, the correct, so the up Nikki approach to correct the shaky Abner bondo tahole up a little bit: hair Kimba nah, a kick-ass joke on Hamra programming. Your kid record boy talk on ethnic, a to the table, a true Kimba, false fake it a boolean. You can erect a Bishoy character bit up like a true Kimba, false a bush.
I borrow hot air, Oh crash record, AHA baby, I’m making a truly clump. True, literally, they can the wrong touch injury. Is it a wrong changing, say money, it take him to shorty bubble net average. He even attacked us boolean. As you know, true kin. The false special word it take is Dubin. Now, like a fighter waiter put it on top or even Havana, I’m not to be true. Jk t like he like heat over the collector wrong boots on Hawaii into a Merida from Bordeaux Hutton little I’m talking into it are wrong.
Corey Burton Haga. Lo by true can befall a Kirk III up like a over showing both appear occur, a shrew good to have a mullet or umrah up. Motorcade output variable a variable type, cool or concept: cool, ok, sha-booyah, no Chester, Karrueche, even Ambra Damon cannot cast a candy camera Eric porridge, a web worker Booker joke on i’m aero package in his chicken ebook talk on she look exit. Do like a mother bear work or, after a booster, bourbon a poor bay, Amram unit or variable in variable type of output.
A concept of a clear conscience to Karachi is an American caucus day: honey cat Umbra Alec to porridge a cooker on puta madre cool; okay. Polish car Bobby booster Hebei a shock, URI concept, cooler, Pushkar power boost every 10 yo te conozco neshama quinoa, quinoa, kannada nisha for the boosters. How much? Aha, I will share mother k, corn boxer, Johnathan Capo’s, enjoy Schuster Tec, been a logic Ben
” All right, so today, We have a special guest Alycia from Sucuri. Thank you so much for coming on today. Yeah thanks, I’m happy to be here Awesome, so we’re Talking about what is a CMS and which one should you Use for your website, Can you tell us a little Bit about what a CMS is So CMS stands for. Content management system and it’s basically an easier way to put pages, live on your Website or blog post manage your image media Library all that kinda stuff Awesome and now, let’s Go over the top three CMSs, I’m going to be a little bit! Biased in this episode, That’s my disclaimer right there, I’m going to start with WordPress WordPress is the most popular Content management system out there today powers Over 1/3 of the internet, It has tons of plug-ins tons of options and it’s pretty resourceful And probably my favorite Reason for why I use WordPress is the community behind it.
They’re such a large community that that just all comes Together, there’s meetups, there’s wordcamps and everyone just helps each other out For sure, and I mean with 40,000 plugins almost like you, have no end to the kind of functionality you can add to your CMS Absolutely. So what are some other CMSs that we can possibly use For sure, yeah,,’cause everybody’s heard of WordPress, so Yeah Drupal is another very popular one.
It’s been described to me as Kinda, like a Swiss cheese, you need to be a bit more Technical to use Drupal, but it does have a lot Of different features compared to WordPress, it has A different user experience and ultimately it’s been Used for a lot of things like government websites, And that kinda thing because of its ability to be a little more secure in some areas: yeah Yeah and it’s definitely One not for like the smaller business type sites as Enterprise or large Corporation type sites right, Yeah, yeah for sure Yeah Joomla – is another really Popular one as well, It’s got a really good.
Community – and it’s got, I think, the second highest Market share after WordPress, Although WordPress is Like 30 % – and I think, like It’s, a giant Joomla’s like 6 %, so just A little bit of a gap there between the top two but Joomla’s, also a really awesome CMS to use You wan na make sure that you’re using the most latest version. If possible, There are two active versions: Available that you can use Yeah, you definitely wan na stay on the most recent branch.
Of any CMS, if possible, Yeah that’s just a best practice there. All right. Let’s talk! About really figuring out, which one should you use right Like what are some of the first Steps we wan na think about. Definitely you wan na Make sure that you know what your requirements Are for your website, So how does it need to Be for your users to use! How are you going to go about? Actually creating posts and what are the processes that you’re going to use as part of that And then once you have all that you can kinda look at each CMS and see what are the extensions and Themes that are available And see if they’ll match the Requirements that you have for your website, That makes sense and It all comes down to figuring out what’s right for you Like, I will stand by WordPress all day, but WordPress may not be Right for your situations, Figuring out those requirements, With those applications are super important, Yeah and usually a Lot of the CMS websites have a great community Because they are open-source, So tell us a little about open-source Yeah for sure.
So all Those top three CMSs they’re open-source they’re, also free, which is very important, Open-source, basically Means that the source code used to build WordPress Or Drupal or Joomal, it’s all open and available, and anybody can contribute to it as well Right on So that just means it’s Constantly being improved by the community and the Community’s also checking to make sure that, what’s Being added is secure All right, so we want our Website to look good right, So is that something to think About when we’re choosing what platform we use and how easy it is to create those sites Totally so different themes will have different attributes like They may have a sidebar on the left or the right, Or they may be all one column in a never-ending scrolling website.
Different themes will Allow you to accomplish, maybe what you need by Having custom backgrounds or custom menus, so you Wan na look at the options for your theme and you also don’t wan na discount like premium themes, A lot of premium themes out, there will add extra functionality, So you’re, essentially Paying for the theme, even though the CMS is free, That’s an awesome option. There’s premium plug-ins as well, Depending on what you Need the default themes that come with it are Sometimes a little restrictive, so you wan na take a look at What the default themes are: Try some different free themes and see what the options are to get your site to look.
The way you want it to Yeah and what was kind Of controversial at first in WordPress and 5.0 remember Gutenberg, Oh yeah, Gutenberg is essentially The new WordPress editor, The whole point is to kinda mirror the printing press of just Blocks and everything else, Yeah, what you see is what you get So as you’re typing — Whizzy, wig, Yeah whizzy wig, Thank you So as you’re typing Yeah, you see exactly what you would see on the website, So that comes default by WordPress.
It has made the experience. Especially for first-time users easier to create, Then there are page Builders like Elementor or Beaver Builder or WPBakery Builder, that makes that user-experience A little bit easier, If you’re going on the WordPress realm and really want something: That’s pretty customizable, you don’t have to be a Web developer or guru to build that website For sure CMSs are having to Make things a little easier, You know, there’s a lot of Different places out there that are creating website builders that are super easy for people to use, and so it’s helpful for These open-source CMSs to make the user-experience a little easier All right.
So another thing we probably have to think about. Is the hosting requirements We’re going to need for our applications? Talk us through a little Bit of what that looks like For sure, so most of These are running on PHP, so you want the most Updated version of PHP, especially if you want The latest features and to make sure that you’re Getting those security updates? Yes, So that’s really important.
A lot of hosting companies will offer one-click Install for most of these major CMS applications, Some hosting companies Especially when I first started creating websites – and I Was on a super budget, but also a very secure host, it took me a long time. It took me like three days to install WordPress and they have a famous 5-minute install You wan na look and see, and maybe talk to your hosting company.
About what the options are for getting this CMS Installed on your server Right,,’cause, taking three Days to get a website going just the beginning is not Something you wan na do There’s a lot of places out there that will do managed hosting Especially with WordPress There’s managed WordPress that has just already automatically installed some extra security features And then what most people End up going with is like a cPanel type Hosting Since it does have that one-click install with Installatron or Softaculous, Whatever they’re, using Totally Couple of clicks of a button and then it’s there, You can start building and Designing, however, you want All right, so the real Reason I brought you on to this.
Episode is really talking about security with CMSs They’re open-source. You Constantly have to update them, so there’s lots of things. That we need to really think about to make sure Our stuff’s protected Totally well with It being open-source not only are all the good People contributing code, but all the bad people can Also, look at that code as well and find vulnerabilities. So that’s something that a lot of people are concerned about.
Especially with WordPress being so popular, it is a large target. The CMS itself is actually quite secure because there’s a great Community checking things out. You wan na make sure that you’re Not installing more plug-ins than you need Trying to make sure that you’re keeping everything up to date. If you have a managed solution, They’ll, do it for you, Which is awesome. Yup, You wan na make sure That you have something some kind of security plug-in That’s monitoring your site, letting you know if there is A problem that they detect There are some that can also Add features for protection like adding Two-Factor Authentication, which is a second password on your phone that you need to enter in Order to get into your website There’s all kinds of Cool security, plug-ins security utilities that You can use with your CMS Yeah, I know with WordPress the top security plug-ins That come to mind, of course, Sucuri has This security plug-in, but there’s also Wordfence And then with having an SSL on your site, super important just to Encrypt that password,’cause, you have to login The beauty with CMSs that You can access them anywhere right, Yup, So you wan na make sure that wherever you’re accessing’em Your password isn’t being sniffed out by someone in the middle Yeah.
You wan na, be careful. You don’t wan na. Maybe do It in like an airport or coffee shop, Wi-Fi Unless you’re using a VPN.’Cause, if you are sitting There on public, Wi-Fi and there’s a hacker sitting next to you, they could sniff your password As you’re typing it in And then the next thing you know, there’s a bunch of spam pages on your site that you need to deal with. So what about firewall? I’ve heard that it should be important.
Should be added to the site, What’s the validity with that? Definitely one of the nice things about a website firewall Is that it will virtually patch your CMS? So if There is a security issue, essentially the firewall’s Taking care of that, It surrounds your website. And if somebody’s trying to exploit a vulnerable Plug-In on your site, the firewall will catch. That attempt and block it They’ll see a blocking page.
Meanwhile, all of your legitimate Visitors are being sped-up because of the global Network of the firewall and content delivery network, So we’ve figured out what Cms we’re wanting to use We’ve got it installed, how Do we go about documentation, learning the program itself? There are some awesome Resources out there, You talked about WordPress WPBeginner has some awesome? Training guides and tutorials There’s an awesome community.
For all of these CMSs, with very active, like support forums, That’s a great way to go about it And then, obviously, if you have a developer, Or something like that, that’s helping you get some customization. They can usually help you. You wan na make sure that You’re documenting everything as part of your website as well, so It’s just going to help you Later on down the line, if you know you have a List of all the users, all the plug-ins and that kind of stuff and you’re keeping that up-to-date Yeah, especially if you Have people on your team that needs to access the site, Giving them documentation on What they should be accessing, what they shouldn’t be, because sometimes the wrong click can Make just chaos happen Totally and good user passwords making sure that you’ve Got the right role levels assigned to your users? Whether they’re just an editor or author or contributor Right Those roles are usually built into the CMS to allow you to make Sure they can only access what they should be allowed to access.
You only wan na grant admin privileges to somebody for as long as they need it, and that kind of thing Now, with this website, I know many of the entrepreneurs or even solopreneurs out there with their stuff, has Many hats to wear right, Sometimes maintaining it, isn’t always something that they have time for Yeah. It may not be top of mind Right. What should we be? Doing with those updates Yeah, definitely I would say that it’s very important to make sure that you always retain Access to your property, your web property, So I’ve seen cases where a developer will leave a client and Leave with the passwords and then you can’t get Into your hosting account, or you can’t into WordPress, It’s not ideal, so make sure you always have access to those things And make sure that you’re just practicing safe security practices.
Throughout all of it Right on and with WordPress and Joomla everything else, we Talked about it earlier, make sure you’re at least going in there every now and then to update It to the next latest version: It’s not only for performance, but it is for security Yeah for sure I mean with some CMSs there might be different branches that are still being actively developed So having a firewall That can virtually patch and make sure if there Are any vulnerabilities you have a little bit of an extra window.
‘Cause whenever there’s a Security update released, the hackers are looking going. “: Okay, here’s the old file; “, here’s the new file; oh look: “! There’s the security flaw!”, So it can be –. Then send all our bots out Totally it can a matter of minutes hours after a security patch is released before there’s active attacks in the wild So definitely update your Sites as soon as possible, Auto-updates are amazing, WordPress has auto-updates on most hosts, Yeah and or you can hire developers like most designers or Developers will have like a website care plan, so you Can them just do it for you, If you’re using WordPress, Godaddy ProSites or ManageWP has the one-click updates.
So you can update all your Plug-Ins and your themes, You even have a safe update option. So what it does is It’ll update your site, take a snapshot of before and after and make sure they’re all the same. And if there’s an issue It’ll retract, back to it It’s a free option for you Yeah, that’s perfect! You hit on a good point, It’s not a set it and forget. It thing with a website: You need to make sure that You’re maintaining it And that it’s part of your business, it’s how your business looks.
So you should definitely Make sure that you have some kind of plan for keeping It up-to-date and maintained All right. The last point that we should really talk about is really your time and investment with the CMS of your choice. Talk us through a little Bit of that about that For sure we’ll you Wan na go in and realize that it’s going to take you Time to setup all the pages that you want Right: It may take you time to find the right plug-ins, so you wan na kinda think through whether You want to hire somebody or get some help with that To find the functionality and the look and feel that you’re after Definitely budget when It comes to free CMSs.
Well, you don’t have to pay for the CMS. So that’s helpful Right! But it’s customization and security and all Those things that you definitely wan na consider as part of the whole package of having a website On-going costs for domain WHOIS privacy, SSL certificates, Right firewall, All that kind of stuff, All that good things Totally yeah, there’s A lot of accessories that go on with having a website, So you wan na figure like I said at the beginning what those requirements are And then make sure you have a plan for how you’re going to budget and the timelines around When you wan na launch Perfect and with Drupal And Joomla they are, they do have that smaller market share, So there’s really specific requirements of when you wan na use those applications.
Those developers that you hire for Drupal or Joomla might cost more than a WordPress designer as well For sure yeah, and you wan na make sure that you’re really looking at the work that the developer has done and make sure that it Matches what you’re, after There’s lots of great Websites out there that you know can tell you more About how to pick a developer depending on what you’re after Well? Thank you so much for Coming out on the show today and helping us figuring Out what a CMS is why we should use one You’ve been awesome Thanks my pleasure.
Well, if you liked this article go ahead and smash that, like button, add a comment below on Something that you’ve learned and subscribe to this blog and ring that bell, if you’d like to see these episodes first, This is “ The Journey.,” we’ll see you next time.
I want to fight with you to really thank you. Truly, I’m not fightin. It basically sushi fish here, that’s Coco. What so main folder keep utilities stop engines? Oh I want this. I appreciate an unexpected if I was a boom. Bitches shut up programs shampoos here Janice. It won’t point about the prohibition, a gravel road change it to 20 she’s effective June with Umbra she’s uh.
Back to this vitamin egg do busy kazoo! That’s a beauty: she kebab blogs are a blue. She kicks and parsley lips close shows it put the bunny ear, for it should be active, but it still it can give me taro or interpret the programming language which it can under Python. Simple cash code table today would be from the computer screen is Julie. She she – I was a brochure which alone can open book hermano tooth into Karrueche, put’em hello.
I turn a position. I’r not. The Google is a search goody, top programming language 2020, Tommy, I’m predictable by tundra, che egg dome, f-number e TT o current a blow by Tony. Bravo: heart fight on machine learning, diffusion intelligence, Kimba web development and mocha Java hardcore aquatic ape enter a mobile, app development of items in it in a geometry of a wood chip in for a up, another Juneau hammer should take the solution.
Third base. She develop programming. Circuitry kanakam IDE download, Corvina ID. You know, mulatto jaqen, a program, decay compile clarify a Caronia for the nacho-cheese current computer AIT download crack it to jungle, of whom no connection with a photonic a familiar part, a piranha egg. Do it in try correct time for programming? It’s headed by a timer bubonic bundu Kim Bauer needs a shadow, Putin, Putin OHA so going to come.
Id download, Corvina Abner computer is Judy available, Wi-Fi connection okay, so they have not a softer tip. I work with different Google as a search Corbin, our EP l, dot ID dignity, put AAT softer province, shade it along incorrect Abner gmail account their the register, Corbin color or a language. He shall be Python touches cordovan tahole of not air. Come octopus Pavan they own. A kanay Python, three point: eight point: one dvorkovich, a jetty Python, a shop see latest fashion.
They want a pure class. We could develop our simulator, which is from I lack going to tycoon, welcome ID downloaded, Shyamalan, RJ Cooper, J, a customer. Could the param Toby on a cable topology? I wanted to available Wi-Fi connection named Alec Eger book Hamish, Hamilton, read, say after AI de Beauvoir could the button Tony it is specially Python and juno te Kura 80 download could therefore there could be seekers to Havana topo, Judy up Naja Mellish, a MOOC in horn.
So another common books at Jonathan progeny, Umbra, a tear for Allah, DirecTV duty record book. It can Iraq the shots. They said, you’re the only K about both of our a Jay. I was at the computer, the laptop Nate. Okay, I’m going to give up a programming code book now the schaumschau Shyamalan row, its head show the of narcotic the Android phone. Take a is your sister up, not programming, shrew courage, you know I mean so application and humble.
Is it sigil I’ve not a place to take a coupe shows a download create programming should with the Bourbon. Both of my jet is got the whole. Your decoder didn’t cook paper. Take the app it a place to recoup Shoji page 7 among download core upon another. It about could the could be shipped Acosta Havana. The way it is how much leverage a tibia more could tape. Removal of show em be tucked. The hub is OD after MB, not a get over Finity Bauer.
Could the Bourbon now only cover both of our edgy? I wanted more so maybe talking of internet connection tagging alcoholic he could go so Vitara aft power could different. Aft after offline a power cut, the power will itself brother, Eric pepper Kosovo, g q, python 3 l android for python for android integrate the offline app. Do 10 g connect, download, Karenin evan programming sugar. It in. I should applaud schakal programming so much in Cudahy.
She blows hard, indeed, ability so not ever programming each object. Amra equals same also tinted in Ipoh bottom develop output, the theoretical of variable. I want it a little variable type put to me: output, some pork, it to Bellini output, an active short uterine delay after output. Every shuttle could charge a booster bargain, I’m not Judy. Google help is Ajay among shaken and j-rock on am resorts, Karachi top programming language 2020.
Talk on Google came to a mother. Arrow calm case would result occasion Jessica. I’r the on internal information. Victor Chi is the information below you looking to output. It’s a direct order on this. After I’d open facebook AJ, I brought their phone number Kim the Gmail ID the a tarp or a password. They login a click. Current talking to Facebook up at the news pretty near Jack, is a Facebook about the news pretty near: yellow attack him to output, children ever ah Jack Python programming, amra corrector code, an output give her back and book output.
As you know, Python Abhishek to shop the beber core avoid shaking color print print like helper, a after they’re, both oh, my first bracket did the hobbit first predator. With her a quotation signal is cut away after a single quotation, came a double rotation jq- ever cook. The parens so by / Shui character with duper shake, do pressure quotation, duty, aikidoka, motorway, a bark rotational victory, amra supposed hola mi amor nam, tok click la let her pour a me to the Ranbir Tony Lee, curry Toby it can output is awake in term 1.
Lambda Big Dipper Qi or thought I’m Jay could tell Islam Shaytan out, put it in the AMIA one ant addictive achi ogre they quite to be sure to kill right away. Shaitan, hello print. Let’s assume oil in the / show printed Peter show to half their voter base Jody. It have got a deal Toby it color in to change Havana arkovich in snaffle eating into cash of Havana. Sorry, I’m not a unit collector change, Vegas, a.
J, kuna ID to the back wall, current of a pigpen J bring through Tata. Lately it all wrong to put even with it’s a romper. You go through Qi, money et, that’s cool babe it! Sarah! I wish I had a first bracket: you’ve cooked away mmm fast break until bitter a potential chin, nose, cooked away mmm quotation. Chin nose do push a kid Okamoto be do the upload the code to their own decay. A partial double quotation use correlation a precious Demi single quotation.
You scurry cover for a run, but only click curry. So may they come again. Even the program does successfully run hot China Karen it a pool like duper, shape, Akira come see, Nova har could Hebei judy Abner duper che, who I up like a double quotation and I do single condition, never good the way I shall go to booster bar changeup Pythonic Kaimuki, so output, cockatoo, Tasha read ever children. I’r rachel is a variable.
A variable shop, the deck into the Apollo, make hell current. Even I won’t have any deeksha with it and so restarts could have Bangladesh interval. Bangla, Ashby pulley would turn she thought. Coupe. Charles babbage JJ information, GUI button hi a actually variable security variables from porque up Nora to hulu, clear, which and Joan quite a variable up another key deck. Hi para games. Sharpener cutter only variable M on gene easier to blow ot neo to change.
I German Abner boyish landscape on a road, I’m not just into asshole of a big family, what to say to her with a machete keen to show true if I may keep the Abner boyish, booty, neo to change, shape and age. Eighteen step I take into variable. I like to show you turn me jerk on Facebook, a after you can connect a post current token possibility hotel Abner door stuck in the corner to like hi ed got the pony, keep those shitty exo-k Modesto like wage.
I hate you put in Utah like go change it change it change ho. Take into variable should inquire on. They can unblock the kitchen if the ambos of equal to move upon a leaky temper upper hombre is dilemma. Sorry Tamra about SD, lambda, equal D, solo dilemma. Then Umbra sba equal, the shuttle up DARPA a a bra. Ever it are output to take book, monitor, output, white tunic. You have a deck, a hot-shit each other.
I worship, printable topic print PA equals XI. Node atomic bomb air betray is leaked away, like a poor average. The run button, a click curry the way I’m not victor Babu output, a shooter addictive achieve you. Can it I’m reporter my variable lacquer style tech to calculate variable like her to know put them up like it is subject: licked awake in a subjective Umbra? Is you scratching that probability equals into the table a doubt? Pouring a blur J information tachanka become shop, daughter, Siddalee lake, her poor opera previa, the bracket and v3 she’s subject a lately output is away shaded exa job a it can elected in each category.
Even again, tumblr tEEN TOP variable legacy came to a camera out. Push of addictive Archie anthem last victim, you know, Karen ever with your home Kuno variable lack of it talkin printing shop. A last trick. Today, cutaway shop called a Decker option outside the machete Emre arrow porridge, a chic book opposite or umrah variable can be liquefied FM variable concept, a key shader, some poor kid to clear tirana near a key.
I’r going to arrow cracked a variable that hike gem on like equal x upon Josh, then print ta-dah like delay, run button and economically kirbo talk on I’m extra punch. Esther output is away dicta Boche, I’m racked up variable K, declare Cola. It can act official character way up in supreme territory, variable as subject alike built on him take any kind of bracket. You score a job in a happening to the bracket.
Sorry kanakam quotation, chin! No, you score! A Havana opposes the quotations in no use Korean public. In traitor successfully are run Havana, a chakra parry, a polar concept, uploader catch, a clear which him air for a amrap variable type near catch scorebook, variable, mulatto, teen, praça, bottom T, low string, D, 30, hello, number, FM, t, t OT, hello, flute bottom. I am restraining a catabolic string, hello’ molotov j-job do da do do not her own.
A variable declare core ahoy dobisch ATK string, malahide stringer, Vijay, Khanna, caciotta /, a German nom nom Kimba. Oh no karo nam came back on later kin, McCullough paragraph or top. I’r Rob or know by work, Ray J variable technically occur. Bo che, take him to stream. Quite a stringer on the head table. Brother cuz are clear, homogeneous term yeah, one name you can. I am subject, namely club named a equal.
The last echo name Eric an affinity crank above or cut the Bourbon Pinero kin, bachou thorough now applique over, should buy work of table a connector shop, though German I mean I’m on, am too late. L’r in a Thai hello, mulatto stream airport amra it again print cool book. It can t be shy of my cake to hell right away. Applicant stream declare Corbin dock hone up like a overjoyed string and she sobbed a decade, double quotation and veto reductive obey.
So the ethnicity Nara can so be him to print Havana. They’re gone. It is successful leak into output. It should be amia one namkha, dicta patchy economies. The quotations in no time, surely at the table, take on a TV show. I mean for our new for a. I mean the run, but when a clip curry the way they can eating in to successfully run hot China, what’s up stream variable it up like a subsidy, a turn for equal Chin movie, a tarp or a DJ variable tallied been shaken or show double quotation.
Peter Iraq, the Hebei 10 Quinto eater successfully run Javed airport after emridge a variable Tanika, conversatio low number number hula bullet of shankha shouts. For me, Shankar Jaya, Shankara is a variable. Take a declare chorus of a shitty hello number number, a bird. We poke our egg in teaser from Dewey float into the hollow, punish, Anka J variable. A of napoo notion can declare carbon she’ll, ok, integer, Bala fight a bomb J variable a up.
My float declare sorry door show mix, Shankara Ditchley a curveball. She cool, ok, fluid Paulo fire turn amra intezaar. Declare, curry, I’m not to be is leaky is like her four equally boo. Equally amra, auto Apollo roll, a clump it correct official calendar. Coon is therefore a up Nikki up nom nom before cut the power of the power good turbine, now a plug it into a connector, strong, kebab or cut away at each honker birthday.
Hello number variable it can. I am break people no Shankar Babar Karrueche tie. I take the integer, I’m ready Pond Road or show me pass you scream so alt visible AP flute. Did you be a variable T blow boolean boolean air concept of not read Potomac to clear Carini, boolean, hello, Evan, hyper variable j j variable across honking baku? No need to shop Dutch heritage Anna need to shove. The volt Umrah through kimba, false k, buchiach’ a boolean variable, a do.
They output assure with definite, I say, Taylor, true Kimba, false a do of the boolean variable que trabajar con ahoy yeah, I’m City bully. I am a programmer equal. I mean Kim two variable Alicia babe Cornish, Wonka in BA no going to stop the power cut the power behind it. Can I work a bolt of a hair and program, one nah nah, I’m programming nah, i’m rishabh in life, a taking? Yes, but no Kim a negative, positive negative of the power cord into it kind of programming and especially fight on programming.
It up like a true Kimba falls. Backward coulda been a tutor of thee, come on Judy Q approach, the correct, so the up Nikki approach to correct the shaky Abner bondo tahole up a little bit: hair Kimba nah, a kick-ass joke on Hamra programming. Your kid record boy talk on ethnic, a to the table, a true Kimba, false fake it a boolean. You can erect a Bishoy character bit up like a true Kimba, false a bush.
I borrow hot air, Oh crash record, AHA baby, I’m making a truly clump. True, literally, they can the wrong touch injury. Is it a wrong changing, say money, it take him to shorty bubble net average. He even attacked us boolean. As you know, true kin. The false special word it take is Dubin. Now, like a fighter waiter put it on top or even Havana, I’m not to be true. Jk t like he like heat over the collector wrong boots on Hawaii into a Merida from Bordeaux Hutton little I’m talking into it are wrong.
Corey Burton Haga. Lo by true can befall a Kirk III up like a over showing both appear occur, a shrew good to have a mullet or umrah up. Motorcade output variable a variable type, cool or concept: cool, ok, sha-booyah, no Chester, Karrueche, even Ambra Damon cannot cast a candy camera Eric porridge, a web worker Booker joke on i’m aero package in his chicken ebook talk on she look exit. Do like a mother bear work or, after a booster, bourbon a poor bay, Amram unit or variable in variable type of output.
A concept of a clear conscience to Karachi is an American caucus day: honey cat Umbra Alec to porridge a cooker on puta madre cool; okay. Polish car Bobby booster Hebei a shock, URI concept, cooler, Pushkar power boost every 10 yo te conozco neshama quinoa, quinoa, kannada nisha for the boosters. How much? Aha, I will share mother k, corn boxer, Johnathan Capo’s, enjoy Schuster Tec, been a logic Ben
Jimmy's Internet Marketing Business Blog 