Skip to main content
Log in
K

KevinGutowski

@KevinGutowski·100 public vizzes

Loading thumbnail…

Simple script to crop pokemon card images

This example is a batch script that crops Pokémon card images into a uniform size and applies a rounded-corner mask. It processes image files by dragging them onto the script or running it in a folder, writing cropped PNGs to an output directory. The script uses ImageMagick’s `magick` command-line tool to perform image identification, cropping, and compositing, specifically leveraging the `identify` operation for dimensions and `convert`-style options for the mask overlay. It also includes a fallback to install ImageMagick via Windows Package Manager (`winget`) if not found.

Jun 16, 2026
Loading thumbnail…

Autolabel screenshots

This example shows a macOS service that automatically annotates screenshots with the URL of the frontmost browser window. When the user captures a screenshot, the AppleScript checks whether Google Chrome or Safari is active, retrieves the current tab’s or front document’s URL, and then sets that URL as the Finder comment on each selected image file. It uses the System Events, Finder, and browser-specific AppleScript dictionaries, leveraging the `POSIX file` and `alias` conversions to apply the metadata. The script only processes files when a browser is frontmost and skips empty URLs.

Dec 5, 2025
Loading thumbnail…

Parse Pokémon Trading Card Online Deckstring

This example parses a Pokémon Trading Card Online deckstring into structured card data, displaying each card’s count, name, type (Pokémon, Trainer, or Energy), set code, number, and variant. The JavaScript function `importDeckString` splits the input by lines, filters empty entries, and extracts card metadata by splitting on spaces, detecting variants via numeric tokens, and classifying card types based on line position relative to header counts. It also normalizes energy symbols like `{G}` into names like “Grass” using the `replaceEnergyBrackets` helper, then passes the resulting array to an `updateTable` function for display.

Apr 6, 2023
Loading thumbnail…

Parse a card from Pokemon-card.com (output a JSON file)

This example parses a single Pokémon card page from pokemon-card.com into a structured JSON file. It extracts the card’s name, type, HP, moves, abilities, weaknesses, resistances, and evolution tree, along with illustrator and regulation-mark metadata. The Python script uses `requests` to fetch the HTML, `bs4` (BeautifulSoup) to parse the DOM, and `json` to output the results. It also handles subclasses like 進化 variants and reads card details from the page’s left and right boxes, returning a complete card record for downstream applications.

Apr 3, 2023
Loading thumbnail…

Parse a japanese pokemon card

This example parses Japanese Pokémon card pages from pokemon-card.com, extracting structured data such as card name, class, types, HP, moves, abilities, weaknesses, resistances, retreat cost, illustrator, regulation mark, rarity, and Pokédex information. It uses the BeautifulSoup library to navigate the HTML and collects attributes into a dictionary, including parsing evolution trees and card rules. The visualization likely displays the parsed card data, sourced directly from the site’s card details pages. The code handles multiple card categories like Pokémon, Trainer, and Energy, with functions for top info, headings, and side boxes.

Mar 21, 2023
Loading thumbnail…

PKMNCards to CSV

This example converts the content of a PKMN Cards webpage into a CSV file. It extracts the table headings and row text from the page’s article elements, then joins them into a comma-separated string. The script uses the DOM API to query elements such as `getElementsByClassName` and `getElementsByTagName`, and triggers a download via a generated anchor element with a `data:text/csv` URI. The output filename is taken from the search-form input value, creating a CSV matching the user’s search query.

Oct 11, 2022
Loading thumbnail…

Reorder pandas column using indexes

This example demonstrates how to reorder the columns of a pandas DataFrame based on a custom index sequence. It first extracts the existing column names into a list, then uses list comprehension to select columns by their numeric positions—specifically indices 3, 2, 1, 4, 6, 4, and 8—creating a new DataFrame with the rearranged order. The code relies on pandas’ column indexing and list slicing to perform the reordering.

Jan 7, 2022
Loading thumbnail…

Hide Connector Nodes

This example hides all connector nodes in a Figma file to declutter a diagram or flow view. The script filters the current page’s children for layers with type `"CONNECTOR"` and toggles their `visible` property to `false`. It uses the Figma JavaScript API (`figma.currentPage.children`) to access the document hierarchy. The visualization focuses on the canvas state before and after execution, demonstrating a simple, programmatic way to clear line-based metadata from the scene without altering underlying content.

Nov 12, 2021
Loading thumbnail…

Reading/writing a sketch file without opening it

This example demonstrates direct, scripted access to Sketch design files without opening the Sketch application, showing both how to read an existing `.sketch` document and how to write a new one. In the reading script, the code uses Sketch’s `Document` API alongside native macOS `MSDocument` methods, specifically `readDocumentFromURL_ofType_error`, to load a file from a hardcoded file path and log its JavaScript representation. The writing script similarly uses `MSDocument`’s `writeToURL_ofType_options_error` to save a new file to a given URL. Both scripts rely on the `sketch` module and coercive bridging from native objects via `Document.fromNative`. The data source is a local file path (`/Users/kgutowski/Downloads/Test.sketch`), and the concrete interaction is entirely file-based, with no visual output rendered.

Oct 19, 2021
Loading thumbnail…

Resize widths of progress bars - Figma

This example shows a Figma plugin script that resizes the segments of a selected progress bar to reflect a set of time intervals. The script uses the Figma API to access the current page selection, reads its padding and item spacing, and calculates new segment widths based on the proportional differences between sequential times in a hardcoded array. It clones the first child element, resizes each clone to the computed width, and appends the new parts to the selection, removing the original extra children first.

Oct 13, 2021
Loading thumbnail…

16:9 - Figma

This example demonstrates a Figma plugin that resizes a selected design element to fit a 16:9 aspect ratio. It calculates a multiplier based on the current width, then uses the `resize` method to set the dimensions to 16 times that multiplier and 9 times it, while also enabling `constrainProportions` to maintain the correct ratio. The code reads the selected frame's properties directly from the Figma API and modifies its dimensions accordingly.

Oct 13, 2021
Loading thumbnail…

Create layers for each pixel with opacities

This example shows a raster image decomposed into one layer per pixel, with each layer’s position and fill color corresponding to the original bitmap’s coordinates and sampled color values. It uses the Sketch JavaScript API, iterating over the image’s width and height via `NSBitmapImageRep` to retrieve each pixel’s color with `colorAtX_y`. The code creates a `ShapePath` for every pixel, assigning the color via an `MSColor` fill, and groups all resulting rectangles under a new `Group` named “pixel layers.”

Oct 1, 2021
Loading thumbnail…

Update Figma Color Descriptions to include RGB

This example demonstrates a workflow for automatically updating Figma color style descriptions to include their corresponding RGB values. It uses the Figma API’s `getLocalPaintStyles()` method to iterate over all paint styles in the document. For each style, the script extracts the `paints[0].color` properties and constructs a description string containing the red, green, and blue channels, scaled from 0–1 to 0–255 using the `(color.r*256).toFixed(0)` calculation. The resulting RGB code is then assigned directly to the paint style’s `description` field, providing a quick way to document color values in a design file.

