vlewin/work-life-balance-ui

Time-Tracking App

vue-work-life-balance

DEMO application

TODO:

• Vue.js reusable components

• CSS Grid Layout with FlexBox

• Auth0 vs AWS Cognito authentication

• Switch to http://icofont.com/icons/ or Font Awesome 5

• Try to use feiertagejs

• Vue SSR vs Vue Prerendering

• PWA / PRA Progressive Web Applications /

• Progressive Real-Time Applications(https://www.youtube.com/watch?v=QjLUt37lX1s)

• GraphQL data services

• Unit / Functional / UI E2E acceptance testing (Chrome headless)

KNOWN ISSUES:

• date-fns/date-fns#376

SOURCES:

Auth0 Vue sample app

https://manage.auth0.com/#/clients/fC4Z1HSO4PHNJTWu9K4Emn90bo6CCgCM/quickstart https://www.storyblok.com/tp/how-to-auth0-vuejs-authentication

PWA

• https://medium.com/@firt/progressive-web-apps-on-ios-are-here-d00430dee3a7
• https://auth0.com/blog/introduction-to-progressive-apps-part-one/
• https://auth0.com/blog/introduction-to-progressive-web-apps-instant-loading-part-2/
• https://auth0.com/blog/introduction-to-progressive-web-apps-push-notifications-part-3/
• Office League PWA example
• Auth0 issue

3D CSS objects

https://cssanimation.rocks/spheres/

Responsive design - Landscape / Portrait mode

https://www.smashingmagazine.com/2012/08/designing-device-orientation-portrait-landscape/ https://www.creativebloq.com/web-design/master-screen-orientation-html5-101517371

Jest & Puppeteer setup

https://blog.usejournal.com/getting-started-with-jest-and-puppeteer-7cf6c59a2cae

CSS AND LAYOUT

• https://medium.com/flexbox-and-grids/how-to-efficiently-master-the-css-grid-in-a-jiffy-585d0c213577
• https://gridbyexample.com/examples/
• https://css-tricks.com/css-grid-replace-flexbox/
• https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
• https://tympanus.net/codrops/css_reference/flexbox/
• https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048

Flexbox is essentially for laying out items in a single dimension – in a row OR a column. Grid is for layout of items in two dimensions – rows AND columns.

This is good to remember: grid items can be flex parents. And, flex items can be grid parents.

How do you know where to use Flexbox? As a general rule of thumb, it is appropriate to use Grid to layout the overall page layout, and Flexbox for inner UI components.

Known Flexbugs Mastering Flexbox Normalizing Cross-browser Flexbox

<style lang="scss" src="assets/scss/style.scss"></style>

https://github.com/standard/standard

SVG ANIMATIONS:

• https://css4-selectors.com/browser-selector-test/

DESIGN INSPIRATIONS:

• http://principlerepo.com/time-picker/
• https://dribbble.com/shots/1057157-Calendar-Window-Rebound-ANIMATED
• https://tinyurl.com/y9hoduhy
• https://dribbble.com/shots/2098475-Calendar-date-range-picker
• https://codepen.io/atelierbram/pen/XbGQqw
• https://codepen.io/andylorimer/pen/meXadK
• https://codepen.io/fornyhucker/pen/krnBE (WAIT?)
• https://codepen.io/hrtzt/pen/JdYaEZ
• https://codepen.io/CesarGabriel/pen/KLqEb

https://css-tricks.com/building-a-circular-navigation-with-css-clip-paths/ http://pmg.softwaretailoring.net/

UI Development with Storybook

• bartop-io/bartop#96

Custom domain

https://gist.github.com/mapsam/ce60b87eea561ea6bdbf https://www.namecheap.com/support/knowledgebase/article.aspx?type=article&contentid=9645&categoryid=2208&rating=5

VUE-CLI3

Cypress https://www.cypress.io/

Prettier https://prettier.io/

https://developers.google.com/web/fundamentals/native-hardware/fullscreen/ https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html

https://blog.sicara.com/a-progressive-web-application-with-vue-js-webpack-material-design-part-3-service-workers-offline-ed3184264fd1

That configuration is saved in

https://alligator.io/vuejs/using-new-vue-cli-3/ ~/.vuerc,

CSS variables + hexagons

https://css-tricks.com/making-custom-properties-css-variables-dynamic/

Animation performance

https://css-tricks.com/forums/topic/css3-animations-are-burning-my-computer/

Parallax

http://matthew.wagerfield.com/parallax/

SVG ANIMATIONS

https://www.uplabs.com/posts/simple-material-vcard https://codepen.io/ariona/details/JYGzBB https://codepen.io/carsy/pen/zrvwGR http://antoniodinardo.com/TEST/weather_card/ https://dribbble.com/shots/2164018-Material-Design-Data-Cards https://i.pinimg.com/originals/3b/09/2f/3b092ffef4bec774ee5d67f0dcd15b97.gif https://www.pinterest.de/pin/509469776587967490/ https://dribbble.com/shots/2209918-Weather-UI-Material-Design https://www.google.de/search?q=svg+card+weather&tbm=isch&tbs=rimg:CToplDHNF9WaIjjAf-hfA2HAJABnqSiqpwnANW0W9UZEmUmDv1CNQ7rh-Qp8KIFaeAXLn5SzKojeM3KTetQIQq6e7SoSCcB_16F8DYcAkEa56g0IUMULhKhIJAGepKKqnCcARJFjOm9nOMEcqEgk1bRb1RkSZSRHYNfB1vDMxdCoSCYO_1UI1DuuH5EVB3ndo1_1sL_1KhIJCnwogVp4BcsR0VrbNQSlHIoqEgmflLMqiN4zchHQh0jfCjcRWyoSCZN61AhCrp7tEfiqmQnaydPM&tbo=u&sa=X&ved=2ahUKEwjk1q71zcbZAhWRCewKHYz9BY4Q9C96BAgAEBk&biw=1440&bih=716&dpr=2 https://peter.build/weather-underground-icons/ https://www.amcharts.com/free-animated-svg-weather-icons/ https://codepen.io/steveg3003/pen/Gqakbo https://codepen.io/beefchimi/pen/mOvrPL https://codepen.io/sdras/pen/azEBEZ

https://www.npmjs.com/package/vue-svg-arc-animation https://codepen.io/lbebber/pen/LELBEo https://codepen.io/valentingalmand/pen/MYMZZK?q=animation%20submit&order=popularity&depth=everything&show_forks=false https://codepen.io/mattrothenberg/pen/VaNRrR?q=animation%20submit&order=popularity&depth=everything&show_forks=false http://slides.com/sdrasner/cssdevconf#/34 https://x-team.com/blog/vue-animation-data-visualization/