Categories
Articles

PlantUML in Spacemacs

This article is the first in the series of articles about including and using PlantUML in Spacemacs to do some amazing things. In this article we will see how to setup PlantUML in Spacemacs and use it. In the upcoming posts we will see some advanced usage of PlantUML and some awesome stuff you can do with it.

Spacemacs

Spacemacs is a community-driven Emacs distribution. It is a new way to experience Emacs with a sophisticated and polished set-up focused on ergonomics, mnemonics and consistency.

PlantUML

PlantUML is an open-source tool allowing users to create UML diagrams from a plain text language. The language of PlantUML is an example of a Domain-specific language. It uses Graphviz software to lay out its diagrams. It has been used to allow people with visual disabilities to work with UML.

It has got hundreds of ways to integrate with your text editors, code editors, command-line, browsers and so on.

plantuml-mode

plantuml-mode is a major mode for editing PlantUML sources in Emacs developed by Carlo Sciolla from Amsterdam. It has got features like syntax highlighting, auto-completion and preview of buffer or region.

Installing in Emacs

Enable the major mode

You can automatically enable plantuml-mode for files with extension .plantuml by adding the following to your .emacsrc:

Of course, you can always enable manually the major mode by typing M-x plantuml-mode once in the desired PlantUML file buffer.

Spacemacs plantuml layer

This layer enables support for plantuml-mode in Spacemacs. To use this you have to add the plantuml layer to your dotspacemacs-configuration-layer in .spacemacs. You can open your .spacemacs file by pressing Spc-fed, and update it like below:

Installation

Recently, plantuml-mode have rolled out a new update for an experimental feature called Execution modes. Like you can choose any of the two existing mode to render the preview of your PlantUML code. Spacemacs still hasn’t updated to this change I guess. So if you are using the layer option to enable PlantUML you need to set the default execution mode to jar, so that you can use your local jar file to render the preview rather than using the server.

You can add this below snippet to your dotspacemacs/user-config

Also, to enable preview you need to tell plantuml-mode where to locate the PlantUML JAR file. By default it will look for it in ~/plantuml.jar, but you can specify any location with:

This is all you need to set up PlantUML in Spacemacs.

Preview

Once you enabled the plantuml layer, you can start using it by creating files with .pum extension. Spacemacs will automatically enable the plantuml-mode for you.

To render the PlantUML diagram within Emacs, you can hit M-x plantuml-preview.

Now open a new file/buffer and type the below code and save it with any name with .pumextension.

Now if you render the preview using Spc-mcc, you can see the below rendered image. This will run PlantUML and display the result in the PLANTUML-Preview buffer.

You can save the image buffer as a PNG file using Spc-fs with a .png extension.

That’s it. We will how you can draw more different type of diagrams with PlantUML from your favorite editor itself. Stay Tuned!

Please let me know your feedback/queries in the comments.

References:

Categories
Uncategorized

A guide to create tmux like Custom Layouts in Spacemacs

Coming from a vim world with tmux, I had really missed the multiple split window layout in Spacemacs. But after knowing how to define custom layouts this seemed to be an easy exercise for me.

So I thought, I should write a blog post about it to help others setup awesome layouts and workspaces with Spacemacs.

Some Terminology

Here I want to make some clarifications on the terminology surrounding vim, tmux and Emacs on windows, layouts, panes and buffers.

vim
tmux
Emacs
Spacemacs
Buffers
Windows
Tabs
Panes
Windows
Buffers
Frames
Windows
Buffers
Frames
Windows
Layouts
Workspaces

vim: Buffers

A buffer is the in-memory text of a file which is actually an area of Vim’s memory used to hold text read from a file for editing. In addition, an empty buffer with no associated file can be created to allow the entry of text.

vim: Windows

A window is a viewport onto a buffer. You can use multiple windows on one buffer, or several windows on different buffers.

Vim provides multiple ways to organize your work, one of them being the ability to open multiple split windows within the same tab page of a given Vim instance. This allows you to have multiple views on the same buffer or file, or even view multiple buffers side-by-side or in any arrangement you prefer.

vim: Tabs

A tab page is a collection of windows.

Emacs: Frames

A frame is a screen object that contains one or more Emacs windows. It is the kind of object called a “window” in the terminology of graphical environments; but we can’t call it a “window” here, because Emacs uses that word in a different way.

A frame initially contains a single main window and/or a minibuffer window; you can subdivide the main window vertically or horizontally into smaller windows.

Emacs: Windows

A window is an area of the screen that is used to display a buffer.

Windows are grouped into frames. Each frame contains at least one window; the user can subdivide it into multiple, non-overlapping windows to view several buffers at once.

tmux

Each window displayed by tmux may be split into one or more panes; each pane takes up a certain area of the display and is a separate terminal.

Spacemacs: Layouts