Sep 13, 2021
Loading thumbnail…

Update Facebook Photos Export with EXIF data

This example restores missing creation metadata to photos exported from Facebook by rewriting EXIF, XMP, and IPTC tags. It reads each album’s JSON file from the `posts/album/` directory, extracts the photo URI and creation timestamp, and converts the Unix timestamp to a readable date. Using `pyexiv2`, it updates fields such as `Exif.Image.DateTime`, `Xmp.photoshop.DateCreated`, and `Iptc.Application2.Caption` with the original timestamp and photo title/description. The script processes all album JSON files in the folder, ensuring the exported images retain accurate capture dates.

Sep 13, 2021
Loading thumbnail…

Name all cards in a deck

A deck of cards is dealt in sequence, with each card flipped and fanned out, and its rank is written directly onto the card face. The example demonstrates a tabletop physics simulation using the Tabletop Simulator API, specifically `getObjectFromGUID`, `deck.takeObject`, `setPositionSmooth`, and `Wait.frames`. A scripted loop waits progressively longer between each card draw, ensuring the animation reveals the full deck order. The last card is handled by directly accessing its GUID and flipping it in place after the deck object is depleted. The source is a Lua gist by KevinGutowski.

Jul 26, 2021
Loading thumbnail…

Get pixel data from image layer at coordinates

This example demonstrates how to extract the color of a specific pixel from an image that is part of a Sketch document. It grabs the first selected layer, converts its image data into an `NSBitmapImageRep`, and then calls `colorAtX_y` to read the RGB value at coordinates (1,2). The result is logged as a CSS string using `MSColor.colorWithNSColor`, showing the pixel’s color in a web-friendly format. The code relies on Sketch’s scripting API and the Cocoa/AppKit `NSBitmapImageRep` class for image decoding.

Jul 20, 2021
Loading thumbnail…

Get structured names of a ComponentSetNode [Figma API]

This example converts a Figma ComponentSetNode into structured variant metadata. The `getVariantMetaData` function parses each child component’s name, splitting on commas and equals signs to extract property names and variant values. It then builds a JavaScript object that lists all detected properties and their unique variants, using arrays to track property order and avoid duplicates. The code relies on native string methods like `split` and array `indexOf` rather than external visualization libraries, focusing on data preprocessing for later charting.

Jun 28, 2021
Loading thumbnail…

Create Variants Automatically

This example shows a Figma plugin that automatically converts selected frame children into reusable component variants, organizing them into a vertical layout. The script iterates through each child frame, finds all matching glyphs by name across the page, and clones each into a new component with a renamed hierarchy based on the parent’s name. Using Figma’s `createComponent`, `clone`, and `combineAsVariants` APIs, it builds variant groups and sets their layout mode. The code demonstrates programmatic component creation and variant combination directly from the Figma document model.

Jun 8, 2021
Loading thumbnail…

SF Symbols -> Sketch

The example imports SVG files from URLs copied to the macOS pasteboard and places them onto a selected artboard in Sketch. It uses the Sketch JavaScript API with `sketch.ShapePath`, `sketch.getSelectedDocument`, and `MSSVGImporter` to parse and convert each SVG into a native layer. The script reads URLs via `NSPasteboard` and `readObjectsForClasses_options`, then positions each imported layer horizontally with an offset of 50 pixels. The code demonstrates batch SVG ingestion from clipboard data into a design document.

Jun 8, 2021
Loading thumbnail…

Read/Write Sketch objects from the pasteboard

This example demonstrates how to copy and paste Sketch layer objects through the system pasteboard, showing both read and write operations. The read script retrieves layers from the pasteboard using `MSPasteboardManager.readPasteboardLayersFromPasteboard` and wraps them with the Sketch JavaScript API. The write script takes a selected layer from `doc.selectedLayers`, wraps it in an `MSLayerArray`, and writes it using `MSPasteboardLayers.pasteboardLayersWithLayers` and `MSPasteboardManager.writePasteboardLayers_toPasteboard`. The code relies on the `sketch` module and native Objective-C class access, with `context.document` providing the document’s color space.

May 20, 2021
Loading thumbnail…

Sketch Logs/Crash Files

This example visualizes a chronological log of Sketch application crash files from a Mac’s DiagnosticReports directory. It shows each crash report as a data point with its file path and formatted creation date. The code uses the Foundation framework’s `NSFileManager` and `NSDateFormatter` to list and timestamp files, filtering for names starting with “Sketch” via JavaScript’s `startsWith`. Output is a plain array of objects, with no graphical rendering library applied.

May 11, 2021
Loading thumbnail…

Get Sketch Crash Log FilePaths

This example shows a log of Sketch crash reports by listing the file paths of crash logs stored in the macOS DiagnosticReports directory. The code filters filenames starting with "Sketch," maps them to full paths, and extracts each file’s creation date using the NSFileManager API, formatting dates with NSDateFormatter. It then outputs an array of objects containing the path, raw date, and formatted date string. The visualization presents these crash log file paths and their timestamps, likely to help users identify when crashes occurred and locate specific diagnostic files.

May 5, 2021
Loading thumbnail…

Triggering an action in Sketch

This example demonstrates how to trigger built-in actions in Sketch by accessing the document’s actions controller. The code uses the `actionsController()` API to invoke specific actions like `MSShowReplaceColorSheetAction` and `MSInsertSymbolAction`, passing in objects such as an `NSMenuItem` with a represented object when needed. It also includes a commented-out script that logs all available action class names to a file. The snippet illustrates direct programmatic control over Sketch’s UI, relying on Objective-C bridging through JavaScript APIs. It references `MSSymbolMasterReference` to handle symbol insertion and uses `try`/`catch` for error handling.

Apr 6, 2021
Loading thumbnail…

Example MathML output from KaTeX

This example displays a collection of math formulas rendered as MathML, generated directly from LaTeX code by KaTeX. It presents an integration-as-summation equation, a matrix multiplication setup, and the quadratic formula. The MathML output uses semantic elements like `<mrow>`, `<msubsup>`, `<mfrac>`, and `<mtable>` to structure the notation, with each formula retaining its original LaTeX source in an `<annotation>` tag. The piece demonstrates KaTeX’s ability to convert LaTeX input into accessible, standards-based MathML markup for web display.

Apr 5, 2021
Loading thumbnail…

Async network download

This example demonstrates asynchronous network downloading within Sketch, fetching a remote sketch file from a GitHub URL. It shows how a document is downloaded and then opened programmatically, with the resulting native Sketch document logged to the console. The code uses the Sketch JavaScript API, including `sketch/async` to create a fiber for managing the operation, and `NSURLSession` with `downloadTaskWithURL:completionHandler:` to perform the download. Upon completion, a completion block reads the downloaded file into an `MSDocument`, error handling is included, and the fiber is cleaned up after processing.

