Sr. Content Developer at Microsoft, working remotely in PA, TechBash conference organizer, former Microsoft MVP, Husband, Dad and Geek.
150647 stories
·
33 followers

Gifting SDKs with Kiota | Victor Frye

1 Share

Merry Christmas and happy holidays! It's time for a C# Advent blog post.

'Tis the season to be jolly, and what better way to spread joy than by gifting SDKs for your ASP.NET Core web APIs? In this festive post, we'll explore how Kiota, a code generator for OpenAPI described APIs, can help you create C# SDKs for your services, making it easier for others to integrate and use them.

Some assumptions and clarifications before we begin:

  • You already have an OpenAPI document for your application. It can be a file saved locally or served from a URL endpoint.
  • In this post, we'll focus on generating C# SDKs using Kiota, but Kiota also supports other languages like TypeScript, Java, and Python.
  • Kiota can generate SDKs for any OpenAPI described API, not just ASP.NET Core web APIs. However, for this post, we'll specifically look at ASP.NET Core. We're C# developers after all!

In this blog post, we'll utilize an existing OpenAPI document and generate a C# SDK using Kiota.

What is Kiota?

Every good gift starts with understanding what you're giving. One of the major innovations in .NET is the OpenAPI.NET library, which moves OpenAPI support to first-class status within the .NET platform. Kiota is a Microsoft code generator that leverages this library to create SDKs for OpenAPI described APIs. It supports multiple programming languages, including C#, TypeScript, Java, and Python. There's plenty of other code generators out there, but this tight integration with OpenAPI.NET and Microsoft support makes it a compelling choice.

I discovered Kiota while exploring ways my team could generate SDKs for a plethora of new microservices. A common problem in microservice architectures is each service exposes its own API and any consumers need to know the (1) the available endpoints, (2) the model definitions, and (3) write the client code to call the service. This is a lot of boilerplate work that is tedious and error-prone. An OpenAPI document helps describe the API surface and models, but a code generator like Kiota can take this a step further by generating the exact client code needed to call the service, including models, request builders, and serialization logic.

Installing Kiota

Santa has made it easy for .NET developers to get started with Kiota. It is available as a .NET tool, which means you can install it once globally or add it as a local tool to your project. To install Kiota globally, run the following command:

dotnet tool install --global Microsoft.OpenApi.Kiota

We can verify the installation by checking the version:

kiota --version

Set up an SDK project

Before we continue, we need an SDK project. Kiota can generate a client that you include in existing projects, but building an SDK project is a great way to package and distribute the code via NuGet. Your customers don't care how you built the SDK; they just want the gift of ready-to-use code.

Let's create a new class library project for our SDK:

dotnet new classlib --name Sdk --output ./src/Sdk

Next, we need to add some dependencies to our SDK project. Kiota-generated clients rely on a few NuGet packages for abstractions, serialization, and HTTP handling. We can add these packages using the Microsoft.Kiota.Bundle package reference. Run the following command in the SDK project directory:

dotnet package add Microsoft.Kiota.Bundle --project ./src/Sdk/Sdk.csproj

Let's now clear any existing code such as the default Class1.cs file created by the class library template. Kiota will create everything we need in our SDK project.

Generating the client with Kiota

Now that we have our SDK project set up, it's time to generate the client code. I am going to use an OpenAPI document hosted locally for demonstration purposes, but you can use any OpenAPI document accessible via a URL or file path. Like a good Christmas wishlist, Kiota has several options to customize the generated code. We'll use some good defaults for this example and explain why they matter:

kiota generate \
    --language csharp \
    --openapi <a href="https://localhost:7045/openapi/v1.json" rel="nofollow">https://localhost:7045/openapi/v1.json</a> \
    --output ./src/Sdk \
    --class-name ChristmasApiClient \
    --namespace-name VictorFrye.MerryChristmas.Sdk

Here's a breakdown of the options used:

  • --language csharp: Specifies that we want to generate a C# client. The language option is crucial given Kiota's multi-language support.
  • --openapi: The path or URL to the OpenAPI document describing the API. This is the heart of the generation process.
  • --output: The directory where the generated code will be placed. We point this to our SDK project but it could be a directory in an existing application.
  • --class-name: The name of the main client class to generate. The default is ApiClient, but giving it a meaningful name like ChristmasApiClient makes it clear what service this client interacts with and avoids naming conflicts.
  • --namespace-name: The namespace for the generated code. This helps organize the code and should align with your project's namespace conventions.

