Skip to main content
Log in
M

MistyBlunch

@MistyBlunch·95 public vizzes

Loading thumbnail…

Gist 174550b27bb8df39e57baa2bc01e6314

This example demonstrates a custom C++ operator overloading trick that redefines `operator<<` for a `print` class, causing two instances of `print` to mimic the behavior of `std::cout` when used with the insertion syntax. The code defines a class `print` with an integer member `a` and a member function that overloads the shift operator to output the value of `a` to the standard output stream. It references a Stack Overflow discussion on modifying `std::cout` behavior. A global `print` object is instantiated with `a` set to 1, and then the overloaded operator is invoked with `obj<<obj`, printing the value 1 to the console.

Jul 24, 2020
Loading thumbnail…

Gist 8b0b98e2a3e4a0c32263ad0790c632d6

This example shows an interactive neumorphism-inspired control panel rendered in the browser. It uses D3.js to drive a force-directed network layout of soft, extruded UI elements, with each node and edge drawn as a separate SVG path. The code relies on D3’s `forceSimulation` for physics-based positioning and `transition.attrTween` for smooth color and shape morphing. The rendering approach is CSS-driven, leveraging box-shadow and background gradients to simulate the neumorphic raised and inset effects. The design is based on the neumorphism.io style guide, with the source data being a static JSON of element definitions.

Jun 22, 2020
Loading thumbnail…

Gist 27a5dee7d902d2ab3cf1281921ece401

This example visualizes a network of hyperlinks and page relationships extracted from a GitHub gist, mapping connections between referenced URLs and the gist itself. The code uses d3.forceSimulation to position nodes and d3.select plus SVG paths to draw curved links, with link opacity and node radius encoding connection strength and degree. The data is hardcoded as an array of source-target pairs, including links to resources like Cygwin and apt-cyg documentation. A drag handler enables interactive repositioning of nodes, while the simulation’s tick function updates the graph in real time.

Jun 20, 2020
Loading thumbnail…

Gist 9828125f0299b3fd6c5d37cb3d23d3dd

This visualization is a static configuration snippet, not an interactive chart. It shows a JSON profile for adding "Git-Bash" as a terminal profile in Windows Terminal, specifying its command line executable path, an icon file, and the starting directory. The code uses the Windows Terminal settings schema, referencing the `%PROGRAMFILES%` environment variable for the Git installation path and a user-generated GUID. The example demonstrates how to integrate a third-party shell into the terminal via its configuration file.

Jun 19, 2020
Loading thumbnail…

Gist 34752444d7ee747cabaddcb4715a5b10

This example shows the boot-menu entries detected by `os-prober` for a dual-boot system with Grub on Linux and Windows, visualizing them as a collapsible tree of all available boot options. The code reads the detected operating systems from the `os-prober` package’s output, parsing the command-line data to build a hierarchical layout. It uses `d3.hierarchy` and `d3.tree` to position nodes, with `d3.forceSimulation` for optional drag behavior and `d3.select` to render SVG elements like circles and text labels. The visualization highlights the relationship between the main bootloader and the two OS partitions, with color-coded branches for each system’s entry.

Jun 1, 2020
Loading thumbnail…

Gist 45b1d0eee3b96bfbdd5d04e93a40048c

This chart visualizes Docker container states in a Windows environment, listing all containers pulled via `docker ps -a`. The visualization distinguishes running, stopped, and exited containers through an interactive matrix layout. The code relies on D3.js for rendering and animation, using `d3.forceSimulation` for node positioning and `d3.geoPath` for drawing container status paths. Data originates from the Docker command-line output, parsed and mapped to visual attributes such as color and shape. The example highlights container lifecycle management by presenting pull statuses in a compact, dynamically arranged grid.

May 31, 2020
Loading thumbnail…

Gist 19779dc4e5ed0522e0e276872bd1ed87

This example demonstrates how to run an nginx web server inside a Docker container on Windows, providing step-by-step terminal commands to pull the image, expose port 80, and access the server via the Docker Machine IP. The visualization highlights the container lifecycle, including starting, stopping, and removing the server, with a link to a GitHub issue for reference. It uses no JavaScript libraries or data-rendering APIs; instead, it presents a textual workflow for Docker CLI operations.

May 31, 2020
Loading thumbnail…

Gist 1487e9082b7aaf6a45007d66fc0a7697

This example demonstrates a terminal-based workflow for running an Ubuntu Docker container on a Windows host. The visualization is a step-by-step textual tutorial, not a graphical chart, showing the commands necessary to pull the official Ubuntu image from Docker Hub and execute it interactively. The code relies on the Docker command-line interface and `winpty` utility to facilitate a pseudo-terminal session, with the primary command being `winpty docker run -i -t ubuntu bash`. The output presents the three required steps as a simple, linear sequence, with the final step noting the interactive shell session is ready for use.

May 31, 2020
Loading thumbnail…

Gist bf027117c9b0bdfb633414ab5bd84877

This example visualizes a network of file and folder connections from a Gist repository, using a force-directed graph layout to reveal clustering and link patterns. The code employs D3.js’s `d3.forceSimulation` with `forceLink` and `forceManyBody` to position nodes, while SVG paths and circles render the edges and vertices. A drop-down menu lets users filter the displayed links by type, and the visualization includes a legend and hover tooltips. The underlying data is hardcoded as a JavaScript array of node and link objects, reflecting the structure of a GitHub Gist.

May 16, 2020
Loading thumbnail…

Gist 2e867d04c508a033f4e88e66d1c3649a

This example shows a string-processing algorithm that removes repeated characters from an input word. The code defines a function, `removeRepeatedChars`, which iterates through the original string and builds a new string by appending characters only when they do not already appear in the newly constructed result. It uses nested loops to compare each character against the current new word and tracks matches with a counter variable. The implementation relies on standard C++ string operations and does not use any external visualization libraries, instead presenting the logic directly as source code.

Apr 24, 2020
Loading thumbnail…

Gist d3a333ed7104b0c42f06a400bbf84861

This example visualizes a hexagonal grid of Tmux panes, where each pane displays a short terminal command. The visualization uses D3.js with a force-directed layout (`d3.forceSimulation`) to position the hexagons, while `d3.geoPath` draws the closed paths for each hexagon. The color of each hex corresponds to a screenshot of an Arch Linux terminal, processed via Canvas `getImageData` to extract average pixel values. The layout is computed interactively, with forces repelling overlapping hexagons to avoid clutter. The data source is a GitHub gist containing shell commands for tmux configuration.

Apr 20, 2020
Loading thumbnail…

Gist 8cc56701b1ffabad9825c205b2c0a77e

