12 Months To Beta – MapMoto

It’s been about a year, a little over actually, since I started work on my main side project. The app is a motocross track directory,  which isn’t something that doesn’t exist already, but I felt existing track directories were lacking a lot of features. This lead to me creating MapMoto.

An Idea

I ride motocross a lot, not as much as a few years ago, but a lot. I’m always looking up weather before I ride, looking for hot-line numbers to call to confirm days to ride, and looking for new tracks all together, especially when traveling. I wrote down everything I wished a motocross track directory would have, and came up with the follow list.

  • A really good map, one where I could  just drag it around and see every track easily, without typing in a zip code and having some limited radius displayed, or seeing a list of tracks for a given area and having to click on each one to see it’s location on a map.
  • The ability to see how far away from me (drive time wise) a track is without opening up a Google Maps Tab on my own.
  • To quickly check what day’s a track is open
  • To see the weather forecast for the week, to cross reference with the days a track is open.
  • A track’s website, facebook, twitter, instagram, and whatever other contact info they’ve got peruse around through.

MapMoto Alpha

I began the project last year in CodeIgniter 3. That’s right, in 2015 I STARTED a project in CI. Those who’ve been around the php community are probably wondering what I was thinking as it’s widely criticized for being dated. I was simply taking a shortcut. I’d developed two applications for clients using CI and the Google Maps API, so I had felt I could get started more quickly. I jumped right into coding, and said to hell with planning ahead.

After 3 or 4 weeks of work I had a working app to add motocross tracks into a simple MySQL database I’d designed. It was unstyled except for Bootstrap’s default look, but worked well enough for me to spend a lot of weeks adding hundreds of tracks across the country.

I constantly improved things to make my work easier, such as dropping a map pin based on a track’s address, then allowing that pin to be dragged and sync the new location with the database (lots of tracks are only kinda near their list address). I developed user and administrative  roles, and built user profile pages with user settings pages to match. Users could upload avatars, link to their social media, be granted permission to manage tracks, the scope of this project crept larger and larger. Eventually I’d styled the site to a look I was fairly happy with too. After implementing the weather forecast system I’d told myself enough was enough. This was my side project, I wanted to learn something new, and I should learn modern practices. During the entirety of development I’d felt stressed out that I was stuck working in CodeIgniter. I knew it well enough already that this project seemed like work, which didn’t seem fun. I just wanted my project finished.

MapMoto Beta

I returned from a trip to Peru a few weeks before my girlfriend who was there for work. I told myself  during those few weeks of an empty house, to stay up all hours coding in, I’d finally convert this damn thing into a framework I was excited to work with. There was a strong temptation to switch the project over to Django, as I’m comfortable writing Python, but haven’t used a Python web framework. I’d also been reading an Express.js book I’d purchased myself impulsively one day on Amazon, and thought maybe I’d go full JS.

Ultimately I decided to stick with php so as not to have to rewrite everything outside of the HTML/CSS/JS. Laravel 5 seemed like a solid choice for a modern framework, with good documentation and an active community. The conversion from CodeIgniter 3 to Laravel 5 took me roughly 3 weeks, which was surprisingly fast. Laravel’s Eloquent ORM, and Blade Templates, allowed me to clean up the code base dramatically. Since the conversion, implementations of new features have gone much more quickly than CI would have allowed, and working on my side project has become fun again.

 

Beta Launch

After deciding it was time to quietly launch the site, I opened it up to unregistered users, and allowed new users to register. I posted on /r/motocross for some feedback on what other riders thought of the initial version. I know of larger motocross communities on line, but decided to go with a low test volume at first. The initial reaction from everyone was very positive. I plan to continue to work on this project slowly, and have a larger official launch at some point in the future. It’s been a great learning experience.

Drinking Age Gateway with JavaScript

UPDATE 12/5/2016:
If you’re going to attempt to integrate this into the WordPress platform, please consider using my WP Drinking Age Plugin.

Background

So outside the normal grind I’ve been working on a website for a tequila brand. After a meeting with marketing I’d gathered it was important to add a drinking age gateway to the site. You see some type of these gateways on just about every alcohol brand’s site. I asked if they’d prefer to simply ask “Are you of Legal Drinking Age?”, and then have  “Yes/No” buttons determine a user’s fate (1)(2), or if they’d rather have the user input their birthday (3). Apparently, and I’m not a business guy or a lawyer so don’t comment and argue this with me, the yes/no gateways hold slightly less legitimacy than the ones where a user inputs their birthday to enter the site .

These gateways are really just about putting responsibility into the hands of the user, within reason. Is it easier to  lie with a yes/no gateway?…sure. Is it impossible to lie about your birthday though?…definitely not. So a birthday input is reasonably easy to implement, but not impossible to crack. If a user is going to lie they’re going to lie, not turn off JavaScript to get around the gateway. This is why a client side gateway seemed like the most reasonable approach.

Solution

A JavaScript gateway will allow easy indexing by search engines because they won’t run the JavaScript to restrict the content in the first place . If we were to have PHP check for the presence of an age verification cookie,  search engine crawlers will not have this cookie and will not see/index the content. We could work around that I’m sure, but there’s no need.

All countries don’t have the same drinking age. So solutions where the gateway is based on a static entry age aren’t viable. An age, and location must be gathered by the gateway to determine if a user is credible to enter the site. Tequila in Mexico is legal 3 years earlier than California. Sites that implemented this type of gateway (1) seemed to POST location values with country codes “US” “CA” ,ect. So they were authenticating server side with these codes…ugh

I’d Googled long enough to determine the few hours spent writing this script were likely more fun than just searching for an existing solution to work with, because it didn’t jump out at me.

Github Code

Installation

  1. Download the dependencies of Bootstrap and jQuery
  2. Get the Source drinkingAge
  3. Place bouncer.css in site’s head <link href="css/bouncer.css" rel="stylesheet">
  4. Place bouncer.js before the close of the body <script src="js/bouncer.js"></script>
  5. Initialize the gateway and its settings

 

Putting that all together in the most basic form you should have this.

Example Gateway

Customization

The bouncer.css file allows you to change just about everything that has to do with the gateway. I’m not a wizard with style sheets and this is a demo…so you’ll want to change things here.

 

Reference for Legal Drinking Ages

http://drinkingage.procon.org/view.resource.php?resourceID=004294