BBEdit Blog Posts

June 21, 2019

Brackets vs BBEdit

Adobe Brackets is becoming popular because it's open source and has a pretty active community writing some cool extensions. It's a pretty cool tool that makes it easy to edit code and text files.

Should you not upgrade BBEdit? Is it time to say goodbye to BBEdit?

While Brackets is pretty cool text tool, there's are some features that makes BBEdit still a strong resource for developers.

Bbedit Feature
Some BBEdit Features

Three things I like about BBEdit

Text Factory - Ability to save and reuse Search/Replace commands.

This is essential when you need to run multiple search/replace over multiple files. Text Factory allows you to perform 27 different action types - including running Unix Filter which essentially gives you a lot more options. This is a great way to clean up a large number of files.

Ability to Add Shortcuts to any Menu Item - You can add your own short cuts to any menu item. Which is great when you want to easily add HTML to any elements. Customizing menu options is every complex in Brackets.

In addition, you can easily customize what menu items display. So if you're not using Subversion, Git, or various HTML elements, you can remove them. Now your not distracted from getting things done, This is all done in a standard preferences window. In Brackets, you need to edit a json file to make configuration changes.

Search and Replace - The search and replace functionality has a lot more functionality: such as Grep, Search in Select Text and case sensitive.

In addition, you can extract matches, so if you're looking at a log file and want to see only lines matching certain phrases - it's a lot easier to do in BBEdit than Brackets.

BBEdit saves previous searches so you can reuse them later. There's a "history based" search - saving the last 16 searches, or you can save a common pattern to reuse later.

Bracks Screen Shot

Three things I like about Brackets

Split View - You can look at two files at once. This is great when your coding a new site and want to have a JavaScript or CSS file open up at the same time. While you can open two windows side-by-side in BBEdit, it's just easier to manager when everything is under one document window.

Emmet Support - Emmet makes it really easy to add new HTML. Emmet provides shortcuts to making HTML/CSS from classes and IDs. It's a must-have for anyone coding up a new HTML site.

There's lots of great short cuts to make coding HTML,CSS and JavaScript a whole lot easier

Multi Line Edit - You can make similar changes to multiple lines at the same time. This is convenient when your editing similar changes over multiple lines, for example adding a new CSS class to DIV.

June 16, 2019

Bootstrap 4

I am in the process of moving this site to use Bootstrap 4. Currently the site is built using Bootstrap 3.

Two major issues that I face with this upgrade:

No more Panels

In Bootstrap 4, panel feature is gone. I have used this just about every place on this site. I’ll be replacing all the Panels with Bootstrap Cards.

This also means that the random panel and random well are now legacy. I’ll replace them with a random card generator.

Legacy Bootstrap Template

I purchased a Bootstrap Template from Creative Market and this DESIGN won’t work under Bootstrap 4. Most likely I’ll come up with my own style.

, For now, the site will use the basic Bootstrap look and feel, I’ll migrate to different design later in July.

Looking Forward To the Migration

I am looking forward to updating the site look and feel and more excited about all the new features in Bootstrap 4. BBEdit makes it easy to do search and replace using Text Filters.

May 31, 2019

Dash

Dash is an Macintosh application that gives you local access to hundreds of documentations. You can download the documentations that you need and search for information.

Product Description

Dash is an API Documentation Browser and Code Snippet Manager. Dash stores snippets of code and instantly searches offline documentation sets for 200+ APIs, 100+ cheat sheets and more. You can even generate your own docsets or request docsets to be included.

Dash Mac Window Fun
Dash is a useful tool to have when your heads down on a project and want to stay focus when searching for programing help.

