DEV Community: Thomas Gilmore

Attending My First AWS Summit in New York

Thomas Gilmore — Wed, 13 Jul 2022 21:04:37 +0000

This was my first time attending an AWS Summit and I highly recommend going if you have never been to one. It was extremely informative and it was great way to meeting new people as well.

Some of the things that the AWS Summit offered was breakout sessions, customer lighting talks, workshops, chalk talks, partner theater sessions, jam lounge, dev lounge, AWS Training and Certification self-paced labs and AWS Spotlight Labs, AWS DeepRacer League, the Expo, networking reception, and an AWS All Builders Welcome Lounge just to mention a few of the things.

It was great for all people who are interested in the cloud especially learning more about AWS and what they could offer to you. I attended as many of the events I could have during the summit. The presenters and the amazing people who work at AWS who help put this event on are extremely knowledgeable and friendly. They are willing to answer any questions you may have about the presentation or any other AWS topic you may have.

The topics I learned about that I'm extremely excited to even learn more about and play around with is AWS Amplify Studio and Amazon S3 Intelligent-Tiering storage class. AWS Amplify Studio is where you can build react components using Figma. You can build a design using Figma and when you are done you can save your file and make a pull request to make a react component. Amazon S3 Intelligent-Tiering storage class can automatically save you money by optimizing storage costs based on access patterns of your S3 objects. You set up a time frame of when your objects change storage tier after a set amount of days. Then it will change to another tier that will be cheaper to store that data going forward, saving you money.

I also attended an AWS Customer Council Meet & Greet afterward the summit. It was great to meet some more AWS employees and other AWS customers to hear what they do and how they use AWS.

I’m excited to attend my next summit.

Netflix Clone Version 2 - React & TMDb

Thomas Gilmore — Mon, 26 Jul 2021 15:52:37 +0000

I recreated the Netflix Clone I created from the following post, where I used The Movie Database (TMDb) to fetch the movie images and posters to populate the Netflix Clone.

Netflix Clone Using React and TMDb

Thomas Gilmore ・ Jul 13 '21

#react #webdev #javascript #api

I created a version 2 of the Netflix Clone because the first version was running slow. I received feedback to use Web.dev Measure to see how well the first version performance was and that's where I found out it was loading much more data than it needed to.

One of the bigger differences from version 1 to version 2 was that in version 1 I was using React Class Components and in version 2 I switched to React Functional Components.

In version 1 I was using ajax calls to fetch the api information. In version 2 I updated the calls to use axios to fetch the api to help the performance. Even though this step did not help a huge amount in performance, it did cut down the amount of javascript code that is needed to make the api calls compared to using ajax.

I also used React Lazy Load Image Component as all the movie and tv show images. This helps with performance because if the image is not in the window view the image does not get loaded so a lot less data needs to load to view the page and this helps on the performance a lot.

Loadable Components is also used in version 2. Loadable lets the Netflix Clone to render a dynamic import as a regular component so the component will be loaded in a separate bundle also improving the Netflix Clone performance.

I have learned a lot from recreating the Netflix Clone and also from the helpful feedback I have received. If you have any other feedback I would really appreciate it. I think it's a great way of learning and seeing someone else's perspective of something.

LINK: https://gilmore-netflix-clone-version-2.netlify.app

Netflix Clone Using React and TMDb

Thomas Gilmore — Tue, 13 Jul 2021 14:26:00 +0000

I created a Netflix Clone using React and The Movie Database (TMDb).

The Movie Database API was used to fetch the movie images and posters to populate the Netflix Clone. So the images of the movies will change from time to time when viewing the link based off of what is returned from fetching the api.

LINK: https://gilmore-netflix-clone.netlify.app/

Netflix Clone Version 2

I'm going to make a version 2 of the Netflix Clone to update on how I make the API calls and also add lazy loading. These look like they are the reasons on why it takes so long to load. The current version uses chained ajax calls. I'm planning on using axios in version 2 and hopefully that will help the page load faster.

If you have any other suggestions that you think I should make to the Netflix Clone please let me know.

Netflix Clone Version 2

Netflix Clone Version 2 - React & TMDb

Thomas Gilmore ・ Jul 26 '21

#react #webdev #javascript #api

Creating a Wine Recommendation Application using React

Thomas Gilmore — Tue, 23 Mar 2021 14:46:45 +0000

So I started by looking first for an API I could use for any project idea and I stumbled upon Spoonacular API, [https://spoonacular.com/food-api]. This API has many different end points that could be used for different projects. (*Possibly more projects to come using this API). However for this project, I used two of their end points.

I used their “Get Dish Pairing for Wine” end point where you type in a type of wine (ex. Malbec, Pinot Grigio, Rose Wine, … etc) and the API will return a couple of different dishes that would pair nicely with that wine. The second end point I used was “Get Wine Pairing” where you type in a dish name (“steak”), or an ingredient name (“salmon”), or a cuisine (“Italian”) and it will return a couple of different wines that would go well with that food given.

So I created an input field where you get the value of what was typed into the input field. Then I added that value to the url of the end of both of the end points. Each one is an AJAX call in their own component. I then put both components into a ternary operator. Whichever one returns JSON info that is not an error becomes the data that is shown on the web page because I created variables looking for certain info in the JSON that are not errors. So the one that returns info that is able to populate the variables then that gets passed down into another component that is responsible for creating a paragraph element with the JSON information. Finally the app re-renders and populates the info on the web page for the viewers to see.