⌘ Maynard

Husband to my beautiful wife, Web Developer and a Gamer #coffeeconnoisseur

[⌘ Maynard @webcoderph]

"Everybody is a genius. But if you judge a fish by its ability to climb a tree, it will live its whole life believing that it is stupid." - Albert Einstein

[Tony Dinh @tdinh_me]

They say I make $45K/month just by pure luck and just by posting my MRR on Twitter 🙃

I'll ignore them and have my 8 years of GitHub graph printed on my wall as a self-reminder ✅

[⌘ Maynard @webcoderph]

Why I love being a Software Engineer https://t.co/7YR44Vi4v8

[⌘ Maynard @webcoderph]

@Jasminecodes_01 Please connect with me also and watch my vlog in tiktok 😇

[⌘ Maynard @webcoderph]

https://t.co/UHb9ezaO5O

[⌘ Maynard @webcoderph]

Check out webcoderph | Fullstack Dev! #TikTok https://t.co/AuSJ5s2xu8

[⌘ Maynard @webcoderph]

A day in a life of a remote Fullstack Developer #programmer #nodejs #reactjs #TikTok https://t.co/KbOdXMd7CP

[⌘ Maynard @webcoderph]

A day in a life of a Fullstack Developer #TikTok https://t.co/sL0vEXXMjw

[⌘ Maynard @webcoderph]

Reverse String - Leetcode #leetcode #javascript #codingtips #fullstackdev #TikTok https://t.co/y1dxkolqr0

[⌘ Maynard @webcoderph]

FizzBuzz Leetcode Challenge #TikTok https://t.co/W9LR0070E9

[⌘ Maynard @webcoderph]

Basic GSAP Scrolltrigger Animation #reactjs #nodejs #fullstackdeveloper #TikTok https://t.co/sm3p2UMnjA

[⌘ Maynard @webcoderph]

Check out webcoderph | Fullstack Dev's video! #TikTok https://t.co/NLJogP1EGY

[⌘ Maynard @webcoderph]

Check out webcoderph | Fullstack Dev's video! #TikTok https://t.co/ZMF4z5Pw6y

[⌘ Maynard @webcoderph]

Check out webcoderph | Fullstack Dev's video! #TikTok https://t.co/l7U7Nyghbk

[⌘ Maynard @webcoderph]

Earn up to ₱1 by participating in the weekend special offer. https://t.co/KNhoZSFYIg

[jhey ʕ•ᴥ•ʔ @jh3yy]

CSS Tip! 💫

You can create this responsive perspective warp animation with 3D CSS and container queries ✨ (Video reveals trick 👀)

.warp {
container-type: size;
perspective: 100px;
transform-style: preserve-3d;
resize: both;
overflow: hidden;
}

Couple of tricks in this one 🤓

The main idea is to create a tunnel (an open-ended cube). On each side of the tunnel, use linear-gradient to create the grid lines ✨

.side {
background:
linear-gradient(#​fff 0 1px, transparent 1px 5%)
50% 0 / 5% 5%,
linear-gradient(90deg, #​fff 0 1px, transparent 1px 5%)
50% 50% / 5% 5%;
}

To position each side, you rotate on the x-axis by 90deg. Each side would become invisible at this point. So you give the scene perspective 😉

.warp__side--top {
width: 100cqi;
height: 100cqmax;
transform-origin: 50% 0%;
transform: rotateX(-90deg);
}

The cool part here is that you want to make each side the same height. But the container is responsive. So you can use a container query and make sure each side is 100cqmax tall 🫶

Then the "beams". Each side contains "beams". They have different colors, sizes, and positions, and move at different speeds ⚡️

We can control that through scoped custom properties.

<div
class="beam"
style="
--hue: 271;
--ar: 5;
--x: 15;
--speed: 3.5;
--delay: 3.5;
">
</div>
.beam {
width: 5%;
position: absolute;
top: 0;
left: calc(var(--x, 0) * 5%);
aspect-ratio: 1 / 2;
background: linear-gradient(
hsl(var(--hue) 80% 60%), transparent
);
translate: 0 100%;
animation:
warp
calc(var(--speed, 0) * 1s)
calc(var(--delay, 0) * -1s) infinite linear;
}

The magic here is though that a beam's animation is as basic as translating it from the top of the side to the bottom. And you can get that distance with a container query again 🔥

@​keyframes warp {
0% { translate: -50% 100cqmax; }
100% { translate: -50% -100%; }
}

And that is pretty much it! A cool warp animation effect using 3D CSS and container queries ⚡️ If you have any questions, let me know ᵔᴥᵔ

@CodePen link below! 👇

[⌘ Maynard @webcoderph]

https://t.co/KWMc84eoWm

[⌘ Maynard @webcoderph]

Funk pop V-Female #Cyberpunk2077 #xbox

[YellowMotion @Yellow_Motion]

🔴 FIRST LOOK: TEKKEN BALL Mode in TEKKEN 8! 🔵

🏐 TEKKEN BALL Mode is back in TEKKEN 8, and it's looking better than ever. Check out this very first Gameplay Footage to get a taste of what's to come.

How does it look? Share your thoughts! #TEKKEN8 #TEKKENBALL

[jhey ʕ•ᴥ•ʔ @jh3yy]

Fine.

Real-life CSS lesson 🧑‍🍳🍕

.topping {
translate: calc(var(--x, 0) * 1cqi) calc(var(--y, 0) * 1cqi);
transition: translate 0.2s;
}

[id=slide]:checked ~ .scene .topping {
--x: 100;
}

cc @_davideast

[jhey ʕ•ᴥ•ʔ @jh3yy]

Future CSS Tip! 🔮

You can create sweet scroll-driven micro-interactions using CSS scroll-driven animations 😎

.avatar {
animation: scale-down;
animation-timeline: scroll();
animation-range: var(--header-range);
}

@ keyframes scale-down {
to {
scale: 0.3;
}
}

What's happening in this one? 👀

1. Avatar moves and scales down as the header sticks
2. Name changes color and slides over
3. Header darkens to give the text contrast
4. Header gets a shadow
5. Notice the avatar scrub too! 👀 It's scroll-driving the sprite animation technique we went over earlier in the week ✨

So much fun! ✨ Could even tie in the new easings from earlier too!

@CodePen link below! 👇