Tag Archive: gEdit

New Blog Title, New Logo

As you already saw, I changed the title for this blog from “Robby Chen Personal Blog” to “Ubuntu Web Coder “as well as the logo.

One reason for changing the blog title is because I’m going to stick to Ubuntu, specifically Lucid Lynx (10.04.1), since I depend on some PPAs to get the updates. Maverick Meerkat (10.10) just doesn’t work for me. I will wait until Natty Narwhal (11.04) is out and see. If this still won’t work for me, I will stay with 10.04.1 and wait for the next release… Anyway, you get the idea.

As most of you who read this blog in the past know, I used to write code in Netbeans until I discovered the hidden potential of gedit for being such a good IDE. That’s why I abandoned Netbeans and replaced with gedit in the new logo. And I renamed blog title specifically to “coder” because I would like to try writing the code in each post from now on.

Besides the gedit logo in the new logo, I have also included two groups of logos, GNU/Linux and PHP. The GNU/Linux logos include Linux penguin, Chrome OS, Android, and Open Source. The PHP logos include PHP, CakePHP, and WordPress. I also included just released HTML5 logo created by W3C. I regularly use these tools and talked and will continue to talk about them in this blog. That’s why I included them in the logo.

What do you think about the new logo, blog title, and background color?

Download WordPress and Other Source Code files Directly to your Server without download Locally using PHP copy function

Intro

When I tried to get the development environment working with Chrome OS (CR-48), I thought since Chrome OS is primary working for the cloud, why am I downloading, editing, and testing the website files locally? I found out that my hosting provider, iPage, offers a file manager and a basic text editor to manage and edit my PHP files, and since I use gEdit as my main code editor, I’m pretty comfortable with the text editor.

Basic code editor

The basic code editor available in the control panel

I shortly found some useful file operation functions on the official PHP document, one of them is copy. According to its documentation, the source and destination can both be URLs since 4.3.0. This means that I can download the code from another website directly to my server using the server resources. I wrote a test page to test this function and it worked without problem.

The Code

<section id='fileDownloader'>
 <article id='urlForm'>
  <form id='url' name='url' method='post' action=''>
   <label for='urlInput'>The file to be downloaded (URL): </label>
   <input type='text' name='urlInput' id='urlInput' placeholder='URL' size='60' autofocus value="<?=($_POST['submit'])?$_POST['urlInput']:""?>" />
   <br />
   <input type='submit' value='Download' name='submit' />
  </form>
 </article>
 <?php if ($_POST['submit']): ?>
 <article id='downloadStatus'>
  <?php
  if (empty($_POST['urlInput'])): die("Please enter a valid download URL"); endif;
  $path = explode("/", $_POST['urlInput']);
  $fileName = $path[sizeof($path) - 1];
  ?>
  <?php if (file_exists($fileName)): ?>
  This file already <a href="<?=$fileName?>" title="Download file from this server">downloaded</a>.
  <?php elseif (!copy($_POST['urlInput'], $fileName)): ?>
  Download failed. Make sure that the URL is correct.
  <?php else: ?>
  Download completed. You have the option to <a href="<?=$fileName?>" title="Download from this server">download this downloaded file</a> or <a href="<?=$_POST['urlInput']?>" title="Download from the original server">download the original file here</a>.
  <?php endif; ?>
 </article>
 <?php endif; ?>
</section>

Note that I’m just staring to learn HTML5, so I can’t guarantee the above syntax is correct.

Questions

If you have any questions regarding this script, leave a comment below. And please don’t spam my server when testing on the test page, If you want to test it on your localhost, you can download the source code here.

Using gEdit to write CSS3

Introduction

Since I discovered gEdit has a few useful plugins and wrote about some of them, I have continued to use it as a main IDE. Come to think of it, I almost never used Netbeans which was my favorite editor until I discovered the power of gEdit. In this post I’m going to talk about use one of the gEdit plugins that come with gedit-plugins package – Snippets – to make writing CSS3 code easier.

The snippets plugin lets you define a keyboard string to be typed, then press the Tab key, and the code assigned to that keyboard string would replace this string. It’s great for repeatable code like HTML and CSS. It also has a kind of template markup which defines where the cursor would be focused on. Thankfully, it’s very easier to learn if you have little programming knowledge.

Steps