After running the command, Kiota will generate models, api request builders, and our api client class in the specified output directory. You will also see a kiota-lock.json file that captures the generation settings for future reference.

We now have our gift-wrapped SDK ready to be shared!

Using the generated SDK

With our SDK generated, it's time to see how we can use it in an application. Let's create a simple console application that utilizes the ChristmasApiClient to interact with our ASP.NET Core web API. We'll use a C# file-based application for simplicity:

#!/usr/bin/env dotnet

#:project ../src/Sdk/Sdk.csproj
#:package <a href="mailto:Microsoft.Kiota.Bundle@1.21.0">Microsoft.Kiota.Bundle@1.21.0</a>

using Microsoft.Kiota.Http.HttpClientLibrary;
using Microsoft.Kiota.Abstractions.Authentication;
using VictorFrye.MerryChristmas.Sdk;

var baseUrl = args.Length > 0 ? args[0] : "https://localhost:7045";

var client = new ChristmasApiClient(new HttpClientRequestAdapter(new AnonymousAuthenticationProvider())
{
    BaseUrl = baseUrl
});

Console.WriteLine(await client.Api.Christmas.GetAsync());

This demo is very lightweight, but gives a sneak peek at our gifted SDK in action. We create an instance of the ChristmasApiClient, configure it with a base URL, and make a call to the GetAsync method on the Christmas endpoint. The generated client handles all the HTTP communication, serialization, and deserialization for us.

The biggest trick of any generated code is understanding how to use it. The real gift: we don't have to write any of the boilerplate code ourselves. The generated SDK does all the heavy lifting, allowing us to focus on building out and consuming our APIs.

Final thoughts

Code generation is a powerful tool that can save developers significant time and effort. Kiota made it easy to generate SDKs for OpenAPI described APIs, and given its tight integration with the .NET ecosystem, it was a natural choice for my microservices project. This example walks through a C# SDK, but multi-language support means you can gift SDKs for your frontend developers in TypeScript or a data science team in Python.

If you need additional reference material, check out the official Kiota documentation for more details on languages, options, and advanced usage scenarios. You can also explore my Secret Santa repository which contains the sample ASP.NET Core web API and a Kiota-generated SDK and samples.

Happy holidays and this festive season, give the gift or a ready-to-use SDK with Kiota! Ho ho ho!

Read the whole story
alvinashcraft
2 hours ago
reply
Pennsylvania, USA
Share this story
Delete

Supercharge Your Design System with LLMs and Storybook MCP

1 Share
A guide to combining LLM coding agents with Storybook MCP for higher-quality, lower-cost frontend development.
Read the whole story
alvinashcraft
3 hours ago
reply
Pennsylvania, USA
Share this story
Delete

State, Logic, And Native Power: CSS Wrapped 2025

1 Share

If I were to divide CSS evolutions into categories, we have moved far beyond the days when we simply asked for border-radius to feel like we were living in the future. We are currently living in a moment where the platform is handing us tools that don’t just tweak the visual layer, but fundamentally redefine how we architect interfaces. I thought the number of features announced in 2024 couldn’t be topped. I’ve never been so happily wrong.

The Chrome team’s “CSS Wrapped 2025” is not just a list of features; it is a manifesto for a dynamic, native web. As someone who has spent a couple of years documenting these evolutions — from defining “CSS5” eras to the intricacies of modern layout utilities — I find myself looking at this year’s wrap-up with a huge sense of excitement. We are seeing a shift towards “Optimized Ergonomics” and “Next-gen interactions” that allow us to stop fighting the code and start sculpting interfaces in their natural state.

In this article, you can find a comprehensive look at the standout features from Chrome’s report, viewed through the lens of my recent experiments and hopes for the future of the platform.

The Component Revolution: Finally, A Native Customizable Select

For years, we have relied on heavy JavaScript libraries to style dropdowns, a “decades-old problem” that the platform has finally solved. As I detailed in my deep dive into the history of the customizable select (and related articles), this has been a long road involving Open UI, bikeshedding names like <selectmenu> and <selectlist>, and finally landing on a solution that re-uses the existing <select> element.

