Transcript

00:07 so other people aren't G to be able to uh see it so thanks Josh for letting me know and there are errors I'm not even going to look into it because we're all
00:15 here anyway so I'm just chatting on the chat that the eight people sitting there waiting no oh
00:23 okay yeah I post it on the YouTube chat I got you
00:40 sorry I just jump in quickly again and thank no problemy I just want to kind of explain the issue maybe to everybody so
00:49 okay um guy if you you ever used total CMS and you're on the admin side sometimes people get this this error
00:57 less and less lately I think because they they know how to use total CMS right um but if you if the URL that's in your browser doesn't match the URL that
01:06 is inside your project settings you can get like this little error at the top saying hey your project settings don't you know don't match the URL in the
01:15 browser total CS does this for security reasons to make sure that um a the
01:23 website that's getting visited is actually the licensed domain right so um and so you could have issues it maybe
01:30 saving won't work and stuff like that so um what guy does um he does a lot of accessibility testing if you have if you
01:38 haven't if you're not familiar with him from either past Summit talks or posts on the community really big on accessibility and um a lot of the
01:47 accessibility features that you get um in Foundation or in a lot of our stuff guys guys the one that's kind of
01:55 being like Hey Joe I need this right so um a lot of that is uh has been spearheaded by him so thank you for that
02:02 but he used a tool called wave I think it's like wave. web a.org right am I correct okay um and it is like an
02:11 accessibility testing tool and um on the homepage of the site he was testing he was getting this uh website address
02:19 error right um the website you know mismatch domain error and the reason was he he
02:28 was testing the homepage but he was getting that ER now that error should only ever show up on the admin side so I
02:35 all was it took me a couple days to realize but I was like wait he shouldn't be getting this on the homepage at all because that error should only ever be
02:42 displayed on the on the admin page so um I guessed again properly that he had
02:49 added the admin core into site Styles which was probably a partial That Was Then added to every single page on the
02:56 site um so I suggested hey remove the admin core from your from your partial that should only be on the admin pages
03:03 and um the error magically went away when he was testing his site on Wave yeah um so thank you this why I'm kind
03:11 of a huge fan of one of two things either running admin projects as a separate project um especially if you
03:18 don't need to share your Styles across like run admin as a separate project file um then you don't ever have that will never happen because you would
03:27 never put admin on the front side project mhm and then the other way of doing it is ensuring that I don't use
03:35 site Styles actually to put anything inside of site Styles I use Swatch panels and it allows you to kind of
03:42 group your types of of your swatches and stuff together but as well as it allows me to keep like admin core separate so
03:49 you can have its own partial separate so if you do have one project file for front and back that you would keep admin
03:56 core out in a separate type of partial and I kind of like it because um if you were to use site Styles across front and
04:04 back um having a separate panel for admin site Styles like admin swatches admin core that allows you then to tweak
04:12 stuff on the admin in a separate area without putting that styling in the actual site styles that would be across
04:19 the entire site yeah hey and just another thing like while admin core you could put it on your I mean as you as you saw your homepage still functioned
04:27 even though admin core was on there you don't necessarily want that mostly because admin core loads a ton of like
04:34 extra CSS and JavaScript that I mean if you're you're not if you don't have any admin stuff on your homepage or on any
04:41 content page Why have it on there right so um you were just adding a ton of extra stuff to your page weight that you
04:50 didn't need at all right so yes it's cool it's cool being lazy Joe I think that because I went through it I went
04:59 through it and I went through it and I I you know there are times where you're looking at stuff thinking why isn't this working and it doesn't matter if it's straight in front of you you don't see
05:08 it um but the moment you came back on that comment I went straight in sure enough deleted it bang sorted you know
05:16 and that's after what a week yeah as if I needed another like voice
05:23 in my head saying watch your page weight oh Jesus
05:30 I don't even get into that that's the problem it's just not working you so anyone pop in here with some
05:40 extra questions that uh I can help out with or answer Hey Joe um hey Bill been trying
05:47 out the Bento excellent and um can I share you a screen sure you can share
05:53 your screen here we go can you see that I can see it okay so
06:04 uh this is the layout I'm trying to achieve 1 11 uh one through
06:14 7 works correctly then it goes tilt when at 8 so
06:23 um I'll show you the so there's there's eight down there the the the P
06:30 mhm and nothing is showing past that and I cannot figure out what the heck is going on okay um so go to your Bento
06:40 grid settings click on Bento grid okay uh you're showing 11 okay just
06:49 curious uh go to medium and others what what is large what is that item set to on other ones is it set to eight go to
06:58 medium well ni how about small zero an extra
07:06 small yeah I haven't fiddled with those at all okay I'm just okay go back to
07:14 large and so it stops at number nine you said right eight yeah I I get eight and
07:20 then 9 10 and 11 uh okay let's go to number nine well let's look at the settings on number
07:28 nine M Advanced positioning so it's column two row
07:41 five okay um so I I I did ship an update last night uh to Bento and um I've
07:50 completely kind of revamped these rule settings okay um I've made them I think
07:57 easier to use and I've also um fixed a lot of bugs in the
08:04 process as well so it's possible that my update will fix your issues um I'm just using the grid I'm
08:12 not using the uh the ruer one yes oh well I'm well I mean the rules in in each individual item stack and so in
08:20 Bento item you you create rules yeah um and and those settings have been completely
08:27 revamped um and uh I was actually today during this live stream I was going to um give uh
08:34 give kind of an overview of uh of what it will be um and the changes okay um so
08:43 why don't IE and it will be a little bit of work to I'll have to show you on on in mine on terms of what you'll have to change because the settings are
08:50 completely redone you haven't lost all your layout that you built um but yeah it they're very different okay okay yeah
09:08 Weaver after the update too always restart after updates yeah okay okay um give me a few minutes and we'll we'll hop into that maybe we can answer your
09:17 questions then okay um anyone else have any other questions anything else any other topics we want to jump
09:24 into no okay if if not I can I can hop into and show you some of the updates I did to Bento um over the last week um
09:34 for those that didn't that don't know um Bento I did the pre-launch last
09:41 Wednesday during the live stream and um it is kind of a pre-launch
09:48 so uh I am actively still working on it so like I did a pretty big update yesterday that modified how a lot of the
09:55 settings work I don't normally tend to do big updates like that um willy-nilly after launch but this is kind of a pre-launch thing and I think
10:04 it was it makes everything a lot better based on the feedback and the designs I saw people trying to make um which is exactly the point of me doing the
10:12 pre-launch for bento so um thank you for those that are that are actually doing that uh and share my screen and then we
10:21 will uh we'll hop on let me get these Zoom windows out of the
10:27 way okay need that okay um
10:39 watch so so actually before before I I get going on this what what um ah it's fine let's
10:49 let's just go straight into Bento um okay so first off I created some new layouts with Bento which is
10:55 pretty cool okay um I'm just playing around with new ideas um so here I'll
11:03 show some of these some of these new ones that I created okay so this first one so far a
11:11 lot of Bento um layouts that I built have been pretty much like oops not what I
11:22 wanted oh open on my other display okay um so far a lot of the Bento layouts that I that I have are like um these
11:30 colored boxes where each item in the grid is this is the box right um but someone uh I think it mosimo was asking
11:38 for some uh some interesting different layouts and I was trying to you know wrap my brain around what he would want and he kind of wanted this kind of kind
11:48 of a more random kind of layout where there was a lot of white space in between the items um and so what what I
11:55 did with this layout I don't think it's a beautiful layout but just I I kind of created it so he can get more ideas that guy's a very good very talented idea
12:04 generator uh for pretty great layouts so um in this example
12:11 here um instead of like the the colored box being the entire grid item it's
12:18 inside of the grid right so like for example here uh let's inspect this kind of show off show it off
12:26 here man I lower the resolution of my screen now it's like I don't have enough screen space
12:33 okay uh I don't need that right so here we have each grid item okay and and just
12:40 just what I wanted to show you is if you look at this grid item right you'll see how large that grid item is however the
12:48 content is not like doesn't fill the entire space right um I just think it's it's interesting this isn't necessarily
12:56 a great layout you should mimic um however I I think this demo proves a point where kind of you can visually see
13:05 how grid maybe is working okay um and that you know the content doesn't necessarily need to fill the entire
13:13 space okay um okay now let's go on some some demos that actually do look
13:20 nice um so here's I was just playing again just with different sort of layouts um so I I thought this was an
13:28 interesting uh pretty nice you know layout for Content okay which is pretty
13:36 slick um and then let's go to with this other one this one was pretty interesting I like this one where it was kind of like they're all like
13:43 centralized around this um you know this D and it kind of all Lays out around it um I really really enjoyed
13:52 that um so as we go down then it kind of just morphs and do a different layout so um
14:01 pretty I mean very different layout from small all the way up to large but um I really love the large layout I was
14:09 trying to come up with a diff with an interesting layout on how it would react on a mobile device but eh it's okay but
14:16 that layout is money I think that is just really really great okay um and then the last one this one is
14:24 interesting in that um all of this was done with one rule right um so really the Only Rule I have
14:32 is on the this very first item here the Only Rule here is on this first one and the rest just kind of morph right so as
14:41 you see here a is large and then kind of have and think of this as maybe like a portfolio or you know some products and this is kind of your featured one and
14:50 all these others could be you know other layouts and as we get down they kind of you know uh go drift below and then as
14:58 we we go here um a is still wi wider now it's not very tall that's because it doesn't have much content um but then
15:06 all of these other ones kind of um you know flow below it so anyway I thought that was a really great layout all right
15:14 um so I wanted to show off I told you I completely revamped um the Bento rule stack okay
15:23 and Bento Rule and the the settings are exactly the same as in vento item okay
15:30 so um they're very different now right they're I think initially it looks maybe a little bit more confusing but the
15:37 workflow I think is a lot better okay uh because before it was just a bunch of number boxes and that's it okay so let's
15:45 go over um what we what we can do here so I'm going to go ahead and uh let's add oops uh I'm going to
15:53 add a Bento rule here just for fun um instead of a item but this again the settings are exactly the same
16:05 um the way these new settings um work is I think it actually benefits if we start
16:14 from small and move and build our layout up to large okay and let me explain
16:23 why if we notice here when when I added this new uh rule okay you'll see that um
16:30 each basically breako is now has its own settings group so here I have extra small which is also the default sizing
16:37 then we have small medium and large okay now by default small medium and large inherit right they basically they
16:45 they'll take in whatever is above it so for example here on uh I'm looking at number two if we were to go to uh actually
16:55 let's go to large okay um if I go to let's say I want two number two and let's change the color just so we can differentiate it okay there's number two
17:04 different color there we go all right and let's make number two too wide okay now I'm currently previewing the large layout can we can
17:13 see that right here okay but because large inherits from medium medium inherits from small and small inherits
17:20 from extra small um this extra small go you know basically propagates up so I don't if and if I'm good with that a lot
17:28 of times s if you set a sizing on on an element you don't need to size it for every single uh break point right so
17:36 maybe I I just want number two to always be too wide and at that point I don't need to set the sizing on small medium or
17:44 large okay um for example maybe this would be good if I if I just completely rebuilt a
17:51 layout here let's go ahead and I'll show you the new workflow in
17:59 let's do this layout I think this layout was a lot of fun okay um just for Just for kicks here um I'm going to take a
18:06 screenshot of of this layout since I already built it and then this
18:13 layout just so I can rebuild it quickly
18:20 okay wait and uh let's just pin it and pin it okay cool
18:36 oh pinning it actually makes it like you can't hide it or I'll just I'll move them over here to my other display so you guys don't have to look at it okay
18:46 cool right so I'm going to go ahead and I'm G to delete everything
18:57 here right so let's go ahead and
19:03 uh I am going to be building this layout here can I resize this oh I can nice
19:11 okay so we're we're gonna be building this layout do you guys see this little hovering window I'm just curious oh okay cool excellent excellent so I'm gonna
19:18 build I'm gonna be building this layout again okay so um we're going to start off with the small layouts okay and um
19:28 oop that's the large layout we we want the small one there we go so this is going to be my layout on
19:35 small devices was it I think it's quite
19:44 complex for us of all but hold on one second I this might cause rap to crash let's
19:53 see let's go back oh oh no that was my small layout okay
20:01 never mind okay so we're going to go from small to large okay never mind let's uh all right there we
20:13 go oh no did I get rid of my dang it I closed my little preview window darn it
20:21 how do I get that back and clean shot now where is clean shot here capture history
20:32 ReStore in it yes ha cleanshot a great app it it is
20:40 expensive for a for a screenshot utility I'll admit that but it is very good okay um so we're going to build we're
20:49 going to be building this layout and um let's go here and essentially if we look at this layout um what you want to
20:57 do is you want to figure out your smallest cont your smallest item in a grid right so in here I have um I
21:06 obviously have three tall okay um and then over here I have number two um five and six and they're
21:14 kind of uh interesting so what we're gonna do is
21:23 we're going to have three columns wide and four and four rows tall okay so how do we do that we do um
21:32 number one is going to be one column and then number two is going to be two columns right so uh let's go ahead and
21:40 do that so number one is just going to be a uh a one by one okay on small on extra small right cool done let's go to
21:49 number two number two we want that to be wide okay so that is going to
21:55 be uh and why am I oh that's why I'm not seeing the the items okay
22:07 um hold on one second um something I I don't I'm not sure if I explained this before um after you've solidly developed
22:15 your entire layout this this item setting that is what you set Last by I recommend just keeping it to at zero at
22:24 the beginning okay um so so number two is then going to be too
22:32 wide and Too Tall okay so let's go ahead and go to number two it's going to be twoo wide
22:41 and twoo tall okay um and let's go ahead and let's do number three and number
22:48 three is going to be one wide and you don't see it here it's going to be too tall though okay um so let's go ahead
22:56 and I want number three to be one wide and two tall perfect and then uh let's go ahead and
23:06 number four okay number four um is going to be oh this is interesting I forgot I did
23:14 this and now number four by default goes here okay um but what I want I want
23:22 number four to be a one by one right so we're going to do that right and we'll we'll get it there
23:29 eventually watch out right so then number five go ahead and do number five uh number five is going to be a a
23:39 one by two oops and that's number five okay and then the number six is
23:46 going to be uh the same thing as number five all right so number six is going to
23:54 be a the same thing now my layout's a little funky here okay what's going on so I knew I wanted number four to be
24:03 here okay so what I'm going to do is uh we're going to go to number four and I
24:10 want to explicitly place it right there because I know it that's exactly what I want now if you wanted you could do you
24:19 could do it slightly differently okay uh whereas number four was too tall number five was too tall and then number six could be a one by one but I just thought
24:28 this was an interesting exercise so um so what we're going to do is on number four I'm going to do Advanced
24:35 positioning I want this to be column number one row number four and there we
24:42 go okay so I explicitly told number where number four to go and now my content grid is in place
24:52 okay now um now my extra small grid is done I can say oh the number of items is six and we're done we're we're locked in
25:01 at six items and then we can go to small and um and then we can build our small layout now for here I my small
25:09 layout is going to be exactly the same as my extra small layout so I'm just going to lock that in and I'm going to set that to six items
25:16 done and now let's go to medium now medium is slightly different we have a different layout okay and that
25:23 layout is going to be this guy right here okay maybe I'll put this up top so we can see it up up
25:31 there okay so uh in order to build this you'll see that I have a five columns by
25:38 six uh rows okay and why is that well let's look at let's look at my design here so um in this design I have my
25:47 smallest Square here is four so number four can be a 1 by one okay so that means number one is two of
25:56 those um and so and then number two is going to be uh one two three of those right so
26:05 that is two plus three is going to be five columns okay and then if we look at my number of rows we have six rows so this
26:13 is going to be one two three uh hold on one second so this is
26:22 one this one's going to be two that one's going to be two this one's going to be uh two as well this one's going to be three and this one actually is going
26:30 to be three I think as well the way it comes up so let's just let's go ahead and start building that out so now we're
26:38 going to go to number one and let's let's tweak that um oh I already had medium sizing
26:45 set so medium sizing uh is set on number one to be a 2 by two by default it would look looked like that but um I didn't
26:53 delete number one so there we go so we're going to turn on medium sizing and then that is now a 2X two okay um
27:01 because that's what we want it too wide and Too Tall we go to number two um this is going to be a
27:10 3X3 actually okay oh and all of these were because I copied and pasted the other rules hold on one second let me
27:18 just turn off all of those there we go uh if you if you don't know what just
27:28 happened I was copying and pasting rule number one which had a medium siiz set so I just unset all of those so that
27:34 they're all inherit okay so um now now we're building now we're cooking with Chrisco okay um so now rule number two
27:44 uh I want this one to be let's set medium sizing I want it to be three wide and uh two tall actually three
27:52 tall okay um now let's go ahead and let's go to number three um number three here I want that to be
28:01 too wide okay and Too Tall go to number four number four is
28:09 going to be a 1 by one right we're getting there number
28:20 five is going to be a 3X3
28:29 or or no 2 by two or 2 by3 sorry okay and then number six here is going to be
28:37 a uh 3x two let's go ahead and go to medium and
28:43 I'll do a 3X two and there we
28:49 go and if we well preview that come
28:59 on Boom pretty cool so um I did that pretty much just
29:06 kind of show you um hopefully bill that that helped you out how I kind of built this so basically you're just GNA you're going to build each layout individually
29:14 by breakpoint size and this is also the first time I've actually explained out loud my changes that I've been working on the past week so um I did fumble a
29:22 little bit so bear with me on that thank you very much um so anyway here we
29:30 go cool any questions I know you guys are you guys are like Deering headlights or what I don't
29:37 know it's just it's a lot of settings you know but I mean for good reason yeah uh it is um I think Bento scroll
29:47 actually is is going is a little easier to use because you're just creating the rules right um uh so
29:55 yeah uh I think with uh and actually this another thing is in this update I renamed Bento grid to be just Bento um
30:04 so while you you can create very intriguing layouts it does take a little bit of maybe forethought um and I do
30:12 think having an idea of what you your design is going to look like before you go to design it is beneficial you know
30:20 so maybe like I had all these design layouts I I kind of was just scouring YouTube and the web just like okay what are interesting layouts and then I'm
30:28 like oh I like that and then I'm able to build it because I can visually see how things are going to lay out you know um
30:35 so I I do think it is kind of important to try to design your things first maybe you know what I mean like at least get a
30:44 general idea a chicken scratch you know um so yeah that's interesting
30:55 idea it'd be cool to have a like a template in Affinity designer with different size grids that you could
31:02 maybe just start moving around yeah just moving stuff around that's an interesting idea yeah maybe yeah make some like Lego Lego brick type thing you
31:11 know where you just have a different color or different and just pull them in make your L now I I do have a third
31:19 stack uh for bento coming um and it's going to tackle it's going to be a different way of doing similar layouts
31:29 as Bento it's going to be called Bento areas and um it takes a very different approach
31:37 but you could do similar things with it um so it'll be interesting um I I don't have anything to show you right now um
31:44 but hopefully by uh next week I'll have something or maybe if we're lucky maybe by the hangout on Friday I might have
31:52 something uh for those that join the Hangouts on Friday very cool um it won't you won't have to you won't H you won't
32:01 have to Define um you know like this one is going to
32:12 be how do I how how do I articulate so in the current version you have to say Okay item number one is going to expand
32:19 two things to wide okay it's going to be very text based okay so um here uh might
32:28 as well tell you guys how it will work even though I I I don't have it built right so let's say in this area here
32:35 okay um a lot of times I think this will be most beneficial when we are building let's say a page layout not necessarily
32:43 a grid on our page okay but a layout for our page itself okay so let's say for
32:52 example okay um we tend to I'm going to use columns
32:59 to to Showcase this okay just for fun okay so in here um this is our page
33:07 layout is at the top we have our hero header right okay just pretend that has a a
33:14 header with you know menu and images and all that stuff right um and then below that we tend to have let's say a two
33:23 column right that has and this is our main content
33:31 right and then over here is a
33:39 sidebar okay um and then uh then we also have our our obr let's see this one's
33:47 going to be like uh 925 okay right so we have our main content and our sidebar and then further down in the page then
33:55 we have our footer right so this is let's say the a base layout
34:07 for um a web page okay now if you notice this is kind
34:13 of like this is a grid right we have um if we look if we look here I have potentially I have two columns here
34:22 right and then this one spans two and then the header up here spans two right so let's say for example then I could do
34:30 something like oops uh like this so I Define let's say I Define I
34:36 give each of these areas a name okay so I give I give each of these areas a
34:43 name header main sidebar here let's do this content right here let's say
34:50 content okay content sidebar litter okay
34:58 um and now let's say content here um what's the smallest the sidebar is
35:05 our smallest unit in this layout right and content is three times larger than
35:13 sidebar okay so um what we would do is let's say let's make this a lot
35:23 bigger right so in in this made content basically we have content
35:31 content content and sidebar okay basically I'm creating a
35:37 grid where content is three times larger than the sidebar does that make sense do you see
35:45 how this here this this line of text correlates to this layout right here yes
35:53 yes you see that yeah okay so then uh above it we have a header and
36:18 do oops so there essentially this here is
36:26 my layout I'm defining my grid with just some text right so I'm
36:34 defining hopefully is that making sense now so I defined my content we we're we have a we're creating a grid here that
36:42 has four four items wide so um my content and my sidebar kind of Define that right um because content is three
36:50 times wider than the sidebar and then I want my header and my footer to span that entire WID so we're
36:59 going to go ahead and make that span the entire thing all four of those
37:04 columns and that is my definition for
37:11 um for my grid so basically it's it's uh you define it and then and then basically
37:19 when I when I uh Define my grid and then when I create my content I say okay this content is a part of the area header and
37:27 then that will expand that entire bit and then when we have a content for our sidebar it will inject it right there
37:34 and it's going to inject our content guess where right here and then when I have my uh content with footer um I'll
37:42 Define it I'll say hey this content is part of the footer area and it's going to put it inside and ex and it's going to see that these four things are right
37:50 next to each other so it's going to create one footer area that spans that entire that space on the page
37:58 am I explaining that well at all I know it's I I think it's pretty interesting I'm interested to see it myself um and
38:05 maybe does that sound interesting at all it does sound
38:12 interesting okay yeah okay now that you made it that way can you update it in total
38:20 CMS because it's just it's just text right so if you put ITT something something like that could be done yeah
38:28 um you can make the the layout up updatable and and then and then let's say Okay um
38:38 so let's say that is my my um large uh grid right so so this is my setting for
38:45 a large grid right okay and let's say um you know but
38:54 my small I want I don't want it to look like like this right I I want it to be different okay so on small maybe we just want everything stacked on top of each
39:03 other so at that point we just have header content
39:12 sidebar Putter and at that point this is my small
39:22 right right because then at that point they're just all on top of each other and then of course you can then change
39:29 that to be you know here if we want to do medium we could do like uh I don't know like header header um and uh you know maybe we
39:39 do uh content content sidebar I'm guessing I don't know something like
39:48 that right so now on medium devices um the sidebar is going to take up a little bit more space because content is only
39:56 two times bigger than it right
40:04 so it's interesting it's different than I think anything that we've had before and we won't know if it's amazing until
40:11 we actually get to play with it so so that that's my idea I mean I think it's interesting being able to Define
40:19 these grids using just plain Simple Text um in my brain it's brilliant we'll
40:31 see we will see when I implement it if it will if it will Converse to my Brilliance into your Brilliance um we'll
40:42 see I have faith in you Joe sometimes I have brilliant ideas and they completely flop and I go oh oh well
40:50 that was a and maybe this will be one of them but I don't know we'll see
40:58 because while I think Bento is is I really do think it's it's great and that that edit mode interface
41:06 is um like nothing we've had I think and yes it it does take some work to design
41:13 your grids um but we can actually design them now like we couldn't do this before right so
41:21 it's something new um and that edit mode interfac is I I do think it's great so but anyway okay I'll stop I'll start
41:29 stop talking about it just turn into a game like Tetris
41:33 [Laughter]
41:37 [Music]
41:41 Joe any other any other questions yeah tell us tell us again how you uh how you Target and uh an item in
41:51 from feeds to a specific uh Bento Box in Bento scroll or
42:07 um so in um in all these demos that that we've seen so far uh today um all the
42:15 content um in them is is automatically being generated by I use particle generator but you could do the same
42:21 thing with feeds okay um so um inside uh here let's show you
42:28 an example with feeds since you since that's what you asked uh I know I have a feeds in here somewhere here it is okay so this
42:37 particular demo uses feeds okay and it's actually using Bento instead of Bento scroll okay and you can use it in both
42:45 okay um so basically what you do is actually in the new version you can actually add feeds directly from Bento now okay I made that a little bit easier
42:54 so you can add feeds total Loop and particle generator um all from there those are separate Stacks that don't come with Bento okay
43:02 um but if you have them they will show up here okay um so you can just click on feeds and it'll it'll add your feeds in here okay I already have an instance in
43:11 here um and this instance is just a CSV data that has just some names okay and
43:18 then in your feeds content area you have to add a Bento content stack
43:28 okay because what feeds is going to do is it's going to basically it's going to generate however many number of feed items it's going to generate these Bento
43:37 content Stacks automatically okay so if I have here I have one two three four five six names
43:45 in the CSV data it's going to generate six Bento content uh areas right and then all each of those
43:54 is just going to contain the name does that make sense how how do I put David day's name in box
44:02 one okay so um so inside uh the rule um in so there's
44:12 different ways you can do it with Bento and Bento scroll right now I'm in Bento which is the static explicit grid okay
44:19 and here you can just Target the item you can just Target number one number two number three number four number five number six you that's the only way to do
44:27 it so the order in this data okay is Joe Scott David Josh Chris and Tav so item
44:36 number one is always going to Target the first item in this case Joe number two is gonna Target Scott number three is
44:44 gonna Target DAV number four is gonna Target Josh Chris Tav so on and so forth okay so um but that's the Bento
44:53 one we'll we'll look at Bento scroll we have a little a little bit more flexibility but with this grid uh with the normal Bento stack you can only
45:01 Target by the item number okay so if you want them into in
45:08 an explicit order make sure that you sort them or do whatever you need to do either in your in in your CSV or your
45:15 data or via the feed stack because feeds can do sorts as well so if you want it to be alphabetical you can go ahead and
45:23 you know you know sort um you know uh by natural sort and sort by name at that
45:31 point feeds will sort the data first then it will generate the
45:37 content does that make sense so I could put a sort column in my uh in my feed stack then yes you could you could you
45:45 could sort in feeds and then that will that will Define the actual you know so you can guarantee that the order of your
45:53 data that shows up in your layout yeah yeah same thing in feeds you could also do filters right so if you want to filter out some data you can do that
46:04 too lots to play with yep okay now in Bento
46:11 scroll um we have we have a lot more options with our rules okay
46:18 um do I have a Bento scroll that uses feeds let me see thought I did
46:30 nope darn I don't okay
46:36 um inside here um well first off let's go over the the how rules differ here so
46:44 in Bento scroll it's impos since Bento scroll can have an infinite number of items right
46:52 um we can't really create rules for each IND individual item it wouldn't it wouldn't wouldn't be possible right so
47:09 you can Target an exact item but that's kind of a maybe a one-off thing right so if you want to Target the fifth one or the sixth one right
47:17 um uh and then you can do nth item I think this is probably the going to be the most frequently used so you can Target every third one every fifth one
47:25 every 10th one um you can create rules based on that now there's a couple other things here we can Target class and CSS
47:33 selector okay class is a new one I shipped that that's in the update from last night okay here you can Target a
47:39 class and so let's say in that example you wanted to Target Dava day okay remember before in that CSV you wanted
47:46 to Target Dava day okay um so what if I just put David in here as a class okay
47:54 then let's just look at this CSV data so the name here in my data is Dava
48:01 day okay because it it outputs it what if I were just to put the name as a
48:08 class okay so if if you inject the name from my data as a class um then inside
48:15 Bento scroll I can then Target everything with that class and do something with
48:23 it does that make sense I swear I had an example of this um what what does this example do oh
48:32 this one does something similar okay um so in this example I'm using particle generator here instead of feeds okay but
48:40 basically I'm injecting a color and a name inside of a class I could then Target those so here
48:49 let's look at this I don't even remember what this preview was oh it's this one okay so if you see here um I I have a a uh what was it size and
48:58 color name and color okay so if we if we look at these so let's look at this Chris one
49:06 for example okay we see here that this grid here let me make that a little bit
49:13 bigger we'll see that this grid item okay um has a a class of blue and a class of
49:21 Chris okay and this one has orange Josh red Chris orange Joe there are no orange Chris's because those combinations never
49:29 work out in in real life inside joke for those that that'd be even
49:37 uglier yeah um so um because I I now have my
49:44 name um and data as a part of this I can then Target those with uh with Bento
49:51 okay so um let's go ahead and let's say I I want to Target everything with Chris okay now case does matter Chris is
50:08 like four columns wide okay no I want to make all Chris's full width let's do that so anything with a Chris class is
50:16 going to go full width okay preview that and uh there we go oh here's Chris
50:25 he's full wi here's Chris he's full wi Chris is full width so you see everything that has Chris is always going to be full
50:34 width right so that allows us to Target our data um using a
50:41 class does that help and make sense so we can build out rules based on
50:50 our data as well which is pretty cool
51:15 wait um I did add um for those of you I I did a really cool update to particle generator this week um because I was I
51:24 was using it I found it really nice to to to demo layouts um for bento um and I was playing with it I found some new
51:32 features I wanted to add let me let me show let me show that off he quick side note yeah and the when
51:40 you go uh in stacks and you look for updates when Bento comes up the logo
51:48 beside it is uh Foundation 6 or Foundation or yep yeah I I uh I I need
51:55 to uh put the official logo in there that's that's a good point thanks I did notice that when I saw Bill uh when Bill looked for updates I saw that and was
52:02 like oops I need to fix
52:04 [Laughter]
52:07 that um cool uh so what was that oh yeah particle generator um so if we look at this demo
52:14 here um I just wanted uh if you notice every single cell here has um a letter
52:21 an increment so a b CDE E F G H right um and so in particle generator um what
52:30 particle generator does if you don't know okay I could just say I want to generate a certain number of an item
52:36 okay um here let's take it outside of um Bento really
52:44 quick okay just so we can kind of see so here I'm just going to create uh some data if you look in here uh I can give
52:51 particle generator data so in here I have two data points I have size and color Okay um and size has small medium
53:07 I actually have some class some swatches here okay now I'm using this to kind of add classes to things but it could
53:14 contain actual you know text Data okay um so here I have small medium and
53:21 large um so when something has a a small class it it's this height when it has a medium class it's a different height when it has a large class it's a
53:29 different height and then I have some different wallpaper swatches um that have different names so basically all of
53:35 the all of these classes I in I inject uh I get options via particle
53:43 generator and then inside there I take the uh color and size and particle generator it will do is it'll say okay
53:50 out of this sample set it's going to randomly pick a color for each one it's going to randomly pick a size for each one and basically I just tell it to
53:58 inject size and color inside of this class now I could just go ahead and here let's do um let's change this I'm going
54:07 to do size right now okay if I preview this you'll see that here it just created it added the size into each one
54:16 so we have medium small medium small large um so it's just generating these and you can generate as many things as
54:23 you want so right now it's nine I can generate 90 of them if I want okay and it's generated 90 of
54:33 them and it randomly picked a color and a and a size value out of from my data and assigned it to this
54:41 thing so I I can me put in um uh color right so now we have size and
54:49 color in our content and there we go now obviously I'm being a little sneaky here and that I'm I'm taking this
54:58 size and color data and I'm in and I'm adding it into the class field and when you obviously when you add it into the class field it will look at your
55:06 swatches right so I did take things to the next level here now um what I wanted to do was um I
55:15 didn't want all of these I didn't want to put in small I just want to have one two 3 four 5 six
55:21 seven or a B CDE e FG right so what did is I created um a couple new macros that you can use that you don't need to
55:30 supply data for it's called index and index ABC okay so um let's go ahead and use
55:37 that so if I do index inside particle generator uh what that will do is it'll just put in the number so this is the
55:45 first one second one it'll just keep going it'll just increment the number for the next
55:52 one okay and then lastly if we do index
55:59 ABC um that will create a letter index so it starts from a and what's kind of cool is this actually um once it hites Z
56:07 once it hits Z it'll go to AA so then it's still kind of a unique value um and if it keeps going down after it reaches
56:14 ZZ it then does Triple A and so on and so forth right then we go to quadruple a quadruple B quadruple C so it's pretty
56:22 cool I was pretty happy with that um I thought that was a pretty clever piece of code um but anyway um that was the
56:29 update to particle generator um again allowed you to add this index and index ABC
56:37 code so there we go what how is this how how are those useful in like real life like on a on a
56:45 web page I don't know I'll be honest with you like I think particle generator is
56:53 great for testing okay I I think it is for like quickly generating like I want to see what this looks like with 500
57:06 just creating like sample data sets um you know I did add on the demo of slot machine um I
57:15 have maybe one of the few use cases for like maybe doing this on um on a on a web
57:22 page okay um slots sh man I cannot type today there
57:31 we go um so on this page I just I created a
57:39 bunch of squares okay and then like um these these are all generated particle generat when you click on this it
57:45 animates them with drift okay um I just think even that's kind of interesting like if you just wanted to
57:54 kind of randomly create a certain number of things on the page and you know actually what kind of Be Cool is I'm just thinking out loud like having it
58:02 start out like this and then as you scroll down the page they kind of have a like if each one kind of moved a little bit as you scrolled that would kind of
58:11 be an interesting effect right so particle generator can do stuff like that where well it'll generate the items then it's up to you to use drift or
58:18 something else to animate them but um I think that is an interesting use case um with with dri is just to generate a ton
58:26 of something um they don't need to be displayed on the web page they could just be as you see like on page load I could just have those automatically do
58:33 this on page load and then you know as I scroll they can like drift or something like that cool effect to show something
58:41 underneath yeah exactly yeah I mean obviously probably the Z index of this would be underneath and maybe or have an opacity right so that you know you're it
58:48 doesn't cover your content but it could be an interesting effect on the page right and I mean as you scroll down it would it would Reveal Your content by
58:57 exploding the yeah yeah yeah so and imagine if they weren't squares they could be I
59:05 don't know little snowflakes or something I don't know you know actually that's another another cool one you know like I don't know maybe do it with Let
59:11 It Snow or something I don't know I'm totally throwing ideas off top of my head here but
59:23 whatever cool any other ideas or stuff we want to play with
59:30 questions can you show us an example of how you created the squares on the stacks product page with Bento sure uh
59:40 well that square of the squares on oh that was uh that was the slot machine product page um so this product is
59:48 called slot machine um and it it contains the particle generator stack okay um so yeah if you're curious on um
59:58 I think this is in the slot machine demo file but you you have uh images and texts that move when you go to the
01:00:07 stacks product page I thought that was done with Bento and other Stacks about the main Stacks product page yes oh
01:00:15 you're talking about this page yes okay um yeah so this page um
01:00:23 is at one point this page mimicked that one but I've really messed it
01:00:30 up um
01:00:38 so what Bento will do where's my web page okay what Bento what Bento will do is it will it will help you create this
01:00:47 layout okay here let's go ahead I I'll I'll create this lay I'll recreate this exact layout with Bento right now okay
01:00:54 however what I will say is like the hover effects and stuff like that Bento will not do that okay um those you can
01:01:01 do with swatches or whatnot but Bento what it will do is it will create this layout for you okay but how do you
01:01:08 superimpose the text and the images within the Bento area um so it's just a part of your your
01:01:16 content right so um so here like for example in
01:01:25 this okay so in this Bento Grid in this example here let's go to a larger example okay I have my image and my
01:01:34 content right so you can add in your content right and then it's inside of my Bento grid right so you just you would
01:01:43 just add in content um so here let's go ahead and I'll build that really quick okay
01:01:53 um we want to start from
01:02:17 right okay and uh actually here just to help myself I'm just going to look at that exact grid we're build that same
01:02:25 exact grid just to save me a little bit of time this
01:02:36 page where is here's the grid
01:02:44 oh okay I am doing grid setups Auto grid just give me
01:02:52 a second while I set up this grid here so we have autog grid separate window uh
01:03:08 225 okay
01:03:17 yeah then column size fit fill line content top gutter 15 pixels
01:03:28 oh and I had fill or fit okay all
01:03:37 right um so what I'm going to do here is um I am just going to generate a bunch of dummy data for right now um and then
01:03:46 we'll I'll show you how you can insert your own data as well
01:04:03 oh and I need those swatches over here
01:04:21 oops okay um and this is going to generate let's generate 100 items
01:04:30 okay and then let's look at my rules that I have set up here all right I have uh first
01:04:39 child is 11 two2 one22
01:04:51 okay so we have there there one one two two one one two two
01:05:01 first item right then I have every ninth item is going to grow to 3 by one okay
01:05:11 let's do that F let's change the color okay
01:05:20 something different so every nth every ninth item is going to grow
01:05:29 to three by ones okay and then I remember the next
01:05:37 one was every eighth item okay every eighth item was 2 by
01:05:53 two all right so everything else that's gray that's in
01:06:08 change and it didn't what did I do here did I break
01:06:18 something it's been a while since I've used this Auto grid interesting that might be a bug let
01:06:26 me go ahead and use this columns grid uh hold on give me a second to to redesign this in the columns grade instead of the
01:06:33 autoit I shouldn't have done that okay so here we just have one two
01:06:44 three four right that's a four oh let's do we'll do five on
01:06:51 large five on large four on medium three and two let's just do that
01:07:01 and gutters were 15 pixels
01:07:13 okay right see how that looks ah there we go okay so this this is just show you
01:07:21 how how you could create this this is the same exact grid that we have on Weaver space okay
01:07:30 um well it's not Weaver space does use this Auto grid which there is obviously a bug in that um so I'll have to fix
01:07:38 that so thanks for making me do that um okay but your question was how
01:07:45 do I get the content in here okay now what we could do um is you can
01:07:55 manually add in content in here okay so I'm GNA add I'm just going to add in some data in the very first one okay um
01:08:03 so so you can manually add in this data so let's just go ahead and I can go ahead and uh add in a picture
01:08:13 stack right so I can add in a picture stack and then I can put in a little uh let's put in
01:08:21 h fun go into here get my Bento PNG
01:08:30 boom okay we can do uh let's scale the image to like
01:08:38 256 okay want to Center the image and then below that we can I don't know just put in a
01:08:52 header centered let's just preview that there
01:09:01 we go right so now I have Bento roxes in there right and it's you know all this other is just sample data but at this
01:09:10 point I mean it's just content that you add into Bento okay now obviously on my web page I had you know hover effects um
01:09:19 so that let's say the if you notice when I hover over this moves up the the image um Zooms in as well as
01:09:28 kind of blurs and all that's done can be done with swatches right okay so um yeah I mean I you know
01:09:36 I'm not going to take the time to to you know mimic this exact thing maybe eventually I I can oh but then everyone will have that on our website and
01:09:44 they'll copy all my layouts but all right but I mean it is all just swatches right so like for example the
01:09:53 the the price button on this one can't be seen until you hover over right it's just has an opacity of Zero by default
01:10:01 and when I hover it has an opacity of one right so um it's just taking those I
01:10:08 know it this might seem daunting but it's all very simple stuff if you just take it one bite at a time okay let's T you know let's do this button right also
01:10:17 the buttons probably it has a position Swatch that makes it positioned at the very top right corner
01:10:25 right so it's just you know breaking down our design and you know implementing one little bit at a
01:10:32 time now um in terms of if you were to use let's say total
01:10:40 CMS you you can use total CMS in here as well so if you have a Blog um you could then you know use you know the total CMS
01:10:49 at this point you would do the total CMS macros I haven't done a demo of that yet I'm not going to try to attempt to do that now um live um I will have an
01:10:58 example of total Loop eventually that will then show you how you can integrate your blog layouts into a Bento layout
01:11:05 like this where your blog post image can be displayed you have the title summary maybe a read more button all kinds of
01:11:13 stuff like that right um but you're you're just building the layout directly into here now obviously this one um it
01:11:21 didn't have a background color right I mean you could easily you know Rectify that just by adding I don't know BG secondary or something like that on
01:11:29 there okay MH oh that's gray that's that's boring let's do and I spelled secondary wrong let's say I want to give
01:11:37 it this uh uh spring let's give it the spring background so I could just go ahead and say
01:11:45 spring there we go there go now it kind of fits okay um
01:11:55 so thank you very helpful excellent no problem thank you Dan Joe the atom acement is the square can can it be
01:12:03 something else a circle a triangle or uh yeah I mean yep so I mean like for
01:12:10 example I mean anything anything in HTML is always going to have um it's going to be a box by default
01:12:18 everything is a box right um but let's go ahead and let's uh let's use like uh the clip path Swatch and say
01:12:28 Circle right and so now whatever I add this this clip path to uh should make it
01:12:35 a circle right get gets cut off a little bit but
01:12:43 um yeah we could probably figure that out right so here let's do here let's do
01:12:50 the entire thing as circles it'll be interesting I don't some of it might not work like this H how's that going to work out because it's it's not a square
01:12:58 you know U but I don't know let's see what let's see what happens yeah it tries to make it a
01:13:07 circle you know it doesn't make it around the rectangle yes yeah yeah yeah
01:13:14 yeah but it's nice yeah interesting
01:13:22 yeah thank you no
01:13:35 problem I didn't plan on this hangout being the Bento show by the way it just sorry sorry about that my favorite
01:13:44 show just quickly Joe um I saw the one um um Q the Q code one
01:13:53 you oh yeah the QR code yeah oh that's a good thing to talk about that was really good I was wondering though would it be
01:14:01 possible because um to make it like sort of could you have a download button for that Q
01:14:09 code yeah uh if you were saying to S someone they could create their own Q code for this that and whatever yeah
01:14:17 yeah yeah yeah um you know that's actually it is on my list so the the problem is here let let me explain that
01:14:24 the problem the other thing A lot of people do online is you can put an image in the middle as well yes um so my stack
01:14:32 doesn't do that yeah um yeah um that would be cool I admit but yeah my my my
01:14:40 QR code generator isn't that intelligent um yet maybe eventually um but what he's talking about for those that you don't
01:14:47 know uh what was it Dynamic there it is okay so I created this I created this little web page yesterday I shipped an
01:14:56 update to my QR coder stack and um if you just put in a URL in here and
01:15:03 you click submit it actually it'll dynamically generate a QR code and that is a QR code to the URL that I put there
01:15:11 right and um and obviously it works right you can use your phone and scan it and it'll it'll do that but U what he
01:15:19 wants is he wants to be able to download that and I agree that would be cool my thinking um
01:15:27 so what this does I'll I'll tell you what my QR code stack does okay actually we inspect it well you'll see what it
01:15:34 does it actually generates an SVG file okay so it this let's my screen
01:15:42 is right so it actually creates an SVG which is interesting because it's a it makes it very detailed and very crisp it
01:15:50 doesn't create like a JPEG right um and I when I coded this I was like that's really awesome but then like
01:15:58 downloading that is a a different can of worms um that I never thought about um
01:16:05 when I initially developed it so it is a feature that I would like to add to my list um but yeah as of right as of right
01:16:13 now it it it doesn't it doesn't work um so either they'd have to take a screenshot of it which then they have an
01:16:20 image that's what I generally do yeah another thing that you could do I was actually gonna tie it into this demo was was to do like a print
01:16:29 button yeah that then prints this that prints this here let's do that really quick here it could be interesting um or
01:16:36 we don't need this project open think of that uh I don't need
01:16:44 that Joe but is that image uh stored somewhere it is not it's not stored
01:16:52 anywhere okay it's just created on the spot it's generated on the fly as an SVG yep yeah
01:16:59 yeah um which is yeah which in hdand sight I was you know and then I can't really because I generate an SVG I can't
01:17:08 send it I can't download an SVG for you because a lot of devices you want it as a JPEG basically right
01:17:15 um so yeah then that opens up a whole can of work then I have to like have logic where you know I created it as a JPEG instead if you download it and yeah
01:17:24 I just it's on my list but timate it's not very high on my list at the moments yeah exactly exactly um but I
01:17:32 think this print option could be pretty interesting so here's the page be useful um so if I
01:17:41 print where is my print let's just add a print button right uh to the page I'll add print
01:17:50 Styles at the top is that your printer stack yeah this my printer stack yeah right um and then if
01:17:57 we wanted we could even do like um print show oh wait
01:18:05 um here let's do like uh let's do print hide wait that's fine I you know my
01:18:14 printer stack allows you like to show and hide things from the page like here let's for say for example I don't want this when I print it I don't want this little text right so let's hide that
01:18:22 when I print okay um and oh I need a button so let's just Chuck a button oh
01:18:32 and I want to hide my button too
01:18:35 [Music]
01:18:41 um although I think my print button stack M might hide it by default but it's okay I think it does I don't
01:18:50 remember here let's test that really quick let's I'll remove that let's just put that and I got to make it at least look semi pretty uh
01:19:09 gonna work but I think on like because on mobile I think this is where it's mostly
01:19:17 going to be for mobile right um okay so now um I've refreshed that and
01:19:26 if I click print QR code there we go interesting and it
01:19:35 doesn't have my button right and then you could do do like save as PDF you know and there you go um but what's
01:19:43 interesting I want to see I'm G to test this on my phone if anyone here I'll put this in the chat if anyone wants to test this right now I'll put this you got you
01:19:50 gotta exclude the text the top Jo oh did I not do that I thought I I
01:19:58 thought that thought I saw I thought I saw in the print preview that there was some text in there what's that text enjoy no it says
01:20:08 enjoy your code I kept the enjoy your code there oh oh and then this this here the links oh I could turn that off that's the I think that's in Styles
01:20:16 append URLs to Links you could turn that off T which is cool for for text links but
01:20:24 for something like that probably not it's probably not the best so I can agree with that oh thanks that's only 510
01:20:30 [Laughter]
01:20:32 files for that little change thank you rapid Weaver exactly it's a heavy
01:20:40 code this would be good there's the URL if anyone wants to
01:20:47 play it whenever it finishes publishing here let's let's test it right now let's go to sandbox start that
01:20:56 let me just cancel I've never thought of a reason to get that print one but this would be now the print
01:21:06 stack all right let's
01:21:21 see all right so I got the QR code let's say
01:21:29 print QR code what does it do can I save it to
01:21:42 photos I got the print dialogue does anybody know does anyone
01:21:50 print from IOS very often usually requires a special app not very
01:22:09 files um save it to iCloud Drive oh let's check it
01:22:19 out boom show
01:22:26 some yeah it it's there I promise promise yeah it's in my iCloud drive now
01:22:33 cool and it's yeah the document with exactly what we printed it has the enjoy your QR code with the QR code and it still has the link down there but I
01:22:41 think that's because rap weer didn't finish publishing that's interesting I'm about to get the print one print stack
01:22:51 now yeah yeah so again I I do think I I agree oh there we
01:22:56 [Laughter]
01:22:59 go actually so another thing I talking about QR codes is I I'll I'll put in a plug for actually a Mac app which is
01:23:06 really nice now I think QR code my my stack is interesting it's cool and having QR codes on your site is a cool
01:23:14 thing and I think this new Dynamic generation thing awesome too but sometimes you just want to create a QR code and download and have the image
01:23:23 maybe you want to have it on something right and um I think this app QR QR Factory is pretty
01:23:32 awesome um and funny enough okay um I didn't know this until after I already
01:23:39 bought the app but so this is the developer it's a foundation website made
01:23:46 with Stacks pretty cool huh so so yeah QR
01:23:53 Factory from tuna belly software um it's a Stacks website made with foundation so pretty cool look at that my name's right
01:24:01 on there actually he's Foundation one but he actually did last month I I I looked him up and I was like oh wow what does this guy use so he recently got
01:24:10 Foundation 6 so I assume he's going to redo his website in Foundation 6 so there we go if you're watching sweet thanks I
01:24:19 think it's uh Matt Austin I think his name I forget off top of my head but yeah I I do think QR Factory is pretty
01:24:27 interesting um and uh it's a nice app and so it has calendar events crypto email location uh person uh SMS I don't
01:24:37 know what sepa is who what's sepa does everybody know I see I I see Bank stuff here so it
01:24:45 must be some sort of Bank thing it's a model for bank transfer sepa ah okay
01:24:53 um just have a Cod people can send you money oh and see and and this app will actually do the images inside the QR
01:25:13 yes that's good I have to say the the reason I I originally bought this app is because I
01:25:22 was trying to do research on how to uh do the Wi-Fi QR code and I could not find any
01:25:29 documentation on it at all and I knew this app could do it um so I kind of reverse engineered uh you know how how
01:25:38 it was generating the QR code with the with the Wi-Fi Sid and the password so um and then I I emailed the guy and
01:25:46 realize that he's a Stacks user too so pretty awesome stuff that's cool yeah
01:25:56 that's good right how much is the print one then a
01:26:03 look Joe I put the uh the first ver first round of uh Beno designer in the other
01:26:11 chat oh
01:26:20 yeah nice it's just using the uh what's it called
01:26:28 um oh my God what's it called the thing around the boxes what's I
01:26:35 call no well yes stroke good Lord oh stroke like I had one
01:26:44 uh a thick Str a thicker stroke to make it look like this has padding or margin there you
01:26:51 go oh man it opened up ginormous
01:26:59 heck there he goes Josh will be busy on he on my P doing all this
01:27:07 one so yeah you can just like take the take the block or the bricks and just move them in there and or you know copy them in cool
01:27:16 okay maybe maybe we'll play with this and refine it a little bit yeah I mean it's quick and dirty so cool I like it
01:27:26 so as I was saying earlier you know I was saying you know kind of pre-design your grids a little bit so yeah cool I like
01:27:33 it oh I should add numbers to it too okay I'll add a maybe make a little sidebar with numbers just you like drag
01:27:42 them over cool I like it that could be fun all right cool I got a robotics
01:27:50 class to teach you guys have a good one oo fun take care bud all right guys thanks for everything this was a very
01:27:57 insightful like those new controls are nice all right see you guys at the Frid
01:28:05 hangout cheers take care bud see you Chris I gotta get back to work thanks you see you there
01:28:18 scottt I haven't had much chance this week to play with B been playing with a lot of other things trying to I got that
01:28:26 um M oh you got M okay I got that so um I
01:28:32 was just been doing everything change Al I'm changing from chili dog to Blue to
01:28:39 dream host so I'm setting up me my qsl databases but I'm sort of getting
01:28:46 everything organized so I'm trans doing everything I'm publishing now to the sonology
01:28:52 ready for playing with bamp oh
01:28:56 [Laughter]
01:28:59 okay s but's a good workflow especially if you're using like total CS heav site I think I think it's really cool for
01:29:07 testing locally um it could it could save a lot of especially with publishing like you have to publish a ton of files and sometimes it just takes a long time to publish to your hosting company you
01:29:15 know but publishing locally should be quick you know super quick yeah mean using M or using the Synology if you
01:29:24 have a Synology dis server so oh yeah I can publish I've got a web server on theology as well
01:29:32 yeah I mean that I mean obviously that would be a lot quicker than online but um yeah I mean I think M works I I'm
01:29:40 pretty happy with it but yeah Synology works too if you're on the only thing if if you have M you can it'll work anywhere right if you're on your laptop it could work anywhere but um on
01:29:49 theology obviously that would work only on your local network I've only use it using the sonology for publishing because I back up everything
01:29:57 to the sonology so I was going to use that for mamp as well yes okay yeah so it's just everything in one place rather
01:30:04 than multiple places yep cool I've actually published
01:30:11 sites and temporarily onto the sonology and used them so does
01:30:19 work yep I know what was trying to do today um because year well a couple of years ago before I bought well I've only
01:30:27 had the MacBook Pro M1 for a year now but um when I had my Mac Air I had the cloud and I had
01:30:35 everything synced up so whatever I changed over there it would change me projects synced up but since
01:30:43 the Nomo today I just haven't managed to get them synced up you know something that's been bothering my desktop into
01:30:52 F yeah you reminding me about somoma so one thing I know so when I upgraded I just got recently got this Mac Studio
01:30:59 right um two months ago or a month ago or whatever it was um I never been I never used Ventura before you know a
01:31:08 month ago or so like right before Sonoma was released right and I've been wondering like on my new Mac um you know
01:31:15 I use a lot of I get a lot of stock Adobe art um from Adobe stock so like AI files but I don't I don't own Adobe
01:31:24 Illustrator um I use Adobe I mean Affinity designer right which I think I think a lot of you do as
01:31:31 well but it was driving me nuts that like all my new newly downloaded Adobe Illustrator files from Adobe stock I
01:31:39 couldn't quicklook them like and there's no preview icon right I mean it just shows it shows the
01:31:46 Affinity designer logo but it doesn't show actual preview of it because before you can quick look it and you would see the
01:31:54 contents and anything that I've downloaded on this new Mac hasn't hasn't worked and after research I I found out
01:32:02 that in Ventura Apple removed the ability for preview app to open up EPS files um
01:32:12 encapsulated postcript files right and uh that essentially uh AI Adobe Illustrator files are just fancy EPS
01:32:20 files right and because Apple removed the ability for the preview app to um read those
01:32:29 files they you can no longer quicklook them well correction you can no longer quicklook old one or new ones funny
01:32:36 enough if I um open up a file or I download on my other Mac that's still running um Catalina right which is the
01:32:46 one before Ventura if I quick look at there it'll generate the little quick look preview and then I get the quick
01:32:54 look on my somoma on my new Mac so it's it's interesting it'll work for old old ones but not newly generated ones on my
01:33:03 Mac so um yeah kind of sucks it's driving me crazy I I emailed Affinity
01:33:10 you know begging them please just add quickl support because I I it opens up AI files just fine why can't it generate
01:33:16 a quick look for me um but I doubt they will so I'm on the hunt for either an app
01:33:26 that will give me quick look support for AI files or something I don't know but it would be
01:33:32 nice I have to download an app just to change all of me momes to M MP3s to play
01:33:40 on the Hi-Fi system downstairs yeah so for example like here right here um I mean this is an AF if I quick look it I
01:33:49 just get I mean it shows the affinity logo there but but funny enough if I scroll down if we look at let's say this
01:33:56 one this was this was one that I predates me having this Mac and quick look
01:34:03 works on it so very interesting so yeah I'm working on a new
01:34:11 a new logo for my I'm my son's a part of The Roc um Air Force RC at school and I'm
01:34:18 designing a new logo for them um so that's why I had all those airplanes but the other one I want to
01:34:26 get this week was I think that hazer in it that's the automation one which um which one Hazel is it Hazel
01:34:34 oh Hazel yeah yeah you automate so you can automate things yep yeah yeah it's a great one it's a really use super useful
01:34:42 app yeah because I got M on here and on the laptop now working both with the same license which is good excellent
01:34:51 hopefully I can do the same with that as well yes uh yeah I believe Hazel I have it running on both my Macs too so you
01:34:59 should be good yeah good I think long ago it was made for cleaning up to automate the clean up or files or
01:35:06 something like that in the past Hazel yeah Hazel um I mean it still is I mean basically it watches folders and then you can you know either you know that
01:35:15 you know whenever a new file is added to a particular folder it can do stuff with it right yes yeah you use for synchronizing uh between two different
01:35:24 machines or no I don't use it for synchronization um I do use it to clean up um my downloads folder primarily like
01:35:31 I have a bunch of rules that you know for you know if a file is ex ex like because I download a gazillion rap weav
01:35:38 projects for support right so like my downloads folder before I mean without Hazel it would have like hundreds of rap weav projects so basically I just say
01:35:47 there's a rap project that's been in my downloads folder for like more than three weeks delete it you know um and uh
01:35:55 so yeah stuff like that and changing the classic to whatever you done I think you said yes yeah so if anyone sends me
01:36:03 because I use rap weever 8.93 um if anyone sends me a rever classic file um you know that has the
01:36:11 extension RWC um basically I just have Hazel rename it to rw8 um and then it opens just F rap
01:36:20 8 and also like Adobe stock images um If Ever I download if it finds an adobe
01:36:27 stock image in my downloads it copies it into Devon think which I which is what I just showed you um and then I use that as like
01:36:35 my my stock Library basically so it automatically adds it into a folder that has all the stock images that I've
01:36:42 downloaded just so because for a while I when before I created that rule like I'd create a i' download a stock image and
01:36:49 then i' I don't know maybe i' delete it by accident or something or I move it to somewhere and I'm like where's this I know I got this stock image but where is it so this rule just kind of archives it
01:36:58 to a general location for me yeah well I was hoping to get this Cloud thing working today so it would
01:37:06 just everything will be just the same over there as it is here it working before y doing me eding so I might have
01:37:14 to think of an another because I'm getting fed up just dragging it across and waiting for it to sink up
01:37:23 yep sweet well guys uh I just realized we've been here for almost two hours now crazy time flies when we having fun well
01:37:31 I forgot the times our clocks change I forgot yours didn't so I was a bit late oh oh you oh oh time changed over there
01:37:38 already haha yeah we change on Saturday oh that's right so Friday will'll be early then that's
01:37:46 good oh good good thanks for maybe I'll maybe I'll make a note when the when the hangout post goes on Friday I'll make sure everybody remembers that yeah yeah
01:37:55 okay yes that's nice because I've been connected one hour later as well so oh okay
01:38:01 [Laughter]
01:38:03 yeah that's probably why everyone is connecting because if someone tries to join a zoom meeting before I actually start it like I get emails yeah and like
01:38:13 there was like a dozen people from Europe tried to connect an hour early and that's exact why
01:38:22 [Laughter]
01:38:26 interesting so the US is out of sync with Europe again yep yeah for the for a week be good because when you had the
01:38:35 summit it was always perfect timing yeah this year I think although a couple
01:38:43 years I did it I did the summ the same weekend that that you guys time changed and that that was man that was horrible
01:38:50 yeah hey before we leave any other questions that I can help you guys out
01:38:58 with no right moment sweet cool guys well hopefully I'll see some of you guys on Friday else uh thank you everyone
01:39:07 else for joining all right see you later take care guys bye everybody that good