Preview Bootstrap in BBEdit

I have used BBEdit off and on for the past 10+ years. Every single Macintosh that I have own has had a copy of BBEdit on it. I don't remember exactly when I purchased my first version of BBEDit, but I did find a "BBEdit 3.0 Prefs." file on a ZipDisk from 1994.

I still have my BBEdit 6.0 and BBEdit 4.02 CDs, probably got them at MacWorld Boston.

What is BBEdit?

Here's a description of what BBEdit is from the BBEdit 4.0.2 documentation (May 8, 1996):

BBEdit is a high-performance text editor for the Macintosh. Unlike a word processor, whose main purpose it to make it easy to write prose that will eventually find its way to a printed page, a text editor is primarily concerned with manipulating large amounts of text.

BBEdit offers pattern searching and replacing, multi-file searching, sophisticated text transformations, and other features not usually found in word processors.

BBEdit has commands that make it easier to edit specific kinds of text such as source files for programming languages and HTML (Hypertext Markup Language) files for the World Wide Web.

Top Uses of BBEdit

Here's the list of task that I do in BBEdit:

1. Zap Gremlins - BBEdit Zep Gremlin feature is pure awesome. It removed all Non-ASCII characters, Control characters and replaces with code. Essential when you have to deal with removing smart quotes.
2. Process Lines Containing - This is a quick and easy way to clean up a large file. I can quickly parse out certain phrases into a separate file.
3. Sort Lines - I use this when I have a list of items that needs sorting, such as customer name or accounts.
4. HTML Markup - BBEdit is my go to editor for all my HTML work.
5. Editing Text Files - Anytime that I have a non-word or rich text file, I'll open it in BBEdit. I have the ability to use any of the text tools if needed.

Preview your Bootstrap pages right in BBEdit

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. Developers like it because it makes it simple to create websites that look great across various platforms. BBEdit???s Preview commands allow you to view your pages in one or more web browsers. With some simple configurations, you can get BBEdit to display HTML using BootStrap CSS.

Via Preview Template

• Using BBEdit reate a Bootstrap template document with external CSS and Javascript references
• This document may can contain anything you like but should define the basic structure and appearance of your desired page.
• Within the document, place a single placeholder: #DOCUMENT_CONTENT#. When you preview a document, the text content will go where #DOCUMENT_CONTENT# appears.
• Quit BBEdit
• Go to "~/Library/Application Support/ BBEdit/" and create a new folder called "Preview Templates"
• Place your Bootstrap template to the folder.
• Launch BBEdit

Via Preview CSS

• Quit BBEdit
• Go to "~/Library/Application Support/ BBEdit/" and create a new folder called "Preview CSS"
• Copy over your Bootstrap CSS file to the new folder, or simply get the CSS from the bootstrapcdn.com.
• Launch BBEdit

Now when you want to preview some HTML text, including BootStrap specific CSS, you simply select 'Preview in BBEdit'. Then select the template, or the CSS file.

Getting BBEdit

Download the latest version of BBEdit from their website. There is a 30-Day trial. BBEdit is $49.99 for an Individual license.

Stitch Effect in Pixelmator

Here's how you create dash lines in an image using Pixelmator. Using Layers and the Style, you can easily create a cool stitch effect.

Unfortunately Pixelmator doesn't have the ability to create dash strokes using the Marquee Tool, so you have to use this trick. I think once you learn how to do it, it will be useful way to use Pixelmator.

Thankfully, Pixelmator is a powerful image tool and doing some simple effects can produce the desired results. It's simply a matter of getting things to work the way you want it to.

Simple steps to add a Stitch effect to any image.

• Open an image that you want to add the Stitch effect and select the layer.
• Using the Rectangular Marquee Tool, select the area where you want the Stitch to appear.
• Hold down the Shift-Command-N to create a new Empty Layer
• Hold down the Option-Command-F to open the Fill Dialog. Select any color you want, just set the Opacity to 0%. This way nothing shows!
• Command-7 To open the Styles Pallet
• In the Stroke section of the Styles Pallet, Select Color
• Change the color to White
• Make the Width to be 2 Px
• Change the Stroke style to be Dash