Layouts are window configurations with buffer isolation, each layout can define several workspaces (think of them as sub-layouts) sharing the same list of buffers as their parent layout.

A layout is a window configuration associated with a list of buffers. The list of buffers can be an arbitrarily chosen set of buffers. Spacemacs provides some facilities to create meaningful sets of buffers, for instance the buffers related to a projectile project.

Spacemacs: Workspaces

Workspaces are sub-layouts, they allow to define multiple layouts into a given layout, those layouts share the same buffer as the parent layout.

Layouts

A number of preset layouts are available in tmux. They are:

  • even-horizontal
  • even-vertical
  • main-horizontal
  • main-vertical
  • tiled

We will see each one in detail and also learn how to create each type of layout in Spacemacs

Custom Layouts

Custom layouts in Spacemacs can be defined using the macro spacemacs|define-custom-layout, they are accessible via SPC l o. You can define these custom layouts inside your.spacemacs file under dotspacemacs/user-config section.

Even Horizontal Layout

Panes are spread out evenly from left to right across the window.

Even Vertical Layout

Panes are spread evenly from top to bottom.

Main Horizontal Layout

A large (main) pane is shown at the top of the window and the remaining panes are spread from left to right in the leftover space at the bottom. Use the main-pane-height window option to specify the height of the top pane.

Main Vertical Layout

Similar to main-horizontal but the large pane is placed on the left and the others spread from top to bottom along the right.

Tiled layout

Panes are spread out as evenly as possible over the window in both rows and columns.

Example Custom Layout

So far we have seen how we can create custom layouts like tmux standard presets in Spacemacs. But the above examples are only skeletons, we don’t load any files in the windows. Now we will see an actual example of how to create accessible custom layouts by loading the desired files, terminals and other programs inside Spacemacs.

Custom Layout in Spacemacs

Previously, in vim, I have been using tmuxinator for managing my tmux sessions and custom layouts for my projects. Since I will be working on multiple projects simultaneously, it was really helpful to define a standard and unique layout for each project.

Layout definition using tmuxinator

tmuxinator is a tool to manage complex tmux sessions easily. It has got some layout settings gets handed down to tmux directly, so you can choose from one of the five standard layouts or specify your own.

The above same configuration can be easily ported to Spacemacs like below. All you need to do is to get familiar with different macros that are available in Spacemacs like find-fileeshellsplit-window-right, etc., Once you know how these macros work, it will be an easy task to setup custom layouts like this.

The resultant layout will look something similar to this:

References

Categories
Uncategorized

How to use Thesaurus from Spacemacs

In this tutorial, we will see how we can integrate the Merriam Webster Thesaurus in to Spacemacs. Having a thesaurus by your side while writing, is really a productive thing. Since you don’t have to lookup every time the alternative word you want to use and that too integrating with your favorite editor is definitely a feather in your cap.

For this we are going to install an awesome package from Ag Ibragimov called mw-thesaurus.el It is originally intended for Emacs, since Spacemacs is a community driven Emacs distribution we can utilize the same for Spacemacs also.

Merriam-Webster has been America’s leading and most-trusted provider of language information, for more than 150 years, in print and now online. Each month, their Web sites offer guidance to more than 40 million visitors. In print, their publications include Merriam-Webster’s Collegiate Dictionary (among the best-selling books in American history) and newly published dictionaries for English-language learners.

In order to use Merriam Webster API it is required to register (for free) and obtain an API Key.

Register free account at Merriam-Webster’s Developer Center

First, you need to visit their website and register your application to get an api key. The registration form will look like something below. You can request up to 2 keys.

Obtain a key for Merriam-Webster Thesaurus

For our thesaurus integration we need the Collegiate Thesaurus or the Intermediate Thesaurus api key.

Once you register and obtain the keys, you can access them from your Your Account page under Your Keys section.

Set the variable

The best place in my opinion to set the api key is in dotspacemacs/user-config. Open your .spacemacs file by using <Space>fed and look for the section dotspacemacs/user-configand set the api like below.

Spacemacs layer

Spacemacs users can easily add the package to dotspacemacs-additional-packages and start using it, or even add it to be part of a custom layer, see an example.

Commands

Once you setup the keys and added the mw-thesaurus package to your .spacemacs file. You’re ready to go. Open any text document and enable the mw-thesaurus-mode which you can access by searching using <Space><Space> in Spacemacs or M-x in Emacs.

You can see the screenshot I have taken while editing this blog post in Org-mode. In the right pane, I have opened the Merriam-Webster Thesaurus buffer.

Sometimes, the buffer won’t popup when you do a lookup, but you can get the same by searching in the buffers list [ <Space>bb ]. It will be named like Merriam-Webster Thesaurus.

Hope you enjoyed the tutorial, please share your feedback and thoughts in the comments.

