Random GrumblingsThis is a place for all my random ideas and projects.
http://garygrumbley.com/
Fri, 02 Jun 2017 18:10:18 +0000Fri, 02 Jun 2017 18:10:18 +0000Jekyll v3.4.3Townie<p><a href="https://gg-townie.herokuapp.com/" class="btn btn-green" role="button" target="_blank">Project</a>
<a href="https://github.com/ggrumbley/townie" class="btn btn-blue" role="button" target="_blank">GitHub</a></p>
<p>I have a love-hate relationship with Node.js. I want to like the platform for building apps but I have always disliked the way it handles the asynchronous behavior needed for web servers. Callback Hell is a real place. Catch-Try statements everywhere is messy and unappealing. The addition of promises cleaned it up a little, but one could still end up trying to pick apart long chains of promise calls, which is not ideal. Enter Node 7.6 with default async/await support. Suddenly writing a complex series of DB calls in a controller was elegantly handled by marking the controller as <code class="highlighter-rouge">async</code> and adding <code class="highlighter-rouge">await</code> to any method that the controller needed to wait on. Async/await coupled with ES6 is changing my mind about Node.js as a viable back-end option. JavaScript is feeling more Pythonic the more I use these new features. I therefore decided to try and build a larger, more complete project.</p>
<p>I looked around but did not find any code examples I really liked. No tutorials or Node.js examples were leveraging the cleaner syntax of async/await. Then I stumbled upon Wes Bos’s excellent <a href="https://learnnode.com/">Learn Node video series</a>. I had been looking for an excuse to throw some 💰 his way after thoroughly enjoying his free <a href="https://javascript30.com/">30 Days of JavaScript course</a>. Learn Node did not disappoint. His lessons were concise and insightful. Wes built this course with best in class technologies including Express.js, Pug, Passport.js, Mongoose, MongoDB, SASS, and Webpack. Every example used as much ES6 syntax as each piece of middleware would allow. The result was an in depth portrayal of what a well-designed Node.js project can look like.</p>
<p>Townie is the the Yelp clone I built while working through Learn Node. I have made a few tweaks to add Geolocation and plan to expand the API to support a React Native app which I am currently building. This project is exciting, and I am looking forward to digging into it as my new side-project.</p>
Thu, 18 May 2017 03:00:00 +0000http://garygrumbley.com/projects/2017/05/17/townie.html
http://garygrumbley.com/projects/2017/05/17/townie.htmlProjectsReact Sheets<p><a href="/projects/sheets/index.html" class="btn btn-green" role="button" target="_blank">Project</a>
<a href="https://github.com/ggrumbley/react-spreadsheet" class="btn btn-blue" role="button" target="_blank">GitHub</a></p>
<p>After spending the last year locked into an Angular project at work I have wanted to try something simpler. There is nothing wrong with Angular but it is a hefty enough abstraction over pure JavaScript that it feels more like a DSL. Now that most ES6 features are compatible with every major browser in addition to Node, I have wanted to get back to basics and really focus on learning to write clean ES6 JavaScript. I also like the general web component trend of encapsulating front end code into easily reusable modules. React has championed both ES6 and web components. I have wanted to get started with React but have been apprehensive about getting locked into another JavaScript framework.</p>
<p>I decided to build a spreadsheet component using just React and React DOM. I chose this canonical React example to see if I could build a useful non-trivial component without being locked into the React ecosystem or being forced to wade through the quickly changing JavaScript tooling ecosystem. I have foregone ES6 in this project so I can focus on basic React. The only libraries used in this project are React, React DOM, and Pure CSS.</p>
<p>The component is fully dynamic, taking advantage of the way data is passed throughout the component. It takes two inputs: a one dimensional array of header information and a two dimensional array of spreadsheet data. The data loaded into the spreadsheet is my own board game collection. It has a lot of functionality including JSON/CSV exports, ‘ctrl+z’ undo shortcut, inline editing and data filters/search.</p>
<p>I learned a lot from building this component without JSX. The component is 241 lines of code with well over 200 of those being just vanilla JavaScript methods. React is only used to create the component, to designate its initial state, and to render the elements on the DOM. Without JSX I had to call React DOM functions to create each type of element that I needed. The first argument was an object of attributes and the second was any child elements. This was definitely a clunky way to write out the markup for the component but not unworkable. Now I have a component that can be dropped into just about any project (including an Angular project) and it will just work.</p>
<p>Once I overcame the initial React learning curve to figure out how props and state are used, this project went relatively quickly. It was also a lot of fun. Next up for this component will be adding a transpiler so I can convert the component to use JSX and ES6.</p>
Thu, 29 Dec 2016 19:37:00 +0000http://garygrumbley.com/projects/2016/12/29/sheets.html
http://garygrumbley.com/projects/2016/12/29/sheets.htmlProjectsGrumblebucks<p><a href="/projects/grumblebucks/index.html" class="btn btn-green" role="button" target="_blank">Project</a>
<a href="https://github.com/ggrumbley/grumblebucks" class="btn btn-blue" role="button" target="_blank">GitHub</a></p>
<p>This is a demo app I built to demonstrate front-end JavaScript techniques. This a simple web form for a fictitious coffee company called Grumblebucks. The user inputs their order which then shows up in a drink queue for the barista. This app is primarily plain JavaScript using object oriented techniques for organizing my code. I used the Yeti Bootswatch theme for simple styling.</p>
Thu, 01 Dec 2016 17:54:01 +0000http://garygrumbley.com/projects/2016/12/01/grumblebucks.html
http://garygrumbley.com/projects/2016/12/01/grumblebucks.htmlProjectsTypeahead From CSV File<p><img src="/assets/project-autoCountry.png" alt="Typeahead Example image" title="Typeahead Example" /></p>
<p>This is a typeahead example I built for a code test. The data is pulled from a CSV file that is parsed on the client side. The typeahead functionality is achieved with jQuery and vanilla JavaScript. The user’s selection is added to a list.</p>
<p><a href="/projects/autoCountry/index.html" class="btn btn-green" role="button" target="_blank">Project</a>
<a href="https://github.com/ggrumbley/ggrumbley.github.io/tree/master/projects/autoCountry" class="btn btn-blue" role="button" target="_blank">GitHub</a></p>
Thu, 17 Nov 2016 17:54:01 +0000http://garygrumbley.com/projects/2016/11/17/typeahead.html
http://garygrumbley.com/projects/2016/11/17/typeahead.htmlProjectsGeneric Property Site<p><img src="/assets/project-propertyMGMT.png" alt="Generic Property Site image" title="Generic Site" /></p>
<p>This is a simple generic property management page I built for a code test. This is a responsive site built with a mobile first approach. The page features a dynamically generated comment section and a three image slideshow.</p>
<p><a href="/projects/propertyMGMT/index.html" class="btn btn-green" role="button" target="_blank">Project</a>
<a href="https://github.com/ggrumbley/ggrumbley.github.io/tree/master/projects/propertyMGMT" class="btn btn-blue" role="button" target="_blank">GitHub</a></p>
Thu, 17 Nov 2016 17:53:01 +0000http://garygrumbley.com/projects/2016/11/17/generic-prop-site.html
http://garygrumbley.com/projects/2016/11/17/generic-prop-site.htmlProjectsmyWhiskyShelf<p><img src="/assets/project-myWhiskyShelf.png" alt="Whisky Shelf App image" title="myWhiskyShelf" /></p>
<p>This is a site for recording the user’s whisky collection and allows them to add their own impressions of the whisky. This application is built with the Ruby on Rails Omakase stack.</p>
<p><a href="https://lit-lowlands-5680.herokuapp.com/" class="btn btn-green" role="button" target="_blank">Project</a>
<a href="https://github.com/ggrumbley/myWhiskeyShelf" class="btn btn-blue" role="button" target="_blank">GitHub</a></p>
Thu, 17 Nov 2016 17:52:01 +0000http://garygrumbley.com/projects/2016/11/17/myWhiskyShelf.html
http://garygrumbley.com/projects/2016/11/17/myWhiskyShelf.htmlProjectsDynamically Generated Tabs<p><img src="/assets/project-tabs.png" alt="Dynamically Generated Tabs image" title="Dynamically Generated Tabs Example" /></p>
<p>This is a simple page UI I built using jQuery and CSS3 transitions. The user can generate multiple boxes and specify how many tabs are in each box as well as which tab will be the default tab. The color for each box is selected at random.</p>
<p><a href="/projects/dynamicTabGenerator/dynamic.html" class="btn btn-green" role="button" target="_blank">Project</a>
<a href="https://github.com/ggrumbley/ggrumbley.github.io/tree/master/projects/dynamicTabGenerator" class="btn btn-blue" role="button" target="_blank">GitHub</a></p>
Thu, 17 Nov 2016 17:51:01 +0000http://garygrumbley.com/projects/2016/11/17/dynamic-tabs.html
http://garygrumbley.com/projects/2016/11/17/dynamic-tabs.htmlProjectsStumblinGrumblin.com<p>This is my old homepage. It is a simple static site made with Bootstrap.</p>
Thu, 17 Nov 2016 17:49:01 +0000http://garygrumbley.com/projects/2016/11/17/old-homepage.html
http://garygrumbley.com/projects/2016/11/17/old-homepage.htmlProjectsHistory Walk<p><img src="/assets/project-historyWalk.png" alt="HistoryWalk project image" title="HistoryWalk" /></p>
<p>This project is an audio tour app. The goal of this app is to make custom audio tours accessable to parks, towns and small art galleries. This project is built with Angular, Bootstrap and Ruby on Rails. Best viewed on mobile.</p>
<p><a href="https://apologetic-eh-5318.herokuapp.com/" class="btn btn-green" role="button" target="_blank">Project</a>
<a href="https://github.com/ggrumbley/historyWalk" class="btn btn-blue" role="button" target="_blank">GitHub</a></p>
Wed, 16 Nov 2016 17:55:01 +0000http://garygrumbley.com/projects/2016/11/16/history-walk.html
http://garygrumbley.com/projects/2016/11/16/history-walk.htmlProjectsWelcome to Random Grumblings<p>Welcome to my new blog. This will be my little corner of the internet. I plan to post information on the projects I am working on and any random thoughts I may have.</p>
Thu, 10 Nov 2016 17:50:01 +0000http://garygrumbley.com/blog/2016/11/10/welcome-to-my-new-blog.html
http://garygrumbley.com/blog/2016/11/10/welcome-to-my-new-blog.htmlblog