so yeah I know we did a live stream although it's fun it's always fun to see some new faces on the Wednesday live stream so that's cool thank you guys for
coming on um but uh yeah I I worked until like 4 a.m
this morning and uh yeah I I wasn't prepared I'm not firing on all cylinders
I'll I'll warn you up front today I'm not firing and also just a little bit ago I went to go you know make a little
drink it's just water with like an electrolyte packet right so I go and I rip the top off the electrolyte packet
and I walk over the garbage to throw the top that I just ripped off in the garbage and end up pouring the entire
packet in the garbage and I was just like after I did it I was like what the heck am I doing hahaha
it's your life together man [Laughter]
you did ship a nice update to points so that's yeah that was that was a great one wasn't it
here um why don't we start off with that uh let's see
I wouldn't share oh we got someone in the chat okay let's go ahead and uh let's share
Manchester there we go
um [Music] so if you aren't a points user um if you
don't Point here let's show off kind of what what points is I guess really quick for those that don't know what points is
so points is basically an image map right where you can have a background image and then you can have various
points over that can have tool tips and then when you click on the point there's many different things you can do
um like in this example here it opens up a light box to show a picture of the stadium that held that World Cup right
um so there's all kinds of things here it's overlaying on top of my Google Map stack so you can overlay there here's
another example where I'm hovering over a point and you'll notice the caption on the bottom right so um you know there's
there's tons of different things you could do this one links out to different web pages um this one it integrates with a bunch
of stuff so that one opens up a glider this one opens up notice up here this
one opens up glider pop drop right so I mean it integrates with like over 20
different Stacks uh to do some really cool stuff okay um and as you see that the points can be
these I'm not talking to you Siri shut up um
sorry Siri gets in the way soon okay um yeah I I love these pulsating points
but you know you can do all kinds of stuff so here it's just I used an image of a pin
um and you can do all you know here's an image of a soccer ball so yeah you can do whatever you want um you don't have
to have these pulsating animation as well I just think it's like really really cool so I use it a few times in
the demo okay um I have your previous version what's the difference with the new one with two
four um so well 2-4 was a free update if you had points two
um so if you own points two dot anything 2.4 is a free update okay
um so that's good uh as long as you own at least stocks
I think it was 4.3 is is what it requires okay so as long as you have stacks 4.3
um it'll work um so you should see the update uh so let's talk about what's new
um yeah so let's talk about what's new so one of the most requested features
that I had um is the ability to manage
um the points using total CMS okay so for example
um let's open up the points project really quick
and I cannot type today either
all right so here's an example of points from the demo that we saw only just a few seconds ago
and what users have been asking me is they want to be able to configure where
these points are okay um
but for so but they're unable to before that you there's these sliders right and
with total CMS you can or easy CMS you can use macros to you know get data from
the CMS and into a stack however because these values are sliders
okay um you wouldn't you weren't able to do that so now with this Advanced positioning setting
um we have the ability to have a text box that allows us to basically here you
can type in a number value by default or you can put in something like a total CMS or easing CMS macro okay
um and you know you can also use a macro here for the info which is the little tool tip okay
um and then other places that people wanted it wasn't when you when you define a warehoused image they want to
be able to use a macro there as well so um so yeah so now every single one of these points could now be managed its
location and the tooltip information for it and the image if it's an Associated
image they can all be managed Now using total CMS okay or easy CMS
so that's that's pretty cool now I want to take that a little bit farther
though um because just I mean just being able to check this and then um saying you know defining this that
wasn't a lot of work right okay um that that wasn't that wasn't too difficult to accomplish that
um it's just giving you a different way of inputting these values okay
um so what what else would be cool right so the way I described it is let's say
let's take this example here we have seven points on this image in order to manage the data for all seven of these
we would need to create three total CMS fields for each one that's 27 Fields
right that's a lot of work right
um and on top of that what if the customer wanted to add an eighth point for some reason right how would they do
that well they'd have to contact you then you'd have add three more fields and blah blah blah blah blah right so
um let's make that easier so uh let me go to an online demo that I
had set up hopefully people didn't mess it up too much oh look at that they didn't really mess it up that much okay so here we
have a demo and this top points demo here is completely managed with total
CMS blog Okay so
the background image is managed but just by uploading an image here okay and that's just a normal total CMS image
and then here what I'm doing is that I'm I created a Blog okay where each blog post is a point
okay so um here I have a little form if I go ahead and let's say uh let's edit
this this Center one here okay so I can go ahead and click on the center
and then I can edit that information so here we see the info is Center and then I have horizontal and vertical
positioning right so let's just change that to be um vertical zero right or vertical five
okay so we're gonna do vertical five we're gonna save that let's reload the page and when I reload
the page that Center Point is now up here right and so
with here I I can now add as many new points as I want if I can go I can go ahead and click on new point
ah right and then in here I can go um live stream point and let's give it a
position um I don't know like I don't know 60 or let's do
um 90 and 50. so it'll be on the the center of the far right side so we go
save okay reload this page and there it is there's my live stream
point right so I just added that right now so now we have full control over you know
adding as many points as we want to the image so you have control over the actual image as well we have control
over the the tool tip that comes right so we got a lot of stuff we can do here
really really cool he's great awesome
whatever if these points linked to let's say a URL um you know you could you can have it
URL as a fourth data point here right so then you know that point would link to a particular page or URL or something like
that right um not all the actions would be super easy to make like if you were each of
these loaded a light box like they need to have the ability of the customer to like Auto add a light box I'm not saying
that's impossible but it might take some brain work right um but something simple like you know
click on this and go to a URL would be really easy okay
um um now since I integrated blog
another great and popular stack out there right now um is feeds so I thought it was very
um an interesting idea to also take this and integrate with feeds so here's an example where
um I'm taking I have a feed stack and I just pass it a CSV file of
um info and coordinates so basically what shows up in the tooltip and the coordinates of that
point and then basically all I do is I create a point for each one of those so let's
go ahead and look at that so there we go this is what the CSV file creates for me
right now uh here I'm I'm loading it from a CSV data but um this could load
it from a CSV file on your server it can load it from a database it could load I mean pretty much any data source that
total CMS or I'm sorry any data source that feeds um provides you can now integrate it
into points using feeds pretty cool
um and implementing this is really simple too while we're looking at feeds I'll show you how to implement it so
normally uh with points you would just go ahead and click on this and it would add a point here right but we don't want
to add points manually we want to do it dynamically so I did is I I dragged a feeds stack into where these a point
would normally be okay and then I I if you notice here I added the point inside of feeds
okay now um let's look at our data so here if we look at our CSV data I have three data
points in my CSV I have info X and Y I know that's pretty tiny but
um you see that I have three data points there info which is the text in the tooltip X which is the x coordinate and
Y which is the y-coordinate okay then in my point stack all I need to do
is inject that data directly into the point so I inject my x coordinate into the X position the y coordinate into the
Y position and my info directly into the info and that's it
super easy okay and uh doing it with blog is just as simple
um here I'm using total Loop which is sort of like a feeds counterpart um in total CMS
and I tell it to Loop through all my blog posts okay um now in blog I kind of repurposed some
feeds because we're kind of hijacking blog so I'm using the author field for
the X position the genre field for the Y position and the title for the info so all I need to do is inject those macros
directly into there and we're done super easy
cool any questions
so you just made it easier that's what you did that's good yeah I I made it easier and you know easier to manage
this stuff and add data easier instead of having to click each one and managing them all individually
um yeah it's nice people
has anyone played around yet or any any questions that I can answer with that I haven't got that one yet but it looks
interesting wait I got the filters one because I was playing away around with
moving box yesterday okay cool very cool that's absolutely ridiculous
yeah it's gonna be it's gonna be slick I mean people have been wanting that for um a long time so I'm glad I someone
finally it was a few weeks ago um Wanted the ability to add total CMS macros and I was like you know what
while I'm working in this thing let's just go all out add you know on this ability and make the stack just that
much better so um and we can still set the diameter if
you will of the of the point that you're uh so yes you can still
manage inside points you can manage the size and the colors of all those points yes you can also define a class for
every point and since I know you're using Foundation you can then um you know tweak the styles with the
class that you add to your point using swatches so if you really wanted like custom
styles for each point I guess you can give a point a class each point can have its own class and then each point could
have its own Styles if you really wanted to go that far
yeah I just I just have a a collage of pictures of a bike 50 different Nobel
laureates and stuff in a giant collage and then have it and have points set up so that when you point to them it pops
up their name and now with that link now I can take you to their bio page oh very cool I like it that's very cool I like
that
okay um I mean next step so on top of last week I started working on
uh I actually started what sprung all this was I was working on the foundation open source project so if
you know the foundation Stacks that I have they're all based on an open source framework that I am also the maintainer
of called coincidentally Foundation right um so the website for the open source
project went down and uh or it didn't go down but the links weren't working for some reason
long story short I ended up working like an entire day probably like 15 hours on
the issue it ended up being a simple check box that if I known the host added a new feature and checked it by default
um would have saved me 15 hours and 59 minutes right but no um I didn't know they did that so but
anyway I ended up reworking a lot of stuff on the open source project and now that I shipped all that to those
developers I wanted to get some of those nice new changes into the stacks so I
started incorporating a lot of the framework updates that I did into the foundation theme and that took
me down like a little performance rabbit hole if you don't know I am like I spent three days trying to shave off
like 50 kilobytes from the theme right so um doesn't seem like a lot but every
little bit counts so um I I worked really hard on trying to optimize the theme
um right now most of the changes so far are on the theme uh and performance and kind of
slimming things down I think I shaved a total of about 100 kilobytes almost
um from the theme so that means every web page will be 100 kilobytes smaller
which is cool um so that 100 kilobytes cost me a lot of
Heartache um so let's go ahead and I can kind of
preview some of that some of it there again there's not much user-facing stuff for you guys it's there are a
couple small things I'll show you and some things actually learned about the rapid either
um theme API in some project settings that I uh I'm gonna start recommending people do so uh we'll go ahead and let's
look at those all right let's go ahead and
uh let's go ahead here let's open up the foundation Stacks project
so it is I I currently have uh published um this new beta version to
foundationstacks.com and um if you guys check it out like the
site is blazing fast um I do have oh that wasn't
oh no where's
let's go there it is look at that
I got
there we go I got uh that was Google page speed I got all pretty much all
hundreds they ding me two points for accessibility because they want my orange buttons to be darker and I didn't
want them to be any darker so I was like you know what I'm fine with the 98
so um I didn't want my orange buttons to be any darker I figure they're they're readable enough
okay so anyway um I assume you confirmed that with Chris
yeah exactly I did make them darker than they were they were they were a little lighter and I can agree so I actually
use this this uh My Color Picker that I like is called color slurp and it has a
contrast Checker um and I don't think I have the a uh
here if we go there we go let's say this is a light orange here right and it says it fails
right there's not enough contrast in between these two colors right and what's kind of cool is you can just say Okay fix it for me and then it'll kind
of give you a guesstimate of a color it you know it picks a color closest to it that will give you a good accessibility
rating um so um let's go ahead and fix that there we
go that's that's actually the color that I used and this tool says that it's it it's gives me an AA plus rating for
accessibility yet Google when I use that color still dinged me so I said whatever
Google uh I don't care I don't want to go any darker than this so I think that's enough what happened to
that Joe that's color slurp slurp colors yeah it's my Color Picker
of choice you know it's it's stores palettes of colors and you know it does all the normal Color Picker stuff but I
do like those little contrast thing and I like that it you could just say fix and it kind of gives you an idea of what
at least the shade that that would give you a better contrast so there you go I think I own every Color Picker on the
App Store um I actually talked to the dev of color slurp going off on a little tangent here
they're working on they're completely rewriting the app and um updating it for some of the latest new web color
technology that's been coming out the last couple years um which no other Color Picker supports it was supposed to be released last
month I sent them an email last week asking them what the status is but um I haven't heard back yet so
hello I just realized I owned that and I didn't even have it installed
so one thing I did so okay going off a little tangent so um
I always like I would have my Color Picker you know kind of you know minimized on the dock and are
not open and then I go to you know choose a color for something and I I just because the color Pickers here I
would just use the Apple Color Picker which is always has some issues and it's kind
of annoying um so what I've done is I have a keyboard shortcut that activates rapid
Weaver I just do uh it's actually caps lock key R okay and that will and what I
modified it so not only does it open up rap Reverb but it also opens up color slurp and puts it right there so now all
I can do and now all I have to do is just take the color that I want and drop it right there well that fixed those
color issues when you're using the Apple Color Picker if you drag out of that one straight into rapid Weaver I don't I
don't know um that's mint I don't know it's possible
that is yeah absolutely perfect so like you know I have like all the viewer space colors here so a lot of times you
know I tend to use these for demos or whatever and obviously grayscale all the various Shades of Gray to black or white
to black so yeah I just take this color and be like there we go you know
that's genius my name is the palette's thing there yeah you could do that most color apps you can drag and drop a color
I don't want to say all but but I know like sip sip is another big one that that you can drag and drop and do a
Color Picker there with that too that's cool that makes life so much easier yeah
um okay so sorry about the tangent I apologize no worries uh what was that oh yeah foundation so this is the
foundation theme uh or Foundation uh project um it is super uber fast
um so what changes did I make okay
um guys actually one thing one fun thing I want to do um during this live stream I'll show you
the things that I change on the user facing side um and maybe I'll geek out and show you
some some of the some of the stuff that I did but the code
but uh what do I do oh site Styles okay so inside site Styles one thing I did is
I split up the utility classes okay um by default both um I split it into
half or actually it's one third and two-thirds so you might have seen a post that I
posted I think it was this week on um Weaver space asking about the size-based utility
classes so the the utility class that is current in the current shipped version
that CSS file is about 90 some odd kilobytes okay
22 kilobytes are a majority of the classes and then 60 plus kilobytes
almost 70 kilobytes are only the sized base classes now what are those size
based classes here let's go ahead and I'll show you if you're not familiar with the utility classes there is a stack here called classes you can add
this to the page and you can see what they all are okay um and the size based classes that I'm
talking about are only on margins paddings width and height
and what they do what they do is they allow you to add specific
let's say let's take margins for example you can do you know M colon and then your size
and that adds a margin on all sides but then you can also do MD colon M colon
size and what that does is it only applies that to the medium size and then
you can do LG which only applies it to the large size and it and these MD and LG size utility
classes are work for every single one of these so it's mmtmb so you can be like
you know LG colon MB colon and then your size and that would do a margin bottom
only on large of that particular size it's very
very targeted and all of these size based takes up
again almost 70 kilobytes which is about over two-thirds the size of the file
and not many people use them okay um and if you do use them it's very very
little it's not they're not used much okay so what I decided to do was
um I split them into two so by default it'll still load all of them so I don't want to break any existing projects out
there that actually use them but if you don't use them I recommend you go into site Styles and you uncheck
the utilities extra classes okay and that will disable all of those sized
based utility classes and it will remove 70 plus kilobytes
of CSS being loaded on your page that you're probably never using okay now if
you don't use utility classes at all like you just want to use swatches you can uncheck this and it won't load any
utility classes okay um but I I particularly like the utility classes I do think they're useful I just
even I find these size based ones just a little too granular and I don't use them hardly at all either okay so this gives
us an option of really reducing the size of our web pages okay
um just an example I what I actually on this home page that we're looking at the home pages I was using like three or
four different of those size classes okay I was using them a little bit so
all I did was um I just went ahead and created a padding Swatch that had specific
paddings for the break points that I was using inside um with those utility classes so I just
I created two padding swatches um and I because of those that replaced
all of the the size-based utility classes that I was using so that uh but
with these two swatches added I can then remove the extra utility class and save myself 70 kilobytes
so pretty cool any questions on that
um okay so yeah so there there's these two new check boxes are new
um there used to be inside the sub there used to be a utility classes option to add here I've removed that okay
um um if you have it added to your project you can leave it there it's not going to do anything the the stack is
just empty it has zero logic in it now um it's all moved to these two check boxes that are on by default okay
okay next up um so I I did reduce the size
all right let's let's go ahead and look at some of these bad boys
we're gonna geek out a little bit guys we're gonna look in the dev inspector here and we'll show you some
um obviously Foundation loads um see it has a bunch of CSS from the theme it has a bunch of JavaScript from
the theme um it I I also oh another big update good thing I saw this
um before I dive into that I've reduced the size of the foundation CSS by
I think it was like 40 kilobytes okay um basically I had a bunch of code in
there that still uh you know curtailed to IE8 and ie9 and stuff like
that so I removed a lot of that since even Microsoft doesn't even support those browsers anymore
um so that that saves us about 40 kilobytes per page um just in this one CSS file okay
um next in the foundation um JavaScript file I think I reduced
this by like I think it was 20 something kilobytes purely by this is obviously a compiled
JavaScript I mean it looks like this on if you looked at the raw file um I just updated like I said I was
working on build tools just used a new updated compiler that has more optimizations didn't have to reduce any
code I just used this new compiler updated compiler and uh saved me about
30 kilobytes so that was cool um out of that
um another thing that I've done okay is
foundation 6.14 will load jQuery 3.7 by
default and well it will it there's no way to load an older version right now
okay um before in order to load jQuery 3 you had to add a child stack into site
styles um now it just does it okay
um jQuery 3 has been released for eight years now and the only reason
Stacks still use jQuery 2 was for some very old stacks
I have no clue what Stacks out there don't support jQuery 3 but developers have had eight years now to add support
for jQuery 3 to their Stacks so um jQuery 3 again it's much faster it's
much lighter weight and um it won't you won't get flagged in
Google page speed and whatnot for like security issues from from versions of jQuery so we load this version of jQuery
was just released in May so it's the latest and greatest most optimized version
um and it will get loaded on your page regardless so
um that could mean if you're using some ancient stack on a foundation 6 website
um it may not work I don't know um so that there could be some issues there
right now as of right now there are no way to revert this it is a change that is happening
um but I don't think there's going to be any issues all of my stacks have worked with jQuery 3 for many years so I think
we should be golden okay
um some other performance improvements uh it's kind of hard to show
um it's hard to see this um without going extremely into the
weeds but basically what foundation will do now is
so when your web page loads there's two ways assets can be loaded onto the web
page it's either a render blocking load or asynchronous okay
so by default let's say let's take CSS files um error or even JavaScript files when
when it gets to a CSS file their web browser will stop rendering the entire page load that CSS file and once that
CSS file is downloaded and loaded into the into the browser then it goes to the next thing okay if that's another CSS
file it will it will it won't render any more of the page until that CSS file is rendered so on and so forth okay
so um what Foundation 6.14 does
is it has Intelligence to know what are the critical CSS files
that are needed to render your page any non-critical CSS file that it finds
it will load it asynchronously and what that means is it'll load it in
the background and it won't pause the browser from rendering everything below it
that's important for things like a big one is let's say font awesome that's not
a critical thing that we need to pause the browser's rendering in order to load the CSS for it and all the icon
files for it right that could just happen in the background and when the browser's done all the icons will just
magically work right so for libraries like that can be loaded in the
background whereas um CSS from like your stack settings or
the the foundation CSS file which contains you know all how all the columns are built and how everything
looks right those are important to actually wait till they load till we render our page because if we loaded
those in the background you would see a flash of what's tend to be called a flash of unstyled content
okay what that means is because everything's getting loaded in the background that
will make your page load super quick but your page is going to look like for like half a second because
none of the Styles have loaded yet you'll just see white background black text maybe some images and nothing will
look good but then magically everything will just look good all at once that flash of unstyled content is
something we don't want because it really does look amateurish so that's why this critical CSS loading that I
built into Foundation 6.14 will load certain CSS files and before
the page is rendered um to make sure that we don't have that flash of unstyled content
does that make sense cool and that gives us a a performance boost
because um the current version now all CSS files will be loaded
um will rent will block the rendering okay so we will see any you know non-critical CSS
get loaded in the background which will then cause our pages to actually get loaded faster
okay all right um
all right did someone say something very good okay cool um
let's see what else do we do
oh let's go and do let me share my screen again okay some settings that I'm gonna
recommend at least you could do that in your current projects I think it actually will be beneficial
um but especially in 6.14 um after playing around with how
um rapid lever loads various things okay
so in your Advanced project settings
you know we have all these check boxes okay um these are the two check boxes
that I'm going to recommend you check everything else you can uncheck now
um with a couple considerations if you're using a breadcrumb stack or a
theme that has breadcrumb you might need to turn that on okay that's indifferent that's up to you up to you
um if you're using the email address that is in if you're using this field somewhere
okay support at Weaver space um or this wherever this email address is this is mostly for themes not
Foundation okay um if you're using this field and it's actually getting populated somewhere on
a web page because you put it in there then um you might want to do protect email address
okay um if you're using rapid reverse sitemap um you might want to turn that on okay
consolidate CSS files if you're using Foundation six um I don't recommend you turn that on
any longer okay and if you have Minify Minify CSS and JavaScript and you're using
Foundation six I don't recommend you turn that on either okay so the only two I think are
important cash busting links I think isn't a great thing I've talked about that a lot is for caching okay it's
great I strongly recommend you have that turned on and tidy website links that allows you to have you know remove the
index from the end of your URLs I think that's a good thing too so um I recommend these two things to be
checked um while we're in here I set my default page extension to be PHP I just think it
saves me a lot of headache of later on adding a stack to a page and it changing from HTML to PHP and then I have to go
to my server and delete the HTML file which is annoying so I always just make my default extension PHP okay
um another thing I noticed and this drove me nuts for quite a while yesterday is if you change let's say
this consolidates CSS files um you have to restart rapidweaver for that change to actually take effect
I didn't realize that so um if you if you change at least the
Consolidated CSS I didn't do much testing on the Minify but I already Minify everything in foundation so
um you know using having wrapper Minify already minified code can potentially be caused some conflicts so
um yeah I already Minify everything so don't need to worry about that and then again the consolidate if you're curious
what the consolidate is is um traditionally in traditional traditional
themes um a theme would contain like 50 different CSS files and each each of
these very many CSS files did like one or two things and um rapid consolidates CSS files so
it would take all those 50 CSS files and put it into one which was great back in the day
Foundation has one CSS file I'm not even talking to you I didn't even say the word Siri
um Foundation has one CSS file so by con by checking that consolidate CSS file or
consolidate setting what I've noticed is that um rap we were sometimes will do like
consolidated CSS and then consolidate to CSS for some reason and then like your
server gets filled with these Consolidated files um and so yeah you don't need it in
Foundation just turn that off and we should be golden okay um it'll just load
foundation.css um which is built into the theme and you should be good to go
right any questions on that I know uh some of that recommendations are new
um you know especially the consolidate and then Minify a lot of traditionally I've had those checked and as I was just
doing again more optimizations on theme and really playing around with all these little settings to see exactly what they
did and how they affect the outcome um I recommend turning those off
it won't break your site if you have them on I don't expect it to I mean we've I've
used them for years too um but I just see them as unnecessary and don't need to have them on
okay um and that's all I have with Foundation six to fourteen as of right now there I
had a couple other small little um updates here and there nothing huge or fancy I have a couple things on my
list that I might add there's a couple form features that people have been asking for that look interesting I I
might add those but the big thing here is this update to the theme um and so
um while on the surface it doesn't look like a lot um under the covers it's actually quite
large changes um and gives us a little bit of performance boost
very cool good job brilliant
[Music] well with that open up the floor anyone
have any questions or things they'd like to talk about
oh I just switched over there more from my new project over the what project oh just starting a
new project for someone so I've just switched all them bits off you said ah okay so
we'll see
I thought Scott might oh one thing here actually it was to be this will kind of be a fun
exercise what I wanted to do was um one thing I wanna so here on my desktop I have the current
release of foundation and what I want to do is I want to compare them
let's I'm going to show package contents all right here so that's the I'll do the
old one on this side okay and then over here we're going to do the new one right over here let's go
to themes Foundation six
contents all right so here's the new one on this side we're gonna go into here all right so
let's just I just want to compare the the sizes here so here we have 223k is
the old one and the new one is 186k right here hold on and I wanna
I wanna keep track of this here hey so yeah
foundation.css is 233 kilobytes minus
186 kilobytes okay sex 47 kilobytes different and let's
look at the foundation JavaScript file so that went from 163 kilobytes to
152 kilobytes okay so we do T JS went from when I say 100 263
163 kilobytes minus 152 kilobytes
okay and then we have let's see just the raw HTML file let's see that went from
that's the same three kilobytes of three kilobytes okay all right um
jQuery I think that's smaller as well yeah a little bit every little bit
counts it went from 90 kilobytes to 87 kilobytes
90. kilobytes minus 87. 0 bytes
all right and then we have the utility CSS file which went from 70 kilobytes
down two three kilobytes
okay now um now to be fair um so the new one has a a file called
what input.min.js that's five kilobytes that actually used to be inside of
foundation.js so what I'm going to do is here let's just do this plus five kilobytes to be fair
um all right so total Let's see we are now at 103 kilobytes saved per web page
pretty cool I like it
one second I'm getting a phone call
foreign
guys okay um so yeah 100 like I guesstimate 100
kilobytes I was about right 103 kilobytes saved that's nice
any uh any uh any anyone working on something or you have any questions
I'll I'll tell you something I I might add tomorrow I might work on tomorrow is um if anyone has my compass stack you
know Compass allows you to add like um arrows that point to you know next page or previous page
right now when you click on Compass it actually navigates the the web page to a that
particular URL what I thought would be cool is to
integrate it with off-site so that when you click next it'll load that URL into an iframe
um inside off site so the page actually never refreshes it'll just load the next
URL um so yeah I thought that was kind of a cool idea um obviously the tricky part of that is
not only do I need to um refresh the iframe URL but then I need to dynamically modify the links of
the next and previous links on Compass but um should be should be doable so um I thought that was a cool idea and uh
I've had it on my list for a little while so I thought that would be an interesting one to do yeah so I'll probably implement that
tomorrow well I haven't played with that one yet I've got it but um I'll give that a go
nice I was actually curious does anyone does
anyone use my placeholder stack it allows you to have like placeholder
images it's a freebie okay um and it works with several or I'd say
the reason I'm asking this it used to work with several online image generation like Auto you know
placeholder image tools and um all of them have died so um I'm
debating whether or not what I want to do with the stock do it do I try to rewrite it do I try to find another
image service do I just let the stack die I've only had one person ever
contact me saying this stack doesn't work anymore so um and I looked I was like oh yeah look at
that all the services that pre-services that it used no longer work so
um not wasn't sure if it was a value since only one person never contacted me about it although a lot of people find
errors or issues and never contact so um
yeah does anyone use that does anyone find what are the use cases for like I
know like when you're designing the site for the first time I can I can see like placeholder images and even placeholder
text being useful but like how can we make it seamless you know
like because the problem with that is let's say you use a placeholder image stack right the problem is later on
you're not going to want the placeholder image you got to replace it with an actual image then you got to replace the stack with the image with like a picture
Stacks open why don't you just make it that if you have it installed it's a child stack of the image stack
yeah yeah and then I was also thinking also so that's an interesting idea for
for a placeholder um for placeholder images I was also thinking like text like so let's say I
want to design this page customers giving me data yet I just need to put in something in there right
like and I'd love to not have to replace the the let's say the header stack or
the tech stack or whatever text based stack I have on the page right
couldn't you just put something like a macros that if you typed something that's exactly what I'm thinking like
you know does that sound interesting like we had like some sort of like placeholder macro thing
Foundation six that'd be sick yeah that's that's what I was kind of thinking like if you had like a macro
that was like just like lorem Dash and then you could say like the number of characters or something yeah exactly yep
yeah yeah that would be pretty useful and same thing like for images maybe you
know you just had a a placeholder image option where it was just like you know you gave it the size and maybe it's just
a by default it could just be like you know one of those great images that just says like 640 by 480 or something you
know what I mean you know you know you know what I'm talking about um you know like those you know computer generated images that just you know it's
a colored square with the you know the the size or some placeholder text on it or something like that you know
um yeah and then integrating that into something like the the picture stack or something
um okay so you think that seems that seems like an interesting solution like the the
macros I thought that would I thought I was thinking exactly the same thing like some sort of Laura mips and macro would be cool
oh all of a sudden you're muted Josh oh maybe he's not talking to me
Joe how's it going man I understand
oh we got rod 's coming on [Laughter]
Joe Matt your points with uh thieves thought
um that's all of a sudden interesting to me in my own little diversions um how would I approach
uh two pictures on top of each other say one black and white and one color
and when you the black and white is on top but its transparency would pop to
zero when when the uh Mouse is basically hitting that point is that just a
transparency um Swatch or do I need to get more
so you just want to hover when you hover over it you want the the black and white to fade away and see the one underneath
it yeah all right um
I have a stack called mask that that's exactly what it does it you can overlay two images on top of each other and the
top one Fades away um good solution for me
um I mean if you really want it you you could do that with it all with swatches
as well if you really wanted to um you know you could have two images inside of a container
um the image that let's say the black and white image has a position Swatch that overlays it on top of the colored
image and then you have a hover Swatch that when you hover over it the opacity of the black and white one Fades away
um you could probably do it with four or five swatches um or mask uh yeah the short answer is
use mask since I never have before but I have bought it oh oh if you own it then there you go that's exactly what mass
does yeah actually I think the demo I think the demo is a black and white pick one of the demos is a black and white
picture of me that when you hover over it it fades and shows a color picture of me yeah but can I just see your right
eye you know can I can I can I hover over
your right eye and that just that part of the thing oh oh you wanna you wanna
unveil oh that's no that's not possible I I it would be the whole thing
um yeah you can't like show a hole of okay I see what you're saying now no
that is not something that is possible um at least in my knowledge
um maybe someone who's smarter than me could figure something out but I I don't I don't think something like that would
be possible anyway so what do you want to do and you substitute a picture in points
so you take out that picture from both of them and shove it into two points
that overlap each other and do it to the points ah
we can control the position of the point we can control the size of the point you control what the point looks like right
uh-huh so couldn't you just sample that part of
the picture as a circle or whatever that you want um
Dr Bob I can see a bunch of Nobel Prize winners doing this thing I'll be looking
for the code it seems like kind of what you're what
you're looking for is kind of like something like magnifico right where you're hovering over and I
mean magnifico magnifies that particular part of the image but what you want to do is you just want to show the color
version of that what if you were to use magnifico okay and have you know the background image
be black and white the magnified image be color um and then you don't even need to set
any magnification you could set it to be 101 um something interesting to give that a
shot maybe so that the magnifying glass hovers over it again because you can have remember you can have two images
the black and white could be the background image and the magnified image is color and then when you're when you're
hovering over with the magnifying glass your your magnifi you're magnifying the color image not the black and white one
does that make sense it does magnifying it at zero yeah magnifying it is zero
yeah okay thank you give that a shot I will
that's like two stacks I've never used that I can take around honestly I think I've made I just made a like black and
white and you hover over it with swatches it's just filter Pro and a hoverse pseudostate
a portion of the image let's say like my eyes what you initially said though
you're masking you don't even need that anymore I just did it within like Yeah Yeah with Filter yeah you're true you
could do a black and white mask with with Filter Pro that's true yeah of color Yes yeah yeah
that's a good point although to be fair that that that swatch is a part of the
filter Pro stack which integrates with with foundation so it's because you own the filter Pro stack you have that 100
yeah
excellent okay nice job and guys oh no problemo morning
oh they need to tell me there's an excessive heat warning in Texas give me a break
two months [Music]
well guys if we got nothing else um I guess we can call it quits anyone wants to have any parting
questions unless we all let you guys go for your day sweet IE thanks for popping in Joe Francesca
interesting Dr Bob David
[Music] yeah it's gonna double up did you notice
it was a help another guy on the the Weaver yeah Daddy Bill's iPad no no no
it was uh another first name burden another guy oh really yes I couldn't
answer his question because that would have made me the cooler one
cool guys well thanks for popping on today hope you learned something that I didn't bore you to death
um take care and hopefully we'll see you on Friday at the Hangouts yeah