Just images swiper directive contains unit tests

Most of services are straight-forward enough so tests aren't actually needed. But we could add some to some that are more complex or are essential pieces for the app:

• Project assets collections service
• Project page component
• JSON fetcher services
• Projects service (get list items)

in small size 👇

You can preview how it will look like in other scenarios also by uploading to https://realfavicongenerator.net/

Currently, the command to run Lighthouse is in the CI's Makefile. As an npx command. And Renovate (automated dependency update tool) doesn't read that to update it. We'll miss updates in there.

Some ideas

• Install it as dev dependency
  • Though isn't needed for build, test, style, ... Seems not quite big as pkg: 96kB. But does it download some headless browser like Puppeteer too?
  • Helps running locally 👍
• Parsing this file to be interpreted by the dependency update tool

It's forcing use of --legacy-peer-deps given requires Angular v15 as peer dep. But app is using Angular v16 and soon will be v17. Which is a PIA. When using npm, bun doesn't care.

There's probably a more updated / popular dependency for metadata. We need:

• Set the page title
• Set the page description
• Set Open Graph metadata
• Set Twitter card metadata
• Set extra metadata (keywords, author, ...)

You always go back to the "Anatomies" project (second one at moment of writing this)

Noticed in #332 but already happened in Angular v16. In Angular v17, a warning started appearing in the console:

http-json-fetcher.service.ts:16 NG02952: The NgOptimizedImage directive (activated on an <img> element with the ngSrc="/projects/fresh-cut/design-book/6.jpg?updatedAt=1699455369751") has detected that the height of the fill-mode image is zero. This is likely because the containing element does not have the CSS 'position' property set to one of the following: "relative", "fixed", or "absolute". To fix this problem, make sure the container element has the CSS 'position' property defined and the height of the element is not zero.

Autoplay is enabled on all swipers. Which is unnecessary (JS compute time) if swipers aren't on screen. Unfortunately, there's no option in Swiper.js to just enable autoplay when swiper is visible

We could add something with Intersection Observer API to enable this.

Indeed the autoplay functionality seems doesn't use best practices, because Lighthouse is not happy with it. So if autoplay is just enabled for the swiper on screen, we could pass the check. Check started failing when we created the project detail view, which was the first page to contain more then one image swiper (just one project existed at the beginning)

Currently code indicates an image takes 33.3vw when on big screens (bigger than S breakpoint -> 960px). However, that's not entirely true given:

• SCSS states swiper will take calc(100vw - 55ch). To allow text to take recommended size for lines to be readable. So images would take half of that. Which is almost 33.33vw. But not exactly that
• SCSS states also that swiper won't exceed a certain height. So that the full image can be seen in screen. This is not taken into account when generating breakpoints for responsive images

So breakpoints are not exactly right. But good enough according to Lighthouse though 👍

So user can share the page with their contacts. And we can show off the metadata set in each page

When the swiper hasn't inited yet, images have no size. Hence the swiper has no size either. This means that when properly initialised, you see a quick flash from the layout with swiper having no size to the proper layout with swiper initialised.

We could add some layout styling to minimise the layout shift between those two states

Description

Some code is written both in SCSS and Typescript. Which could lead to changes in one not applied in the other and some things to not work as intended.

Items to sync

Animations

CSS ones are preferred, but some can't be done with just CSS. So Angular animations are coded in Typescript.

Impact if out of sync

Animations timings and easing functions need to be in sync for a harmonic user experience

Detection

Currently, nothing is set to detect if they get out of sync

Layout breakpoints

Some CSS layouts depend on breakpoints. Also, responsive images depend on those for proper responsive image breakpoints generation. They need to be in sync with layout, hence with those layout breakpoints so that proper responsive image breakpoints can be generated.

Impact if out of sync

Responsive image breakpoints won't be generated according to image sizes

Detection

Fortunately, Lighthouse would detect issues when breakpoints aren't right enough

Responsive images size

They're coded in CSS styles (in vw mainly). But those values are also needed in component code to generate responsive image breakpoints accordingly.

Impact if out of sync

Responsive image breakpoints won't be generated according to image sizes

Detection

Fortunately, Lighthouse would detect issues when breakpoints aren't right enough

Ideas

• Try moving everything to component code. Which is prerendered, so would end up as static inline CSS anyway. Doesn't apply for animations though
• SCSS to JSON. Or something like that. To export variables from SCSS for reuse inside the app components code.

Seems #262 was merged with failing preview deploy step. Though as automerge was enabled and deploy preview is not a required check, it got merged anyway

Seems that it runs too often after some quick tests. It shouldn't. Should it?

Currently, image lists queries are run one by one, not in parallel. This is to avoid triggering ImageKit.io rate limits.

If rate limit was reached, script would raise an error and stop. To properly handle that, some code should be added to wait the specified time until trying again. More info in docs mentioned above

Could be nice to snap so that each project in project list view appears right after the logo, so that the item is viewed as intended

Could use https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type

Maybe same could be applied to project detail view

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Awaiting Schedule

These updates are awaiting their schedule. Click on a checkbox to get an update now.

• build(deps): update angular monorepo to v17.3.4 (@angular/animations, @angular/common, @angular/compiler, @angular/compiler-cli, @angular/core, @angular/forms, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/platform-server, @angular/router)
• build(deps-dev): update angular-cli monorepo to v17.3.4 (@angular-devkit/build-angular, @angular/cli, @angular/ssr)
• build(deps-dev): update dependency ng-mocks to v14.12.2
• build(deps-dev): update pnpm to v8.15.7
• build(deps-dev): update dependency @lhci/cli to v0.13.0
• build(deps-dev): update dependency eslint to v9

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

They say they think the "projects" navigation item doesn't work. Given when in the home page and clicking it, nothing happens.

Some solutions:

• Do not add navigation link style for item if current page is shown

There's some code in scripts that uses poor man's memoization:

if(!this._foo) {
 this._foo = expensiveComputation()
}
return this._foo

We could install a lib for that. Just to explore and discover. Not too many use cases to actually be an issue. Will probably look better in code though.

When sharing a project's detail view URL (i.e.: chiasma's one https://christianlazaro.es/projects/chiasma), OpenGraph and Twitter cards generated don't include any image.

Could be nice to include one.

Ideas:

1. First preview image
2. An image of that project with a specific tag in the CDN
3. Number 2. with 1. as default

Doesn't bring much help considering it adds 18KB to bundle size.

Maybe we can remove everything we don't absolutely need ?

After testing with several users, most of them didn't click the title to inspect a project in the project list view.

Maybe adding a button or something "Show more" could help? Or changing link style

Could be nice to reload whenever some JSON content changes. For a better DX. Also, we could run contents generator whenever JSON content changes to ensure lists match latest content.