Created by Cosmo Catalano, Front-End Developer at Otter Products
1746 People have this badge

What everyone's up to

Dec 05, 2021
Wrote a Blog Post
Wrote HTML
Wrote TypeScript
Wrote CSS
+ 2

🕎 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 חג שמח!
Apr 01, 2017
Started my developer learning journey
Learnt JavaScript
Learnt HTML
Learnt CSS
+ 2
Discovered the world of development! 🤩 I started my learning journey with TreeHouse (who has some really amazing teachers btw). I learned the fundamentals and it kickstarted my love for code!
Aug 14, 2020
Wrote CSS
Used VueJS
Wrote HTML
Wrote JavaScript
Designed UI components
+ 3

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.
May 31, 2019
Helped promoting women in tech
Learnt html
Learnt CSS
+ 1


Introduction to programming
Girls 4 Tech was born from a partnership between EBANX and Junior Achievement, in 2018, with two main purposes: sharing knowledge and arousing interest in programming for women. Based on video lessons taught by EBANX developers, with evaluations, support materials and a forum for debates among the students, the online course was offered through an online platform, on demand and is divided into 3 modules.

Module 1 - Introduction:
  • Brief history of women in computing
  • Why learn programming?
  • How a web page works; Short story about HTML and CSS; HTML and CSS concept

Module 2 - HTML: Introduction - Structure:
  • What is HTML? What is a TAG? Initial structure of an HTML file
  • Adding elements:
    • What is TAG HEAD?; Operation of TAG Title; Operation of the TAG META; What is DOCTYPE?; What is TAG BODY?; How to add titles to a page (TAGS H1, H2, H3); How to add paragraphs to a page (TAG P); Formatting TAGS; How to make text bold (TAGS B/STRONG); How to make text in italics (TAGS I/EM); How to make text big and small (TAGS SMALL/BIG); How to make text highlighted (TAG MARK); Example of opening and closing tags (correct and wrong example)
  • Adding links and images:
    • How does the TAG IMG work; Attributes of TAG; Alt, Title, SRC; How does TAG A work?; Attributes: HREF; TARGET 
  • Adding Lists:
    • Ordered lists (TAG OL); Unordered Lists (TAG UL)
    • Definition lists (TAG DL)
  • Positioning of elements:
    • Flex; How to add tables (TAG Table); TR; TD; THEAD; TBODY; TFOOT
  • Table attributes:
    • Colspan; Rowspan; Alignment; Border

Module 3 - CSS:
  • What is CSS?; Initial structure of a CSS 
  • Selection attributes:
    • Class; ID; Elements; Cascading selection. 
  • CSS and HTML:
    • Inline CSS; External CSS; Internal CSS 
  • CSS Properties:
  • How to change font type; How to change font size; How to change font weight; How to change line spacing; How to change font color; How to change text alignment
  • CSS Properties in DIVS:
    • What is a DIV?; Width/height; Margin; Padding; Background-color; Border
  • Image manipulation:
    • How to add filters
  • How to Rotate CSS Images in Links:
  • Properties; Link; Visited; Hover; Active; How to change the cursor
Learnt html
Diving into the Web-Dev Universe!!
The days after my board exams, where I kept learning something new every day, are still vivid in my memory. It was then that I turned to Coursera for some courses. Intro to HTML5 was one of them. I ended up the course by learning the basics of HTML, building the sites, & handed over assignments. 

I dug further into tutorials and built some sites as per interest :)
Oct 26, 2021
Completed a training course
Learned CSS
Learned HTML
+ 1
After a brief pause, I completed's Responsive Web Design course. I occasionally enjoy reviewing the basics, particularly in a deliberate format such as this.