I used CSS to recreate a Star Wars Ugly Sweater. I started a series of CSS art last year. I wanted to see if I could make Ugly sweaters with code.


https://dev.to/jarvisscript/ugly-sweater-css-the-imperial-logo-33p9

🕎 8 Days of Web Components Tips 

In honour of the last night of #Hannukah I collected 8 nights' worth of web components tips here in this blog post. Hope you like it, and חג שמח!

https://dev.to/bennypowers/8-days-of-web-components-tips-39o5

DCUO Combat Rating Calculator

DC Universe Online uses Combat Rating (CR) to unlock content throughout the game as players earn new rewards and gear through gameplay. 

A CR Calculator gives an "at a glance" look at the components of Combat Rating and can help inform decisions during loot drops or trips to vendors as players level their characters through the content tiers. 

To the left, the primary calculator is arranged to match the equipped gear UI of the game with inputs for each gear slot along with the weighted percentage of the slot's contribution to CR.

CR is displayed at the top as a whole number (CR in-game is always rounded down to the nearest whole number) and a decimal number. The decimal number shows how close a character is to achieving the next CR level.

To the right, a matrix of gear combinations show how different levels of gear will affect the character's CR. 

The X axis has four predefined columns corresponding to auto-scaling loot boxes and their rarity which are based on the character's current CR. The level of these boxes are not disclosed in-game until after the box is opened. The fifth column is a "Goal" column, which can be defined by the player—this is good for plugging in the level of vendor gear that a player is working toward. The Y axis mirrors the CR Calculator with entries for each gear slot.

Inside the matrix, players can see quickly how a particular piece of gear will affect their character's CR:

• Green entries show a breakthrough to a higher CR as recognized in-game.
• Black entries show an incremental increase to CR, but not enough to jump to the next level.
• Gray entries show a decrease in CR. This would be gear that is not needed and should be skipped in loot choices if possible.

Using the matrix, players can choose optimal loot drops to maximize the CR of their character. Double-clicking an entry in the matrix will apply it to the CR calculator.

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.

Javascript Intl Object Cheat sheet