KanbanMail
A Kanban board for your emails! ✨💌
Reduced style recalculation time on drag start from 400ms to 130ms
This is what the auto-generated file looks like! https://web.kanbanmail.app/js/components.js
This part basically generates a components.js file based on a folder of .vue files...
Some details of the single file component parser, using the magnificent RegEx 😁
Converted all components to .vue files
Created my own Vue single file component parser!
Made all email filter actions in components.js use emailsToShow computed property instead
Tweeted about optimizations 😁 https://twitter.com/Booligoosh/status/1117439784656359424
Added a computed getter to the column component called emailsToShow which gets the emails that should be displayed in that column
Fixed getElementFromEmailId function so it works without index attributes
Offloaded Vue components into components.js file
Fixed side popup column close button
Created a column-header component
Moved Vue instance creation to after component declaration so components show up straight away
Created email-card component
Cleaned up board-column-header HTML
Don’t re-serialize and re-store data object if there are no new emails
Removed CSS var(--incoming-card-spacer-height)
Optimized .dragging CSS selectors
Use getEmailById in updateEmailsPartTwo
Log when storing data object
Read an article about Chrome DevTools performance reports — https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/
Optimized some CSS rendering
