Brackets is a text editor/IDE specifically made for web development and built using JavaScript. It offers extensions that can be created by anyone, including ourselves. We can make extensions that help our own programming needs and publish them so that others can also take advantage of our effort.

You can install Brackets from . To view all of your extensions in their respective folder click on Help and then Show Extensions Folder (Help -> Show Extensions Folder). In the user folder, you can create your own folder with a new extension and it will be locally visible in your Brackets editor. After finishing it, you can add your extension for everyone to use in .

What will we be building

We are going to create an extension which shows as many gifs of cats and dogs as the users want to see.

Figure 1: Clicking on the black cat’s icon starts our extension

Figure 2: After clicking on the icon, a modal appears where users see a gif and can click to load as many new gifs as they want.

Building the extension

We create a package.json file which would contain information about our extension. In it, we enter the name, the title, description, homepage, version, author, license of the extension and we stipulate what kind of Brackets version is required to run the extension.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

{

“name”:“dimoffx.kitten-cat-gifs”,

“title”:“Kitten Cat Dog Gifs for Relaxation”,

“description”:“This extension adds an icon in the right menu that allows you to see as many cat and dog gifs as you want whenever coding becomes overwhelming”,

In it, we load our icon service by using the require function and passing the path to the file. ./ is used to pinpoint that we start building the path from the current directory (where the current file is)

1

variconService=require(‘./services/icon’),

Thereafter, we load the built-in Dialogs module using the brackets.getModule function.

1

Dialogs=brackets.getModule(‘widgets/Dialogs’),

Afterwards, we load our HTML view into a variable using require.

1

view=require(‘text!templates/modal.html’),

Now, we load another native module which we will use to load our custom stylesheets.

1

ExtensionUtils=brackets.getModule(‘utils/ExtensionUtils’),

We load our stylesheet using the ExtensionUtils built-in module that we already required:

1

ExtensionUtils.loadStyleSheet(module,‘styles/styles.css’);

We initialize our own iconService module.

1

iconService.init();

We use the custom click function of our iconService module and add a callback parameter that will open a built-in Brackets dialog with its contents being our HTML view (remember that we saved the contents of the HTML file in a variable)

1

2

3

4

5

iconService.click(function(){

Dialogs.showModalDialogUsingTemplate(view,true);

});

Our stylesheet just adds a background icon to the anchor which will be used in the Brackets menu to start our extension and adds a pointer cursor to our buttons.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

#kitten-btn {

content:“”;

cursor:pointer;

background:url(“../images/logo.png”);

width:40px;

}

.my–cats.btn{

cursor:pointer;

}

Our iconService’s init function that we called in the main file just adds an anchor to the Brackets toolbar menu.

1

2

3

4

5

6

7

8

9

10

11

functioninit(){

//var imagePath = config.path + ‘images/icon.png’;

icon=$(‘<a title=”Watch cats and relax” id=”kitten-btn”></a>’);

//icon.css(‘background’, ‘url(‘ + config.path + ‘images/icon.png)’);

icon.appendTo($(“#main-toolbar .buttons”));

}

Its click function just checks if the icon is already loaded to the menu, and if it is – sets up a click listener that executes whatever we pass to our custom click function. Finally, it exports those two functions so that whenever we require this module in another module, we would still be able to use the two functions.

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

functionclick(handler){

if(icon===null){

thrownewError(‘Icon is not initialized’);

}

icon.on(‘click’,handler);

}

exports.init=init;

exports.click=click;

});

The View

Our view just shows a modal with a close button, an image, and two buttons for loading new gifs. We add JavaScript which listens for click events and calls again the cat gif API that we are using. For a click on the load new dog button, we are just getting a random gif from around 150 gifs by passing a random number to the URI.

Ivan is a student of IT, a freelance web designer/developer and a tech writer. He deals with both front-end and back-end stuff. Whenever he is not in front of an Internet-enabled device he is probably reading a book or traveling. You can find more about him at: http://www.dimoff.biz. facebook, twitter