openmindculture / ingo-steinke.de Goto Github PK

Page does not display correctly in Safari on iPhone 6+ (latest official 2021 update)
first view looked like a Desktop version,
second view looked correctly zoomed but some text truncated.

305 snapshot testing with codecept or cypress (42, 64, 69)

https://trello.com/c/QoMPgxuw/64-305-snapshot-testing-with-codecept-or-cypress-42-64-65

• how to test local URLs (seems not possible without local webserver, but we have nodejs anyway)
• how to scroll down hero banner (not possible with codecept but with cypress?)
• necessary to install a separate browser and puppeteer? for a cross-browser compatible website, tests should never fail if any preinstalled modern browser is used, prefer lightweight setup for this mini project!
• initial installation / evaluation
• Integration Tests
• integration test: dist/index.html
• integration test: dist_en/index.html
• snapshot test: screenshot of homepage initial and scrolled
• optional CSS code snapshot (expect to "fail" after postCSS upgrade or class name refactoring, but not after internal refactoring)
• optional JS code snapshot (expect to "fail" after babel upgrade, but not after internal refactoring)
• Component Tests
• component tests: ./_storybook/*.htm
• Cleanup
• uninstalled obsolete frameworks and components

• liquid flounder animation lags in firefox
• print: hide decoration
• about me: width vs. contrast
• clickable elements too close together (google mobile issue)
• content wider than screen (google mobile issue)
• ux: nav menu opens to bottom, out of reach when not yet sticky;
• • ux: nav menu lagged in mobile chrome?;

marked text on white should be more colorful,
we can also use wide gamut colors as progressive enhancement here #124

define different colors for different backgrounds

make it match link hover effects

Refactoring my animated background decoration: after revisiting old notes and code comments, investigating my code made me realize that it is overly complex and that the same visual impression can be achieved with a much simpler approach. Codepen prototyping resulted in a new, more minimal animation that can replace the deprecated prior one before getting fine-tuned in the context of color and content.

• restrict movement boundaries
• reduce the number of objects
• reduce concurrent translations
• simplify translation complexity:
  • linear movement along the Y-axis
  • linear 2d upscaling
  • alternating keyframe animations using ease-in + ease-out
  • anti-cyclic durations create perceived randomness (cicada principle)

This is already quite complex, but it still seems more reduced and easier to calculate than the prior version that I had derived from a liquid animation tutorial in 2021

• Liquid flatfishy floundry vector animation
• Codepad: SVG Liquid Animation

Obsolete older notes:

• animation composition https://developer.chrome.com/articles/css-animation-composition/
  now also supported by Firefox, the browser which had some performance issue caused by the background animations.
  Can we use the composition directives or any other overlooked feature to optimize animation performance?
  Visually, everything seemed to be okay so far.

• add automated testing before further refactoring and development
• --Cypress--
• --Percy / BrowserStack--
• --Mocha / Jest--
• --Storybook?--
• Codecept?

Images not loading after migration to netlify

https://www.w3.org/TR/css-speech-1/

e.g.

body {
  voice-family: male;
  voice-pitch: high;

Story: https://trello.com/b/vhYtCj88/isd20-relaunch

As the maintainer of my own website, I want to keep the tools up to date and improve maintainability.

After not working on the site for a while, many tools have become outdated. Also, the codebase does not meet my current coding preferences anymore. Style sheets seem too chaotic, markup and content are mixed in a redundant way without leveraging modular possibilities of the static site generation system. And that system has seen two major upgrades meanwhile. While my site still runs on eleventy 0.x, there is a stable 2.0 release available.

None of those overdue changes should be done before increasing test coverage, including screenshot tests and possibly doing cross-browser end-to-end tests and audits.

• improve test coverage
  • click journey both on desktop and on mobile, to check different menu versions
  • screenshot tests
  • cross-browser tests
  • audits
• upgrade tools
  • upgrade PostCSS etc., test, adapt configuration
    • remove unnecessary diversity unless it makes sense
      • is there a good reason to use cssnano instead of postcss-minify?
  • upgrade stylelint etc., test, adapt configuration
  • upgrade eleventy (possible breaking changes from 0.x -> 2.0 !)
• proceed with refactoring
  • check open issues and notes
  • more modular content structure
    • elements copied to _storybook should be components instead
    • tiles (projects / skills) should be components
  • refactor CSS
  • automate extracting critical CSS
  • automate image optimization
• after snapshot testing (codecpt, see #42)
• readability / maintainability / developer experience
  • -> specificity and ordering
  • -> refactor class names (BEM)
• new css features with progressive enhancement (container, parent, aspect-ratio)

see trello card

• https://fonts.adobe.com/foundries/liebe-fonts
• https://liebefonts.com
• either keep Bitter or replace with a
  • similar, but
  • more individual
  • looking better with my name
  • by a local fellow developer from Europe, not via Google fonts
• Montserrat alternatives
  • sans or serif?

might be due to latest content updates, inspect tag rows (tech qa stack or blue tech tags below projects)
or due to the added websitecarbon badge

steps to reproduce: open on mobile, e.g. vivaldi browser on google pixel 4.x

expected behavior:

• page is responsive on any device, even below 320px.
• content is fully visible on any device, even without js + CSS applied

upgrade stylelint for maintainablility (the current version of stylelint is no longer officially supported - only one year after 1 built the project?! And as more time elapsed, the latest stable major versions should be ready to use now.

• improve testing to prevent regression bugs using Codecept, testomat

• upgrade CodeceptJS to latest stable major version 3

• check stylelint migration guide

• migrate stylelint

• DON'T upgrade postcss, and postcss-preset-env, it's buggy! (see below) - retain stable version instead!

• Stylelint:

Stylelint version 13.13.1 is no longer supported. While it may continue to work for a while, you may encounter unexpected behavior. Please upgrade to version 14.0.0 or newer. See the migration guide for more information.

• PostCSS:

This version of postcss-preset-env is not optimised to work with PostCSS 8.
Please update to version 7 of PostCSS Preset Env.

Verify and repeat manual audits

• is the code minified?
• does the code work in relevant older browsers, including iOS Safari and maybe even internet explorer?
• do print styles still work?
• file size?
• linting?

Any way to fix, or else reasonable decision to ignore descending specificity issues? #96

After deployment:

repeat external measurements and evaluations (also see README / Changelog)

• Lighthouse / PageSpeed
• WebPageTest
• WebsiteCarbon
• aXe
• ...

not all combinations of http/https, www/non-www, dash/no-dash, work correctly.
Expected behaviour:

• every domain variant redirects to one of the two canonical URLs
  • https://www.ingo-steinke.de/
  • https://www.ingo-steinke.com/
• no certificate error prevents expected redirects when using https variants
• expected behaviour should be covered by automated test

Steps to reproduce: examine all possible variations, for example

• GET http://ingosteinke.com/ 404 Not Found - Request ID: 01G3N5G76HSYGPR5285EMZ3S4B

as reported by stylelint, especially since upgrade to Stylelint 14.x seems to be stricter than ever before.

Update skills matrix on portfolio page:

• focus on technology that I currently use (no vue, no lip, no webflow)
• group by stacks / frameworks: MERN, JAM, Shopware 6, SW 5, ...
• use colors in a more meaningful, recognizable way (e.g. PHP / Shopware shades of blue)
• adapt breakpoints to allow for longer tag lines

Ensure maintainability:

• refactor styles (useless generic child styles, overspecific declaration and order)
• configure linter / editor and adapt styles to avoid warnings after stylelint update
• configure base / import paths to avoid false positive errors in phpstorm

• add the new badge to show off ecological sustainability and possible upcoming cooperation with cleaner-web and allcodesarebeautiful
• place in footer area next to existing badges

Instead of hand-crafting a critical.css file, put everything back into its logical place and let a tool do the extraction, if this really works. Check Extracting and using Critical CSS on my Eleventy site https://dev.to/starbist/extracting-and-using-critical-css-on-my-eleventy-site-457c

add explicit tabindex="0" to internal anchor links in navigation,
see https://stackoverflow.com/questions/42078273/why-does-tabindex-default-to-1-on-anchor-links-but-not-buttons
should not be necessary and it's probably rather a Vivaldi "not a bug" misfeature.

Code Cleanup, fix audit outcomes, fix errors etc.

Broken domain variants: ISD with http without dash does not work!

http://ingosteinke.com || http://www.ingosteinke.com/
404 Not Found
Server: Netlify

neither does

https://ingosteinke.com/ || https://www.ingosteinke.com/
NET::ERR_CERT_COMMON_NAME_INVALID
Subject: *.netlify.app
Issuer: DigiCert TLS Hybrid ECC SHA384 2020 CA1
Expires on: Mar 3, 2023

Expected beaver 🦫 behaviour behavior:

• A GET request using any variation of (www?)ingo(-?)steinke.(com|de) must result in the website, language version solely depending on the top level domain.
• Canonical versions must not redirect. All other versions must redirect to one of the canonical versions (https + www + dash).
• Canonical https versions should send an HSTS response header.
• Redirecting https versions still need a valid SSL certificate.
• Implementation is consistent for .decom and .de according to the principle of least astonishment.
• The current implementation is completely documented inside this repository (TODO update README).
• The current implementation should be completely configured using files in this repository (currently not possible).

Expected implementation:

• ingosteinke.com || www.ingosteinke.com/
  should work like
  http://ingosteinke.de || http://www.ingosteinke.de/
  thus:

Checking and documenting the actual configuration:

• There is no relevant configuration option for netlify (as my German ISP provides DNS name service, those are no "apex" domains configurable by Netlify).
• Check configuration in German ISP control center ("expert functions" -> "DNS-Editor")
  • ....
• Ensure that there are also no redirecting HTML files.
• How do we use .htaccess for redirects?
  common, domain-agnostic .htaccess rules
  • on German host only for .de but not for .com?
  • deployed to Netlify, but Netlify does not respect Apache configuration files, needs a _redirects file instead (see Redirects and rewrites

RewriteEngine On
RewriteCond %{HTTPS} off
# First rewrite to HTTPS:
# Don't put www. here. If it is already there it will be included, if not
# the subsequent rule will catch it.
RewriteRule .* https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]
# Now, rewrite any request to the wrong domain to use www.
# [NC] is a case-insensitive match
RewriteCond %{HTTP_HOST} !^www\.ingo-steinke [NC]
RewriteRule .* https://www.ingo-steinke.de%{REQUEST_URI} [L,R=301]

The current DNS settings do not specify to redirect non-www requests to Netlify,
also not for the .de domains which are working as expected?

The DNS settings for ingosteinke.com (not working) match those for ingo-steinke.de
so what did I miss?

The 404 not found responses have a Netlify X-Nf-Request-Id we should use to check their error logs... not documented => new community support question: Where can I find the error logs to inspect details for a 404 request by Netlify X-Nf-Request-Id?

Compare site -> [domain name] -> settings -> domain settings:

add BEM-inspired group prefixes, like --color-secondary-background instead of --secondary-background to increase readability and maintainability

[ ] Readability ?! -> another issue
[ ] new profile picture -> dto.
[x] update project and customer list -> as it happens ...
[x] text improvement: 2x "begeisterter", replace with "nachhaltiger"
[x] mention sustainability, website carbon claim, sustainability manifesto etc.
[x] replace meetup link with link to dev.to profile
[x] ++ "fractal" stack
[x] -- "shopware 5" stack
[x] add photo "on TV" (from NCA conf 21) to talks section (using srcset)

remove cleaner web badge etc. before it will expire in May 2023

Getting the error

This version of postcss-preset-env is not optimised to work with PostCSS 8. │
│ Please update to version 7 of PostCSS Preset Env.

despite not explicitly requiring any version of PostCSS Preset Env.

Possible a peer dependency of another module?

Markup validation errors:
https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.ingo-steinke.com%2F

Too many headings

• don't overuse H4
• don't emphasize words like 'Imprint' that are not relevant for search (SEO)
• or rephrase, using something like: Imprint / Contact Web Developer Ingo Steinke

• Automate Build and Test
• Fix CSS Specificity Issues #96
• Add Linting to automated build and test run
• Add Screenshot testing
• Test on live / production Site
• Export and run tests on testomat.io

Duplicate without user-selected canonical
These pages aren't indexed or served on Google

Search Console
Page indexing issues detected in https://www.ingo-steinke.com/

To the owner of https://www.ingo-steinke.com/:

Search Console has identified that your site is affected by 1 Page indexing issue(s). The following issues were found on your site.

Top Issues

Duplicate without user-selected canonical
We recommend that you fix these issues when possible to enable the best experience and coverage in Google Search.

New issues despite no intended layout changes:

• home page too wide, larger than viewport ( > 100vw ) on mobile (Vivaldi/Chromium on Android 12)
• "clickable elements too close together" reported by Google search console (without providing further details)

Finish website relaunch by adding beautiful decoration and animation:

headline gradient animation; 132
weblink textmarker animation; 133
liquid flounder animation; 134

https://trello.com/c/DjyFytuw/66-refactor-frontend-components-as-a-fractalbuild-poc
https://fractal.build
https://github.com/openmindculture/fractal-build-example

No matching version found for postcss-custom-properties@^12.18.1
when trying to upgrade PostCSS and related tools in #68

try wide gamut colors for background animation

• am I even able to test this on my current laptop?
• see "taking colors to the next nevel" https://dev.to/ingosteinke/ccs4-colors-5bj2

Upgrade 11ty to the stable 1.0 release

ISD + contact form

• erst bei Bedarf, mit n1cer und sehr dezenter css transition, einblenden
• "serverless" netlify form service?

using jsdoc

Searching for my current phone number, Google's search result page only shows 3 (doubtful, generic) results below my (Google) business profile, although my phone number is present on my page in different notations already:

• visually spaced (thus chunked into span elements)
• as a full international phone uri starting with +49 as a link target

Expected behaviour:

• search results for the full international phone notation should include my official website!

Possible fixes:

• explicitly add this full international phone number notation as a string to my page's markup (possibly visually hidden)

Still some content makes the page wider than 100% / 100vw

reproducible on iOS Safari, iPhone 12 mini (and others),
also see Google search console, awaiting validation of "clickable elements too close together"

follow-up to recently seemingly closed as fixed issue #102 !106 2.9.6 fix mobile width / layout issues - 2022-09-10 -

https://trello.com/c/JuqZSfYK/8-107-jamstack-11ty-netlify

• eleventy setup (local)

• eleventy --save-dev => netlify CD

• netlify configuration (ingo-steinke.netlify.app) deploys from master

• DNS CNAME + A-Record to Netlify at goneo.de

• LE SSL cert at Netlify

• re-test everything

• refine eleventy setup

Internationalization

• internationalization (polyglot, i18n) #38 200
  • split markup and markdown to prevent code redundancy
  • configure deploy target for English language domain
  • use lang, hreflang, rel alternate
  • how to properly set rel canonical for polylang pages?
  • set up domains + URL concept for international content

Domains for Internation Content

• Why use www.ingo-steinke.com (ISCOM) ?

• Why use another domain at all?

• Using different domains for different languages is recommended by Google: "Google recommends using different URLs for each language version of a page", source: https://developers.google.com/search/docs/advanced/crawling/managing-multi-regional-sites

• Using "www" is recommend by Netlify for most use cases: "Unless your DNS provider supports CNAME flattening, ANAME or ALIAS records for apex domains, we strongly recommend setting the www subdomain (or another subdomain) as your primary domain."

• Using a hyphen, while uncommon in domain names except for Germany and Japan, can benefit readability for given names (source: gandi.net), also your brand might benefit from consistency with the established German one.

Localization (Providing Content in English)

• localization (polyglot, l10n) #39 200
  • translate / copywriter content by myself
    • to ensure technical details are correct
    • to make it more authentic to start with
  • improve orthography, grammar and style using automated tools
  • get feedback from non German speaking contacts (Scots, Dutch, ...)
  • professional proof reader / translator (an actual human being)

Follow-Up: cross-link && SEO

• add menu items as simple language switcher

• SEO: link to English domain from American accounts not frequently used until now

  • medium.com/@ingosteinke
  • dev.to/ingosteinke
  • meetup groups in England, Scotland, Luxembourg
  • Reddit, Quora, Disqus
  • English articles on open-mind-culture.org/en link to ISCOM
  • KEEP existing German link target for most other sites to prevent rank drop (do? don't?)

• guetzli / mozjpeg
• webp

Update: Testimonials, Technologies:

add customers and their projects, upgrade and reorder skills and technological testimonials,

• FoodTogether, ProjectTogether, FSE, Block Theme, Pods
• also add to WP skills: FSE, Gutenberg, Pods?
• link to own WP plugin
• but ensure WP is low on the list
• only mention old WP plugin as a side note or not at all
• KleiderOrdnung Berlin, Fashion Changers, Sustainable Stylists in combination with KleiderOrdnung Düsseldorf
• prepare to mention Shopware certification
• mention Impact Hub community

• to prove professional insurance
• either in footer area next to other badges, and/or in TOS section although that is initially hidden

After optimizing headlines and markup, there are even more, probably false positive, color contrast warnings when linting the website using axe accessibility linter. Maybe related to pseudo content, transparency, gradients, background animations.

TODO:

• check if these are actual issues, and
• find a solution to satisfy both human readers and automated linting tools.

Expected behaviour: zero errors, zero warnings.

(Possible related issues deleted, as both have already been fixed.)
Not a false positive, but a very strict one: my site actually fails to ensure minimum color contrast defined by WCAG 2, which brings back an art direction vs. accessibility problem: https://dev.to/ingosteinke/how-to-provide-an-accessible-high-contrast-alternative-to-a-pastel-color-scheme-396g
https://stackoverflow.com/questions/72547565/how-to-provide-an-accessible-high-contrast-alternative-to-a-pastel-color-scheme+

• website must respect reduced motion preference and should not should heavy animation in that case
• website animation should not lag on any contemporary device

Partial solutions:

• start flounder animations only if no reduced motion preference is detected
• show a still position of 1 primary + 1 secondary object as a fallback
• (optionally add a pause class to allow a stop button to determine best fallback position)
• remove the third (x2 secondary x2 before) object which is outside the viewport most of the times

burger menu ux: close menu on any click; 131

refine link colors in privacy; 101:3
mobile width bugs; 101:4

legacy internet explorer bugs; 101:6
Icon ratio in IE 9 (height: auto did not work and was not even necessary)
grid sizes in IE 9 (gridless fallback) float ugly second row on small screens (probably better fallback without float but rather unroll like print view)

broken SVG in IE 9 (icons with unnecessarily large viewBox: scaled paths < 512)
grid sizes in IE 10 (ms-grid)
skills hashtags miss margin when multiline (fixed with mobile fixes 101:4 ?)
project grid content invisible in IE 10 (ms-grid)

a11y print and cross browser bugs; 101:7