That's It! Play around with styles setting until you get the desired effect that you want! Have fun designing!

This is what your Styles Setting should be.

Calendar in Swift Publisher

Swift Publisher ($19.99) is a pretty cool application for anyone looking for fundamental desktop publishing tools. While Apple Pages, does have some desktop publishing functionality, Swift Publisher takes it to a whole new level. In the Apple Store Swift Publisher has 38 five-star rating, giving a total of 4.5 stars.

Making Custom Calendars

One of the features that I like about Swift Publisher is how easy it is to integrate Calendars into Designs. Swift Publisher has a Calendar functionality that let you add a month whenever you want, or you can simply use one of the six templates.

The Calendar button is very cool since you don't have to build some complex tables. Simple add the calendar and then right click on it and make the adjustments you need. Saves a ton of time.

Adding Events to Calendars

One of the downsides to using the calendar tool functionality is that you can't modify the dates. You can't highlight holidays or mark special days with a color text or change the background. Well not using Swift Publisher dialog box. However, you can add objects to the calendar, after all, this is a desktop publishing tool.

How I updated the Calendar

The 5-Point star is one of the included smart shapes in the library. I simply selected a red color fill, 1 point stroke and changed the Opacity to 61%. I then resize the star to fit over the date.

The 8th to 11th highlight was using the rectangle tool and change the fill to Linear Gradient Fill and set the Opacity to 62%. I then align the rectangle to fit in the range that I wanted to highlight.

The 22nd was also using the rectangle tool, changed the color to green and the Opacity to 49%. I then align the rectangle to the day I wanted. I then right clicked on Order and the 'Send to Back.' That allowed the text to appear in front of the image.

Note: When you add objects to the calendar, you should group them together if you need to move the calendar around. Otherwise, you'll loose the formatting.

Overall

It would be nice if there was a better way to manipulate the calendar. For example, it would be great if each day was its own object. Since I don't add calendars every day, a few minutes of alignments isn't going to bother me. Having the ability easily add a Calendar month is awesome.

Capto

If your job requires doing any type of screen capture using popular tools such as Skitch, MonoSnap, Snagit or Snapz Pro X - you should certainly check out the newest player to the party - Capto ($29.99) by Global Delight.

Capto was officially launched on April 26, 2016. This application is a step up from their previous screen capture tool - Voila. Voila was a basic screen capture tool that had some cool tools and effects.

Instead of adding new features and functionality to Voila, Global Delight rebuilt their screen capture tool solution and came up with Capto. They wanted a powerful screen capture application that had awesome video capabilities.

Editing Tools

Capto has 15 editing tools to touch up any screen capture: Pencil Tool, Paint Tool, Text Tool, Shape Tool, Arrow Tool, Callout Tool, Highlight Tool, Line Tool, Blur Tool, Eraser Tool, Marquee Tool, Crop Tool, Spotlight Tool, Numbering Tool.

The end results is that Capto helps present your screenshots better. Instead of a basic arrow to point at something, you can have four different ways to point to the feature. The Callout Tool comes in handy when you want to point something out.

Missing Annotation Tools from Voila

Several annotation features didn't make the transition from Voila to Capto:

• Stamp tool - Ability to add 'Confidential, OK, Fail, Quality' and 14 others stamp text
• Effects - Edges, Skew, Filter, Adjust, and Crop

I don't know if any of the above will appear into Capto in future releases. The stamp and edges features seemed pretty cool in Voila.

Video Editing Tools

I don't use many videos in my bug reports, but that might change because of Capto. The video editing clearly gives you more control and makes reporting bugs fun. (Is that really possible?)

