DEV Community: Simon

⛵️ Ship UI - New Angular UI lib

Simon — Mon, 01 Sep 2025 07:59:19 +0000

Angular is getting a new open source MIT licensed UI library MortenPx as the designer and SimonBitwise me as the developer.

What are ⛵️ Ship UI - it's currently a ~18.5KB gzipped in css, zoneless compatible, signal based, runtime dependency free (besides angular), screen reader tested, angular ui library.

It feels that the way we built applications are incohesive and clunky while also feel that many of the UI libraries out there limit the design to much while also shipping way to much code. So about 18 months ago we sat out to solve that.

These are the requirements we put out for our selves.

Should have matching styles in Figma, UI Library and website builders ex (Framer, webflow etc.)
Have easy to update color palettes
Have multiple designs per component
The style of a component should only be represented by classes this also makes it easier in the future to make for multiple frameworks
Every component has css variables at the root of the component so its easy to locally override
Zoneless compatible
Component API should be simple to read, understand and reuse
As dependency free as possible
CSS first approach, which means the problems we can solve with css we solve with css then we fall over to js if it can't be solved with css

So as you can see we had my requirements and even though we have 30 years of professional experience between us we didn't know if it was possible.

So we knew it would require extensive iterations to get every little part right which have resulted in major rewrites multiple times so far, this is also why we havn't built more than the components you find in the docs.

But to make sure the API's we created where thought through we built out apps to use the components currently we have a taskboard, todo app, calendar and then it's also used in production to build duplicati.com both their console and client desktop application.

I dont wanna go into the API's right here but you can find how to use the library on docs.shipui.com

It's in pre release beta and the reason for that are that the API can change on soome of the components but we dont expect to drastically changing apis from now on

Features

So what features does it have, while having a wide varirty of base components like chips and buttons

We have built in a radix like color palette which currently are i HSL that will become OKLCH because of its more vibrant colors and the consistency based on lighting. This will also result in a theme editor where you can edit color palettes, border-radius, sizing, borders etc.

We made it so buttons, chips, form fields all comes in small variant

Buttons, chips, event cards, checkboxes and alerts all utilize the same coloring class which mean they all share the same styling but in their own shape, which also make it easy to add more variants of those widely used components.

Buttons, form fields and other actionable components have a click active state so you get feedback when clicking them.

All components have been tested on screen readers.

It's small ~115kb before minification and gzip

It's almost dependency free currently only depend on 4 packages for our icon font subsetting cli

We ship a font subsetting cli for icons so that you only have the icons you use in your icon font. We currently only support https://phosphoricons.com/ because we utilize ligatures for our icons <sh-icon>home</sh-icon> or for bold icons <sh-icon>home-bold</sh-icon> and yes you can mix icon styles. The only other font to support that are material icons so something we could add in the future. But we're more keen on also supporting svg/class based icons but they have their drawbacks like class based ship a lot of css for no reason and svg based you have to import them but we might make a svg sprite or similar which also have some drawbacks let me know if you have a good idea for that.

We have built in support for searching in our menus and selects so you dont have to and even with a wildcard search algorithm so if you search hello it actually checks *hello*

We utilize the modern Popover API so that when you mix dialogs with tooltips, dropdowns or the likes you dont have to fight the z-index war you just add them and use them

We're using a CSS first approach so your dropdown position are using anchor position which are not widely supported yet which are why we're providing a built in polyfill which ofc only are added if you use the component.

And much much more.

Final remarks

We really love what we have built so far and hope you do to.

I could keep writing about Ship UI but I will let you give it try, let us know what you think.

Links:
Github repo - docs - site

Breaking out of overflow hidden

Simon — Fri, 11 Oct 2024 08:59:50 +0000

Have you ever tried to create a dropdown for your button, select but then getting blocked by overflow hidden?

Then what do you do, well then you reach for javascript to throw the element to the root of the DOM and then position the element based on the trigger elements rect, recalulating everytime layout changes, scrolling og resize window happens, not very effective.

I wanna start by saying it dosn't have full support yet, but there is a polyfill to solve that for now.

The two main features we're gonna rely on are

anchor-positioning

popovers

So my initial idea came when I saw the dialog are sent to the root but with DOM layer. I stumpled across the popover api where you basically get the same logic but just acts slightly different.