The introduction of appearance: base-select is a strong foundation. It allows us to fully customize the <select> element — including the button and the dropdown list (via ::picker(select)) — using standard CSS. Crucially, this is built with progressive enhancement in mind. By wrapping our styles in a feature query, we ensure a seamless experience across all browsers.

We can opt in to this new behavior without breaking older browsers:

select {
  /* Opt-in for the new customizable select */
  @supports (appearance: base-select) {
    &, &::picker(select) {
      appearance: base-select;
    }
  }
}

The fantastic addition to allow rich content inside options, such as images or flags, is a lot of fun. We can create all sorts of selects nowadays:

  • Demo: I created a Poké-adventure demo showing how the new <selectedcontent> element can clone rich content (like a Pokéball icon) from an option directly into the button.

See the Pen A customizable select with images inside of the options and the selectedcontent [forked] by utilitybend.

See the Pen A customizable select with only pseudo-elements [forked] by utilitybend.

See the Pen An actual Select Menu with optgroups [forked] by utilitybend.

This feature alone signals a massive shift in how we will build forms, reducing dependencies and technical debt.

Scroll Markers And The Death Of The JavaScript Carousel

Creating carousels has historically been a friction point between developers and clients. Clients love them, developers dread the JavaScript required to make them accessible and performant. The arrival of ::scroll-marker and ::scroll-button() pseudo-elements changes this dynamic entirely.

These features allow us to create navigation dots and scroll buttons purely with CSS, linked natively to the scroll container. As I wrote on my blog, this was Love at first slide. The ability to create a fully functional, accessible slider without a single line of JavaScript is not just convenient; it is a triumph for performance. There were some accessibility concerns around this feature, and even though these were really valid, I’m sure it’s up to us developers to make it work. The good thing is, all these UI changes are making it a lot easier than custom DOM manipulation and dragging around aria tags, but I digress…

We can now group markers automatically using scroll-marker-group and style the buttons using anchor positioning to place them exactly where we want.

.carousel {
  overflow-x: auto;
  scroll-marker-group: after; /* Creates the container for dots */

  /* Create the buttons */
  &::scroll-button(inline-end),
  &::scroll-button(inline-start) {
    content: " ";
    position: absolute;
    /* Use anchor positioning to center them */
    position-anchor: --carousel;
    top: anchor(center);
  }

  /* Create the markers on the children */
  div {
    &::scroll-marker {
      content: " ";
      width: 24px;
      border-radius: 50%;
      cursor: pointer;
    }
    /* Highlight the active marker */
    &::scroll-marker:target-current {
      background: white;
    }
  }
}

See the Pen Carousel Pure HTML and CSS [forked] by utilitybend.

See the Pen Webshop slick slider remake in CSS [forked] by utilitybend.

State Queries: Sticky Thing Stuck? Snappy Thing Snapped?

For a long time, we have lacked the ability to know if a “sticky thing is stuck” or if a “snappy item is snapped” without relying on IntersectionObserver hacks. Chrome 133 introduced scroll-state queries, allowing us to query these states declaratively.

By setting container-type: scroll-state, we can now style children based on whether they are stuck, snapped, or overflowing. This is a massive “quality of life” improvement that I have been eagerly waiting for since CSS Day 2023. It has even evolved a lot since we can also see the direction of the scroll, lovely!

For a simple example: we can finally apply a shadow to a header only when it is actually sticking to the top of the viewport:

.header-container {
  container-type: scroll-state;
  position: sticky;
  top: 0;

  header {
    transition: box-shadow 0.5s ease-out;
    /* The query checks the state of the container */
    @container scroll-state(stuck: top) {
      box-shadow: rgba(0, 0, 0, 0.6) 0px 12px 28px 0px;
    }
  }
}
  • Demo: A sticky header that only applies a shadow when it is actually stuck.

See the Pen Sticky headers with scroll-state query, checking if the sticky element is stuck [forked] by utilitybend.

  • Demo: A Pokémon-themed list that uses scroll-state queries combined with anchor positioning to move a frame over the currently snapped character.

See the Pen Scroll-state query to check which item is snapped with CSS, Pokemon version [forked] by utilitybend.

Optimized Ergonomics: Logic In CSS