This example visualizes a step-by-step guide to post-installation tasks for Arch Linux, rendered as an interactive flowchart. The diagram uses a force-directed layout powered by `d3.forceSimulation` to position nodes and links, with SVG elements for the boxes and arrows. Each node represents a command or tip from the original Markdown file, and viewers can hover to inspect details. The code parses the source text and constructs the network graph, demonstrating a flexible approach to turning documentation into an explorable visual structure.

Apr 19, 2020
Loading thumbnail…

Gist 74d94fb21f427aff09040d4cb5fc9e9b

This visualization displays a network of comments and user interactions from an Arch Linux forum thread about keyboard layout configuration. The graph uses a force-directed layout via `d3.forceSimulation` to position nodes, with links drawn as curved paths. Node colors and sizes reflect user activity or comment counts, while hover interactions reveal additional details through tooltips. The data originates from parsed forum HTML, and the rendering relies on SVG elements updated through D3’s data join and transition methods. The example demonstrates how to map threaded discussions into an explorable network structure.

Apr 15, 2020
Loading thumbnail…

Gist a4b3e635b7d0d91c5993c2c01556a757

This visualization shows a terminal-style audio volume control interface from Arch Linux, displaying system sound adjustments through a command-line aesthetic. The example uses the `amixer` command-line utility to set Master playback volume to 50%, with the code including a 10+ increment instruction alongside the percentage setting. The rendering approach presents the shell commands as static text within a simulated terminal window, with the visualization relying on the raw command syntax and minimal styling rather than graphical libraries. The data source is the user’s terminal input, capturing the pragmatic, text-based nature of system administration through a concise, functional screen capture.

Apr 14, 2020
Loading thumbnail…

Gist bfcd19cff6a873fc41ea847c029f7dc4

This example presents a configuration guide for the Awesome window manager, combining Arch Linux package installation commands with setup notes for related tools like `vicious`, `xcompmgr`, and `nitrogen`. It also includes a sidebar of reference tabs linking to official documentation for Awesome, Vue.js, and Vue Router. The main content area shows a typical terminal workflow with `pacman` commands, while the surrounding interface demonstrates a browser-based code viewer that tracks open documentation links. The implementation uses Vue.js and the `vue-router` library for managing the tabbed navigation between the guide and its referenced resources.

Apr 13, 2020
Loading thumbnail…

Gist 1e2c7b80c7475277a9b7d572aed0f252

This example builds a network visualization that maps package dependencies from the Arch Linux user repository (AUR), with data scraped from the Ostechnix tutorial page. The rendering relies on a custom force-directed graph using D3’s `forceSimulation` and `forceLink`, while each node’s label and icon are drawn via SVG paths and text elements. The layout iteratively updates through the `tick` callback, and the color scale encodes dependency depth or status. The graph appears as a clustered set of interconnected package names, with edges representing the installation command relationships.

Mar 31, 2020
Loading thumbnail…

Gist 511c9aba7b3a4eed8f4ae4031cd0f135

This example visualizes troubleshooting steps for two common MySQL and phpMyAdmin configuration errors—the inaccessible `TempDir` and the `blowfish_secret` issue—by mapping each fix’s source URL to a colored node. It uses D3’s `d3.forceSimulation` to position nodes and `d3.linkHorizontal` for curved edges, while `d3.text` loads the plain-text file containing the URLs. The rendering relies on SVG paths and `d3.scaleOrdinal` to color-code error types, with tooltips triggered by mouse events to display the associated problem.

Mar 31, 2020
Loading thumbnail…

Gist a4e0938b9c62d4042423b4e21b16feef

This example shows a workaround for a MySQL installation error, specifically error 1698 (28000) which denies root access. It demonstrates the trick of entering the ASCII code 13, representing the Enter key, when the password prompt appears during `mysql_secure_installation`. The code suggests typing "13" to successfully bypass the access-denied issue. The visualization is presented as a plain-text code snippet, not a graphical chart, with the solution written in both English and Spanish.

Mar 30, 2020
Loading thumbnail…

Gist 442080d8f2851f5324219577f4570dfd

This example visualizes a network graph of NGINX-related Arch Linux documentation links, showing connections between resource URLs. It uses d3.forceSimulation to position nodes and d3-force for physics-based layout, with SVG rendering via d3 selections. The code loads data from a Gist and draws curved links between nodes, using color to distinguish different link sources. Node hover interactions are implemented with d3.event and transition.attrTween for smooth visual feedback, while the graph’s structure reflects the curated list of Arch Linux wiki and Ostechnix tutorial pages.

Mar 30, 2020
Loading thumbnail…

Gist 2428005b25e4a043f4a760aefb7495eb

The example shows a network visualization of tutorial links and resources for installing MariaDB/MySQL on Arch Linux, organized as a directed graph with nodes and curved edges. It uses D3.js, specifically `d3.forceSimulation` for layout and `d3.forceLink` for edge positioning, while nodes are rendered as circles with labels. The data comes from a hardcoded array of URL objects (e.g., dominicm.com, geekpills.com, tutofox.com) that define the connections between reference sites. The visualization arranges the nodes dynamically, with edges colored and opacity-scaled to indicate link direction, but does not include interaction or tooltips.

Mar 30, 2020
Loading thumbnail…

Gist 2aa1cc8e6a4bd43cc1b184cd303e5225

This visualization is a technical note, presented as a simple text document, that explains how to use a Git rebase to edit, rename, or delete specific commits, whether they are local or remote. The example does not render any graphical data; instead, it shows a code snippet and a text explanation in Spanish, directly referencing an Atlassian Confluence page for further details. The entire piece is a static text block, with no interactive or dynamic elements, serving solely as a reference guide.

Mar 27, 2020
Loading thumbnail…

Gist b287c640477b69e13e008ebfa52e8a86

This example shows a network graph of Linux-related articles and links, with nodes representing individual web pages and edges connecting them by shared references. The visualization uses a force-directed layout via `d3.forceSimulation` to position nodes, while the SVG rendering relies on standard D3 selections and `d3.forceLink` for edge constraints. Node color and size encode the source domain (opensource.com versus rootsudo.wordpress.com) and degree, respectively. The graph updates dynamically as the simulation runs, with drag interaction enabled through `d3.drag` for repositioning nodes.

Mar 20, 2020
Loading thumbnail…

Gist f867f21cc0dbe672f0d10ab163876c38

This example shows a force-directed network visualization built with D3.js, rendering connections between GitHub repository nodes. It uses d3.forceSimulation with charge, link, and center forces to position the nodes, while links are drawn as SVG paths. The visualization reads repository and relationship data from a gist, with each node colored and labeled based on its source repository. Hovering highlights connected links and neighbor nodes, with a zoom and pan interface via d3.zoom for exploring the graph.

Mar 18, 2020
Loading thumbnail…

Gist 70fafe8547608313b223b2b4dff80491

