mezeitamas / brokenrobot.xyz

Personal website of Tamas Mezei

brokenrobot.xyz

This is the code repository for my personal website. The website is built with Astro using TypeScript and TailwindCSS.

🚀 Installation and usage

To install and run the project, please follow these steps:

• Clone the repository to your local machine using git clone [email protected]:mezeitamas/brokenrobot.xyz.git
• Install dependencies by executing npm install
• Start the development server by running npm start

💻 Technologies used

The website was built using the following technologies:

• Astro
• TypeScript
• TailwindCSS

📄 License

Website's source code

The website's source code is available under the MIT license, see the LICENSE-website file for more details.

Blog posts

The blog posts are copyrigthed, see the LICENSE-blog-posts file for more details.

brokenrobot.xyz's Issues

Add auditing with Lighthouse

Auditing the website with Lighthouse can help identify potential performance and accessibility issues, and provide recommendations for improvement. This can help enhance user experience, increase website traffic, and ultimately improve the overall success of the website.

Useful links

• https://developer.chrome.com/docs/lighthouse/overview/
• https://github.com/GoogleChrome/lighthouse

Improve security by adding HTTP headers

The following HTTP headers needs to be added to enhance security:

• Strict-Transport-Security is an excellent feature to support on your site and strengthens your implementation of TLS by getting the User Agent to enforce the use of HTTPS. Recommended value "Strict-Transport-Security: max-age=31536000; includeSubDomains".
• Content-Security-Policy is an effective measure to protect your site from XSS attacks. By whitelisting sources of approved content, you can prevent the browser from loading malicious assets.
• X-Frame-Options tells the browser whether you want to allow your site to be framed or not. By preventing a browser from framing your site you can defend against attacks like clickjacking.
• X-Content-Type-Options stops a browser from trying to MIME-sniff the content type and forces it to stick with the declared content-type. The only valid value for this header is "X-Content-Type-Options: nosniff".
• Referrer Policy is a new header that allows a site to control how much information the browser includes with navigations away from a document and should be set by all sites.
• Permissions-Policy is a new header that allows a site to control which features and APIs can be used in the browser.

Useful links

• https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
• https://web.dev/csp/
• https://securityheaders.com/
• Gatsby
  • https://www.gatsbyjs.com/plugins/gatsby-plugin-csp/

Add Playwright snapshot test

Useful links

• https://playwright.dev/docs/test-snapshots

Update the Content-Security-Policy HTTP header

The Content-Security-Policy HTTP headers needs to be more strict.

Useful links

• https://web.dev/articles/strict-csp
• https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP
• https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy

Add dark mode

Adding dark mode to the website offers benefits such as enhanced user experience, improved accessibility, personalization options, energy efficiency and modern design appeal. It provides a visually appealing and comfortable experience, reduces eye strain, and allows users to customize their browsing experience.

Useful links

• TailwindCSS
  • https://tailwindcss.com/docs/dark-mode

Add e2e tests

E2e testing is important for ensuring that all parts of the website work together as expected, providing a more comprehensive test than unit testing alone. It can help catch bugs and issues that may not be caught through other forms of testing.

Add GitHub-style hover links to headers in posts

Adding hover links to headers in posts helps to link directly one section of a post.

Useful links

• Gatsby
  • https://www.gatsbyjs.com/plugins/gatsby-remark-autolink-headers/

Add offline capabilities

Adding offline capabilities to a website can improve the user experience by allowing visitors to access the website and its content even when they are not connected to the internet.

Useful links

• https://developer.chrome.com/docs/workbox/
• Gatsby
  • https://www.gatsbyjs.com/plugins/gatsby-plugin-offline/

Add icons

Adding icons to the website offers benefits such as visual enhancement, improved user experience, increased usability, cross-cultural communication and branding opportunities. Icons enhance the aesthetics, aid in navigation, reduce cognitive load, and create a consistent and visually engaging user experience.

Useful links

• Icon sets
  • Feather icons
  • Simple and Minimal Line Icons
  • React Icons

Add GitHub Actions manual trigger

In certain situations would be nice to trigger a GitHub Actions Workflow manually. For example when it is misconfigured and only runs on ready_for_review. :)

Event: workflow_dispatch

Useful links

• Manually running a workflow