The “Optimized Ergonomics” section of CSS Wrapped highlights features that make our workflows more intuitive. Three features stand out as transformative for how we write logic:

  1. if() Statements
    We are finally getting conditionals in CSS. The if() function acts like a ternary operator for stylesheets, allowing us to apply values based on media, support, or style queries inline. This reduces the need for verbose @media blocks for single property changes.
  2. @function functions
    We can finally move some logic to a different place, resulting in some cleaner files, a real quality of life feature.
  3. sibling-index() and sibling-count()
    These tree-counting functions solve the issue of staggering animations or styling items based on list size. As I explored in Styling siblings with CSS has never been easier, this eliminates the need to hard-code custom properties (like --index: 1) in our HTML.

Example: Calculating Layouts

We can now write concise mathematical formulas. For example, staggering an animation for cards entering the screen becomes trivial:

.card-container > * {
  animation: reveal 0.6s ease-out forwards;
  /* No more manual --index variables! */
  animation-delay: calc(sibling-index() * 0.1s);
}

I even experimented with using these functions along with trigonometry to place items in a perfect circle without any JavaScript.

See the Pen Stagger cards using sibling-index() [forked] by utilitybend.

  • Demo: Placing items in a perfect circle using sibling-index, sibling-count, and the new CSS @function feature.

See the Pen The circle using sibling-index, sibling-count and functions [forked] by utilitybend.

My CSS To-Do List: Features I Can’t Wait To Try

While I have been busy sculpting selects and transitions, the “CSS Wrapped 2025” report is packed with other goodies that I haven’t had the chance to fire up in CodePen yet. These are high on my list for my next experiments:

Anchored Container Queries

I used CSS Anchor Positioning for the buttons in my carousel demo, but “CSS Wrapped” highlights an evolution of this: Anchored Container Queries. This solves a problem we’ve all had with tooltips: if the browser flips the tooltip from top to bottom because of space constraints, the “arrow” often stays pointing the wrong way. With anchored container queries (@container anchored(fallback: flip-block)), we can style the element based on which fallback position the browser actually chose.

Nested View Transition Groups

View Transitions have been a revolution, but they came with a specific trade-off: they flattened the element tree, which often broke 3D transforms or overflow: clip. I always had a feeling that it was missing something, and this might just be the answer. By using view-transition-group: nearest, we can finally nest transition groups within each other.

This allows us to maintain clipping effects or 3D rotations during a transition — something that was previously impossible because the elements were hoisted up to the top level.

.card img {
  view-transition-name: photo;
  view-transition-group: nearest; /* Keep it nested! */
}

Typography and Shapes

Finally, the ergonomist in me is itching to try Text Box Trim, which promises to remove that annoying extra whitespace above and below text content (the leading) to finally achieve perfect vertical alignment. And for the creative side, corner-shape and the shape() function are opening up non-rectangular layouts, allowing for “squaricles” and complex paths that respond to CSS variables. That being said, I can’t wait to have a design full of squircles!

A Hopeful Future

We are witnessing a world where CSS is becoming capable of handling logic, state, and complex interactions that previously belonged to JavaScript. Features like moveBefore (preserving DOM state for iframes/videos) and attr() (using types beyond strings for colors and grids) further cement this reality.

While some of these features are currently experimental or specific to Chrome, the momentum is undeniable. We must hope for continued support across all browsers through initiatives like Interop to ensure these capabilities become the baseline. That being said, having browser engines is just as important as having all these awesome features in “Chrome first”. These new features need to be discussed, tinkered with, and tested before ever landing in browsers.

It is a fantastic moment to get into CSS. We are no longer just styling documents; we are crafting dynamic, ergonomic, and robust applications with a native toolkit that is more powerful than ever.

Let’s get going with this new era and spread the word.

This is CSS Wrapped!



Read the whole story
alvinashcraft
3 hours ago
reply
Pennsylvania, USA
Share this story
Delete

The war on disinformation is a losing battle

1 Share

As he called the House Judiciary Committee into session on a cold and snowy February day in Washington, DC, Chairman Jim Jordan was ready to take a victory lap. American free speech had been critically threatened, and now it was saved - in large part thanks to him and his committee.

"What a difference a few years make," the Republican congressman for Ohio's 4th district told those present. "Four years ago, President Trump was banned from all platforms: Twitter, Facebook, YouTube. Today, he has his own platform. He's back on all the others. And of course, he's president of the United States."

Donald Trump was expelled from the major social …

Read the full story at The Verge.