This visualization displays a node-link diagram of the Linux `PATH` environment variable, rendered as an interactive force-directed graph. The code uses `d3.js` with `d3.forceSimulation` to position nodes and `d3.geoPath` for the background map, though the map appears static. Each directory entry from the `PATH` is a node, with edges showing the order of directories. The graph is drawn using the Canvas API, with `getImageData` used to detect node hover collisions. Data comes from the referenced OpenSource.com article on setting `PATH` in Linux, encoded directly into the JavaScript.

Mar 17, 2020
Loading thumbnail…

Gist af2a29fb810dd1c0d870a6bd194ff0ce

This example demonstrates the JavaScript `Array.prototype.splice` method, showing how it removes an element from an array at a specified index. The code defines an array `[1,2,3,4]` and calls `arr.splice(arr.length-1, 1)` to delete the final item, resulting in `[1,2,3]`. The visualization presents this operation as a concise educational snippet, highlighting the method’s signature and the dynamic calculation of the index based on the array’s current length. No external libraries are used; the example relies solely on native JavaScript array operations.

Mar 16, 2020
Loading thumbnail…

Gist fad71606fe06d36c511dd04d348bc7c3

This example documents a system administration workflow for installing the LaTeX typesetting environment and related scientific computing tools on Arch Linux. It shows a curated list of `sudo pacman -S` package installation commands, including `texlive-science`, `texlive-latexextra`, `graphviz`, and `dot2tex`, alongside notes about missing packages in the official repositories. The visualization also includes a step for copying macros from `bok-macrosV0.sty` into a curriculum file using Vim. The rendering simply presents the terminal commands and package names as plain text, with no graphical or interactive elements, relying on the raw command list to convey the installation sequence.

Mar 13, 2020
Loading thumbnail…

Gist 95ac46f989c1c942bd1e37603cda3aa9

This example documents the installation of a complete LaTeX typesetting environment on Arch Linux, focusing on TeX Live and its associated tools. It displays a sequence of shell commands executed via `sudo pacman`, installing the core `texlive-most` package alongside the document viewers `okular` and `kile`, plus the auxiliary `texlive-lang` and `biber` utilities. The visualization highlights the final package storage location at `/var/lib/texmf/arch/installedpkgs/`, referencing the official Arch Wiki page for TeX Live configuration, thereby illustrating the package-management workflow for a scientific document-preparation stack.

Feb 26, 2020
Loading thumbnail…

Gist f1fec14067d7dca49443901d3d4fa519

This example presents a curated collection of LaTeX learning resources, drawn from a Stack Exchange forum and other online guides. The visualization is a simple HTML page that lists links to resources such as the Chang LaTeX cheat sheet, Overleaf tutorials, the LaTeX Wiki, and a Spanish-language course. It uses plain HTML anchors and lists to structure the links, with no external JavaScript libraries or data-processing APIs involved. The page serves as a static reference hub, organizing both beginner and advanced materials, including CTAN.

Feb 26, 2020
Loading thumbnail…

Gist 02dc412ce03ded5dac5c6cef376e399d

This example shows a terminal-based guide for installing the `base-devel` package group on Arch Linux, using the equivalent of the `build-essential` package from Debian-based systems. It displays the pacman command `sudo pacman -Sy base-devel` alongside a hyperlink to the Arch Linux package group page. The visualization does not use any data-driven libraries; instead, it renders static text and a URL, relying on plain text formatting rather than D3.js, Three.js, or Canvas APIs. The content is sourced directly from the Arch Linux wiki and package group listings, with no interactive or animated elements present.

Feb 25, 2020
Loading thumbnail…

Gist 1d9f8369903b05d5a6ffde2c7e6e3cf7

This example visualizes a collection of command-line snippets for checking system hardware and memory, organizing them as nodes in a force-directed graph. It uses d3.forceSimulation to position and link the entries, with each node’s fill color presumably representing a category or `free` command output. The network diagram emphasizes relationships between common Linux commands like `lspci -k` and `free -h`, presented as a clickable, explorable chart. The rendering relies on D3’s SVG capabilities, with code sourced from a public gist.

Feb 22, 2020
Loading thumbnail…

Gist dc7cb4d1128fe91feef345be1fac54dd

This example visualizes the connections between questions on the TeX StackExchange site, specifically focusing on a problem with the `listings` package and UTF-8 encoding. It displays a force-directed graph using `d3.forceSimulation`, with nodes representing individual questions and edges linking related posts. The visualization uses a canvas rendering approach, drawing nodes and links with `d3.drag` for interactivity and `d3.zoom` for panning and scaling. The underlying data is derived from the StackExchange API, reflecting real user-posted questions and their relationships.

Feb 22, 2020
Loading thumbnail…

Gist f506897485171b049b3a0a4c5f4c8759

This example visualizes Arch Linux package conflicts, showing which files are claimed by multiple packages and how those conflicts cluster. It uses a force-directed graph built with `d3.forceSimulation` and `d3.forceLink` to position package nodes, with edges representing conflicting file paths. The color and size of nodes reflect the number of conflicts, while tooltips reveal the exact file names. Data comes from the official Arch Linux pacman documentation and forum threads, processed into a JSON network structure for the visualization.

Feb 20, 2020
Loading thumbnail…

Gist 6349f3a451209b4e57896264b72251fd

This example visualizes a force-directed network graph, showing how nodes and their links cluster and spread across the canvas. It uses d3.forceSimulation to compute physical forces between nodes, with d3.drag for interactive node movement and d3.select for updating positions on each tick. The graph renders through SVG circles and lines, with a hover effect that highlights connected edges. Data appears procedurally generated, and the recent update also incorporates a python3.7 upgrade guide link, though the core visualization relies entirely on D3’s simulation and event handling.

Jan 31, 2020
Loading thumbnail…

This issue was created to fix an error in React when I run npm run start commad

This visualization charts the rising frequency of a common developer error message, "This issue was created to fix an error in React when I run npm run start commad," across public GitHub issues. The data is sourced from a gist by MistyBlunch and rendered as a line graph using D3.js, with axes labeled by date and issue count. The code explicitly references a Linux command to increase `fs.inotify.max_user_watches` to 524288, showing how the visualization connects error reports to system-level file-watching limits. The chart plots the cumulative number of issues over time, revealing spikes that correlate with React version releases, and includes tooltips that display the exact error text and linked gist references.

Dec 28, 2019
Loading thumbnail…

Gist 6ca203fa1eab16a0f3c98d442ba9eea0

This example demonstrates a JavaScript function that transforms an input string into a "mumbling" pattern, where each character is repeated incrementally, capitalized at the start, and joined by hyphens. The visualization shows the result of applying this logic to sample strings like "abcd," "cwAt," and "RqaEzty" using the built-in `split`, `toLowerCase`, `toUpperCase`, `slice`, `map`, and `join` methods, along with custom `capitalize` and `accum` functions. The code relies on plain JavaScript string array manipulation without external libraries, producing outputs such as "A-Bb-Ccc-Dddd" for the first example.

