0:02
everybody here how's it going everybody
0:08
excellent doing something completely different today we here oh we got oh we got 20
0:14
okay cool I don't see anyone in the chat everyone just let me know in the chat audio and visuals are
0:24
good first time I've used my uh my setup since or I used wirecast since the
0:31
summit so I just want to make sure everything's
0:36
good oh there we go Mr Cole excellent now the chat's coming through okay slight delay sorry about that okay
0:45
um so today um I'm I'm I'm not going to be in in Stacks maybe at all uh to be
0:53
honest with you um so I know all I I'm willing to bet most
1:00
of you have probably attended the summit so you probably saw um excuse me um a
1:08
lot of what total cms3 is coming
1:14
um and uh man let me drink some water
1:21
here so I've been working uh pretty hard uh this week on total CS 3 last week was
1:27
kind of a catch-up week didn't make too much progress tons of progress before the summit
1:32
though um and so I am trying to get uh a beta out to um pre-sale users
1:40
by the end of this month okay and um pre-sale users are those that joined in
1:46
at the summit and got access to that um I might have a uh another pre-sale after
1:53
that um you know when when I get maybe closer to launch have some more things maybe open it up a little bit wider to
1:59
the public but um yeah if you're at the summit you got access to the pre-sale and um those
2:07
of you that are in there will be able to help me um shape the future of total CS
2:12
3 okay um okay with that said I decided today that uh actually you can
2:20
all thank Chris Powers for this I was like do I do I do a live stream today I I really got to make some progress on
2:25
total CS 3 so I can get it out this month and Chris was like dude I want to watch you do it and I was like what like
2:33
I I'll be honest I haven't I haven't done like the live stream like coding things I don't think I've ever done it I
2:39
don't know have I um most because I mean it's just a lot of me just I
2:46
mean I'm fumbling through the stuff as well it's like you know it's like oh what do I do this and then then and then
2:52
stuff messes up and and it could take me hours to get anything useful or it could
2:57
just be minutes and it's like boom I nailed it um it just depends on how the dice rolls that day um so we'll see how
3:05
this goes um and if you guys like it let me know maybe we can do more of this um
3:12
but yeah again I'm not going to be doing much in Stacks so if you're here to like learn what total cms3 is you might get a
3:19
glimpse of it here or there but this is me just building out HTML and CSS and um
3:28
seeing a bunch of that stuff so um I'll I'll try to talk through it as much as I can to kind of let you guys know maybe
3:34
what I'm doing and why I'm doing it but um we're just trying to build some stuff here okay get it out the door without
3:42
further Ado if you have any questions um go ahead and shoot them into the into
3:48
the chat I'll H I'll be happy to uh answer what I can um and yeah enjoy um
3:56
okay so let's uh let's go ahead and uh share my screen
4:01
um so here let's let's revisit uh what the current image
4:07
uploader is right uh so here's a current image uploader um for total CMS and we
4:13
can go ahead and you know take an image and upload it and voila right we got a
4:18
cool image upload uh when you hover over it um well a what you did see is uh this
4:25
is all running local so that upload was like insanely fast right but uh there was you know obviously a progress bar
4:31
that came up here I'm sure you guys have you know all experienced that and whether or not it succeeds or fails
4:37
you'll get a little you know green check mark or a red X there um ultimately I I
4:43
really like the look and feel the design like everything about the existing total
4:50
CMS image uploader I like okay um so all in all
4:55
I'm going to pretty much keep it the same but there are some things I need to
5:01
add or change and hey if if you would like to see some of these things change
5:08
um right now let me know in chat okay and um so yeah uh when you hover over this
5:16
you'll notice that there is what I'm what I call the action bar right um at the top and it allows you to do various
5:23
things all right you can um you can go ahead and click on this this allows you to upload or modify the alt tag for an
5:32
image so that's one thing um this is going to get a major overhaul because um
5:37
in total CS 3 we have access to a buttload and that's a very technical
5:43
term a buttload of more data uh for every single image okay uh we don't have access to just alt tag information or
5:51
description right but we all we all have access to all the exif data we have access to um modifying the focal point
5:59
point of an image all kinds of really cool stuff tags um you know is it
6:04
featured or not um eventually probably not in in earlier betas but maybe later
6:09
down the road I want to add ratings I think that would be really cool so you can rate an image um so yeah uh this This little
6:18
light box is going to have a major overhaul okay um then we have uh this uh
6:25
the copy paths and I like this as well but um this is again also very different
6:31
in total cms3 and because uh you've probably seen
6:37
uh total CS 3 has a complete like Dynamic image generation right um so I I
6:43
think having some sort of Link builder for an image would be useful um but
6:50
that's much more complex than what this is this is just a straight up here's the
6:56
URL to a particular image right it's it's not like a URL building tool um so
7:03
I'm I'm unsure how I do think clicking on this and having some sort of uh you
7:08
know URL building tool for an image would be useful um but man that that's quite complex so
7:16
I don't know we we'll see I I do like this idea I don't want to necessarily get rid of it but it again total seus 3
7:22
is a complete different Beast so this is going to have to change um now if this were a gallery
7:29
image there was there would also be a featured image thing where you can just click the star and it will set it to be featured um I'm probably going to add
7:35
that to image as well just so if you wanted to add the featured flag on an image you can um just really quick it
7:41
doesn't hurt having it there um so I'll probably add that um as well um it's
7:46
there again for gallery images um I just hide it um it's the same exact HTML I
7:51
just hide it on an image versus a gallery uh and then obviously over here you click and that's the delete button
7:58
okay so um yeah pretty simple elegant interface and like I said we're going to
8:04
be keeping a majority of this interface I mean every the style I like the Border
8:10
um I like uh this action bar now there's some things I also need like these use Font awesome icons we're going to use
8:17
we're going to SVG ify it I already started some of that work last night um so you'll see some of that um in terms
8:23
of you know finding the svgs and all that jazz um but we're going to be primarily at at the beginning just focus
8:29
seen on this uh action bar um and then the next thing I want to
8:35
work on is this uh little light box form for editing the data uh if I can make
8:42
any sort of progress on this during the during this live stream I'm going to call that a win okay um I'm pretty
8:48
confident we can get this action bar done um that's not rocket science but then
8:54
hooking it up to a light box and then starting designing uh a form
9:00
um for this is going to be good now so uh yeah without further Ado let's
9:06
Jump On In um here is what I currently have okay this is this is total cms3 and
9:11
this is a total cms3 form page okay I got a bunch of more forms but we're only going to be focusing on this image
9:17
upload uh doohickey right here what other things do I have oh look I was uh searching up some stuff earlier
9:25
today uh let's quit that okay
9:30
and uh yeah we'll quit that too all
9:41
right excellent let's go ahead and uh yeah man I I reduced the screen
9:47
resolution and uh it's kind of made my screen a little Pixy but it's all good it helps you guys I guess
9:54
okay um okay so what we're doing is uh one of my doing
10:01
okay so here is the uh this is the actual page okay um and
10:11
uh for those Of You' been around or seen some of this this is some of the mustache that uh creates or the mustache
10:18
The Twig that creates uh this form page right so this doohickey right there that
10:24
creates the um the actual form
10:30
uh element the image upload element on the page okay and this is just a way of adding a bunch of other ones again I'm
10:36
not going to try I'm going to try my best not to like re-explain everything about total CMS 3 during this so um if
10:42
you don't understand all of it okay um you'll learn more as the feature goes on okay um so yeah this is it uh form.
10:50
image and we're going to bring in the image CMS ID okay and uh if we want to
10:56
look at that data right here uh we'll see that that's the image that's stored and this is all the image
11:04
data that we have access to and that we ultimately want to be able to edit okay
11:10
so we have the alt tag information we have exif information which is you know all the data from the actual image okay
11:17
aperture ISO shutter speed cameras All That Jazz okay focal length um so yeah
11:24
that's all of the information about the image uh whether or not it's featured uh told you we're we're going to store the
11:30
focal point which is default is going to be 50/50 which is right in the middle but we can customize and Define that
11:35
focal point uh which is going to be really cool um the width and height of the image that's not really data you're
11:41
going to edit that's just a matter of fact that's just readon this is the width and height of the image okay um
11:49
the link I let you store a URL like let's say you wanted the the use case for that is let's say you add this image
11:56
to a slider and you want that image to always link like to be related to a URL
12:02
right so um I thought it would be nice to just be able to give you the ability to add a URL okay um so you can store a
12:10
link with an image um MIM uh MIM type that's probably
12:15
going to be a read only thing that's not something you can change that's just the original um images MIM type okay not
12:21
even sure if that's useful to store I don't know whatever um here's the original file name that was
12:27
uploaded um here is the color palette which is quite interesting um so I
12:34
analyze an image and I store all the color information about that and um not
12:39
quite sure how we're going to leverage that data but I like storing that data so we can access that somehow okay um
12:47
the size the image again that's a read only thing it's not something you're going to be able to edit um tags upload
12:53
date and another readon attribute but it's it's nice to have there so we know um what date this image was uploaded
13:00
which is which is cool right um let's go ahead and uh start
13:08
working on that so that's a little bit of background on what the image is the data stored inside the CMS data
13:15
folder okay uh that's how the form's added to the page I don't think we're going to be able to have to access that
13:21
anymore just close that all right
13:27
um so this is the actual going to be the um HTML that actually generates uh the
13:34
form so this this we're going to be able to tweak and edit this and this we're
13:41
going to be working on this quite a bit okay um this is all twig by the way okay
13:47
so uh twig mashed up with HTML so
13:52
uh I'm not going to dive into all the aspects and explain everything here or else it'll it would take me the entire
13:59
live stream okay so um yeah so right now we're going to be focusing on this
14:05
here's the action bar okay um if you notice there is the edit
14:10
button which is like editing the image info um on the original version that was like the edit uh the alt tag information
14:16
but we're going to edit everything that we saw there okay uh we have the ability
14:22
to oh get the links right so um there's going to be another button um for links
14:28
which uh will that like the URL building tool okay like the image paths thing
14:33
then there is going to be a featured button a star just turn on and off kind of a toggle there's going to be that
14:39
trash button right over the a delete button and then um this doesn't make
14:45
sense on the normal image but uh I kind of I reuse this HTML for both image and
14:51
gallery and so gallery has the ability to have that little drag tool okay um
14:56
I'm sure if you've used total CMS you know that you can kind of reorder the images in the gallery by dragging them
15:02
around um so yeah uh we're g to have that move thing which will be hidden for
15:07
images okay um but while I'm designing this I'm just going to add it in there because I know I'm going to need this
15:13
for a gallery and I'd like to be able to reuse this bit of code no matter if it's gallery or image it's just the same bit
15:19
of HTML okay I just hide and show things based on whether or not it's an image or a gallery
15:26
form um then uh so below that we we display the image okay um this is the
15:34
special sauce from Total CS 3 that brings in that image okay for us um and
15:40
and we just Define some width and height so it dynamically creates a preview for us um and then here's the progress
15:47
indicators and then here is the little success and um error messages uh which
15:53
these particular ones are actually um font awesom we're going have
15:59
to replace those when we get to that bit because we want to use svgs all right
16:06
so inside action bar so we have our uh an action bar and in there we have all
16:11
these classes have an edit Class A Links Class A featured Class Trash class and a
16:17
and a move class okay um so let's go
16:22
ahead and look at action bar um so this is my uh CSS for action
16:28
bar now I I this is the the code that was used actually from the previous version
16:34
so we're going to be tweaking and modifying this um I like to always start from something since I'm utilizing the
16:40
existing stuff I'm just want to make it better right so we're just going to use the existing thing and make all that
16:47
better uh for example um these are actually instead of links I'm now migrating those into buttons so we're
16:54
just going to change that to button okay [Music]
17:01
uh and this needs to be button and then move
17:12
okay now this is image field so I'm just going to change some
17:17
classes that I know that I modified image bar image I don't remember what that is so I guess we'll
17:25
we'll keep that like it is for now I don't remember what that CSS was all right
17:36
um a lot of screen flashing hold on I wonder if one
17:43
second you're getting a lot of screen
17:53
flashing here I'm curious if we do hold on
18:02
oh boy fun times
18:31
all right is that any better um yeah I was I yeah I flipped between
18:38
the big image of me I was just trying to debug I was removing the my little self video I was wondering if maybe um that
18:45
was causing the screen flickering um curious in the screen flickering um does it happen when it is
18:54
just when I screen share um I've had this feedback before so it would be nice to be able to nail that down um or does
19:01
it also happen it's worse now oh um it's worse now it is
19:11
worse okay now constant oh boy fun times
19:16
um
19:51
I'm going to try something else here right um
20:05
now it's constant okay I'm going to turn off I'm going to go back to my native screen
20:13
resolution let's see here if I make this where is it 2560
20:23
by the heck
20:34
let's quit
20:46
that oh there it is all right uh one second let me go now
20:55
I have to tweak this
21:10
oh I'm going to go back to my camera shot hold on please hold hold on while I
21:17
try to reconfigure this a little bit nothing like trying to troubleshoot
21:23
a live stream during a live stream that's always fun
21:31
Place layer screen
21:51
capture let's just create a new screen capture of
22:23
monitor okay let's go back now
22:30
all how's that
22:45
um okay
22:50
um okay you know what I'm going to I'm going to continue as as this is right
22:55
now hopefully this is going to fix things okay um um so yeah um it's better
23:01
cool okay excellent um I did have to this means everything is going to be a little smaller for you guys especially
23:08
when I view the browser I can make my uh my vs code uh slightly larger though um
23:14
although why is it vs code like so pixelated now one second let me let me quit vs code and start it back up again
23:21
that was crazy it was like insanely pixelated
23:36
that's very
23:48
strange oh there we
23:53
go now everything's sharp I don't know what that did we're going to going to quit this little app
23:59
maybe I need to stop using this little quick resolution switcher
24:05
okay um there there
24:14
okay oh there everything is looking at least it looks better for me hopefully it looks better for you all right
24:25
um okay um now I need to rebuild here so you can guys can like see watch me build
24:31
my stuff I just use this little terminal command terminal is a requirement when
24:37
you're a developer nowadays um let's see I like having my little code blocks all in line so we're
24:44
going to be a of renal here a of retentive and organize all my code here
24:50
cuz yeah that is a requirement oops but we don't want that hold on second
25:00
there we go save
25:06
that I like having all the little things lined up I am just all for that I like
25:13
clean beautiful looking code all right let's rebuild and uh let's refresh all
25:22
right uh well I didn't really do anything um I don't remember what I did now oh I changed this to be buttons all
25:28
right okay so um another thing that I did last night we T I talked about how I want to use my
25:34
own svgs okay um so uh just really quick I'll show you
25:40
the app that I'm using um I use an app called nucleo there are a tons of SG Services out there I think nucleo is
25:47
pretty cool though um and all these icons that I'm going to be using um in
25:52
total CS are from nucleo okay and of course it's taking its sweet time to
25:58
launch oh and it launched over on my other display okay there we go um so in
26:04
nucleo um I I just I tend to search just nucleo uh at least for this um and we
26:09
can search for I don't know um trash right and um I use 32 pixel icons so
26:17
there's there's all a bunch of trash icons that you can then utilize right you can do it in uh you know varying on
26:24
colors okay I think I picked this particular one
26:29
um to use for total CS 3 okay so this little trash icon now um if you're
26:34
curious uh I am going to be applying there's different ways of applying svgs
26:40
um what I did is here um I'm I did copy data Ur okay um and what that does is
26:47
that gives you a little bit of CSS um so I'm going to be applying these as a CSS
26:53
background instead of um an SVG tag on the page just a different way of doing things um
27:01
you lose a little bit of control doing it via CSS this way um you don't you can't like style the icons as well with
27:08
CSS but um yeah there's some benefits as well not having the SVG in the HTML um
27:15
so and I don't necessarily need to style these I just once they're the color I need them I don't need to tweak them
27:21
with CSS so I think we're going to be I think we should be good with this approach so all right um so so uh let's
27:28
do uh icon edit okay um okay so these are 32 pixels by the way and let's go
27:35
back to my action bar
27:41
and um I'm going to make them
27:47
um with uh let's make them 32 pixels for now we can tweak this oops what the heck
27:53
just happened there
28:02
that's a annoyance right 32 pixels and a we'll
28:08
make them a height of 32 pixels as well um we need to give it a raw height
28:14
um and uh we also want appearance none CU we don't want them to
28:23
look like a button okay
28:31
and and just for fun let's just I'm going to do um and do
28:38
edit um we're going to do a background image um and then we're going to do icon
28:47
edit okay we'll play with the edit icon first and this should do it I think
28:54
right okay let's rebuild
29:00
refresh here okay um so there we go um it did it
29:09
did work it's a little large I don't know we'll see um but there's something we need to do we need to make sure that we get this the border is none right so
29:17
um we need to go ahead and do uh border uh
29:26
none rebuild build refresh all right now if you notice
29:33
there's a background color but that's okay okay now
29:44
uh I do is let's I'm going to permanently make this for development
29:49
what I'm going to do is I'm going to make it so that this this I action bar is always displayed okay um just so that
29:56
it is all always there uh we're just going to do display block uh bang
30:03
important okay just so that it's always there um while we're testing
30:14
here and why didn't that work action
30:26
bar did I not re did I not rebuild maybe I didn't
30:34
rebuild what I'm going
30:40
crazy action bar display block bang important
30:47
WTF right there bang display block oh I think it's set to opacity oh and it's
30:53
not display Block it's opacity the uh we're going to do
31:01
opacity one
31:07
okay because it's always there it's just hidden or there we go okay so now it's
31:13
always there so now we're always you know one thing with this page is Bo bothering me you know I'm going to go
31:18
ahead and one second I'm going because if you notice when I refresh that page there's something I need to fix that for
31:24
some reason um all that is something's causing the page
31:32
to scroll when I refresh so we're just going to ax everything on the page except for boom except for the image
31:38
perfect excellent now I don't have to worry about that scroll that was bugging me all right all right so now we can
31:46
start looking at these buttons here okay so the edit button um actually
31:54
it's not a it's not a bad size obviously they're all centered um I do want some of them on the left and the trash button
32:01
on the right to kind of separate those two functions out right the ones that are going to be on the left are going to be the ones that are like um you know
32:09
these are editing you know enhancing and I want trash to be way far from those so
32:14
they're very separated functions because trash is always obviously a very destructive thing okay um but for fun
32:21
let's go ahead and uh that link or that icon actually worked out great one thing let's look at the uh
32:30
here we'll make this uh the text a little bit bigger for you guys in here
32:35
um if you look at the computer I think there's a background color being applied to there is a background color being
32:42
applied so I'm going to make background um color oh it's cuz I'm applying a
32:47
background color um interesting do we like that or
32:53
not I don't think we like it I'm going to ditch that
33:01
we don't like it oh oh wait the action bar I want a
33:08
background color it's the buttons I don't want a background color on hold on one second the yeah so am I applying a
33:16
background color here I don't think so I'm not what's applying that
33:21
background color let's see so in the inspector we can go down here and oh it's the browser applying a background
33:27
color so um right so we're going to override that for buttons we want to
33:32
have uh background color transparent
33:38
cool there we go and refresh there we go okay so now I
33:46
have um and there's also pointer we need to
33:52
have the pointer there I wondering if that's weird normally buttons should have cursor pointer by default cursor
33:59
default interesting H right well we want obviously we want to be able to have the
34:05
cursor pointer so that people know hey this is a clickable thing what the heck is that um so we want to
34:11
have cursor pointer okay uh there we go let's uh
34:19
rebuild refresh there we go so now now I know when I'm hovering over this bad boy that
34:26
it's clickable I should be able ble to click that okay even though most people probably know now if you notice there
34:31
are by default it's kind of an um there's a slight opacity when you hover over it becomes solid I kind of like
34:38
that okay that way it gives you a little bit of of an effect when you hover over that particular button okay um and I'm
34:46
not going to add any JavaScript yet to open it but eventually when we We'll add some actions that will when you click on
34:52
this it'll open up a light box with that other stuff okay so let's go ahead and fill out the other buttons uh the other
34:59
icons um so here I did um well first off let's
35:06
ah what did I do I moved to a different file fat fingered something all
35:14
right I just I like my organization so that's uh there now I don't what would
35:22
be nice is those svgs actually something I want to test here um okay so I have
35:29
the colors defined in the SVG okay so
35:35
let's for example let's go ahead and let's look at Icon edit which is this line right here okay um now when I
35:41
copied it out of nucleo um it has this fill color and all
35:46
the icons have the same fill it's all this this color here so what I'm going to do is I'm actually going to copy that
35:52
and I'm going to do a global search and replace um because instead of that I
35:58
want to test something out and I want to use something there's a keyword in svgs where you can say current color I think
36:06
that's the syntax off the top of my head I believe that's correct okay and so by
36:12
using current color um it should use the current text color for whatever that
36:19
image or whatever that element is applied whatever the current scope of the color the text color
36:25
should apply so let's test that I want to test that so we're going to do that
36:31
and uh I I know that works for svgs I don't
36:36
I've never I don't think I've ever tested it for a background SVG so that's uh quite interesting so if we refresh
36:42
that and here just for as a test let's go ahead and I'm going to make um the current color
36:50
uh let's just do red okay um Red's a good color if you ever
36:56
need to test something like make it red and it's very red so that's always a good thing uh we
37:04
rebuild refresh here damn it darn it I
37:09
mean that didn't do what I expected I was really hoping that would
37:16
work that's odd like the it
37:22
uh wonder if there's a so that's fill color wonder if there's a stroke
37:46
fill current color path are there any style tags or
37:55
something fill path
38:02
okay yeah I'm going to let's let's do some Googling because I think I would really like this to work um so we're
38:09
going to do background um or do
38:17
SVG current color let's just hey just make sure I got that right current color and
38:23
svgs nice current yesterday looked blah blah blah
38:31
change fill and also I want to make sure
38:39
actually he I have the current color oh no I added it to the button
38:46
H oh on here uh I don't think that's going to it's going to matter it should only matter but we'll change that to Red
38:52
too or here let's do uh green so that hover is completely different color
38:58
color
39:07
right I Phil's current color doesn't have any demos
39:14
Here My Links of the color fill
39:22
color yeah right cascading fill
39:30
color yeah I think this is see this is going to be one of those things where if it was an SVG on the page that would
39:36
work but because I'm using it as a data URI um in the CSS it's not um yeah let's
39:44
do um what is that data
39:50
URI yeah background image
39:57
there it's current color in background image SVG oops that's not what I wanted just
40:03
accept all Cookie thank you very much yes this guy's trying to do exactly what I
40:09
want it doesn't work as you expect because using URL makes the SVG be
40:15
treated as if it were an external resource oh interesting even if it's not
40:21
exactly the case there's no way to use CSS current color within your SVG when it's a background
40:31
image you should instead use a mask with background color to update the color
40:39
what is there a special fill mask that I can use fill black oops
40:47
ah one reason why I hate sideways Scrolls in browsers sometimes webkit
40:53
mask background color webkit mask what okay I got to test that that's actually
40:59
quite cool so instead of background instead of a background image
41:05
we're going to use webkit mask and then set the background color to be a color that's kind of cool let's give
41:12
that a shot all right so um that's a new one I did not Lear I did not know that
41:18
one before so instead of we do webkit das mask
41:28
wait is that that's what he did right webkit mask first off also let's see can I
41:34
use webkit Das
41:41
mask oh that's mask repeat does not work in Firefox darn it
41:50
might not be able to do this this is a website website called
41:56
can I use where you can like put in various web Technologies and it tells you what browsers support that right so
42:03
um I we wanted to use this webkit mask
42:09
which oh wait Firefox supports hold on where is
42:15
the webkit mask box image width image slice image source blah blah blah
42:23
position mask attachment mask composite
42:30
hm well wonder if you just search is it is there just a a
42:36
mask CSS
42:43
masks this is something new to me CSS
42:48
mask mask URL all right let's see if I can just use
42:56
mask Let's test that okay so we're going to mask that and then we're going to instead of color we're going to use
43:01
background color so um background color
43:08
red okay and uh here let's use background color um background- color
43:17
green okay so on Hover it should turn green
43:23
let's see um drum roll
43:30
where here it is om mg that's really really cool I
43:37
really like that okay love that and it turns green
43:45
sweet dude that's a score okay now I do want to make sure um it works in Firefox
43:51
so I'm just going to quickly launch Firefox which I don't use very often so it's probably going to like want to update and all and it just restarted so
43:58
that it can update right Firefox and let's just go ahead and test
44:06
this and it works score that is very
44:13
cool that is very cool I like it a
44:25
lot right loving it all right and uh just for I just want
44:32
to go to can I use mask again and that has
44:39
97% I'm safe normally you know I I try to you can see the the how many browsers
44:44
globally support it and if it's in the upper 90s I feel very comfortable using
44:50
something right so um yeah unprefixed is 87% so I guess maybe if I want wanted to
44:57
be completely nice uh I would use um something like this I would
45:03
do um you copy and paste that and you would do Dash
45:09
web web kit Das mask with the with that and then the mask and then that would
45:16
cover 98% almost of everything CU yeah a
45:22
lot of Edge and O Edge recogniz and supports web kit blah blah blah so yeah
45:28
uh Ms blah blah blah okay yeah we're good I'm good with that so a lot of
45:35
these older browsers here that have this required a prefix okay uh this web kit prefix but
45:41
then everything that's green fully supports just the mask property okay that's cool um that might uh might have
45:48
to make it itself into a Swatch um at some point okay um for foundation 6
45:55
users um we go all right so now we got that so now we're going to go ahead and oh yeah I don't want red anymore um
46:03
let's do like um background color uh all
46:09
right and I don't need background color there over opacity 1 opacity 8 right now
46:17
let's go ahead and do the rest of our um things okay so I had um dot on what was
46:25
it we have edit links featured trash and move right so we have um featured
46:40
oops and icon star is that what I
46:45
used I used featured right now it does have H not sure how I'm going to handle
46:54
that cuz uh depending on if something is featured or not featured um it's going
46:59
to be starred or empty a filled in star or an unfilled in Star um so not 100%
47:07
sure how what I'm going to do is for right now I'm just going to just to be able to test featured and not featured
47:12
I'm just going to do
47:17
this okay and uh let's see we need a trash
47:24
links and right uh oh move okay so now we're just
47:30
going to do um
47:36
trash trash
47:42
um links and
47:50
move okay so there we go got all that saved with my IC icons let's
48:00
build oops that's not what I wanted there we go and
48:08
refresh voila oops something happened here
48:15
links did I not do oh icon links was it not icon links icon
48:22
link uh is it link or links it's links okay um I guess I'll just change the we'll
48:31
change that here just icon link since it is a
48:38
link okay
48:51
rebuild all right there we go so now we're getting our icons in there now sweet and now we need the little
48:57
organization okay so um I need my trash bin over over here and I need all the
49:04
rest of them over here okay um now in the old in the old instance I use these
49:10
little things left left left left right um right but what we're going to do is
49:15
we're going to ditch
49:21
that okay oops it's not what I wanted okay
49:35
um like everything lined up and pretty okay um what we're going to do is we're
49:40
going to use something called Flex box on this and so we're going to make this display
49:47
Flex okay um I don't need text line centered
49:53
[Music] [Applause] adding opacity
50:00
yes uh yeah that's
50:07
fine
50:15
okay all right so we're going to make that display flex and what that should do
50:22
is all right that that makes them all align to the left okay um but what I
50:27
want to do is I want to take this right this last one and we're going to Chuck it over here okay and
50:34
[Music] um I always I have this little cool little cheat sheet which actually is uh
50:42
if if you guys weren't aware those cool posters over there um are like CSS cheat
50:47
sheets for CSS grid and flexbox okay um and uh but I have digital versions that
50:54
we can just open up quickly here uh oops I had them in this folder or did
51:00
I have them here ah they're here X Box oh yeah right and so it just kind of
51:08
reminds me of all the various things and how to do it right so um uh justify
51:13
content Flex end so but I want to align just an
51:25
item align
51:53
self all right you know what we're going to do save time we're going to we're going to pop out
51:59
GPT and just be like um
52:05
in in flexbox actually you know what I have
52:10
well we'll use GPT because I know a lot of you guys GPT a lot of times I've been using um I have access to GitHub
52:18
co-pilot okay and um GitHub copilot is like GPT built
52:24
into um vs code sweet okay but we'll use gbt since
52:32
I know a lot of you have access to that so um in flexbox I have a a row of
52:40
buttons and I want the last button
52:46
to um be aligned to the right
52:57
let's see if it says and chat gbd is thinking man slow
53:03
today what the
53:15
heck oh interesting so you just use margin left Auto
53:20
what let's test it margin left Auto right so on my trash button
53:27
um I'm going to make that one margin
53:34
left Auto let's try that what I thought there
53:40
was a going to be a cooler I bet you in CSS grid probably has a has a snazzier way of doing it I hate using margin Auto
53:48
for things it just doesn't seem intuitive but that freaking does it look at
53:55
that voila check that out he now I don't know the
54:01
size of the buttons I they do seem a little bulky to me I don't know you what do you you guys
54:08
think think they're they seem they seem a little bulky let's tweak it the size a little bit maybe we'll make it
54:16
um uh 24 pixels let's
54:23
see oh need to rebuild
54:29
oh but H that
54:36
sucks what if you do oh but you're doing a mask because all of those are 32 darn it
54:45
that's annoying another thing another annoyance for um okay wonder if I
54:54
omit here I just going to test one of these instead of going ahead and changing all of them I wonder if I just remove the width and height into this
55:02
and I wonder if it will just work let's
55:10
see oh that works all right we're removing the width and the height on all of those bad boys right we're just going
55:16
to do this we're just going to uh I need do on all of them
55:27
delete delete oh this one is 64 64 let's remove
55:33
that too nice I like deleting code all right
55:40
one thing I want to do is on this background color I'm actually going to um instead of current color which I know
55:46
doesn't obviously work we're just going to set that to be black on
55:51
everything okay I like that
55:56
all right let's rebuild now yes yeah I think that that size just
56:04
feels right right feels
56:09
better maybe we can get fancier with the hover animation I don't
56:17
know maybe a little bloop when it hovers over it or something um okay I'm digging it
56:26
I think it's simple right oh I want to test
56:32
the uh the not featured just for fun I'm going to add in a featured and not
56:38
featured um I don't know exactly how I'm going to control that yet but I want to
56:43
make sure that both um both Styles exist oh oh I didn't save oh I need to
56:50
rebuild the templates okay any yeah so when something is not
56:57
featured it'll show like this and you click it it'll turn solid um once that action is successful
57:04
and then that will it'll be a marker that that particular image is featured yeah uh and then we click on
57:11
this it'll open up a light box that will have some sort of Link Builder um and
57:16
then we click on this and that'll open up the light box for um everything
57:22
else I noticed when I
57:27
oh interesting you know I you might not be able to see it but when you click on any
57:32
of these buttons in here it makes the outline of the image
57:39
very interesting I'll have to I'll have to analyze
57:50
that oh I think I know why if it has something focused that is
57:57
on okay that is on form group let me just quickly go ahead and find
58:04
that code I think it's in
58:17
here sometimes that is annoying
58:40
not uh image dash dash field
58:56
all right I think that'll fix
59:04
that oh that did not fix it darn
59:21
it I assume it's because of this hold on second
59:48
Focus no I think it's when these when these buttons are focused
1:00:08
there we
1:00:13
go has Focus box Shadow form group has
1:00:20
Focus okay
1:00:32
wasn't this code let's remove that it is form group ah here has Focus
1:00:39
okay so when the form group has Focus but I don't want it to
1:00:45
be an on an image field okay so this is
1:00:50
only
1:00:57
so when a form group uh has Type range ah okay I
1:01:06
already right let's do this has
1:01:13
um oh wait no shoot because the form group is in the image field so if it has
1:01:20
a total preview
1:01:30
has action bar yes that should do it doaction
1:01:40
bar oops there we
1:01:51
go so now when I click on this button there we get no no box shadow score
1:01:57
Okay small little things you just keep tweaking them okay um I'm quite happy
1:02:04
with that um now you might be wondering up here is the is the like the field label and then
1:02:11
down here is like the field help text those are all customizable um things um so yeah let's go ahead and
1:02:19
turn on our off I'm going to turn off that that featured button since uh or the not featured button okay
1:02:26
um oh and I want to I just want to test this move one actually so I'm going to go back into this action
1:02:33
bar and I had I'm hiding it for an image field but I'm going to go ahead and
1:02:38
disable that for right now just so I can see
1:02:47
it oh and good thing because it it does not work okay so that needs to be down
1:02:52
here
1:02:58
uh because move now the move
1:03:07
is actually should be outside of the action bar
1:03:26
because if it's position absolute action bar itself is position
1:03:31
absolute so that's going to make it yeah so that needs to be outside of the
1:03:37
action bar because I want uh I want that this move button um to actually be down
1:03:44
here okay so that when we click on it it we can drag and drop something
1:03:51
and I think it makes better sense having on the bottom not inside the action bar
1:03:56
I don't know what you guys think in the chat uh action bar icons are too close
1:04:01
together I I can agree with that they they are a little close together um move should it be in the in the top here
1:04:09
where you can move something around or on the bottom previous versions add it at the
1:04:17
bottom H bottom and outlined yeah well let's
1:04:23
let's move it to the bottom and that's how I had it before four and uh let's let's start
1:04:28
there actually the though the icon itself just flat out doesn't work right so icon move so we need to look at
1:04:36
that uh I thought I did icon oh icon bars yeah it's icon
1:04:46
bars okay um here we're going to we're going to
1:04:56
take that out of the action bar and oh it's still in the action bar though I think it needs to be
1:05:12
outside uh and we need a uh background color um let's set it to
1:05:24
White let's see what that
1:05:31
does and whoa that did not work
1:05:37
oh um
1:05:51
shoot h
1:05:57
needs to be outside but then we need all new stuff
1:06:05
right might have to rethink some of our class architecture but it's all good let's just go with it for right now
1:06:11
we'll just copy some of
1:06:22
these oh here I had background color transparent but then I set the back color to be a color that doesn't make sense I just remove
1:06:29
that oh but yeah all let's just do that move
1:06:37
that into here since that is a
1:06:44
button and none of this is actually inside the action
1:06:50
bar it's outside the action bar right
1:06:56
yeah it's outside the action bar all right let's try
1:07:07
this where is
1:07:20
it there it is oh it's down here
1:07:35
okay
1:07:41
um opacity is 60% position absolute bottom zero oh
1:07:49
sizing it doesn't have a size um with
1:07:56
um 24 pixels and this one maybe we'll make this one a little bit larger
1:08:01
32 and a height of
1:08:12
32 oh need to rebuild there it
1:08:22
goes yeah maybe make sense to only show it when we hover over the but over this so
1:08:29
it's not it doesn't show when you hover over it shows and you can grab it and move obviously the grab and move doesn't
1:08:35
work but I just again wanted to show and maybe it should be a little bit up from the bottom just like a little bit right
1:08:41
instead of bottom zero maybe if we did like bottom 10 pixels something like that so it's a little bit up
1:08:49
yeah maybe what if we did like even bigger what if we did like a 48 pixels
1:08:57
48 pixels that's that's quite
1:09:04
large yeah we'll stick with 32 I'll move it up from the bottom a little bit so that we have a bottom maybe 10 pixels
1:09:11
and while we're here um let's see the grand PBA himself said
1:09:17
I should increase this margin to 10 pixels between the buttons actually you
1:09:24
know what we're since we're using fleux box here let's do uh let's do uh
1:09:31
Gap uh Gap uh 10 pixels I should do
1:09:50
it that work
1:10:00
yeah it worked let's see if I did 20 pixels though that's too
1:10:13
much 16 ah it seems too much [Music]
1:10:21
too 12 which is half half the size of the icons that kind of makes sense right
1:10:27
12 is half the size of the icons but I I don't necessarily like the um this edit being all the way to
1:10:35
the right I like a little bit of well that that could be uh fixed by padding
1:10:40
so we could just up the padding here to 16 May oh wait no that was
1:10:48
10 and just make make that 10 as well
1:10:55
yeah okay so we're going to do that we're going to do gap of 12 pixels and then um here I'm going to do
1:11:01
12 pixels as well actually let's just do 12 pixels all the way around so it's just padding
1:11:08
of 12 right let's play with
1:11:15
that there I like that right so remember I made these icons 24 pixels I made the
1:11:22
Gap in between them 12 pixels which is half the size of the icons themselves
1:11:28
which I think makes it look nice and then I made the same padding all the way around so it's kind of an All Uniform to
1:11:34
layout they all kind of have the same size right um now if we wanted to be
1:11:40
cool what we could do this is we could do something like this we could do um Das Dash
1:11:48
icon um size let's do like action icon size
1:11:56
uh 12 pixels or no 24 pixels right okay and then um and then
1:12:06
in here we could do uh
1:12:11
VAR Das Das action icon
1:12:18
size right um and then over here we could do
1:12:25
um Cal action icon size ided
1:12:33
two and same thing on
1:12:40
here okay this's some fancy Dancy CSS here uh and this should all work right
1:12:45
so I set my I set a variable which is action icon size to 24 I then uh
1:12:52
calculate my padding and my Gap based on that size
1:12:57
um and then I set my widths and my Heights all there as well right so let's go ahead and save
1:13:11
that and vo that worked right it looks the
1:13:18
same but it's all using variables now so I could just set that icon bar size um
1:13:23
with one thing now move is is managed independently but it's kind of outside
1:13:28
and I think I made that a little bit bigger anyway so um yeah there we go let's turn off the uh the always visible
1:13:36
um doohi where' I put that right here there we go and let's turn on Hover
1:13:42
for move right so um well uh let's
1:13:52
do um this is going to be when I hover over
1:14:01
total preview right so um we'll do uh this is going to
1:14:08
be opacity
1:14:20
Z okay and then when we did uh total Dash
1:14:26
field uh or total preview sorry total preview um
1:14:33
hover move opacity one I don't want opacity one actually I'm going to make it
1:14:39
0.6 so that has a little bit of style to
1:14:44
it all right let's do that
1:14:51
rebuild bresh and we hover over over we have our nice toolbar okay um I might still try
1:14:59
to stylize these a little bit more but all in all I like it and and we also
1:15:07
show and hide our our oh we need a transition on that
1:15:12
100% uh let's just do the same
1:15:21
transition there we go and uh uh we'll just trust that that's going to
1:15:27
work but let's just verify hover over it we got a nice move
1:15:34
okay we got our icons and uh I know for image I don't
1:15:40
want the move so I'm going to turn back on the display
1:15:45
none and voila there we go look at that yeah none of these work yet but
1:15:53
functions there we go uh let me see if there's any other questions uh I know I've got I've gone
1:16:00
way over an hour already um so yeah didn't get quite as far as maybe as I
1:16:05
had thought but um it was quite successful just you kind of you guys can kind of see how things are built in the
1:16:12
and you know and
1:16:18
whatnot there's some chitchat I can see where the near future you can indicate the icons telling the voice chat blah
1:16:24
blah blah blah blah uh you're Frozen I'm not okay he froze me
1:16:39
out move on Hover now uh oh yeah well yeah we move I I hid move because we're
1:16:45
uh we're now on an image okay um hey guys I'm going to I'm going to call it quits now uh did you guys like that I
1:16:52
don't know um you know I I accomplished something that I wanted to do and anyways and uh you guys got to
1:17:00
watch me do it um did did you find that interesting maybe we could do this semi-
1:17:05
regularly if you know um you know there are definitely days I have to admit where it's like I know I I have some
1:17:11
stuff I have to do but it's like oh man I have to do a live stream and um is this an interesting alternative um times
1:17:18
when you know something like this is better than not having a live stream um because yeah there are times that
1:17:25
I definitely need to get something done and um yeah if you guys can watch me do it um and I can teach you guys something
1:17:32
cool then uh yeah I'm all for it um so um yeah thank you very much for
1:17:38
watching me struggle through this I didn't struggle too bad but um yeah I
1:17:43
have say it was wasn't a fail I I mean I didn't get as much done as I I thought I thought maybe I'd get up to the ability
1:17:49
to open up the the modal at least um and so yeah I'm actually going to be testing
1:17:54
something actually when I go to the model for editing the content I can try something completely new I've never done
1:17:59
before I've never used um there's a new um HTML modal element um that now has
1:18:07
pretty wide support and um yeah I haven't used it yet in in anything so I mean it's at 92%
1:18:15
support across all browsers so I think I'm going to use it um and uh yeah I'm I'm I'm intrigued to do that it's like a
1:18:23
basically like a a native browser based uh light box um it's very Bare Bones
1:18:30
right obviously you need to do a lot of styling but there's less JavaScript because it just it you hook it up to
1:18:35
your button and it opens it up right so um yeah mened that I'm really trying to move towards um less JavaScript
1:18:43
especially for total CS I want to I want to try to use as little JavaScript as possible even with that though there's
1:18:49
still a just a lot of JavaScript on the admin panel I mean a lot of it is like the style text thing um I guess here
1:18:57
really quick for those that um that were at the summit just let you know I uh I
1:19:03
did fix style text so style text can now save um so yeah I'm really excited for
1:19:10
those that you didn't attend the summit this was the little demo that I built for the summit and I showed off uh
1:19:15
custom admin stuff and um like here if we go ahead and I can load in a I think
1:19:22
uh there we go you know I can load in a c cust element we can you know change
1:19:27
the colors of things um yeah and I fixed style text actually wasn't even a bug
1:19:33
I'm not okay I'm not even going to go into it I'm not exactly sure where the bug was it was a publishing glitch basically um and uh yeah there was
1:19:40
actually no bug I spent like 3 or 4 hours realizing it was a publishing glitch when it I thought it was a actual
1:19:47
bug in the CMS so but it's all fixed now so I'm super stoked about that um and
1:19:53
yeah I'm really excited about total CS 3 um I'm working I'm working hard uh to
1:20:00
try to get a beta out for early users um by the end of the month um and yeah hope
1:20:06
you guys enjoy that um all right it was educational it was interesting um especially your input and help on uh
1:20:13
cool uh Scott I'm not exactly Mr Anderson not 100% sure I saw a lot of
1:20:20
messages from you about GPT and whatnot if if you have any further questions go ahead and on the ask on the community or
1:20:26
if it's related to this live stream ask in the post about this live stream and
1:20:31
I'll be happy to answer any questions you got okay um so sweet I thank you
1:20:38
very much everybody have a wonderful rest of your week hopefully I'll see you on Friday um and hopefully by Friday I
1:20:45
should have more of this image admin uploader done and uh if you join us
1:20:51
maybe you can get a sneak peek of that so cool thank you very much everyone have a great great rest of your week and
1:20:56
uh I'll see you soon take care bye