ubermanu

project structure

.
├── compose.yaml
├── config
│   └── dendrite.yaml
├── element-web
│   └── config.json
├── nginx
│   └── dendrite.conf

ubermanu

Setup Magento 2 MFTF tests in DDEV

Following this tutorial from the docs: https://developer.adobe.com/commerce/testing/functional-testing-framework/getting-started/

env

# dev/tests/acceptance/.env
MAGENTO_BASE_URL=https://magento.ddev.site
MAGENTO_BACKEND_NAME=admin_12345

ubermanu

{
  "pnpm": {
    "overrides": {
      "@sveltejs/kit": "link:../svelte-kit/packages/kit"
    }
  }
}

ubermanu

#!/usr/bin/env bash
set -euo pipefail

if [[ -f /usr/local/bin/mailhog ]]; then
    echo 'It seems mailhog is already installed.' >&2
    echo 'Remove </usr/local/bin/mailhog> to force reinstallation.' >&2
    exit 1
fi

if [[ "$EUID" -ne 0 ]]; then

ubermanu

#!/bin/bash

## Description: Switch Magento2 to developer mode

# Get url from the first fqdn
BASE_URL=$(cut -d',' -f1 <<<"${DDEV_HOSTNAME}")

# Enable maintenance mode
php bin/magento maintenance:enable

ubermanu

<body>
<div id="container">
    <span id="text">test</span>
</div>

<style>
    #container {
        display: inline-block;
        animation: x 2000ms infinite alternate linear,
        y 2000ms infinite alternate linear;

ubermanu

<!-- Basic clock animation using HTML and CSS -->

<div class="clock">
    <div class="seconds"></div>
    <div class="minutes"></div>
    <div class="hours"></div>
</div>

<style>
    .clock {

ubermanu

Browsersync

Requirements

• https://github.com/drud/ddev
• https://github.com/SnowdogApps/magento2-frontools

I'm assuming you already have a running magento2 DDEV container and a working sass theme.
Your website must have a pure http endpoint configured (web/unsecure/base_url in core_config_data).

ubermanu

// https://css-scroll-shadows.now.sh/

.lib-scroll-shadow(
    @_scroll-shadow-background-color: #fff,
    @_scroll-shadow-color: #000,
    @_scroll-shadow-size: 10px
) {
    background: linear-gradient(@_scroll-shadow-background-color 33%, fade(@_scroll-shadow-background-color, 0%)),
                linear-gradient(fade(@_scroll-shadow-background-color, 0%), @_scroll-shadow-background-color 66%) 0 100%,
                radial-gradient(farthest-side at 50% 0, fade(@_scroll-shadow-color, 50%), rgba(0, 0, 0, 0)),

ubermanu

// https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/

.lib-clamp(
  @minFontSizeRem, 
  @maxFontSizeRem, 
  @minWidthPx: 768px, 
  @maxWidthPx: 1920px,
  @pixelsPerRem: 10
) {
  @minFontSize: unit(@minFontSizeRem);