I live in Bend, Oregon. I woke up with the dumbest idea ever that there should be a little food truck map website and it should be called Vend, Oregon. It’s not my finest idea, but hey, I’m full of those. Fortunately, we don’t have to spend all day on this.
1) Figure out what’s going to go on this dumb little website
Fortunately, all the hard work was already done. One of our local rags already created a list of them. They allude to a map multiple times, but it’s hard to dig it up. In searching around a bit, I found this which does have an embedded Google Map.
Perhaps this can be useful then! Let’s blow up this map and embed it properly!
2) Make the dumb site
Fortunately, Google Maps are embeddable. Let’s just slap their embed code in an HTML document:
<body>
<iframe src="https://www.google.com/maps/d/embed?mid=1bg2tr60F_w395jAY-WW8JGbwSCM" width="640" height="480"></iframe>
</body>And have it cover the entire page:
html, body {
margin: 0;
height: 100%;
overflow: hidden;
}
iframe {
postion: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}Let’s use CodePen Projects for this, as that’ll get us another step closer to having this live.
3) Buy the dumb domain name
This is the point where you really start to question the idea. But, go ahead and pull the trigger anyway. The internet needs you.
4) It’s dumb, but it it might as well be HTTPS
One big reason to use CloudFlare is you get HTTPS even on their free plan. Might as well take advantage of that. This means pointing the nameservers from your domain registrar over to CloudFlare.
5) Deploy the CodePen Project
You can deploy the site right out of CodePen Projects.
Note that you get some IP addresses there. Add those as A Records right in CloudFlare and you’re done!
6) Bask in your dumb idea
Swear to god, 10 minutes from start to finish.
I find often the biggest part of any dumb project is not the build but the marketing. Getting visitors to use my dumb projects is usually twice the work of the build, but admittedly I am a better developer than a marketer.
Why would you want to advertize your dumb website in the first place? Why do you care if people use it? :)
Small point, the www version of the site has a 401 error instead of redirecting: https://www.vendoregon.com/
I guess you’d fix that at either the domain registrant level or the DNS level I guess. I don’t even know. I’ve never linked to it that way nor do I ever type that in. Does it matter because some people’s fingers just type that out of habit? Or is there some other exotic reason why it matters?
Lots of people are using W’s, especially when URL is spread by word-of-mouth
In case anyone is interested you can use a Page Rule in Cloudflare to redirect the www to non-www. The rule would be:
URL Match: http://www.vendoregon.com/*
Forwarding URL (301): https://vendoregon.com/$1
@Chris if you say the URL in conversation i.e. “check out my new site vendororegon.com” some people, could est as high as a 1/3 of people, might type in the added www and get the wrong URL. IMO one of the reason you get a .com URL is so you don’t have to correct people frequently by saying “no it’s .net”, without the www you’re basically setting yourself up for “but it’s just vendororegon.com, don’t type the www part……no it is a .com URL the redirect just isn’t setup”
I don’t know the figures but I typed it out of habit. If you just enter a site name in most browsers as well, like ‘amazon’, ‘google’ or ‘apple’, and hit Ctrl + Enter it fills out the www. and the .com for you. I guess that every URL, unless otherwise stated, starting with www. is just so common that people leave it out when talking about URLs assuming people will just add it on.
Besides, it’s so simple to have a redirect that I’m not sure why you just wouldn’t put it in place
So far we got
and
and
But no actual data. I’m not a fan of making up data or personal anecdotes to make tech choices. But in this case, having the www FAIL does seem kinda bad and redirecting it might as well be done. This is how it can be fixed at the CloudFlare level:
And here’s an interesting counterpoint for going the other direction:
https://www.yes-www.org/why-use-www/
Making decisions on logic vs data sometimes is more useful when the answer is clear. It’s common sense that the more variables in a correct domain name spelling would allow for more room for error, i’m sure csstricks.com without the hyphen gets a lot of traffic. It doesn’t seem at all worthwhile to presume that people on an average distribution would ignore the www most of the time. I’d account for obvious human errors that can be easily addressed like that one without question.
Not data exactly and I don’t know how many people use this feature (I do from time to time), but firefox has a shortcut that allows to type a word on the browser bar and hit ctrl+enter and the browser autocomplete with: www + word_typed + .com
This is how I usually realize that I forget to make the redirection on dumb projects.
Fantastic post. Great to see how quickly (and easily) a simple idea can be turned into a public web site.
Dumb question, but why the Cloudflare step at all? Can you not tack your domain to a Codepen project directly and deploy from there? Or was it just for the HTTPS? If so, isn’t Codepen HTTPS? Are deployed Codepen projects not HTTPS?
Deployed projects from CodePen are HTTPS (the URL we give you), but when you map your own domain to it, then you gotta bring your own.
I wasted so many domain names on these “dumb” ideas… :D
But how does one go about making the custom google map with all the desired points?
By using Google MyMaps.
Google has a custom map making utility.
https://www.google.com/maps/about/mymaps/
It looks like the map had already been created by another organization and Chris just copied the iframe to his own website to make it easier to get to (the original map is hidden at the bottom of an article for one of Bend’s local news outlets).
I do know that issue. The biggest problem is NOT the marketing, but getting over the point of self-indulgement (like: oh, lets do this right THIS time and add proper PHP class structure .. ). Its how I finally managed to create a simple flat file-based (for now) Micro-CMS. No class coding orgy, just a bunch of functions, most stuff going on in templates and then, whenever one creates the same structure at least three times, you turn it into a function. Most of the sanitization and validation stuff borrowed from other BIG project, like WordPress and Drupal.
Now I’ve just have to finish fumbling around with the Mixcloud API (I’m building a new site for my own web radio show; twas long over-due, didnt have a proper one for more than two years) .. and all is done.
cu, w0lf.
Thanks for the inspiration to give this a try. For my dumb-idea-to-website, I built a site that queries for available/unavailable WordPress plugin slugs in bulk…well, 5 at a time. It helps you find available slugs, so you’re less likely to submit a plugin to the repo and get stuck with a less than desirable slug because someone already has the one you were hoping for. It’s at https://wpslugfinder.com