Mar 24, 2021
Loading thumbnail…

Gist 4da3ecb32517e64ddc52428cdb30eaab

This example demonstrates a Sketch plugin that monitors document changes and provides real-time feedback through popup messages. It shows how the plugin reacts to three types of edits: property modifications, object deletions, and object additions or moves. The code uses the Sketch JavaScript API, including `sketch.UI.message` for notifications and `sketch.fromNative` to wrap native objects for access to parent artboards. It logs the full path of each change and distinguishes between moved objects and genuine additions or deletions, with special handling for deletions that are part of a move operation.

Mar 10, 2021
Loading thumbnail…

Make NSTextFIeld clickable and take you to a URL

An NSTextField subclass turns static label text into a clickable hyperlink that opens a specified URL. The example shows how to combine an inspectable URL property with attributed string styling in the `awakeFromNib` method, applying a link attribute, link-colored foreground, and optional transparent underline. It also overrides `resetCursorRects` to display a pointing-hand cursor over the label’s bounds. The implementation uses Cocoa’s `NSAttributedString` and `NSCursor` APIs, with Interface Builder integration via `@IBDesignable` and `@IBInspectable`.

Jan 12, 2021
Loading thumbnail…

Popupmenu Plan

This example shows a macOS status bar popup menu with a search field and selectable items, built using AppKit’s NSMenu, NSMenuItem, NSStatusBarButton, and NSTextField. A custom SMBMenu subclass populates the menu with a text input and action items, while extending NSStatusBarButton overrides mouseDown to highlight the button and display the menu programmatically via popUp(positioning:at:in:). The code relies on AppDelegate selectors for item actions and manages button highlighting through a deinit callback.

Dec 24, 2020
Loading thumbnail…

Swift Structs to Decode Gists API

This example shows Swift structs that decode the GitHub Gists API response for a user's public gists, modeling the `Gist`, `File`, and `Owner` objects with their nested properties. It uses the `Codable` protocol and a `JSONDecoder` with an ISO 8601 date strategy to parse the JSON from `https://api.github.com/users/kevingutowski/gists`, mapping snake_case API fields like `forks_url` to camelCase Swift properties via `CodingKeys`. The code also demonstrates decoding the dynamic `files` dictionary using `GenericCodingKeys` to handle arbitrary filenames.

Dec 23, 2020
Loading thumbnail…

Decode JSON with Dynamic Keys using Decodable

This example demonstrates how to decode a JSON object with dynamic keys using Swift’s `Decodable` protocol, mapping student IDs like "S001" to an array of `Student` objects. The `School` struct implements a custom `init(from:)` decoder, which uses a `nestedContainer(keyedBy: GenericCodingKeys.self)` to iterate over all keys in the "students" dictionary and decode each entry. `GenericCodingKeys` is a custom `CodingKey` type that accepts any string value, while Foundation’s `JSONDecoder` parses the embedded sample JSON data. The code prints the first decoded student after processing.

Dec 23, 2020
Loading thumbnail…

Trying to figure out how to encode response into swift objects

This example shows how to map a GitHub Gist API response into Swift model objects. It defines `Gist` and `File` structs that conform to the `Codable` protocol, with a custom `CodingKeys` enum to map the JSON key `raw_url` to the `rawURL` property. The provided `response.json` demonstrates the nested structure of the files dictionary, which the code flattens into an array of `File` objects. The example uses `JSONDecoder` to parse the data into these strongly typed Swift types.

Dec 23, 2020
Loading thumbnail…

Testing the api for multiple files

This example demonstrates a minimalist test of the GitHub Gist API by rendering two JavaScript files, `fileName1.js` and `fileName2.js`, which contain simple console log statements. The visualization displays the raw file contents as retrieved from a Gist, using JavaScript's `console.log` output to show the API's response. The code fetches multiple files from a single Gist endpoint and presents the returned data in a clean, text-based layout, highlighting the API's role in serving static file content.

Dec 23, 2020
Loading thumbnail…

Progressbar modal

This example demonstrates a modal progress bar displayed over the main application window, using a native macOS sheet to block interaction while a short task runs. The code creates an `NSProgressIndicator` with a blue tint, embeds it in an `NSWindow` configured as a document-modal sheet, and attaches it via `beginSheet_completionHandler` on `NSApplication.sharedApplication().mainWindow()`. The progress animation starts immediately, and the sheet closes after a three-second delay using `setTimeout` and `endSheet`, illustrating Apple’s AppKit APIs in JavaScript via JSTalk-style syntax.

Oct 5, 2020
Loading thumbnail…

Clipboard/Pasteboard reading

This example demonstrates a live readout of the system clipboard’s contents by inspecting the pasteboard directly. It shows the list of available data types, then retrieves and prints the plain-text and HTML representations, as well as the raw bytes of a custom Apple WebKit type. The code uses the macOS `NSPasteboard` API and its `generalPasteboard()` method to access the current pasteboard item, calling `pasteboardItems()` and then `stringForType` and `dataForType` to extract specific formats. The output is logged to the console, revealing the actual clipboard payload.

Sep 9, 2020
Loading thumbnail…

Gradescope MC Latex Formatting

This example provides LaTeX macros for formatting multiple-choice and select-all questions in Gradescope. It defines two convenience commands, `\chooseone` and `choosemany`, which render large circle and square symbols from the `wasysym` package as answer bubbles. The code demonstrates inline usage beside text and additionally shows how to arrange options as a vertical list using the `enumitem` package with empty labels. The rendering approach relies purely on LaTeX typesetting to produce printable answer fields for assignment PDFs.

Sep 1, 2020
Loading thumbnail…

Sketch Global colors to Layers

This example demonstrates how to extract the global color palette from Sketch’s asset library and render each color as a square swatch on the selected page. It iterates through the document’s color assets, converts each color from its native color space to a hexadecimal string, and creates a new `ShapePath` for every swatch, positioning them in a horizontal row. The script uses the Sketch JavaScript API, specifically `MSPersistentAssetCollection`, `ShapePath`, and `Rectangle`, with custom helper functions for RGB-to-hex conversion.

Aug 28, 2020
Loading thumbnail…

Sketch Prefs

This gallery piece visualizes a user’s Sketch preferences by reading the application’s default settings from the operating system. The data, sourced from the user’s `NSUserDefaults`, is extracted using a JavaScript script that logs the dictionary representation of these preferences. The visualization renders this preference data as a structured layout, built with the Processing library, mapping each key-value pair to a graphical element. The example demonstrates a direct pipeline from system configuration to visual form, relying on the `defaults.dictionaryRepresentation()` API to provide the underlying dataset for display.

Jul 23, 2020
Loading thumbnail…

Check for SF Symbols