Read the whole story
alvinashcraft
3 hours ago
reply
Pennsylvania, USA
Share this story
Delete

AI is set to reshape software development in 2026

1 Share
In order to thrive in 2026 developers will need to align human creativity with AI, delivering software that is not only faster and smarter, but also more transparent, more intuitive, and more human-centered than ever before. This is the conclusion of the latest software development trends report from Infragistics. It looks at how AI-driven intelligence, predictive UX, adaptive design systems, and ethical data governance will define the next era of digital innovation and what technology leaders can do to prepare. “We will face unprecedented pressure to strengthen privacy protections and data governance frameworks in the coming year,” says Jason Beres,… [Continue Reading]
Read the whole story
alvinashcraft
3 hours ago
reply
Pennsylvania, USA
Share this story
Delete

Hyperskill Gets Its Own Plugin Inside JetBrains IDEs

1 Share

Hyperskill is introducing its own free dedicated plugin inside JetBrains IDEs. This new plugin is built specifically for the Hyperskill learning experience and replaces the previous integration inside the JetBrains Academy plugin. Starting December 11, Hyperskill courses will be available exclusively through the new Hyperskill Academy plugin. 

The new Hyperskill Academy plugin provides a more focused and consistent learning environment with all features, tasks, and settings conveniently located in one place. It is designed and maintained directly by the Hyperskill team.

What you’ll get with the new plugin:

  • A unified environment aligned with the Hyperskill platform.
  • Faster updates, improvements, and fixes.
  • Simpler navigation in a single dedicated plugin.

This makes learning smoother and more intuitive, especially for long-term projects.

If you’re currently using Hyperskill courses through the JetBrains Academy plugin, here’s what you need to know and what to do next.

What changes

  • You’ll need to install the new free Hyperskill Academy plugin from the Marketplace tab in IDE, available after December 11.
  • The JetBrains Academy plugin will remain available for JetBrains Academy learning courses and Coursera, but it will no longer include Hyperskill courses and projects after the upcoming update. 
  • Your existing Hyperskill projects will still work. No manual migration is needed – your progress and projects will stay safely on Hyperskill and appear automatically once you sign in.

How to continue using Hyperskill courses

The new Hyperskill Academy plugin will be available after December 11, and you’ll be able to install it in your IDE:

  • Update the JetBrains Academy plugin to the latest version.
  • Install the new Hyperskill Academy plugin from the Marketplace tab in IDE.
  • Sign in with your Hyperskill account via Settings/Preferences | Tools | Hyperskill.
  • Open your projects and continue learning right where you left off.

No manual migration is needed – your progress and projects will stay safely on Hyperskill and appear automatically once you sign in.

We understand that you might have questions regarding this change, so we’ve prepared an FAQ list to address the most common topics.

What will happen to the JetBrains Academy plugin?

The JetBrains Academy plugin will continue to support JetBrains Academy learning courses, but Hyperskill projects will no longer be part of it. For Hyperskill courses and projects, use the new Hyperskill Academy plugin. We recommend updating the JetBrains Academy plugin as usual. This will allow both plugins to work without issues.

When will the Hyperskill plugin be available?

You’ll be able to install the new Hyperskill plugin starting December 11, 2025. Make sure to switch to the Hyperskill Academy plugin right away, as Hyperskill courses won’t be supported in the JetBrains Academy plugin after this date.

How will I be notified when the Hypserkill Academy plugin is live?

On the Hyperskill platform: You’ll see a banner with a direct install button on the Study plan page.

Inside the JetBrains Academy plugin: After updating the plugin, you’ll see in‑plugin messages with guidance once the release is live.

Will this affect my IDE settings?

No. Your IDE preferences (themes, fonts, keymaps, and third‑party plugins) won’t change. Our plugin works on top of your current setup.

Will my existing projects on Hyperskill still work after installing the Hyperskill Academy plugin? 

Yes. You can open and continue working on your existing Hyperskill projects after installing the new plugin – no migration required.

Who should I contact if I have questions about the new Hyperskill Academy plugin?
Please reach out to Hyperskill Support, or send an email to hello@hyperskill.org. 

We’re sure this update will elevate your learning experience and make working with Hyperskill even more seamless and efficient.

Happy learning!

The JetBrains Academy team

Read the whole story
alvinashcraft
3 hours ago
reply
Pennsylvania, USA
Share this story
Delete
Next Page of Stories