Intro to Creating This Site
The Why and How of creating this site.
Why
I am creating this site as a way to practice and learn about creating web maps. I have been creating static maps for environmental documents for over 10 years. But recently at work I have had the opportunity to start creating web maps. Most of what I do is take templates set up by developers and change specific parts. It is all run in JavaScript and up unitl a year ago I knew very little about JavaScript. But I found it both fun and frustrating. The fun part was how much easier it made sharing spatial data internally and with clients. The frustrating part was how little I knew about JavaScript and that I couldn't fix any errors I made. But I wanted to learn more.
How to learn more though? I have tried learning more about web programming through things like FreeCodeCamp.org but I was never unable to keep my motivation. The focus was also always on writing HMTL and CSS, which is very useful but nothing on how to get what I wrote hosted on a site. While on paternity leave I decided it was time to get serious about this. I would watch/take care of/play with the baby before lunch while my wife had free time, and then after lunch I would have my free time. I would take my free time to learn JavaScript and web programming. I started by using LinkedIn Learning and tutorials from ESRI on ArcGIS API for JavaScript. But what I was able to learn JavaScript and ArcGIS JavaScript API everything was still on my local. So how to get things off of my local and onto the internet.
I spent a fair amount of time Googleing around and looking at the different options for creating a website, and taking some classes on LinkedIn Learning. I did create a WordPress.com account because I thought it would be the easiest way. I mean I know about css but I wanted my focus to be on the JavaScript and web mapping not how well styled I could make a site. I wanted a template to work from and WordPress has hosting too. So it would be easy. I found though that something that makes WordPress so easy to use is it really feels like it doesn't want you to code and it looked like I needed to buy plugins to be able to use the JavaScript I needed to use. I got frustrated. I tried dabling in WordPress.org but it still felt like they really didn't want you messing around in the actual CSS or adding JavaScript. So I needed something else. Especially since I was making good progress with my web map that I had on my local. I wanted to get it up to show that I could create a web map. And I wanted to do it fast as my paternity leave was ending and my data was pertinent to the 2020 election.
So what did I do? How did I get my Alameda County COVID percentage and ballot drop box locations up? I used Google Cloud. Why Google Cloud over AWS? Honestly, my wife works at Google (not as a programmer) so paying them seemed like the way to go. I needed to host a static site on Google Cloud, as all I really needed to do was put my HTML, CSS, and JavaScript on a server. I purchased my domain through Google Domains, again because it was the easiest option. And once I had my domain I followed the instructions on this tutorial to get my site on line.
Now I had a site showing that I could do some of this. But it wasn't something I wanted to keep up forever since it was very focused on a specific time period. It was costing my about 86 cents a day to host too and that would add up over a year. I felt I needed something else. A place where I could display not just this site but other sites I wanted to experiment with. Basically I got a taste for creating a web map and I wanted to do more. But how?
How
This took me longer to figure out than I had hoped. In retrospect it probably should not have. I felt I needed to learn more about web design; specifically CSS and JavaScript. So I went back to LinkedIn Learning courses. I did learn more, but I still felt that I didn't want or need to become a CSS expert to get site up. I mean why can't I just find a template that I can get into and tweak the code. I feel I learn best that way anyway. Tutorials can only do so much I need to actually play with the code. And now that I had a base understanding of CSS and how to use developer tools in a browser I figured I could do that. But how does one find a template.
I looked at things like Gatsby and Jekyll and they look cool. And like something I want to learn. But I'm not sure if that is where I want to go to start. I mean all I really want is some CSS that is written so I can plug in my own HTML and JavaScript. Plus I didn't really know the languages of those two and being impatient I wanted to get a site up.
So I watched a FreeCodeCamp.org video on how to put a website online. In the first 10 minutes it showed me TEMPLATED.co which has hundreds of CSS and full site templates. After being paralayzed by choice I picked a full responsive site template called spatial. I have to admit I was drawn to the name. The fun part about these templates is that you download them and then go to work. When using the fully responsive templates it looks like you get not just the CSS and HTML for a landing page but a second generic page and then an elements page that shows you all the different elements and how they look.
Great! Now I have a starting template. But I don't want to use just that I want to personalize it a bit. So I went to site I wrote down from my LinkedIn Learning classes to find some colors that I liked. It is called coolors.co. It really is a mesmerizing site as I could spend hours there just cycling through different color palettes. At this point I had colors I liked and a template. So it was time to start building things out. That meant using the CSS and developer tools to figure out what I needed to target in the CSS and HTML to change what I wanted to change.The next steps would be getting it up online and working on creating some maps to play with.