The following is the best example I can think of explaining the complete markup language and introduce CSS3 code at the same time (First, make sure the gedit-plugins package is installed, you can install it by execute “sudo aptitude install gedit-plugins” on Ubuntu):

  1. Open gEdit (If you don’t know where to open, it’s in the Applications -> Accessories menu)
  2. Make sure the Snippets plugin is enabled: Open Edit -> Preferences -> Plugins, scroll to the very bottom, and select Snippets.
  3. After it’s enabled, open Tools -> Manage Snippets and click to expand the CSS sub-menu. Or, you could create a CSS stylesheet, open Manage Snippets, and it will expand the CSS sub-menu automatically.
  4. Click Create New Snippet button at the top left of the Help button and type the descriptive name for the code snippet you are creating. For example, I named it transform since it will include CSS transform code.
  5. Click the right text box and type the following code (it will be explained later):
    transform: ${1:[scale,rotate,skew]}(${2:degrees}deg);
    -moz-transform: $1($2deg);
    -webkit-transform: $1($2deg);
    $0
    
  6. Click on the Tab Trigger field and type the keyboard string you want to assign to. For example, I assigned it to transform.
  7. Close the Snippets Manager window and you are ready to write CSS transform property.

Explanation

Below I will explain the code in the step 5 above. But first, for those of you new to CSS3, here is an example for the transform property:

transform: skew(-40deg);

Now for the explanation:

The dollar sign ($) followed by a number defines a field which it will be focused with the Tab key.

If you want to predefine a field, you need enclose the predefined value with brackets ({..}) along with the number followed by a colon. For example, ${1:predefined value}.

If you rather want to choose a word from a list of predefined words, you need to add these words after the colon, separate each word with commas, and enclose the list with square brackets. For example, ${1:[val1,val2,val3,val4]}. Once you focused the field with the list of words, it will provide a drop down menu with the list of words for you to choose from.

In the case of -moz and -webkit, you just need to add the corresponding fields  $1 and $2 to the appropriate locations in order for the repetitive code to work. The plugin will automatically fill out the rest as you type the value in the first occurrence of the field. For example, as you type the field ${1:predefined value}, it will fill out $1 in the rest of the document.

Finally, $0 represents the end of the Tab sequence, meaning that it will return to the original tab function.

Also note that in order to use the regular dollar sign ($) within the snippets, you need to escape it using backslash ().

For more information on how to write the template markup for the plugin, refer to the official documentation on gEdit website.

How do you creatively use the Snippets plugin to reduce code repetition? Please share them the comments section below.

Some Useful gEdit Plugins for Developers: Part Three – Third-Party Plugins (2)

Introduction

In the last post, I listed few of the third-party plugins from the gEdit plugins page that are useful for developers. This post I’m going to list some more useful third-party plugins for development. Here is the list of previous posts in this series:

  1. Part One – Default Plugins and gedit-plugins
  2. Part Two – Third-Party Plugins (1)

