How to Avoid Caching of CSS & JS During Development
How to Avoid Caching of CSS & JS During Development
Have you ever made changes to a CSS or JS file but then even when you refreshed the Web site you don’t see those changes taking place. It can be frustrating and the culprit is usually caching your web browser is using it cached or downloaded copy of the file instead of actually read downloading and using your newest copy of the CSS or JS file. Let me show you how you can see caching in action in your web browser.
Watch Full WordPress Theme Development Course here
https://bit.ly/34glNud
==============
IMPORTANT
==============
Education should be FREE but if you can afford it buy course from here
https://bit.ly/2RkXEgy
#codeplusplus #wordpress #avoidbrowsercaching
Content
0.12 -> [Music]
2.35 -> hello everyone before we move on and set
5.92 -> up our interior page template I first
9.04 -> wanted to cover something very important
11.139 -> and that is avoiding CSS and JavaScript
15.549 -> caching during development let's begin
19.12 -> with a question so what is caching I
22.3 -> think the best way to answer that is
24.37 -> with another question have you ever made
27.039 -> changes to a CSS or JavaScript file but
30.76 -> then even when you refresh the website
33.37 -> you don't see those changes taking place
35.46 -> it can be confusing it can be
37.96 -> frustrating and the culprit is usually
40.989 -> caching your web browser is using a
44.019 -> cached or downloaded copy of the file
46.69 -> instead of actually redownload and using
50.079 -> your newest copy of the CSS or
52.719 -> JavaScript file let me show you how you
55.269 -> can see caching in action in your web
58.12 -> browser
58.69 -> so on our site you can right-click
60.85 -> anywhere on the page and choose inspect
63.579 -> I'm using Google Chrome and I encourage
66.64 -> you to use it as well because it has
68.289 -> some of the best developer tools in the
70.689 -> world but most browsers will have a
73.03 -> similar inspect feature that will open
76.719 -> up your developer tools window again if
79.81 -> you want to follow along with me exactly
82.03 -> you'll want to use the Google Chrome
83.649 -> browser but then I want you to click on
86.049 -> this tab that is named network I know
90.82 -> that Firefox also has a very similar
93.31 -> network feature okay now with this
95.92 -> network tab open if we refresh the page
99.25 -> on Mac you can press the command key and
102.789 -> are at the same time on Windows you
105.64 -> could hold down the control key and
107.38 -> press R but when we refresh now we can
110.95 -> see all of the different files that this
113.14 -> website needs or that this website is
116.049 -> using so we can see different JPEG files
118.84 -> different CSS JavaScript and up here we
122.829 -> can filter what type of files we are
124.899 -> looking at so you can say show me all
127.21 -> files or you can just say show me
128.92 -> JavaScript CSS only show me the images
132.94 -> and for our quick example to learn about
135.8 -> how cashing really works let's click on
138.41 -> js4 javascript and I want you to focus
141.98 -> on our file that is named scripts -
145.25 -> bundled and also pay attention to the
148.34 -> size and time columns and notice that
151.73 -> every time we refresh it says that it
154.04 -> takes zero milliseconds to load that
156.83 -> file now whenever you see 0 milliseconds
160.22 -> or in the size column if you see from
162.47 -> memory or from disk cache that means
165.65 -> that the browser is not redownload in
167.87 -> the file instead it's just using a saved
170.51 -> or cached copy now a lot of times that's
173.72 -> great it can make your website load
175.79 -> faster for your visitors however during
178.79 -> development we are going to be changing
181.49 -> our files very regularly and when we
184.34 -> switch back from our text editor back to
186.83 -> our browser we want the browser to
188.96 -> always be using our most updated copy of
191.72 -> the file so the question becomes how can
194.72 -> we force the web browser to redownload a
198.23 -> new copy of our scripts - bundled well
202.13 -> follow along with me in your text editor
204.8 -> within your theme folder I want you to
208.28 -> jump in to functions dot PHP at the
212.75 -> moment we've only got our one function
214.97 -> and remember when we used WP on cue
218.48 -> script to load in our main scripts -
221.9 -> bundle JavaScript file
223.88 -> well you might remember that we set its
226.04 -> version to 1.0 now just as a test let's
229.97 -> change this to version 2.0 and save our
234.44 -> file and now back in chrome with our
238.25 -> network developer tools open refresh the
241.04 -> page perfect
244.489 -> notice that our scripts - bundled file
247.22 -> now says that it's ninety-three
249.41 -> kilobytes and it took 627 milliseconds
253.19 -> to load this is because the web browser
255.62 -> saw that version 2.0 at the end of the
258.739 -> request is different right just a second
261.56 -> ago it was version 1.0 however if we
264.32 -> refresh again well now the browser just
267.89 -> going to use its
269 -> copy of the 2.0 request so you can see
272.96 -> that time is back down to zero
274.67 -> milliseconds and this means that if we
277.04 -> made changes to our javascript file we
279.5 -> would have to go into our functions file
281.3 -> and change this to maybe 2.5 or version
285.29 -> 3.0 now obviously we do not want to have
288.65 -> to keep going into our functions file
290.51 -> and changing the version numbers every
293.33 -> time we update our JavaScript or CSS so
296.75 -> instead I want to show you a neat little
298.31 -> trick to avoid caching altogether during
301.669 -> the development phase of your website
303.65 -> delete the 3.0 or 2.0 or whatever number
306.56 -> you have and even delete the quotes but
310.22 -> keep the comma and in the place where
312.08 -> the quotes just were I want you to type
314.419 -> out micro time and then parentheses
319.31 -> because this is a PHP function now check
323.51 -> this out if we go ahead and save and
326.44 -> then go back to our dev tools and
328.88 -> refresh you can see that that micro time
332.96 -> function generates the current time in
336.1 -> seconds and milliseconds which is always
339.62 -> going to be unique so every time we
342.02 -> refresh cool you can see the file has a
345.83 -> size and it has a time that it took to
347.78 -> download and you can refresh all day
350.51 -> long and every single time now the
352.82 -> browser is forced to actually reload
355.94 -> that file now you would never ever want
358.97 -> to do this on a live production website
361.7 -> that the general public is visiting but
364.13 -> during development when you're coding
366.02 -> away and your files are changing all the
368.51 -> time this is a lifesaver so later on in
372.41 -> this course when we are learning
373.88 -> JavaScript and updating this file
376.28 -> constantly we will be super happy that
379.04 -> we've got this cache fix in place
381.61 -> changing gears what about our CSS so if
386 -> I click CSS and the filter here's our
388.76 -> main stylesheet now in this course we
391.82 -> are not going to be editing the CSS
393.979 -> writing a bunch of CSS is just outside
397.07 -> the scope of what we're trying to learn
399.229 -> in this course however I
401.849 -> want to show you how to disable caching
403.74 -> for your main CSS file because this is a
407.279 -> trick you could use in all of your other
409.08 -> WordPress projects as well
410.999 -> so back in our functions PHP file here's
415.05 -> the line of code where we loaded our
416.759 -> main CSS file now after this second
420.539 -> argument that points towards the file
422.639 -> the file path let's just add a comma and
425.909 -> say null which means this file doesn't
429.809 -> have any dependencies it doesn't depend
432.629 -> on any other CSS files and then right
436.229 -> after that we can just say comma include
438.689 -> another argument and this is the version
440.999 -> number so just say micro time
444.439 -> parentheses because it's a function
446.849 -> let's go ahead and save that and then if
449.849 -> we refresh our network tab or the
451.86 -> website cool we can see that every time
455.339 -> we refresh our web browser is forced to
458.339 -> use the absolute most updated copy of
461.399 -> that file now before we bring this
463.919 -> lesson to a close some of you might have
466.199 -> been yelling at the screen this entire
468.149 -> video saying Brad what are you doing you
471.119 -> could have just simply checked this
472.769 -> check box that says disable cache while
476.55 -> that's true I usually don't like to use
478.86 -> that option because now literally every
481.829 -> single file is going to be redownload
484.469 -> 'add every time and that can just slow
486.869 -> down your development process I only
489.479 -> want to disable caching for a few key
492.029 -> select files also in Google Chrome this
495.99 -> will disable caching for all web sites
498.539 -> and not just your development website so
501.959 -> if I go to Google or Amazon or Facebook
504.779 -> all of those websites will load
506.779 -> significantly slower because I have this
509.55 -> disabled cache option checked so I like
512.699 -> to leave that unchecked and just use our
515.31 -> micro time trick to disable caching for
518.61 -> select files cool that's going to bring
521.37 -> this lesson to a close in our next
523.589 -> lesson we will get back to the actual
525.389 -> task at hand of building our website and
527.639 -> we will focus on building an interior
529.889 -> page template should be a lot of fun
532.62 -> let's keep things rolling and I will
534.99 -> see you then
Source: https://www.youtube.com/watch?v=1WJqINEp6qI