Technology Tales

Plumber

The plumber package in R enables the creation of web APIs by adding roxygen2-like comments to existing R code, allowing functions to be exposed as endpoints through HTTP methods such as GET and POST. Parameters from query strings or JSON payloads are passed to functions as character strings, with examples demonstrating echo, histogram generation and arithmetic operations.

Documentation for Visual Studio Code

Visual Studio Code is a versatile code editor offering extensive documentation, tutorials and AI-assisted coding through GitHub Copilot, supporting multiple programming languages such as Python, JavaScript and Java. It integrates features like debugging, testing, version control and remote development environments, while a vast marketplace of extensions enhances functionality. The editor automatically updates and collects usage data by default, with options to disable these features and provides community support, forums and resources for troubleshooting and feature requests.

Working with GitHub in VS Code

Visual Studio Code offers extensive integration with GitHub, enabling users to manage repositories, create and review pull requests and work on issues directly within the editor. Key features include setting up authentication through the GitHub Pull Requests and Issues extension, cloning repositories and using the GitHub Repositories extension to browse and edit remote files without local cloning.

Editor enhancements such as hover previews and context-based suggestions streamline workflows, while the ability to switch branches and manage changes across development environments ensures flexibility. Users can also create pull requests, collaborate on issues and leverage tools like the Remote Explorer for accessing previously opened repositories. Additional support includes options to transition to local development or cloud-based environments, ensuring seamless continuation of work across different setups.

How the Bootstrap 4 Grid Works

The Bootstrap 4 grid system is a layout tool built around a structure of containers, rows and columns, powered by Flexbox. It follows three core rules: columns must be direct children of rows, rows exist solely to contain columns and rows should be placed inside a container.

Bootstrap 4 offers two container types, a fixed-width version and a full-width version, both of which serve to align content and counteract the negative margins applied to rows. The grid is based on a 12-column unit system, allowing for a wide variety of layout combinations, and also supports auto-layout columns that automatically size themselves without needing unit values.

Responsive behaviour is managed through five breakpoints tied to screen widths, ranging from the default extra-small tier up through small, medium, large and extra-large, with larger breakpoints overriding smaller ones. Columns can stack vertically, wrap when their combined units exceed 12, be reordered relative to sibling columns and be nested within one another. Because rows use Flexbox display, columns within the same row share equal height, and alignment can be controlled using Flexbox utility classes.

Markdown Syntax Guide for Hugo

Here is a Markdown syntax guide that was created as a personal reference while learning to use Hugo, a framework for building web pages, with the aim of documenting all commonly needed formatting elements, verifying that styles rendered correctly and testing custom shortcodes for handling responsive images, video and panoramas. The guide covers a comprehensive range of Markdown features including headings, paragraphs, inline formatting such as italics and bold, blockquotes, footnotes, tables, code blocks and various list types including ordered, unordered, nested, mixed and task lists. It also addresses the limitations of standard Markdown image handling in Hugo, noting that built-in options offer little control over sizing and responsiveness, which led to the creation of custom shortcodes for figures, panoramic images and video content.

How to Open Link in New Tab with Hugo's new Goldmark Markdown Renderer

From version 0.62.0 onwards, Hugo replaced its previous Blackfriday Markdown renderer with Goldmark, which is CommonMark compliant. One consequence of this change is that the previous method of configuring links to open in a new browser tab, via a setting in the config.toml file, no longer works.

Goldmark instead supports Markdown Render Hooks, which allow developers to create custom HTML template files within the layouts/_default/_markup directory to modify default Markdown behaviour. To replicate the previous link behaviour and force external links to open in a new tab, a render-link.html file must be created in that directory containing a template that conditionally adds a target="_blank" attribute to any link beginning with http, whilst internal links using relative paths will continue to open in the same tab.

Styling tables with Hugo

When working with Hugo, Markdown alone may not always provide sufficient control over the visual styling of rendered elements such as tables. To apply HTML classes directly to a table, a custom Hugo shortcode can be created in the layouts directory. This shortcode processes the inner Markdown content, converts it to HTML, and then replaces the default table tag with one that includes a specified CSS class. Once the shortcode is in place, a standard Markdown table is wrapped within the shortcode tags, with the desired Bootstrap classes passed as a parameter, allowing for styled output such as striped and bordered tables.

Style a Markdown Table With Bootstrap Classes in Hugo

A method for applying Bootstrap table classes to Markdown tables directly within Hugo content files is described, involving the creation of a shortcode that accepts a Markdown table and specified Bootstrap classes as arguments, enabling the table to be styled without requiring separate data files or external definitions.

Stackedit on NPM

Here is a fully featured, open-source Markdown editor based on PageDown, the library used by Stack Overflow and other Stack Exchange sites. It offers tools for content creation and collaboration and can be installed via npm, with options for local development, production builds and deployment using Helm charts to Kubernetes clusters, requiring configuration with cloud service credentials and ingress settings. The editor can be embedded in websites or used as a Chrome app and includes features for integrating with platforms like Dropbox, Google, GitHub and WordPress.

The markdownlint extension for Visual Studio Code provides linting and style checking for Markdown files, using a library of rules to encourage consistency and standards. When editing a Markdown file, rule violations are flagged with a wavy green underline, and many of these violations can be fixed automatically through built-in formatting commands or by saving the document.

The extension supports workspace-wide linting, toggling linting on and off and configuring rules through JSON, YAML or JavaScript configuration files placed at various levels of a project. Settings can also be managed directly through VS Code's user and workspace preferences, with options to control behaviour such as focus mode, when linting runs and the severity level at which violations are displayed.

Custom rules can be added via JavaScript files or NPM packages, and individual violations can be suppressed inline using comments within the Markdown file itself. The extension honours VS Code's Workspace Trust setting to mitigate the security risks associated with running JavaScript from custom rule files or configuration files in untrusted workspaces.