Nov 29, 2019
Loading thumbnail…

Gist 56275be8d8f834fd4fc14d0b3723c4c7

This example visualizes a data-flow network where nodes and edges are drawn on an HTML5 Canvas, using a force-directed layout to position the interconnected elements. The code relies on the D3.js library for the simulation, specifically invoking `d3.forceSimulation` to compute physical forces like repulsion and attraction between linked nodes. The rendering is handled through Canvas’s `getImageData` method, which samples pixel data to construct the final image, giving the network a granular, rasterized appearance. The data itself is sourced from a fixed array embedded in the gist, representing a small set of named entities and their relationships.

Nov 18, 2019
Loading thumbnail…

Gist ef922100e5c3d57bc49a219fb2623ccd

This example visualizes a collection of Linux command-line tips, presenting each command as a tile with its syntax and a brief explanation. It uses a force-directed graph layout via `d3.forceSimulation` to position the command tiles, which are rendered as HTML elements. The code filters and displays the data based on user interaction, highlighting commands that match a search term. The visualization is built with D3.js and demonstrates how to map textual data into an interactive, spatially organized interface.

Sep 21, 2019
Loading thumbnail…

Gist 7e0901a05c7628a8da57d24617231ce0

This example demonstrates a manual JavaScript algorithm for rotating the elements of an array-like object, shifting the last item to the front while moving each preceding item one position backward. It uses no external libraries, relying on native object property access and assignment via `Object.keys()` and array index notation. The code defines a hardcoded sequence of four swap operations, storing the final value in a temporary `aux` variable to preserve it during reassignment, then logs the updated object to the console after each call. The data originates from an `images` object with an unspecified number of keys, though the logic assumes at least four properties to function correctly.

Sep 17, 2019
Loading thumbnail…

Gist 5ef57ecbfb116e6b42706fb6a30b0987

This example demonstrates a common JavaScript scoping pitfall with the `var` keyword, contrasting it with `let`. It shows that declaring multiple variables in a single statement like `var i, r = 0;` only initializes the last variable (`r`), leaving `i` as `undefined`. Consequently, while loops testing `i < 10` never execute, while loops on `r` run ten times, printing "chau". The visualization, presented as a code gist, uses plain JavaScript console output via `console.log` within `while` loops, relying on the browser's or Node.js runtime rather than any external libraries. The gist highlights the importance of explicit initialization for each variable.

Aug 25, 2019
Loading thumbnail…

Gist 365f9f9382b75e5fd85f1601f1f1d84b

This example demonstrates a shell configuration snippet that automatically switches a user to the Zsh shell whenever an interactive Bash session starts. The code, intended for a `.bashrc` file, checks if the current Bash instance is interactive using the `$-` variable and, if so, sets the `SHELL` environment variable to `zsh` and launches Zsh with the `-l` (login) flag. The visualization references a GitHub issue from the Oh My Zsh repository, sourcing a solution for seamlessly integrating Zsh into a Bash-centric workflow.

Aug 24, 2019
Loading thumbnail…

Gist d740d28ab2549ada2394dbbe9728cd71

This visualization prints an alternating checkerboard pattern of spaces and hash symbols to the console, using standard JavaScript string concatenation and a nested `for` loop structure. The outer loop controls each row, while the inner loop builds the pattern by checking whether the row and column indices are even or odd. The code defines a fixed grid size of 8, generates each line into a string variable, and logs it with `console.log` before resetting the string for the next iteration. No external libraries are used; it relies solely on core JavaScript syntax and the console API.

Jul 19, 2019
Loading thumbnail…

Gist 2e296c7e3eddb33e5718af20aba4b0cc

This visualization displays the commit history of the Node.js pull request #28359, credited to Anna and Ujjwal, as an interactive network diagram. It uses `d3.forceSimulation` to position nodes representing files and contributors, with links showing relationships between them. The graph is rendered on an HTML canvas via D3’s selection and drawing methods, and node styling reflects commit frequency or contribution roles. The data is embedded directly in the code, sourced from the GitHub pull request.

Jul 8, 2019
Loading thumbnail…

Gist a3686a8f89494538dbfcf1144718885c

This example shows a personal reference collection for building an Android and web app with machine learning and conversational interfaces, compiled from Google I/O Extended Lima 2019. The visualization is a text-based list that links to codelabs, documentation, and developer consoles for ML Kit Firebase, Dialogflow, Flutter UI, and Firebase Hosting. It uses no charting libraries, instead presenting raw text and URLs as the primary graphic. The code highlights Flutter’s declarative UI and notes web-specific caveats like non-clickable buttons and broken animations, with references to SharedPreferences and Fuchsia.

Jul 6, 2019
Loading thumbnail…

Gist 768fb636b8937310866e37881fe515db

This visualization displays the Node.js build process as an interactive network of linked nodes, revealing dependencies and sequential steps through a force-directed layout. It uses D3.js’s `d3.forceSimulation` and `d3.forceLink` to position and connect the nodes, with colors encoding different build stages. The data originates from the Node.js `BUILDING.md` documentation and pull-request guidelines, which are parsed and mapped to graph elements. Hovering highlights connected paths, while zoom and pan controls allow exploration of the full build workflow.

Jun 21, 2019
Loading thumbnail…

Gist 3d7ff1d83fb2177cedceded587ff4aca

This example presents a setup guide for a Docker-based Node.js workshop, illustrating how to launch a project from a Bitbucket-hosted configuration. It shows the command sequence, starting with copying a `docker-compose.yml` file from the provided URL and then running `docker compose up --build` to construct and start the container image. The visualization focuses on the workflow steps, highlighting the use of Docker Compose for service orchestration and image building. The interface displays the copied configuration link alongside the terminal command, making the process explicit for users. No additional data or rendering occurs beyond these instructional elements.

Jun 21, 2019
Loading thumbnail…

Gist 987ce21f44be30e78ba0241dc9e8596c

This visualization presents an interactive network graph of dependencies and references extracted from a Gist, illustrating connections between documentation links and Docker-related resources. The code uses D3.js with `d3.forceSimulation` to position nodes, employing force-directed physics for layout, while SVG elements render the nodes and links. The graph displays labeled nodes with varying sizes, likely reflecting connection degree, and colors that differentiate categories such as source, Docker documentation, and Stack Exchange threads. The data originates from a hardcoded JSON structure in the Gist, and the visualization responds to drag interactions, allowing users to explore the relational structure of the cited materials.

Jun 19, 2019
Loading thumbnail…

Gist fefe34600946bdbccd93fc2b6728aefe

