hbo-i / ictresearchmethods.nl Goto Github PK

Makes more sense

https://github.com/jochemvogel/ictmethods.nl/blob/e15c03ae2cddfd2b366111eff69d91e391fb6aec/src/lib/components/SearchField.svelte#L47

Currently just vibin' around. Don't like that behaviour.

It's a mess right now and it can be fixed easily.

Is your feature request related to a problem? Please describe.
Small UX flaw

Describe the solution you'd like
When a category is selected on mobile it will be centered, so the previous and next category will also be visible. Right now this does not happen and it doesn't look like there is another category. You need to (horizontal) scroll in order to go to the next one.

https://github.com/jochemvogel/ictmethods.nl/blob/5e8953880c8f47554de48bebecbc0c30a6ac24c1/src/lib/components/SearchField.svelte#L70

On mobile there is no possibility to use the keys. Remove the placeholder there.

Probably add a isMobile variable

--

Update maximum items to 4 instead of 5

--

Update z-index search on mobile --> Probably just update z-index of hamburger menu.

--> Add _z-index.scss

Works with NativeScript. Looks cool.

https://svelte-native.technology

Currently there is no description per category (library, field, workshop etc.). It's probably worth to add a small description per category so it's easier to understand each category. Maybe combine with https://github.com/jochemvogel/ictmethods.nl/issues/33

Add a overview page with content about:

• Overview or certainty / Expertise or fit / Inspiration or data
• Overview page of all the methods with their description
• DOT Framework?
• Phases?
• Research Patterns? (https://ictresearchmethods.nl/Research_Pattern_Navigator)

Maybe add a page with 'Additional resources'/'additional info' or whatever, where you categorise all the pages listed above.

Describe the bug

Security vulnerabilities

Little bit broke right now. Tbh it never really worked good, so fix that.

The images are fetched when visiting the page while the pages are prefetched. Doesn't look like they're prefetched. They're not statically generated at all

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like

• Static offline page
• Service worker that makes it possible to cache methods (https://jochemvogel.medium.com/how-to-cache-dynamic-pages-on-demand-with-a-service-worker-in-sveltekit-4b4a7652583d)

https://kit.svelte.dev/docs/advanced-routing#matching

/library/available-product-analysis is valid, but /test-url/i-dont-know is not. Figure out if you can fix this with matching. Error handling will be better if you do it like that.

You can say 'method is not available' instead of 'page is not available'

Describe the problem

Just some changes based on the new version of sveltekit

error.html (optional) is the page that is rendered when everything else fails. It can contain the following placeholders:
%sveltekit.status% — the HTTP status
%sveltekit.error.message% — the error message

https://kit.svelte.dev/docs/routing#error

tests/ folder is outside the src/ folder now

Describe the proposed solution

Alternatives considered

No response

Importance

would make my life easier

Additional Information

No response

See MR: https://github.com/jochemvogel/ictmethods.nl/pull/114/files#diff-6317e218ea40a2a9b47af98e100e81c06f9c0abff66737e6ca06ec4b29402242

I want an easy way to upload images. Preferable way:

1. Let the user upload the image in a random place (uploads folder)
2. Optimise the image automatically (thumbnail + webp)
3. Optimised image is used in the code

vite-imagetools (sharp) can be used. Maybe an external CDN can be used. Just make it as simple as possible.

In the workflows (Github Actions) we use environment variables/secrets. Those are not accessible in forked repos. So when people try to make a change, the CI will fail, because they don't have access to the secrets.

Update pull_request to pull_request_target will probably do the trick. This isn't a very safe way according this article, but for this repo that's not a big deal.

Github fixed it tho, but (logically) only for private repos.

Only necessary for the Development CI, that's the only one that's triggered when a fork is being merged.

https://github.com/jochemvogel/ictmethods.nl/pull/47

Sources:

• https://docs.github.com/en/actions/security-guides/encrypted-secrets
• https://github.blog/2020-08-03-github-actions-improvements-for-fork-and-pull-request-workflows/

https://css-tricks.com/essential-meta-tags-social-media/#aa-final-markup

Still buggy styling on that page on a specific screen width. It's either tablet-landscape or desktop-small.

SvelteKit is updated lately and there are a few new best practices available that are not implemented in the app right now:

• Add prerender to layout.ts instead of per page (https://kit.svelte.dev/docs/page-options#prerender)
• Add matching in params directory(1) (https://kit.svelte.dev/docs/advanced-routing#matching)
• Add error.html (https://kit.svelte.dev/docs/routing#error)
• Update src/__tests__ to /tests
• Update error handling (https://kit.svelte.dev/docs/load#errors)
• Add csr = false to /dot-framework and /about (https://kit.svelte.dev/docs/page-options#csr)
• Remove saved-methods folder/route. Don't need it

1).

/library/available-product-analysis is valid, but /test-url/i-dont-know is not. Figure out if you can fix this with matching. Error handling will be better if you do it like that.

You can say 'method is not available' instead of 'page is not available'

Describe the bug

Images need to load on method page while they have to be prefetched

Reproduction

Compare: https://deploy-preview-58--dev-ictmethods.netlify.app/library with https://deploy-preview-57--dev-ictmethods.netlify.app/library.

On both versions go to a method page. On the '57 one' the images are already loaded, while on the '58 one' they're loaded when on the page.

Expected Behavior

Load instantly like https://deploy-preview-57--dev-ictmethods.netlify.app/library

System Information

All

Severity

annoyance

Additional Information

Changed because of this: https://github.com/jochemvogel/ictmethods.nl/pull/58.

An assumption is that I added thumbnails. Those are not the same resources as the images on the method page. Strange anyways, because they've to be prefetched.

Is your feature request related to a problem? Please describe.
No, just a splash screen on mobile gives a better UX

Currently there are only some setup/basic tests. This needs to be increased. Think about (for now) at least five main functionalities you'd like to test.

Describe the bug

A few Sveltekit/Vite updates:

• sveltejs/kit#5359
• sveltejs/kit#5332
• sveltejs/kit#5748

Doesn't look like svelte-paginate works with this new version, so probably need to rewrite it

https://ictresearchmethods.nl/Requirements_prioritization

https://github.com/jochemvogel/ictmethods.nl/blob/89f572fb16793d030f5c671b58a94b23adfbb208/src/app.html#L19

A is missing

Logo in topbar and image in machine learning are not optimised. Won't take that long, but optimise it for mobile devices.

Check the OS of the client

function isMac() {
  return navigator.platform.indexOf('Mac') > -1
}

Change keystroke (CTRL instead of CMD) and change placeholder text

src/lib/components/method/MethodCard.svelte

When there is no image provided for a specific method, a 404 will been thrown. Solution could be something like this (but then it has to work):

<script>
  let fallbackLoaded = false;

  function handleImageError(event) {
    if (!fallbackLoaded) {
      fallbackLoaded = true;
      event.target.src = '/img/fallback.jpg';
    }
  }
</script>

<picture class="card-heading__img">
  <source
    type="image/webp"
    srcset={`/img/methods/${method.category}/thumbnail/${method.slug}.webp`}
  />
  <source
    type="image/jpeg"
    srcset={`/img/methods/${method.category}/thumbnail/${method.slug}.jpg`}
  />
  <img
    src={`/img/methods/${method.category}/thumbnail/${method.slug}.jpg`}
    loading="lazy"
    decoding="async"
    class="img"
    alt=""
    height="80"
    width="80"
    on:error={handleImageError}
  />
</picture>

yml instead of md

https://github.com/sveltejs/kit/blob/master/.github/ISSUE_TEMPLATE/feature_request.yml

https://fontysblogt.nl/ict-research-methods-for-machine-learning-engineering/

https://github.com/jochemvogel/ictmethods.nl/tree/development/src/routes/dot-framework

Describe the solution you'd like
Probably with local storage to make sure that users can save them. See if it is also possible if users have turned off their JS. What if their offline? IndexedDB? Disable saving? Disable link in nav? Think about it.

Lot of classes in css are not being used. Build the repo and remove everything that is flagged

Seems like it doesn't work yet. Also add a svelte:head to those pages

Is your feature request related to a problem? Please describe.
Searching is currently limited to the name of the method. Could add more.

Describe the solution you'd like
A clear and concise description of what you want to happen.

Describe alternatives you've considered
Implementing by myself, but that are too much edge cases.

Describe the bug

When on http://127.0.0.1:5173/machine-learning/library-methods and using CMD + K, no method will be found.

Reproduction

above

Expected Behavior

It find sit

System Information

yes

Severity

blocking all usage of ICT Methods

Additional Information

Probably something with routing

I mean, this is the most important feature of all

https://kit.svelte.dev/docs/load#errors

sveltejs/kit#790 (comment)

Describe the bug
Somehow the actions are not triggering.

Is your feature request related to a problem? Please describe.
On mobile the whole image is loaded and that's not necessary. Especially not for thumbnails.

Describe the solution you'd like

• https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
• https://web.dev/learn/design/responsive-images/
• https://web.dev/learn/design/responsive-images/#responsive-images-with-srcset

Handy package

There seems to be a layout switch when you enter the page. Put 'low-end mobile' throttling on in browser to check differences

Fixed width and height to method cards/articles

1. Width of card => Is less wide after 'mounted' (CSS gap property on article?)
2. Height of card
3. Font-size/scale?

Describe the bug

On the search page the theme resets to light.

Reproduction

Go to the search page with dark mode enabled

Expected Behavior

Dark mode stays enabled (it's the same app)

System Information

Everything

Severity

annoyance

Additional Information

Something is going on with SSR. Search is the only 'not prerendered' page.

Is your feature request related to a problem? Please describe.
It currently looks kinda weird in combination with the footer.

Describe the solution you'd like
Sticky sidebar so the navigation will be visible the whole time and the footer doesn't look weird

On mobile there is no link to the github repo, yet.

https://ictmethods.nl/field/task-analysis

'Survey' content

Describe the bug

https://ictmethods.nl/showroom

Reproduction

https://ictmethods.nl/showroom

Expected Behavior

Same style as the rest of the app

System Information

macOs Chrome latest version

Severity

annoyance

Additional Information

No response

Describe the bug

When you go to a method that does not exist, SvelteKit tries to fetch that one from API and that results in a 500

Unexpected end of JSON input

SyntaxError: Unexpected end of JSON input

Reproduction

https://ictmethods.nl/workshop/dasfadsf will throw a 'Invocation failed'

Expected Behavior

Serve to 404 page

System Information

All devices

Severity

annoyance

Additional Information

No response