There are times I find that even though Visual Studio Code (VSC) does its own incredible job of searching and locating files in the search bar, it doesn’t truly give me any relevant context how some source code matches were written not just in one domain of abstraction, but also is used in other several layers of application abstraction anywhere in a typical full-stack web application.

For instance, it could be something about certain software design pattern that’s currently implemented in one area of the module but you want to affirm whether that same design pattern could be also used in other parts of the application as well.

But where can you begin to figure out where and how heavily the design patterns are used and their overall prevalence within an application, if editor tools such as VSC can’t give you the straight answers?

Well.

Here’s how.

I found this.

BeyondGrep

Essentially, it’s another type of a Linux-based grep tool.

But it’s built mainly for programmers working on source code repositories.

Typically, as software developers/engineers, we always spent a considerable proportion of our time navigating and locating source code files we need to work on when building features for our clients before we get to even type our first line of code.
Naturally, we won’t always know the depth of the entire application structure upfront when given on any particular task development to do. But, even if you do, there’s always a great chance certain features are in the constant pace of change thus technologies and design decisions don’t always stand idle against the sands of time - even more so if you work on a larger development team.

As a consequence of such factors, we search for file/folders to make those necessary changes.

For a while, we got things like grep or built-in file-search patterns editor tools to do the job for us. But as your codebase grows over time, so do their file-search algorithms’ O(N) runtimes to grow exponentially and we don’t want our development time to be stalled by such impending condition.

Now, we get to learn another awesome trick with ack that will take our file searching duties to the next level.

To start off, install ack onto your dev machine by looking at your specific OS environments.

As I’m using MacBooks, I do the following using HomeBrew.

Installing ack
brew install ack

Once installed, you can interact with its command shell using your favourite terminal program by typing ack.

Let’s say, as an example, I decide that I want to do some site changes on my blog site.

I want to enhance the look and feel of my embedded video link by modifying its CSS/SASS properties.

Enhanced Video Widget styles
.embed-video-container {
  -moz-border-radius: .3em;
  -webkit-border-radius: .3em;
  border-radius: .3em;
  -moz-box-shadow: rgba(0,0,0,0.15) 0 1px 4px;
  -webkit-box-shadow: rgba(0,0,0,0.15) 0 1px 4px;
  box-shadow: rgba(0,0,0,0.15) 0 1px 4px;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: #fff 0.5em solid;
}

With this change, I’d expect that any blog post content pages I wrote some months back that has embedded videos to be impacted by such modification.

However, I do not necessarily know or remember which of the same content pages upfront be in my blog repo. I want to not only how quickly I want to find out where changes are going to be, but also its context of use as well.

With ack, I do the following

ack command search (ignoring case-sensitive)
$: ack -i "embed-video-container"

I get the following back

Output shown
plugins/traileraddict.rb
10:      %(<div class="embed-video-container"><iframe src="//www.traileraddict.com/emd/#{@id.strip}"></iframe></div>)

plugins/ooyala.rb
12:      %(<div class="embed-video-container"><script src="//player.ooyala.com/iframe.js#pbid=#{@pbid}&ec=#{@ec}"></script></div>)

plugins/dailymotion.rb
8:      %(<div class="embed-video-container"><iframe src="//www.dailymotion.com/embed/video/#{@id.strip}"></iframe></div>)

plugins/vimeo.rb
10:      %(<div class="embed-video-container"><iframe src="//player.vimeo.com/video/#{@id.strip}"></iframe></div>)

plugins/youtube.rb
10:      %(<div class="embed-video-container"><iframe src="//www.youtube.com/embed/#{@id.strip}" allowfullscreen></iframe></div>)

.............................
 
public/blog/2018/06/19/my-thoughts-on-gitsoft-or-microhub-whichever-comes-first-since-its-acquisition/index.html
151:<div class="embed-video-container"><iframe src="//www.youtube.com/embed/UEb1cvZG3GU" allowfullscreen></iframe></div>