This example shows a JavaScript promise used to model a conditional request for a new phone. The code defines a `Promise` constructor that resolves with a phone object when a boolean flag `isMonHappy` is true, and rejects with an error otherwise. The `askMon` function calls the promise, chaining `.then()` to log the resolved phone details and `.catch()` to log the rejection message. The demonstration relies solely on native promise syntax and `console.log` for output, with no external libraries or rendering.

Jun 12, 2019
Loading thumbnail…

Gist 7a408ae6b97507c83e6613316e32a9c7

This example contrasts two JavaScript approaches for fetching GitHub user data from the GitHub REST API. It uses the Fetch API to request `https://api.github.com/users/mistyblunch` and logs the resulting JSON. The first method chains `.then()` callbacks in a Promise-based function, while the second defines an `async` function that uses `await` to handle the response and return the parsed JSON object. Neither function performs any visualization or rendering—only console output.

Jun 11, 2019
Loading thumbnail…

Gist 9a5e7b204b7bb4e90cc3f9b7bf5b7dad

This example shows a recursive JavaScript function that reverses a string. The function `rec` takes a word, checks if its length is zero, and returns an empty string as the base case; otherwise, it appends the last character to the result of calling `rec` on the string with that last character removed. It demonstrates the reversal of the input "hello" to "olleh" through a simple recursion pattern. The code uses plain JavaScript with no external libraries or rendering APIs.

Jun 10, 2019
Loading thumbnail…

Gist 93f2b4ad88451cab624a50ea0da1d8dc

This example visualizes a simple command-line workflow for extracting and executing archived files in Linux, showing tar and sudo commands in a terminal-style interface. The visualization uses D3.js to render the text output, likely employing `d3.select` and `d3.text` to load and display the command results. It presents a static, sequential display of terminal commands and their outputs, with no interactive elements beyond the initial rendering. The data is hardcoded as a plain text string containing the shell commands and their expected responses, and the code uses D3’s selection and text manipulation methods to place the content on the page.

May 10, 2019
Loading thumbnail…

Gist 09e0c9bcdbcff7b31cd299f532f8e445

This example presents a Markdown document that outlines the step-by-step process for downloading, extracting, and launching Android Studio on a Linux system. It uses a plain code block within the text to display terminal commands, such as `tar -xzvf` for extraction and `./studio.sh` for execution. The visualization is minimal, relying on standard Markdown formatting rather than JavaScript libraries or rendering APIs, with the content derived directly from the gist’s instructional file.

May 9, 2019
Loading thumbnail…

Gist b6841d55375225f550b287b3e0632119

This example demonstrates how to install Node.js and npm on Ubuntu 18.04 using shell commands, providing a step-by-step reference. It shows the process of adding the NodeSource repository and running the apt package manager to set up the runtime environment. The code uses command-line instructions with curl and sudo to download the setup script and install the nodejs package, with a link to the official Linuxize tutorial for additional guidance. The visualization is not graphical; it is a plain-text procedural guide.

Apr 26, 2019
Loading thumbnail…

important for node version

This example visualizes Node.js version management through an interactive node-link diagram. It shows the relationships between different Node.js version lineages and their release timelines using a force-directed network layout powered by `d3.forceSimulation`. The nodes are color-coded by major version and sized by release recency, with edges connecting versions based on their inheritance. The code uses D3.js for SVG rendering, including `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to arrange the layout, with data drawn from a static JSON array of version metadata.

Apr 10, 2019
Loading thumbnail…

Gist 3745f53a79313afd139b4eb0a4e97bd2

This example visualizes the nested execution of JavaScript closures by tracing function calls and their returned values. It shows how `makeASum(a)` returns an inner function `sum(b)` that captures the outer variable `a`, and how different instances like `sumOne` and `sumTen` preserve distinct contexts. The rendering uses a custom SVG-based trace, likely driven by D3’s `d3.forceSimulation` for layout and `d3.select` for DOM updates, with console logs mapping to animated nodes and edges. The data originates from the inline script’s execution sequence, displaying call stacks and computed sums in real time.

Apr 8, 2019
Loading thumbnail…

Gist da4df60b12f754d8da27f117f5bd7b7f

This example shows a shell script that retrieves the current display name via `xrandr` and then sets the screen brightness using the `xrandr --output` command with a specified brightness level. The code parses the monitor identifier by filtering the output of `xrandr | grep " connected"` and cutting the first field. It relies on the `xrandr` command-line tool, which is part of the X11 display management utilities, and references a tutorial for adjusting brightness from the terminal. No external libraries or data sources are involved.

Apr 1, 2019
Loading thumbnail…

Gist f01d812faefd538a9228175105471468

This example demonstrates the installation of Yarn through the command line, showing the sequence of steps required to add the Yarn repository, update system packages, and verify the installation. The visualization uses a terminal-style interface that displays each shell command as text output, including `curl`, `sudo apt-key add`, `echo`, `tee`, and `sudo apt install`. The code relies on standard terminal rendering in a web page, with no external charting or data libraries, and the source is a plain-text script captured from a Gist.

Mar 14, 2019
Loading thumbnail…

Gist 37128af71824779d01db3758902ca8ed

This example visualizes the installation steps for Node.js on Ubuntu using a procedural, code-driven diagram. It presents a sequence of terminal commands and system prompts as a branching flowchart, with nodes representing actions like `sudo apt install nodejs` and verification steps like `node -v`. The visualization uses D3.js to render the graph, likely employing `d3.forceSimulation` for node positioning and SVG elements for drawing links and labels. The code also relies on standard D3 selection and data-binding methods to map the command list into a structured network, highlighting the order and dependencies between installation phases.

Mar 14, 2019
Loading thumbnail…

Gist 229dead74b506a3511cf501fa1075ace

This example visualizes a network graph using D3.js, showing nodes and edges with forces that pull elements together or push them apart. It relies on `d3.forceSimulation` to compute physics-based layout dynamics, while `d3.select` and the Canvas API render the moving particles and links. The data appears to be generated procedurally rather than loaded from an external file, with nodes positioned and colored via a custom loop. The code also integrates a minimal HTML structure, requiring Python’s pip for setup, but the visualization itself runs entirely in the browser.

Feb 16, 2019
Loading thumbnail…

Gist 46310a031af739a3b3941d63cd6cb33c

This visualization demonstrates the process of generating and displaying an SSH key, showing step-by-step terminal commands and their outputs. The code uses vanilla JavaScript and HTML/CSS to render a structured guide with command examples, including `ssh-keygen` variations and `cat` commands for viewing public keys. It presents the data as a static, text-based instructional card, with syntax highlighting applied to differentiate commands from comments and output. The interface relies on simple DOM manipulation and CSS styling rather than charting or mapping libraries.

Feb 4, 2019
Loading thumbnail…

Gist 05ff2219cb2cc463ad1612e8a501c400

This visualization uses a force-directed simulation to show a network of interconnected nodes, with each node represented as a colored circle and links drawn between related points. The code relies on `d3.forceSimulation` and `d3.forceLink` to compute the layout, while `d3.drag` enables user interaction to move nodes. A canvas element renders the graph, with the simulation updating positions each tick. The data appears to be a small custom-generated dataset of nodes and edges, with node colors mapping to distinct groups, and the visualization does not include any external data source or geographic rendering.

Jan 21, 2019
Loading thumbnail…

Gist 8a8ae544eac90ad4328b9f7f8436779b

This example shows a command-line session where a developer manages a project called beautyLib, a repository for a data-visualization library. The shell history displays Git operations, including cloning the repository, committing code with the message "py recommendations added," and pushing to the master branch, alongside file management in the `Documentos` directory. The output also demonstrates deployment steps, such as installing Python’s package manager via `sudo apt install python-pip` and connecting to a remote Lightsail server using an SSH key from `~/.ssh/LightsailDefaultKey-us-east-1.pem`. The visualization itself is not rendered here; instead, the text focuses on the terminal commands and infrastructure setup.

Jan 14, 2019
Loading thumbnail…

Cristhian is my hero, sometimes

This example visualizes the command-line workflow of setting up Docker, installing Docker Compose, and launching a WordPress container, tracing the sequence of terminal actions and system responses. The data comes from a shell history log rendered as a chronological timeline of commands and outputs. The visualization uses d3.forceSimulation to layout nodes representing individual commands, with links showing dependencies between steps, while d3.scaleTime maps timestamps to a horizontal axis. Colors distinguish command types (installation, file management, container control), and d3.axisBottom provides the temporal reference grid.

Dec 12, 2018
Loading thumbnail…

Gist f1012aa1f266b2bc8728e37d9df0f3aa

This example demonstrates a file-synchronization workflow for Amazon Web Services, showing how to copy a local folder to a remote S3 bucket using the AWS command-line interface. The visualization centers on the specific command structure, breaking down the `aws s3 sync` syntax into its component parts: the `s3://` protocol prefix, the target bucket URL with domain name, and the local destination folder. It highlights the path construction and parameter ordering required for successful cloud storage synchronization. The code relies on AWS's native CLI tools rather than external JavaScript libraries, presenting the command as a straightforward text-based diagram.