I also remember seeing a post about anchoring an element to a thumb on a range slider.

Then i thought basically what you wanna do for any dropdown/tooltip etc that needs to break overflow hidden if you mix the two you didn't need all the excessive javascript.

So here is a working demo in the browsers that support it

Chrome, Edge v125+
Opera v111+
Chrome for Andriod, Andriod browser v129+

Okay so what if you wanna use it today. Well there is a polyfill for that that we can use.

The oddbird/css-anchor-positioning polyfill

Which has great Browser Support

Firefox 54+
Chrome 51+
Edge 79+
Safari 10+

Try visiting a browser not mentioned in the non polyfill example and this example below works, I have personally tested the latest versions of safari and firefox

This means that yes in most browsers we're going to have the extra computed overhead but its easy to use and toggle off when we have sufficient compatability.

There is one caviat to this approach and that is that the polyfill is ~92kb in size so that will have impact on load, but you could lazy load it after the application/website is done doing anything important

Say you dont wanna add another 92kb to your gzipped bundle which is a tall ask what you could do would be to do something like this

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Popover</title>
     

    <style>
      /* Basic popover styles */
      .popover-trigger {
        position: relative;
        display: inline-block;
        cursor: pointer; /* Added */
      }

      .popover {
        position: absolute;
        display: none;
        background-color: white;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
        z-index: 1000; /* Ensure popover is on top */
        min-width: 180px; /* Added */
      }

      .popover.show {
        display: block;
      }

      /* Add more styles as needed */

      /* Added styles from Angular component */
      spk-popover {
        display: inline-flex;
      }

      .popover-trigger {
        display: inline-flex;
      }

      .popover-trigger [spk-button] {
        display: none;
      }

      .popover-trigger-wrapper {
        display: inline-flex;
      }

      .popover-trigger-wrapper:empty + * {
        display: inherit;
      }

      .popover-overlay {
        position: fixed;
        inset: 0;
        opacity: 0;
        z-index: 1;
        pointer-events: none;
      }

      .popover {
        margin: 0;
        z-index: 5000;
        background-color: var(--base-level-10);
        border: 1px solid var(--base-level-40);
        border-radius: var(--shape-2);
        font: var(--paragraph-30);
        color: var(--base-level-60);
        transition: opacity 125ms linear, visibility 125ms linear;
        opacity: 0;
        visibility: hidden;
      }

      @supports (left: anchor(left)) and (top: anchor(bottom)) {
        .popover {
          left: anchor(left);
          top: anchor(bottom);
          margin-top: 4px;
        }
      }

      .popover.show {
        /* Use .show instead of :popover-open */
        opacity: 1;
        visibility: visible;
        transition: opacity 125ms linear, visibility 125ms linear;
      }
    </style>
  </head>
  <body>
    <div class="popover-trigger" id="myPopoverTrigger">
      <button>Open Popover</button>
      <div class="popover" id="myPopover">
        <p>This is the popover content.</p>
      </div>
    </div>

    <script>
      const BASE_SPACE = 4;
      const SUPPORTS_ANCHOR =
        CSS.supports("position-anchor", "--abc") &&
        CSS.supports("anchor-name", "--abc");

      document
        .getElementById("myPopoverTrigger")
        .addEventListener("click", function () {
          const popover = document.getElementById("myPopover");
          popover.classList.toggle("show");

          if (popover.classList.contains("show")) {
            calculateMenuPosition(this, popover);

            const scrollableParent = findScrollableParent(popover);

            const scrollHandler = () => calculateMenuPosition(this, popover);
            const resizeHandler = () => calculateMenuPosition(this, popover);

            scrollableParent.addEventListener("scroll", scrollHandler);
            window.addEventListener("resize", resizeHandler);

            // Remove event listeners when popover is hidden (optional)
            popover.addEventListener("transitionend", () => {
              if (!popover.classList.contains("show")) {
                scrollableParent.removeEventListener("scroll", scrollHandler);
                window.removeEventListener("resize", resizeHandler);
              }
            });
          }
        });

      function findScrollableParent(element) {
        const scrollableStyles = ["scroll", "auto"];
        let parent = element.parentElement;

        while (parent) {
          const style = window.getComputedStyle(parent);
          if (
            scrollableStyles.includes(style.overflowY) &&
            parent.scrollHeight > parent.clientHeight
          ) {
            return parent;
          }
          parent = parent.parentElement;
        }

        return document.documentElement;
      }

      function calculateMenuPosition(trigger, popover) {
        const triggerRect = trigger.getBoundingClientRect();
        const menuRect = popover.getBoundingClientRect();

        let newLeft = triggerRect.left;
        let newTop = triggerRect.bottom + BASE_SPACE;

        const outOfBoundsRight = newLeft + menuRect.width > window.innerWidth;
        const outOfBoundsBottom = newTop + menuRect.height > window.innerHeight;

        // Basic positioning logic (you'll need to expand this based on your requirements)
        if (outOfBoundsBottom) {
          newTop = triggerRect.top - menuRect.height - BASE_SPACE;
        }
        if (outOfBoundsRight) {
          newLeft = triggerRect.left - menuRect.width - BASE_SPACE;
        }

        popover.style.left = `${newLeft}px`;
        popover.style.top = `${newTop}px`;
      }
    </script>
  </body>