Nine Things I Learned About Dash

  1. The trial version has all the features of the full version, just will get notified to purchase everyone in a while. The full version cost $29.99 for all computers. (Not a yearly cost!)
  2. You can bookmark pages, making it easy to switch between documentations. (For example you can easily switch between MySQL and Postgres date formatting.)
  3. I found it really easy to search the FontAwesome icon collection. When updating a website icon set. You can't copy/past content like you can on Font Awesome's website, but it's certainly easier to use when you want to quickly add an icon.
  4. There is a snippet functionality, but I found that Keyboard Maestro has a lot more functionality.
  5. You can integrate Dash with Bbedit. What this does is link the BBEdit's "Find in Reference" command to Dash. Simply select any command, such as "mysqli_connect" and then right click and select "Find in Reference." Dash will open up with that search query. It's a great way to find more information about a particular command.
  6. There is an iOS app, that allows you to have remote access to your desktop Dash app. This is handy because search queries made in the desktop will now show in the iOS. This makes it easier to minimize Dash on the desktop and read the documentation when trying to implement a code.
  7. Some of the Documentations have a "playground" area, where you can test the code using CodePen.
  8. With some Docsets, you can specify the version of the doc. For example, you can download MySQL 5,5, 5.6, 5.7 or 8.0 docsets. (Yes you can download all of them if you want.)
  9. You can learn a lot from reading some of the available docsets. For example, there's a Docset called "You Might Not Need jQuery" which shows you similar ways to perform certain jQuery tasks.

Cool Feature to Add

One feature that would be cool to have is a personal code library; sort of like the snippets, but noninteractive. Just a place to store re-usable code - and searchable like any other Docset.

May 10, 2019

DragThing

There are very few Macintosh applications that have been around since System 7.5. BBEdit, StuffIt , DragThing are some that I can think of off hand. Many of these applications are still running strong.

Sadly DragThing is being discontinued. This is because Apple has decided to stop supporting 32-bit code. Perhaps you seen this alert when opening up some applications:

Drag Thing32 Bit

Apple has announced that it will no longer support 32-bit applications. This means in the next major release 32-bit applications will no longer work. This is very similar to when Apple started discontinue supporting Classic Apps from pre-OS X days.

DragThing Story Ends

After 24-years, the developers have decided to retire the application. According to the homepage message, this is because the application will have to be completely rewritten and they don't think there's any real value into that.

I haven't used DragThing, as I got use the Apple Dock, and other applications that made navigating the Macintosh easier. I thought it would be good to check out what I missed in DragThing all these years.

Drag Thing Shot
DragThing with the default setup

Five Things I learned Playing Around with DragThing

  • DragThing first shipped on May 1st, 1995. ( Steve Jobs would return to Apple a couple of years later. )
  • DragThing was shareware and cost $29 to register. (It's currently free since it's being discontinued.)
  • You can create docs for different tasks, for example if you in the Photo Mode, you can have a row of all your Photo Apps. This actually makes it really easy to navigate between different apps. Especially if your using certain apps together only when doing tasks.
  • There a ton of configuration options available. It's great to customize the dock anyway you want. The only thing I couldn't figure out is how to keep the dock always on top.
  • The ability to add code snippet was cool, I like how LaunchBar handles Snippets. It's a lot easy to navigate and search for snippets.

Some Alternative Solutions

Along with LaunchBar, Tab Launcher Lite are good alternative solutions.

  • LaunchBar - makes it really easy to switch around applications. You can easily running applications and switch around. I use the snippet feature all the time.
  • Tab Launcher Lite - Allows you to groups applications into folders, much how DragThing works. So you can have folders for Dev, Design and Play.
March 22, 2019

Archey

Did you know that you can set up a cool terminal login with Archey? Simply add it to the .bash_profile, and every time you launch Terminal this is what you see:

Archey Terminal
Archey brightens up the Terminal Session.

Installing Archey

Archey is distributed via Homebrew - a Unix package manager for MacOS. There's a lot of cool utilities in Homebrew, but for now let's install Archey.

  1. Open up a new Terminal Session.
  2. If you haven't installed HomeBrew, follow the instructions on their website.
  3. Once completed, run the following commands: brew install archey
  4. Test the installation: simply type in archey

