# example Published articles for example. This is one page of public article previews, not the complete archive. Follow Next page to continue. Summaries are not the original full articles. ## Track LLM API Costs with genai-prices DevFeed: [Track LLM API Costs with genai-prices]() Original publisher: [Read original article]() Author: Rick Donato Published: 2026-09-01T11:16:32Z Content type: tutorial Language: en Sources: [Packet Coders - Learn Network Automation]() Topics: [Large Language Model](), [API](), [Inference](), [Library](), [Python](), [Binance]() Tags: [api](), [cost](), [example](), [genai](), [inference](), [install](), [library](), [llm](), [openai](), [pricing](), [python](), [report](), [request](), [tips](), [token](), [uv]() ### AI overview A tutorial introducing the genai-prices Python library for estimating the cost of calling LLM inference APIs. It explains that the library can avoid maintaining a custom pricing table and can report token counts and cost for each request, with an OpenAI installation and usage example. ### Source excerpt Tip: Use the genai-prices Python library to calculate the estimated cost of calling LLM inference APIs. This avoids maintaining your own pricing table and lets you report token counts and cost for each request. Below is an example: # Install: uv add openai genai-prices from openai import OpenAI from ## NetBox: How to Prevent Direct Changes to the Main Branch DevFeed: [NetBox: How to Prevent Direct Changes to the Main Branch]() Original publisher: [Read original article]() Author: Rick Donato Published: 2026-07-17T12:51:04Z Content type: tutorial Language: en Sources: [Packet Coders - Learn Network Automation]() Topics: [NetBox](), [configuration]() Tags: [configuration](), [example](), [how-to](), [netbox](), [plugin](), [tips]() ### AI overview This tutorial explains how to use the NetBox Changes plugin to prevent direct changes to the main branch. It describes enabling protect_main so changes use branches and an approval workflow, and provides a configuration example. ### Source excerpt NetBox Tip! Prevent direct changes to the main branch when using the NetBox Changes plugin. Enable protect_main to ensure all changes are made through branches and follow an approval workflow. Here's an example configuration: # ./configuration.py PLUGINS_CONFIG = { "netbox_changes": { "protect_main": True, ## How to Get Structured Responses back from OpenAI DevFeed: [How to Get Structured Responses back from OpenAI]() Original publisher: [Read original article]() Author: Rick Donato Published: 2026-01-28T08:00:56Z Content type: tutorial Language: en Sources: [Packet Coders - Learn Network Automation]() Topics: [JSON Schema](), [OpenAI](), [Large Language Model]() Tags: [example](), [how-to](), [json](), [json-schema](), [llm](), [openai](), [responses](), [schema](), [structured](), [structured-output](), [tips]() ### AI overview This tutorial explains that structured responses from OpenAI can be obtained by defining the expected output format with JSON Schema. It includes a Python example using the OpenAI client. ### Source excerpt OpenAI Tip: If you need structured output from the LLM, use structured responses and define the expected format with JSON Schema. Here's an example: from openai import OpenAI import os client = OpenAI(api_key=os.getenv("OPENAI_API_KEY")) # Define the exact shape you want back. ## Analytical Skills for Data Professionals: Estimation, Baselines, Root Cause Analysis, and Metrics DevFeed: [Analytical Skills for Data Professionals: Estimation, Baselines, Root Cause Analysis, and Metrics]() Original publisher: [Read original article]() Author: SeattleDataGuy Published: 2026-01-23T16:49:29Z Content type: tutorial Language: en Sources: [SeattleDataGuy's Newsletter]() Topics: [Data Science](), [Math and Logic](), [data](), [dataset]() Tags: [analysis](), [critical-thinking](), [example](), [framework](), [how-to](), [metrics](), [root-cause-analysis]() ### AI overview This article discusses analytical skills that data professionals often develop on the job, including analytical intuition, estimation with limited information, baseline reasoning, critical thinking, root cause analysis, and selecting meaningful metrics. ### Source excerpt Estimation, Baselines, Root Cause Analysis, and Metrics That Actually Matter ## How to Inject Host and Group Vars from Ansible into NetBox Config Templates DevFeed: [How to Inject Host and Group Vars from Ansible into NetBox Config Templates]() Original publisher: [Read original article]() Author: Rick Donato Published: 2025-12-18T09:00:32Z Content type: tutorial Language: en Sources: [Packet Coders - Learn Network Automation]() Topics: [Ansible](), [NetBox](), [configuration](), [API]() Tags: [ansible](), [api](), [config](), [configuration](), [example](), [how-to](), [netbox](), [templates](), [tips]() ### AI overview A tutorial showing how to pass Ansible group_vars and host_vars into NetBox Config Templates so the variables can be used when rendering configuration. ### Source excerpt Ansible and NetBox Tip: Pass Ansible group_vars and host_vars into NetBox Config Templates by sending your Ansible vars, making them available directly within your Config Templates. Here is an example: # Ansible Playbook - name: Trigger NetBox to return rendered configuration ansible.builtin.uri: url: "{{ NETBOX_ENDPOINT }}/api/dcim/ ## Range Syntax for Style Queries DevFeed: [Range Syntax for Style Queries]() Original publisher: [Read original article]() Published: 2025-11-12T00:00:00Z Content type: tutorial Language: en Sources: [Una Kravets]() Topics: [CSS](), [Web Development](), [Code]() Tags: [css](), [demo](), [example](), [function](), [how-to](), [learn](), [properties](), [range](), [syntax]() ### AI overview A tutorial on using range syntax in CSS style queries and the if() function. It explains comparisons involving custom properties, literal values, and function results, with examples for responsive components, weather cards, grid placement, and styling effects. ### Source excerpt Learn how to use the new range syntax for CSS style queries and the if() function. ## Make regular expressions easier to read DevFeed: [Make regular expressions easier to read]() Original publisher: [Read original article]() Author: Stanko Published: 2025-03-31T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [Code](), [formatting](), [Maintainability]() Tags: [example](), [extra](), [join](), [maintainability](), [readability](), [regular-expressions](), [value]() ### AI overview The article presents a formatting technique for making complex regular expressions easier to read: split the expression into multiple string components, join them, and construct the final regex. The approach adds code and requires escaping backslashes, but enables scanning and comments that can improve readability and maintainability. ### Source excerpt This is a simple formatting trick I use to make regular expressions more readable. The secret? Break them into multiple lines. To achieve this, format the regex as an array of strings and then concatenate the array into a single regex string. Example # Compare this example, written in a single line: const FILTER_REGEXP = /(?blur|brightness|contrast|grayscale|hue-rotate|invert|opacity|saturate|sepia)\((?-?\d*(?:\.\d*)?)(?\w*?)\)/g; with the multi-line version: const SUPPORTED_FILTERS = [ 'blur', 'brightness', 'contrast', 'grayscale', 'hue-rotate', 'invert', 'opacity', 'saturate', 'sepia', ].join('|'); const FILTER_REGEXP = new RegExp( [ `(?${SUPPORTED_FILTERS})`, // filter name `\\(`, `(?\-?\\d*(?:\\.\\d*)?)`, // value `(?\\w*?)`, // unit if any `\\)`, ].join(''), 'g' ); The multi-line version has a bit more code, but it's easier to scan and read. It also allows us to write comments for each section, clarifying the purpose of each part of the regex. I've found that complex expressions are much easier to write this way. I believe it greatly reduces the cognitive load for both the writer and the reader. Caveats # You'll need to escape the backslashes in regex strings. While this is a minor inconvenience, the readability benefits easily outweigh it. Conclusion # It boils down to personal preference, but I believe the extra code is worth it, as it improves readability and maintainability. This is especially true when dealing with notoriously difficult-to-parse complex regular expressions. ## HTML Tables with Horizontal Scroll and Sticky Headers DevFeed: [HTML Tables with Horizontal Scroll and Sticky Headers]() Original publisher: [Read original article]() Author: hello@taniarascia.com Published: 2024-10-09T00:00:00Z Content type: tutorial Language: en Sources: [Tania Rascia]() Topics: [HTML](), [Web Development](), [modern web development]() Tags: [container](), [css](), [design](), [dockerignore-usage](), [example](), [headers](), [helps](), [html](), [javascript](), [table](), [tables]() ### AI overview A tutorial on building HTML tables that support horizontal scrolling and sticky headers. It explains why sticky positioning can fail inside an overflow container and presents a table-wrapper height as the solution, producing a vertically and horizontally scrollable datagrid-style view. ### Source excerpt Turns out, creating an HTML table that has both horizontal scroll and fixed headers can be a tricky problem. As another developer said about... ## Binary search finds things fast DevFeed: [Binary search finds things fast]() Original publisher: [Read original article]() Author: Mike Published: 2024-08-13T07:55:55Z Content type: tutorial Language: en Sources: [Dev Details]() Topics: [Algorithm](), [Programming]() Tags: [algorithm](), [array](), [binary-search](), [book](), [example](), [interactive]() ### AI overview A tutorial explaining binary search, an efficient algorithm for finding an item's position in a sorted array by repeatedly halving the search range. It covers the requirement that the array be sorted, the search steps, and use cases including checking values, finding occurrences, and determining insertion points. ### Source excerpt I wrote a small interactive book to teach binary search. ## Deeplink to specific PDF pages DevFeed: [Deeplink to specific PDF pages]() Original publisher: [Read original article]() Published: 2024-07-11T00:00:00Z Content type: tutorial Language: en Sources: [technicalwriting.dev]() Topics: [pdf](), [browser]() Tags: [browser](), [example](), [guide](), [links](), [pages](), [pdf]() ### AI overview This article explains how to link directly to a specific page in a PDF by appending #page=X to the URL. It notes that browsers count the PDF's first page as page 1, which may differ from the page numbering used by the document's authors. ### Source excerpt Append #page=X to your URL, where X is the page to link to. ## Using the Gemini app with Material Design 3 DevFeed: [Using the Gemini app with Material Design 3]() Original publisher: [Read original article]() Published: 2024-05-07T13:00:00Z Content type: tutorial Language: en Sources: [Material.io - Material Design]() Topics: [Material Design for Bootstrap](), [App]() Tags: [design](), [developers](), [example](), [gemini](), [material-design-3]() ### AI overview The article presents example prompts for designers and developers using the Gemini app with Material Design 3. ### Source excerpt Example prompts for designers and developers ## Kotlin Reflection: Type references DevFeed: [Kotlin Reflection: Type references]() Original publisher: [Read original article]() Published: 2023-10-30T00:15:00Z Content type: tutorial Language: en Sources: [Kt. Academy]() Topics: [Kotlin](), [Code](), [class](), [function]() Tags: [code](), [example](), [generator](), [kotlin](), [practical](), [type-argument](), [type-parameter](), [workshop-learning-programming]() ### AI overview A tutorial on Kotlin reflection type references. It explains how types differ from classes, how type references expose nullability, type arguments, and classifiers, and how to use them in a random-value generator. ### Source excerpt Using type references, with practical example of random value generator. ## Kotlin Reflection: Class references DevFeed: [Kotlin Reflection: Class references]() Original publisher: [Read original article]() Published: 2023-10-23T00:15:00Z Content type: tutorial Language: en Sources: [Kt. Academy]() Topics: [Kotlin](), [class]() Tags: [class](), [example](), [kotlin](), [object](), [practical](), [workshop-learning-programming]() ### AI overview A tutorial on Kotlin class references, covering class names, type characteristics, visibility, members, and declared members, with a practical object serialization example. ### Source excerpt All the essential aspects of class references, and a practical object serialization example. ## Scrollbar width custom event DevFeed: [Scrollbar width custom event]() Original publisher: [Read original article]() Author: Stanko Published: 2023-06-19T00:00:00Z Content type: tutorial Language: en Sources: [Stanko Tadić]() Topics: [JavaScript](), [Web Development](), [browser](), [CSS](), [Code]() Tags: [browser](), [code](), [css](), [demo](), [developers](), [example](), [examples](), [how-to](), [javascript](), [layout](), [live](), [load](), [prevent](), [stack-overflow](), [value](), [variable]() ### AI overview This tutorial explains scrollbar-related layout issues and shows how to create a custom JavaScript event that detects changes in scrollbar width using ResizeObserver. It also covers initializing a CSS variable early to reduce layout shift and briefly mentions a CSS alternative. ### Source excerpt Some operating systems and browsers are not showing scrollbars by default. That often results in developers forgetting about these pesky gray bars and the issues they can cause. I'll give you two quick examples: When setting overflow: hidden on the body element, if there was a scrollbar visible, content will jump a little as it now has more space. If you ever implemented scroll locking for modals, you've probably encountered this issue. Another thing is that width: 100vw and width: 100% on the body element don't match if there is a scrollbar visible: 100vw is the width of the viewport including the scrollbar. 100% is the width of the viewport excluding the scrollbar. This becomes obvious if you have a fixed element like a header. It will be a little bit wider than the rest of the content when scrollbar is visible. I'm sure there are more issues, but these are the two I remembered on top of my head. Anyhow, let's see how to solve this. JavaScript solution # Ideally we would like to have a scrollbar-width event. It doesn't exist, so we'll have to create a custom event ourselves, and trigger it when scrollbar width changes. To catch the width changing, we can't use the resize event because viewport size don't change when scrollbar is toggled. However, if we set the ResizeObserver on the html element, it will trigger when the scrollbar is toggled. Code # After setting the observer we need to fire our custom event when width has changed. Code looks something like this: const initScrollbarWidthEvent = () => { // Custom event const scrollbarEvent = new Event("scrollbar-width"); // Initial state let currentWidth = window.innerWidth - document.documentElement.clientWidth; const observer = new ResizeObserver(() => { const newWidth = window.innerWidth - document.documentElement.clientWidth; // Check if the scrollbar width has changed and trigger the custom event if (newWidth !== currentWidth) { // Update event data // We are passing both previous and current width, // because ## Diagrams and API design with AI DevFeed: [Diagrams and API design with AI]() Original publisher: [Read original article]() Author: Mike Published: 2023-06-14T03:37:00Z Content type: tutorial Language: en Sources: [Dev Details]() Topics: [coding](), [OpenAPI Specification](), [Artificial Intelligence](), [ChatGPT](), [plantuml]() Tags: [ai](), [api-design](), [best-practices](), [coding](), [example](), [openapi](), [plantuml]() ### AI overview Part 3 of a practical series demonstrates using ChatGPT to visualize a URL shortening service design with a PlantUML sequence diagram and generate an OpenAPI specification. It compares ChatGPT 3.5 and ChatGPT 4 for these tasks and explains how an API-first specification supports parallel UI and server development. ### Source excerpt Part 3 of a practical example of using AI for coding ## A practical example of using AI for coding DevFeed: [A practical example of using AI for coding]() Original publisher: [Read original article]() Author: Mike Published: 2023-06-14T03:34:57Z Content type: tutorial Language: en Sources: [Dev Details]() Topics: [ai-coding](), [Artificial Intelligence](), [Development](), [coding](), [Programming](), [pair\_programming]() Tags: [ai](), [ai-coding](), [coding](), [developing](), [example](), [pair-programming](), [practical](), [programming]() ### AI overview A practical tutorial on using ChatGPT and other large language models in software development. It presents an end-to-end application walkthrough and recommends treating AI as a coding companion while remaining engaged, precise, and able to review the generated code. ### Source excerpt An end-to-end walkthrough of designing, developing, and testing a simple application with the help of AI. ## Lambda expressions DevFeed: [Lambda expressions]() Original publisher: [Read original article]() Published: 2022-08-26T00:03:00Z Content type: tutorial Language: en Sources: [Kt. Academy]() Topics: [Kotlin](), [Functional programming](), [Programming](), [function](), [destructuring]() Tags: [destructuring](), [example](), [functional-programming](), [how-to](), [intellij](), [kotlin](), [lambda](), [learn](), [workshop-learning-programming]() ### AI overview A Kotlin tutorial explaining lambda expressions as function literals, including their syntax, parameters, trailing-lambda convention, destructuring, and common problems caused by braces or uninvoked lambdas. ### Source excerpt Let's learn how to use lambda expressions, what special support they have, and what traps they generate. ## Stochastic Systems, Fokker-Planck and the Heat Equation via Haskell DevFeed: [Stochastic Systems, Fokker-Planck and the Heat Equation via Haskell]() Original publisher: [Read original article]() Author: Dominic Steinitz Published: 2020-04-26T14:20:10Z Content type: tutorial Language: en Sources: [Maths, Stats & Functional Programming]() Topics: [systems](), [Haskell](), [Library](), [C]() Tags: [c](), [example](), [examples](), [haskell](), [library](), [numerical-methods](), [numerics](), [partial-differential-equations](), [source](), [system](), [systems](), [using](), [with]() ### AI overview A short Haskell example models a stochastic system with the Fokker-Planck method, converts it to a partial differential equation, and solves a two-dimensional equation using SUNDIALS through the hmatrix-sundials library. The example is based on C examples included with the SUNDIALS source. ### Source excerpt This is a short example of taking a stochastic system, using Fokker-Planck to convert it to a PDES and using SUNDIALS to solve a 2D partial differential equation in Haskell via the hmatrix-sundials library. The example is taken from the C examples that come with the SUNDIALS source. Here's the full blog. ## EOF is not a character DevFeed: [EOF is not a character]() Original publisher: [Read original article]() Author: Ruslan Spivak Published: 2020-03-01T16:53:00Z Content type: tutorial Language: en Sources: [Ruslan Spivak]() Topics: [C](), [IO](), [Unix](), [ASCII](), [Streams](), [Code]() Tags: [ascii](), [blog](), [c](), [code](), [computer](), [example](), [file](), [function](), [library](), [linux](), [mac-os](), [python](), [standard-library](), [stream](), [systems](), [text](), [unix](), [value]() ### AI overview This tutorial explains that EOF in C is not a character and is not stored at the end of a file. It examines EOF in Unix I/O, its usual value of -1, and why that value cannot represent a character. ### Source excerpt I was reading Computer Systems: A Programmer's Perspective the other day and in the chapter on Unix I/O the authors mention that there is no explicit "EOF character" at the end of a file. ## Git Bisect DevFeed: [Git Bisect]() Original publisher: [Read original article]() Author: Derek Lee Published: 2020-01-01T00:00:00Z Content type: tutorial Language: en Sources: [art and science of coding]() Topics: [Git](), [bug](), [test]() Tags: [behavior](), [bug](), [commit](), [dev-recipes](), [example](), [git](), [test]() ### AI overview A reference guide to using Git Bisect to identify the commit that introduced a bug. It explains how to start the bisect process, mark known good and bad commits, test intermediate commits, repeat the process, and finish after finding the problematic commit. ### Source excerpt Reference Documentation ## One Dimensional Heat Equation via SUNDIALS and Haskell DevFeed: [One Dimensional Heat Equation via SUNDIALS and Haskell]() Original publisher: [Read original article]() Author: Dominic Steinitz Published: 2019-10-22T09:45:32Z Content type: tutorial Language: en Sources: [Maths, Stats & Functional Programming]() Topics: [Haskell](), [Library]() Tags: [example](), [haskell](), [library](), [uncategorized]() ### AI overview A short Haskell example showing how to use SUNDIALS through the hmatrix-sundials library to solve a simple one-dimensional heat-equation partial differential equation. The example is based on C examples included with the SUNDIALS source. ### Source excerpt This is a short example of how to use SUNDIALS to solve a simple partial differential equation in Haskell via the hmatrix-sundials library. The example is taken from the C examples that come with the SUNDIALS source. Here's the full blog. I'll give a better URL soonish. ## Multi-column manipulation DevFeed: [Multi-column manipulation]() Original publisher: [Read original article]() Author: Heydon Pickering Published: 2019-07-20T00:00:00Z Content type: tutorial Language: en Sources: [The Every Layout Blog]() Topics: [CSS](), [Web Development](), [modern web development]() Tags: [css](), [developer-tools](), [example](), [interaction](), [layout]() ### AI overview An exploration of CSS Multi-column Layout, focusing on its unusual horizontal or vertical overflow behavior and the interaction challenges of horizontal scrolling. It also demonstrates quantity-dependent columns that split long bullet lists into two columns when they contain at least five items. ### Source excerpt Despite predating both Grid and Flexbox, Multi-column Layout represents--at least to me--an even more radical departure from the way we normally do and think about CSS layout. Dividing just one element into a multi-column representation of its contents feels weird, heretical even. Setting a multi-column context means asking (flow) content to progress, by column, in a horizontal direction. This invokes one of two issues, depending on whether you set a height on the element. With no set height, there's no limit to the height of the columns. This will result in vertical overflow, and the necessity to scroll down and up the page to read each successive column. Many are likely to find this arduous. With a set height, columns are forced to spawn in the inline (horizontal) direction, creating horizontal overflow. Setting overflow: auto frames this correctly. .columns { height: 25vh; /* ↓ columns defined by width */ columns: 30ch; overflow: auto; } However, despite the increasing popularity of scrolling menus and other such patterns harnessing horizontal scrolling, it is still an unconventional interaction paradigm -- and unconventional patterns are liable to be misapprehended by users. There are ways to increase perceived affordance, of course--perhaps by adding some custom styling to the scrollbar (-webkit-scrollbar), or providing some overflow-dependent shadows. But this may not be enough. Quantity-dependent columns One thing I have been experimenting with is the application of multiple columns in response to content quantity. Let's say I have a bullet list, and let's assume each bullet point is likely to be relatively short; no more than a sentence. There's no benefit to dividing the list into columns when there are only a few points. But the overall height of the list is shortened (and the chance of the reader being able to see the whole list without scrolling is increased) when a long list is divided into two. In the following example, the list is split into two columns w ## Using Goss to validate Packer builds DevFeed: [Using Goss to validate Packer builds]() Original publisher: [Read original article]() Author: Carlos Alexandro Becker Published: 2018-12-06T00:00:00Z Content type: tutorial Language: en Sources: [Carlos Becker]() Topics: [test](), [Tool](), [builds](), [Server](), [Cloud]() Tags: [build](), [cloud](), [download](), [example](), [file](), [fork](), [git-tags](), [permissions](), [plugin](), [releases](), [run](), [simple](), [test](), [tool](), [useful](), [using]() ### AI overview A practical tip for validating Packer-built images with Goss. The article describes using a Packer plugin and a Goss test suite to check an image before pushing it to Google Cloud. ### Source excerpt Ever wanted to validate your Packer image with Goss? Well, you can! ## An Annotated webpack 4 Config for Frontend Web Development DevFeed: [An Annotated webpack 4 Config for Frontend Web Development]() Original publisher: [Read original article]() Author: andrew@nystudio107.com (Andrew Welch) Published: 2018-10-23T13:40:00Z Content type: tutorial Language: en Sources: [nystudio107 | Articles on modern web development.]() Topics: [Webpack](), [Web Development](), [Front end](), [Tooling]() Tags: [build](), [complete](), [complex](), [development](), [example](), [frontend](), [help](), [here-s](), [insights](), [modern](), [need](), [production](), [real-world](), [sophisticated](), [tooling](), [web-development](), [webpack](), [websites]() ### AI overview A tutorial presenting an annotated, real-world production webpack 4 configuration for modern frontend web development. It explains why the author adopted webpack and compares it with alternatives such as Laravel Mix, vue-cli, and Neutrino. ### Source excerpt As web development becomes more complex, we need tooling to help us build modern websites. Here's a complete real-world production example of a sophisticated webpack 4 config [Next page]()