Transcript

00:08 foreign
00:15 everybody this is Joshua from
00:17 stacksweaver today I want to talk to you
00:19 about my new stack cloudflare Dev tools
00:21 that I just released
00:22 a lot of you may ask what is cloudflare
00:24 devtools and how will this help me with
00:26 my websites
00:27 first let's start off with what is
00:28 cloudflare cloudflare is a Content
00:31 delivery Network that serves up cached
00:34 versions of your website to users around
00:36 the world if you have a server in the
00:38 United States and someone is browsing
00:39 from England cloudflare will actually
00:41 serve up cached content from a local
00:43 server in England allowing for faster
00:45 speeds on your website for those of us
00:48 who utilize a CMS based system to edit
00:50 our websites struggle with cloudflare is
00:53 making changes to your site while the
00:54 cache is active when you go to change an
00:56 image that's already been on your
00:58 website you won't see those changes
01:00 reflected immediately cloudflare will
01:02 still serve up the cached version of
01:04 your image this is why cloudflare has a
01:07 tool called development mode by turning
01:09 on development mode you bypass their
01:11 cache for three hours allowing you to
01:13 make changes and see them instantly on
01:15 your website
01:16 now I'll turn this back off here on this
01:18 website now you'll see here on this
01:20 visit edmunds.com website that in the
01:23 last 30 days they've had 30 000 unique
01:26 visitors
01:27 4.08 million requests and you see here
01:30 that they have 168 gigabytes cached and
01:34 a total of 239 gigabytes sir that means
01:37 that there was 239 gigabytes of requests
01:40 to my web server that was not served by
01:43 my web server but served by cloudflare
01:45 instead this means that cloudflare saved
01:47 me 239 gigabytes of bandwidth from
01:50 impacting my server performance this is
01:52 an amazing feature to have to allow my
01:56 web server to host more websites without
01:58 being overrun by requests my stack
02:01 allows you to turn on cloudflare dev
02:03 mode from your website without having to
02:06 log in to cloudflare themselves great
02:08 example of this would be the visit admin
02:10 site that I have here I don't edit the
02:12 content but somebody else does this
02:14 would allow them to turn on dev mode
02:15 without logging into my cloudflare
02:17 account this is why I made cloudfire Dev
02:20 tools let's have a look at the visit
02:22 admin site here you'll see here in the
02:24 admin they actually have a turn on dev
02:26 mode button for cloudflare Dev mode if
02:29 they're admin logs in and needs to make
02:30 edits they just click the button to turn
02:32 on devmob and you'll see here that it
02:34 turns on
02:37 and if we refresh the page over here on
02:39 cloudflare you'll see that devmode has
02:41 indeed turned on
02:43 all of this was done from the back end
02:44 of their website not requiring me to
02:47 help them out with it now what's also
02:48 cool is there is an additional button
02:51 that comes within the stack which is
02:52 Purge cache so this allows them to press
02:55 this purge cache button and the purge
02:57 cache get initiated and it will actually
02:59 clear out the cloudflare's cache of your
03:02 domain
03:03 if you're doing a lot of updates you
03:05 know you first you come in turn on dev
03:06 mode
03:07 and then from there you can make all
03:11 your changes do everything you need to
03:12 do then you can go and Purge cache and
03:15 then you're good to go
03:16 but here is an example of what comes
03:18 with the cloudflare dev tools it
03:20 actually has three child Stacks allowing
03:23 you to customize how you want the data
03:24 to show up on your website
03:26 the first stack is the dev mode status
03:29 so this will either say on or off if we
03:32 turn this on you'll see here the status
03:34 says it's on if you refresh the page it
03:36 will refresh with the current status on
03:39 or off so this could be on a multitude
03:41 of pages at the top in the admin so as
03:44 you browse from page to page it will let
03:45 you know what the status is and then you
03:48 could have the button Elsewhere on the
03:49 page or maybe in a settings page same
03:51 with the purge button the second child
03:53 stack is the dev mode button this is the
03:55 button that allows you to actually
03:56 toggle development mode on cloudflare
03:58 simple thing you just click it and it
04:01 changes
04:02 and then it comes with The Purge cache
04:04 button so all of these can be run in one
04:07 stack right on top of each other or you
04:09 can have multiple stacks on the page and
04:11 put these where you need them to be
04:12 there's some cool customizable features
04:14 built into Cloud for devtools first of
04:16 all there is classes that are added to
04:18 the status button and to the toggle
04:20 button based on the status of cloudflare
04:23 Dev mode so if it's on you can Target
04:25 the on status via CSS and you can Target
04:28 the off status of via CSS this allows
04:31 you to colorize them or change the look
04:33 of them based on their status
04:36 how about we set this stack up from
04:38 scratch on stacksweaver
04:43 search for cloudfire devtools in your
04:45 stocks library and drag it onto your
04:47 page
04:49 whereas to get the initial setup done
04:51 we're going to need an API key a Zone ID
04:53 and a worker URL so let's get started
04:57 to get an API key we're going to go back
04:59 to cloudflare
05:01 now we're going to go with the
05:02 assumption that you've already set up
05:03 your domain with cloudflare this is not
05:06 going to be instructions on how to do
05:07 that you can check out cloudflare's
05:08 website to get that instructions
05:11 to get an API key you're just going to
05:13 click your profile on the top right and
05:15 then click on my profile and API tokens
05:18 what you need to set up with your API
05:20 token is these two settings here so I'm
05:23 just going to quickly screenshot this so
05:25 we have access to this
05:30 so we need Zone settings and Zone cache
05:33 Purge
05:34 so let's create a new token
05:39 and we're going to go custom token
05:41 so we're going to call this one
05:44 Stacks waiver
05:48 so we're looking at Zone
05:51 and we want settings
05:54 Zone settings
05:59 all right
06:00 edit
06:02 and we also need
06:05 Zone
06:07 cash Purge
06:10 perch
06:13 and then just continue on to summary
06:17 this looks good so we're going to create
06:18 token now that we have the token we're
06:21 going to copy it back to our stack in
06:23 rapidweaver
06:26 now we're looking for the Zone key now
06:28 we're using stacksweaver.com so we're
06:30 going to click back here
06:32 home go to stackswaver.com
06:35 if we scroll down here we have a Zone ID
06:40 and copy that
06:44 paste that in
06:46 and then we need a worker URL
06:49 so if you go like back on the cloudflare
06:52 go up to your dashboard and if you
06:54 scroll down here to workers and pages
06:56 and go create application
06:59 and we're going to go create worker
07:04 and it's just going to say hello world
07:06 but we're just going to say you know
07:09 this
07:14 is
07:16 uh test
07:22 and go deploy
07:27 now we're going to click on configure
07:28 worker now what we need out of this is
07:31 this domain so we're just going to copy
07:33 that out
07:39 I'm going to put that right into the
07:41 worker URL just going to button here
07:44 there was a mistake with this URL you
07:46 have to ensure that you start with https
07:51 at the beginning colon slash slash that
07:54 needs to be included
07:57 as well as at the very end you need to
07:59 have the following slashes as it says
08:01 right below just make sure you have that
08:03 slash at the end and HTTP at the
08:05 beginning
08:06 so now that we've got these three set up
08:09 we can press setup complete
08:12 and then we need to show the cloudflare
08:14 worker code and hit preview
08:18 now on my site here it is actually hard
08:20 to see the code just because I have my
08:23 site in dark mode but if you see in here
08:26 there is this box that shows up with all
08:28 the code you just hit command a and
08:30 select all and copy all of that code
08:34 and we're going to copy that code and
08:35 paste it into the cloudflare service
08:38 worker
08:40 if you head back to cloudflare
08:42 and do a quick edit
08:45 on your worker
08:48 and here you're just going to select all
08:50 and paste in the code from the stack
08:55 and you're going to go save and deploy
08:59 so you see here it was last deployed a
09:00 minute ago we are all good to go
09:03 all right so now we can go back to edit
09:07 mode
09:07 turn off the show Cloud for code and now
09:11 we can start building out what we want
09:12 this to look like
09:14 so first thing we're going to add here
09:16 is a status
09:19 and then I'm also going to add a button
09:24 and I want to add The Purge
09:27 perfect so now we have all three here
09:31 and inside of the dev mode status we
09:35 actually have some options for setting
09:37 label classes and the status classes so
09:40 the label is the stat the word status
09:43 here
09:43 and the status is what pops up
09:47 when you it checks for status whether
09:49 it's on or off
09:50 now if you want to change the language
09:52 out
09:53 on the stack we have the ability in the
09:57 primary cloudflare stack
10:00 so you'll see here that you can change
10:02 what loading means status
10:04 you know if Dev mode is on if dead mode
10:07 is off
10:08 to turn it off or to turn it on so in
10:11 this case I'm actually going to do some
10:12 customizing so here
10:15 we're gonna go where it says status and
10:17 we're actually going to say
10:20 staxweaver.com
10:25 and then
10:27 for on I'm actually going to change this
10:30 to
10:32 Dev mode on and Dev
10:37 mode off
10:41 perfect
10:43 and then turn Dev mode off or turn Dev
10:45 mode on and Purge cache that's all
10:48 perfectly fine
10:51 all right so let's go back to status now
10:54 what's really cool is if you're using
10:55 Foundation this supports the utility
10:57 classes that you can get out of
10:59 foundation so for instance I want my
11:01 label to be in H5
11:04 maybe an H6
11:06 and I'll do my status as an H6 as well
11:09 so now you see here that it's actually
11:11 taking on an H6 formatting just by
11:14 adding in those utility classes
11:17 now as for the button I want this to be
11:20 a small
11:21 and I want it to be radius
11:27 or maybe a large
11:29 no let's go smell
11:35 and the same thing for The Purge cache I
11:37 just want that to be small and have a
11:39 radius
11:41 perfect let's have a look at that
11:46 I don't think small is small enough so
11:49 maybe let's do tiny
11:55 yeah Tiny's good
12:01 perfect
12:03 so now we've got the status all set up
12:05 so now let's look actually at the button
12:08 so there is some information here on the
12:12 special classes that come with this
12:14 button stack
12:16 you see that it says CF button targets
12:19 just the button
12:20 CF Dev status button on targets the
12:23 button when Dev mode is on TF status
12:26 button off targets the button when the
12:27 dev mode is off
12:29 and then you have some options here to
12:31 preview Dev mode on in Dev mode off this
12:34 is for is allowing you to have a look at
12:35 the different button statuses what they
12:38 look like when they're on and off so
12:39 right now it's set just for blue that's
12:42 the standard so if we actually bring in
12:46 some swatches
12:52 and I want to Target let's see here the
12:54 background when it button is off so
12:58 we'll Dev mode status off
13:06 that Bunch button off and then we're
13:08 going to choose a color
13:10 and we're going to go with
13:12 for this
13:14 Dev mode is off we just want it to be
13:16 green
13:20 now because of that we also want to
13:22 change the font color
13:25 and we want it to be black
13:28 so green means it's off so cache is
13:31 working everything's good
13:33 now we want to work on the other button
13:35 if the status is on
13:38 if we go back here we'll copy the
13:43 status is on add another background
13:51 now see here that
13:53 turn Dev mode off is red
13:55 we have a look at that
13:58 I'll show you what the buttons would
14:00 look like so the green of course means
14:04 that Dev mode is off which means cache
14:08 is working and turn Dev mode off is red
14:11 because the current status of it is on
14:14 so with this
14:16 if the status came back that Dev mode
14:18 was off you'd get green buttons good to
14:21 go
14:22 and then if it came back as the mode is
14:25 on you'll get a red button that says to
14:27 turn it off now let's look at
14:29 customizing the status stack let's do
14:31 the same thing that we did to the dev
14:33 mode button let's turn on the preview
14:34 for Dev mode on and off so we can see
14:37 what that looks like but we're going to
14:39 change the font color
14:42 when Dev mode is off we want it to be
14:44 green
14:45 and now we're going to customize it when
14:46 it is on
14:52 now we've customized the off and on
14:55 statuses of the status as well as the
14:58 button now what I also want to do is I
15:00 do want to have this the stack on the
15:02 dashboard when I sign in I'm just going
15:04 to copy the stack quickly
15:06 and go into my admin dashboard
15:13 and if we have a look at my website
15:17 on the dashboard I want it right up here
15:20 in the admin area
15:24 I'm going to paste this in
15:27 and what we're going to do is duplicate
15:29 this column
15:31 and delete that out
15:36 let me drop this in now I don't want to
15:40 actually change any of the
15:44 I don't want the button or anything here
15:45 I just want the status on or off now I'm
15:48 just going to go back and grab our
15:51 swatches
15:54 maybe if Dev mode is on let's make this
15:58 a little bit different of a color make
15:59 it Orange
16:00 yeah let's do that on the other one as
16:03 well
16:04 those changes there we'll just do a
16:06 quick preview
16:08 see what this would look like
16:11 let's do a quick publish and see how
16:14 this looks
16:16 now we're just going to empty the cache
16:18 before we refresh the page
16:20 and let's see how the stack looks
16:23 so we're just going to load up the
16:25 settings page and see if it is working
16:27 and we can see here Dev mode is off and
16:29 if we press the button Dev mode turns on
16:32 and we can verify that just by
16:33 refreshing the cloud fire page and we
16:36 can see here that of course Dev mode is
16:38 now on
16:40 now if we want to see the status we put
16:42 on the dashboard we'll just go to the
16:44 dashboard and refresh and we'll see that
16:46 Dev mode is also on
16:49 and if we want to double check that the
16:51 status will function we can turn Dev
16:53 mode off manually refresh and indeed Dev
16:56 mode is now off just for fun I'm just
16:58 going to change some of the language
16:59 settings in here
17:01 and it's going to instead of it saying
17:02 sex waiver I want to say Dev mode and I
17:04 want it to say is on or is off and with
17:07 those changes here you see that Dev mode
17:09 is off
17:11 and if we want to go change that we head
17:13 over to settings
17:15 go down to our admin
17:17 and we can go turn Dev mode on all of
17:22 this will happen instantly and this
17:25 saves you from having to log into
17:26 cloudflare to toggle this mode you can
17:29 now just do it straight in from your
17:30 website
17:31 and of course after you've made all the
17:33 changes to your website you just click
17:35 on The Purge cache this will initiate
17:37 the removal of the cache on your
17:39 cloudflare servers
17:41 I hope you enjoy cloudflare Dev tools if
17:43 you have any questions reach out on the
17:44 community or email me at support
17:46 staxweaver.com
17:56 foreign