Sublime Text 3 Default Syntax Highlighting for File Types

TL;DR To set default syntax highlighting in Sublime Text 3, open a file with the extension you would like to set (scss, for example), then click:

View > Syntax > Open all with current extension as > CSS

Set default syntax highlighting in Sublime Text 3

Now any file with an SCSS extension will get CSS syntax highlighting (text coloring).

To change the syntax highlighting for just the current open file hit command + shift + P, type the language name and select from the list.

Set syntax highlighting in Sublime Text 3

If the syntax you need is not in the list (Dust, for example), you can install it. I’ll explain how in another post.

San Francisco offshore sailing – Drakes Bay and the Farallon Islands

I started sailing in July of last year (2014) at Tradewinds Sailing School and Club. Learning to sail on the San Francisco Bay has been amazing. It’s the New York City of sailing–if you can make it here, you can make it anywhere. :)

skip to slideshow | skip to full video 6 minute video

I’m ASA Bareboat Charter certified (ASA 104) and I also hold my Advanced Docking and Motoring endorsement (ASA 118). My next step is Coastal Navigation, then Advanced Coastal Cruising, Celestial Navigation and then finally Passage Making. Ultimately I’d like to sail across an ocean (a la “All Is Lost” with Robert Redford).

Most of my sailing is done on the San Francisco Bay. That is, behind the Golden Gate Bridge. Cross underneath the Golden Gate and you’re in the open ocean. Now, sailing within the gate can be extremely challenging, but crossing out into the open ocean presents a whole new set of challenges. On July 19th, 2015, for the first time, I set sail for the open sea.

IMG_0103

There were four of us on “Whale Song”, a 43′ Jenneau. Our float plan charted a path under the Golden Gate Bridge and North along the coast up to Drakes Bay. There we anchored, ate dinner and spent the night. The next morning after breakfast we put up the sails and headed West to the Farallon Islands, approximately 25nm West of San Francisco Bay.

The distance/duration from day two is a little off–I forgot to turn the track recording off when we docked so I recorded my drive home as well. 😀

I was sailing on the San Francisco Bay on May 08, 2015 when I got the news that my brother had passed away. This was my first time back on a boat since. Overall the trip was quite a success. We saw jelly fish, whales, sharks and the usual harbor porpoises and sea lions. We saw a sea lion violently tear apart a large fish, but didn’t get any video of that.

Previous Image
Next Image

info heading

info content


Looping HTML5 video with jQuery

Backstory

Before HTML5, browsers were not able to play video natively (that is, without the use of a plugin that must be installed and does not come with the browser). It has been common place to use Flash to deliver video content; typically with videos encoded in FLV format and played through some kind of SWF player. Although this serves its purpose, it’s still not native; users have to have the flash playback component installed in their browser to playback the content.

HTML5 introduced two new tags (among others); <video> and <audio>. These tags allow browsers to play back video/audio content natively; which also means that you have a lot more control over the content using JavaScript; for example, you can build a full featured video player using Javascript, whereas before this would have to be done in Flash.

This post will just focus on the loop attribute. I’ll be explaining browser support of video formats in another post soon.

Nuts & bolts

In HTML5 several attributes of the video tag are boolean (loop,  controls and autoplay for example). This means that their presence within the brackets sets the attribute to true. You do not need to set loop=”true”; I’ve also seen this marked up as loop=”loop”.

<video src="movie.mp4" type="video/mp4" id="myVideo" loop>
    <!-- anything here will appear in browsers that don't support <video> -->
</video>

Note: Notice I gave my video an ID of “myVideo”. Assigning an ID to an element like this makes it easier to refer to the element later. I’ll be using this ID momentarily.

While I typically would not recommend setting video content to loop (or even to autoplay, for that matter), there are situations in which I’ve had video in the background of a page; and in this case, I need it to loop.

What gets tricky about all of this is that not all browsers support the loop attribute right out of the box. Chrome and Safari support “loop” in the video tag, but Firefox doesn’t natively. The user has to download and install the “Media Loop” add-on (found here) for that attribute to work (since IE9 is the only Microsoft browser as of now to even support the tag and it’s still in beta, we’ll forget about IE for now). You cannot expect your users to install an add-on just to get the full experience on your site.

The work-around for this is to manually cause the video to loop. As I mentioned earlier, the native <video> tag allows us to control the playback of our videos with JavaScript. All we need to do is detect when the video is done playing, then start it over again. I’m going to use jQuery in this example (I use jQuery any chance I get. In case you aren’t familiar with it, I’ll be going in to more detail soon, but in the mean time you can read up on it here).

$("#myVideo").bind('ended', function(){
     this.play();
});

All we’re doing is binding a function to the “end” event of the element with the ID “myVideo”. When that event is triggered (i.e., when our video ends), we use this.play() to start it over again.

Be sure to always put your JavaScript at the bottom of your document. Any questions, comments, or corrections? Please let me know.

 Scroll to top