Evan Yamoto

Tag: Development

  • Homepage in 2020

    Homepage in 2020

    So, it’s 2020 and I still like to use a homepage. I don’t like to call it a portal either, but I think that term is actually newer.

    Since 1996, I used Yahoo!, Excite, back to Yahoo, Google’s homepage that was quickly de-commissioned, back to Yahoo and then just Chrome. But Chrome with some recent tab images was just lacking to me.

    So, I started making my own. Initially, I was going to have a simple page and work on styling to make it look like a futuristic UI that you see in movies. I looked into this for a bit, but then I remembered I do something similar for work where I build client sites to integrate with our system. It might’ve been fun, but I wouldn’t have learned anything new. So I stuck with an unstyled page for a little bit and used Yahoo’s APIs and query language, YQL. Of course, this was discontinued shortly after I got started.

    So I scrapped that project and built my site using Vue JS. It was the first time working with Vue and I really enjoyed it, despite the frustrations of working with something new. I picked it partly because React seemed like overkill for what I was doing and Vue seemed simpler and there was something I liked about it from the ‘hello world’ tutorials I read.

    Once I picked the framework, things came along pretty quickly. I made some services that would parse and display news feeds, weather and some articles from different APIs. And I made another service for XML/RSS feeds.

    I never figured out what to call it, so it’s just called a sub-domain called launcher.

    I have it pinned to Chrome so I start on a tab that:

    1. Uses the Unsplash API to rotate through some images I’ve saved.
    2. Uses a weather API to load weather for locations I’ve saved.
    3. Has links to sites I usually open in the morning.
    4. A Google search bar built into the page, that I’ve never ever used.

    Then, I have other tabs on the page that load content for things I’m interested in like finance, cars, sports, technology and more. Most are newsfeeds, but I made a stock tracker like my old Yahoo page and keep a maintenance log for my vehicles.

    It was all working great until the news API I use (NewsAPI) switched to a paid model, even for a site with hardly any use. So, I’ll have to convert my newsfeeds again, but for now I have a usable portal, I mean home page.

  • Aquarium of the Pacific – Theater

    After the success of the Glass Guild, we were immediately asked to create another page for the aquarium’s new theater. The theater was under construction as well and we found ourselves in a similar situation – a short time frame, limited resources and system complexity.

    However, the Glass Guild was much more abstract where as the theater is something that we’re all familiar with. The were asking patrons to sponsor seats and they would get a plaque with an inscription on the back of it.

    One of the issues with the imagery was that those only had a few 3D rendering of the theater and no model to take pictures of this time. However, they were farther along in construction. So as soon as the seats were installed, I was able to create an image of the theater seating that combined the 3D model and an actual photograph.

    I then made it work similar to the Glass Guild with each section a link that loads a seat map. The seat map was challenging to create because they labeled the rows and seats differently where the even numbered seats are on one side and the odd numbers are on the other side. And there’s some reserved seats, empty spaces, no row I, etc. which apparently are common things in theaters.

    But, I was able to figure something out and the project was also a success. And it looks pretty nice aside from all of the text. I suggested that the background image should be shrunk down and at least half of the text should be removed, but they wanted to keep it this way.

    Anyhow, if you’re in the area (again), you should make a trip to the aquarium. And if you’re feeling charitable, the Pacific Visions seating donation is still open.

    https://www.aquariumofpacific.org/pacificvisions/support/seat_campaign

  • Aquarium of the Pacific – Glass Guild

    One of the special projects that I worked on in early 2018 was a custom donation page for the Aquarium of the Pacific in Long Beach, CA. They were constructing a new building made from unique pieces of glass and had the idea to ask patrons to sponsor each panel.

    It was very exciting and it I felt good about trying to help out a good cause. However, I was given less than a month to put something together.

    The challenges were that we didn’t have many resource from the client and I also had to build this on top on our donation system as well as a seating system that accounts for locations an availability.

    When I first got wind of this assignment, my initial thought was to use what I thought were 3D renderings of the building (since it didn’t exist yet) and map each of the panels to a ‘seat’ in our system. Unfortunately, we weren’t able to get more renderings in time and being that I was working on everything myself from graphics (Photoshop), SVG vector mapping (Illustrator) and all of the coding, we didn’t have time to do this.

    So we were left with some 3D renderings, which actually turned out to be photographs of a model, and some architectural plans. I tried to present the nicer 3D images first and narrow the selection by section. And then we used the architectural drawings to try to visually map the panel to the buttons. It may not be as intuitive as selecting a panel on the 3D images, but again, we didn’t have all of these at the time and I wouldn’t have been able to draw and map 900 unique shapes to our ‘seats’.

    But overall, it came out pretty good considering the time constraints, limited resources and complexity of our systems. And most importantly, it was a success for the aquarium.

    I still haven’t made it up there to see the new building in person, but I hear it’s beautiful.

    So, if you’re in the area, it’s another thing to visit!

    https://www.aquariumofpacific.org/pacificvisions/support/glassguild

  • Building a Custom Select List

    I am a web developer for a small software company that provides ticketing for attractions, theme parks, zoos & aquariums, etc. For the past 5 years, I’ve made and contributed to some really great projects, but a lot of them are in our internal systems and I can’t write about these.

    However, some of the things I do are public facing on our client’s sites. And the one I want to write about today is a custom select list (or is it dropdown list) that I made and is used by Hershey’s Chocolate World.

    I was tasked to create a new dropdown list (or is it select list) that can show a variety of things based on a myriad of configurations. Previously, the system had a traditional dropdown list that stretched across the screen and many of the options were delimited by special characters, which wasn’t ideal.

    The problem with select lists is that there’s not much you can customize and they seem to be the control that’s the most dependent on the user’s browser and even operating system.

    I started by looking for libraries to do this, but I didn’t find one that would work for us. So I started designing the dropdown and didn’t think it would too hard to make a custom component to replace a browser built-in. If you’re ever thinking about doing this, don’t.

    Actually, I think the end result turned out pretty good, but there was so much work that went into making this control. I don’t remember all of the challenges we faced, but here are some of them off the top of my head:

    Is the list open, closed or pre-selected by default? When it’s open, how big is the list (when does it start scrolling)? What happens when the list is at the bottom of the page (will it get cut off)? When you have multiple instances on the page, does it keep one open at a time or can you open all of them (has to handle both cases). How does it handle indexing (does one appear on top of the other or other elements)? How will it be responsive and how will it work on the iPhone where it normally uses it’s custom scrolling wheel? And on and on.

    Not to mention that it handles a complicated scheduling algorithm that tries to fit each of the options into a schedule and displays these on a visual timeline.

    Here’s a screencast of it in use today. The video is a little choppy, but the actual experience is very smooth.

    It was a lot more effort than any of realized, but it’s been used pretty extensively for the past few years without any know issues. And in fact, our company won an award for handling this complicated scheduling system at the largest convention for attractions (IAAPA).

    Also, Hershey’s has told us that their lines are so much shorter (pre-COVID) and have processed many more sales compared to their previous system. So, it’s nice to be able to show something I worked on that’s being used by the public and has been received so well.

    And if you’re ever thinking about making a trip to Hershey, PA, I hear it’s a great place to visit!

    https://tickets.hersheys.com/

    https://www.hersheys.com/chocolateworld/en_us/home.html

  • Rebooting – Part 2

    Rebooting – Part 2

    It’s been nearly a year since I relaunched my personal website and I’m still back-filling blog posts. I haven’t spent as much time on it as I’d like to, but I’m pretty happy with how the WordPress API has worked out. When I started working on my site and the API was in beta, there wasn’t a whole lot of documentation or examples on how to use it. But I realize that APIs exist so you can do whatever you want and it’s really up to you to figure out how you want to use them.

    As always, I would’ve done some things differently if I were doing it now. The single function that handles the URL parameters and does an AJAX post to get the data works well, but I probably should use a JavaScript templating engine like instead of building HTML strings to display the posts. It’d be easy enough to convert it now, but I don’t know if it’s worth the time and also the resources of including another JS library like Mustache. I also would’ve started by using ESLint to format my JavaScript consistently. Again, this is something I could easily do now and fix whatever it doesn’t like with my code.

    But overall, I’m still pleased with how it’s working and the overall design. I just need to catch up on posts so I can write some in the present for once.  Hopefully I’ll get some time over the holidays.

  • Rebooting

    It’s almost 2017 and it’s time to start over again.  I made my last profile site in 2010 and I stuck with my blog for a little bit, but I made it too hard to update and stopped posting after awhile.  I thought it would be easy enough, but that was before I was married and had two kids!

    I’ve also always gone back and forth on if I should I have a professional site, a personal site or a mixture of both.  This time around, I’ve decided to keep my main site career focused and my blog will mostly be a place to log some of the things I’ve made with some personal things sprinkled in here and there.

    I try to work on personal projects to learn new things and improve my technical skills.  I originally had plans to write a whole blog platform from the ground up.  Since I’ve been working the Microsoft stack lately, I thought I would design a SQL Server database and use ASP.Net MVC to build an administration interface and front-end.

    However, I had some new ideas to work on other projects that will take what little free time I have to learn more new stuff, so I had to revise this plan.  My new site is pure HTML and Javascript and I decided to use WordPress for my blog.  But instead of just modifying a theme, I decided to use the WordPress REST API (Version 2, currently beta 15).  I will write some details when it’s all complete, but for the most part, my blog is a single html page that does AJAX calls to get JSON data and I use jQuery to iterate the data and display the content.

    I’m going to finish up my site, hopefully add some new content and backfill my blog with my old posts.  We’ll see how this version goes but I feel pretty optimistic this time.

  • Amazon vs Microsoft on Apple

    Earlier this year, I was updating my iPad and saw this:

    Amazon updates

    So, Amazon is making the world a better place?  I can’t argue with that.  Amazon Prime is amazing.  I don’t even use the movies, music streaming, free books or other included services, but the products and 2-day shipping are priceless.  Ok, maybe $1oo/year if Amazon is reading this.

    My wife “looks” on Amazon every night and says she doesn’t buy anything, but somehow packages show up at our house every day.

    On a side note, Microsoft’s Office products are surprisingly good on the iPad, but the updates are also pretty ridiculous.  Each product has a 400+ MB update of bug fixes and it seems to happen quite a bit.