Elementor Notes

Posted in WordPress on November 5, 2018 by rowej83.

For issues where the buttons don’t align, the CSS provided below can fix it either using Flexbox or Grid depending on how many items are in the container.

/*Option 1 - Flex Grid for 2 elements*/ 

.db-flex-column .elementor-widget-wrap { height: 100%; display: flex; flex-direction: column; justify-content: space-between; } 

/*Option 2 - CSS Grid for multiple elements*/

.db-grid-column .elementor-widget-wrap { display: grid; grid-template-rows: 1fr 2fr 2fr 1fr; }

/*Option 1 - Flex Grid for 2 elements*/

.db-flex-column .elementor-widget-wrap { height: 100%; display: flex; flex-direction: column; justify-content: space-between; }

/*Option 2 - CSS Grid for multiple elements*/

.db-grid-column .elementor-widget-wrap { display: grid; grid-template-rows: 1fr 2fr 2fr 1fr; }

Make hero image full screen under header

height: calc(100vh - 100px);
/* assuming header height is 100px */

1 2	height: calc(100vh - 100px); /* assuming header height is 100px */

MySQL Notes

Posted in SQL on October 29, 2018 by rowej83.

Notes for a refresher and or quick reference for SQL.

JOIN chart for visualizing the different types of possible JOIN. Source: https://www.w3schools.com/sql/sql_join.asp

Source from below: https://www.codeproject.com/Articles/33052/Visual-Representation-of-SQL-Joins

For a INNER JOIN , it can be re-written as such below and is called an IMPLICIT INNER JOIN

SELECT *
FROM TableA A, TableB B
WHERE A.Key = B.Key

above is the same as 

SELECT *
FROM TableA A
INNER JOIN TableB B
ON A.Key=B.Key

Using INNER JOIN is convention. INNER is also not needed as all joins are inner joins unless specified.

SELECT *

FROM TableA A, TableB B

WHERE A.Key = B.Key

above is the same as

SELECT *

FROM TableA A

INNER JOIN TableB B

ON A.Key=B.Key

Using INNER JOIN is convention. INNER is also not needed as all joins are inner joins unless specified.

There is no difference between RIGHT JOIN and RIGHT OUTER JOIN. Both are the same. LEFT JOIN and LEFT OUTER JOIN are also the same.

IFNULL function. If it is going to return a NULL value you can set a replacement value instead. Useful for LEFT/RIGHT JOINS where a column maybe be NULL

So for example:

SELECT first_name,
       last_name,
       IFNULL(SUM(amount),0) AS total
FROM customers
LEFT JOIN orders
       ON customers.id=orders.customer_id

// If there is no orders found for a particlur customer.id, it will
// return 0 for total instead of NULL

SELECT first_name,

last_name,

IFNULL(SUM(amount),0) AS total

FROM customers

LEFT JOIN orders

ON customers.id=orders.customer_id

// If there is no orders found for a particlur customer.id, it will

// return 0 for total instead of NULL

Vuejs notes

Posted in Javascript on October 24, 2018 by rowej83.

Mass registering global components

Import top level components and export them as an Array:

// File: /components/index.js

import Component1 from './Component1.vue';
import Component2 from './Component2.vue';
import Component3 from './Component3.vue';

export default [
    Component1,
    Component2,
    Component3
];

// File: /components/index.js

import Component1 from './Component1.vue';

import Component2 from './Component2.vue';

import Component3 from './Component3.vue';

export default [

Component1,

Component2,

Component3

];

Then in main.js we loop through the components and register them globally:

import Vue from 'vue';
import globalComponents from './components';

globalComponents.forEach(component => {
    Vue.component(component.name, component);
});

// load Vue

import Vue from 'vue';

import globalComponents from './components';

globalComponents.forEach(component => {

Vue.component(component.name, component);

});

// load Vue

Useful Vuejs libraries

https://cdn.jsdelivr.net/npm/v-mask/dist/v-mask.min.js can be used for phone and zip code masks to prevent bad input. Also works with Element UI. Just include via cdn and then can be used as a directive i.e. :

<el-input v-model="phone" v-mask="'(###) ###-####'" ></el-input>

1	<el-input v-model="phone" v-mask="'(###) ###-####'" ></el-input>

Vuex Notes

Posted in Javascript on October 15, 2018 by rowej83.

Example Vuex with some comment notes

// store.js

import Vuex from "vuex";
import Vue from "vue";

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {},
  mutations: {
    //mutations alters state directly i.e. state.count=0;
    //can't have async code ( ajax) , must use actions
    exampleMutator:state=> {
      state.count = 10;
    },
    exampleMutatorWithPayload(state, payload) {
      console.log(payload);
    },
    increment: state => {
      state.count++;
    },
  },
  actions: {
    // provides context to update the state
    //i.e
    exampleAction: context => {
      //context is passed by Vuex and is how we can run async code to
      // eventually be committed.
      context.commit("exampleMutator");
    },
    // or deconstruct to get commit ,  payload is second parameter
    exampleActions2: ({ commit }, payload) => {
      console.log(payload);
      commit("exampleMutatorWithPayload", payload);
    }
  }
});