</html>

So the idea here is that we calculate the position on the popover relative to the popoverTrigger if and only if anchor-name and position-anchor is not supported by our browser. This way we dont ship excessive code to our browser but still support all the way back till the versions mention about the popover compatability chart

What more to add, well in my mind these should auto detect when out of the view and this is not supported by the browser position handles left: anchor(left); so this would be something i would add in my example above.

Fast, Predictable & Self-hosted AI Code Completion

Simon — Wed, 28 Aug 2024 20:38:06 +0000

Edit

It's important to note this is now 6months old so you should probably use other models and methods to gain real speed today

Original

I'm going to show you how to self-host a fast and reliable code-completion AI model

Skip the story go to the step by step guide

First a little back story: After we saw the birth of Co-pilot a lot of different competitors have come onto the screen products like Supermaven, cursor, etc. When I first saw this I immediately thought what if I could make it faster by not going over the network?

Self-hosting models

So I started digging into self-hosting AI models and quickly found out that Ollama could help with that, I also looked through various other ways to start using the vast amount of models on Huggingface but all roads led to Rome. Hence, I ended up sticking to Ollama to get something running (for now).

Updated 17.02.2025
Today you have various great options for starting models and beginning to consume them say your on a Macbook you can use the Mlx by apple or the llama.cpp the latter are also optimized for apple silicon which makes it a great option.

Finding a model

I started by downloading Codellama, Deepseeker, and Starcoder but I found all the models to be fairly slow at least for code completion I wanna mention I've gotten used to Supermaven which specializes in fast code completion. So with everything I read about models, I figured if I could find a model with a very low amount of parameters I could get something worth using, but the thing is low parameter count results in worse output. But I also read that if you specialize models to do less you can make them great at it this led me to "codegpt/deepseek-coder-1.3b-typescript", this specific model is very small in terms of param count and it's also based on a deepseek-coder model but then it's fine-tuned using only typescript code snippets.

Updated 17.02.2025
It seems that to do fast stuff on device you wanna go for the distilled models a good huggingface repo/space/team are unsloth they put out some solid models fx their R1-GGUF model distilled in 1-6bit including 8 and 16bit versions

I wanna note havent tested any models lately but from my understanding the Qwen2.5-Coder-7B is a solid model it does also exist in 1B and 3B parameter versions

Using the model

So after I found a model that gave quick responses in the right language. The next problem was it often hallucinated and to solve that problem I found out you can modify code completion settings like temperature, topP, etc.

So for my coding setup, I use VScode and I found the Continue extension of this specific extension talks directly to ollama without much setting up it also takes settings on your prompts and has support for multiple models depending on which task you're doing chat or code completion.

So I wanted a predictable, highspeed, accurate output for this I gave it these settings:

{
  "temperature": 0.2,
  "topP": 0.15,
  "topK": 5,
  "presencePenalty": 0.1,
  "frequencyPenalty": 0.1,
  "stop": ["; ", "} "],
  "maxTokens": 200
}

A low temperature will result in more predictable output as it favors the most probable output i wanted to give it some creativity but I found higher than 0.25 it starts to hallucinate too much

The same goes for topP and topK also helps with predictability you can ask Google or an AI model to elaborate on the difference but I wouldn't at this stage specifically be able to tell

