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 my response time by 97.5%. 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