Capto makes it easy to add text, simple arrow, callout, blur, and Marker. You can define where it appears in the video and how long it appears. It's very easy to move the objects around and position them exactly where you want. The video timeline shows you where the objects are. You can easily overlap various object within the video.

Capto allows you to import other videos so that you can combine videos captures into one complete video.

Comparison to Other Apps

I had a chance to compare the features of Capto with other screen capture tools that I have looked at in the past:

Snagit ($49.95) by Techsmith - A strong competitor to Capto, and many ways better application. Capto is $20 cheaper with much more powerful video capabilities.

The big advantage that Capto has is video Editing. Snagit only allows you to trim videos and not add any annotation to video. In addition, Capto has a built-in web browser, allowing you to do full page screen captures.

Skitch (Free!) by Evernote - Skitch doesn't support video capture. Skitch have very simple annotations and there's not a whole lot of control or options with the text tool. Skitch does have a cool, 'Previous Snapshot Area' functionality which is nice when you are looking to capture a change of something in the same area.

MonoSnap (Free!) by Monosnap - Basic Annotation Tools. You can capture video and trim, but not add any annotation. Monosnap supports exporting video to .mp4 and .gif. Capto supports .m4v and .mov format and will compress video for mobile devices.

Snapz Pro X ($69) by Ambrosias Software - One of the oldest screen capture tools. No screenshot library, no image or video annotation tools. Much more expensive than Snagit and Capto.

Missing Tools in Capto

With all the tools that's included with Capto, you would think it would be complete. However, there are some other tools that I would like to see, in addition to the missing Voila tools:

• Magnifying Tool - Included in the Preview App.
• Measure Tool - Ability to show spacing issues.
• Different Arrow heads - Would be nice to see something than a basic arrow head.

Summary

I find Capto very practical to use. You can download it and try it yourself download a trial version. If you need a add annotations to videos then Capto is the way to go.

If you don't do much video capture, you may want to see what Snagit offers for just a bit more money. I was impress with their annotation toolset.

Rogue Amoeba's Fission

If your doing any basic audio editing on a Macintosh and looking for a powerful tool that won't break the budget - check out Rogue Amoeba's Fission.

I have been using Fission to modify my audio files since 2006 and find it incredibly easy-to-use to clean up my audio files.

The three things I use Fission for:

• Trim Audio Files recorded in Audio Hijack
• Normalize the audio - Make the audio quality the same throughout the clip
• Convert audio clips from one format to another

Why pay $29 for an Audio Program?

Sure there's some free audio programs out there such as Audacity which is free. Why pay for application?

What makes Fission great is that you can use it to read/write to all sorts of audio formats such as MP3, AAC, Apple Lossless, FLAC, AIFF, and WAV. Audacity doesn't support AAC and Apple Lossless formats. ACC is designed to be the successor of the MP3 format, AAC generally achieves better sound quality than MP3 at similar bit rates.

The smart split feature in Fission created breaks in the audio clip based on silence. This is a great tool when you are digitalizing cassette tapes and makes it easy to split a very large audio file.

Stereo Audio Support

When I first started using I was a bit concern because I only see one track. In other applications, such as Audacity and Sound Edit Pro, there would be separate tracks for left and right audio.

However, Rogue Amoeba's Fission does fully support stereo sound. You don't see it the left/right tracks. When you save the file and play the audio clip you will still have the same stereo sound. You will not loose any stereo sound quality or functionality.

Create Custom Ringtones

Fission has the ability to convert any audio clip to your very own ringtone. How cool is that! Now you can make your favorite clip as a ringtone. Why should you pay Apple $1.29 for a thirty-second ringtone when you can make your own!

Apple requires that all ringtones must be 40 seconds or less.

In Fission, simply select the 40 seconds of audio that you want to use then click on File > Save as iPhone Ringtone. Fission will work it's magic and put the clip right into iTunes ready to merge the next time you sync your iPhone to the computer.

To see your Ringtone in iTunes, make sure that the 'Tones' menu is selected.

Download and Try it Out