Adding to the Terminal Login

If you haven't changed the default terminal shell, then your using BASH shell - which is a pretty good terminal shell. There is a small config file that is run every time you launch terminal. In Bash it's call .bash_profile.

Here's how to add it so that it appears on login:

  1. Open up a new Terminal Session. (This makes sure your in your Home directory.)
  2. Edit the .bash_profile file, if your have BBEdit installed type in bbedit .bash_profile
  3. On the last line simply add the following text: archey

Sample .bash_profile

This is my .bash_profile

alias du='du -kh' # Makes a more readable output. 
alias df='df -kTh'

export PS1=" 🏠  d $ "

# Quickly go up 'X' number of directory hierarchy. Example: use: up(3)  instead of cd ../../..
up() { cd $(eval printf '../'%.0s {1..$1}) && pwd; }

export EDITOR="/usr/local/bin/bbedit"   
alias ll='ls -FGlAhp'                   # Get a nice directory listing


archey

Check out the other commands in my .bash_profile which you may find helpful. You can find other helpful Terminal tips from various Bash Blog Posts that I did back in 2017.

February 5, 2019

Keyboard Maestro Keyboard Shortcut Enhancer

If your switching back and forth between applications, it can be hard to remember certain keyboard shortcuts. Apple has a UI Guidelines which standardize many common tasks: Cut/Paste/ Hide Applications.

What's nice about Keyboard Maestro is you can define short cuts when the application don't have functionality to do so.

Case in Point: I navigate between Apple Mail and Microsoft Outlook a lot. I wanted to have one keyboard shortcut to insert HTML links - since it's a command that I use a lot. Outlook uses Control Command K and Apple uses Command K.

With Keyboard Maestro, I can now remember only one shortcut between applications:

Outlook Quick Key

The above macro is in a group that is available only for Microsoft Outlook. This way it doesn't get activated in other applications. Come to think of it, it might be a good shortcut for BBEdit insert Anchor action.

November 26, 2018

Bashrc Configurations for QA

QA tends spend a lot of time using command line commands in unix. There are some useful Bash Configurations that can make things a bit easier.

Simply add these to your .barshrc or .bash_profile, for example you may want to add multiple SSH shortcuts to go to different servers. Check your Bash .history file for examples of commands that you frequently use - you may find adding an alias may increase your productivity.

Bash Examples


# Quickly go up 'X' number of directory hierarchy. Example: use: up(3)  instead of cd ../../..
up() { cd $(eval printf '../'%.0s {1..$1}) && pwd; }


export EDITOR="/usr/local/bin/bbedit"   # Mac Users should use BBEdit as their Text Editor
alias goshh='ssh -A bravo.google.com'   # Quick Way to SSH to your servers
alias ll='ls -FGlAhp'                   # Get a nice directory listing

Tech Note: The above was created using the "Copy as Styled HTML" command in BBEdit. It's an easy way to share color syntax.

August 17, 2018

BBEdit Anchor tag Changes

I have been using BBEdit for many years. The earliest copy that I could find was BBEdit 4.3. Recently, I was looking through my applications on my Macintosh Powerbook G3 and found an old copy of BBEdit 6.0. I thought it would be interesting to see how the Anchor tag has changed over the years.

BBEdit601
BBEdit 6.01 for OS X

BBEdit125
BBEdit 12.1.5 (Latest Release)

Things to Note

  • The dialog box is much cleaner in BBEdit 12.1.5
  • In BBEdit 6.01 the scheme include http,https,ftp,mailto,news,telnet,finger,gopher,wais and whois
  • in BBEdit 10+, doesn't save recent URLs
  • In BBEdit 6.01, The strange symbol next to href field is to enter the document selection in the text field
  • in BBEdit 10+, you can change the anchor items to whatever you want.
June 26, 2018

BBEdit TextFactory in Keyboard Maestro

Did you know that you can tap into BBedit's TextFactory in Keyboard Maestro?