This example demonstrates a utility that checks whether the current macOS system supports SF Symbols by reading the operating system version from the SystemVersion.plist file. It shows a boolean result indicating compatibility with the SF Symbols framework. The code uses the NSDictionary API to parse the plist, splits the version string into numeric components, and compares them against the minimum required version (10.15). The function returns true only when the major and minor version numbers meet that threshold, providing a quick environment check for developers.

Jul 22, 2020
Loading thumbnail…

Move Global Assets Colors and Gradients to Document Asset Colors and Graidents

This example shows how to move color and gradient assets from the global library into a document's asset collection. The code first retrieves the shared global assets using `MSPersistentAssetCollection.sharedGlobalAssets()`, then calls `colorAssets()` and `gradientAssets()` to extract those specific asset types. It then accesses the current document through `context.document` and uses its `documentData().assets()` object to set these collections with `setColorAssets()` and `setGradientAssets()`. The script relies on the Adobe InDesign scripting API, which provides access to document-level asset management.

Jul 20, 2020
Loading thumbnail…

Reset Image Fills

This example restores the default image assets in Sketch by resetting the global image fills to the application’s built-in preset collection. It loads the preset file from the bundle path, retrieves its image collection and image list, then assigns them to the shared global assets. The code uses the Sketch JavaScript API via `NSBundle`, `NSURL`, and `MSPersistentAssetCollection` to perform the reset, effectively replacing any user-modified fills with the factory defaults.

Jul 14, 2020
Loading thumbnail…

Internal API Inspection

This example visualizes the internal structure of an Objective-C object by dumping its class hierarchy, properties, methods, and protocols. It uses the Mocha framework (via `[obj class].mocha()`) to query the runtime and displays the results as a tree through `obj.treeAsDictionary()`. The visualization shows the object’s properties, class methods, instance methods, and protocols, both with and without ancestor inheritance. The data is generated dynamically from the live object, with log output structured for inspection, making it a tool for debugging and exploring API internals.

Jun 17, 2020
Loading thumbnail…

Attach modal to Sketch document

This example shows how to attach a modal alert dialog to the active Sketch document window using the Sketch scripting API. It creates an `NSAlert` with OK and Cancel buttons and presents it as a sheet via `beginSheetModalForWindow:completionHandler:`. The completion handler uses a block created with `__mocha__.createBlock_function` to process the return code, logging success or cancelation. The code manages asynchronous execution through `coscript.createFiber()` and cleans up the fiber after the dialog closes.

Jun 14, 2020
Loading thumbnail…

Attempting to Highlight First Letter

This Sketch plugin example demonstrates how to highlight the first letter of a selected text layer. The script calculates the bounding box of the first glyph using Sketch’s text layout APIs, including `NSTextContainer`, `NSLayoutManager`, and `boundingRectForGlyphRange`, then draws a red rectangle behind that letter. The gist creates a reusable highlight shape and removes any previous version, making it easy to re-run the code. The plugin relies on the Sketch.js library to access and manipulate the document’s layers and shapes.

Jun 13, 2020
Loading thumbnail…

NSAttributedString attributes

This example demonstrates programmatic manipulation of rich text attributes within a Sketch document. It shows how to access selected layers, locate the application’s Plugins menu, and log the first menu item’s title. The code then explores setting a variety of text attributes—such as superscript, underline style, stroke width, and writing direction—on an `NSAttributedString` object loaded from an RTF file. The implementation relies on Sketch’s JavaScript API, including `sketch.getSelectedDocument()`, `NSAttributedString`, and methods like `addAttribute_value_forRange`, with several experimental calls commented out.

Jun 13, 2020
Loading thumbnail…

Image Attachment to a Text Object

This example demonstrates how to embed an image attachment directly into a specific position within a text object in Sketch. The code uses the Sketch API to access the selected layer and its editing delegate, then modifies its `NSTextStorage` by replacing a character range with an attributed string containing the attachment. It relies on `NSFileWrapper`, `NSTextAttachment`, and `NSAttributedString` to load and insert the image, setting its display bounds. The image path is hardcoded to a local file, and the insertion occurs at character index 4 while editing is active.

Jun 10, 2020
Loading thumbnail…

Pasteboard

This example demonstrates the various formats a copied Sketch object can take when retrieved from the system pasteboard. It shows that a single clipboard item contains multiple simultaneously available data representations, including native Sketch JSON, Adobe PDF, and TIFF image data. The visualization uses AppleScript’s `NSPasteboard.generalPasteboard().pasteboardItems()` API to access clipboard contents, then calls `items[0].types()` to list the available MIME types and `items[0].dataForType('com.bohemiancoding.sketch.v3')` to extract the raw binary data, which appears as a hexadecimal dump. The code reveals the clipboard’s multi-format nature without rendering any graphical output.

Jun 10, 2020
Loading thumbnail…

Get layer from ID

This example demonstrates how to retrieve a specific layer from a Sketch document by its ID using the `document.getLayerWithID(layerID)` method. It also shows an alternative approach with the Sketch API’s `sketch.find(`#${layerID}`)[0]` function, which queries the document tree for elements matching a CSS-style selector. The code highlights two concise techniques for locating layers programmatically, enabling direct access to layer objects for further manipulation or inspection. The gist focuses on the retrieval pattern itself, without additional rendering or data processing.

Jun 10, 2020
Loading thumbnail…

Reading Sketch preferences for colors

This visualization captures a software designer’s preferred color settings for Sketch by reading them directly from the application’s saved user defaults. The code uses the `NSUserDefaults.standardUserDefaults()` API to retrieve the stored `colorForMeasurements`, `colorForFlows`, and `colorForSnapsAndGuides` preferences, then decodes the binary data with `NSKeyedUnarchiver`. The resulting color values are likely rendered as a palette or swatches, revealing the user’s chosen hues for interface measurement overlays, flow arrows, and snapping guides, all without manual input.

Apr 28, 2020
Loading thumbnail…

Add a URL to a text layer

This example shows how to add hyperlinks to text layers in Sketch by assigning URLs directly to selected text or its active text range. When a user selects one or more text layers and runs the script, it prompts for a URL, then applies that link either to the entire layer or to the specific highlighted portion when text is being edited. The code uses the Sketch JavaScript API, specifically `sketch.getSelectedDocument()`, `layer.sketchObject.addAttribute_value()`, and `UI.getInputFromUser()`, along with `NSLinkAttributeName` and the `textStorage.addAttribute_value_range()` method for formatting range selection. After updating, it reloads the inspector to reflect the changes.

Apr 11, 2020
Loading thumbnail…

Get frames of overrides

This example demonstrates how to extract and log the bounding boxes for every override associated with a selected layer’s container in a Sketch document. The script accesses the first selected layer, retrieves its override container, and iterates through the flattened children to print each override’s path bounding box to the console. It relies on the Sketch JavaScript API’s `sketchObject` and the custom `CGPathGetPathBoundingBox` function, with the data sourced directly from the user’s active document selection.