presencePenalty & frequencyPenalty allows the model to repeat itself more often which I found quite useful for most code

Then my stop settings are specific for typescript as well last but not least maxTokens are set to 200 because I don't want it to generate very long examples of code this way I leave less space for errors that I don't catch with a glance of what is generated

All these settings are something I will keep tweaking to get the best output and I'm also gonna keep testing new models as they become available.

I would love to see a quantized version of the typescript model I use for an additional performance boost.

Step-by-step guide

Install Ollama (https://ollama.com/download)
Add Continue to VScode (https://marketplace.visualstudio.com/items?itemName=Continue.continue)
Choose the local configuration for the continue extension (https://docs.continue.dev/setup/configuration#local-and-offline-configuration)
In your terminal run ollama pull codegpt/deepseek-coder-1.3b-typescript
Edit your continue config code ~/.continue/config.json and replace the current tabAutocompleteModel with this:

"tabAutocompleteModel": {
  "title": "Deepseek Typescript 1.3B",
  "provider": "ollama",
  "model": "codegpt/deepseek-coder-1.3b-typescript",
  "completionOptions": {
    "temperature": 0.2,
    "topP": 0.15,
    "topK": 5,
    "presencePenalty": 0.1,
    "frequencyPenalty": 0.1,
    "stop": ["; ", "} "],
    "maxTokens": 200
  }
}

Enjoy you're new coding buddy and also remember to tweak and test to your own needs and please share if you find better alternatives

Specs and misc

So I thought I wanted to add my computer specs since that has an effect on the performance

I daily drive a Macbook M1 Max - 64GB ram with the 16inch screen which also includes the active cooling.

Here is a link to the geekbench scores
https://browser.geekbench.com/macs/macbook-pro-16-inch-2021-apple-m1-max

Also here is a link to a great macbook AI performance comparison
https://www.mrdbourke.com/apple-m3-machine-learning-test/

Journey towards self hosted AI code completion

Simon — Wed, 01 May 2024 08:07:12 +0000

So after I saw a video of Llama3 8b doing 800-1000 tokens/s I instantly thought it would be phenominal to have that on my laptop instantly giving me responses that I could select or discard with the added side benefit would be to learn some new tech.

I have once coded a small AI trained on like 100.000 items trying to predict housing prices, let me say it was not great.

But again I don't have billions upon billions of records to train on nor the compute to train a decent model but I like the control over my coding environment.

The first goal

Having llama 8b running locally autocompleting code snippets.

Yeah I know the barrier are low but is most def a useful starting point. I personally dont believe in setting unobtainable goals because failing at something hard is not as great as succeeding at small increments.

Lastly I intent to make a guide on my complete journey sub and like to get notified when new content is published

Banner video is from groq.com a great service where you can test these open source models like llama not sponsored by them just wanted to credit

3 Tips on CSS responsiveness

Simon — Tue, 14 Mar 2023 10:55:00 +0000

So I wrote this article: 5 tips to become better at CSS and I got the following question:

Using width of 100vw for main in tablet and smartphone it ok for me. what about for desktop, large screen, mondern big screen?

So I wanted to share a few tips on how to tackle the responsive content also you rarely want full screen on desktop if you do a blogging site or anything where you need to read actually. It's often suggested content isn't more than 50-60 characters some say its okay to go to 75. Side note this can be done with max-width: 75ch; with pretty decent support.

Layout a page for the big screen

Given this layout:

And given this code:

<main>
  <nav></nav>
  <aside></aside>
  <section></section>
  <footer></footer>
</main>

main {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-areas:             
    "nav nav"            
    "aside content"            
    "footer footer";
  grid-template-columns: 230px 1fr;
  grid-template-rows: 50px 1fr 30px;
}

nav {
  grid-area: nav;
}

section {
  grid-area: content;
}

aside {
  grid-area: aside;
}

footer {
  grid-area: footer;
}

We a few directions that we can take this in which im, this often comes down to which design direction you're taking but gonna go over a few options below.

Max-width around the whole thing

main {
  max-width: 1100px;
}

So we could slam a max-width around the whole thing. This is rarely what you want.

I worked on a website once for one of the biggest festivals in europe and we spent quite a bit of time making it support full screens and if you printed the band list it looked like the poster and all that sort of fun stuff and then next year another agency got the contract and they slammed a max-width around it.

Can't say im for it so I wanna touch on a few other ways to do it.

Contained content

So our section is normally our main content and here we can create a div/article/content box to contain our text in.

This is often the approach I would take if I where to add text content could look something like this:

The code to achieve this is:

<section>
  <article>
     <!-- your content here -->
  </article>
</section>

section {
  // ... 
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
}

section article {
  max-width: 700px;
  margin: 0 auto;
  padding: 20px;
}

Okay so a few things has happened here, we added a scroll box to our section and some padding this is just for visuals but on the article its a different talk.

Reason for adding padding on your text that is wrapped Is that h1's, p's ect. have default margin and if the wrapper does not have padding the margins will float outside of the box which makes our UI unpredictable, added a screenshot below for reference:

This is also why I suggest any text tag (h1, h2...) has no margins on default and would set that in the root.

Back to our code: max-width: 700px is to make sure the content doesn't overflow 700px but on smaller screens it will by default fill the parent container, so its "responsive by default" you could say. That's why I tend to avoid static widths like width: 700px on anything else than grids where you wanna fix it for the layout until say a mobile menu or similar.

Last but not least we added margin: 0 auto this is to center the content, this might not always be what you want, but you can just remove it to have the content box stick to the left.

The navigation issue

By choosing the option above we have ourselves another problem and that is that your top and sidenav now floats far away from your content on bigger screens.

This is why I tend to not like "mobile" first approaches but that's for another article.

So how to fix it you say, lets get right to it:

This above is what im going for and this is because now our content is centered but each of our sections aren't limited to the content box, because sometime you need a part of the page to have a different color which spans the whole page it just looks better, but it takes a bit more markup and code.

  <nav>
    <div class="nav-content-wrapper">
      <!-- nav content -->
    </div>
  </nav>

  <section>
    <div class="section-content-wrapper">
      <aside><!-- aside content --></aside>
      <article>
        <!-- article content -->
      </article>
    </div>
  </section>

As you might have noticed I removed the footer its just for the similicity of the example you could do the exactly same as I do for the navigation in this example

For styling:

main {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-rows: 60px 1fr;
}

Note when using these fixed sizes on grid you need to update the navbar size if the content of the nav bar changes

nav {
  padding: 0 20px;
}

.nav-content-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;


  padding: 10px 0;
  margin: 0 auto;
  max-width: 1100px;
}

So for the nav we moved all but the left/right padding from this element, this is so that when the screen its small the container still have some padding

Then on the nav we added the padding top/bottom to only have padding their to align the content to the section content below and our max-width and center position

section {
  padding: 20px;
  overflow-x: hidden;
  overflow-y: auto;
}

.section-content-wrapper {
  max-width: 1100px;
  margin: 0 auto;

  display: grid;
  grid-template-columns: 230px 1fr;
}

For our section we done mostly the same as nav wrapped the content in a wrapper with max-width and centered it with margin: 0 auto and then we created our grid with the fixed width of the sidebar.

Bonus tip:

Given all the changes we made above inside our article all of our text tags could be optimised by using the 75ch unit to show a maximum length of 75 characters

This can be done in multiple ways here are 3 quick ones

Article wrapper:

.section-content-wrapper {
  grid-template-columns: 230px 75ch;
}

All elements in our article:

section article > * {
  max-width: 75ch;
}

Some of the elements in our article

section article p,
section article h2,
section article h3 {
  max-width: 75ch;
}

Hope it helped - if you have any questions to hesitate to add them in the comments below

If you liked it subscribe for more content like this

//Cheers

5 tips to become better at CSS

Simon — Mon, 13 Mar 2023 09:20:20 +0000

I have been coding CSS for almost 24 years and i feel that other devs keep mentioning that CSS is hard so i thought maybe i could share a few things on the matter to make it easier for a other developers.

My main mental model around CSS is to make it as predictable as possible so adding an element you almost blindly can tell how it changes your page as a whole.

CSS is supposed to be easy and can be with the right knowledge about some key features.

The box model
Margins cancel each other out
Layouts
Use tables for styling tables
Em's, Rem's and Px

The box model

Okay so the easiest way to learn CSS is by understanding the box model and how you can make it your B*tch

Given this CSS on a div

div {
  border: 10px solid red;
  width: 200px;
  padding: 10px;
  margin: 10px;
}

This will be your default output where the center box is 200px wide as we stated in the styling

But if you instead add box-sizing: border-box

* {
  box-sizing: border-box;
}

You get this - can you see the difference?

So now the content box include the padding and border which resulted in the content box to go from 200px -> 160px because the colletive size of padding and border is 40px.

By doing this your layouts will be much more predictable and when you give your box a width: 200px its 200px not 240px.

Margins cancel each other out

Okay so this one I often see people forgetting and not a thing that is mentioned that often. So given this following CSS and markup

p {
  margin: 10px 0;
}

<p>some-text</p>
<p>some-other-text</p>

We should have 10px margin on both sides but a common mistake is thinking that the margins add up but actually cancel eachother out like this:

So for spacing elements i tend to use flex/grid and their gap property to have predictable spacing, mostly so i dont have to worry.

Layouting a page

So i have a few ways of working and looking back over the years there have been some terrible things we had to work around, if your familiar with the "clearfix" you know what i'm talking about.

Single row content

For single row content i tend to use flexbox and there are several reasons. Flex is by default a row so i have to write less. I dont need to care about how each element behaves - each element can relatively agnostic.

In this example i wanna create a top bar;

So it can be done in variaous ways, I tend to make sure all titles have no margins by default to make them more predictable.

Markup

<nav>
  <img src="http://placekitten.com/50/50" alt="">

  <h3>Some title</h3>

  <button>menu</button>
</nav>

Then I would style it something like this:

nav {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #f1f1f1;
  padding: 10px;
}

nav img {
  height: 100%;
}

The reason I style the image to be 100% height is actually so if the designer later tells me can we set the height of the navigation bar to 50px then I just add that and now the menu will adapt to my needs.

Multi-line 2,3,n column layout

It's mostly for replicating rows and the likes i usually use grids for this.

For this example i wanna create a 3 column grid where we dont know how many elements goes into it because the element count changes.

Given this markup

<main>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</main>

We can style it like this:

main {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

NOTE: This requires each element to have some kind of content otherwise you wont be able to see them.

This is powerful because - lets say on tablet we only want 2 columns then we can do:

// Portrait tablet
@media only screen and (max-width: 768px) {
  main {
    grid-template-columns: 1fr 1fr;
  }
}

// Mobile
@media only screen and (max-width: 480px) {
  main {
    grid-template-columns: 1fr;
  }
}

I tend not to use the repeater because it just adds extra complexity without almost never being shorter than writing the whole thing out css repeat

Page layout

Lets create the layout below

So we have the navigation before and now wanna create sidebar, footer and content on the page

For main (wrapper) we can do this:

main {
  width: 100vw;
  height: 100vh;
  display: grid;
  grid-template-areas:             
    "nav nav"            
    "aside content"            
    "footer footer";
  grid-template-columns: 230px 1fr;
  grid-template-rows: 50px 1fr 30px;
}

It's mainly making sure it fills out the whole page and then we describe our layout in the shortest way possible.

Remember to attach each of the elements to the main layout

nav {
  grid-area: nav;
}

section {
  grid-area: content;
}

aside {
  grid-area: aside;
}

footer {
  grid-area: footer;
}

We can decide the height and width of all static elements and can easly add a custom element to the box.

Use tables for styling tables

I have tried so many times to use grid, flexbox, floats and there are just so much in tables when you get it right.

It's one of the things i think i spend the most time to right about styling and very often its much easier to use a table when you get it right.

Ofc it removes the use of flex in your cells but this can be adapted by wrapping your content.

I wanna extend on styling tables and aim to do another whole blog post on tables.

Em's, Rem's and Px

Back about 10 years ago it actually mattered which one you use, but scaling your OS text and browser window will actually scale everything for you. Which it didn't back in the day that was why em's/rem's was powerful.

But most designers would want 10px when they design 10px and obfuscating your styling with ems and rems makes it so much harder to style something and in extension to that the benefits are not benefits anymore.

So i would suggest people to start using predictable and good ol' px again to make your design more predictable.

I could go on for ever about styling but these are the 5 major things that i tend to run into which would make everyones life easier if you know and do them well.

Hope you liked it leave a comment if you have any questions and subscribe for more

//Cheers

Angular Reactive Forms Conditional Validation

Simon — Fri, 03 Mar 2023 10:29:43 +0000

So I ran into an issue with conditional form validation and I wanted to make sure that it was clear how to validate the form. Also that the form group didn't need a certain structure to accommodate.

Started a google search, not a lot was there to be found; well I found this example - but it's not as nice as I wanted It to be.

I wrote out on Twitter to get some angular community advice. Based on all the advice I got I took something from the article above, but also Chau Tran shared an article that I got some inspiration from this one - but it used a subscriber that wasn't unsubscribed, wanna note it's an old article and Chau is a solid dev.

So i ended up with something like this - stackblitz:

conditional.component.ts

@Component({ ... })
export class ConditionalComponent {
  form = fb.group({
    type: fb.control<Vals>('a', [watchField()]),
    helloA: [
      null,
      [
        validateIf<Vals>('type', 'a', [
          Validators.required,
          Validators.min(100),
        ]),
      ],
    ],
    helloB: [null, [validateIf<Vals>('type', 'b', Validators.required)]],
    helloAnotherB: [
      null,
      [
        validateIf<Vals>('type', 'b', [
          Validators.required,
          Validators.minLength(4),
        ]),
      ],
    ],
  });
}

conditional.component.html

<form class="conditional-form" [formGroup]="form">
  <h1 class="mat-headline-4">Conditional Form</h1>

  <mat-radio-group formControlName="type">
    <mat-radio-button color="primary" value="a">A</mat-radio-button>
    <mat-radio-button color="primary" value="b">B</mat-radio-button>
  </mat-radio-group>

  <ng-container *ngIf="form.controls.type.value === 'a'">
    <mat-form-field>
      <mat-label>Required and min 100 when A</mat-label>
      <input matInput formControlName="helloA" type="number" />
    </mat-form-field>
  </ng-container>

  <ng-container *ngIf="form.controls.type.value === 'b'">
    <mat-form-field>
      <mat-label>Required when B</mat-label>
      <input matInput formControlName="helloB" type="number" />
    </mat-form-field>

    <mat-form-field>
      <mat-label>Required and minLength 4 when B</mat-label>
      <input matInput formControlName="helloAnotherB" type="text" />
    </mat-form-field>
  </ng-container>

  <button mat-flat-button color="primary" [disabled]="form.invalid">
    Submit
  </button>
</form>

So lets talk about what happens in the custom validators (Example below).

First the validateIf it takes the name of the control conditionalFieldName and a value of that field conditionalValue so if it matches run validations otherwise don't. Lastly i takes a validator or an array of validators that needs to be run if the conditional field value is met.

Secondly of we have the watchField its essentially telling fields that are not the watched field to updateValueAndValidity this is because we in our validateIf check if the field has the same validity so if the value change they need to be re-evaluated

custom-validators.ts

export function watchField() {
  return (formControl: FormControl) => {
    if (!formControl.parent) {
      return null;
    }

    Object.values(formControl.parent.controls).forEach((value) => {
      if (value !== formControl) {
        value.updateValueAndValidity();
      }
    });

    return null;
  };
}

export function validateIf<T>(
  conditionalFieldName: string,
  conditionalValue: T,
  validators: ValidatorFn | ValidatorFn[],
  errorNamespace = 'conditional'
): ValidatorFn {
  return (formControl) => {
    if (!formControl.parent) {
      return null;
    }

    let error = null;
    const conditionalField = formControl.parent.get(conditionalFieldName);

    if (!conditionalField) {
      console.warn('Conditional field not found');

      return null;
    }

    if (conditionalField.value === conditionalValue) {
      const validatorArr = Array.isArray(validators) ? validators : [validators];

      error = validatorArr.some((validator) => validator(formControl) !== null);
    }

    if (errorNamespace && error) {
      const customError = {};
      customError[errorNamespace] = error;
      error = customError;
    }

    return error;
  };
}

Last but not least i took the liberty of typing it out so if the conditional field can be one of three values then you make sure that the validateIf only can validate on that.

If you have suggestions for improvements dont hesitate to share it in the comment section below.

If you liked what you read like and follow!

/Cheers