Cross-Posting and Portfolio Project Update: Optimizing API Calls and Implementing Best Practices

🌟 Excited to Share My Recent Work!

Though I’ve been a bit inactive lately due to personal reasons, I want to take a moment to showcase some recent updates I made to my portfolio website a few weeks ago. In particular, I focused on tackling the lag times for API calls, which were exceeding 30 seconds, and enhancing my site by adding a demo video to better showcase my app.

I’m excited to share the lessons I learned and the solutions I implemented to improve performance and security, all while using some fantastic tools like Netlify!

🔍 Project Update Overview:

I discovered that Netlify Functions is a serverless function feature offered by Netlify that hosts your API calls, significantly reducing response times. The Netlify CLI was also incredibly helpful in allowing me to test my code within Netlify’s configuration before committing and pushing changes to my repository.

🛠️ New Technologies Added:

• Netlify Functions
• Netlify CLI

🗝️ Key Updates:

1. Lag-free API calls: By utilizing Netlify Functions, I was able to reduce API response times to nearly zero — and it’s free, as long as the API calls aren’t made too frequently.
2. Portfolio App Demo Video: I also added a video demo to showcase my app in action, making the portfolio much more interactive and engaging.

💡 Challenges & Solutions:

Challenge 1: Implementing Netlify Functions Correctly

Since I wasn’t familiar with Yarn’s environment, integrating it with Netlify was a bit tricky.

Solution:

• I deleted the _redirects file and moved its contents to netlify.toml.
• I also added command = “yarn build” and publish = “build” to the configuration, as I’m using Yarn.

Challenge 2: Adding a Video to My Portfolio

Adding a video to my portfolio website seemed straightforward but caused issues due to a common security risk: using target=”_blank” without the rel=”noreferrer” attribute.

Solution: To mitigate the security risk:

• I added the rel=”noopener noreferrer” attribute to my anchor tags (<a>). This ensures protection against reverse tabnabbing attacks and enhances privacy by preventing browsers from sending the HTTP referrer header.

🛠️ Security Best Practices:

• rel=”noopener”: Protects against reverse tabnabbing and runs the new page in a separate process.
• rel=”noreferrer”: Hides the referrer header for privacy and security purposes.

🚀 What I Learned:

• Always explore all the features and tools a product or service offers (whether it’s APIs or cloud hosting) to ensure they meet your project’s needs.
• If a product offers a testing environment and a CLI tool, it’s often worth learning — these can significantly speed up development.
• It’s critical to stay informed on best practices for security to protect against common vulnerabilities and attacks.

🌟 Reflection:

When working with new technology, take the time to experiment with features you think you might need now or in the future. It’ll make development smoother and help future-proof your projects.

🔗 Check Out the Repo portfolio website: https://github.com/Jesse-Chong/react-tailwindcss-portfolio-website

🔗 Check Out the Repo for cross post: https://github.com/Jesse-Chong/Cross-post-server

Thank you for reading! I’d love to hear your thoughts.

Originally published at Medium