<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: huisman-peter</title>
    <description>The latest articles on DEV Community by huisman-peter (@huismanpeter).</description>
    <link>https://dev.to/huismanpeter</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1267625%2Fc4607323-9f0d-49c6-9b8a-fbdb536a606c.png</url>
      <title>DEV Community: huisman-peter</title>
      <link>https://dev.to/huismanpeter</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/huismanpeter"/>
    <language>en</language>
    <item>
      <title>[Boost]</title>
      <dc:creator>huisman-peter</dc:creator>
      <pubDate>Sat, 24 Oct 2026 05:43:11 +0000</pubDate>
      <link>https://dev.to/huismanpeter/dotnet-49oa</link>
      <guid>https://dev.to/huismanpeter/dotnet-49oa</guid>
      <description>&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/huismanpeter/-33hj" class="crayons-story__hidden-navigation-link"&gt;[Boost]&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-status"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/huismanpeter" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1267625%2Fc4607323-9f0d-49c6-9b8a-fbdb536a606c.png" alt="huismanpeter profile" class="crayons-avatar__image" width="420" height="420"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/huismanpeter" class="crayons-story__secondary fw-medium m:hidden"&gt;
              huisman-peter
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                huisman-peter
                
                
              
              &lt;div id="story-author-preview-content-4908849" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/huismanpeter" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1267625%2Fc4607323-9f0d-49c6-9b8a-fbdb536a606c.png" class="crayons-avatar__image" alt="" width="420" height="420"&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;huisman-peter&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/huismanpeter/-33hj" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;Oct 24&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-status"&gt;
        &lt;a href="https://dev.to/huismanpeter/-33hj" id="article-link-4908849"&gt;
          [Boost]
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__contentpreview text-styles"&gt;
          &lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/huismanpeter/component-library-pebble-ux-3d36" class="crayons-story__hidden-navigation-link"&gt;Component library - Pebble UX&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/huismanpeter" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1267625%2Fc4607323-9f0d-49c6-9b8a-fbdb536a606c.png" alt="huismanpeter profile" class="crayons-avatar__image" width="420" height="420"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/huismanpeter" class="crayons-story__secondary fw-medium m:hidden"&gt;
              huisman-peter
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                huisman-peter
                
                
              
              &lt;div id="story-author-preview-content-4903168" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/huismanpeter" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1267625%2Fc4607323-9f0d-49c6-9b8a-fbdb536a606c.png" class="crayons-avatar__image" alt="" width="420" height="420"&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;huisman-peter&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/huismanpeter/component-library-pebble-ux-3d36" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;Oct 23&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/huismanpeter/component-library-pebble-ux-3d36" id="article-link-4903168"&gt;
          Component library - Pebble UX
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag crayons-tag--filled  " href="/t/discuss"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;discuss&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/webdev"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;webdev&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/webcomponents"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;webcomponents&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/opensource"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;opensource&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
            &lt;a href="https://dev.to/huismanpeter/component-library-pebble-ux-3d36#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              

              &lt;span class="hidden s:inline"&gt;Add&amp;nbsp;Comment&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            2 min read
          &lt;/small&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;



        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
            &lt;a href="https://dev.to/huismanpeter/-33hj#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              

              &lt;span class="hidden s:inline"&gt;Add&amp;nbsp;Comment&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            1 min read
          &lt;/small&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


</description>
      <category>blazor</category>
      <category>dotnet</category>
    </item>
    <item>
      <title>[Boost]</title>
      <dc:creator>huisman-peter</dc:creator>
      <pubDate>Sat, 24 Oct 2026 05:42:28 +0000</pubDate>
      <link>https://dev.to/huismanpeter/-33hj</link>
      <guid>https://dev.to/huismanpeter/-33hj</guid>
      <description>&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/huismanpeter/component-library-pebble-ux-3d36" class="crayons-story__hidden-navigation-link"&gt;Component library - Pebble UX&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/huismanpeter" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1267625%2Fc4607323-9f0d-49c6-9b8a-fbdb536a606c.png" alt="huismanpeter profile" class="crayons-avatar__image" width="420" height="420"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/huismanpeter" class="crayons-story__secondary fw-medium m:hidden"&gt;
              huisman-peter
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                huisman-peter
                
                
              
              &lt;div id="story-author-preview-content-4903168" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/huismanpeter" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1267625%2Fc4607323-9f0d-49c6-9b8a-fbdb536a606c.png" class="crayons-avatar__image" alt="" width="420" height="420"&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;huisman-peter&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/huismanpeter/component-library-pebble-ux-3d36" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;Oct 23&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/huismanpeter/component-library-pebble-ux-3d36" id="article-link-4903168"&gt;
          Component library - Pebble UX
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag crayons-tag--filled  " href="/t/discuss"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;discuss&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/webdev"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;webdev&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/webcomponents"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;webcomponents&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/opensource"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;opensource&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
            &lt;a href="https://dev.to/huismanpeter/component-library-pebble-ux-3d36#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              

              &lt;span class="hidden s:inline"&gt;Add&amp;nbsp;Comment&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            2 min read
          &lt;/small&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


