Inspiration: I had been studying bits and pieces about front end developer workflows, but came across too many holes in the process. Then someone told me about this course on Facebook, and I had to check it out. It was on sale at Udemy for $10, and I just couldn't pass it up. Well, it is worth MUCH more than that. I just finished the project today and had to share here.

What it does: It's a mock travel agency website that has buttons that when you press them reveal a "Get In Touch" modal, beautiful fade ins, and equal height columns created with Flexbox. The best part is the workflow I built.

How I built it: First and foremost was the Gulp task runner. However, unlike the instructor in the course, I did a complete local install of my npm packages, including Gulp, for which the recommended install is global for ease of convenience/CLI purposes. I really nailed down my package.json scripts for that purpose, and had lots of fun mastering new things. My dependencies: jQuery, jQuery Smooth Scroll (for smooth navigation scrolling), lazysizes plugin for lazy loading images (including responsive images (picture/srcset)), iframes and scripts), normalize.css for the rendering of all elements more consistently and in line with modern standards, and picturefill allows web developers to deliver an appropriate image to every user depending on a variety of conditions like screen size, viewport size, screen resolution, and more. Picturefill enables support for the picture element and associated features in browsers that do not yet support them. My DevDependencies: autoprefixer, a PostCSS plugin for parsing CSS and adding vendor prefixes to CSS rules using values from "Can I Use", babel-core the Babel compiler itself, babel-loader, which allows transpiling JavaScript files using Babel and webpack, babel-preset-es2015, which is all you need to compile ES2015 to ES5, browser-sync, which provides live reloading of the page via its local hosting server when it detects changes in your files, del npm package, which I use to delete the (public) dist folder before a production rebuild, and much much more which you can view in my package.json file. I will be writing a post about this for both my own reference and for others on my Developer Blog.

Challenges I ran into: Occasionally, I encountered issues with outdated code due to plugin updates/deprecations. But the fun part was figuring out what the issue was and then figuring out a fix!

Accomplishments that I'm proud of: Instead of doing both global and local installs of npm packages, I only did local installs. Very proud of getting that down by creating my own scripts in my package.json. In addition, I decided to go the gulp-gh-pages route and deploy my dist folder onto a gh-pages branch created via gulp-gh-pages instead of simply pressing a button in my repo's settings to simulate the existence of a gh-pages branch, as was done in the course. I then proceeded to create my own gulp deploy task and customize my build task to adapt to the requirements of gulp-gh-pages. I also discovered discrepencies in code that was due to changes in npm packages. For example, because there was a total revamp of Modernizr with Modernizr 3, testing for feature detection with Modernizr classes in Chrome DevTools. I caught that and found the fixes. Then there was a jQuery issue that caused problems with the waypoints devDependency which I used in conjunction with the jQuery Smooth Scroll plugin for smooth navigation scrolling, because when the course was created, jQuery npm was using jQuery 2.x.x, and the jQuery .load() method was compatible with jQuery .load() method. However, now jQuery npm has jQuery 3.x.x, and that no longer supports .load method(). I recognized the issue, and as a result, he came up with the fix.

What I learned: A LOT in detail about the Front End Development Workflow and specifically how to modularize my code and workflow so it could be re-used in other projects.

What's next for travel-agency-site: It has already been deployed to gh-pages, and I am now getting ready to apply this knowledge to other existing projects in order to improve upon them and streamline them.

Built With

Share this project: