0:08
there we go how's everyone doing today excellent oh man chat's already
0:16
off the hook look at that we got Josh here Mr Cole David David where you been
0:21
on Fridays man you've been leaving us in the cold okay um Chris sweet excellent
0:28
Gunter thanks for coming on cool excellent let's um so
0:37
today I thought it would be fun to um as you you probably read the email on the post or whatever that on Friday uh
0:44
during the hangout uh Shawn don't know if Sean's here or not but Shawn had a
0:50
question he's actually working on a project with David um who's here and uh
0:56
I believe yeah David's here David Shay and they uh they're kind of collaborating on a project right and
1:01
they're they're wondering on workflows for how can they both work on a project
1:09
and and keep things uh kind of in sync right
1:14
now there is caveats um it I think working on the same project
1:21
file with two people is is definitely going to be a
1:26
challenge okay um there's things we could do to kind of improve that and part of that is
1:33
what I'm going to show today okay um so if you're if you're not aware there's a
1:38
there's a common Version Control System out there called git git okay
1:46
and probably there there's Services I'm sure you've all heard of a service called GitHub it's now owned by
1:54
Microsoft um it's probably the number one repository online for open source projects
2:00
and uh it's a it's a great service it's where I host all of my code and um you know all of that okay so uh I am fully
2:08
aware of GitHub git I've used other services as well gitlab is another one
2:14
um you can actually if you have like something like a Synology or something like that you can actually host it like locally on your local network um but
2:21
with that said today we're going to look at GitHub okay and the workflow with
2:26
GitHub is nice because um they actually have an their own app which is free um I I use a different app that's
2:33
like a totally app for total app for developers and it's really specific for
2:38
development um but we're going to today look at the free GitHub app and what you
2:43
can do to Version Control your project files and then uh if I don't talk about
2:49
it we we're going to talk about how how this will work in in a multi-person potentially multi-user environment um so
2:56
and there is again that workflow isn't seamless I don't think it'll ever be seamless um at least for the foreseeable
3:03
future having multiple people work on the same exact project file okay but
3:08
again um yeah we're going to look at uh we're going to look at that right so without further Ado um
3:15
let's go ahead and uh share my screen I was actually hoping to get some
3:21
a little bit of stuff prepped for this but I've been dealing with some other side drama um this week uh so so yeah if
3:30
you're familiar all all the other drama going on in the communities uh with Elixir and everything so um spend fun
3:36
times with that um but let's go ahead and actually let's go ahead I'm going to
3:42
open up a browser and we're going to go to
3:48
GitHub okay and um what what I'm actually going
3:53
to do is so you you'll create an account on GitHub and uh we'll go to uh go to my
3:59
Prof file okay and um what we're going to do
4:05
right now is we're we are actually going to um let's create a a repo I wonder I
4:11
have to admit wonder what is more is easier I'm going to open up the GitHub desktop app okay if you just Google
4:18
GitHub desktop um it is a free app um that they have okay and you log into
4:23
your GitHub account okay and uh can I do let's see Repository can I do a new
4:30
repository Straight From Here file new repository let's do that
4:35
okay so this is kind of cool okay so um you actually don't need to cre outside
4:41
of this you would have to like create a repository in GitHub and then with my other app or locally I'd configure it
4:46
but since this is all GitHub we can actually do it locally which is kind of cool okay um so we're going to create a
4:53
um a repository and let's just call this um something interesting let's just call it um STX
5:01
version live stream okay um so and it's saying
5:08
that hey I don't have one created like that so it's say we're going to uh um create one for us thank you very much
5:14
right and uh let's choose the path um we'll we'll just add it to documents
5:20
GitHub it's fine we'll just keep that um and just keep all the rest of this the same okay uh and just say create
5:27
Repository all right so now I assume actually if I
5:34
if I look online uh if I go to where do I see my
5:46
repositories where did it create it interesting it says it created it maybe I have to publish oh publish repository
5:52
right so I'm going to click publish uh publish it to github.com organization uh I'm just going to no
5:59
organiz just going to publish it to my personal account we're not going to go into GitHub organizations right now all right
6:06
so now I've published that and if we go to GitHub now there it is right so um
6:12
here is my repository online on GitHub and it's currently empty right and that's okay because we're going to put
6:18
some stuff in it all right
6:26
um so now what we're going to do is I'm going to Let's create a a project file
6:32
I'm going to create just one from scratch um it doesn't really matter the contents of the project right we're just going to create a a new project
6:45
file here right now I'm actually going to we're going to close I'll move it over here in case I need it again uh but
6:51
we don't really need that any longer online I was just to show you how you can create a GitHub account and do
6:57
pretty much manage everything from the GitHub app which is
7:02
nice all right so um let's just I'm just going to quickly just create something here um just going to go Boop and we're
7:10
going to go and Boop and we're going to go and add a header uh actually let's
7:19
just add some text right uh and uh here we'll add an add an image why not
7:27
right just that we can have have something voila right so there's my my
7:33
beautiful lovely website again doesn't really matter all right and let's save that what I'm going to do is I'm going to save this file to this um folder that
7:43
we created okay and just so you see um if we I saved it in uh I think it was
7:49
documents hold on where where did it save it where's uh documents thought I saved it in
8:01
reveal and finder where did it show where did it put
8:06
it oh there it is all right so uh oh it's under documents under iCloud so documents GitHub there okay um word of
8:15
caution I don't know it defaults to this location um I personally don't like
8:21
storing um any of my version control things on iCloud okay um or any
8:27
especially not drop off never ever ever ever ever ever
8:33
ever I I I can't I can't explain this enough do not ever store a get
8:40
repository on Dropbox never never do it warning
8:47
you okay I lost a lot of code because of that caused me a lot of Heartache okay
8:54
um I'm going to go with this for right now uh but I would I I've never tried storing because the the horrible taste I
9:01
have in my mouth from doing that with Dropbox I don't store any of my Version Control repositories on iCloud okay um
9:09
but I'm going to go with it today just because that's where it saved it okay um so uh let's go ahead and save this
9:16
into this uh directory so we're just going to save it in here and I'm just
9:21
going to call this um another thing that I do just let you know I actually save the project has the
9:29
domain name okay so like if this was um preview dot preview do um Joe
9:44
workman.com okay but um yeah I I put the domain name
9:49
as the project um just something that I do okay um and normally actually when
9:54
another thing I did I normally do is um and I'll show you this in my repository I named this Stacks live uh versions
10:01
live stream you can name the repository whatever you want I always name it um the name of the domain d project okay
10:08
just so it's super clean and I'll show you my my setup in a little bit with all my various sites
10:14
okay um okay so now I saved it and if we go into the GitHub app it noticed that I
10:20
put new files in there okay and it's going to be like hey yo I see all these files what are we going to do okay and
10:27
what's kind of cool is um I can now go um I'm this is the first time I've
10:33
saved anything into this Version Control history so I'm just going to say um this is the initial project
10:42
file and you can add in more description in here you can be as descriptive as you want put as much information as you want
10:48
and this is this is all for you okay this is so that when you look at the version history um you know exactly uh
10:55
what we got right so if we go into GitHub um and we can look at our history
11:01
I can see the history of everything that I've done okay so for example let's go in
11:07
here I'm going to add in uh let's make this the homepage okay I'm going to go ahead and
11:12
add in oops um we're going to add in another page
11:18
that's I wanted a new page and let's call this like
11:24
about and we're going to call this bum we're going to call this contact right
11:29
okay I'm going to save this project file okay and guess what I'm going to go back into um what was this oh we don't need
11:35
that right um I'm going to go back in GitHub app and look so if you notice in here there's two tabs there's changes
11:41
this is everything that's changed so far and if I go into history this this the history of my changes okay now as of
11:49
right now none of these changes have been saved okay so I can do is um I'm just
11:55
going to go ahead and say okay um added a about contact and what else did I add
12:03
about and contact pages right about and contact pages and I'm just going to say
12:09
commit to main okay so now I I have a new version which is cool right now
12:18
um so now at at any point in time I can easily get to any version of this
12:24
project file at any point in time super super cool okay so
12:32
um for example right I'm going to go ahead and um let's say I I'm going to add in a picture on this page and uh
12:40
we're going to add in uh add in this picture here because this is about me right so I'm going to go ahead and save
12:45
[Music] that and uh let's go over here and obviously here's everything and
12:52
if if you want to look I mean it's kind of interesting peeking under the hood you can actually see everything that
12:58
changed when did that right we can see here's the image I added to the project here is all the changes now a lot of
13:04
these changes are just going to be binary and there there's no Rhyme or Reason to them you won't be able to read the changes that we made okay it's just
13:11
changes we're made okay um so here I'm going to add in um added um about me
13:20
photo right and let's commit okay so now I I saved that right so now um I'm going
13:27
to go ahead and I'm going to Quick this project file file cuz I'm not sure what I'm about to show you is going to work with the project file open and I don't
13:33
want to mess things up so let's say for example remember I added that about me file okay but let's say I wanted to go
13:40
revert back to the initial version of this project okay I'm going to right click
13:45
here and I can either say uh revert changes in this commit I can check out
13:50
this commit I can create a new Branch we're not going to go through cherry picking and creating branches right now
13:56
but let's say I just want to check out this commit right now okay I'm going to check that
14:02
out checking out a commit will detach head yes we want to do that okay so what
14:08
that means is I I've now U I've checked out this Branch or I've checked out my
14:14
version control from that point so I I can now access the file that is in it
14:20
the current state it was in so let's go ahead and open that file again and remember uh after that after I did this
14:26
initial project file commit I added the about page the contact page and my image okay so what I'm going to do is I'm
14:32
going to go ahead and open this project file and what you'll notice is just look over here you'll notice that it is it is
14:38
back to the Untitled
14:48
page always close project before committing to get uh yeah you can uh uh
14:54
sometimes I'm I I as you noticed I I I didn't uh do that when I was committing the changes um but if you're going to
15:01
revert and do that stuff I would definitely quit the project file okay but as you see here I'm now back to the
15:08
state of the project that this was in right so if any point in time you need to you know I I just did some simple
15:14
stupid changes but imagine I mean if you're keeping detailed logs about everything that you do right you can go
15:21
back to a very specific time to a very specific feature that you added to get something back or to do something okay
15:29
or to restore a project to a particular previous state right this is invaluable
15:35
right um this is awesome this is something that Apple tried to do with time machine and that whole like Version
15:41
Control document thing like you can like browse back um I I never thought they
15:46
nailed that okay uh this gives it to us okay um so pretty powerful now if you
15:54
look here uh we we can go back to right now I'm on the detached head okay I'm going to go ahead and let's close this
16:00
project file let's go back to uh my my main branch okay so now now I'm back to
16:08
the main branch and um yeah let's open up that
16:13
project file again and if you notice now the about me
16:19
page the contact page right so I I'm I'm back to where we were before right so this is pretty awesome
16:27
right I I think this is um um yeah super powerful um there's other things that I
16:33
mean I I don't want to give a full git tutorial here okay and and and really geek out I can okay um but I think just
16:42
what I showed so far is really really good Okay now what's also really great
16:49
is um let's say I open up a project file and I do all kinds of stuff right um and
16:56
I add a bunch of stuff onto this into here and and um I I even save it and
17:01
then somehow I broke something right and I'm like I don't know what the heck I
17:07
did like I I I try to do command Z and it crashes you know rapid weaver or something like that okay so what's
17:14
really cool is so if you see here um inside of the GitHub app I'm in my changes and it from all those changes I
17:21
just made I made eight different there's eight changes inside the project file in all these various pist files okay now
17:28
now I can't spot the one change I made and revert it here okay but one thing that's really cool is I can I can
17:35
highlight all of this and I can just say discard these changes so I can discard all of
17:43
that yes permanently discard my changes now if I go back to my project
17:49
file okay I think it was on this page look all those changes that I just made are
17:55
gone my project file is still intact right so one of the best practices with
18:03
this is commit as often like you finish something and it's working commit finish
18:08
something work commit and type in a little what that state is okay let me
18:13
give you a a a quick small example um I'm going to show you my uh G
18:20
repository uh let me go ahead and uh let me get this app out
18:27
here um so the this app I actually use uh here let's go ahead and actually here let's go and let's go to Stacks okay I
18:34
um this is my repository for Stacks okay it's for all my
18:40
stacks and what what I wanted to show you here again this is a different app than the GitHub app but the concept's
18:47
the same okay I have my my version history of every change I've ever made I actually have every change I've ever
18:53
made for the last 15 years right here every code change I've made to every
19:00
line of code in every stack I've ever made is all right here okay super
19:06
powerful and I can revert back to that any state of my repository for the last
19:12
15 years I can revert back to it in a second really cool um and yeah so just
19:21
to show you I commit code like whenever I'm I'm writing something doing something and I get it working I commit
19:29
then I I work more work more oh it's still working commit blah then commit
19:34
commit as you I mean if you look here this was yesterday I think I mean there I had I don't know
19:41
was that 10 or 15 commits that's actually probably pretty small normally I'll have even more than that you know
19:48
so commit as much as possible just commit commit commit so that you have a
19:53
detailed history of everything that's ever been done and you can revert back to any exact point in
19:59
time so super super
20:06
powerful um so yeah I mean that is that's the raw Basics I think that is
20:11
I'm I'm not going to dive into branches and all kinds of crazy stuff okay um oh one thing I should mention is um now
20:18
that uh I made all those changes and if we if we look online you'll notice that there's
20:24
nothing here okay um and that's because in the GitHub app you'll notice right up here it says push or push origin
20:31
basically I've made all my changes local and all of my version history is local but I haven't pushed it up to GitHub yet
20:38
okay so what I'm going to do is I'm going to push this up there we go and
20:46
now you'll notice now that project file is
20:51
online okay so what does this mean backups not not only do we have Version
20:57
Control but I now have an off-site backup of my project file okay now one thing I do recommend you to do and if
21:04
and it is actually that way by default with the GitHub app which I like um is you need to make sure your your
21:10
repository on GitHub is private because you don't want this just to be a p now maybe you want to have a public
21:16
repository where everybody every anybody can get anything they want but um I
21:22
think by default having it private is good thing okay um
21:28
so yeah um I I think that covers kind of the raw basics of things right uh
21:34
locally if we go here uh well that's all all of the repositories and we go here um we can see I have um all the changes
21:42
that I've made right now that I have no changes but if you open up a project file um and make any changes those
21:47
changes will be here when you're ready go ahead and submit and commit those changes and then push them up to
21:55
GitHub okay and again at then at any point in time you can look at your history and revert back to a particular
22:02
point in history with super easy with a click of a button okay another thing you
22:07
can do is um let's say uh here is I added the about me photo let's say I want to discard that everything that I
22:13
did there I just want to discard that so I'm just going to right click and say revert changes in this
22:19
commit and now all of a sudden it's gone right if I go ahead and open up that
22:24
project now oh I probably shouldn't have done that when it was open let's let's let's see what
22:31
happens uh oh it's there so right on the about me there is a picture it's gone
22:37
now okay now if you notice um in GitHub there's this little arrow um what that
22:43
means is that this particular change is not pushed up to the
22:48
server so um if I go if I wanted that change pushed to the server I can go ahead and say push origin and that will
22:55
push that change to the server
23:00
right so now uh we can go online and you can actually go in here you can say uh
23:06
if you click on this you can actually see all your your history online as well everything's
23:11
tracked right really really
23:17
cool so what does this mean for
23:23
um well first off let me let me show you kind of how I manage some things okay um
23:31
so now I already did a live stream and actually Josh did a uh a talk at the conference last year about managing
23:38
website deployments with Git and GitHub um I'm not going to dive into that at
23:43
all today okay I wanted to keep this simple just managing project files okay
23:49
um but um just to show you how I how I organize things I have everything in
23:54
this app um instead of again I don't use the gith help app um so um um oops don't
23:59
want to do that um what you what will'll notice is I have a um I have a a
24:05
repository for the published website okay um so this is a repository for
24:10
Weaver space I just made changes this morning I had to update the reflection demo I made changes today pushed them up
24:17
this morning my website's updated okay pretty cool um I'm not going to go into
24:23
the benefits of doing any of get with there's a little bit more complexity when deploying a website with Git okay
24:30
so I'm not going to dive into that today um but what I want to show is I I have a repository for the exported website as
24:37
well as I have a repository for the project so uh and actually this one I
24:44
need to I need to modify so uh here let's go ahead and oops hold on actually
24:50
I did some other changes I'm not going to Stage this right now okay um so what I have is I have if you
24:57
notice here weaver. space- project okay and here let's just go to websites okay
25:04
so inside finder okay what you'll notice is I have um a directory for Weaver
25:09
space that's my exported website I have a directory for Weaver space- project
25:15
and that has just the project files right actually don't want that let's delete that right um so yeah um I
25:24
recommend having um I also have a a a project file for a help subdomain but um
25:31
yeah I recommend for project files I like to keep it all separate so for example I also have let's say Foundation
25:38
Stacks right here is foundation stacks.com this is the exported website um here is the foundation stacks.com
25:45
project and guess what that has the project file okay um and yeah it only
25:51
has the project file that's it you could potentially have one git repository that
25:56
has all your projects in it um but it's free to create a private repository on GitHub now so like I don't know I I just
26:04
think creating a repository for every single project um just makes
26:09
sense okay um now what's really cool is on GitHub um by default if you if you
26:16
make something private only you get access to it okay but I can go into the settings here or maybe it's in or
26:22
collaborators so you can you can uh well it's going to cause me to authenticate blah blah blah blah blah you're hold on
26:28
let me do that use GitHub mobile to authenticate hold on one second got to use this on my
26:38
phone uh 39 okay right so in here you can actually
26:46
add people so like for example um I said earlier Sean and Dave David are working
26:52
together um so one of them would host the repository and then give add the other person as access
26:58
okay so what that means is um David and Shawn could work on a
27:06
project right and uh now one thing you're you're going to want to make sure is uh Sean makes some changes pushes it
27:12
up right if I don't recommend two people work on the same project at the same
27:18
time okay because um if you both commit CH make changes merging those changes is
27:26
not going to be possible okay let me let me repeat that Dave
27:34
works on the project file Shawn works on a project file they both make changes
27:39
okay they didn't talk to each other properly and um Sean pushed up some changes while Dave uh M was making other
27:47
changes Dave uh pushed up changes there's now two different changes and
27:53
github's going to go it's actually not going to allow Dave to push because
27:58
there's conflicts okay and um so yeah they're at that point you're going to have to pick
28:04
a version okay um and then um either use that or take Dave's versions and
28:10
manually merge them uh via the app right something like that so there definitely
28:15
needs to be uh communication if you're working on the same
28:20
project also if if you let's say you solve the problem
28:27
of only one person works on a project actively at a time um let's say Shawn
28:34
makes some changes pushes it up to GitHub and then Dave forgets to pull
28:39
down those changes okay because it's a manual hey I need to open up I need to pull down all
28:44
the changes that Shawn made and and then make edits to the project Dave forgot to
28:50
do that and he opened the project and start M start starts making changes again at this point you're now
28:57
conflicting as well you have conflicts okay because the project stat file is out of sync now um git was made for
29:05
developers and normally developers are are coding in plain text and there is
29:11
the ability to merge changes however as I showed you earlier okay um
29:19
the changes inside of a project file are like binary okay so you can't merge binary data it's just not possible okay
29:27
um so yes you need to make sure if if you're have two people always pull down
29:33
the most recent version first then make your changes and then push up okay that
29:39
way then if Shawn needs to make changes pulls down the recent versions makes his changes push up right okay now a
29:48
potential workflow that you could do okay if you wanted to work on the same
29:55
project at the same time is is to essentially have two project files okay
30:02
let's say um I'm going to take Dave and Shan you guys are the the guinea pigs today okay um so Dave and Shawn um have
30:10
two different project files for um my amazing website.com okay and um let's say Dave is
30:18
responsible for the homepage the blog and uh the contact page and Sean is
30:25
responsible for um you know the uh the blog or the you know not the blog
30:33
I said Dave was responsible for the blog Sean's just twiddling his thumbs doing nothing um but he he needs to feel
30:39
important so um he's going to create a project file for himself okay and he's going to create the treasures web page
30:45
or whatever um create two different project files the project file that Dave's working on has the pages he's
30:50
working on the project files that Sean's working on has the pages he's working on and then at some point your guys are
30:56
going to have a have the ability just to kind of drag and drop those pages and merge them into a single project so that
31:02
you can publish them okay um maybe that workflow doesn't work uh it's just an
31:07
idea okay but um yeah if if you want to work on something at the same time make
31:13
sure it's not the same project file um make sure that they're different files so that when you push your changes up
31:18
there's no conflicts up in the cloud hopefully that makes some sense
31:23
okay um I've been completely ignoring the chat room but I've see it's kind of blown up a little bit let's let's have a
31:28
gander in that to see um what we're talking about here or see what we can do
31:33
to help um okay I've heard stack I've heard
31:40
stack Weaver is obsessed with this yes he is okay um okay he flashing anyone else uh oop
31:47
string stream stopped oops running again no issues so far here okay um sorry if you have some connection issues I just
31:53
went with it okay um always close your project before committing um to save commits like to to save a
32:02
current version I I haven't had any issues with leaving the project file open as you saw um but if you were ever
32:08
doing any sort of reverting um I don't know I I would close just in case um but
32:14
yeah let's see um there are pist that save uh there are
32:21
pis uh that save uh when rapid Weaver is closed that is true um there are pists
32:27
that are saved when you close rapid Weaver basically it saves what like what page you were on and whatnot okay that
32:33
is that is true um sounds like R commit commit commit oh
32:44
yes um okay excellent just a lot of banter in the chat room I love that that's that's a lot of good fun um so
32:51
yeah hopefully this helped out guys um I I don't want to beat a dead horse I think uh I've kind of gone over the
32:56
basics with you um and luckily that GitHub app makes everything super easy
33:01
so if you have any more questions go ahead and ask questions on the community happy to help out um maybe post on the
33:09
uh the event post for this live stream and hopefully you like that okay um so without further Ado I promised that uh
33:15
if we had time today we were going to poke in and see um what I just released yesterday so um can all blame um Josh
33:25
let me go Ahad and share because uh yeah I don't he had a qu some sort of question about
33:30
reflection he's like hey C can I do this and I was like nah sorry you can't really do that and then um my OCD ass uh
33:38
basically was like I went and looked at the stack to see what what it was possible and I looked at the code was like uh like I was like I could do this
33:47
and that and I I can make it I man my coding standards now are so much better than when I made this I can make this a
33:53
little bit nicer you know and I was like ah it wouldn't take me long and um yeah
33:58
famous last words of a developer that that won't take me long right and um so
34:03
yeah so I uh yesterday I spent all day long um redoing reflection I completely
34:10
rewrote it from scratch as I do and uh I added some features a bunch of features
34:16
and made just made it nicer and I was like you know what uh yeah I'm going to
34:21
release this as a paid upgrade so um I think it's worth it Stacks completely redone and also another side of effect
34:28
is um so this stack it's been around for ever 10 12 years something like that um
34:36
and it used to be called Fancy image reflection if you're old school and you've been around I had a fancy image B
34:43
IM image bundle stack a long time ago it was a bundle of stacks you could buy them individually or as a bundle called
34:49
Fancy image and um the name of this stack for the past 12 years has been
34:56
fancy image reflection dot stack and it just drove me nuts because I don't really use the fancy image um label
35:04
anymore um there's still a lot of stacks like uh you know uh the my 360° stack um
35:10
prints a bunch of them they're like fancy image something right and so this one it's now called reflection. stack
35:17
and uh yeah I F I knocked one out of the park got one fancy image stack out of
35:22
there um so this is now called reflection um uh do stack so small
35:28
little side tangent there with my OCD nness um but okay uh let's look at what
35:33
does reflection do uh hopefully you guys are probably seen the demo I actually just shipped an update this morning um
35:38
inside preview it would um like double up the Shadows or or the the reflections
35:44
sometimes so um yeah fix that um if you're curious I I always previewed in
35:49
the browser and this bug didn't show up in the browser or rarely did um had to do with these images being loaded
35:55
locally and loading like insanely ly fast and sometimes it would load so quick that um yeah the canvas would get
36:04
generated twice right but whatever um what's really cool about this is um the
36:10
prior version uh basically did this example here where it just reflected and the reflection went straight down and um
36:17
I I was playing around with stuff stuff yesterday I was like how can we make this more interesting right so um I thought adding a blur would be nice okay
36:24
so now it's kind of a blurred um reflection um and then I was like other things is let's skew it right so um so
36:31
we can kind of have things off to the side make sure that if we round the image um it also rounds the reflection
36:38
um that wasn't possible before um but yeah I really like the skewing here this example here it skews and severely um
36:46
blurs the the reflection which gives a very interesting effect right it's kind
36:52
of like a a colored shadow that obviously matches the photo itself right
36:57
because it is a copy of the photo um so I think this is really elegant um when I
37:03
did this demo I was like wow like that's actually really cool you know like this I mean 10 years ago this this
37:11
was cool but nowadays eh you know I mean
37:17
it's still possible obviously but this wow that's that's next level right so I definitely feel I took that stack up to
37:22
the next level um super easy to use um you drag and drop an image um you can have a uh one image or if you supply two
37:29
it'll do this one will be mobile this one will be medium and large okay so desktop and mobile and tablet obviously
37:35
alt tags if you want to add a link you can do that um some alignment options um you can supply um max width
37:44
as well um you can thank Josh for that one um Po in preview if you supply Max
37:49
width it doesn't it refresh fumbles up a little bit then you can do um rounding
37:54
so that's obviously gives you the rounded Corners um you can change the gap which is the space
38:00
between um the reflection and the original image okay um and on this one actually I
38:07
actually had a negative Gap right so it actually brings the the reflection up a little bit so if you notice here it kind
38:13
of goes under the image a little bit which is pretty slick I think I I kind of like that just a slight negative Gap
38:20
um to bring it up a little bit really works um the height this is the ability
38:25
the height of the reflection and it's based on the height of the image so um this is height 33% so basically it it's
38:33
the reflection is 33% height of the image itself right um then we have
38:39
obviously the opacity now when you add blur uh blur really obfuscates the image
38:45
a lot so you can actually up the opacity quite a bit actually um when you use blur but um yeah uh so opacity the skew
38:54
is what skews it to the left or to the right so the skew can be positive or negative um if you want it skewed to the
39:00
right the skew will be positive you want to skew it to the left like uh oh I thought this one was um if you want to
39:06
skew it to the left the skew would be negative okay um so yeah there we go um
39:11
you can apply custom classes as well and obviously uh another thing is we all love swatches right so um here is an
39:18
implementation of it as a Swatch okay um I have to ship a foundation 6 update so
39:24
it's not in sight Styles or the swatches stack yet um so but it will be uh if you really
39:30
want it right now um if you just go ahead and it is in the stacks Library just do show hidden stacks and if you
39:36
search for reflection um it's one of these um if
39:42
you show the detail it says oh this one is Swatch so it's the second one that will be the Swatch okay um and this one
39:50
here this is the old version I shipped an update to this one yesterday as well that made the uh the icon gray and added
39:57
version 2.7 in there so that we know that this is the older version um and the newer version is the colored icon um
40:04
I came over with this idea earlier this year I kind of like that right when I ship a new version of a product uh I'll
40:10
ship the old version with a a a black and white icon and then I'll add the version to the name so that we know that
40:16
that's kind of an older version um and that a newer version is available
40:22
okay um so yeah um that that's how you can get to the reflection swatch
40:28
and uh it behaves just like you would think any Swatch does right so you can you can have your selector up here then you have all the various reflection um
40:36
settings okay now there's no image settings here because um you're going apply this to an image right so you just
40:43
apply the reflection settings here um like here I have reflection grid IMG um
40:49
and there we go so now uh inside this grid I have a class of reflection grid
40:54
and it's going to Target every image inside of that okay and voila there we
41:01
go um yeah pretty cool um I think it's I think it's really awesome I like
41:10
it simple easy to use um and yeah I think it's quite elegant really uplifts
41:16
an oldie but goody
41:29
what about skewing the reflection on both sides left and right would look great yeah I saw your post about that um
41:35
I did do a little bit of research on that I'm not sure um that will be possible um I I did make some notes for
41:42
myself to look into that basically he wants it flared out this way um so yeah
41:47
I think I I do think it's interesting idea um it I'll look into that I I'll
41:52
play around um I I think we'll go with what we have for now but I I did log a
41:58
request to look into that um for the future but yeah the ability to pretty much you know um kind of like lay it
42:04
flat and have it coming like almost straight out at you I think um could be interesting so yes uh good idea Matias
42:11
I've logged it um sweet okay guys that's it uh look man
42:19
record time how many years has it been since I finished a live stream early
42:24
like I gave you guys 15 minutes back I I've only been talking for 45 minutes that's amazing man Pat myself on the
42:32
back on that one okay I I I reframe from going down all the rabbit holes and get
42:37
and and blowing your brains um so anyway thank you very much guys I hope you
42:43
enjoyed today hope you learned a little bit um I think the Version Control of project files is going to be a a cool
42:49
one um I hopefully you guys test it out and it works for you um I should oh I
42:55
should note this will work with stack pro project files just the same okay it's the same style of file um that uh
43:03
that we have with rapid Weaver um so yeah shouldn't be any issue at all um you could use it for rap Weaver and
43:09
stacks Pro projects uh when we're ready for that so cool guys take care have a
43:15
wonderful rest of your week hopefully you see some of you on Friday and go out there and make your websites great bye
43:20
guys