nystudio107 / @nystudio107 by Andrew Welch devMode podcast / devMode.fm Solving Problems with Modern Tooling 

Problems 

Math Problems 

Word Problems 

Relationship Problems 

And yet… 

That’s What We Do 

We Solve Other People’s Problems 

We Solve Other People’s Problems 

We Solve Other People’s Problems 

Client Problems, AMIRITE? 

Standing on a Mountain 

Standing on a Mountain of Solved Problems Standing on a Mountain 

This Old Site 

This Old Site 

This Old Site Custom website built in Cake PHP 

This Old Site Database of food- borne illnesses dating back to 1993 

This Old Site (They just didn’t want it to look like it was from 1993) 

No content

Project Goals 

Project Goals Make the outbreak database easier to maintain for the content authors 

Project Goals Make the frontend easier to use by researchers and journalists 

Project Goals Modernize the website underpinnings 

Potentially provide an API to allow other parties to access the database directly Project Goals 

Modern Tooling 

Vue.js Modern Tooling 

Modern Tooling Vuex 

Modern Tooling Axios 

GraphQL Modern Tooling 

Modern Tooling Tailwind CSS 

Modern Tooling Craft CMS 

Shiny New Site 

No content

Eliminate the SERP 

// Home page import { OutbreakMixins } from '../mixins/outbreak.js'; import '@trevoreyre/autocomplete-vue/dist/style.css' import { createStore } from '../store/store.js'; // App main const main = async() => { // Async load the vue module const [ Vue, VueSmoothScroll ] = await Promise.all([ import(/* webpackChunkName: "vue" */ 'vue'), import(/* webpackChunkName: "vue" */ 'vue2-smooth-scroll'), ]); const store = await createStore(Vue.default); Vue.default.use(VueSmoothScroll.default); // Create our vue instance const vm = new Vue.default({ render: (h) => { return h('search-form'); }, mixins: [OutbreakMixins], store, components: { 'search-form': () => import(/* webpackChunkName: "searchform" */ '../../vue/SearchForm.vue'), }, }); return vm; }; home.js 

import * as actions from './actions.js'; import * as mutations from './mutations.js'; import * as getters from './getters.js'; // Store main export const createStore = async(Vue) => { const { default: Vuex } = await import(/* webpackChunkName: "vuex" */ 'vuex'); Vue.use(Vuex); return new Vuex.Store({ state: { csrf: null, gqlToken: null, outbreakSlug: null, outbreakDetail: null, states: null, vehicles: null, searchForm: null, organisms: null, outbreaks: null, months: null, countries: null, }, getters, mutations, actions, modules: {} }); }; store.js 

Auto-Complete Component 

{{ result[titleField] }}

Autocomplete.vue 

gql.js // Configure the GraphQL api endpoint export const configureGqlApi = (url, token) => ({ baseURL: url, headers: { 'X-Requested-With': 'XMLHttpRequest', ...(token && { 'Authorization': `Bearer ${token}` }), } }); // Execute a GraphQL query by sending an XHR to our api endpoint export const executeGqlQuery = async(api, query, variables, callback) => { // Execute the GQL query try { const response = await api.post('', { query: query, variables: variables }); if (callback && response.data.data) { callback(response.data.data); } // Log any errors if (response.data.errors) { console.error(response.data.errors); } } catch (error) { console.error(error); } }; 

export const outbreaksQuery = (additionalParams) => { let queryAdditionalParams = ''; let entryAdditionalParams = ''; additionalParams.forEach((item) =>{ queryAdditionalParams += `, $${item.fieldName}: [QueryArgument]`; entryAdditionalParams += `, ${item.fieldName}: $${item.fieldName}`; }); return ` query outbreaksQuery($needle: String!${queryAdditionalParams}) { entries(section: "outbreaks", search: $needle${entryAdditionalParams}) { title, url, slug, ...on outbreaks_outbreaks_Entry { summary, beginningDate, vehicles { title }, organisms { title }, tags { title } } } } `; queries.js 

No content

Live Demo?? 

devMode podcast / devMode.fm nystudio107.com @nystudio107 SpeakerDeck.com/ nystudio107