sass/custom/_rve.scss
1:.embed-video-container {

From this, I found out where my embed-video-container class is being used in their respective file/folder locations. I see that it’s in

• Ruby files
• Sass files
• HTML files

Great! But I may decide I’m not interested in its use in Ruby or SASS files. I want to see which HTML files that make heavy use of the embedded widget.

So how do I filter it?

Simple.

We do this.

Filtering ack results
$: ack -i --html "embed-video-container"

By entering the html flag, I get back only HTML files that contain the class name that matches with my keywords.

You can also do multiple file-type searches as well by adding more flags such as Javascript/Python/Java file types in one line if you want.

Fabulous!

Now, using the same results, I want to inspect which lines of the files this snippet content sits; and understand its breadth and depth of use as a context.

Again - simple.

We do either of the following.

More ack examples
# A - Trailing lines search
$: ack -i --html -A 10 "embed-video-container"

# A output
public/blog/2018/06/19/my-thoughts-on-gitsoft-or-microhub-whichever-comes-first-since-its-acquisition/index.html
151:<div class="embed-video-container"><iframe src="//www.youtube.com/embed/UEb1cvZG3GU" allowfullscreen></iframe></div>
152-
153-
154-<p>Fascinating, isn&rsquo;t it?</p>
155-
156-<p>Or downright gutted by their Github&rsquo;s decision-making process to par with Microsoft?</p>
157-
158-<p>Whatever you may be feeling (long-time or newbie dev), there&rsquo;s no further doubt that more changes are coming our way within the open source communities, if not just restricted to Github itself.</p>
159-
160-<p>Like it or not.</p>

# B - Leading lines search
$: ack -i --html -B 10 "embed-video-container"

# B output
public/blog/2018/06/19/my-thoughts-on-gitsoft-or-microhub-whichever-comes-first-since-its-acquisition/index.html
141-<p>Steve Balmer now admitted he’s <a href="https://www.zdnet.com/article/ballmer-i-may-have-called-linux-a-cancer-but-now-i-love-it/">loving</a> the open source community.  He’s all for it now that the current chief of Microsoft Satya Nadella made all the right moves in porting a number of Microsoft applications into the open source environments such as Github back in 2015 since his inception into the company.  Later on, they have journeyed, so far, to become the largest contributor to the open source development community by leaps and bounds, followed by other big players like Google, Amazon, Facebook etc, etc.</p>
142-
143-<p>The facts speak for themselves.</p>
144-
145-<p>You can read the official figures from this post <a href="https://medium.freecodecamp.org/the-top-contributors-to-github-2017-be98ab854e87">here</a>.</p>
146-
147-<p>With those convincing numbers and Microsoft&rsquo;s dedicated commitment in giving back for this nourishing community, it’s little or no wonder how Microsoft and Github had been in secret talks amongst each other in buying the Octopuss mascot for a whopping $7.5 USD billion dollars!</p>
148-
149-<p>At the time of writing, I, later on, found out why they&rsquo;ve made such a move by stumbling upon this Youtube video link below that comes with an amazing infographic that better explains the reasoning behind their purchase.</p>
150-
151:<div class="embed-video-container"><iframe src="//www.youtube.com/embed/UEb1cvZG3GU" allowfullscreen></iframe></div>

What those A and B switches do is that A is set to show me lines of content after the embed-video-container keyword pattern whilst B is set to show me lines of content before the same keyword pattern.

You can even combine both switches to show you what comes before and after the same keywords in one resultset.

This is sick!! 💪💪💪💪💪

With such incredible power, this toolset provides us, it’s also brazenly lightning fast to get these results compared to what VSC/grep can give you.

Not only that, if you use the terminal within your VSC executing the commands above, you can even take advantage of VSC’s CMD+click to open up files from your ACK results set and change their content from there.

To top it off, you can use either Bash, Zsh or Fish shell to trim and abstract away your ACK commands a step further.

eg.

Inside your .bash_rc file
# search trailing context for this keyword
acktrailingby() {
  ack -i -A $1 "$2"
}

# search trailing context for this keyword
ackleadingby() {
  ack -i -B $1 "$2"
}

In short.

ACK commands + VSC terminal environment + Bash/Zsh/Fish = Hackers (👨‍💻👩‍💻👨‍💻👩‍💻) in GOD mode

That’s how slick ACK really is.

This is just the tip of the iceberg.

As it is a regex pattern engine powered by PERL, I can see how why I see its feedback can come off lightning quick when running them.

The key advantages I found with this tool are

• Comes with powerful recursion file/folder search algorithm with such omnipotence.
• More regex options that grep could never perform to match such speed and accuracy.
• It works on nearly all modern programming languages you can imagine as well as upcoming new ones.
• Good community support behind its core development in stages, so it’s live and thriving well.

For the 3rd reason, it’s a fantastic tool for polyglot engineers like me. 🖥⌨️🖱

I highly recommended that you add this to one of your arsenal developer’s toolkit.

Give it a go! You won’t regret it.

Till then, Happy Coding!