References

Categories
Articles EmberJS

Ember into Futurity

Nobody can predict the future, but everybody can wish for something in it. It could be for the benefit and interest of one person or a community as a whole. I am putting down my thoughts and wishes for Ember.js as both a consumer of the framework itself and producer of the supporting tools and addons for the same.

The best way to predict the future is to invent it.

This post is my answer to the call for blog posts for #EmberJS2019. I haven’t had the slightest idea to write a post for the blog post call, but my colleagues and friends insisted me to write one. Because honestly I really don’t know where to start and how to give a conclusive ending to my post. But my creative Muse never ceases to amaze me. So here it goes.

The Framework

As a framework, we need to fully achieve conceptual integrity on what we want to accomplish and how we want to move forward with it. Because instead of trying to become one “All Purpose Tool Kit”, we should focus on one thing and do it well.

Ember has the right ideas, but the wrong atomic structure.

Component Paradigm

While Ember was ruling the MVC realms, there came a knight known as “React“, armed with a simple yet profound idea, who taught us how we can build web applications using components. The Components Model may be a new one for Web development, but it wasn’t for programmers and system application developers like me who have been dealing with objects and classes for a very long time. Yet this new Knight conquered the world with his deep and extensive conceptual integrity. Ember failed to realize this threat for a very long time, even though Ember had components in it’s arsenal, but it was no match for React.

Octane

Octane is the one thing I eagerly waited for in Ember a year ago when Tom Dale published his Ember 2018 Roadmap RFC. I even remember that I explored the RFC in detail in my blog here. But still we are yet to see a full-blown Octane Edition landing in Ember. And it would be a disgrace if I fail to appreciate the effort put by the Team to make the necessary provisions for the Octane release by making the guides ready with great care and great tact.

More Flexible CLI

One of the best things I love about Ember is the CLI. No other Javascript Framework has got it right till date. While all of the other frameworks use CLI as just an application scaffolding tool to bootstrap a project, Ember-CLI goes beyond them with generators and blueprints. And it gets even better by giving us the flexibility to define and generate a custom blueprint.

But the CLI is not very flexible in-terms of choosing tools and libraries for various tasks other than the standard packages shipped as part of the CLI. The Convention over Configuration is holding us back in some aspects on this front. The Web is evolving with more new tools and libraries day by day, and I think we should open up more and make provisions to allow developers to choose their own tools and libraries best suited for their projects.

We should adopt the ideas from projects like ember-cli-create which will allow the developers to choose their own tools and technologies for their projects based on the requirements, platform and other external factors.

Unified Documentation

This is one thing I really wanted to emphasize here. Because we have so many ideas being implemented in Ember such as Server-Side Rendering (Fastboot), Ember Engines and Glimmer.js. But all of them are scattered and fragmented. I wish all the above things should branch out from our main guides for Ember instead of having separate websites.

I am not concerned more on the technical implementation rather on the conceptual mapping to give developers an overall idea of different technologies that can be used along with the framework. It could be a simple page for each one of the above within guides itself and guide the users to take them to the main website if they want to explore more on this or a more prominent place where we can have links to these projects within the guides itself.

Functional Components (Hooks)

When hooks landed in React, it made a real fuzz. More of my fellow React developers were singing praises for the same, such as how it changed the way they write code and mutated their minds on how you could bring about solutions for complex problems using components. And again underneath all the fuzz, it’s just a conceptual modification that the React framework brought in for writing components, which can be adapted to any framework that supports the component model for creating user interfaces for the web.

I wish Ember could have adopted it much earlier, but it’s better late than never. I am very much relieved to see this has seen the light of the day, when I saw ember-functional-component  created by our beloved rwjblue.

Fail Fast

As a community we value “Stability without Stagnation”, but that proved expensive for the framework in the long run. I personally urge that we should fail fast, because by failing fast we come to value the lessons and insights we learnt from our failures and move forward with much greater pace. We need to get out there, try out new things and find out what works and what doesn’t.

Why do we fall? So we can learn to pick ourselves up.

– Alfred, Batman

Embroider

Using broccoli as a build tool, have been a huge impediment for Ember, in adopting the best and the latest conventions from other frameworks in terms of build pipeline and tooling. Since other frameworks like React, Angular and Vue are heavily betting on cutting edge packaging technologies like Webpack, Rollup and Parcel, while Ember still fixating on broccoli proved to be a costly mistake for the community. I think Embroider will not suffer from the same fate, by adopting Webpack as a tool in the build pipeline.

Conclusion

So instead of asking “Why didn’t Ember succeed?”, actually the right question to ask will be Why is there a perception that Ember didn’t “succeed”? And I would like to conclude this post with words from my favorite author, Henry David Thoreau.

Read your fate, see what is before you and walk on into futurity.