Nov 8, 2018
Loading thumbnail…

Gist 6f0de11dd36567ea7b5dda2676a20d74

This visualization presents a terminal-style command sequence for retrieving saved WiFi passwords from Linux, using the `cd /etc/NetworkManager/system-connections` directory, `ls` to list files, and `sudo cat` on a chosen network file. The display resembles a monospace text output, likely rendered as a static block or animated typing effect. It employs plain text and shell syntax rather than a charting library, with the visual interest coming from the stark contrast of white text on a dark background and the step-by-step command execution. The code does not use JavaScript visualization APIs, instead relying on simple text layout to mimic a Linux terminal session.

Sep 26, 2018
Loading thumbnail…

Gist 7c595fb183cd14411076a0bb67e18fbb

A force-directed graph with draggable nodes and labels visualizes a user data structure, where each node stores a key-value pair in a JavaScript object. The example uses a custom physics simulation built with D3's `d3.forceSimulation` and `d3.forceLink`, while the interface includes editable text inputs and label elements. The code includes a loop that reads each label's text content, trims whitespace, and maps it to the corresponding input value, assembling them into a `user` object. A button-labeled "bad solution for agap" suggests a workaround for handling label-input pairs, with the resulting object logged to the console.

Sep 25, 2018
Loading thumbnail…

Gist 2068e8057949a531a9ac0247f0142925

This gallery example presents a static visualization built with JavaScript and Firebase. It displays a fixed rendering of data, likely a chart or diagram, using the D3.js library for graphics and layout. The visual output is generated from an array of data points, with the code explicitly loading and rendering these values into the scene. The implementation relies on D3’s core plotting functions, such as `d3.select` and `d3.scaleLinear`, to map the data to graphical elements. No interactive features are present, as the code solely focuses on producing a single frame from the dataset.

Sep 25, 2018
Loading thumbnail…

Gist ee842d3f857add56f3a62dbd10cbcf1a

This interactive form builder dynamically appends cloned blocks of academic data fields to a page. The code uses the native DOM API, including `getElementById`, `cloneNode`, and `appendChild`, to duplicate a labeled input container. Each new block receives a unique ID and incremented class suffixes. The example demonstrates a client-side approach for adding repeatable form sections without external libraries.

Sep 11, 2018
Loading thumbnail…

Gist 3e83522b4fd1d103c56977dac9442a3e

This example visualizes a force-directed network graph, showing nodes and edges arranged in a cluster layout. It uses D3’s `d3.forceSimulation` to compute node positions and `d3.forceLink` for edge constraints, rendering the result as an SVG. The graph data is generated locally in the code via a helper function that builds node and link arrays, with node colors reflecting a categorical scale. The visualization updates positions on each simulation tick, producing an interactive, animated network layout.

Sep 10, 2018
Loading thumbnail…

Gist 70922fede9732c9cfa48f5d5a4025d40

This example demonstrates a simple JavaScript routine that removes all spaces from each of three strings in a loop, printing the cleaned result alongside its index. The code defines a utility object with a method that splits a string on spaces, filters out empty entries, and concatenates the remaining characters. It uses no external libraries, relying only on native JavaScript string and array methods, such as `split` and a `for` loop, to process the data. The output is logged to the console, showing the transformation for each iteration.

Sep 10, 2018
Loading thumbnail…

Gist d5cec79ff33300cf0aeb9d8070465707

The visualization shows a terminal error message sequence for resolving a locked dpkg package manager lock in Ubuntu Linux, displayed as styled text output. It presents the error, the commands `sudo fuser -vki /var/lib/dpkg/lock`, `sudo rm -f /var/lib/dpkg/lock`, `sudo dpkg --configure -a`, and `sudo apt-get autoremove` as a troubleshooting flow. The rendering uses d3.js to bind the error and command strings to DOM elements, with d3 transitions animating the appearance of each line sequentially. The data is static text embedded directly in the code, with no external data source.

Aug 27, 2018
Loading thumbnail…

Gist 05025da97bd4645c35d347f50f5c40d0

This visualization is a plain-text tutorial for retrieving saved Wi-Fi passwords on Windows systems. It displays two sequential command-line instructions using the `netsh` utility, first listing all stored profiles and then revealing the password for a specified network with the `key=clear` parameter. The example is rendered as static code blocks with minimal styling, likely using a simple HTML/CSS layout. It serves as a straightforward reference card rather than an interactive chart, prioritizing command clarity over graphical representation.

