Greg Bate gdbate
gdbate
/ Benchmarking SVG & HTML - DOM.html
Created
October 11, 2019 22:05
Benchmarking SVG & HTML - DOM
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div | |
| class="project" | |
| :style="`left: ${(project.start / 365) * 100}%; | |
| width: ${(project.duration / 365) * 100}%; | |
| background-color: ${project.color}`"> | |
| <div class="label" ../> | |
| </div> |
gdbate
/ Benchmarking SVG & HTML - SVG ViewBox Rect.html
Last active
October 11, 2019 21:53
Benchmarking SVG & HTML - SVG ViewBox Rect.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <rect | |
| :x="project.start" | |
| :width="project.duration" | |
| :y="20" | |
| :height="80" | |
| ../> |
gdbate
/ Benchmarking SVG & HTML - SVG Percentage Text.html
Created
October 11, 2019 21:49
Benchmarking SVG & HTML - SVG Percentage Text
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <text | |
| :x="`${((61 + (90 / 2)) / 365) * 100}%`" | |
| :y="20 + (80 / 2)" | |
| :width="labelWidth" | |
| :height="labelHeight" | |
| alignment-baseline="middle" | |
| text-anchor="middle" | |
| ../> |
gdbate
/ Benchmarking SVG & HTML - SVG Percentage Rect.html
Created
October 11, 2019 21:47
Benchmarking SVG & HTML - SVG Percentage Rect
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <rect | |
| :x="`${((project.start + (project.duration / 2)) / 365) * 100}%`" | |
| :y="20 + (80 / 2) - 0.5" | |
| :width="labelWidth" | |
| :height="labelHeight" | |
| :transform="`translate(-${labelWidth / 2} -${labelHeight / 2})`" | |
| ../> |
gdbate
/ Benchmarking SVG & HTML - SVG Layout.html
Last active
October 12, 2019 16:24
Benchmarking SVG & HTML - SVG Layout
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Root SVG --> | |
| <svg width="100%" height="120" preserverAspectRatio="none"> | |
| <!-- ViewBox Relative Placing --> | |
| <svg width="100%" height="100%" viewBox="0 0 365 120" preserverAspectRatio="none"/> | |
| <!-- Placing By Percentage --> | |
| <svg width="100%" height="100%" preserverAspectRatio="none"/> | |
| </svg> |
gdbate
/ Benchmarking SVG & HTML - data.js
Last active
October 11, 2019 22:08
Benchmarking SVG & HTML - data
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| lane: 1, // name of the project | |
| start: 61, // start date of project, March 1st | |
| duration: 90, // amount of days of project, to May 31st | |
| color: '#9C27B0', // color of the project box (and label border) | |
| label: 'LG', // label text, 2 characters | |
| }; |
gdbate
/ vue-customizing-amplify-authentication-fetching-jwt.js
Created
May 15, 2019 19:44
Vue: Customizing Amplify Authentication - Fetching JWT
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Dependencies =============== | |
| import {Auth} from 'aws-amplify' | |
| // Function =================== | |
| async function getJWT(state){ | |
| if(state.account.authorized){ | |
| const session = await Auth.currentSession() |
gdbate
/ structuring-vuex-modules-maintaining-record-order-listing.js
Created
May 5, 2019 01:19
Structuring Vuex Modules - Maintaining Record Order - Listing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| computed: { | |
| ordered(){ | |
| return Object.values(this.$store.state.albums.all).sort((a, b) => {return a.order - b.order}) | |
| }, | |
| } | |
| } |
gdbate
/ structuring-vuex-modules-maintaining-record-order-adding.js
Last active
May 5, 2019 01:02
Structuring Vuex Modules - Maintaining Record Order - Adding
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| store.actions = { | |
| all({commit}, all){ | |
| for(let i in all) | |
| commit('add', {...all[i], order: i}) | |
| }, | |
| } |
gdbate
/ vue-customizing-amplify-authentication-handling-authentication-changes.js
Last active
May 9, 2019 02:45
Vue: Customizing Amplify Authentication - Handling Authentication Changes
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| watch: { | |
| '$store.state.account.authorized': async function(n, o){ | |
| if(n, o){ | |
| //logic for user logging in | |
| await this.$api('user', 'signin') //example for logging in user to server | |
| if(this.$route.path !== '/' || !o) | |
| this.$router.push('/') | |
| }else{ | |
| //logic for user logging out |
NewerOlder