-
Editing Web Content in VS Code
Okay, so it’s not quite as amazing as the title suggests, but this solution is worth sharing.
I work a lot in Bookstack. It’s a fantastic documentation system built with Laravel. I edit all pages in markdown. There is a markdown pane on the left and a preview on the right. I love the UI (shown below) but unfortunately I cannot move around in the editor like I can in PHPStorm or VS Code, where I have Vim support.
I have a Chrome extension called Wasavi, which is incredible for editing text areas in an inline virtual Vim window. Unfortunately, though, it doesn’t show realtime feedback in the preview pane until I save and close out of the virtual editor.
It occurred to me it’d be useful to just pop into VS Code quickly to edit the doc, then bring those edits back into the Bookstack editor in Chrome. At first I dismissed the idea as being “too much work.” After thinking about it for a moment, though, I realized I could MacGyver this relatively quickly with my favorite Mac application, Keyboard Maestro.
Here’s what I came up with. As with most things, I am sure I’ll tweak this over time to make it better, faster, less “error”-prone, etc. I have added a README comment and renamed most actions so it’s (hopefully) easy to understand the approach.
-
Switch Audio Input/Output Device using Alfred
My top two must-have Mac apps are Keyboard Maestro and Alfred. If you know me, you’ve likely heard me say this, ad nauseum. I use these two apps countless times each day. Often I use them to run command line scripts via hotkey. This is one such implementation.
Recently I picked up a Jabra Evolve 65 headset. I keep it connected to my Mac via USB. Also, I have some speakers hooked up via the external speaker jack. You can only send output to one of these devices at a time (speakers OR headset). I desired a way to quick-switch between the two. I chose to use Alfred for this.
The steps below show how to create some quick switchers like this:
Requirements and Initial Setup
-
Bookmark with Dynamic Components via Keyboard Maestro (with Toggl Reports example)
Here’s an example of how you can use Keyboard Maestro to create bookmarks that use dynamic components. For this example I wanted to create a bookmark that would give me the correct URL to get a report of the last 365 days of Toggl time entries. Toggl lets you pass a start date and an end date in the URL. Using KM it’s easy to replace those values with calculated date values.
Click the screenshot at the right to see the macro, which I’ve also provided here: Toggl entries for the last 365 days.kmmacros.
-
Automatic Screenshots of Drupal Content
In an earlier post I recommended webkit2png for automatically screenshotting a list of URLs. A lot of time has passed since that post, and I’ve discovered a more robust tool. Pageres is incredible, and it has a CLI and an api.
I’ll let you discover, on your own, what the Pageres tool can do. I needed to take screenshots of all of the content types on a site, at all of the important resolutions. Here’s a quick Drupal function I threw together to get N number of random nodes per content type:
-
Easy Dummy Text using Python Faker and Keyboard Maestro
Yet again I’ve found a great use for Keyboard Maestro. I’m a web developer and often have to create “filler” or “dummy” text during development. In the past I’ve used Alfred workflows, copy-and-paste, browser extensions, and more. I’ve recently come up with a much cleaner (and more powerful) solution to achieving field-by-field or one-off dummy text.
What do I mean by field-by-field and one-off? Well, I use tools sometimes to automate filling an entire form repeatedly (Fake, Selenium, iMacros, etc.). I’ve even written a Selenium extension to inject random text into the fields Selenium is automatically filling. Unfortunately, this all takes time. Sometimes I just need to fill some fields in a form a few times and move on. It’s not worth automating at that point. Enter Keyboard Maestro.
-
Trigger a Keyboard Maestro Macro with a Finder Shortcut / Icon
Using the Keyboard Maestro URL Handler (KMLink), you can create clickable shortcuts that you can use in Finder to trigger KM macros. Why would this be helpful? I have a macro that synchronizes my tracked time between two different applications. I wanted to trigger this with a simple mouse click, but didn’t want to tie it to a hotkey. I wanted it to feel more like “running an application.” So, I created the shortcut and moved it into my ~/Documents directory. Then, I right-clicked and chose “Get Info” and gave it a nice icon. Lastly, I dragged the item into my dock. Now I have a really nice icon that I can click whenever I want to sync my time.
-
Devel Generate Text Settings
Devel Generate, which is part of the Devel module, makes it really simple to create dummy entities in Drupal. It’ll create everything from users to taxonomy terms to nodes. It does a great job of populating most field types (including images). Sometimes it’d be nice to have more control over the output that it’s generating. In particular, text fields often get populated with too much text.
I’ve written a module to solve this dilemma.
The Devel Generate Text Settings module lets you control the length and format (sentence structure vs. title) of text and long text fields. It also lets you easily add a prefix to the title of the nodes being generated.
One problem you may have run into is for fields that need a limited amount of words or characters. Imagine you have a Father’s Name field. Most of the time you’d expect to see two words (first name and last name). Devel Generate will almost certainly generate more than two words for this field. It may even generate 40! That’s not desirable. We need the dummy content to appear as close to the real thing as possible.
Devel Generate Text Settings gives you the ability to tell Devel Generate to stay within a certain word count, or even hit an exact word count. It also allows you to set the “treat as title” value to true, which removes any punctuation from the generated text and capitalizes the first letter of each word.
Here is what the rule might look like for the field in this example:
1field_father_name, word, 1, 2, trueThe breakdown is: when generating content for the field_father_name field, generate either one or two words. Exclude punctuation and capitalize the first letter of each word.
This is just a sandbox project for now, and it only works with nodes.
Here’s a screenshot of the admin at the time of writing:
-
Grabbing Screenshots for a List of URLs
UPDATE: There’s a better tool for this job. View my new post about Pageres.
webkit2png is a great tool for taking automatic screenshots of websites. Here’s the project’s description: “With tall or wide pages that would normally require scrolling, it takes screenshots of the whole webpage, not just the area that would be visible in a browser window.”
Here’s one way to use this tool to grab an entire list of URLs. First, make a file containing URLs, one per line. Next, simply run this (set filename, output directory, and options as needed):
1cat my_pages.txt | xargs webkit2png --delay=1 -F -D ~/my_pages_images/The “-F” argument will grab only a fullsize screenshot. There are many options to control sizing, filenames, scaling, and more. Run webkit2png --help for available options.
-
Using Alfred to open Chrome and Firefox Bookmarks
I was looking for a decent Alfred workflow to let me easily open my Chrome bookmarks from Alfred. The search lead me to a tool called Brow and this blog post. I’m just writing here to recommend the solution to others. It’s working great!