// store.js

import Vuex from "vuex";

import Vue from "vue";

Vue.use(Vuex);

export const store = new Vuex.Store({

state: {

getters: {},

mutations: {

//mutations alters state directly i.e. state.count=0;

//can't have async code ( ajax) , must use actions

exampleMutator:state=> {

state.count = 10;

exampleMutatorWithPayload(state, payload) {

console.log(payload);

increment: state => {

state.count++;

actions: {

// provides context to update the state

//i.e

exampleAction: context => {

//context is passed by Vuex and is how we can run async code to

// eventually be committed.

context.commit("exampleMutator");

// or deconstruct to get commit , payload is second parameter

exampleActions2: ({ commit }, payload) => {

console.log(payload);

commit("exampleMutatorWithPayload", payload);

}

});

In main.js we add the store via:

// main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue";
import App from "./App";
import { store } from "./store/store";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  store,
  el: "#app",
  components: { App },
  template: "<App/>"
});

// main.js

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an alias.

import Vue from "vue";

import App from "./App";

import { store } from "./store/store";

Vue.config.productionTip = false;

/* eslint-disable no-new */

new Vue({

store,

el: "#app",

components: { App },

});

In a component that uses something in the store:

//example component.js
import { mapActions } from "vuex";
export default {
  name: "Counter",
  methods: {
    // using mapActions makes it much faster, payload is automatically passed in
    ...mapActions({
      increment: "increment",
      decrement: "decrement",
      multiplyBy: "multiply"
    }),
    otherNonStoreMethods(){
    
     }

    // increment() {
    //   // this is to directly use mutations.
    //   //this.$store.commit("increment");

    //   //this is how to use actions instead.
    //   this.$store.dispatch("increment");
    // },
    // decrement() {
    //   // this is to directly use mutations.
    //   //this.$store.commit("decrement");

    //   //using actions instead
    //   this.$store.dispatch("decrement");
    // },
    // multiplyBy(by) {
    //   this.$store.dispatch("multiply", by);
    // }
  }
};

//example component.js

import { mapActions } from "vuex";

export default {

methods: {

// using mapActions makes it much faster, payload is automatically passed in

...mapActions({

increment: "increment",

decrement: "decrement",

multiplyBy: "multiply"

}),

otherNonStoreMethods(){

}

// increment() {

// // this is to directly use mutations.

// //this.$store.commit("increment");

// //this is how to use actions instead.

// this.$store.dispatch("increment");

// },

// decrement() {

// // this is to directly use mutations.

// //this.$store.commit("decrement");

// //using actions instead

// this.$store.dispatch("decrement");

// },

// multiplyBy(by) {

// this.$store.dispatch("multiply", by);

// }

}

};

Mutations are for non-async updates to the Vuex store. Actions can use async code. Generally, should actions should always be used instead of Mutators.

If using Mutators.. the update to the store can happen directly. i.e. this.$store.commit('mutatorMethodThatUpdatesStore');

Actions use dispatch instead: this.$store.dispatch('mutatorMethodThatUpdatesStore');

3 useful methods from Vuex are:

mapGetters

mapMutations

mapActions

mapState – mapState should be used instead of creating “dummy” getters. Dummy getters are ones that simply just return the store’s state value.

Getters should be more used for computed type values or for things such as a filter etc.

For each of the 4 above..All have either an array of strings of names of state/getter/mutation/action or can pass in an object with key/value pairs if needing a different name. For example:

...mapActions({
multipleBy:'multiply'
});

// This will map the store's action "multiply" to a component's
// "multiplyBy" method.

...mapActions({

multipleBy:'multiply'

});

// This will map the store's action "multiply" to a component's

// "multiplyBy" method.

WordPress – Making a custom type not have a url

Posted in WordPress on October 2, 2018 by rowej83.

Custom post type should have below settings:

‘rewrite’ => false,
‘query_var’ => false,
‘publicly_queryable’ => false,
‘public’ => false

Explanation of each:

rewrite Triggers the handling of rewrites for this post type. To prevent rewrites, set to false.

query_var ‘false’ – Disables query_var key use. A post type cannot be loaded at /?{query_var}={single_post_slug}

publicly_queryable Whether queries can be performed on the front end as part of parse_request().

public ‘false’ – Post type is not intended to be used publicly and should generally be unavailable in wp-admin and on the front end unless explicitly planned for elsewhere.

Go to Permalinks Settings and without changing anything – save change. It will rebuild your “routing”.

Source: https://stackoverflow.com/questions/19747096/remove-url-structure-for-custom-post-type

Online Journal

My online journal about design and development related topics and what I've learned.

Elementor Notes

MySQL Notes

Vuejs notes

Vuex Notes

WordPress – Making a custom type not have a url