Portfolio v2 Learnings

[HasithDeAlwis]

This issue will document everything that I will be learning about during the process of creating this Portfolio (for a second time 😆) Everything I learn will be consolidated in the comment section of this issue.

Goal for Learning Technical

• E2E testing
• Understand GitHub workflows and add to CI pipeline
• Dependency optimization (learning difference between devDependency & dependency)
• How to optimize performance (ie. remove unused CSS, smaller bundle size, SEO, & accessibility)
• Storybook to test FE component
• Understand TailwindCSS configuration to learn how to optimize it

Goals for Learning Design

Design is not my strong suit, but as FE dev, I need to improve upon this skill to work better in the future with designers and other co-workers.

• Develop strong intuition for UX
  • Start to look for good UX patterns
• Understand how to use animations effectively
  • Read into animations and interactivity, how can we use animations to optimize the UX
• Learn basics of figma 😨

Overall, I want to start thinking like a designer and learn how to tell a story with my designs.

[HasithDeAlwis]

ASTRO FINDINGS

What is Astro

Astro is a performant tool to build MPA and SPA. It relies on island architecture (which it pioneered 😮), builds on something called partial and selective hydration (will research more into this later). Islands are any interactive part of a website, they can be run in isolation, and everything else is static HTML. This is highly performant since JS is the slowest asset you can load per byte.

My Thoughts

Islands are a great way to code and it allows you, as a developer, to not be distracted by bloat and weird state management. I also had problems with performance with Gatsby, especially on the animations side.

Pros:

• No more React 🥳 (when you don't need it 😉)
• Bare HTML and CSS
• Integrates with TailwindCSS and DaisyUI
• Has good documentation on Vitest
• Minimal bloat
• File based page routing

Cons:

• Longer development time (potentially) because of pure HTML (thought I don't suspect this)
• Lacks an exhaustive ecosystem (probably means long trips to node_modules)

Concepts to Research

These are concepts I want to look back on and learn more about throughout this project:

• Prefetch for links
• Selective and Partial hydration
• Internationalization (i18n) --> This site should be possible to read in french and english
• Connecting to a CMS
• Look into hydration strategies

[HasithDeAlwis]

Design System Findings

List of findings that I'm looking into right now to learn more about design systems. The importance of a design system and how I can use one to curate a feeling on my website.

Atomic Design Framework

Atom

• Colour, spacing, essentially the smallest elements

Molecule

• combinations of atoms (checkbox)

Organism

• combination of molecules (sidebar or a header)

Template

• Many organisms to make a template (final product)

Colour Styles

• Have more colours of grays than other colours
• 5-10 shades of other colours (primary, secondary, success, error,
• use numbers to name the colour (ie. primary/primary-100)
• We can then reuse these colour styles across our app (much like TailwindCSS styles)

Text Styles

• Have a Display Type for headers that are bigger than the H1
• Headings, from h1 to h5
• Subheadings from subheading1-subheading2
• Paragraphs from p1-p5

Design Components

• We need a primary version, secondary versions, etc. for these components
• We need large, medium, and small buttons
• We can use our defined styles (ie. colour styles, text styles, and spacing styles)
• The important part of this is to plan this through throughly and preemptively make your components

Notes

• With an understandings of the atomic design framework, we can use this as the building blocks for making a design system on figma.
• Important that we decide on the atoms as a first step so that we can build a strong foundation for our design.
• Design with master components