there we are
okay hey everybody everything good oh I got to record local too just in case
sweet all right how's everyone going today excellent now we start getting
viewers in sweet when I first connected it was had an error I was like no I
don't want to deal with that today like I just want the stream to go smoothly please I have some cookies I'm a little
hungry need a snack how's everyone going how's everyone doing today um I don't see anyone in the chat everyone say hi
who's here let me know who's here oh there we go Mr Jones is here Mr Cole sweet Bruno thanks for popping
in Josh did you go have that drink yet Josh excellent sound in video Perfect
Dr Bob is in the house excellent Franco how's it
going oh look we got David here excellent Mr workman's in the house the other Mr
Workman the Mr Mis Workman um Matt thanks for popping
in okay so today
um all stemmed from a post on the community by a uh a user Harry and um
I'm actually having a very fun time with Harry uh this morning Harry I don't know if you're in here but hopefully you
are um we've been going back and forth on an off-site issue I think there's a
uh misunderstanding or something like that but whatever we we will figure that out uh that is not the topic of today um
the topic of today is troubleshooting because Harry had a post 2 days ago
maybe it was 3 days ago 3 days ago okay and uh let me bring up this post okay
and uh I'm not not picking on Harry here at all uh I I just thought it was a
great example that I know a lot of us run into okay um conceptually wise right
this specific issue is actually very specific to Harry but um yeah I thought it was a a interesting uh
topic or interesting time to talk about troubleshooting and how Harry could have
um figured this out okay um now actually before I I jump into the what the actual
problem was right let me just uh talk about something really quick when you
post on the community or any when you're asking for help um especially with web design um it is extremely
beneficial um to to give as much information as you can okay and
preferably not just words okay
um as you I I'm sure you've probably heard or if it's it it's probably a Saye in your language if if you know English
isn't your or American isn't your uh culture right but there's this saying called a picture is worth a thousand
words right and I would say when you're asking for
help on a web page a link to a web page is worth 10,000 words
okay right um a because like um if I can quickly see an example of what you're
trying to do um it allows me to and others to help you much much faster okay
um so yeah just that public service announcement just to get that out of the way really quick and one other small
little thing okay um I know sometimes I will ask hey can you please provide an
example and um or um a produce a project
file or give me a web page to publish online and some people are like ah that it would only take you like 10 minutes
to recreate this on your own and that is true right um let's say
you give you spit out an example and and I fully understand it right and I'm like well can you replicate that for me so
that I can you know try to fix it or you know basically it would be appreciated if you
could help me help you okay um I help I don't anywhere from 20 to 100 people a
day okay and um if each person was like Joe it just
takes you 10 minutes it would eat up my entire day right so um even if it just
takes you 2 minutes right to uh if you save Me 2 minutes
that's 2 minutes times let's say 50 people right um that's 100 minutes
that's almost two hours of my time that I I kind of get back that I can then use
to you know make awesome stuff and help more people so um if I do ask you to
publish something or produce some sort of project file to help me save some time um just
it it would be awesome if if you just understood why I'm asking you that um so anyway okay Public Service Announcement
number two over okay um troubleshooting 101 let's go through to figure out how
you can uh figure out your problems um well at least your website problems because I know like Josh and a
few other of these guys got some problems that I can't handle okay um all right let's get back into this
problem so Harry had Harry had a very interesting issue now um he had I think
he had a screenshot of it in here let's
see uh shoot he didn't have a screenshot oh no he did okay so he had an SVG here
okay and um when he was previewing it on his web page it looked like
that what the heck's going on okay um
and um so it turns out I'll I'll spoil the this mystery for you um there was
actually a conflicting SVG on the page that was uh causing this particular SVG to be styled differently okay um so
luckily uh he has fixed this on his web page um so uh here let's just visit it
he actually I think pretty sure he's fixed it yeah so this was the web page hope you don't mind me sharing your page
here Harry um but I did tell him I was doing a live stream on this so um this SVG up here was causing this SVG
down here to be completely gray scale basically it was actually wasn't gray scale it was like
Tak I think it was taking the colors from the letters and it was applying that those colors over here something
like that I'm not 100% sure of what the actual fix for This was um it was an
illustrator thing he said he fixed it on his perform post so if you would like to know um what he did to fix that post uh
reply to him here hopefully Harry can uh let us know what he did in illustrator but um without further Ado let's uh
let's jump into the problem at hand cuz luckily before he fixed this I got copies of those um those
svgs okay so here we have a web page and um
obviously I have SVG number one SVG number two and I just created some stupid layout doesn't really matter okay
um just so we had something that wasn't just two svgs on the page so I'm going to preview this now as we see
here um it actually looks good right in preview um I see this SVG and I see this
SVG and everything's styled the way I would expect it to be styled
um obviously uh at some point he was previewing inside preview and it looks
great uh but when we preview inside um a different browser this is a Arc
browser um and uh similar to Chrome basically uses Chrome as a backend so U
when he previewed in Chrome all of a sudden this issue popped up he's like what the heck right um this
SVG well obviously he he didn't realize it was a conflict between the svgs but he was like why is Chrome turning my SVG
from this you know red gradient to um this solid color what's going
on and I was and he posted on the community and I was just like I don't
know right um so how did I figure this out I'll
show you how kind of how I figure this out without a project file and then I will uh revert back to uh if I had this
project file which I do now how would I fix it or how would I troubleshoot this
okay so um just to let you know what I did is I went and I inspected the page
right now I'm not going to dive all into this Dev inspector today I have a few videos on using the de the dev inspector
and um and whatnot and uh it's really cool I extremely urge you to learn um if
you're going to be doing web design for a while um yeah knowing your tools can
make your life a lot easier okay um so we're not going to dive into too much of this today but basically all I was I was
like okay there's some sort of svgs are styled right um essentially it's like
styling text colors right I mean the svgs are styled with CSS actually so
what's going on here why is this uh SVG not getting styled properly and I I did
kind of poke around and and looked inside of this SVG and was like I don't know I I I don't know that this SVG code
very well obviously it's not hand coded it's exported from illustrator um you know it does have
this little style tag in there but I I don't know if that's correct or not I I don't know right um so all I did was I
was I was like okay maybe there's something else on this page conflicting
okay and um essentially I was just in the Devon Spector and I was just like deleting stuff oops I didn't want to
delete that right in in the Devon Spector you can actually like highlight stuff and just delete and if you notice
when I uh I deleted that okay so I highlighted this this row here and I
just said delete that and you'll notice that when I deleted that it was like boom all of a sudden I was like whoa
look at that I deleted that piece of content and it's gone right so it's command Z let's bring it back okay and
um so then I go okay let's dive into this so this is a container and then now on his side he had a lot more complex
stuff I just have text and SVG in here right but I was like okay let me dive into this and um I'm going to I'm going
to delete that okay well that that's the problem still lies in there right so
let's let's delete this column oh look at that okay that did it okay so let's command Z that and then I'm going to go
into I'm going to expand this out a little bit and uh here is an SVG stack
what happens if I delete this SVG oh boy if I delete that one SVG all of a sudden boom okay so let's
validate that again I'm going to refresh the page now one thing when you saw me deleting all this stuff from the Dom
it's just a temporary thing once I refresh the page everything is just there again right which is kind of cool
um so I'm going to go ahead I'm going to ins this SVG and I'm going to delete this SVG and only that SVG I delete that
boom I know once I deleted that SVG boom my icon is as it should be so I knew
that was the conflict right now this is a quite a a simpler kind of conflict
that we can find right um not everything is potentially that simple okay but the
concept is there right so cool that's how I figured it out and
I told him I was like Harry you got a conflict between these these two svgs now if we're curious I'm assuming if you
remember when we looked at um inside that other SVG there was like a style tag I'm going I actually haven't even
looked at this problem what what the problem is um I assume in here yeah so
if we look in this um both svgs have a style tag okay and this has a st0 and a
ST1 that has a fill property okay and I I'm going to assume if I look in this
one it's also going to have the same thing I'm guessing here uh oh it doesn't Okay um I was
wrong I don't know the exact conflict between these two svgs okay um he
figured f it out how to do it in illustrator um so good on him for that but uh yeah there we go okay uh the
point was there was a conflict between these svgs um and he figured out how to
resolve that conflict with illustrator I'm not an illustrator nut so I I don't really know um can't really help you out
there okay but hopefully Harry if you watch this let us know in that thread what you did uh maybe I'll post it in
the in the um next uh Weaver bites newsletter
okay okay so let's close this out how can I um how can we have
troubleshooted this with um inside Stacks right how can we
troubleshoot this so
um first what I would do okay is process of
elimination okay um we live in an ecosystem where there's a lot of chefs
in the kitchen per se right there's a lot of cooks in the kitchen right you're using my stacks you're using there's
obviously there's right now we have rapid Weaver and stacks plugin right U maybe you have a theme that isn't
Foundation maybe there's a theme you have other uh other Stacks from other developers on the page and basically
what happens is all the code from all these different developers gets shoved into this Melting Pot right and um
yeah when that happens sometimes there's little conflicts here and there right I me it's not the fault of developers I
mean we can't know everything that every other developer is going to do we can't know what every other Plug-In or stack
is going to do right so there is bound to eventually be a conflict and this
isn't I should say this isn't limited to just the stacks World um this is true
for almost any web development world at all like if whether or not you're using
any of those other horrible things that we won't even mention here right like WP or any of those other Frameworks or
pieces of software everything on the web kind of uses a lot of libraries and Frameworks
and and uh you know stuff like that and all of those are from different developers all of those are you know
unless unless you are hand coding your website and you've done everything yourself and even then you're probably
going to have conflicts with your own stuff right so um that's just the world we live in on the web so this is just a
common solution um or a common issue I should say uh that is going to be
prevalent throughout any sort of web development no matter what software you're using to build web pages okay so
but back to Stacks how are we going to solve that in Stacks how do I know so there's a conflict on this page sadly
there isn't a oops there isn't a conf I always use command P that it is like ingrained in my brain um if I use
command R okay it looks great okay um so how do
we troubleshoot this first thing first is duplicate your
page okay well actually first off I'm I'm going to create a new page okay because I had a problem with with this
SVG right so I'm going to do is I'm going to copy this SVG okay I'm going to isolate my problem okay I'm going to I'm
going to paste this the only thing on my page now is this SVG okay and I'm going
to preview this in the browser boom okay so the SVG itself is
not the problem right so I've isolated the problem or uh well I've isolated I've
proven that the problem isn't with the SVG right so um Step number one take
whatever component that you think it has an issue and implement it on its own on
a different page with at Le as minimal content on it as
possible okay so here I've proven that the SVG itself is good now since the SVG
itself is good that means there's something external to it that is um
causing issues okay so uh let's uh let's keep going right so now that I've duplicated
that and I've I I've made sure that that isn't the problem I'm going to delete this
page right and what I'm going to do is I'm going to delete I'm going to duplicate the homepage okay so I'm going
to duplicate the homepage right so now I have a duplicate of this page and what I
can do is we just start deleting stuff right so I could be like I'm going to delete some bad stuff stuff I know isn't
the case I'm G to I'm I'm going to delete that entire thing and I'm going to preview oh well I deleted all that
context all that cont content I still see the problem so I haven't I didn't delete the problem yet okay so let's
keep going right I'm going to go ahead and let's close that out I'm going to go ahead and I'm going to delete this stack
right and delete that one preview oh still got the problem okay so uh let's
keep let's go back I'm going to go in you know just go through just keep deleting stuff from the page I don't
have a lot of stuff on the page to delete right but now all of a sudden I'm going to be like I'm going to delete this
SVG voila whoa it's working okay now to verify that um that that was the problem
right what did we do is um let's go back right and uh the the dreaded command Z
sometimes can be scary right but command Z and voila okay I got my SVG let's verify if I put that SVG back oh my
problems back right so process of
elimination again I I eliminated the SVG I previewed in uh this browser which was which is where
I can see the problem and voila right um I've now isolated it and I know that
there's now a conflict between this stack and this stack now these are two svgs right but let's say you had a
conflict between I don't know impact and Rin check I don't know something like
that right um where again you you duplicate your page and just start deleting stuff boom just go No Holds
Barred on it right just delete entire sections of the page preview it or you
know replicate the problem if it's the problem's still there keep deleting until you find the
issue right and because I've duplicated this page my original page is still
intact right so you shouldn't be scared about deleting stuff because it's just a
duplicate right and then once you find and resolve the problem you just go ahead and delete this duplicate page
from your project file voila right so then I can go ahead and um you
know fix the problem pretty straightforward right
hopefully this uh gives you some ideas or some good troubleshooting steps um that's kind of all I wanted to
talk about for this particular situation I think it's a great set of
troubleshooting things now um I wanted to talk about this is a very simple scenario
right um it doesn't cover a lot of things um but again I thought it was a
simple enough scenario that I could show you guys the basic steps to how to
troubleshoot this particular situation right and you can take these steps and apply it to your troubleshooting
situations as well now this morning I didn't want to leave it at that I I tried to think
[Music] about oh look see Steven said uh took a
while to figure out that impact causes the font font awesome for snippet warning oh there we
go um yeah uh if you use certain features and impact um it can it does
use Font awesome I believe um so yeah um you probably had a process of
elimination of deleting stuff to try to figure out what is causing this right and then all of a sudden you deleted
impact and boom you know um I really should work on impact 2.0 maybe that
could be something next year okay um I think impact is a very popular stack um I think you could use a refresh um and
probably removing a font awesome 4 is definitely something that could be on the list okay um so but anyway I digress
right uh let's come back and um so this morning I thought about uh what can we
do and so what I did was I wrote out uh where is it right here
I wrote out um just some troubleshooting steps that I think and um I was going to
share this uh markdown document but then I remembered I have this cool app called um deck set and I turned that markdown
document into a presentation now don't get used to this guys cuz like you know having like slides you know hey I'm not
going to do this every time but uh you know this is kind of cool um I was like hey I got this cool app let's let's um
it just converts a markdown document into a power into a slide deck so I
thought um yeah why not so uh this is uh troubleshooting oops that is here
website troubleshooting 101 here we go okay um and I can't see you guys because
it's it put stuff on my other display but whatever if there are any questions I'll get to it I wonder if I can just
close down the hold on one second um oops that's not I want can I not use the
uh the oh
settings no I don't want to customize the theme I don't want the second display like it takes over my second
display I want to see the chat what's that
do nope that's not what I want darn it they don't have a setting for
that markdown editor that's their only setting is to choose your markdown editor well
presentation oh we could do play slideshow uh oh that kind of works all
right we'll do that that way it's in a it's in a window
and I'll just make it big that way I can see I can still see the chat guys okay cool and I can close that and I don't
think we're going to need that anymore uh don't okay website troubleshooting 101
here we go um that is called that is an app called deck set um yeah cool little
app okay um so what changed uh basically Step One
is if something was working before and now it's
not what did you change right I know I know that's a simple question but um a
lot of times it's oh I added this CSS snippet or this JavaScript snippet to
the page inspector um and yeah that broke my page right um so yes if your
web page was working before and now it's not what did you do
um to break it it could be a could be another stack another stack it could be
changing of a setting right there's sometimes like two stacks can work together but maybe it's just when you
take a particular setting all of a sudden that causes a conflict right it's not just two stacks on the page it could
be a particular setting in a stack breaks some other stack right so just
think about what have you recently done um to break it okay especially if it's
worked before so that's that's a big one okay uh just think about what you've recently done and try to undo
that right next thing is um reproduce the issue right so I we kind of uh
I kind of went over this already right try to replicate the issue so
um sometimes it's nice to I know a lot of times uh what people tend to to do is
I have a problem and um they don't understand what the problem potentially is and that's fine um and what they do
instead is um they they go and start changing settings they're not sure
exactly if the settings they're changing is actually doing anything but yeah they they've changed a bunch of
settings to do something and somehow some magic combination of settings that they they did maybe did what they were
intending to do but then that broke something else on the page right right
so um yeah so what I recommend a lot of times what we do is take a new page okay
and Implement just that one thing now in my example I showed earlier it was just
an SVG so it was just like creating a new page and then I isolated the problem
in that case it was just an SVG stack right but maybe yours is an accordion a problem with an accordion so what I'd
recommend instead of trying to you know uh troubleshoot it on your page create a new page Implement that
accordion from scratch okay implement it all over again
okay don't copy and paste okay implement it again cuz a lot of times when you
implement something again you're like oh wait it's working now like what what's
going on right so yes isolate the problem Implement that one particular
stack again from scratch because a lot of times what you
do is you've learned as you're changing all those little settings and stuff troubleshooting stuff right you've
learned a little bit right so I recommend go to a new page reproduce the
problem I bet you a a decent amount of times you're not going to be able to reproduce it it's just going to work
okay that's probably why most of the time when people come to the hangouts or the post you know or they'll come to a
live stream and they're like Joe I have this problem you just you add this stack to the page and then you do this and
then I do it and I'm like it's working and they're like what the heck it wasn't working for me right well H had you gone
and maybe reproduced this on your own from scratch you might might have not been able to reproduce it yourself right
either so um there we go maybe it was a one time glitch reproduce the problem okay um next is check the console and
the debugger okay so I didn't really go over that later let's just quickly go to a web
page uh oh is oh they're all done okay let's just go to a web
page let's go to this page there we go all right so um yeah go to web page open
up the the inspector um if you didn't know it is um option command I in every
single browser all browsers option command I will open and close the dev inspector if you don't want to remember
keyboard shortcuts you can rightclick and say inspect element um or just inspect in uh in Safari it says inspect
element in Chrome and a lot of other browsers it just says inspect okay um
and when you do that it'll open up this uh Dev uh console okay again I have
videos on this I'm not going to dive into it all okay there is a console tab here okay and um if you see any errors
they will show up in red okay there's a lot of informational messages in on this particular page okay and there are some
warnings but nothing in particular but if you're having any sort of JavaScript
errors that maybe there's tends to be some JavaScript conflicts okay and a lot of times in if you're in Foundation uh
Foundation tries to help you and it puts up a little red box inside preview um that that shows you
what um shows you that hey there's a JavaScript error on the page and it says
like it could be the jQuery Legacy thing that was just uh most of the time it's
not going to be that jQuery Legacy thing okay but um that was a problem a common
problem way back in the day when I was migrating to jQuery 3 um so yeah there
we go um next up so yeah look in here for any errors so especially if you see that
um that error inside preview that hey there's a JavaScript error preview in the browser open up the console go to
this console and you will see oh look here's an error right here okay uh that was just a 404 right but um you'll see
errors and a lot of times there will be um a little carrot like this guy here right let's make that a little bit
bigger right Like These Warnings have little carrots you can expand that out and a lot of times there's going to be
more details about what that issue is sometimes you this might makes it might click maybe a a certain class or certain
something shows up in there you're like oh I recognize what that is that was something I added earlier right um and
you might not not always recognize what these errors are but this gives you at least arms you with some more
information okay um so there we go and if you really want it a lot of D you can like click on that it'll like take you
to the exact spot where that particular error is happening um that's kind of
Next Level stuff I mean um if you're curious you can dive into all that right but um yeah uh just knowing the errors
here and knowing kind of what's going on is important um next up in the uh I think I
do that in a in a different slide okay um so yeah a lot of times here you're looking for syntax errors missing files
right incorrect ref there's going to be all kinds of errors that show up in that Dev console
next is uh review the code now I know a lot of you aren't coding right um but as
I said earlier sometimes you get little stimets online or you're using chat GPT and um sometimes those aren't the most
reliable sources so um yeah review the stuff that you've added okay um I would
I would expect you to expect code that I ship to not have syntax errors I'm not
saying that never happens okay but you should you should trust 99.9 of
the code that is shipped by a developer or by me especially um I am pretty
strict um except when people force me to rush out updates Josh and uh you know
sometimes I'll mess up a little bit here or there but I tend to fix those pretty quickly okay um so for the most part
okay um look at any code that you've added whether or not it's a JavaScript
snippet whether or not oh a common one is for example let's say uh let's go
into a project a common one here is someone
wants to add let's say like an analytics tab right or analytics tag right I don't even know if I have like a script in
here somewhere all right here I have no clue
what this script is okay but let's say I I um Let's Pretend This is an analytics
script okay what they will do is they they will go oh I I have JavaScript that
that Google gave me or whatever service gave me and they they they take that script and they put it in the JavaScript
tab okay now let's preview that you see boom Oh I have an error
what's going on here okay perfect example so we open up the inspector okay
I go to the console and unexpected token BL what the heck is this right um so
this is a common thing where um this particular snippet that you gave me so
inside this JavaScript tab needs to be just JavaScript okay but if you notice this
has a script tag this is HTML so where code like this would go is
not in the JavaScript tag but in the head tag or the body tag okay it would
go in either of those locations or you can Chuck it into an HTML stack on the page okay only pure
JavaScript goes inside of this now if I wanted to we we you this does contain JavaScript but basically what I would
have to do is I would have to go into here and I have to delete that script tag and I'd go on the bottom and delete
the that script tag then it would work cuz now at this point well I deleted one
extra character up here so now this contains pure JavaScript okay um I
wouldn't recommend that approach just if you get a little script tag you know from somewhere plop it in the head or
the body okay um don't put it in the JavaScript tab there we go all right all
right that was a good little tester so there we go yep here's here's a great example now this one doesn't give us any
sort of errors it's just saying there's an unexpected token right but that's a common thing that people tend to do
sweet so review your code all right next is simplify the
problem right so um this kind of goes into where I duplicated that page and
then I simplified it right we want to go down to the com the the most simple solution to replicate the problem right
so I I just started deleting stuff from the page I just hack the page let's just simplify the page until I find the issue
right so yeah simplifying is the best one of the best things you can do because a lot of times we have very
complex Pages remove a lot of the complexity and get down to just the raw
um two stacks or the two things especially if you're if you're asking for help and you're like I found conflict I you
know hey Joe I found this this issue if you like whenever I have this stack on
the and the these two stacks on the page boom everything's breaks I'm oh that gives me exactly something to look into
right um so yeah perfect example simplify the problem um and hopefully we
can you know through process of elimination find out what that is okay check browser compatibility now
another great thing about this solution that we saw or problem that we saw today was that it worked great in Safari okay
um and here let's go to let's go back right um so let's preview it in saf Sai
so uh boom works great in Safari cool um if you didn't know option
command P allows you to preview in any browser you want right so I can preview in Firefox so let's open up
Firefox I didn't have it open so it's going to take a second to
launch and sometimes if it's not already open you kind of got to do it again wait oh look the problem also exists in
Firefox right so oh it exists in Firefox and we can preview in Chrome or Edge or
so on and so forth right so you can preview a lot of different um you know
browsers so yeah um check other browsers check um another one is I think I have
it browser extensions okay so if you're using a browser extension um you know I
I use a lot of them there are a lot of times where a browser extension causes
issues with a stack and sometimes there's nothing you can do about that okay um you can email the extension
developer good luck with that um yeah or you can potentially email me and maybe I
can make some modifications to the stack I can't guarant depends on what the problem is right but um yeah browser
extensions cause issues especially there's um there's a I think it's honey
or there's a shopping a very popular shopping browser extension I think it's
called honey okay that is a nightmare it that causes that
breaks so many things okay uh and it's just outside of my control um the
extension just breaks web pages um those developers need to be fired okay um yeah
uh they're they're not great that that extension okay so um that's a perfect example I know that honey one is is
horrific okay but there are other ones out there A lot of times um hey you know why is my we page the color showing up
light or dark maybe it's like a lot of times people have like various extensions that like enable dark mode on
a web page and sometimes those extensions just apply wonky styles to a
page and there's there's nothing I can do about that right um the extension takes precedence over the Styles
published on a web page so anyway
okay okay um inspect network activity Okay so
um another common occurrence is let me go ahead and close some of these other windows I have open
here is um now let's let's go back to Weaver space since it has more uh more
data okay I'm going to refresh this so there is a tab in here called the
network tab okay and um a common issue
with web pages is why is my web page loading so slow right or or it sometimes
a web page can take so long to load that it just causes other JavaScript issues
right so look at this network Tab and you'll notice that there's a size column
sort by size okay you notice here the largest file that I have is 239
kilobytes okay I've seen 15 30 megabyte files like a lot of
times you know especially images some some people are loading you know 500 megabytes worth of images onto a web
page and you're wondering why your web page is slow okay so yeah if you're if
you're feeling your web page is slow especially if a web page takes a long time to load it can cause other issues
because it takes so long to load so yeah uh reduce make your sure your files are
as small as possible um for images use something like my rain check stack to like lazy load images onto the page as
user Scrolls down the page there's a lot of really great solutions for that okay but yeah this network tab going to the
size column and and seeing all the files and how large they are
okay make them as small as possible um I I like to keep everything that I
possibly can like in the kilobytes okay um no file that you're loading on a web
page should ever ever ever ever be I would say more than 500 kilobytes even
an image okay um that's my opinion again if you're in photography and you want to
make sure a hot super high res photos getting loaded that's your decision okay
um you you get to make that decision but I definitely wouldn't load a lot of them okay so yeah Network tab size it's a
cool one all right um looking at the layout and styles so
I'm not going to dive into a lot of this okay okay today but you know if if you're especially in
Foundation 6 I I have a lot of videos on this like you know troubleshooting Styles and whatnot okay and this is
going to go into a little bit in playing with the inspector okay but um let's go into I don't know let's let's look at
this purple box right I'm going to inspect this um this little box right
here right right there let's go let's
keep going up
this one I'm just kind of going until I see
the where is that color it's must be
here all right so um here this little this little search box here okay if I go
to the Styles tab here okay uh you can kind of see all the VAR CSS styles that get applied right so um if maybe I you
know the font size wasn't right I could see um let's find something that
is uh let's find something there Let's find
let's look at these let's look at these little boxes
all uh that doesn't really have much inheritance though
trying to find the trying to find something that has some inheritance give me a second
guys oh well um let's just go with this one okay
so we'll notice that um let's say uh it's these little boxes here right so I
click on this it's these little boxes here okay and you can see all the various Styles in here and you can turn
those on and off with these little and you can see as I turn these Styles off watch this box up here okay you can see
it change right you can see the Border radius right so you can kind of play around with and you know what's kind of
cool is you can actually modify this so I could be like you know I want my uh border color to be um you know I don't
know black okay um oops I didn't that's five
one more there you go black right now I don't really show a border in there so I guess that's kind of useless right but
um background color I could be like I want that to be red right there we go there's now it's red okay um so you can
do a lot of stuff in here I'm not going to dive into all of this okay um I have
pretty in-depth videos on on this as well um on the Safari Devin Spectre and and whatnot so watch those on how you
can play around with these and kind of manipulate the Styles and play around with things and troubleshoot Styles okay
it's a it's an important thing though especially if you're if you're playing around with some more advanced Swatch strategies and you're like hey this is
conflicting with that what what's what styles are getting applied right um this definitely can be next level stuff um
you know it's probably not for everybody um but yeah if you're a tinkerer I'm sure you'll get into that okay um so
yeah there there it is possible for you to kind of debug your own layouts and styles and whatnot through the dev
inspector okay um seek peer review so next up is I
I've I've gone ahead I've tried to troubleshoot this thing I I don't know what else to do
okay and so we have a community the Weaver space Community is pretty amazing
um and post questions say hey can you guys replicate this and there's a lot of times where it's like hey dude it's
working great for me right and sometimes the the problem can be local to you your
Mac maybe your system settings um your local network I've seen that that's a rare one but a lot of times it could be
your ISP doing something weird right it's happened before okay so yeah ask other people hey can you
test this out you know especially in and what's great about Weaver space is we have people all around the world so you
know I can test I'm I'm going to be in a completely different part of the world when I test it so I have completely different you know uh Network ways of
getting to your site and whatnot different caching right DNS issues all that kind of jazz right um so yeah ask
others and please don't be scared I know a lot of people are scared to death to post on Weaver space
um you know there's a lot of lurkers okay so if you're a lurker don't be scared to post okay
um and of course the last I think this is the last slide right um rtfm okay um
now I know you might think Joe you don't have any docs BL BL right okay I don't have a manual okay um I have a Dava day
no um so if we go into Stacks right
I try my best okay to supply inline
documentation for all of my products okay and um if you hover over any
setting you'll notice that there is a tool tip some tool tips are multi-
paragraphs long actually okay I I do try to if there's something that I feel needs a full explanation on what's going
on I will provide that information here okay now if if you don't like these tool
tips or they're kind of hard for you to read I understand um if you if you highlight a
stack okay and um this is better in Stacks Pro okay but if actually if you
go can you right click on it let's see oh yeah Show online help all of my stacks every single one of them has
online help so if you click on that okay it will open up um a weaver Space page
that has the documentation for this stack and all of its
settings right let me show you that again if you want to know a little bit more about the divider stack or
visibility stack okay definition list whatever right click Show online help
and there you go and that's a very simple stack right but um here let's go into something more complex I we were
talking about impact earlier right um let's right click on that show online help there's the online help for impact
okay okay and it's not like a full how-to manual but it it it has a decent
explanation about the settings um so hopefully you can obviously use it now
as you know I'm big on videos and I work hard on creating a lot of videos so in
terms of documentation check out the videos okay next up if you don't want to watch
all the videos um there is a great site I'm going to give Chris a plug here for Stacks guru.com
okay um he's indexed 529 videos so far
okay and you can just search through the transcripts is pretty cool okay I don't let's search for
impact since that's what we're talking about today some reason there we go so
there's impact so yeah search through these it
uh and if you go into the into it right so if you go into for some reason I said impact inside this you can see the full
transcripts are here um you can even like search on the page impact where I said impact oops if I type it right that
works better uh a good I see I was talking
about an impact update at hour and 16 minutes into the video so then you can
play this video go to that kind of Tim stamp voila oh he has this little search on page thing that's pretty
cool there you go even faster don't even need to use the browser search it takes you straight there pretty cool I think
that's Scott's uh stack okay um so yeah documentation uh
next up is there's a lot of uh I've shown this before I think we talked about it last week maybe I use this app called Dash um and it searches um all
like the CSS docs right so I can be like um CSS let's say I want the um the
documentation for the CSS background okay and um so I use Dash to do that all
these resources are online um the Dash app just kind of makes it cool and convenient to access all the docs for
JavaScript CSS HTML PHP and probably a thousand other uh
languages so it's a very good app um and uh with that we're done
that's it let me see if there's any uh anything in the
chat uh online help for swatches oh man U Oh you mean like an online help
for a Swatch so that is a problem okay um here let me share my screen again so
uh what he's uh what he's talking about is if you add in a um a Swatch okay here
let's add a border Swatch like how can I get the help for this right how can I
get the online help for that and currently
um there isn't really a way okay it exists the online help does exist for
these um but getting to that online help for from a child stack um in Stacks uh
plugin is not currently possible um however it's possible do I show if if we
show hidden Stacks do I let's do like border okay so um
I do if you show hidden Stacks swatches do exist in the library at that point
you could right click on that and say Show online help okay and here's here's the documentation for this for the
Border Swatch okay um the annoying thing
is you have to show the hidden Stacks okay and then at that point you it's
there and they do show up in are they going to show up oh there they all show up as like a sight Styles thing okay so
they're all in here um man that looks horrible I like the sight Styles stack when there's just a couple but man when
there's a lot of them that can that's a little bit obnoxious obnoxious but they are there um so that's one way you can
do that um it is better in Stacks Pro in Stacks Pro there will be a link um in the settings bar up here so you can say
like Show online help for this stack okay um so there we go so yeah if you if
you want docs on um any swatch there you go all of them should you can right
click and say Show online help for that again uh better inside uh Stacks Pro
already okay they show up in the sidebar which is cool good question thanks
Stephen okay let's see there's any other questions uh I'm sure benefited for oh
yep yes Mr Co I I did ship some impact Updates this week um and uh yeah I that
was one case where I I I did rush out an update and I left an errant percent uh
sign where I shouldn't have and it it did it did break some features like the the default features but we need turn
stuff on and off it I broke it okay so um or technically it never was working
because it was a new stack blah blah blah blah blah whatever it's working now though so sweet thank you Mr Cole
okay guys um I think that's it for today uh I did that in less than an hour look
at that I I'm four minutes shy I I thought I was going to go for a lot longer um so I hope you guys learned a
little bit today um yeah I will take that uh the markdown of you know the uh the deck
that I I did and I'll plop it in the the notes for this particular uh event on
the community so um yeah I I think it's good hopefully let give me some feedback maybe I missed some steps but I think
we've kind of gone through a lot of just basic troubleshooting steps of things and hopefully it makes your lives a
little easier thanks guys have a wonderful rest of your week um and yeah tomorrow is the hangout and uh I better
get cracking because I got to try to ship this total cms3 beta tomorrow um I
don't know I got two more things left on my to-do list see if I can get them done I don't know might have to leak till next week but we'll see take care
everyone hope to see you tomorrow at the Hangouts and uh see you on the community take care bye