Material Design Corgis (and some other housekeeping items)
I finally finished the newest version of my website — I had it up before, but it didn’t have any projects on it. For the last nine months or so I’ve been doing web development at work, and more than a few people told me that to be taken seriously “web world” (web world…what a terrifying term. It even has spiders), I would need some sort of portfolio. Basic websites are fine, they said, but there needs to be at least one project that makes actual REST API calls.
And that’s when I discovered…wait for it *drum roll*
…the Dog API!
This github has been starred 333 times and has served over 398 GB worth of open source dogs. Clearly some people understand its infinite potential, but I wanted to taste it for myself. So I invented my own website called “Corgi Pomodoro,” which pulled random corgi images every 5 and 25 minutes. Instead of ringing like a normal timer, it makes the browser bark.
And that’s pretty much it. I could conclude the post right there and it would be worth it. With just 200 or so lines of JavaScript, I morphed the pomodoro technique from a boring psych concept into a boring psych concept with corgis.
A few glowing testimonials after the initial launch:
Mom: I don’t get it
Dad: All I see is a picture of a corgi
A friend: Why?
I already knew the JavaScript side of it was perfect — again, it retrieves corgis via fetch commands — but what if I could make a better frontend for it?
Material Design (or “what makes a website look nice?”)
Above is a website I made with Vuetify called “Faketreon,” which was designed as a client-side mockup of Patreon (if it had a server side, people might seriously question if it was a phishing site. Also, it was hosted on Github pages). Notice it looks modern; CorgiPomodoro didn’t.
First I created a private github projected called CorgiPomodoroVue, which is probably never going to see the light of day. I thought I’d use Vuetify to get Material Design, which I think is a little bit like buying a gaming laptop in order to check your email. Vue has its own way of interacting with the DOM, so I would have needed a serious refactor.
I don’t know if there’s a very strict definition of what makes a website Material Design, but it’s fairly easy to pull into a project. So I remade some of the CorgiPomodoro tags with Material Design tags. I added a Material Design header. I used Material Design icons. I used Material Design fonts. It was, strictly speaking, Material Design…but in the end it still looked really old and out of date.
I decided to finish the portfolio website anyway, and while I was at it I had to repair a broken image link in Faketreon.
Constructing a Portfolio
See the links at the top of this page? If you click them, they scroll down to other parts of the page. It sounds really simple, and it is, but I appreciate that Bootstrap does that kind of thing for you.
I know that some people, like this guy, say that Bootstrap isn’t a skill.
Newsflash to all you kiddies out there: Bootstrap isn’t a language that you know. It is not a skill that you have acquired. In fact, if you feel that Bootstrap is a noteworthy “skill” to have, it’s going to make me question the actual depth of your knowledge of front-end development. Bootstrap is a tool to use and don’t get me wrong, it has it’s uses.
Honestly, the writing above kind of annoys me. I mean, look at that last sentence. Its is a possessive. It’s is a contraction. His opinion is invalid.
Okay, but in all seriousness…
He has a point. Anyone who sees a site like mine could spot signs that it’s just the Twitter Bootstrap template from a mile away. I would argue that Bootstrap can be impressive if you combine it with other tools, and in fact I was recently very impressed with what the Elk Grove Kiwanis club did with Bootstrap. But I was following a template.
One way people recommended you could use a web template was by adding your own flavor. I pulled a Bootstrap grid into my site from…wait for it…another Bootstrap example page. I included my writing website, which was also Bootstrap and originally hosted on the UC Davis network (funny story, I excitedly told everyone on the CS page about it and said to use chmod 777 to make it visible. Some guy who was also in the network changed the index.html into a blank page that just said “hacked” on it, then made fun of me for thinking chmod 777 was a good idea). I included Corgi Pomdoro, this time technically in Material Design. I also talked about my work projects, which I am not allowed to provide source code for. This is unfortunate, as those are probably the most interesting.
So how did Material Design Corgi turn out?
…not great.
Look at all the things I tried to do with this. There are six buttons at the top, each one more pointless than the last, and the bookmark one goes to the Etsy page for bookmarks while the heart one goes to #corgi under Instagram. One of the links at the bottom goes to a completely original poem I wrote called “Golden Fields of Corgis,” which uses CorgiCon as a backdrop with which to distract from the poem’s deeper meaning about how the spirit of San Francisco slowly eroded over time.
Or at least that’s what I hope SparkNotes says, after I win the Nobel Prize for having written it.
Other web stuff
Hey, guess what? Our Kiwanis site’s webpage has been down, and we decided to use Wix! The president and I have been working on it
When I first heard about it, my initial thought was that I would code something myself in Vue, then win an award from the club and get a raise at work for some related reason. Diving into other Kiwanis websites and asking them about their technology was actually kind of interesting.
Most clubs use Portalbuzz. A fair number use Wordpress. But there are clubs that just do the work themselves in a framework like Bootstrap.
And how maintainable would that be?
There’s a reason Wix and Squarespace are so popular. To compete with them you’d have to create some sort of website builder, not just a template that people who know a little bit of HTML use. You can use Wix without knowing anything about coding, and that’s not a bad thing in any world except the one where you have to try to show off how unique and impressive you are because you know about Node.js, Vue.js, js.js, and JavaScript as a Service.
So Bootstrap is interesting. When I first told people in college that I made a website in Bootstrap, they commented on how easy it was. I took it as an insult, but actually it could have been interpreted as a compliment to the framework. Bootstrap is relatively easy to use.
This is the same reason people are jumping on the Vue.js train.
In an ideal world, web development wouldn’t be some mysterious thing that only geniuses and Firefox could understand. But there’s just so much of it. And even some of the most famous JavaScript developers in the world have said they wish we could just pull the plug on the whole thing and rewrite it from scratch.
Interestingly, this is also the same problem we have in every other programming language.
Closing Thoughts
Every programmer and their podcast talks about the importance of building your brand, but what exactly does that mean? We have skills, like web development, maybe C++, maybe web development in C++ if you’re some sort of insane mad scientist who wants to looks death in the face and defy it. We all want to be unique and special, and that’s fine, but the obsession with “rockstar programmers” may be taking away from the heart of collaboration.
We have tons and tons of open source projects. These are communities. Maybe they’re headed by rockstars, and maybe geniuses built the frameworks, but the process of doing the tedious work, the thorough work, and the meticulous debugging is where the community shines. Truly unique people, then, are not those with technical skill alone but those with the vision to unify a community under its flag.
And I made my first open source contribution today! Four lines of a markdown. It was supposed to be my “opening play,” to get their attention (Jira issue closed, pull request merged!), but I do really, really hope my contributions to them don’t begin and end there.
Open source is probably one of the best things we have, and the best model with which to move forward. As cliche as it sounds, and is, I hope I can serve the community in some way.