What is BBEdit's TextFactory?

BBEdit Text Factory is a user-defined set of text command done in a particular order. You can do simple tasks such as Change Case, Sort Lines, and simple search and replace in a particular order that works for your situation.

Why use it in Keyboard Maestro?

The key reason to use TextFactory functionality is that it puts the best of both applications together. You use Keyboard Maestro to define the action, and then let BBEdit do it's work.

Sample TextFactory Action

Zap Gremlins Graphic

Zap Gremlins is a common action that I do with BBEdit. I use it to remove all those smart-quotes and other hidden characters that I don't want to appear in the text.

Sort Lines Graphic

Sorting List is and then Capitalize the words is another common task that I would do in BBEdit.

Both of these are Menu items so that it's easier to invoke them when I need to.

Some Notes

  • Text Factory files are usually stored in ~/Library/Application Support/BBEdit/
  • Double check Keyboard Maestro for some text commands as there are plenty of built in tools that might be easier to do in Keyboard Maestro.
  • Applying a BBEdit Text action will cause Keyboard Maestro to open up BBEdit.
  • Learn more about BBEdit TextFactory
March 16, 2018

BBEdit Stye Text

There is a popular online utility called GeSHi - Generic Syntax Highlighter which makes it easy to display Code in the same Syntax format in popular editors. You use this when you want to display code on a website.

Ge S Hi Java

If you have BBEdit, you don't need it because there's a built in tool called "Copy as Styled" which will copy the selected text using the BBedit color scheme that you have selected.

BBEdit Styled Text

Sample Output from BBEdit



    public void setHints(int hints) {
    super.setHints(hints & (~ImageConsumer.COMPLETESCANLINES));
    }

Copy as Styled Text

The other "Copy as" functionality is the "Copy as Styled Text" which copies the selected text as rich text. This is handy when you may want to paste the syntax code in a Microsoft Word document or Evernote note.

Cool trick with OmniGraffle

If you have OmniGraffle you can create a cool info-box using your code:

  • Copy your Code in BBEdit as "Copy as Styled Text"
  • Paste the content in your Clipboard into OmniGraffle
  • Change the Fill to be whatever the background is (If Needed)
  • Change the look and feel, and then export the image.

A few simple steps in OmniGraffle and you could make this:

Freehand Stroke Omni Graffle

It appears that this is easily done in OmniGraffle. I tried in Apple Page, Microsoft Word, and Affinity Designer and they all require some additional touch ups. For example, you may want to create a box object first and then paste the content from BBEdit.

January 19, 2018

Quadro Sync

Quadro Sync is a cool way to control your computer from your Smart Phone. You have the ability to assign specific functions so that when you open up the application your smartphone screen changes to display buttons of tasks to perform.

You can customize the button assignments and button designs. Giving you full control over how Quadro Sync works.

Quadro is an excellent application to help with common tasks that you encounter every day. If you been thinking about getting an external controller pad, consider trying Quadro first.

This is a two-bit application; there's the desktop app that is always listening! and interacting with iOS! and there's an iOS app that has to be running. After a few minutes of inactivity, the iOS app will go to sleep -saving your screen and device power.

If you're just going to charge your phone at your desk, why not put it to great use?

i Phone Promo

Description from Quadro Website

Here's a description from Quadro.me website:

Power up your workstation
Control your applications with a simplified yet enhanced personal interface. Automate any recurring iteration and optimize your workflow. Reduce the gap between ideation and execution. And have fun doing it.

Personal computing, truly
Personalize any function and representation of your actions. Use color, icons and images to convey meaning and smoothen your path to action.

Automate your workflow
Direct activation is cool again, but that's not enough. Sequence any action easily to create your cross-application macros and let Quadro do the dirty work for you.

BBEdit Screen Example

I spent a lot of time in BBEdit for PHP development and text cleanup. I spent some time thinking about what tools would make sense to make a Quadro action:

