This content originally appeared on DEV Community and was authored by 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 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:
- 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
This content originally appeared on DEV Community and was authored by Jesse Chong
Jesse Chong | Sciencx (2024-10-23T00:23:29+00:00) Cross-Posting and Portfolio Project Update: Optimizing API Calls and Implementing Best Practices. Retrieved from https://www.scien.cx/2024/10/23/cross-posting-and-portfolio-project-update-optimizing-api-calls-and-implementing-best-practices/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.