Mar 31, 2020
Loading thumbnail…

Color Picker Sketch [WIP]

A prototype color picker dialog built with macOS AppKit. It shows a modal alert containing an `NSView` with a single `MSColorWell` button, pre-set to red, which can display a popover when clicked. The code constructs the alert, adds the color well as an accessory view, and runs the dialog modally via `runModal`. The action `presentColorPicker:` handles the well’s interaction, though its implementation is not shown.

Mar 16, 2020
Loading thumbnail…

Preference Pane Identifiers

This example logs the identifiers of every preference pane in Sketch’s settings window, printing an array of seven string values such as "general," "canvas," and "plugins." It works by calling `MSPreferencesController.sharedController()` and then invoking `toolbarItemIdentifiers()` on that shared controller instance. The output appears as an `__NSFrozenArray` in the console, revealing the fixed order of panes as defined by the application. The code relies on Sketch’s internal Objective-C API exposed through its JavaScript runtime, with no external libraries or rendering involved.

Mar 10, 2020
Loading thumbnail…

Highlight a layer

This example demonstrates how to visually isolate a single layer within a Sketch document by highlighting it. The code uses the Sketch JavaScript API, specifically `sketch.getSelectedDocument()` and `document.selectedPage.layers[0].layers[0]`, to access a target layer. It then triggers the highlight by calling `normalEventHandler.setHighlightedItem(layer.sketchObject)` on the document’s event handler manager. The visualization relies on Sketch’s built-in interface to render the highlighted state, with no external data source or custom rendering logic involved.

Mar 8, 2020
Loading thumbnail…

See if a layers style is out of sync

This example demonstrates how to check whether a selected layer’s style has diverged from its associated shared style, indicating a potential sync issue. The script uses the `sketch` JavaScript API to retrieve the active document, access the first selected layer, and then inspect its `style` object. It calls `style.isOutOfSyncWithSharedStyle(selectedLayer.sharedStyle)`, which returns a boolean value that is printed to the console. The code relies on the selected layer’s `sharedStyle` property as the reference point for comparison, without modifying any document state.

Mar 7, 2020
Loading thumbnail…

Adding a view overlay on the Sketch canvas

This example uses the Sketch JavaScript API to add a fixed-size green view overlay onto the canvas of the currently selected document. The code retrieves the canvas placeholder view and its first subview, then creates an NSView with a green background and adds it as a subview. Layout constraints—using NSLayoutConstraint and relatedBy methods—anchor the overlay to the top-left corner and enforce fixed width and height values of 40 and 100 points, respectively.

Mar 7, 2020
Loading thumbnail…

Add a Color layer on top

A Sketch plugin script adds a full-artboard color overlay to visually inspect design contrast. It targets either a selected artboard or a layer within one, then creates a locked `ShapePath` named "Greyscale Layer" with a white fill and `Style.BlendingMode.Color`. The script uses `sketch` APIs like `getSelectedDocument`, `Rectangle`, and `ShapePath` to construct the overlay. If a greyscale layer already exists on the artboard, the script removes it before adding a fresh one.

Mar 5, 2020
Loading thumbnail…

Highlighting Attempt

This example highlights the first four characters of selected text layers in a Sketch document with a yellow background. The script uses the Sketch JavaScript API through the `sketch` library to access the current document and its selected layers. It filters layers for those of type "Text" and then applies the highlighting by calling `addAttribute_value_forRange` with the `NSBackgroundColorAttributeName`, the color yellow, and a range covering positions zero through four. The operation directly manipulates the native Sketch layer objects via their `sketchObject` property.

Feb 11, 2020
Loading thumbnail…

Add padding to artboard (WIP)

This plugin demonstrates how to adjust an artboard's dimensions and reposition its contents with a user-defined padding value. It uses the Sketch JavaScript API, including `doc.selectedLayers`, `Rectangle`, and `UI.getInputFromUser`, to prompt for input and modify layer frames. The script shifts the artboard’s frame outward by the padding amount while moving all nested layers inward by the same value, preserving their relative positions. It relies on `selection.frame` and `layer.frame` properties to apply geometric transformations.

Feb 10, 2020
Loading thumbnail…

Split Rectangle into equal segments with padding

This example demonstrates a Sketch plugin script that splits a selected rectangle into five equal segments with consistent padding between each segment. It shows how to programmatically resize the original shape and duplicate it to create evenly spaced copies. The code uses the Sketch JavaScript API, specifically `sketch.getSelectedDocument()`, `ShapePath`, and the `selection.duplicate()` method, along with frame properties like `frame.width` and `frame.x`. The calculation accounts for the fixed padding of 4 pixels when determining the new width of each segment and the offset for each duplicated copy.

Feb 10, 2020
Loading thumbnail…

Basic Window Loading a URL

This example demonstrates a Sketch plugin that opens a floating panel and loads a remote SVG image from the Sketch website into a web view. The plugin uses AppKit’s `NSPanel` to create a borderless, floating window with hidden minimize and zoom buttons. It initializes a `WKWebView` from the WebKit framework, configures it with developer extras enabled, and loads the specified URL via `NSURLRequest`. The panel is centered and kept on top using `NSFloatingWindowLevel`.

Dec 24, 2019
Loading thumbnail…

Add a dashed underline to a text layer

This example demonstrates how to apply a dashed underline to text layers in a Sketch document using the `sketch` JavaScript library. It first retrieves the selected document and filters the selected layers to only include those of type "Text". For each text layer, the script uses the `addAttribute_value` method to set the underline style to a combination of single and dot pattern, referencing the `NSUnderlineStyleSingle` and `NSUnderlineStylePatternDot` constants. The code comments list alternative underline styles and patterns available for modification.

Oct 25, 2019
Loading thumbnail…

Gist ffc41d0e0de68f09f053d577f0e3e76a

A floating HUD panel displays a minimap of the current document's artboards, implemented with QuartzCore's layering and NSPanel APIs. The code constructs a scaled map from `CAShapeLayer` objects for each artboard and a semi-transparent viewport rectangle representing the visible canvas area. The map's position and scaling are computed from the document's scroll origin and zoom value, then fitted to the panel using `CATransform3DMakeScale` and custom frame-calculation functions.

Oct 6, 2019
Loading thumbnail…

Stack view example

This example demonstrates an NSStackView managing three colored radio buttons arranged vertically, showing how Auto Layout constraints position the stack view within an NSPanel window. The code creates a floating panel using AppKit classes like NSPanel and NSStackView, configuring the buttons with system blue, red, and green backgrounds. It sets orientation to vertical and applies spacing and alignment settings, then adds horizontal and vertical constraints to pin the stack view to the panel’s content view. The example also toggles a user default to visualize mutually exclusive constraints during layout debugging.

Sep 17, 2019
Loading thumbnail…

Trigger a Sheet alert