B B Edit Sync

  • Zap Gremlins - Clean up the selected text.
  • Paragraph - Create HTML Paragraph from selection
  • Backup to Evernote - Quick way to backup my document to Evernote.
  • Process Lines Containing - Quick Filter
  • Find - Open up the Find/Replace dialog box
  • Remove Line Breaks - Clean up the selected text.
  • Add Hyperlink - Open the Hyperlink dialog to add a link to the selected text.

Obviously all of these commands can be performed by keyboard shortcuts. Making them as action buttons in Quadro makes it quicker to apply these actions.

For example, I am opting to backup my documents to Evernote more often because the big green button is there to remind me.

Which Devices can You Install Quadro Sync?

If you have any old devices that are just sitting in storage, you may want to dust it off and make it your new Quadro pad.

The Quadro iOS App will work on any devices that can run iOS 8.0 or newer, according to Apple these are the devices that will run on iOS 8:

  • The iPhone 4S
  • The iPhone 5
  • The iPhone 5C
  • The iPhone 5S
  • The iPod Touch fifth generation
  • The iPad 2
  • The iPad with Retina Display
  • The iPad Air
  • The iPad Mini
  • The iPad Mini with Retina Display
  • Getting the Application

    To get started, visit the Quadro website and download the application.

    January 9, 2018

    Evernote Cleanup Macro

    I do a lot of copy/paste between Evernote and HTML. Since Evernote has RichText features, I decided to create a Keyboard Maestro Macro to clean up the clipboard before pasting into BBEdit, or another text editor.

    Evernote Cleanup Macro

    Evernote Filter

    Some Tips

    • I have setup the Macro as a menu item because I don’t need it all the time, and I don't want to accidentally enable the Macro without realizing it.
    • If this is a feature that you see handy to implement, I would recommend using an F key to enable it, or use ‘=clean' as the trigger key.
    • There is an extra step to convert any bullet items to HTML List items. After I paste the text, I just need to add an Unordered list tag at the beginning and the end.

    Why not use BBEdit zap Gremlins Tool?

    The BBEdit Zap Gremlins feature is awesome when I am in BBEdit. The nice thing about Keyboard Maestro is that it will work every application. I don’t have to memorize the command to “Paste and Match Style"

    It comes in handy when copy/paste text from a website to an email - and I want to strip out all the formatting.

    Apple Mail Paste

    October 13, 2017

    BBEdit 12

    Yesterday Bare Bones Software updated BBEdit to Version 12. The feedback from long term customers has been amazing.

    B B Edit Fans

    Yes, BBEdit has a very strong customer base.

    Some Cool Features in Version 12

    There are a lot of changes in Version 12, you would expect that with a major release, here are five some of the highlights that I like:

    • Paste Using Filter - You can now apply a filter to any text you paste in. For example you can create a filter to add hyperlinks to certain company phrases.
    • Columns Edit - Now its easy to remove or rearrange data in CSV files.
    • FTP/SFTP Browser - Lots of code cleanup with the FTP/SFTP browser window.
    • Canonize - Allows you to perform batch search replace using a reference file. This is great when you need to run the same file clean up command as part of your daily task.
    • Color Scheme now carries over to the sidebar

    ColorScheme_thumb.jpg
    The Editor window difference between version 11 and version 12 of BBEdit.
    Click on image for a larger version.

    Complete details are listed on theirBBEdit 12.0 Release Notes.

    Are You Using Completion Correctly?

    One of the Preference changes Bare Bones made was to move the Completion into its own category. I actually had it turned off because I wasn't really using it that much. Big Mistake!

    BBEdit text completion makes typing HTML commands so much easier. You don't need to use the HTML Markup Tools palette. Simply type in the first few letter and then select the text completion that works for you.

    For example, Typing in the words 'an' will bring up the anchor drop down. Hit Return then type the URL then Tab then the text you wish to link. It's a lot faster than bring up the anchor dialog box.

    It might take a few tried to get used to it, but once you have gotten used to it, it will speed up your HTML work.

    Create a BootStrap Panel Text Completion

    If you do any work with Twitter's Bootstrap your probably creating a lot of panels. Here's a simple step to add a panel to BBEdit Text Completion so that it will be super easy to create panels.

    To get you started, copy the following text to a BBEdit file:

    <DIV class="panel panel-default"><div class="panel-heading"><h3 class="panel-title"></div>
    <div class="panel-body">
    
    </div></div>
    

    Highlight the text, right click and select "Save Selection as Clipping..."

    cryan

    Call it whatever you want, the name is important because that's going to be your Text Completion trigger. Mine is simply: panel.

    Create a new set and call it Bootstrap. This will help you organize common Clippings

    BBEdit Panel

    Test it out! Type in the word 'panel' in any BBEdit document and you should see the drop down.

    How awesome is that! Now you can create text completions for all your panel types. Don't forget to add one for Wells and responsive Tables too!

    Getting BBEdit

    You can download a trial version of BBEdit from their website. You'll have 30 days to try out all the features.

    March 1, 2017

    Emoji on the Command Line

    In today's environment, Developers and QA engineers quite often have to log in to a remote AWS server that has virtual servers to perform tasks. Sometimes they are busy and may forget which server they are monitoring. One way to fix this is to use the emoji name in the Macintosh prompt. This way you know that your back on your computer and not on any production AWS server.

    You will need to use Apple's Terminal app to add Emoji to the prompt, as iTerm doesn't really have good emoji support. This isn't an issue since your not going to be using emoji all the time.

    Enable Emoji at the Command Line

    Open Terminal app and use nano to modify the .bash_profile file:

    nano .bash_profile

    Tech Note: This will not work using BBEdit. This functionality appears to be an exclusive functionality of the Terminal app.

    Add a new line like the following:

    PS1=" "

    PS1 is the Bash variable for Prompt.

    Now pull down the "Edit" menu and choose "Special Characters", then select "Emoji" from the special character menu

    Find the Emoji you want to use in the shell prompt, I would suggest an Apple or the House. Then drag & drop it into the PS1=" " line so that it's contained within the quotes.

    Save the .bash_profile change with Control+O then exit out of nano with Control+X

    Open a new Terminal window to see the emoji as the prompt

    Bash Login

    What is Nano?

    nano is a small, free and friendly editor which aims to replace Pico, the default editor included in the non-free Pine package. Rather than just copying Pico's look and feel, nano also implements some missing (or disabled by default) features in Pico, such as "search and replace" and "go to line and column number".

    Bash Generator

    If you want more out of your Bash Prompt, check out the Bash Generator where you can create a productive Bash Prompt.

    February 28, 2017

    Chrome Flash Shockwave File

    Chrome has implemented some strict security that may prevent embedded website's YouTube videos from playing on auto-load. If you have Google's Chrome Canary and visit some websites, you may find that a mystery file gets downloaded.

    If you open the mystery file in BBEdit, you may find the following:

    Google Chrome File

    Notice that the file starts with CWS. This indicates that the downloaded file is a Flash Shockwave file. This Shockwave file format is no longer being supported by Chrome, and other browsers may soon follow.

    Why did the file get downloaded?

    Chrome doesn't know what to do with the file, so instead of playing it, the file gets downloaded.

    Ignoring the file, instead of downloading would have been a been a better solution.

    You can get some additional background information from user kryptkat over on programming.com tech board:

    https://cboard.cprogramming.com/tech-board/126640-cws-youtube-problem.html

    Quick Solution for Web Developers

    If this is happening to files on your website. You are probably using an old Embedded link to YouTube. The easy solution is to get the latest Embed URL from YouTube.

    If your using YouTube anyplace on your website, you should download Chrome's Canary and browse your site.

    Google Canary is Google's Developer Browser, it contains the latest and great code base that developers are testing before it become in the mainstream Google Chrome browser.