You can download Fission on Rogue Amoeba's website and try it out for 30 days. Find out for yourself all the cool ways that you can make your audio clips better.

Posterino

Do you have a bunch of digital pictures that you would like display at your desk? Why not create a cool photo college? You can easily do this with Posterino by Zykloid Software.

There are 46 templates to choose from - including a blank canvas where you can layout your own images anyway you want. There's lots of effect options including circular, grid, grid lines, random and title. You can identify how many images that you want to display and the page layout (Landscape or Portrait)

Simply select the template, and then let your creativity go to work. Posterino syncs to your iPhoto and Photo databases, or you can drag and drop images from the desktop. There's even a feature where it will fill in the image placeholders randomly. Simply adjust the images so that it looks perfect.

Got Pictures?

One of Posterino's templates is called 365. It's your chance to create a 20 x 30 poster of 365 of your best pictures of the year. That's a lot of pictures in one poster. (They put the current year on the bottom right, but you can change that.

This is pretty easy to do, simply go through your pictures in Photos, and rate them. Then you can create a Smart Folder containing the highest rated photos. Select the Album in Posterino and have it randomly place the images in the grid. (Its a lot easier than manually doing it.)

Remember how I said you can adjust the year, well you can change it to name a recent vacation. For example, you can display 365 of the best Disney pictures on a 20 x 30 poster!

Create and Share

You can export the final results to Facebook, Flickr, Twitter, iPhoto and email. You can also make the final product as a desktop image. I like to create 5x7 photos at CVS and have the pictures display on my desk.

A few years ago I created a Random Over Board layout and created a "car door" magnet at Vistaprint. Instead of placing it on the car door, I just put the magnet on my file cabinet.

Mosaic Crop

New in Posterino 3.2 - Mosaic Crop! It give you to display one big image as if they were smaller images. Check out this layout of a recent trip to Boston. This took about 20 minutes to create, with most of the time trying to figure out 16 of the best pictures taken on the trip:

A trip to Boston, Massachusetts displayed Posterino style.

The Mosaic Crop feature appears to work better when you have a single object to focus on. To create a Mosaic-Crop, simply select all the images, and drag an image to one of the selected images.

Worth Buying?

I have been using Posterino off and on since August 10, 2011. It has come in handy during Christmas as I have created some cool posters for gifts. I have upgraded to the latest version and it's so much easier to use than when I got it.

Single-User License is $19.99, while a household license is only $29.99. Download a trial from Zykloid Software and see what creative colleges you create!

BBEdit: Process Lines Containing

Using the 'Process Lines Containing' functionality in BBEdit, I can quickly filter out unwanted lines in a log file:

(Exabot|Crawler|megaindex|AhrefsBot|bot.html|spider|slurp|yandex|bingbot|majestic12)

I use this when I am looking at the Apache's HTTPd server logs and want to filter out Bots and Google hits to my site.

This will look for each line containing any of the matching text, and if one word is found the line is removed from the file. This saves a ton of time of running multiple grep statements.

You can find the 'Process Lines Containing' under the Text menu in BBEdit. I use it so much that I just assigned a custom Menu key equivalent.

Printed List of Applications

I am going to do some summer computer cleaning and remove some applications from my computer off of my iMac computer. Before doing this, I want to get a hard copy of all the applications that I currently have on the computer.

Apple has a nifty way to print out all information about all your apps that you have, even if it???s not in the Application Folder. It???s the Application Software section of the System Report. Check it out:

Getting the List of Computer Apps

• Select the Apple Menu and ???About this Mac"
• Click on ???System Report"
• In the left side, scroll down until you see Applications under Software and click on Applications.
• (It may take a minute or so to load)
• Once completed, Type in Command-P to Print. (You could always save the output to PDF, so you have a good soft copy of the list.)

The output is sorted by the last modified date. This means that best place for me to start is at the last page, as that would contain a lot of older applications that I don???t use much.