Add RSS feeds

Adding RSS feeds to a website has a number of benefits. It allows users to subscribe to updates and receive them in a their favourite RSS reader application without having to constantly check the website for new content.

Useful links

• https://rss.com/blog/how-do-rss-feeds-work/
• Gatsby
  • https://www.gatsbyjs.com/docs/how-to/adding-common-features/adding-an-rss-feed/
  • https://www.gatsbyjs.com/plugins/gatsby-plugin-feed/

Improve responsive design

At the moment the website is "mobile first" and the main focus is on mobile devies only. However the site is working on tablets and desktop computers as well, but it does not look great. This needs to be improved.

Improve SEO

SEO optimization is crucial for websites because it helps search engines to understand the content of the site and helps to give relevant search results to the user.

Useful links

• Canonical URL
  • https://developers.google.com/search/docs/crawling-indexing/canonicalization?hl=en
• robots
  • https://developers.google.com/search/docs/crawling-indexing/robots-meta-tag
• og
  • https://ogp.me/
• twitter
  • https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup
• Rich Results
  • https://github.com/google/schema-dts
  • https://search.google.com/test/rich-results
• Gatsby
  • https://www.gatsbyjs.com/docs/how-to/adding-common-features/adding-seo-component/
• Testing
  • https://www.gatsbyjs.com/docs/how-to/performance/audit-with-lighthouse/

Improve navigation by adding breadcrumbs

Breadcrumbs provide a secondary navigation aid that shows the location of the user on the website. This allows users to easily understand their position within the website's hierarchy and navigate to other pages within the same category or parent section.

Improve accessibility

It is important to make a website accessible because everyone, regardless of their abilities or disabilities, should have equal access to the information and services provided by the website. So we need to make sure that everyone can navigate and interact with websites using assistive technologies, such as screen readers or keyboard navigation. Accessibility also benefits everyone, becaue it can provide an alternative way to access content.

Useful links

• https://www.w3.org/WAI/fundamentals/accessibility-intro/
• https://www.a11yproject.com/
• https://web.dev/accessible/
• ESLint
  • https://github.com/evcohen/eslint-plugin-jsx-a11y
• React
  • https://legacy.reactjs.org/docs/accessibility.html
  • https://react-spectrum.adobe.com/react-aria/
• Gatsby
  • https://www.gatsbyjs.com/docs/conceptual/making-your-site-accessible/
• Testing
  • https://www.24a11y.com/2017/writing-automated-tests-accessibility/

Add CI pipeline

Continuous integration (CI) is the practice of automating the integration of code changes from multiple contributors into a single software project.

It is important for several reasons:

• It enables automated testing of code changes, ensuring that new code does not introduce any bugs or regressions. This can save time and effort in the long run by catching issues early and preventing them from becoming more serious.
• It helps to ensure that code changes are consistently built and deployed in a reproducible way. This can improve the stability and reliability of the application, as well as making it easier to deploy new features or bug fixes.
• It can provide transparency, makes it visible the status of code changes, allowing developers to quickly identify and fix any issues that may arise. This can help to increase collaboration and communication within a team, and lead to a more efficient and productive development process.

Useful links

• Articles
  • https://martinfowler.com/articles/continuousIntegration.html
  • https://aws.amazon.com/devops/continuous-integration/
  • https://www.atlassian.com/continuous-delivery/continuous-integration
• GitHub Actions
  • https://github.com/features/actions
  • https://github.com/actions/checkout
  • https://github.com/actions/setup-node
  • https://github.com/actions/cache

Add unit tests

Unit testing is essential in software development, it involves testing individual units or components of a system to ensure that they function correctly and meet the requirements. It helps to discover bugs early in the development process, which saves time and resources in the long run. Unit tests also help to ensure that code changes do not introduce new bugs or break existing functionality, which is particularly important in large and complex systems.

Useful links

• Gatsby
  • https://www.gatsbyjs.com/docs/how-to/testing/unit-testing/
  • https://www.gatsbyjs.com/docs/how-to/testing/testing-react-components/

Update GitHub Actions action templates

The following action templates needs to be updated due to deprecation:

• actions/checkout@v3
• actions/setup-node@v3
• actions/download-artifact@v3
• actions/upload-artifact@v3