Did you know that with insertAdjacentHTML you can insert html content to position around certain element?

Are you new to ❤️ Svelte and wondering when to use a readable store and when a writable store makes more sense?

Just dropped a new video where we take a deeper look at readable and writable store use cases.

https://rodneylab.com/readable-writable-svelte-stores/

Vue.js Datagrid Component for Vault

with Paged Data or Virtual Scrolling


The core of Vault’s frontend is its data grid. A single Client may send hundreds of jobs in a day, and Account Managers need to be able to see and process them quickly.

Even with virtual DOM and smart patching for updates, rendering hundreds or even thousands of rows at a time can be slow, especially with lots of columns. To help improve performance, I explored and shipped two options:

Paged Data

Splitting data into smaller groups and implementing paging is a common way to handle tables of large data.

For familiarity moving forward into the new system, I implemented paging with options for 25-200 jobs per page (the original system used pages of 25 items). Those using this feature are able to choose the right balance between page size and performance on their local machine.

In practice, paging works for scrolling performance, but it doesn’t always deliver the best experience. The users of the system often manage groups of jobs that span across pages because “real-world data”—it’s random. Switching between pages while keeping mental tabs on what’s happening adds complexity to a workflow when a page needs turning.
 
Virtual Scrolling

Since the first React prototype of Vault, which used react-virtualized to render the data grid’s rows, virtual scrolling as an alternative to paging had been on my mind.

In Vue, I tested several implementations of virtual scrollers and finally settled on vue-virtual-scroller as the base for the datagrid. It required a lot of optimization to achieve acceptable performance on 4K+ screens, both in the library and with CSS, but the work was well worth it. 

The final datagrid component can hold hundreds or thousands of records at once without any noticeable slowdowns. AMs can move through and process large sets of data without having to worry about keeping up with the mental overhead of paging, if they so choose. 

The final grid component has the following features:

• Ability to switch between virtual scrolling and paged data
• Customizable columns—resizing, ordering, show/hide
• Display options for grid lines
• Select and deselect using checkboxes, including using the Shift key to select and deselect contiguous blocks of data
• For paged data, the number of records per page is customizable and selections can span multiple pages

Images:

1. Datagrid with visible Grid Options on the right.
2. Column resizing in action. The column being resized is hilighted in blue. When the column reaches its minimum width, the highlight turns red.
3. Datagrid in its default state with several items selected.
4. Datagrid using paged data. Navigation elements and paged data options are shown in zoomed in circles.

Responsive institutional website I've developed for a Real Estate Insurance Assessor, which is customer to the agency I work at.  Webdesign was done by a colleague on the team.

I've added some simple animation to the project to create a smooth scrolling experience.

In september, after a daily challenge's week in JavaScript, I've been selected to join the a React Bootcamp tutored by Fernando Daciuk. During the first half we've focused on learning React fundamentals, as JSX, Virtual Dom, React Hooks and custom hooks, Custom and Styled, Components, Events and States use in React, Conditional Rendering,  Components Lifecycle, HTTP Requests, Controlled Forms, Side Effects and its use in React.
The video linked gathers part of this knowledge applied to practice.

Using fetch with SvelteKit: how you can use fetch with SvelteKit to pull data from endpoints, interact with external APIs and refresh the UI.

https://rodneylab.com/using-fetch-sveltekit/