Sublime Text and SublimeLinter

Sublime TextThis is a quick update about a text editor called Sublime Text and a plugin called SublimeLinter that lets you turn on linting and highlighting for over 15 different languages.

I had been going back and forth between Notepad (really), Notepad++ and Adobe Dreamweaver for coding and website development. I couldn’t stick with one editor because I wasn’t satisfied with ANY of them. Notepad is way too basic. Notepad++ is not bad but there is something about it that rubs me the wrong way. I think it’s actually more complex than I need it to be and I’ll probably never use half the functions it has. It’s pretty much the same thing with Dreamweaver, but lately I had been using it as my main editor just because I really like how it lets me organize projects instead of dealing with files individually.

Then I heard about Sublime Text and decided to try it out. First, let me just say that it is not free, but what you get from it is priceless in my opinion. My first impression was that it looked very nice, seemed user-friendly and made me feel like it did everything I needed it to do without overwhelming me with extra crap. When I found out that it had a sidebar where I could organize different projects I was sold. I started gradually finding out about other very useful features that none of the other editors I mentioned have. For example, split editing lets you edit multiple files side by side. I like to have my HTML file on the left column and my CSS file on the right column. I don’t know how I ever lived without that. Of course it has tabs as well; this is 2013 after all. It also lets you make multiple selections and edits simultaneously. And a bunch of other stuff guaranteed to increase productivity. Hey I’m not getting paid to write this so I’ll stop here! If you want to find out about all the features it has to offer, just check out their website: www.sublimetext.com

SublimeLinter

One thing that I noticed after installing Sublime Text was that the text in my SASS/SCSS files were not being color-coded. I had experienced the same thing with Notepad++ and DreamWeaver. Actually most text editors don’t support color-coding these file types out of the box. It’s usually necessary to download and install some kind of plugin to get this functionality, so I set out trying to find one for Sublime Text. It was then that I came across SublimeLinter. Coupled with node.js (more on that later) it turned out to provide yet another functionality  that I don’t know how I ever lived without: examining Javascript for syntactic discrepancies. It basically checks if the code you’ve written is valid and suggests fixes if it’s not. As I understand it, this is the main functionality of linters. In fact, although a vanilla install of SublimeLinter will provide a lot of capabilities that Sublime Text doesn’t provide out of the box, node.js is also required for color-coding SASS/SCSS files!

Sublime Text

Features of Sublime Text

This is the description of SublimeLinter found on their GitHub page:

SublimeLinter is a plugin that supports “lint” programs (known as “linters”). SublimeLinter highlights lines of code the linter deems to contain (potential) errors. It also supports highlighting special annotations (for example: TODO) so that they can be quickly located.

SublimeLinter has built in linters for the following languages:

  • C/C++ – lint via cppcheck
  • CoffeeScript – lint via coffee -s -l
  • CSS – lint via built-in csslint
  • Git Commit Messages – lint via built-in module based on A Note About Git Commit Messages.
  • Haml – syntax check via haml -c
  • HTML – lint via tidy (actually tidy for HTML5)
  • Java – lint via javac -Xlint
  • JavaScript – lint via built in jshintjslint, or the closure linter (gjslint) (if installed)
  • Lua – syntax check via luac
  • Objective-J – lint via built-in capp_lint
  • Perl – lint via Perl::Critic or syntax+deprecation check via perl -c
  • PHP – syntax check via php -l
  • Puppet – syntax check via puppet parser validate
  • Python – native, moderately-complete lint
  • Ruby – syntax check via ruby -wc
  • XML – lint via xmllint

Installation

The easiest way to install SublimeLinter is through Package Control:

  • Follow the instructions on this page and then restart Sublime Text.
  • From the menu bar choose Preferences -> Package Control.
  • Choose “Install Package” from the list that pops up.
  • Type SublimeLinter into the text box and it will install automatically.

SublimeLinter should technically be up and running now, but we’re not done yet. SublimeLinter is still not checking our Javascript for syntactic discrepancies and even our SASS/SCSS is not being color-coded. I recommend checking out the README from within Preferences -> Packages Settings -> SublimeLinter. The following section on Javascript-based linters is of special importance:

If you plan to edit files that use a JavaScript-based linter (JavaScript, CSS), your system
must have a JavaScript engine installed. Mac OS X comes with a preinstalled JavaScript engine called
JavaScriptCore, which is used if Node.js is not installed. On Windows, you **must** install the
JavaScript engine Node.js, which can be downloaded from [the Node.js site](http://nodejs.org/#download).

On Mac OS X, you **must** install Node.js if you plan to edit JavaScript or CSS files that
use non-ASCII characters in strings or comments, because JavaScriptCore is not Unicode-aware.

After installing Node.js, if the Node.js executable (“node” on Mac OS X, “node.exe” on Windows)
cannot be found by SublimeLinter, you may have to set the path to the executable in the
“sublimelinter_executable_map” setting. See the “Configuring” section below for info on
SublimeLinter settings.

node.js

After following these final instructions you should now be getting the full functionality out of Sublime Text and SublimeLinter. Nowadays I personally experience not only increased productivity and less frustration, but also more joy in working on my projects. It’s almost sublime!

Combining HTML, Javascript, and PHP

Surfing around today I came across the topic of combining different scripting languages in web design. Let’s keep this simple and talk only about HTML, Javascript, and PHP.

HTML, Javascript, and PHP:

  • HTML: not actually a scripting language, but a markup language. HTML is a client-side technology.
  • Javascript: a client-side scripting language.
  • PHP:server-side scripting language.

Client-side vs. server-side:

  • Client-side: the code you write is executed by the user’s web browser. That means if the user has Javascript disabled, for example, s/he won’t get that awesome Javascript experience you created.
  • Server-side: the code you write is executed by your server, which is probably in Utah or something, and you probably don’t have access to it. That means that if you have any PHP code on your page, it will work for all of your visitors as long as the server hosting your site has PHP installed. Most of them do, but if your code is not working maybe you should get in touch with your hosting provider. Server-side scripts are executed before they are sent to the client-side. Keep that in mind.

Alright, now that’s out of the way let’s get to the meat and potatoes of this!  You can actually create HTML (.htm, .html), Javascript (.js), and PHP (.php) files. Each one will of course support code written in its respective namesake, but some will also support other codes. So here’s another list for you, to make it easy (or maybe confuse you more):

  • HTML (.htm, .html) files: in here you can write both HTML and Javascript scripts, no problem! The user’s browser will read everything at the same time. To begin writing in Javascript, make sure to open the code with <script type=”text/javascript”> and close it with, you guessed it </script>. Normally you cannot have PHP code in an HTML file. There are ways if you google around, but if you know you’re gonna be using PHP code, it’s much better to do it in a .php file.
  • Javascript (.js) files: sorry, but you can only write Javascript code in here and if you open it with a browser it will just show you a bunch of code. So what’s it good for? Well, here you can write scripts that you want to use on multiple pages. Reference this file from the HTML or PHP file which actually contains all your content.
  • PHP  (.php) files: inside PHP files you can have it all! HTML, Javascript, and PHP, everything will work. In fact you can think of a .php file as a sort of beefed-up .html file. That is, if you’re using .php files as your main site files (where all the content is), it will work just like a .html file in regards to how you write your HTML and javascript: even though the extension is .php, that doesn’t mean you have to embed the HTML or anything like that. Just write your code as if it was a plain ol’ .html file. Again, Javascript code has to be inside the Javascript script tags. It is actually only if you wanted to use PHP that you would have to embed it first by using <?php in front of the code and ?> at the end. The cool thing about it is that you can place this PHP code anywhere, even inside HTML tags or within Javascript scripts, but always remember that PHP is server-side so it is executed before Javascript. That means by the time the Javascript comes around all it finds is the plain text resulting from the PHP execution.

Alright, let’s look at some examples of combining PHP, HTML, and Javascript:

PHP embeded in HTML (in a .php page)

<form>
      <?php $name = “Enter name”; ?>
      <input type=”text” value=”<?php echo $name ?>“>
</form>

The example above is written in a .php file. Everything in bold is PHP and everything else is plain HTML. The result will be an input box with “Enter name” pre-written into it.

PHP EMBEDED IN JAVASCRIPT (in a .php page)

<script type=”text/javascript”>
function bacon() {
alert(“This was written in Javascript”);
alert(“<?php echo “This was written in PHP”; ?>“);
}

bacon();
</script>

Again, in the example above the PHP is in bold. Everything else within the <script> tags is Javascript. The result will be two popups on page load: “This was written in Javascript”, followed by “This was written in PHP”.

So now you can see that PHP can be embeded anywhere within a PHP file. But be careful combining Javascript and PHP. Again, remember that since PHP is server-side it will be executed first. That means by the time the Javascript comes around all it finds is the plain text resulting from the PHP execution.

JAVASCRIPT EMBEDED IN PHP (in a .php page)

<?php
     echo ‘<script type=”text/javascript”>; alert(“hey”); </script>
?>

The example above shows how to embed Javascript within PHP. Again, the PHP code is in bold. To embed Javascript in HTML, we use echo and then insert everything inside quotes. I used single quotes here and then double quotes inside the Javascript code, wherever it was necessary. I could also switch those single and double quotes around if I wanted. If I wanted to embed HTML in PHP I would follow the same procedure:

HTML EMBED IN PHP (in a .php page)

<?php
     echo ‘<a href=”http://frugihoyi.wordpress.com/”>my website</a>‘;
?>

That would output “my website“. The PHP code was in bold.

And that’s about it. I’ve already explained above how to embed Javascript in an HTML page. It’s pretty straight forward and if you know Javascript, you should know that already. As opposed to PHP you cannot have Javascript code actually INSIDE of an HTML tag, like in our first example, but you can of course use Javascript commands like onClick and onHover. As for embedding HTML within Javascript code, I can give you a last example.

HTML EMBEDED IN JAVASCRIPT

<script type=”text/javascript”>
document.write(“<font color=’red’>textextext</font>”);
</script>

The above will of course output textextext in red.

Well this turned out much longer than I expected, but I hope it was informative. I’m not sure what the next topic will be, but maybe AJAX so stay tuned!