MacMost Now 849: Safari Snippet Editor

Safari 6 has some great tools for developers, including the Safari Snippet Editor. This tool allows you to write HTML code and see the results instantly. You can include tags as well as styles and scripts. It could be useful for those learning HTML or JavaScript, and for those starting a new HTML project.
You can also watch this video at YouTube (but with ads).
Video Transcript: Hi this is Gary with MacMost Now. On today's episode let's take a look at the Safari Snippet Editor.
The Snippet Editor is this cool tool inside of Safari 6 that's great for web site developers and Java Script programmers. 
So in Safari to get to the Snippet Editor the first thing you need to do is turn on the Developers Tools Menu. You do that by going to Safari Preferences and under Preferences go to the Advance tab here and click on Show Develop menu in menu bar. Then you get this Develop menu here. One of the things you can do is Show Snippet Editor.
This will bring up the Snippet Editor here. What the Snippet Editor basically does is that it allows you to type in HTML and then see the results below. 
So we can see there, no surprise, we type in HTML just some plain text and we see the text below. To see it really work we can apply a HTML tag and we can see in real time an update of what was below here. 
Not only can you use this to test basic HTML but you can also use it with style sheets. All you've got to do is use a style tag there and put your styles in here to test them out. Now we can see below I have this div tag here. I will assign the class and see the instant I'm finish typing that it's applied here below.
Then I can test things out and say change the style a little bit. You can see the instant results. Of course I have this Update after typing turned on. If I wanted to turn that off I could use the Update Now button instead. So I would change that and then hit Update Now. It could be a little more useful instead of seeing it change constantly especially as your changing several different things up here.
Now you can also use this to test Java Script. Of course you need to use the Script tag but you could put whatever you want in there and you can see as soon as I have some valid Java Script in here it will process it and put it out there.
You could use everything you would expect to use in Java Script. 
So it is a quick little programming environment for you. You can see here it will process loops, do everything that a normal web page will do. So you can essentially paste an entire web page of stuff with tags, style sheets, and of course Java Script in and it will process it and put it all below and then update it in real time as you make changes.
You can even use images tags here. There is an absolute path to the image since it is not local to the Snippet Editor which is just running on my computer and I could even use links here and the links will actually work. I can click on them and it will open up the web page.
Now anyone that has ever worked with CSS knows that it can take some time when you are starting a new layout on a page. But the Snippet Editor can help here. As you can see here I have arranged a couple of div tags here and I have set them to absolute positions. Now I can kind of adjust them. I can change the width a little bit here and you can see how it instantly reacts to that. You can change the height. It would be very quick and easy to set this up by just changing these values and seeing an immediate reaction and then when I get it right I can then use this in my style sheet.
In future episodes I will be taking a look at some of the other developer tools in Safari. You can see that Safari really has some great developer tools. In the past Firefox has really been the leader in this with lots of extensions for developers. Now Safari has lots of different stuff and since Safari really is the browser used on the iPad and on the iPhone it can be very useful to develop in Safari on the Mac using these tools.
Hope you found this useful. Until next time this is Gary with MacMost Now.Hi this is Gary with MacMost Now. On today's episode let's take a look at the Safari Snippet Editor.
The Snippet Editor is this cool tool inside of Safari 6 that's great for web site developers and Java Script programmers. 
So in Safari to get to the Snippet Editor the first thing you need to do is turn on the Developers Tools Menu. You do that by going to Safari Preferences and under Preferences go to the Advance tab here and click on Show Develop menu in menu bar. Then you get this Develop menu here. One of the things you can do is Show Snippet Editor.
This will bring up the Snippet Editor here. What the Snippet Editor basically does is that it allows you to type in HTML and then see the results below. 
So we can see there, no surprise, we type in HTML just some plain text and we see the text below. To see it really work we can apply a HTML tag and we can see in real time an update of what was below here. 
Not only can you use this to test basic HTML but you can also use it with style sheets. All you've got to do is use a style tag there and put your styles in here to test them out. Now we can see below I have this div tag here. I will assign the class and see the instant I'm finish typing that it's applied here below.
Then I can test things out and say change the style a little bit. You can see the instant results. Of course I have this Update after typing turned on. If I wanted to turn that off I could use the Update Now button instead. So I would change that and then hit Update Now. It could be a little more useful instead of seeing it change constantly especially as your changing several different things up here.
Now you can also use this to test Java Script. Of course you need to use the Script tag but you could put whatever you want in there and you can see as soon as I have some valid Java Script in here it will process it and put it out there.
You could use everything you would expect to use in Java Script. 
So it is a quick little programming environment for you. You can see here it will process loops, do everything that a normal web page will do. So you can essentially paste an entire web page of stuff with tags, style sheets, and of course Java Script in and it will process it and put it all below and then update it in real time as you make changes.
You can even use images tags here. There is an absolute path to the image since it is not local to the Snippet Editor which is just running on my computer and I could even use links here and the links will actually work. I can click on them and it will open up the web page.
Now anyone that has ever worked with CSS knows that it can take some time when you are starting a new layout on a page. But the Snippet Editor can help here. As you can see here I have arranged a couple of div tags here and I have set them to absolute positions. Now I can kind of adjust them. I can change the width a little bit here and you can see how it instantly reacts to that. You can change the height. It would be very quick and easy to set this up by just changing these values and seeing an immediate reaction and then when I get it right I can then use this in my style sheet.
In future episodes I will be taking a look at some of the other developer tools in Safari. You can see that Safari really has some great developer tools. In the past Firefox has really been the leader in this with lots of extensions for developers. Now Safari has lots of different stuff and since Safari really is the browser used on the iPad and on the iPhone it can be very useful to develop in Safari on the Mac using these tools.
Hope you found this useful. Until next time this is Gary with MacMost Now.
MacMost Now 849: Safari Snippet Editor

Comments: 2 Responses to “MacMost Now 849: Safari Snippet Editor”

Welcome to MacMost

Free Weekly Newsletter

MacMost Online Courses

Keyboard Shortcuts PDF

Connect with MacMost

MacMost Sections

Popular Tutorials

Information
