Used VueJS

24 People have highlighted this activity

Activity Feed

Product Designer, Metalab
Dec 03, 2021

Built the FigJenda MVP

After designing the FigJenda MVP in Figma, I started building the widget. As this was my first time working with FigJam's Widget API (which had just been announced at the time), this was a continuous learning process.

This process then informed iterations on the design of the MVP in Figma, creating a back and forth cycle that led to a product that both solved a problem, and was feasible to implement.

The Widget code is visible on my Github for reference ->
Read more
founder, milk + honey solutions GmbH
Sep 01, 2018
Das Spendenportal der Aktion "Licht ins Dunkel" implementiert.
Read more
Full Stack Developer, CoLab Software
Sep 17, 2021
Updated my personal website on VueJS! 
Read more
May 02, 2019

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.
Read more
Aug 14, 2020

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

  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.
Read more
Software Developer, ZigPay
Nov 01, 2021
In work I had a new challenge in the previous week to create a web page where the clients could cancel their orders. I thought in using Vue 3 to force me to learn it (finally) and maybe use it Vite to check it out. But as we had little time to work with, I created the web using Vue 3 cli.

And, as I mention we had 1 week to work on the app, I installed tailwind css to get all their styles to create our components, and it was one of the easiest and fun experiencies I had with a CSS library (or in this case, a CSS library-utility). I'm totally recommend for people to start using.
Read more