Sublime Text Editor Packages in Daily Development Tasks

In this article, we are going to discuss how the usage of Sublime text editor packages affects your development tasks. Many of us can write code on any text editor either pre-shipped with the operating system or downloaded from the Internet. We will begin by comparing the common text editors available nowadays; then we will explain how to install them and provide a list of the most popular packages and how to use them in your coding experience. Finally, we will discuss how the usage of Sublime text editor packages affects the daily development tasks of programmers.

Sublime Text Editor vs. RubyMine IDE

The most well-known editors or IDEs in ruby on rails development are TextMate, Sublime Text and RubyMine. This table demonstrates a comparison between Sublime Text Editor and RubyMine IDE (as TextMate product was discontinued):

Criteria Sublime Text RubyMine
Customizable YES PARTIALLY
Fuzzy Search YES NO
External Plugins YES (open source) LIMITED (JetBrains sources)
Booting Time Negligible (< 2s) Significant (> 30s)
Key Bindings Customizable Predefined sets
In-app Terminal Not present Built-in
Code Lint YES (External sources) Built-in
Notifications Not present Built-in
Price Free, License License only
Free OR USD $70 once and for all USD $ 199.00 /1st year, $ 159.00 /2nd year, $ 119.00 /3rd year onwards

Verdict:

We chose to use Sublime Text Editor for being highly customizable and because it provides the ability of fuzzy search where you type fragments of a folder and file name and it will suggest the best matching file lists. A significant number of external (3rd party) libraries or extensions to sublime can be installed to tailor it to your development needs.

Sublime Text
Sublime Text

Last but not least, it’s FREE version without any missing features 🙂

What Are Sublime Text Packages and What Are The Most Popular Ones

We will now discuss an overview on Sublime text packages and how to install them on your system.

Sublime text packages are external extensions for the text editor to add multiple features, themes and code style schemes and extend the default editor to cope with the developers needs and ease their life.

How to Install Sublime Package Control

