Implementation

We will continue with updating the HTML markup

<main>
  <input id="fileInput" type="file" accept=".pdf" />
  <label>Width <input class="widthInput" step="25" type="number" min="200" max="600" /></label>
  <label>Height <input readonly class="heightInput" type="number" min="0" max="500" /></label>
</main>

We have added the two inputs. One for width and one for height. The height one is readonly as we want to maintain the aspect ratio when width is changed, more on that later.

.widthInput, .heightInput {
  width: 5rem;
}

We just increased the default width of those input elements.

// output goes here

const widthEl = document.querySelector('input[type="number"].widthInput') as HTMLInputElement
const heightEl = document.querySelector('input[type="number"].heightInput') as HTMLInputElement

widthEl?.addEventListener('change',  event => {
  const value = (event.target as HTMLInputElement).valueAsNumber
  createDocument(firstPage, secondPage, value)
}

We have some references of dom elements with some type assertions to HTMLInputElements to silence some typescript errors.

Next we listen to change in the width input and react to the document creation accordingly. Our createDocument function accepts third argument, guess what the width

What’s new in create document?

async function createDocument(pageAToEmbed: PDFPage, pageBToEmbed: PDFPage, width = PageSizes.A4[0] ) {
  // .....
  let [, height] = PageSizes.A4;
  const calcHeight = aspectCorrectDimension(width);

The third argument is width= PageSize.A4[0], we are setting the default value to A4 page width for the first run of the function. As this function also runs when the width is changed.

In Line 3 we skip the width and only de-structure the height

Let’s explain the what’s happening on Line 4

aspectCorrectDimension

We need to calculate the aspect ratio of the A4 page. The dimension of A4 page is 545 x 841 in pixels. We embedded takes half of the page so our dimensions becomes 545 x 420.5. The aspect ratio becomes

/**
 * Decimal Ratio
 * 545 ÷ 420.5 ≈ 1.296
 */
function aspectCorrectDimension(width: number) {
  const aR = 1.296;
  return width / aR
}

Our function calculates the appropriate height to maintain the aspect ratio.

  page.drawPage(embeddedPageA, { x: 10, y: height/2, width: width, height: calcHeight })

  widthEl.value = String(width); 
  heightEl.value = String(calcHeight);

  page.drawPage(embeddedPageB, { x: 10, y: 0, width, height: calcHeight})
  .../
}

We have update the height config for the drawPage method with newly calculatedHeight. We also need to update the input controls as well and that’s it.

Output

Horizontally centering

const remainder = (PageSizes.A4[0] - width) / 2
const centeredX = remainder

page.drawPage(embeddedPageA, { x: centeredX, y: height/2, width: width, height: calcHeight })

//...

page.drawPage(embeddedPageB, { x: centeredX, y: 0, width, height: calcHeight})

We have updated the x: centeredX which is calculated by some subtraction and division. This way, our faces remains always in the center.

Conclusion

We have introduced some input elements. Change in width recalculates the dimension of card face while maintaining the aspect ration and embeds it.

The post Combine Two PDF Pages into One with variable width appeared first on Technbuzz.com.

Most often than not I need to move it to single page PDF. This was it’s easy to print (thought print tool does this is without much trouble) and some government entities accept images, so it’s easy to export one file Pdf to image rather than two page Pdf.

We will achieve exactly that using awesome pdf-lib. It can create, modify PDF. We can draw elements like text, graphics to it. It can also merge and split PDF files.

Planning

We need three major steps

1. Accept existing PDF file
2. Manipulate it using pdf-lib
3. Display it using iframe

Our rough layout will look like this

Our first version will just accept file and display it as it is. So let’ prepare some HTML for it

The template

<main>
  <input id="fileInput" type="file" accept=".pdf" />
</main>
<output>
  <iframe> </iframe>
</output>
<script type="module" src="/src/main.ts"></script>

We added some basic input element to grab file and iframe to view it. Let’s go to the implementation part.

Base Styles

html, body {
  height: 100%;
}

body {
  display: grid;
  grid-template-rows: auto 1fr;
}

iframe {
  width: 100%;
  height: 100%;
}

input[type='file'] {
  outline: 1px dashed grey;
  padding: 2rem;
}

We added some styles for base layout. The iframe comes with default dimension which is very small to render the pdf file. So we will set to take all the available space of it’s parent element.

Display file

const fileInput = document.querySelector('input[type="file"]')
const iframe = document.querySelector('iframe')

We are getting reference of those element in JavaScript.

fileInput.addEventListener('change', event => {
  const file = (event.target as HTMLInputElement).files[0]
  const reader = new FileReader()

  reader.onload = async () => {
    iframe.src = reader.result
  }

  reader.readAsDataURL(file)
})

On file change aka file upload we use file reader to read it as DataURL. Then on line 6 we are setting iframe source to reader result.

Output

As we can see the pdf viewer shows 1 of 2 pages. This we don’t want. We want one page for both faces of the page.

We have managed to build a simple input and output viewer.

Implementation

Next we need to involve the pdf-lib. We can achieve our target with following plan

1. Load document in to pdf-lib
2. Extract pages 1 and 2
3. Create a brand new document
4. Create new page and embed page 1 as top half in newly create page
5. Embed the page 2 as bottom half of the newly created page
6. Save document and update the viewer

1. Load document in pdf-lib

2. Extract pages 1 and 2

import { PageSizes, PDFDocument, PDFPage } from 'pdf-lib'

fileInput.addEventListener('change', event => {
  //...
  reader.onload = async () => {

    const doc = await PDFDocument.load(reader.result)
    firstPage= doc.getPage(0);
    secondPage = doc.getPage(1)
    createDocument(firstPage, secondPage)
  }

  reader.readAsArrayBuffer(file)
})

First of all we are reading file as arrayBuffer that is what accepted format on line 7. On next two lines we extract first and last page. We hand over control to createDocument function

3. Create a brand new document

async function createDocument(pageAToEmbed: PDFPage, pageBToEmbed: PDFPage) {
  const doc = await PDFDocument.create()

  const embeddedPageA = await doc.embedPage(pageAToEmbed)
  const embeddedPageB = await doc.embedPage(pageBToEmbed)

We start the async createDocument function with creating a brand new document. Next we need to convert the extracted pages in previous code snippets in to embeddable pages. We have references for both of them

4. Create new page and embed page 1 as top half in newly create page

5. Embed the page 2 as bottom half of the newly created page

  const page = doc.addPage()
  let [width ,height] = PageSizes.A4

  page.drawPage(embeddedPageA, { x: 10, y: height/2, width: width, height: height/2 })

  page.drawPage(embeddedPageB, { x: 10, y: 0, width, height: height/2 })

Next we need to create a brand new page. On line 2 we have width x height for A4 page. That will be used as dimension calculation later.

On line 4 there is one important detail, x and y axis doesn’t start from top left. I think they start from bottom left. So I have to move the y axis to middle of the page. This way the first page is rendered on top half part of the new page.

Same thing happens on line 6 , but this time we move the y axis to 0 which means bottom of the page. When embedded page is drawn it appears on bottom of page.

6. Save pdf document and update the viewer

  const bytes = await doc.save()
  iframe.src = `data:application/pdf;base64,${bytes.toBase64()}`
}

We have reached to final lines in the our createDocument function. The line 1 returns the Uint8Array . In the next line we are prepend it with proper data: URL with proper media type and assign it as the source of our iframe. And the result becomes

As we you can see page 1 of 1 which indicates we have successfully managed to convert two page pdf to single page pdf with both halves of identity card in one page.

This is ready to be transported or printed.

Conclusion

We have managed to create a final version using pdf-lib library. We started with very basic version. We improved it step by step. I have personally learned how valuable iframe is as part of web platform. It provides so much out of the box which requires very minimum to set it up.

The post Combine Two PDF Pages into One with pdf-lib appeared first on Technbuzz.com.

I was having issue in resetting and syncing state for cascade drop downs. Where on changing a root dropdown would reset the third drop down in the chain.

I was doing bunch of signal rest explicitly on change of the first drop down linked signal. All I had to do is move reset logic to linkedSignal.

Here is the mermaid diagram of the decision tree

flowchart TD
    A[React to Signal\n Changes]
    A --> |No| B[Use a regular\n function]
    A --> |Yes| C[Set a readonly\n signal?]
    C --> |Yes| D["Use computed()" ] 
    C --> |No| E[Set a writable \n signal?]
    E --> |Yes| F["Use linkedSignal()"]
    E --> |No| G[Perform an async \n operation?]
    G --> |Yes| H["Use resource() \n on rxResource()"]
    G --> |No| I["Use an effect()"]

An ascii tree would look like

React to Signal Changes?
├── No
│   └── Use a regular function
└── Yes
    └── Set a readonly signal?
        ├── Yes
        │   └── Use computed()
        └── No
            └── Set a writable signal?
                ├── Yes
                │   └── Use linkedSignal()
                └── No
                    └── Perform an async operation?
                        ├── Yes
                        │   └── resource()/rxResource()
                        └── No
                            └── Use an effect()

The post When to use Signals in Angular – Decision Tree appeared first on Technbuzz.com.

import { Directive } from '@angular/core';

@Directive({
  selector: '[tnb-checkbox]',
})
export class TnbCheckbox {  
}

We want to make our checkbox checked base on certain condition.

import { Directive } from '@angular/core';

@Directive({
  selector: '[tnb-checkbox]',
  '[checked]: 'isAllChecked()'
})
export class TnbCheckbox { 
  isAllChecked() {

  } 
}

But line 5, the highlighted one will throw following error.

What really happens is that Angular thinks we are binding directive on some host elements (container etc) that doesn’t have checked property.

Angular couldn’t determine the host is input checkbox, it treats the host as generic element.

But we can solve it by applying constraints to the selector, If our selector targets an actual <input type="checkbox>

import { Directive } from '@angular/core';

@Directive({
  selector: '[tnb-checkbox]input[type="checkbox"]',
  '[checked]: 'isAllChecked()'
})
export class TnbCheckbox { 
  isAllChecked() {

  } 
}

With the selector, Angular knows the host element is <input> (specifically a checkbox). The DOM type HTMLInputElement does have checked attribute (along with others properties like intermediate)

Angular template checking is type aware. Since Angular Version 20, the host binding is improved. We have type checking for host binding and listener expressions.

It will be really interesting to find out how the compound selector string is translated to host binding type checking.

The post Understanding Angular Checkbox Directives and Host Binding appeared first on Technbuzz.com.

Unless I change the encapsulation mode to ViewEncapsulation.None. That removes the encapsulation and make the style declarations global. Which may not be intended behavior.

But we can use Tailwind arbitrary classes. This way angular directly adds those classes to element. While tailwind classes are global for the entire project so everything works.

But

Tailwind arbitrary class does not work with angular host properties

    host: {
    class: 'overflow-auto grid',
    '[class.grid-rows-[auto_min-content_auto] ]': 'isFilterVisible',
    '[class.grid-rows-[auto_min-content] ]': '!isFilterVisible',
  }

This end up in generating following classes

    <my-component class="grid grid-rows-[auto_min-content\" ></my-component>

We are missing the closing bracket of the arbitrary classes. Tailwind won’t recognize it and will not create a CSS declaration bead on that.

Escaping the the extra bracket has no effects either

    host: {
    class: 'overflow-auto grid',
    '[class.grid-rows-[auto_min-content_auto\\] ]': 'isFilterVisible',
    '[class.grid-rows-[auto_min-content\\] ]': '!isFilterVisible',
  }

Solution

The solution is to use Component class properties that returns appropriate classes in object

    @Component({
  host: {
      class: 'overflow-auto grid',
      '[class]': 'gridClasses()',
    }
})
export class MyComponent {
  gridClasses = computed(() => {

    return {
      'grid-rows-[auto_min-content_auto]': this.isFilterVisible(),
      'grid-rows-[auto_min-content]': !this.isFilterVisible()
    }
  })
}

The post Tailwind Arbitrary classes in Angular host properties appeared first on Technbuzz.com.

I have found one nice use case for it.

Imagine you have following routes

    {
  path: 'users',
  children: [
    { path: '', redirectTo: 'list', pathMatch: 'full' },
    { path: 'list', component: UserList },
    { path: 'settings', component: UserSettings },
  ]
}

Here when we visit the /users we are redirected to /users/list.

Now you are asked to create one more entry in the users page, that is Overview Page.

Now this page should be under a feature flag or we protect it for some users. The update routes would look like this

The post Nice usage of rediretFunction in Angular Router appeared first on Technbuzz.com.

Neo-tree or entire nevoid space uses nvim-web-devicons which expect patched Nerd Font.

Turns out I was using Liga SFMono Nerd Font

1. It isn’t officially patched, it’s community patched version
2. It has ligatures but not completely icon set
3. it predated Nerd fonts v2.3

Instead I chose JetBrainsMono Nerd Font

It just had to specify it to in the alacritty config at .config/alacritty/.alacritty.toml

    [font.normal]
family = "JetBrainsMono Nerd Font"
style = "Regular"

[font.bold]
family = "JetBrainsMono Nerd Font"
style = "Bold"

[font.italic]
family = "JetBrainsMono Nerd Font"
style = "Italic"

[font.bold_italic]
family = "JetBrainsMono Nerd Font"
style = "Bold Italic"

The post How I fixed Nvim icons appeared first on Technbuzz.com.

What it has to do with testing, well those can easily by used as locators or hooks that can be accessed by cypress or playwright

So what options do we have with

    <th> User Name </th>
<>....................</>

<td>John Doe</td>

We can’t use id as this has to unique per element. The other options is to use cy-testId or some playwright equivalent.

The only caveat is we are locking ourselves in a particular system. In the future there is will be new testing library.

For future friendly solution we use custom attributes, that can be prefixed with data as

data-testId="username" 

Bonus Tip:

In angular we use pipes to transform values for display purpose only.

    <p> {{ 128.23423 | number: '1.0.1' }} </p>

This snippet is using Decimal Pipe from angular. Writing end to end test in this case would require to round off value on both ends for reconcilleation. Or we can use yet another custom attribute to expose raw value

    <td [attr.data-raw]="128.23423" data-testId="revenue" > {{ 128.23423 | number: '1.0.1' }} <td>

This way we are not bound to have any HTML structure inside the td. You can add icons and nested div and span tags to format the text and your test locators will still find the right element and text to do the comparison

The post Accessibility and test hooks for HTM L Table appeared first on Technbuzz.com.

    page = signal(0)

content = httpResource(() => ({
  url: 'https://jsonplaceholder.typicode.com/posts',
    params: {
      page: this.page()
    }
}));

We can render the content in template as {{ content.value() }}

But there is new inquiry.

We need filter by specific user, No problem we can pass params. The params will come from Router, which we can easily fetch with in our component by enabling withComponentInputBinding. In short it binds Router state to the component input.

    https://localhost:4000/posts?userId=332

Our component becomes

    import { input } from '@angular/core';

page = signal(0)
userId = input()

content = httpResource(
    () => ({
      url: 'https://jsonplaceholder.typicode.com/posts',
      params: {
        page: this.page(),
        userId: this.userId(),
     }
));

We use input to get userId from route as signal which makes our content resource reactive.

What happens when we change user?

We get the new value for userId input, this will in turn re run the content httpResource. Our template will be updated.

We have pagination feature on the page to list user post, we have navigate to page 6 of User A. Now we switched the to User B. We need to reset the page to page 1.

No problem we can easily do that using effect to react to signal and update another signal.

    #resetPage = effect(() => {
  const user = this.userId()
  this.page.set(0)
})

This ensures we have pagination reset to page 1 when user selection is updated.

But there is caveat to our way of using effect. In fact angular docs on Use cases of effect no where mentions to use effects just to update another signal.

Its best uses cases are DOM read writes, syncing local storage among others.

What if we can stay in Signals land.

Don’t worry Angular have a better solution in the form of LinkedSignal. A signal can derive a dependent and it the same time it can be write able.

    page = linkedSignal({ 
  source: this.userId, 
  computation: () => 0 
})

One less effect in our signal reactive paradigm. LinkedSignal is a missing puzzle. It gives the default value to page. We are allowed to change page on demand. When userId is updated the page is automatically reset to initial state.

The post One less effect to reset signal in Angular appeared first on Technbuzz.com.

Walt Disney unique way of requesting input

The post Walt Disney unique way of requesting input appeared first on Technbuzz.com.