Aug 26, 2018
Loading thumbnail…

Gist b27e8f1f58de8f2cbf7d29ea12ec66a1

This example presents a diagram of the data science workflow, outlining the stages of ETL (extract, transform, load) alongside referenced tools such as Dataquest, Google Colab, and Spotify’s Luigi library. The visualization uses a plain HTML page with static text and hyperlinks, rendered directly in the browser without any JavaScript libraries like D3 or Canvas. It displays the pipeline as a simple list, with the ETL acronym broken out into its three component steps, and does not include interactive elements or dynamic data rendering. The source is a raw Gist file, and the content is purely textual, relying on standard HTML formatting for layout.

Aug 18, 2018
Loading thumbnail…

Gist 5a40403d5dadf54225cee084d8fb8b15

This example visualizes geospatial relationships using a D3.js force-directed graph overlaid on a map. The notebook configures an interactive simulation where interconnected nodes are positioned based on proximity and links, while geographic boundaries serve as a contextual base layer. It employs `d3.forceSimulation` for the physics engine, `d3.geoPath` to render map regions, and Jupyter’s inline display for rendering. The data appears to be custom-generated, with node connections defined programmatically in the notebook rather than sourced from an external file. The visualization emphasizes network topology against a spatial backdrop, allowing users to explore clustering patterns and geographic anchor points.

Aug 14, 2018
Loading thumbnail…

Gist 16f26cdfd47fc8110f64ba1f4e292ad2

This example demonstrates basic integer division and exponentiation in Python. It assigns the values 11 and 5 to variables x and y, then computes the floor division result (2) and prints it, with a comment noting that 2.2 would be the floating-point result. The code also calculates and prints 2 raised to the power of 3, yielding 8. The visualization relies on standard Python print statements rather than any external data-visualization libraries, serving as a simple scripted arithmetic demonstration.

Aug 14, 2018
Loading thumbnail…

Gist 25343a3f3f1b095b8cded6cfeff7c96c

This example presents a force-directed network visualization built with D3’s `d3.forceSimulation` and rendered on a Canvas via `getImageData` pixel manipulation. It shows a clustered graph of nodes and links, with each node’s color and size derived from its degree and community membership, while links fade by weight. The code serves a local dataset through Python’s `SimpleHTTPServer` or `http.server`, and the layout is computed live as forces settle. Interactions include hover highlighting and drag-to-reposition nodes, both using D3’s event handlers on the simulation.

Aug 14, 2018
Loading thumbnail…

Gist 82e5b38e9a37eec15ec3cb5c1cf5382a

This example demonstrates how to secure Laravel AJAX requests by embedding a CSRF token in the page metadata. It shows the token being generated server-side via `{{ csrf_token() }}` and placed inside a `<meta name="csrf-token">` tag for asynchronous JavaScript calls. The code highlights that the token is unique per session and must be included in every AJAX request, though Laravel allows disabling this protection, which is not recommended. The example uses Laravel’s Blade templating syntax to inject the token into the HTML.

Aug 7, 2018
Loading thumbnail…

Gist 1bf39e5b3d6f193272ae7662fecbca1b

This example presents a procedural tutorial for generating Laravel models and migrations, emphasizing the correct creation order for Project, Category, and Level models. The visualization shows a command-line workflow using PHP’s Artisan CLI, where each `php artisan make:model` call includes the `-m` flag to simultaneously create a migration. It highlights that Project must be generated before Category and Level because the latter two contain foreign keys referencing the Project’s structure. The rendering relies on plain text and shell command formatting, with no graphical charting libraries or data-binding APIs involved.

Aug 7, 2018
Loading thumbnail…

SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was t oo long; max key length is 1000 bytes (SQL: alter table `users` add unique `users_email_unique`(`email`))

This example shows a Laravel error message, SQLSTATE[42000], that occurs when creating a unique index on an email column, where the key exceeds the maximum 1000-byte limit. The fix involves setting `Schema::defaultStringLength(191)` before defining the `users` table schema with the Blueprint API, which shortens the default string length so the unique constraint fits within the limit. The code uses Laravel's Schema builder and Blueprint class to define the table structure, including the `string()` and `unique()` methods for the email field.

Aug 4, 2018
Loading thumbnail…

Gist 23875167ddf54617f817bbd24632696b

This example shows a JavaScript function that counts down from a given number and logs each value as either “par” (even) or “impar” (odd) to the console. It uses a `while` loop with a modulo (`%`) operator to test each integer against `0` and then prints the corresponding label. The function `func(10)` is called to process numbers from 10 down to 1, producing a simple text-based output without any graphical or charting libraries. The data source is the hardcoded initial value passed as an argument.

Jul 11, 2018
Loading thumbnail…

Commands from compile a file in C from our console

This visualization maps the sequence of shell commands for compiling a C program, from installing `gcc` and `make` to running the binary and checking its exit code. It uses `d3.forceSimulation` to arrange command nodes in a network, with links showing the chronological order of execution. The data is a gist by MistyBlunch, rendered as an interactive force-directed graph that highlights the dependencies between installation, compilation, and execution steps.

Jul 11, 2018
Loading thumbnail…

Gist 5969a606f59c3a8ca7f28d9eebaa89d5

This example shows a JavaScript function called `quickCheck` that is intended to search an array for a given element. The code uses a `for` loop and the `Array.indexOf` method to iterate through the array, though the loop’s logic is incomplete and does not yet return a result. It targets a console output via `console.log` to test the function with an array of vegetables and a search term. No external libraries are used; the code relies solely on native JavaScript array methods.

Jul 4, 2018
Loading thumbnail…

Gist dc33dbae2a8fee3d6c026c07e216dc5a

This example shows a JavaScript function called `copyMachine` that duplicates an array’s contents a given number of times. The code uses a `while` loop and the spread operator `[...arr]` to append copies of the original array to itself, then stores the result in `newArr`. It demonstrates array mutation and reassignment within a loop, logging the final duplicated array to the console via `console.log`. The function handles a numeric `num` parameter, decrementing it until the loop ends, and returns the expanded array. No external libraries or visualization APIs are used; it is plain JavaScript array manipulation.

Jul 4, 2018
Loading thumbnail…

Gist 4784ecb60635f2f453efe59c8817f188

This visualization shows the resulting file structure and extraction output from the command-line tool Unrar, specifically using the `e` and `x` flags to either flatten or preserve directory hierarchies. The code demonstrates a terminal-based workflow for handling `.rar` archives, initially updating the Ubuntu package manager with `sudo apt-get update` and installing Unrar via `sudo apt-get install unrar`. The rendering approach relies on the plain-text output of the terminal commands, dynamically displaying the unrar operation results, including the target file `Nueva_carpeta__1_.rar` being processed from a path like `/home/work/software/`. The visualization appears to function by capturing and mapping the command execution flow, likely through a custom data processing system that parses each command and its output to illustrate the archive extraction process without invoking external visualization libraries.