In order to install the package control for Sublime, you need to do the following.

  1. Open the console of Sublime Text itself by clicking on CMD +`
  2. Then copy and paste the following:
     import urllib.request,os,hashlib;
     h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88';pf = 'Package Control.sublime-package';ipp = sublime.installed_packages_path();urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) );by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read();dh = hashlib.sha256(by).hexdigest();print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)   
    
  3. Restart sublime and viola! You can now install packages to your editor.

Here, we will discuss a number of sublime development packages that are used by most of the team members. The packages are categorized into several categories.

  • Category 1: Some packages that you need to install right away after installing Sublime.
  • Category 2: General Web Packages
  • Category 3: Specific Ruby on Rails packages.

Development packages you need to have

Here is a list of the need-to-have packages that will ease your development progress:

Packages Name Usage
BracketHighlighter provides the ability of highlighting the start and end of a code block
Clipboard Manager provides the ability of Copy & pasting many items and retrieve them from the generated copy and paste stack
Color Highlighter provides a color preview of with the color codes either rgba or hex next to the line number, mostly used in .(s)css files
ColorPicker provides advanced color picker either predefined colors, hex or rgba color codes
Emmet provides the ability of writing faster HTML codes using some snippets and abbreviations e.g. div.text-center > p.bold
Git provides the ability of extensive git control from sublime diff, blame, commit, etc…
GitGutter-edge highlights edited line numbers that were changed from the last commit in symbols
Gitignore provides gitignore templates predefined in a remote github repository to be used in your projects
Indent XML prettifies XML code syntax and indents it to increase readability
Local History enables local version control for files using timestamps
Pretty YAML indents YAML files for better readability
SideBarEnhancements provides more control on a project folder from inside of sublime editor e.g. new file, folder, renaming, etc…
Sublime-Text-2-BIDI a package to write bi-directional text in sublime, used mainly for RTL languages such as Arabic.
SublimeLinter lints many programming languages for errors such as ruby, java, etc…
TrailingSpaces removes trailsing spaces in any file, and it is better to be set to trim after save.

Web Packages

Packages Name Usage
Autoprefixer adds cross-browser CSS prefixes for a certain number of properties to ensure that all the properties behave the same across all modern web browsers
Bootstrap 3 Snippets provides most of Bootstrap styles as snippets to used directly in your code files
CSS Extended Completions provides CSS competitions for most, maybe all CSS properties and predefined values
jQuery provides autocompletion for JQuery functions and a brief description about the usage of each.

Ruby and Ruby on Rails packages

Packages Name Usage
Alignment eases the alignment of ruby syntax according to the style guide lines where all the = are aligned to the same column
BetterCoffeeScript adds CoffeeScript support to sublime including code completions and highlighting
Cucumber adds cucumber support for sublime including Gherkin syntax
Cucumber Step Finder eases the ability to search in cucumber Gherkin steps for navigation in all cucumber steps files
ERB Autocomplete eases the addition of ruby on rails HTMl templating language ERB to autocomplete the <%= %> tags
Haml adds the support of RubyHaml package to Sublime and speeds up the development with HAML using autocomplete and block comments
HTML2Haml converts HTML code to HAMl either whole file, selection or clipboard copied code.
SCSS provides better support for SASS (.scss) files in sublime editor

Impact on Development

The usage of Sublime packages has a significant positive impact on development tasks where it can do the following.

  • Increase the speed of developments
  • Ensure following of conventions and style guides for many programming languages
  • Ease the development flow with keyboard navigation without the use of a mouse/trackpad
  • Enter distraction-free environment of coding away from any notifications, emails or anything

After knowing why we chose sublime text, how to install external packages and what are the most popular packages used.

In the next episode, we will talk about configuring sublime text editor and some of the previously mentioned packages to facilitate your development life.

Introduction to RequireJS (Part 1)

RequireJS defines itself as a file and module loader. The first part is easy to understand; it can be used to load files but what about loading a module? What are modules anyway? Modules are containers encapsulating a piece of code that performs a particular function. A module should also have an interface that lets you access its functionality in a uniform manner.

Why should you care about modules?

Splitting an application into a group of modules is similar to dividing a book into chapters and sections. It makes it easier to read and find the parts you need. Writing modules at the beginning might seem like a lot of work and sometimes developers get confused and ask themselves “Do I really need to do this?” When your application grows, you start to appreciate the time you invested in decoupling your code and writing reusable modules that interact with each other.

What are the benefits of using modules?

Perhaps the greatest benefit of using modules is code reusability. Modules can be imported anywhere in an application to perform its task whenever it is needed without having to worry about duplicating the code. It also becomes easier to export a module to be able to use it in a different project because it is encapsulated. Generally speaking, it facilitates maintenance and readability of the code as well as making it more manageable and easier to test.

How I entered the world of modules loading

From my experience, I used to include all my scripts each in a separate script tag. It doesn’t matter how many scripts I am loading; they will be executed in the same order they are written. There isn’t any abstraction or anything that will add complexity, so why would I need a library to do what I can already do? My build process was taken care of concatenating and uglifying my files so what’s the problem with loading a single nice file?

I wasn’t convinced until I read a couple of discussions and a few questions began to arise in my mind especially when projects I work grew larger as follows:

  • Most of the plugins and the codes I write aren’t required to run on every page. Why would I load something huge like a WYSIWYG editor on a dashboard while the user won’t really need it at the moment?
  • Most of the time, it was difficult to debug something without checking many files to find where exactly is that function defined.

I decided to give RequireJS a try. To be honest, I fell in love with the sense of power it gave me with the conditional loading of the scripts I define. Errors became much easier to debug. I no longer have to care about the loading order of my scripts–things just work out themselves magically. I got rid of the serving-one-fat-file anti-pattern with the rise of HTTP/2. What I do now is ship small files that can be transferred in parallel. Focusing on splitting my code into modules helped me improve the work.

I started to see things from another perspective and, after using it for a while, I really had a hard time imagining developing anything without it. We will explore how to start using RequireJS in the upcoming article. See you soon!

To Infinity and Beyond

 

Arguably, one of the movies’ most famous catchwords, and despite the fact that my number 1 early-morning activity with my 3-year-old has recently been watching and reciting Toy Story at 7am on a weekend with one eye open and the other half-asleep, this post plays to a more serious note about an organization’s own journey of self-exploration…

2015 was a particularly interesting year for robusta particularly because, for a change, we rethought our strategy, structure and, believe it or not, our robustivity vision, too!

Lots of concerns have triggered such exercise. It was mostly about the pursuit of profitability, sustainability, scalability and where we see robusta in 5 years from now. It was quite regular of a discussion between the managing partners to question the scalability of robusta and if it’s ever a candidate for exceptional growth that fulfills ours and the team’s aspirations for humongous growth. Don’t get me wrong! robusta was doing quite well already but we’ve always seen robusta not as a boutique agency but rather a flagship empire and been questioning a lot the way to get there.

Inspired by Gallup’s Strengths Finder and our IGNITE Development Program designed and implemented by our good friends at Mirqah ( more on this in upcoming episodes), we decided to start our pursuit by identifying and playing to our organizational strengths.

Cutting a long story of several client meetings (more of disguised interviews), internal workshops and self-reflections, it was becoming clearer that our top 3 strengths were our solid development skills and portfolio, a strong and influential culture fueled by an exceptionally competent team and robusta’s brand equity, reputation and reach within diverse verticals. Our weaknesses have always been lack of clarity to what we aspire to become that translated into stretching ourselves too thin across several streams which eventually lead to subpar profitability.

Building on this understanding, we made some bold decisions of exiting some of our service offerings and accounts. We’ve completely abandoned Branding, Social Media, Microsoft-based technologies, and trivial/low potential tickets. The reasons why we stopped each are quite interesting and each deserves a blog post on its own. We naturally decided to focus on our leading services which are E-Commerce, Mobile, Websites and Web Apps.

We also turned around our perspective looking at our team and decided to get rid of the illusion of growth that comes with growing our headcount after figuring out this is, in most cases, nothing but a sign of lack of efficiency. Comes next naturally is an overpowering need to look after productivity and a sharply pruned work force that makes it easier to invest in our culture & human capital development.

Ironically, we’ve also figured out that there’s such a HUGE local market that we need to dominate first before crawling beyond borders. Last but not least, we’ve done what turned out to be a pretty good job standardizing and innovating our retainer-based project development/support packages.

The said resolutions automatically put us on track with total clarity on how to go about restructuring the organization to achieve what became our solid vision.

“To serve as a flagship of national economy and become one of the top listed EGX companies by 2030”

This also fits perfectly with our designated 4-fold mission towards our clients, our people, shareholders and the community.

Finally, what we’ve mostly learned the hard way is that although focus seems to be an obvious strategic recommendation for any organization, it takes a lot of wisdom and learning about your customers, competitors, team and, of course, yourself to really be able to tell what focus means and how it applies to your organization.