Transcript

00:00 then we're live okay we're recording now um sorry for being a little lackluster
00:08 so today we're gonna I got some really cool stuff to go over today some
00:14 interesting stuff I got a few requests to go over lightbox stack we released a new update so i'll just quickly take
00:21 5-10 minutes tops just to kind of show you that that new update then we're
00:27 going to go over some cool new browser testing and i know a lot of you probably know how to do browser testing I mean
00:33 it's not rocket science right but i'll show you some tricks tips and tricks
00:39 that I do for like testing how your website looks maybe on an iOS device an
00:44 iphone and ipad without actually having to have one okay I mean yeah I have one
00:50 I have an iphone I have my iPad right all right here but maybe you don't right
00:56 maybe you you don't have an iPad or maybe you have an eye in an iphone 3g and you want to know what it looks like
01:03 on an iphone 4 or you have an iphone 4 and you want to see what it looks like with people i have an iphone 3g right
01:09 other things internet explorer right how
01:15 can we test an Internet Explorer nicely on our mac and things of that nature so
01:21 we're going to go ahead and I'm going to start off really quickly uh with the
01:28 lightbox stack um another quick little plug here's my cool little video app
01:34 it's kind of coming along everybody I have some cool new little options here if you have multiple I sites you can
01:40 swap between I sites so now I'm over here hello okay um and then you can
01:47 apply some filters right so you can you can kind of you know make it look kind
01:52 of cool if we want to look you know pixely and stuff like that you know kind
01:57 of cool i am i am working on on getting this released into the mac app store as is right now I still have a bunch of new
02:04 features I want to add to it right you know there is full screen mode as well so you can actually you know see
02:10 yourself in full full screen mode which is cool okay but I mean you can obviously
02:17 of course resize the window to be you know whatever size you you ultimately want right so kind of cool that's my my
02:25 app it's currently called cam view I want to find kind of a catch your name
02:31 for it so if you have any ideas please uh yes they are quarks filters just some
02:37 core image stuff really simple stuff same kind of stuff you see in photo booth right um and then if you have a
02:46 cool name if you have any ideas about a cool name I would love to hear it okay
02:52 so i will show up in the Mac App Store eventually I'm hoping by if I could do
02:57 it by WWDC I i doubt that though i don't know how long the app review process takes and all that jazz but also another
03:05 side note i said this on wednesday and i said i say that last friday now that I'm
03:14 kind of doing you know this live web cast thing on on my website if you notice there is a new URL Joe work and
03:21 I'm net / live okay there is no longer rapidweaver alive it's just Joe or
03:26 cronuts / live so if you are on the rapidweaver live page um that that does
03:32 work right now but you know i recommend you you you remember and change your bookmarks or whatnot we are now on
03:38 jewelry from net / live and i'll probably be removing that the old link the old page pretty soon we had a couple
03:46 small little changes to my site if you notice here bring over my site um
03:53 interesting to see how if this causes a mirror effect because you're seeing the actual live feed you actually have a
03:59 tutorials tab now the tutorials tab is moved to the top here and then all these these web cast recordings will be there
04:07 okay so pretty interesting you are kind of seeing a mirror effect that's kind of
04:13 funny okay so a lightbox stack um Oh
04:19 rusty says he loves the RSS feed stack we did again we did release this this
04:24 free stack last week it's super cool it allows you to easily add little things like this like on this
04:32 page this isn't my blog page but yet I have my little RSS link on here and you
04:38 can easily add RSS links to any page you want okay and as you see you can add
04:43 multiple so i have to RSS feeds on this page and the way I did that is you just add in two of these RSS feed stacks on
04:50 your page okay so quick plug for the new free RSS feed stack it is free go ahead
04:57 and get it today and enjoy it okay um so right now we're going to I'm going to
05:03 jump over and just quickly go over the lightbox update that was released this
05:08 week okay it is now version two dot one
05:15 okay um and you know I I like this update actually you know I thought with
05:21 the version two um I didn't think I could make the lightbox tak any better to be honest with you I I was like man
05:29 this this stack is as good as it's going to get I really can't see it being any more streamlined okay but um you know a
05:37 user had a you know had an OP has it had actually had an issue with the with the stack IDs right um so I got had a
05:45 support case come in and um you know I give you in version 2 we have this
05:51 little hint right here so if you wanted to create a text link for your stack I
05:56 gave you the ID that lightbox generates okay for to launch a via textual link
06:03 cool right right no longer needed to do unique IDs and what not and if you
06:10 needed to do a text link i gave you the idea to do that right however okay um if
06:17 you're if you've been working with stacks long enough you've probably seen a syntax similar like this lease tax
06:24 underscore in underscore a number underscore page and then a number right I'm that's a common thing that kind of a
06:31 random generated number within stacks that it creates okay um so I was using
06:38 that and I was passing that on to the customer and on to you guys to be able to utilize and however the problem with that is and
06:48 it was brain fart on my on my side that that ID isn't guaranteed to be the same
06:54 all the time okay um so if i go ahead and let's say if we see this idea stacks
07:00 underscore in underscore six page 0 right and i kind of maybe move some
07:05 things around um okay let's say I I
07:12 saved my file I close it alright let's
07:17 open it again and oh there there we go
07:25 so i modified my page a little bit close the file reopened it and if you look
07:30 this this ID is now different okay it's no longer six underscore page 0 it's
07:36 three underscore page 0 so if i had created a text link to the previous ID
07:43 it would now be broken okay so um I
07:49 wanted to um you know try to simplify this the reason I i did this random
07:56 ideas because if you if you're not using a text link and you're just using the lightbox stack within itself this is
08:03 perfect because you you don't care what the ID as long as the stack knows what's its what its ID is we're golden right
08:10 however if you wanted to do a text link again this ID changes sorry from being a
08:17 broken record so what I've done is I added a I brought back the unique ID
08:23 field okay however what I did was the
08:28 default of the unique ID is this percent I d % okay which is a macro within
08:35 stacks to generate a random ID is not guarantee that that ID will say the same
08:41 but if you're just using a lightbox tak within itself so basically you're
08:46 putting your launcher image here you're putting your you know you know some text or you know whatever you want in here
08:53 okay you're golden okay but if you want to launch via a text of link or your own
09:00 external link somewhere okay you do have to change this okay and change it to you
09:05 know lightbox link okay what's cool is if you change this unique ID here you'll
09:11 notice that in edit mode we also redefine the actual you know link that
09:17 you need to put inside your your href okay the ID here so that's cool you know
09:25 I that pretty much solves that issue okay so for a majority cases if you're just using it within the lightbox stack
09:31 you don't really need to test this you know change this ID if you don't need to
09:36 touch it at all just leave it alone okay some other things we did with this
09:42 update you'll notice that there isn't a height setting reason being is we try to
09:50 dynamically adjust the height to be two to fit the content okay and I'll
09:57 probably release an update another update little soon to change the height algorithm calculations there are some
10:04 fringe test cases where height wasn't getting properly allocated so look
10:09 forward to another 2011 update that fixes the dynamic height but basically
10:15 you set your width of your lightbox and the height will be automatically generate generated okay of course as
10:21 before include lightbox scripts so if you have more than one lightbox stacked per page make sure that only one of
10:27 these has this check spot check box if this is checked you will have when you
10:33 click on a lightbox link you'll have multiple white boxes pop up okay and if
10:39 that happens it's because you have this checkbox checked on more more than once on your page okay um the next thing is
10:47 the compliant launcher um it is now turned on by default because I figured
10:53 most people are going to want to launch their light box from an image okay so
10:59 they have an image they want the user to click on that image and then you know that image will then display your
11:06 lightbox okay um that's what most people want okay however and by doing it this way
11:13 you're completely wc3 compliant blah blah blah blah blah hence why it's called the compliant launcher but if you
11:20 uncheck this you go back to kind of legacy mode which is you can put in
11:26 anything you want inside the this launcher area and wherever you click anywhere inside that area your lightbox
11:33 will be launched okay um this isn't wc3
11:38 compliant this code mostly because you have divs inside a link and so on and so
11:45 forth okay um but um it is nice it's a great feature I use it all the time
11:52 actually um but again that I think most people majority the time just want to
11:57 launch via an image so we've changed the compliant launcher so that when you you
12:03 now have an image well you don't actually have to provide the path to an image and then also you can edit your
12:09 caption to your in line so if you want to double click here you could just say my caption okay okay um if we want to
12:20 just go ahead and complete completely create a little a little stack here i'll
12:26 create throw in an image there and let's go ahead and throw in some text and i
12:35 don't know maybe a 2 columns thing here with a couple new icons from elixir okay
12:45 so here's my here's my launcher right go into here i have my caption with my
12:51 image i click on it and voila there's my lightbox okay really simple um I just
12:58 wanted to kind of go over the some of the new features the reasoning behind them oh also another thing you might
13:05 want to do is hide your launcher okay um actually if you go like that it'll even
13:11 hide it inside edit mode okay I'll look at that that makes you might be a bug
13:16 but basically if you hide launcher on it will completely not use your launch or
13:23 at all and it basically it's expecting that you're going to launch your lightbox from a text link somewhere
13:28 you're going to provide your own launcher somewhere okay so that's the
13:34 new lightbox stack any questions in the room before the before we move on yes so
13:44 the content the content that you add into the stack now let me turn my launcher back on okay the content that
13:52 you add into this area here determines the height but this setting inside the
13:57 settings HUD determines the width so let's say I wanted my width to be 500 pixels okay and then basically the stack
14:07 would automatically determine the height that you would need um you know for that
14:12 content so you define the width the stack will automatically determine the height for you okay yep and I these are
14:29 elixirs new icons if you haven't seen we'll do a small plug here's here's Adams new icon set whoops right here
14:37 okay Adams new icon set some beautiful new like ons in here um they go to 128
14:44 pixels so you should definitely check them out for twenty dollars these are fabulous for for websites for everything
14:52 you know I have a ton of atoms you know icons okay I have pretty much all of his
14:57 icon sets okay so and I do use a little snapper to keep track of all my icons
15:03 there's a small little tip for you one thing I do use little snapper for is to
15:09 organize all my icons it's pretty much I photo for icons for me right and screen
15:16 grabs I do use the first screen captures as well okay so let's go ahead and move
15:22 on let's see I had a look at the demo last night the
15:31 lightbox do not close when clicking outside the lightbox yes so with the
15:36 lightbox stack you do have to actually click on the close button to close it so
15:42 you know you can't click outside you click on the little close button and it does close it so yes you do have to
15:50 click the close button in order for it to close I'm currently working on a
15:55 completely rewritten lightbox tak the the JavaScript that's powers this
16:02 lightbox stack is let's just say I don't want to touch it so I'm completely
16:12 starting over from scratch using jquery this lightbox stack does not use jQuery
16:18 it uses script oculus and prototype so i
16:23 am i'm not a script oculus prototype guru so touching it I'm a little bit
16:30 scared to try to look with it so but I like this lightbox it has kind of a very
16:35 Apple feel to it in terms of the style of the lightbox it's nice and that the
16:42 background dynamically resizes it is an image background right but it does dynamically resize which is nice but I
16:50 do plan on releasing a completely new lightbox tak that's based off the light
16:58 boxes that you see when you launch screenshots on my product pages and we'll be seeing a new new stack from
17:05 that some point okay so let's go ahead and start looking at browser testing
17:13 okay so let's just let's just go ahead and and we have the our page pretty much set up already right and if you didn't
17:20 know within rapidweaver if you click on this little button here you can say preview okay and then you can preview it
17:27 your page directly in a browser okay so
17:34 you can say openness in Safari okay and of course it will go up and over here and and basically it opens my page
17:42 in safari okay now since Safari uses webkit so this rapidweaver it's pretty
17:47 much safaris going to be pretty much looked exactly what you see in in preview for the most part for
17:52 ninety-nine point nine percent of the time right what you see in Safari is what you'll see in preview okay so you
18:01 could do that for any browser right so it automatically finds browsers that are on your machine even some that aren't
18:07 really browsers like you can add stuff to Evernote and whatnot because Evernote registers itself as a browser and and
18:13 whatnot but for browser testing we're pretty much soon i want to do firefox for so i can easily now open up this
18:21 page in firefox for and see what it looks like okay so you know that's
18:27 definitely a nice thing to have and do you know quickly test your site see what
18:33 what it looks like in various browsers let's say we want to see what what this page looks like in opera okay and reopen
18:42 it an opera and there we go okay now if you notice we do have some issues here right if we if we see in Firefox look my
18:51 title is this which isn't what it was supposed to be it's supposed to kind of have this new font right so you're
18:58 supposed to use font face just like it does in here okay so um you know that's
19:03 that's an issue you know we'd have to go and look at our CSS for at font-face and and try to troubleshoot that if if we
19:10 cared whether or not it looked like that in Safari but as you see it doesn't look terrible in Firefox I mean but you know
19:16 it would be nice if we had a completely uniform feel okay um and you know any
19:22 other browser we have chrome as well right those are the kind of that the main browsers right you have chrome firefox safari okay least on the Mac
19:31 okay now i'm going to go over some more esoteric options that we have here go
19:38 ahead and quit these browsers okay and basically a lot of people of course
19:50 want to know what their site looks like on an iOS device okay they want to know what it looks like on your iPhone on
19:56 your iPad and for that okay there is a great tool called iOS simulator okay
20:05 basically you can open up any page you want an iOS simulator oops let's see if
20:15 we you might have to try that again
20:23 there we go okay so you have to load iOS simulator and then basically do the you
20:28 know do the preview again and you'll see that particular page within your iPhone
20:35 okay now how do you get this okay this
20:41 is a a free app that comes with Xcode okay xcode is Apple's of course
20:49 development tools and they used to be
20:54 completely free okay but recently Apple when they put Xcode on the App Store
21:00 charged 499 for it okay but for that 499
21:06 even if you're not planning on ever developing any sort of mac app okay
21:11 there's a lot of really great tools that ship with Xcode and iOS simulator is one
21:17 of them okay and I think iOS simulator is a fabulous app for for people who are
21:22 designing websites because they can simply go ahead and as you see have a nice little iphone interface that they
21:29 can completely interact with okay they can see what their website looks like on
21:35 an iphone okay they can even change the hardware so they can say i want a version of my iphone the device okay so
21:43 right now it's an iphone i want to change it to an ipad okay that looks
21:49 like i have to reload my preview here or
21:54 is it here it is ok so now here's what
21:59 the device looks like and you have full scroll you know quasi touch capabilities not exactly sure how you do zoom I've
22:09 never actually tried that how to zoom in on the iPad you can rotate you can
22:16 rotate it left right so you can see what your what your website looks in landscape mode on an iPad right don't
22:24 want to do a shape gesture I don't see a way of zooming there might be a way to
22:31 do that I don't know what if you could do no the zoom on on my trackpad doesn't
22:39 doesn't seem to work you can definitely scroll alright so basically you you click down and you know pull it pull it
22:47 and you can see that but again you can change it so we have ipad we can go to
22:52 iphone Retina display okay so here's here's the iphone Retina display okay
22:58 and again if we just want to look at this page there oh look there it loaded
23:03 it it reloaded the page so a really great tool I think you guys should
23:10 really look at buying again it's only five bucks for xcode and yeah there's a
23:17 buttload of stuff that you're probably never going to use but stuff like this iOS simulator are fabulous for for
23:26 testing your site okay so that has to do
23:31 with my ideas around iOS you know simulation and iOS you know checking out
23:37 your web site and whatnot inside the iOS again think it's really cool any
23:43 questions on this before I jump into internet explorer testing okay so yeah
23:53 if we just go to the the App Store app right you can go just type in Xcode okay
24:00 and you'll see it's right here okay it is 499 I believe okay but it does come
24:08 with a slew of other apps if you're if you're curious of what other apps are there or I'll go ahead and sell peruse
24:14 there's a few other apps that are actually pretty interesting for non apple for non you know application
24:21 developers so we go to developer application it installs everything under
24:27 developer it's then you have applications let's see utilities let's
24:36 start off with audio I haven't used any of those
24:42 see know some of those are some of these graphics tools are fun to play with but
24:48 they're nothing really all that useful nope utilities whereas I I OS simulator
24:55 I was similar my it's probably buried
25:04 somewhere let's see iOS simulator there
25:13 it goes so it's under developer platforms Wow okay so it's kind of
25:18 really really buried in there okay
25:24 applications when your iOS simulator but once you once you you know you install
25:30 xcode I believe it automatically registers iOS simulator as a browser so
25:38 that way when you're in rapidweaver you know you can easily go down to end here and say preview and you can select iOS
25:44 simulator right here so I don't really ever have to remember where where in the world the app is because that's pretty
25:51 much how I use it okay so that's that's cool some other tools actually our icon
25:59 composer is good if you need to create a you know icons file merge is a fabulous
26:06 tool to to do diffs between files right you know find the differences between
26:13 files merge those differences together a really great app for that actually
26:18 really really really great it's one of my favorites there are a lot of third-party apps out there but i tend to
26:26 actually merge changes together I think file merge from Apple is is pretty darn
26:31 good those are probably the two really the big ones that I think and those are
26:38 their iOS simulator and file merge I think the sleep x app is interesting
26:43 allows you to you know sleep your computer after a certain amount of time or something like that package maker if you wanted to actually create you know
26:51 install our packages and stuff like that but again there there are some useful
26:57 tools you know with in Xcode even if you're not a a developer okay so i
27:05 recommend that i get iOS simulator it's great way to you to preview your sites
27:11 ok let's jump ahead and now jump into some internet explorer Oh Tron Tron came
27:21 to the rescue I got to test this is sorry I'm going to have to go back into here so Tron says that if you alt left
27:29 click and drag for zooming and I let's
27:34 try it again I've never done that so alt oh look at that Tron is the man so alt
27:43 and then you can zoom is you seek it creates like two little fingers and you can zoom in zoom into the page and zoom
27:50 around and see how it works on your iOS device very cool thanks Tron that's awesome hey we have elixir joined us I I
27:59 did a small plug for your figure icons a little bit earlier Adam so excellent now
28:07 we're going to go into internet explorer testing and just a you know it would be
28:13 nice if you know there was a nice little preview Internet Explorer of course but IE doesn't work on Mac so there are a
28:21 couple options to get internet explorer on your Mac ok parallels is one I pros I
28:29 own both parallels and vmware fusion and I prefer fusion it's just I've used both
28:35 I think fusion has a nicer you I and whatnot so um i already have fusion
28:41 already started i have a windows 7 instance with ie9 here ok but let me
28:47 show you what I do so and actually I it was working and I must did something to
28:53 to break it so and I didn't have time to troubleshoot this before but for some
29:00 reason that's not working anymore and I think it's the permissions in my virtual machine so please bear with me I want to try to get this working again
29:06 because I did have it working just just last week I had things working so bear
29:14 with me I think it's just a sharing permission because if you saw when I tried to open up my site with from
29:21 rapidweaver inside ie I got a sharing error that day couldn't access the file
29:30 I'm wondering if I just if i share my whole hard drive if that'll do it make
29:40 it read-only okay i'm gonna give that a
29:46 shot again and this could be maybe just
29:54 an issue with with windows 7 I don't know oh I did it awesome okay um so I
30:06 had to change the settings on my virtual machine if you saw let me review what I just did so if you guys have vmware
30:13 fusion um basically go to your virtual machine settings okay and here's the
30:22 settings screen for it and go to sharing and make sure that you have your hard drives set to set to to be shared I said
30:30 it to read only just because I really don't need VMware you know windows writing anything to my hard drive okay
30:36 i'll give it reacts s but that's about it okay then the next thing you did I
30:43 did if you notice here I go a preview okay just I as I do in any other record
30:49 Weaver site and then since Internet Explorer isn't here if you notice i click other okay when i clicked other
30:55 you'll notice that i have an Internet Explorer app okay i'm going to go ahead
31:01 and actually show you how I created that okay it was just kind of a shortcut for
31:06 me so i can easily you know access internet explorer whenever I wanted okay
31:13 so what I did was go ahead and open up finder okay so from
31:20 within finder you're going to want to go and and navigate to your virtual machine ok so I'm going to go to downloads nut
31:27 downloads documents virtual machine and
31:32 then you find your virtual machine file okay so i have a few virtual machines on here this is the virtual machine that i
31:38 use on a regular basis okay so find your virtual machine right click and go show
31:44 package contents okay then inside there you'll see a folder called applications
31:50 okay and then if you make this little bit wider you'll see that you have an
31:55 Internet Explorer app ok so VMware goes
32:00 ahead and for every Windows app that you have installed in Windows it actually creates a mac app for you to launch it
32:08 okay so basically what i did i already did this earlier and go ahead and and
32:13 delete that so normally you'll see one okay what i do is then basically right
32:19 click on your internet explorer app and say make alias okay then you can call it
32:26 whatever you want i'm going to call it you know i'm just going to call it Internet Explorer app okay basically now
32:37 that you have internet explorer tap you can go ahead and drag that in your applications folder or whatever wherever
32:42 you want ok so it's notice that I've already had it in there so it's just
32:48 kind of ignored it okay so if we say here oh it actually just created a duplicate okay so now i have internet
32:57 explorer app okay and when I double-click on it opened over here on
33:02 the other desktop double click on it you'll see that opens internet explorer for me okay I don't need to worry about
33:09 you know opening up windows and booting it Oh another thing if you're curious I
33:15 am in a unity mode one of the reasons i like vmware fusion a little bit more is
33:21 that it has this thing called unity mode parallels has similar feature but i like
33:27 the way vmware doesn't better um and basically it takes all of your your windows windows and you know makes
33:35 them look you know native and you know how you know interact as if there were just windows on your mac okay so that's
33:43 how he created the Internet Explorer app okay and let me go ahead and open up my
33:49 rapidweaver file again and now that we created that app I can go preview other
33:55 okay and you know go to your Applications folder and find your inner to explore app that we just created
34:01 click open and it does open up your file
34:08 in internet explorer okay so you know this is a great way to really quickly
34:14 you know test stuff and open up in IE that way you don't have to you know publish your page to you know some
34:22 remote site or export it to a local folder and then try to move that to your
34:27 windows vm or you know open it from within your vm this is just a really seamless fluid way of quickly previewing
34:35 things in internet explorer so that they they look halfway decent okay um you
34:41 know Cee and then do your debugging okay now of course I have you know IE developer tools enabled and one thing
34:49 that's nice about ie9 they did add you know browser compatibility so if you
34:54 want to see what this site would look like in ie8 you know you can just switch the browser mode to ie8 and and you'll
35:02 easily see exactly what your site would look like in ie8 you know let's go to ie7 and there we go you can see what
35:09 your what the site would look like in IE 7 ok so if you see our caption here got
35:16 a little bit you know put off to the to the right are you know my title got a
35:21 little cut off up here on the top so i might want to look into that if i really wanted to make sure that IE 7 users had
35:29 a consistent look and feel for my particular page write a quick note about
35:35 browser modes I've noticed while they are nice they are
35:42 there is slight inconsistence ease okay then if someone had a actual ie7 browser
35:49 okay um but you know it is a convenience
35:55 thing here um you know the only other way to do that is if you have you know multiple VMs with one with ie7 one with
36:03 ie8 one with ie9 or something like that um you know you can definitely then do you know similar things you can maybe
36:09 create you know different internet explorer tops in your application 147 148 149 that opened up different from
36:17 different virtual machines okay um definitely possible um and you know you
36:24 could do it okay this is it just a quick and dirty way to do a quick snapshot of what thing what you know things will
36:31 possibly look like in previous versions of Internet Explorer ok any questions on
36:40 on what I just went over with ie9 browser testing and kind of how to make
36:46 that a little bit simpler for you cool well I'm not seeing any any more
36:53 questions so i'm going to call it a day guys um thank you very much for joining I hope you enjoyed today's overview some
37:02 of you probably hopefully you learned something new maybe a new little tip or trick um and I really appreciate it I
37:09 love doing this and I hope you love watching it so thank you very much everybody i hope you have a great
37:14 weekend and I'll talk to you later bye"}]