Landing ejs refactor

[elite0226]

• Refactored with ejs and esbuild: Frontend Landing
• Remove React modules, instead implement with just HTML and CSS.
• Responsive for mobile.

[leomayleomay]

@elite0226 would you please help to fix the conflicts and CI failures before QA? cheers

[DarthPJB]

@elite0226 Your branch has removed the 'ardana-landing' module from frontend-landing.

The CI build pipeline is reliant on this to produce the output of the frontend-landing derivation.

As such, this will not evalulate.

[DarthPJB]

So - I've corrected the flake.nix to reflect the renaming of the node module in question - this is throwing up all kinds of NPM errors that I'm unable to debug or fix.

Please ensure that you are able to nix build .#frontend-landing locally before commiting to a non draft PR.

[toastal]

Video broken without JS. JS is probably not a requirement to play videos.

[toastal]

The <noscript> I built, while cute, isn't really relevant anymore. JavaScript is not a requirement to view this. You could choose to leave a small banner along the lines of "you'll have a better experience with JavaScript enabled", but honestly that probably isn't needed.

[toastal]

Fundamental issue 1: if there's going to me a big mass of utility classes and you're choosing to go the utility class route, why not just use a library like Tailwind or Tachyons?

Fundamental issue 2: you sure you want to build a flex-based grid system in 2022 without a) considering native display: grid or b) using the grid systems from one of the things raised in issue 1?

[toastal]

Consider just setting a https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy

[toastal]

https://cssgridgarden.com/

Much the styles could be simplified with grid and gap. Grid is still very accessible to users, and while it doesn't look great on old/defunct browsers, it still works good enough and is perfectly fine for TUI browsers and screen readers.

[toastal]

I highly, highly suggest you try loading the site in a TUI browser ala

$ w3m http://localhost:5000

And it should start being immediately obvious where all caps shouldn't be used. Where alt text is missing--or where it shouldn't exist because the image is purely decorative. What elements need links (or perhaps "View more" should just be a <details>??). There other questions that poses like: why are there two, duplicate navigation headers?

[leomayleomay]

@elite0226 would you please help to address the comments and the failed CI? cheers

[toastal]

@elite0226 Is the CSP in yet?

[toastal]

Carousel noscript

Carousel with script

Issues (invoked via npm start @ frontend-landing):

• The asset URLs are not being resolved correctly (../../assets/...etc is not what this should look like)
• Noscript isn't covered; options:
  • Hide the buttons for no script
  • use a <noscript> tag that explains that JavaScript must be enabled to use the carousel
• Button should have a title that probably matches the alt tag to display the action on hover
• Contents of that file should be wrapped in an IIFE (e.g. ;(function(){}())) because variables have leaked to the global scope
• Selectors like [id^="dana_"] are really slow, and it's better to use something like .Carousel-item

Optional:

• Consider the name scheming .Carousel-item--hidden (CSS Bliss is something I personally find easier to read better with PureScript/Elm module code vs. BEM which I find difficult to read)
• Don't even bother with hidden classes, with JS enabled, hide by default and just show a current (maybe also a prev/next if you need a transition effect).
• Unsure on the performance, but it might be easier to use nextElementSibling than trying to do the mat (where if null is returned fall back to parentNode.firstElementChild). This could then mean that all you need to do is store a reference to the current node instead of finding an index--especially if you needed to dynamically insert a new carousel item.
• Consider renaming main_slider.js to carousel.js to match the classes/concepts

[leomayleomay]

@elite0226 the CI build is failed

[leomayleomay]

the following QA feedbacks are collected when testing against https://631093cfa1bdf85f413bc2bc--admirable-snickerdoodle-06e08d.netlify.app

• Click on TECHNOLOGY, COMMUNITY, NEWS will end up with a 404 error
• Broken image in the home page
• Click on Learn more here will end up with a 404 error
• Click on View more here will end up with a 404 error
• Click on Technology, Brand Assets will end up with a 404 error

[toastal]

404

If this is on Netlify, we need to make a 404.html (or whatever the use) that is a duplicate of our index.html to get the fallbacks.

[toastal]

broken images

../../../../assets/icons/video-play.svg. Looks like an issue with relative URLs. Removing the relative .. still fails though.

[toastal]

Not required for release, but these raster images look kinda bad on my hiDPI screen.

[leomayleomay]

Finish the QA with URL https://631f2f795103a004f007cd83--admirable-snickerdoodle-06e08d.netlify.app in Chrome/Firefox/Brave, the issues found in the previous round of QA are all fixed

[leomayleomay]

hi Greg, I tested this with Epiphany browser mentioned by Kai, and found weird boxes around images, cc @toastal

[leomayleomay]

hi Greg, I tested this with Epiphany browser mentioned by Kai, and found weird boxes around images, cc @toastal

this seems to be fixed with https://63274b67654405588e129076--admirable-snickerdoodle-06e08d.netlify.app/

[leomayleomay]

• the News is not there in the burger menu in mobile version

  

• Unescaped chars found in home page

  

• Unexpected scrollbars when burger menu is open

  

[leomayleomay]

looks great, only two minor issues

• the text necessaryDeFiprimitives seems to be there without spaces in between them

  

• the scrollbars still there in burger menu in https://632c95d233c5aa62af2e1c13--admirable-snickerdoodle-06e08d.netlify.app/brandassets/ for mobile version

  

[leomayleomay]

@elite0226 I found that there's no way I could close the burger menu once it's open

[toastal]

@ryanmatovu I feel this was merged prematurely because I have real, long-term concerns about how the class is checked and changed on the document.body. Can we revert this and fix those issues first? Or open new issues to fix it immediately.

[ryanmatovu]

@toastal we can open new issues to fix it immediately.