Once I printed it out, I'll add it to my circa notebook. Now I havea good record of applications that I had on my computer before my summer cleaning.

Remember not all applications are in the Application folder, some might be in the Document folder or in the Download folder.

Got Too Many Apps?

One way to tell if you have too many apps installed, is to right-click on an image file on the Dashboard then select "Open With." If you see a long list of applications, you should consider streamlining your computer.

In my example, I can see that I have multiple versions of Acorn application installed. I don't even use the application! Most of the applications that I have are one-time use applications for a particular task/functionality that I needed.

Bonus: Finder Search

When you search for Application (Kind is Application) you can sort the results by 'Date Last Opened.' This is a great way to audit my computer applications. I discovered that I have "FirstClass Client 2.5.1" and "SimCity2000" on my computer - applications that I can't even use on the computer, so why should I keep them?

Try the Application Finder search and see what unused applications you have on your computer.

Location Base Smart Albums in iPhoto

This weekend, I was backing up some of my old photos/videos from iPhoto to SmugMug. I was doing this because we recently signed up for the Basic plan and wanted an off-site location to backup our photos and videos. The Unlimited Photo uploads is a great plan.

It's been a while since I used iPhoto, and the location feature is very cool. You can easily create Smart Albums based on locations. This makes it easy to upload a group of photos that I took in a certain location, such as Boston, Ballet or visiting Davis Farmland.

Setting up Location Base Smart Albums.

• Open up iPhoto.
• Under Library select Places.
• You should see a map with red points marking where photos are available. On the bottom of the window you see two options, Smart Album and 'Show Photos' these will show all photos for any point visible on the screen. Use the Zoom and Move tool to adjust the map the way you want.
• Click on 'Smart Album' to create a smart Album from your map view.

Once you set this up when use choose the 'Open' dialog in Chrome/Firefox, click on Photos in the sidebar, then iPhotos and you'll see your new Smart Album, making it super easy to access a large group of similar photos.

The 'Location' feature and the 'Smart Album' by Location was removed in Apple Photos. Not exactly sure why it seems like a cool feature to have.

Keyboard Maestro

Last week I wrote about how awesome BetterTouchTool was. Well there was one thing missing - I wanted a way to run Unix shell commands from a key press. I wanted to have some Bash commands that I wanted executed when I clicked on the F19 key.

I discovered that there is another keyboard tool that bridges the "Unix Shell" gap - Keyboard Maestro by Stairways Software. This is far from a new tool on the market - it's been around for a long time.

Keyboard Maestro

With keyboard Maestro you can assign Unix commands to keys, something you can't do with BetterTouchTool. You can assign all sorts of actions to all your F keys, something that you can't do with TextExpander.

With Keyboard Maestro, I have now had a "random word" key. Anytime that I need a word, I simply press the "F 19" key. This makes testing so much easier, if I need a word, simply hit the F19 key.

Creating a "Random Key" Macro

Here's how to configure Keyboard Maestro so that you can have your own random key: (I assume that you downloaded the software and have it properly setup.)

1. Click Command - N to create a new Macro
2. Call it whatever you want, "Random Word" is a good choice.
3. Click the green plus icon to add a New Trigger, and select the 'Hot Key' Trigger
4. Type in any Key, F13 or F19 are good options, as well as the 'end' button.
5. Click on the green Plus icon next to the 'New Action'
6. With 'All Actions' selected in the Categories, search for 'Shell' and select the 'Execute a Shell Script'
7. Click on 'Display results in a window' and change it to 'type results'
8. Paste the following text in the text area box:

#!/bin/bash
WORDFILE=/usr/share/dict/words
RANDOM=$$;
lines=$(cat $WORDFILE | wc -l);
rnum=$((RANDOM*RANDOM%$lines+1));
sed -n "$rnum p" $WORDFILE | perl -pe 'chomp'

9. Click Edit
10. Try it out! You'll need to have the cursor in a text field, Why not try the browser search.