Jesse Chong
🌟 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:
- 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.
- 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
