{"id":1775,"date":"2018-01-28T19:34:39","date_gmt":"2018-01-28T19:34:39","guid":{"rendered":"https:\/\/2018.miami.wordcamp.org\/?post_type=wcb_session&#038;p=1775"},"modified":"2018-03-18T13:38:02","modified_gmt":"2018-03-18T17:38:02","slug":"how-i-created-wpbingo-using-vue-js-tailwind-css-and-the-wp-rest-api","status":"publish","type":"wcb_session","link":"https:\/\/miami.wordcamp.org\/2018\/session\/how-i-created-wpbingo-using-vue-js-tailwind-css-and-the-wp-rest-api\/","title":{"rendered":"How I created WPBingo using Vue.js, Tailwind CSS, and the WP REST API"},"content":{"rendered":"<p><!--td {border: 1px solid #ccc;}br {mso-data-placement:same-cell;}-->Just prior to WordCamp US 2017 I had the fun idea of creating an interactive bingo board for all of the fun and unique things that we regularly observe within our community. I was able to knock together the original concept after just a couple of hours thanks to utility provided by View and tailwind. Later I connected it to WordPress via the rest API so that I could more easily manage each of the squares available in the data set.<\/p>\n<p>In this presentation I walk you through how I went from idea to prototype to fully functional web app. We\u2019ll cover the purpose served by my chosen frameworks and why I picked those instead of writing plain, vanilla JavaScript and CSS (or competing frameworks, for that matter). While this will not be a deep dive into code, we will review specific code samples and you should get enough detail to build this \u2013 or something like it \u2013yourself by the time the session has ended.<\/p>\n<p>Here\u2019s the specific list of the things you can expect to learn during this presentation:<\/p>\n<p>* Why I chose Vue instead of React for this particular project<br \/>\n* Some of the neat things that Vue provides to us as developers (Vue.js 101)<br \/>\n* How to utilize local storage for resilience against connectivity issues and unintended browser refreshes<br \/>\n* The benefits of utility-based CSS classes<br \/>\n* How to register custom rest API endpoints<br \/>\n* Handling API authentication without regular users<br \/>\n* How you too can totally disrupt the State of the Word address<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Just prior to WordCamp US 2017 I had the fun idea of creating an interactive bingo board for all of the fun and unique things that we regularly observe within our community. I was able to knock together the original concept after just a couple of hours thanks to utility provided by View and tailwind. &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/miami.wordcamp.org\/2018\/session\/how-i-created-wpbingo-using-vue-js-tailwind-css-and-the-wp-rest-api\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;How I created WPBingo using Vue.js, Tailwind CSS, and the WP REST API&#8221;<\/span><\/a><\/p>\n","protected":false},"author":15533830,"featured_media":0,"template":"","meta":{"jetpack_post_was_ever_published":false,"_wcpt_session_time":1521311400,"_wcpt_session_duration":3000,"_wcpt_session_type":"session","_wcpt_session_slides":"https:\/\/docs.google.com\/presentation\/d\/1819JV95dz6HIl2fb-AL0gWH98t0gBqTSDmWwELnxR1w\/edit#slide=id.p","_wcpt_session_video":"","_wcpt_speaker_id":[834],"footnotes":""},"session_track":[5041],"session_category":[],"class_list":["post-1775","wcb_session","type-wcb_session","status-publish","hentry","wcb_track-developer"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p9i5nN-sD","session_date_time":{"date":"March 17, 2018","time":"2:30 pm"},"session_speakers":[{"id":"834","slug":"brian-richards","name":"Brian Richards","link":"https:\/\/miami.wordcamp.org\/2018\/speaker\/brian-richards\/"}],"session_cats_rendered":null,"_links":{"self":[{"href":"https:\/\/miami.wordcamp.org\/2018\/wp-json\/wp\/v2\/sessions\/1775","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/miami.wordcamp.org\/2018\/wp-json\/wp\/v2\/sessions"}],"about":[{"href":"https:\/\/miami.wordcamp.org\/2018\/wp-json\/wp\/v2\/types\/wcb_session"}],"author":[{"embeddable":true,"href":"https:\/\/miami.wordcamp.org\/2018\/wp-json\/wp\/v2\/users\/15533830"}],"version-history":[{"count":2,"href":"https:\/\/miami.wordcamp.org\/2018\/wp-json\/wp\/v2\/sessions\/1775\/revisions"}],"predecessor-version":[{"id":5179,"href":"https:\/\/miami.wordcamp.org\/2018\/wp-json\/wp\/v2\/sessions\/1775\/revisions\/5179"}],"speakers":[{"embeddable":true,"href":"https:\/\/miami.wordcamp.org\/2018\/wp-json\/wp\/v2\/speakers\/834"}],"wp:attachment":[{"href":"https:\/\/miami.wordcamp.org\/2018\/wp-json\/wp\/v2\/media?parent=1775"}],"wp:term":[{"taxonomy":"wcb_track","embeddable":true,"href":"https:\/\/miami.wordcamp.org\/2018\/wp-json\/wp\/v2\/session_track?post=1775"},{"taxonomy":"wcb_session_category","embeddable":true,"href":"https:\/\/miami.wordcamp.org\/2018\/wp-json\/wp\/v2\/session_category?post=1775"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}