This example demonstrates a temporary modal progress bar that appears over the Sketch document window, indicating an ongoing sheet operation. The script uses the `sketch` API to access the selected document and its window controller. It constructs a 200x100 pixel `NSWindow` with a title and modal style, adds an `NSProgressIndicator` that starts animating in blue, and begins a sheet session with `beginSheet_completionHandler`. After a five-second timeout, the sheet is dismissed with `endSheet`, completing the interaction.

Sep 13, 2019
Loading thumbnail…

Gist af897f78753e7f850cce144cb3a1ce26

This example demonstrates a Sketch plugin interface with synchronized slider, input field, and stepper controls that all adjust the same numeric value. The code uses Objective-C with Apple's Cocoa and JavaScriptCore APIs, including `MOJavaScriptObject` for bridging JavaScript callbacks. It loads a user interface from a NIB file via `loadNibFile` and `NSBundle`, and shows how `sliderChange`, `inputChange`, and `stepperChange` actions keep the three widgets in sync. The `clickHello` method invokes a JavaScript function through `callFunctionWithArguments`, connecting the native UI to scripted behavior.

Aug 24, 2019
Loading thumbnail…

Replicating Sketch's Preview window

This example demonstrates a Sketch plugin that mirrors the application’s Preview window into a floating panel, replicating the live webview content. It uses Sketch’s JavaScript API, including `NSApplication`, `NSPanel`, and `NSThread`, to locate the Preview window, copy its webview configuration, and load the same URL into a new `MSMirrorWebView`. The panel is styled as a floating, closable window without minimize or zoom buttons, and the mirrored webview is added as its only subview. The code does not process data but directly clones an existing UI component.

Aug 21, 2019
Loading thumbnail…

Loading a XIB file in a Sketch plugin

This example demonstrates how a Sketch plugin loads a XIB file to create a native interface panel. The JavaScript entry point, `script.js`, uses the `sketch` module and attempts to run the plugin, catching errors to dynamically load the `HelloSketch` framework via Mocha’s `loadFrameworkWithName:inDirectory:` method. The Objective-C class `HSMain` then loads the `HSPanel` nib using `NSBundle loadNibNamed:owner:topLevelObjects:` and exposes a `helloText` method that logs and returns a greeting string, which is displayed through `sketch.UI.message`.

Aug 17, 2019
Loading thumbnail…

Gradescope: Remove rubric cover pages from Export Submissions

This tool removes rubric cover pages from PDF exports generated by Gradescope. It processes all PDF files in a specified input folder, reading each that contains student submissions prefixed by one or more rubric pages. The script uses `pdfrw`’s `PdfReader` and `PdfWriter` to selectively copy only the pages after the given number of rubric pages into a new output folder. It relies on command-line arguments for the input and output directories and the count of rubric pages to skip.

Aug 12, 2019
Loading thumbnail…

Toggling Sketch menu items

This example demonstrates how to toggle menu items in a Sketch plugin by manipulating the application’s main menu. The code uses the Sketch JavaScript API, specifically `NSApplication.sharedApplication().mainMenu()` and `itemWithTitle` to locate the Plugins submenu, then targets the "BaseAlign" item. It disables the item with `setEnabled(false)` and sets its state to checked with `setState(true)`. The menu is accessed directly through Cocoa’s AppKit framework, showing how plugin authors can programmatically control UI elements.

Jul 19, 2019
Loading thumbnail…

Create a notification within a sketch plugin

This example shows how a Sketch plugin can display a native macOS notification to the user. The code creates a new `NSUserNotification`, assigns it a unique identifier, and sets its title, subtitle, and informative text. It then retrieves the default notification center and delivers the notification. The data is hard-coded strings, and the implementation relies on the Sketch plugin API’s `NSUserNotificationCenter` and `NSUserNotification` classes.

Jul 19, 2019
Loading thumbnail…

Animating the background blur of a NSView that is layer backed

This example demonstrates a layer-backed NSView that fades in with a Gaussian background blur over a fixed image, then reverses the effect. The animation cycles through a state where the view’s background transitions from fully transparent to a blurred, semi-transparent black overlay, using CABasicAnimation and CAAnimationGroup to coordinate opacity and blur radius changes. The code leverages the Objective-C libraries (NSView, CALayer, CIFilter) and the inherent layer-backing system to apply the blur filter via `CIGaussianBlur`, with timing controlled by `CAMediaTimingFunction`. The data source is a local PNG image file, and the animation runs on a timer, hiding the view after the fade-out completes.

Jun 23, 2019
Loading thumbnail…

Getting a CALayer to animate implicitly

This example demonstrates implicit CALayer animation on macOS, where a red sublayer moves from one position to another when its `position` property changes. The code uses AppKit’s `NSPanel` and `NSView` with `wantsLayer` enabled, alongside Core Animation’s `CALayer` and `CATransaction` to animate the layer’s position over one second. The layer’s bounds and blue border are set explicitly, while the sublayer’s movement is triggered via a `setTimeout` callback, showing how implicit animations work for layer properties.

Jun 12, 2019
Loading thumbnail…

Trying to get NSPanel to expand downward.

A JavaScript sketch demonstrates an attempt to animate an NSPanel downward using the Sketch plugin API. The code creates a floating panel with a title bar and close button, initially sized at 312 by 210 pixels. After displaying the panel, it calls `setFrame_display_animate` to enlarge its height by 50 pixels. However, because the panel's origin remains unchanged, the animation expands the panel upward instead of downward. The commented-out alternative adjusts the y-origin by negative 50 pixels, which would shift the panel up to achieve the desired downward expansion. The sketch relies on `NSThread.mainThread().threadDictionary` for panel management and `NSMakeRect` for frame geometry.

Jun 12, 2019
Loading thumbnail…

Testing how to animate a NSBox on the screen.

This example demonstrates how to animate a red NSBox across a macOS window using AppKit’s animation proxy. The code creates a floating NSPanel, configures it with a custom style mask, and disables the minimize and zoom buttons. An NSBox is added as a subview to the panel’s flipped content view, then its frame origin is moved via the `animator()` proxy to trigger a smooth animation. The implementation relies on `NSThread.mainThread().threadDictionary` to manage the panel’s lifecycle for repeat executions.

Jun 12, 2019
Loading thumbnail…

Gist d491c1b772929648bf84c486fc5a745c

This sketch plugin example demonstrates modifying font attributes, specifically applying small-caps settings, to text within a selected layer in Sketch. It shows how to retrieve font information for each character range in a text layer using the Sketch API, apply a new font descriptor with the desired attribute via `NSFontDescriptor` and `NSDictionary`, and update the text storage with the modified attributes. The code relies on the `sketch` library and Sketch’s internal `NSFont` and `TextStorage` classes to perform the attribute substitution.

Jun 2, 2019
Loading thumbnail…

Gist 9d6f5a0980393c12aca5243aae8947e0