</description>
      <category>design</category>
      <category>frontend</category>
      <category>ux</category>
    </item>
    <item>
      <title>Component library - Pebble UX</title>
      <dc:creator>huisman-peter</dc:creator>
      <pubDate>Fri, 23 Oct 2026 06:07:36 +0000</pubDate>
      <link>https://dev.to/huismanpeter/component-library-pebble-ux-3d36</link>
      <guid>https://dev.to/huismanpeter/component-library-pebble-ux-3d36</guid>
      <description>&lt;p&gt;To the DEV Community,&lt;/p&gt;

&lt;p&gt;I have been working on a passion project for a while now, and this week I finally hit a major milestone: I published the very first stable version to NPM.&lt;/p&gt;

&lt;p&gt;It is called Pebble UX — a modern, framework-agnostic component library built entirely on native Web Components.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  Free Documentation: &lt;a href="https://pebble-ux.gitlab.io/pebble-web-components/" rel="noopener noreferrer"&gt;https://gitlab.io&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;  NPM Package: &lt;a href="https://www.npmjs.com/package/@pebble-ux/web-components" rel="noopener noreferrer"&gt;https://npmjs.com&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Why another component library?
&lt;/h2&gt;

&lt;p&gt;We already have great tools out there, but I wanted to build something that strictly focuses on three core pillars:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Truly Native and Lightweight: Built on top of the web platform using standard custom elements. Zero framework overhead. You can use them in vanilla HTML, React, Vue, Angular, or whatever comes next.&lt;/li&gt;
&lt;li&gt;Accessible by Default (ARIA): I did not want accessibility to be an afterthought. Semantic markup, proper ARIA attributes, and full keyboard navigation support are baked directly into the components.&lt;/li&gt;
&lt;li&gt;The Blazor Bridge: This is a big one. I love the .NET ecosystem, so I built PebbleBlazor. It brings these exact same components to Blazor with strongly-typed C# wrappers and native two-way data binding (@bind-value) out of the box. No heavy, unmaintained JS-interop layers required.&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  What is inside the box?
&lt;/h2&gt;

&lt;p&gt;Pebble UX ships with everything from basic foundational pieces to complex UI structures, all fully themeable via a unified Design Token system with native light and dark mode out of the box:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;  Basics: Buttons, Accordions, Avatars, Cards, Tabs.&lt;/li&gt;
&lt;li&gt;  Rich Inputs: Color Pickers with alpha channels, Date and Phone Inputs with built-in validation.&lt;/li&gt;
&lt;li&gt;  Advanced Layouts and Utilities: Responsive Data Tables with sorting and filtering, Splitters, and guided multi-step Wizards.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  I need your brutally honest feedback
&lt;/h2&gt;

&lt;p&gt;As a solo maintainer releasing a v1, I know there is always room for improvement. I would love for the frontend and .NET developers here to take a quick look at the library.&lt;/p&gt;

&lt;p&gt;Specifically, I would love your thoughts on:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;The Component APIs: Do the HTML attributes and properties feel intuitive to you?&lt;/li&gt;
&lt;li&gt;The Documentation: Is it easy to navigate? (Note: I am currently working on adding more inline, interactive live playgrounds so you can tweak the code right on the component pages).&lt;/li&gt;
&lt;li&gt;Missing Ecosystem Pieces: What component or utility do you constantly find yourself needing that is missing from modern web component suites?&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Feel free to check out the links, run npm i @pebble-ux/web-components, or just &lt;a href="https://pebble-ux.gitlab.io/pebble-web-components/" rel="noopener noreferrer"&gt;browse the docs&lt;/a&gt;.&lt;/p&gt;

&lt;p&gt;Looking forward to your comments and suggestions.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>webcomponents</category>
      <category>opensource</category>
      <category>discuss</category>
    </item>
  </channel>
</rss>
