Tag Archive: gEdit

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.