Learn using Shoulder.dev
Shoulder.dev transforms codebases into tailored learning experiences. Below are organized categories of the codebase to help you start with your initial focus.
Website Structure and Architecture
Understanding the overall structure of the website, including how pages are organized and how content is displayed. This includes navigation, layout, and the relationship between different components.
Learning how the website is built using Gatsby.js, a popular React-based static site generator. Understanding the concepts of pages, components, GraphQL queries, and the build process is essential.
Gaining familiarity with the React components used throughout the website. Understanding how components are structured, how they interact with each other, and how data is passed between them is crucial.
Exploring how Markdown files are used to store blog posts and other website content. Understanding the frontmatter syntax and how content is organized is necessary.
Learning how GraphQL queries are used to fetch data from the website’s content sources (e.g., Markdown files). Understanding the structure of queries and how to access data in components is important.
Grasping how Gatsby.js generates static HTML files for each page during the build process and how this content is served to users.
Understanding how Gatsby.js optimizes images for different screen sizes and devices using plugins like gatsby-transformer-sharp and gatsby-plugin-sharp. This includes resizing, compressing, and serving optimized images.
Familiarizing yourself with the website’s design and styling using CSS. Understanding the use of CSS frameworks (e.g., Bootstrap, Tailwind CSS) and how styling is applied to different components is essential.
Learning how to make the website accessible to users with disabilities. This includes following accessibility guidelines (WCAG) and using appropriate HTML attributes.
Understanding how to optimize the website for search engines using meta tags, schema.org markup, and other SEO best practices.
Learning about different testing strategies and debugging techniques used in the codebase. This includes unit testing, integration testing, end-to-end testing, and using developer tools to identify and fix bugs.
Understanding the continuous integration and continuous delivery (CI/CD) pipeline used to build, test, and deploy the website. This includes tools like GitLab CI/CD, GitHub Actions, and other CI/CD platforms.
Gaining knowledge of security best practices implemented in the website. This includes secure coding practices, input validation, output encoding, and vulnerability scanning.
Understanding the code style guidelines and how they are enforced using tools like ESLint and Prettier. This ensures consistent code quality and readability.
Learning how to use Git for managing the website’s source code, including creating branches, merging changes, and resolving conflicts.
Understanding different deployment strategies for static websites, including using services like Netlify, Vercel, AWS S3, and GitHub Pages.
Learning about techniques to improve the website’s performance, such as code optimization, image optimization, caching, and reducing HTTP requests.
Understanding how website analytics are implemented using tools like Google Analytics, Hotjar, and others. This involves understanding how to track user behavior, measure key metrics, and use data to improve the website.
Internationalization and Localization
Learning how the website is designed to support multiple languages and regions. This includes concepts like translation, localization, and internationalization.
Understanding how the website interacts with external APIs (e.g., for data fetching, social media integration, or payment processing).
Exploring the use of serverless functions to handle specific tasks (e.g., data processing, background jobs) related to the website.
