Transcript

00:01 hey guys German here and in this video
00:04 I'm going to do a full-blown demo of the
00:08 new portal stack so the portal stack is
00:11 actually super easy to use
00:14 what it does is super complex and as the
00:18 old adage says making something simple
00:21 is not easy right so portal is super
00:24 simple to use but it is anything but
00:26 simple so what does portal do for us
00:30 right
00:31 you've probably checked out the sales
00:32 video by now but just a quick overview
00:35 portal allows us to basically use stacks
00:40 partials but on the server right so
00:43 first I'll let me say that hopefully
00:45 you've been using rap Weaver for a while
00:47 and you've already used and loved stacks
00:50 partials if you do not know what a
00:53 stacks partial is please stop what
00:55 you're doing don't look at the stack any
00:58 longer go look at what partials can do
01:01 and learn how to really leverage them
01:03 okay they're really important for the
01:05 wrapper workflow and for stacks
01:07 um they're very powerful and you should
01:09 really be using partials to make your
01:12 websites better and easier to maintain
01:15 so chances are if you're if you have a
01:18 large website what you're doing is you
01:20 have your footer inside of a partial
01:22 that's a common one right because
01:23 chances are your footer across your
01:25 entire site is gonna be the same right
01:27 now if you are going to want to update
01:31 your footer you just change the partial
01:33 and what stacks does is it updates the
01:35 entire website for you and so you only
01:38 have to make the change once you don't
01:39 have to go to every single page and make
01:41 changes brilliant but for large websites
01:45 you probably notice that you have to
01:47 reach up load pretty much the entire
01:48 website all over again just for one
01:51 change in your footer partial now for
01:55 some people that can take a very long
01:57 time and so this is pretty the primary
02:01 use case of why I created portal okay it
02:04 allows us to basically have server side
02:08 partials so what happens is let's say I
02:12 have a single footer page okay then I
02:16 it's slightly different right you
02:17 include with a portal stack you import
02:20 it into all your various pages and if
02:23 you publish that one footer page
02:25 it basically is included on all the
02:28 other pages on the server so in in the
02:31 footer scenario you just simply update
02:34 the footer page publish that to your
02:37 server and all of the pages that import
02:39 it will magically be updated immediately
02:42 right very cool it's very powerful and
02:45 there's some other side show you some
02:47 really nice side benefits of this as
02:48 well because essentially what Stax does
02:53 okay when we create a Stax page is its
02:58 bundling all this CSS and JavaScript for
03:00 us for the entire page and then
03:02 publishing that it's very nice it is an
03:04 amazing feat it's great now a benefit of
03:09 having of using portal is basically
03:12 let's take for example our footer again
03:15 when we create a page for our footer
03:18 that we can then import into other pages
03:20 Stax is creating its own JavaScript and
03:24 CSS files just for that footer area and
03:27 publishing those CSS and JavaScript
03:29 files to the server separately now when
03:33 we import this footer into all of our
03:35 other pages what's happening is instead
03:38 of the the JavaScript and CSS for that
03:40 footer beam inside of the page specific
03:43 JavaScript right it's gonna import the
03:46 same exact JavaScript in CSS code from
03:49 the footer page why is that powerful you
03:52 may ask well because if you're including
03:54 this footer and all your pages that
03:57 JavaScript in CSS is gonna be cached by
04:00 the browser and that essentially means
04:03 that it's gonna be subsequent page views
04:06 are gonna be a lot faster because it
04:08 doesn't need to download that CSS and
04:10 JavaScript again right and it's not just
04:13 for javascript in CSS it also includes
04:16 images that are on the page as well
04:17 which is really cool so you may not know
04:21 but if you include an image inside of a
04:24 Hershel that same image actually isn't
04:28 referenced many times right it's not
04:32 referenced one image isn't referenced
04:34 it's not like warehousing essentially if
04:36 you have a partial that's loaded on a
04:38 hundred pages that's a hundred different
04:41 images on your site
04:44 but with portal when you when you import
04:47 with portal you're gonna be referencing
04:49 the one central image that is stored
04:51 inside portal so again we get to benefit
04:55 from browser caching because that same
04:57 image is then gonna be referenced on all
04:59 the pages so as you see not only can
05:02 portal help us with publishing time and
05:05 maybe optimizing our workflows but it
05:08 will also make our websites faster
05:10 because we can leverage browser caching
05:12 our websites up into smaller pieces and
05:16 then including them throughout many
05:18 pages so I hope that is a really good
05:22 overview of what portal can do for you
05:24 and again if you haven't used partials
05:26 yet please stop what you're doing and go
05:29 learn partials and use those before you
05:32 try to tackle something like portal okay
05:34 so without further ado I'm gonna we're
05:37 gonna jump on in and do a quick demo of
05:39 portal like I said it's super easy to
05:42 use
05:43 and I'm really excited to see what you
05:45 can do with this and how it benefits
05:46 your websites so here is the portal demo
05:50 file that ships with the portal stacks
05:52 and theme now there's three components
05:55 to portal okay you'll notice if you in
05:58 your Stax library there are two
06:00 different stacks there's portal in and
06:02 portal out okay now there's also a
06:07 portal theme okay now this is a very
06:09 important aspect of portal okay so to
06:13 start off with we're gonna start with
06:15 the portal in Page essentially what this
06:17 page is this is the stuff that we're
06:19 gonna want to import into another page
06:21 right so this could be the thing like
06:23 your footer like we were talking about
06:24 earlier as a good example is a footer
06:27 right is this is going to be the content
06:29 that we're gonna import into other pages
06:31 so you have to have the portal in stack
06:34 on the page and another important aspect
06:37 is you have to set it is very important
06:40 as it says right here in the portal in
06:41 stack you must set the page to use the
06:44 portal theme okay so matter no matter
06:47 what theme you're using inside your
06:49 project this page you go into the theme
06:52 settings and you set it to use a page
06:55 specific theme and set that to be poor
06:58 okay so here's an important concept to
07:01 kind of help you remember
07:02 what's portal in and what's portal out
07:04 okay think of the portal theme has the
07:08 actual portal okay we have the portal in
07:12 stack which stuffs pages into the portal
07:16 we then have the portal out stack that
07:19 pulls stuff out of the portal right
07:21 portal in puts content in portal out
07:25 takes content out and displays it on the
07:28 page that kind of makes sense hopefully
07:31 so let's continue on with the day so
07:34 hopefully that made sense here we got
07:35 our portal in stack and we set our page
07:39 theme to use the portal theme now this
07:41 just has some simple content right some
07:43 text and image and some headers right
07:45 now now portal works with any theme but
07:49 I just want to give a quick note to
07:51 foundation users that you do not want to
07:54 add a site styles to this page okay
07:56 because basically what you're gonna want
07:59 to make sure that site styles is on the
08:00 page that you import this content into
08:03 via the portal out stack right so this
08:06 page should just be purely the content
08:09 that you want to import don't have any
08:11 site styles or font Pro or any other
08:13 stacks like that right now if you are
08:15 using foundation I did add a nice little
08:18 edit mode gift in here for you so that
08:20 all the foundation stacks will kind of
08:23 work properly and be themed properly at
08:25 least you won't get all your color
08:27 styles that you have from site Styles
08:28 beliefs you'll have everything will
08:30 still work properly inside edit mode
08:33 okay so that's a nice little gift for
08:35 foundation users but again portal will
08:37 work with any theme so if we jump over
08:40 to the portal out page um this is
08:43 basically where we are going to import
08:46 that content into it right so here I
08:50 have some local page content and here I
08:52 have the portal out stack essentially
08:55 all we need to do in the portal out
08:57 settings is click on the page and then
09:00 we're going to set the link and then
09:01 basically we're going to navigate to the
09:02 page inside rapidweaver
09:04 and say set link and that's it right so
09:07 you're going to point the portal out
09:09 stack to where the portal
09:12 in Paige is okay or the page that you
09:14 want to import and when you publish this
09:16 page it will work 100% um you know once
09:20 you published okay now you'll notice
09:22 that there is a total CMS setting this
09:25 does require that you have total CMS -
09:28 as of this recording total CMS - has not
09:31 been released so you will not be able to
09:33 use that setting until I've released
09:34 total CMS - and more on how all of that
09:37 works when the time comes so we said
09:41 that portal does all of its includes on
09:43 the server side however we can get
09:46 things to work inside rapidweaver okay
09:50 and let's just show you I'm just gonna
09:52 show you how it doesn't work first so if
09:54 I preview this portal out page we'll see
09:58 that magically where this import content
10:01 it's blank
10:02 like what in the world I was expecting
10:06 an import to happen well because the way
10:09 rapid Ivar works essentially is wrapped
10:11 Weaver cashes content and because I've
10:13 never previewed this portal in page
10:14 right so if I preview this portal in
10:17 page okay so here I've previewed this
10:20 page now if I go ahead and go to the
10:25 portal out page if I preview this now
10:27 we'll see that the portal in content now
10:30 works okay so it does work in Rev Weaver
10:34 as long as you preview the portal in
10:36 page first okay so a small little caveat
10:40 there if you are previewing a page and
10:43 you don't see the content that you were
10:44 expecting just make sure that you
10:46 preview that page inside rapidweaver and
10:50 then go back to your portal out page and
10:52 it should work just fine so that about
10:55 does it as you see portal is really easy
10:57 to use there's essentially one setting
10:59 to get all of it working right there's a
11:01 little bit of work you got to set the
11:02 page specific theme on the portal in
11:04 page and then on the portal out page you
11:07 just select the page and you're done
11:09 right there's a couple caveats with
11:11 giving it to preview properly wrap
11:12 Weaver but it's not rocket science there
11:14 okay now what will work inside portal so
11:19 I have using been using portal on Weaver
11:22 space in the actual Weaver space website
11:25 since launch and all of the internal
11:27 demos on the product pages are all
11:29 imported via portal that's important
11:33 because it means that all of my stacks
11:35 every single one of them works really
11:38 really well inside portal so that's
11:40 hundreds of stacks now that work
11:42 perfectly well inside portal now I
11:45 haven't tested every stack out there
11:46 obviously okay and there is probably
11:49 there may be some conflicts out there
11:50 I'm sure that there are um so if you're
11:54 trying something really crazy like a
11:56 don't try to import a portal in a portal
11:59 I haven't even tested that um if it
12:02 works you're nuts
12:05 but um you know keep it simple okay just
12:10 you know build what you need and import
12:12 it keep things like I've tested things
12:14 like you know complex sliders like
12:15 moving box they seem to all work very
12:17 well now in portal it's taken me a long
12:19 time to get all that working but it
12:21 works pretty well I'm really excited
12:23 about it but if you if you hit some
12:26 complex let me know probably publish to
12:29 a server you know and give me the URL
12:31 and I can try to figure something out or
12:34 you know I can work with the other
12:36 developer to see if we can get something
12:37 working but I can't guarantee that
12:39 everything will work right but like I
12:43 said all of my products work well in it
12:45 and that's a really large set of stacks
12:48 so hopefully everything works works
12:52 really well for you and if you have any
12:54 issues let me know and I can't wait to
12:56 see it I hope you enjoy portal I hope it
12:59 helps you become a better web designer
13:00 improve your workflows and obviously
13:03 faster websites because we all love that
13:05 so we will talk to you later and I hope
13:08 you enjoy portal bye
13:20 you"}]