This example demonstrates how to modify font attributes for a selected range of text within a Sketch document using the Sketch JavaScript API. It applies small-caps styling by accessing the text layer’s editing delegate and text storage, then constructs an `NSFontFeatureSettingsAttribute` dictionary to adjust the font descriptor. The code specifically uses `NSFontFeatureTypeIdentifierKey` and `NSFontFeatureSelectorIdentifierKey` for the `kLowerCaseType` and `kLowerCaseSmallCapsSelector` settings, then creates a new `NSFont` with `NSFontDescriptor` and applies it to the selected range via `addAttributes:range:`.

May 28, 2019
Loading thumbnail…

Trying to render a tableview

This example shows a simple table view populated with seven columns of numeric string data across four rows, all rendered inside a scrollable window. The code uses the Objective-C based Cocoa framework with its `NSTableView`, `NSTableColumn`, and `NSScrollView` classes to build the interface. Data is provided through a custom `NSTableViewDataSource` implementation, which supplies rows via `numberOfRowsInTableView` and cell values through `tableView:objectValueForTableColumn`, pulling from a hardcoded array of dictionaries. The table displays two visible columns, "First" and "Second," within a scroll view that supports both horizontal and vertical scrolling.

May 24, 2019
Loading thumbnail…

TableView start

This Sketch plugin example demonstrates a floating panel containing a table view with a custom data source. The panel is built using native Sketch APIs like `NSPanel`, `NSScrollView`, and `NSTableView`, and it populates the table through a dynamic delegate created with `MochaJSDelegate`, which intercepts selector-based callbacks to supply row and column values. The code sets up a single-column grid with alternating row colors, red grid lines, and a fixed height, and logs data requests to the console.

May 23, 2019
Loading thumbnail…

Gist 03ea367d00ac593217cf6770ee1cc539

This example demonstrates a Sketch plugin that launches a floating panel window with a table view interface. The code uses Sketch’s JavaScript API, `NSThread`, `NSPanel`, and `NSMakeRect` to construct a 312×210 pixel textured window, position it at the screen center, and set it to float above other windows. It manages a thread dictionary key to prevent duplicate panels, toggling the window open or closed on repeated plugin runs. The plugin calls `document.showMessage()` for user feedback and hides the miniaturize and zoom buttons via `standardWindowButton`, with the table view setup currently stubbed out.

May 18, 2019
Loading thumbnail…

A Sketch snippet to copy global colors to the pasteboard

This sketch copies all global color assets from a Sketch document to the clipboard as CSS rules, converting each color to hex and generating class names. It uses the Sketch JavaScript API (`sketch.globalAssets`) to access color assets and `NSPasteboard` to write the formatted string. The code iterates through every saved color, builds a CSS block with a `.colorN` selector or the asset’s name, and trims trailing whitespace before showing a confirmation message.

May 18, 2019
Loading thumbnail…

Gist b3b904582eaa49475bc90dacbb6d92c9

This example demonstrates how to construct and arrange basic geometric shapes within a Sketch document using the `sketch` JavaScript API. The code programmatically creates an artboard and populates it with a square, a triangle, a hexagon, and a circle, each styled with distinct fill colors or a bordered outline. The `ShapePath` class and its `ShapeType` enumerations are the core components, with coordinates and dimensions set through `frame` objects. The rendering approach is code-driven, defining visual elements directly without external data sources, showcasing the library’s programmatic drawing capabilities.

May 2, 2019
Loading thumbnail…

Grouping Layers - Remove Parents for Each Layer

This example demonstrates how to detach shape layers from their parent artboard, re-parent them into a new group, and automatically resize the group to fit its contents. The Sketch API creates four shapes—a square, triangle, hexagon, and oval—on an artboard, then calls `layer.remove()` on each to sever their parent relationships. The shapes are subsequently added to a new `Group` via the `layers` property, and `adjustToFit()` recalculates the group’s bounding frame. The code uses `sketch.ShapePath`, `sketch.Artboard`, and `sketch.Group` to manage the layer hierarchy programmatically.

May 1, 2019
Loading thumbnail…

Making cool lines in Sketch

A generative drawing built with the Sketch JavaScript API draws a symmetric, web-like pattern of red lines on a black artboard. The example shows how four nested loops create a series of straight ShapePath segments, each with semi-transparent red borders, that collectively form a repeating geometric motif. It demonstrates programmatic layer creation, setting frame and style properties, and using the `adjustToFit` method to size the group. The code uses `sketch.getSelectedDocument`, `Artboard`, `Group`, and `ShapePath` to generate the composition directly within Sketch's document model.

Apr 28, 2019
Loading thumbnail…

Grouping Layers - Create the Group Object First

This example demonstrates how to create a group object before populating it with shape layers, allowing them to be collected under a single named group. The script uses the Sketch JavaScript API via the `sketch` module, creating an artboard and then instantiating a `Group` with `parent: myArtboard`. Four shapes are added as children of that group—a square, a triangle, a polygon, and an oval—each using the `ShapePath` class with specific `frame` and `style` properties. After adding the shapes, the group’s `adjustToFit()` method resizes it to encompass all contained shapes. The code shows how to structure layer hierarchy in a Sketch document programmatically.

Apr 27, 2019
Loading thumbnail…

Grouping Layers - Don't specify the parent when creating each layer

This example demonstrates how to create a group of layered shapes in Sketch without specifying the parent when constructing each individual layer. It builds four ShapePath objects—a square, triangle, hexagon, and outlined oval—then assigns them to a newly created Group with the artboard as its parent. The code uses the Sketch JavaScript API via the `sketch` module, including `sketch.Artboard`, `sketch.Group`, and `sketch.ShapePath` with shape types like Triangle, Polygon, and Oval. After assembling the group, it calls `adjustToFit()` to resize the group to its contents.

Apr 27, 2019
Loading thumbnail…

Paste In SVG code

This example demonstrates how to insert raw SVG markup directly into a Sketch document using the Sketch DOM API and the `sketch/createLayerFromData` function with an 'svg' format. The code prompts the user for an SVG string through `UI.getInputFromUser`, then assigns the resulting layer to the selected page. It relies on the `sketch/dom` module to handle document and page selection, and `sketch/ui` for the input dialog, creating a quick bridge between external SVG code and Sketch’s native layer hierarchy.

Apr 2, 2019
Loading thumbnail…

SketchPreset NSData

An interactive Node.js visualization uses d3.forceSimulation to position a network of SVG circles, each colored by a sketch preset. The sketch data is loaded from a JSON archive and rendered as a force-directed graph. The example demonstrates force layout with drag behavior and visual encoding of categorical data through node fill colors.

Mar 26, 2019
Loading thumbnail…

Load a JSON file locally