The List

  • Focus Autosave (http://github.com/kassoulet/gedit-focus-autosave)
    Once this plugin is enabled, the opened documents/tabs will save automatically when switching to another window. It is very useful for testing the just written code in the web browser. What I like this plugin is that it saves all the opened documents/tabs instead of save only the current document when using the auto save feature in the default gEdit preferences.
  • Line-Spacing (http://users.tkk.fi/~otsaloma/gedit)
    When enabling this plugin, click the Configure Plugin button to set line height in pixels between each line. The plugin could be used for reading the source code by making the lines easier to read.
  • Macro (http://code.google.com/p/gedit-macro-plugin)
    This plugin reduces the code repetition by automatically enter key strokes using macro. It even has a 64-bit version. However, the plugin could store only one macro. This means that it could only store one repeatable task at a time.
  • Pair char autocompletion (http://code.google.com/p/gedit-pair-char-autocomplete/)
    This plugin gives gEdit the ability to add and override the closing brackets and quotes after typing these opening operators. It’s even better compare to the NetBeans editor. The plugin also supports ` operator which NetBeans doesn’t support. This operator is normally used within SQL statements. Including this operator, the plugin also supports the following: (), [], {}, “”, ”, and “. There is full documentation on its Google Code project page.
  • Right Pane (https://sourceforge.net/projects/gedit-rightpane/)
    This plugin adds another pane to the right of the gEdit window. After click the Right Side Pane from the View menu for the first time, the manage window would appear allows you to manage left and right pane allocation. After the first time, this window can be accessed through View -> Manage Left & Right Panes or press Ctrl+F10. This is useful for opening two panes at the same time like Eclipse and NetBeans editors.
  • Class Browser (http://www.stambouliote.de/projects/gedit_plugins.html)
    As the name suggests, this plugin lists the variables, functions, and classes for the current document to the Side Pane for easier navigation. However, it is not on-demand, meaning that the document needs to be saved in order to trigger the plugin to refresh to the latest version. It requires to install the ctags in order to use this plugin which is very easy. After the ctags was downloaded, just execute ./configure, make, and sudo make install to install ctags to the system. After that, restart gEdit in order to completely activate plugin.

Conclusion

These are some gEdit plugins which I think are useful to the developers. All of these plugins are from the official gEdit website (http://live.gnome.org/Gedit/Plugins). I believe that there are gEdit plugins out there other than this page. If you found additional plugins on other websites, please share them in the comments below.

Some Useful gEdit Plugins for Developers: Part Two – Third-Party Plugins (1)

Introduction

In part 1, I listed some useful development plugins in the default gEdit installation and the gedit-plugins. In this post, I will list the first batch of useful third-party plugins for developers from the third party gEdit plugins list (http://live.gnome.org/Gedit/Plugins).

The List

  • Advanced Find/Replace (http://code.google.com/p/advanced-find/)
    This plugin can search or replace specified characters whether in the current document, opened documents, or selected directory. The search results will be outputted to the Bottom Pane after a search is performed. It also highlights the search results in the document. It is useful to find a specified function or class within a project/directory.
  • AutoComplete (https://github.com/nagaozen/gedit-plugin-autocomplete/)
    This plugin suggests words that exists in the opened documents as you type. According to its website, I think it also suggests custom libraries although I was not tested it yet. It would save me lots of time to retype the function name.
  • Session Autosave (http://sourceforge.net/projects/geditautosaves/)
    Once this plugin is enabled, it will save the current opened tabs/documents on exit and reopen them when gEdit started next time. The feature is the exactly the same with NetBeans default feature for opening up last opened documents to continue editing them. However, I noticed that it only saves opened documents. This means that it will open the previously closed documents when gEdit started. The solution is to select Tools -> Session Save to refresh the session.

To Be Continued …

These are just a couple of plugins I tested. In the next post, I will list some more plugins useful for programming development. All the plugins mentioned in this post and the upcoming posts are available on the gEdit plugin page (http://live.gnome.org/Gedit/Plugins).

Do you have any gEdit plugins that does not list on the gEdit plugin page? Please share them in the comments below.

Some Useful gEdit Plugins for Developers: Part One – Default Plugins and gedit-plugins

Introduction

I recently found out that gEdit has some wonderful plugins that useful as an IDE and decided to search for the additional third-party plugins which work well for my development environment. This part is focused on the default installed plugins and gedit-plugins package (http://live.gnome.org/GeditPlugins) which is available in the repos of most distros. The next one (or two) part(s) will be focused on the third-party plugins (http://live.gnome.org/Gedit/Plugins).

The List

  • Code Comment
    This plugin is useful when commenting out part of the code for testing or other purpose. To comment or uncomment a block of code, select them and press Ctrl+M to comment and Shift+Ctrl+M to uncomment.
  • Color Picker
    This plugin is extremely useful to me because I always had issue with color assignment when using NetBeans and Bluefish since they don’t have an easy way to access color palette when writing CSS. To use the color picker, place the cursor where the color code will be placed, and then select Tools -> Pick Color to choose a color from the color palette.
  • Embedded Terminal
    This plugin shows an embedded terminal at the bottom panel. To see the bottom panel, select View -> Bottom Panel or press Ctrl+F9. This terminal is useful when writing a programming language such as C and want to compile and test the code without leaving the editor.
  • External Tools
    This plugin can be set up to work with external commands within the editor. It comes with some default commands and can be used as templates to add additional commands. To manage commands, select Tools -> Manage External Tools. The produced output would normally appear in the Shell Output tab at the Bottom Panel. However, it can be customized in the Manage External Tools window. If you don’t know how to write commands, here is the list of pre-made commands from the official gedit website (http://live.gnome.org/Gedit/ExternalToolsPluginCommands).
  • File Browser Pane
    This plugin adds a File Browser tab to the Side Panel. If the Side Panel is not open, select View->Side Panel or press F9 to open it. It could be useful when working on a project with multiple files or just browse through the folder and open the files without leaving the editor.
  • Snippets
    This plugin adds a menu item named Manage Snippets in the Tools menu. When creating a document and saved as specified format or change the highlight mode from the View menu, the snippets shortcut is activated for that format. When entered a shortcut and press Tab, the corresponding code defined in the snippets will be expanded and can be edited in the appropriate places. Press Tab again when finished editing to complete the statement.  Note that you can download additional snippets from the official gedit website (http://live.gnome.org/Gedit/SnippetsPluginsCodeSnippets).
  • Spell Checker
    This plugin adds spell checking feature similar to the spell checking in the Word Processor. After the plugin is enabled, the Autocheck spelling can be enabled from the Tools menu to check the spelling for the current documents automatically. A red line will appear below the incorrect word. Right-click the word and hover over the Spelling Suggestions to see the suggested words to be corrected.
  • Tag list
    Once this plugin is enabled, the tag list tab will be added to the Side Panel. It is useful for reference the appropriate tags and for adding the special characters which are hard to remember. The tag can be added to the current document by double-clicking the appropriate tag.