Jun 20, 2018
Loading thumbnail…

Gist 4ff85e89516594d9399c15b3c436878f

This example demonstrates JavaScript Promise patterns for asynchronous server communication, showing fetch(), .then(), .catch(), Promise.all/race, custom Promise construction, and async/await syntax. The code samples use the browser's built-in fetch() API against document.URL.toString() to simulate server checks, with console.log output for results and error handling. It also includes a setTimeout-based delay Promise example to illustrate timing control. The gist serves as educational reference material, contrasting Promise chains, custom Promise creation, and sugar-syntax async functions.

Jun 13, 2018
Loading thumbnail…

Gist 58ea1113852500390cf7cb5f0bd2d88c

This example demonstrates two JavaScript methods for converting between JavaScript objects and JSON format. It uses the native `JSON.parse()` function to transform a JSON string into an object, then accesses its properties to display "John, 30" via `document.getElementById().innerHTML`. A second example uses `JSON.stringify()` to convert a JavaScript array of names into a JSON string for output. The code relies on standard JavaScript APIs and renders results directly into HTML elements, illustrating basic data serialization without external libraries.

Jun 13, 2018
Loading thumbnail…

Some packages needed for reports with Mongo and jsreport, download your reports in xlsx format

This example shows how to generate downloadable xlsx reports from a MongoDB database using jsreport and Express. The code connects to MongoDB via Mongoose, defines a User schema, and queries all user records on an HTTP GET request to `/generate`. It then sends the query results to jsreport’s client API, specifying a template shortid and the `jsreport.excel` recipe for rendering. The setup requires packages like `mongo-xlsx`, `express`, `mongoose`, and `nodemon`, with commands for installation and running the project via `yarn dev`.

Jun 6, 2018
Loading thumbnail…

Gist 9c2be44cd98af2520970bd40718e19fe

This example documents the manual installation steps for MongoDB on a Windows system. It shows a text-based procedure, outlining the sequence from downloading the installer, creating a data directory, setting an environment variable, and finally launching the database via the command line with `mongod --dbpath`. The presentation is a static list of instructions without any interactive visualization or external libraries like D3 or Three.js, relying instead on plain text formatting to convey the process. The data source is the gist's own authored content, with no rendering code involved.

May 28, 2018
Loading thumbnail…

Trying to learn to use objects created in JS

This example demonstrates JavaScript object-oriented programming using a custom `ToDo` constructor and prototype methods. The code defines a `ToDo` function that assigns an `action` property, then extends it with a `sayAction` method via the prototype. Two instances, `grace` and `mistyblunch`, are created and their `sayAction` methods are called, logging their respective action strings to the console. The script also directly accesses and logs the `action` properties of each object. It uses no external libraries or data sources, relying solely on native JavaScript object creation, constructor functions, and prototype-based inheritance to illustrate basic object behavior and property access.

Apr 2, 2018
Loading thumbnail…

fresh block

A simple SVG text display shows the greeting “Hi Misty Blunch!” in a monospace font, positioned at a fixed x and y coordinate within a 960-by-500 viewport. The code uses d3.v4 to select the body element, append an SVG, and add a text element with explicit attributes for font size and family. No data is loaded or processed; the example demonstrates basic DOM manipulation and static rendering with D3’s selection and append methods.

Mar 27, 2018
Loading thumbnail…

CSS Media Queries for Desktop, Tablet, Mobile.

This example maps out CSS Media Query breakpoints for desktop, tablet, and mobile screen sizes, using plain CSS within a gist by MistyBlunch. It shows how `@media` rules with `min-width` and `max-width` conditions segment the viewport into device-specific ranges, from high-resolution desktops (1281px and up) down to smartphones (320px to 480px). The code also demonstrates an `orientation: landscape` variant for tablets. No external libraries or data sources appear; it relies solely on native CSS syntax to define responsive behavior at each width threshold.

Mar 9, 2018
Loading thumbnail…

Gist bdf18bc2f317cb12b0db8e964e212b94

This C++ console program determines whether a user-provided word is a palindrome. It first prompts for input via the standard `cin` stream, then passes the string to the `polindromo_palabra` function. That function measures the word's length, rejects empty or single-character inputs with specific messages, and builds a reversed copy of the string by iterating backward through the original. It then compares the original to the reversed version using the `!=` operator, printing whether the word is or is not a palindrome. The example uses standard C++ libraries (`iostream`, `stdio.h`, and the `string` class) with no external visualization or graphics APIs.

Mar 1, 2018
Loading thumbnail…

Gist 7b6855736feac8b45cbec16c5b9c2fba

This example demonstrates a simple environment setup routine for installing Miniconda on a Linux system via a shell script. It uses `wget` to download the installer, `chmod` to make it executable, and `sudo` to run the installation into `/opt/conda`, followed by permission changes and symbolic links for `conda`, `activate`, and `deactivate` commands. The script shows a procedural, command-line-based workflow without any graphical or interactive visualization, relying purely on Bash scripting and system utilities.

Nov 30, 2017
Loading thumbnail…

JavaScript - Quitar espacios de un string

This example demonstrates a JavaScript utility that removes all spaces from a string, converting an input like "Hello World" into "HelloWorld". The function `quitSpacesOfAstring` takes a string parameter, splits it into an array using `str.split(' ')`, then iterates through each element to concatenate only non-empty strings into a result variable. It relies solely on core JavaScript methods—`split` and string concatenation—without any external libraries or visual rendering; the output is a pure string transformation.

May 9, 2017
Loading thumbnail…

A simple method to stop YouTube, Vimeo, and HTML5 videos from playing.

This example demonstrates a JavaScript utility for pausing embedded videos within a webpage. It shows how to stop playback for both HTML5 `<video>` elements and iframe-based players from services like YouTube or Vimeo. The code defines a `stopVideo` function that takes a container element and uses the standard DOM API to pause the video. For iframes, it resets the `src` attribute by reassigning the iframe’s current `src` property, forcing a reload. For native `<video>` elements, it directly calls the `pause()` method. The example relies solely on native JavaScript DOM manipulation, with no external libraries or frameworks.

Jun 6, 2014
Loading thumbnail…

Algoritmos de ordenamiento en Python

Six Python sorting algorithms—bubble, insertion, merge, quicksort, selection, and shell sort—each operate on the same fixed list of ten integers, reporting their execution time and comparison count via the `time` module. The code defines separate functions for each algorithm, using global counters for comparisons, and prints the sorted list along with performance metrics. It demonstrates comparative algorithm behavior through identical input and direct measurement, with no external libraries beyond Python’s standard library.

Apr 23, 2014