This example demonstrates how to load a local JSON file into a Node.js environment and display its contents in the log. The code constructs a file URL pointing to a local `meta.json` file, retrieves the data using the `NSData.dataWithContentsOfURL` API, and parses it into a JSON object with `NSJSONSerialization.JSONObjectWithData_options_error`. The parsed object is then logged to the console, and any exceptions during the process are caught and reported. The example relies on the Node.js `NSURL`, `NSData`, and `NSJSONSerialization` libraries to handle file access and JSON parsing.

Mar 19, 2019
Loading thumbnail…

Get Insertion Point Color

This example shows how to retrieve the color of the text insertion point caret within Sketch’s text-editing mode. It reads the currently selected text layer and, if the layer is actively being edited, logs the numeric caret color returned by the native `textView.insertionPointColor()` API. The snippet relies on Sketch’s CoreText framework, using `sketch/ui` to display a warning message when no editable text is selected and `sketch/dom` to access the selected layer’s editing delegate. The code is provided as a single JavaScript file, with no external dependencies or data source.

Feb 17, 2019
Loading thumbnail…

Insertion Blinker turned White

A Sketch plugin script demonstrates converting selected text in a text layer to small caps by modifying its font. It accesses the text layer through Sketch's DOM API and checks if the layer is in editing mode using `sketchObject.isEditingText()`. When active, it applies the new font via `textView.setFont()` and calls `didChangeText()` to refresh the view. The script builds a font descriptor with `NSFontFeatureSettingsAttribute` for lowercase small caps, using CoreText APIs like `kLowerCaseType` and `kLowerCaseSmallCapsSelector`, then creates the font with `NSFont.fontWithDescriptor_size()`.

Feb 17, 2019
Loading thumbnail…

Change Sketch Measurement Color

This example shows a Sketch plugin that programmatically reads the current measurement color from the active document and prints its RGBA values to the console. The code uses the `sketch` library to access the selection, then the `eventHandlerManager`, `normalHandler`, and `measurementRenderer` APIs to retrieve the color as an `NSColorSpaceColor` object. The resulting output confirms a solid red fill. No data source is involved; it demonstrates direct inspection of a Sketch interface element's style.

Feb 1, 2019
Loading thumbnail…

Attempting to set font attributes during selection

This example demonstrates how to modify font attributes of selected text within a Sketch document. It uses the Sketch JavaScript API and the CoreText framework to apply small-caps styling to the first five characters of a text layer. The script accesses the document's selected text layer, checks if it is in editing mode, then retrieves the text storage and font descriptor to construct a modified font with the small-caps feature enabled. It applies the new font attribute to the specified range and finalizes the changes with the text storage editing methods.

Jan 27, 2019
Loading thumbnail…

Creating a Sketch NSPanel

This example demonstrates how to create a custom, frameless floating panel with a vibrant, translucent background using the Sketch JavaScript API. The script creates an `NSPanel` with a titled, closable, and resizable window, and applies a `NSVisualEffectView` with a vibrant light appearance to achieve a frosted-glass effect. It uses `NSLayoutConstraint` objects to anchor the visual effect to the panel’s content view. The panel’s close button is handled via `setCOSJSTargetFunction`, which cleans up the panel reference and stops the script’s keep-alive loop.

Jan 5, 2019
Loading thumbnail…

Testing to see if I can build an Opentype Panel

This example demonstrates how to programmatically enable OpenType font features—small caps for lowercase and uppercase letters, and old-style (lowercase) numerals—on a selected text layer in Sketch. It uses the Sketch JavaScript API via `require("sketch")` to access the selected document and text layer, then constructs a new font descriptor with `NSFontFeatureSettingsAttribute` and feature selectors like `kLowerCaseSmallCapsSelector`. The code applies the modified font at size 20 with `NSFont.fontWithDescriptor_size` and refreshes the inspector via `document.sketchObject.inspectorController().reload()`. The script relies on the `CoreText` framework and `FontSpike.js` as its execution environment.

Dec 19, 2018
Loading thumbnail…

Change font size programmatically

This example demonstrates how to programmatically change the font size of a selected text layer within a Sketch document. It shows the direct manipulation of a text layer’s typographic properties through the Sketch JavaScript API. The code uses the `sketch` library to access the document, retrieves the first selected layer, and applies a new font size using `NSFont.fontWithDescriptor_size` with a value of 12. After modifying the layer’s `_object`, it calls the inspector controller’s `reload()` method to refresh the UI and reflect the change.

Dec 18, 2018
Loading thumbnail…

Latex Template for Gradescope Multiple Choice

This LaTeX template provides a reusable format for creating Gradescope-compatible multiple-choice exams. It shows two question types: single-answer questions marked with a circle symbol and multi-select questions marked with a square symbol. The code defines custom commands `\mcqb` and `\moqb` for the blank answer bubbles, plus `\mcqs` and `\moqs` for filled solutions, using symbols from the `wasysym` package. Each question’s options are listed with blank shapes, and the template demonstrates how to switch to filled shapes for answer keys.

Dec 8, 2017
Loading thumbnail…

d3 v4 realtime line chart

A real-time line chart appends a new random data point every ten milliseconds, streaming it across a 500-pixel SVG canvas. The visualization displays both a raw path and a smoothed cardinal-curve version, with the x-axis domain shifting as new values arrive. The code uses d3.scaleLinear, d3.line, d3.axisBottom, and d3.curveCardinal from d3.v4, with d3.transition and d3.easeLinear animating the axis and path translations to create the continuous scrolling effect.

Oct 23, 2017
Loading thumbnail…

D3 Unconf Badge

A black canvas displays an animated cluster of concentric, rotating square outlines that continuously enlarge and shift. The visualization updates every four seconds, generating a new set of 60 layered rectangles that scale and rotate around the center, creating a pulsing, geometric badge effect. Built with D3 v4, the code uses `d3.transition` for smooth 4-second animations, `d3.interval` to trigger periodic updates, and SVG `rect` elements with CSS transforms for rotation. Each frame recalculates rectangle positions via scaling and rotation math, producing an evolving spiral-like pattern on a stark black background.

Aug 28, 2017
Loading thumbnail…

Test D3 Badge Placement

This example demonstrates the mechanics of placing D3 badges using force simulation. It renders a static 1500x1500 pixel pink background, then uses d3.forceSimulation to position badge elements based on simulated physics. The code defines and runs the simulation, though it does not show a complete chart or dataset. The rendering relies on HTML divs for the background, and the badge placement is handled entirely through the simulation’s tick updates, with no external data sources or canvas/geographic APIs involved.

Aug 28, 2017
Loading thumbnail…

D3.UNCONF Submission

This interactive tool visualizes how Hue, Saturation, and Brightness determine color contrast between a button background and its text, enforcing a minimum AA contrast ratio of 4.5. Users adjust numeric inputs for both colors, with the main canvas and SVG displaying a saturation-brightness space while a separate hue channel canvas shows the hue gradient. The code uses d3.v4 for SVG rendering, Canvas 2D for the color spaces, and math.js for color calculations, updating the contrast value and warning in real time.

Aug 24, 2017