JC

💻 FullStack Dev
🎮 Late Night Gamer
📽 Casual Streamer
🍽 Food Lover

#freecodecamp #100daysOfCode #FullStackDev

[がーこ/COMITIA156 D51b @Gaako_illust]

SNOW WOMAN_雪女

[jhey ʕ•ᴥ•ʔ @jh3yy]

using css pow() you can create runtime-configurable fluid typography that responds to viewport or container size 😉

for example, "minimum of 14px at 375px and scale to maximum 24px at 1500px"

all powered by pow() and custom properties

[UI/UX Savior @UiSavior]

Home page vs Landing page 🦅

[₊˚ʚ ᗢ₊˚✧ ﾟ @KuroiiTulip]

one more

[Manu Arora @mannupaaji]

Use 𝚟𝚒𝚎𝚠-𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗𝚜 and 𝚌𝚕𝚒𝚙-𝚙𝚊𝚝𝚑 to animate theme switches instead of flipping them with a transition

𝚍𝚘𝚌𝚞𝚖𝚎𝚗𝚝.𝚍𝚘𝚌𝚞𝚖𝚎𝚗𝚝𝙴𝚕𝚎𝚖𝚎𝚗𝚝.𝚊𝚗𝚒𝚖𝚊𝚝𝚎(
{ 𝚌𝚕𝚒𝚙𝙿𝚊𝚝𝚑: ["𝚒𝚗𝚜𝚎𝚝(𝟶 𝟶 𝟷𝟶𝟶% 𝟶)", "𝚒𝚗𝚜𝚎𝚝(𝟶)"] },
{ 𝚙𝚜𝚎𝚞𝚍𝚘𝙴𝚕𝚎𝚖𝚎𝚗𝚝: "::𝚟𝚒𝚎𝚠-𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗-𝚗𝚎𝚠(𝚛𝚘𝚘𝚝)", 𝚍𝚞𝚛𝚊𝚝𝚒𝚘𝚗: 𝟼𝟶𝟶 },
),

::𝚟𝚒𝚎𝚠-𝚝𝚛𝚊𝚗𝚜𝚒𝚝𝚒𝚘𝚗-𝚗𝚎𝚠(𝚛𝚘𝚘𝚝) {
𝚊𝚗𝚒𝚖𝚊𝚝𝚒𝚘𝚗: 𝚗𝚘𝚗𝚎;
𝚖𝚒𝚡-𝚋𝚕𝚎𝚗𝚍-𝚖𝚘𝚍𝚎: 𝚗𝚘𝚛𝚖𝚊𝚕;
}

Here the clipPath ensures the transition happens from top to bottom

[UI/UX Savior @UiSavior]

Mastering icon design with this handy cheatsheet!

[UI/UX Savior @UiSavior]

Home page vs Landing page 🦅

[jhey ʕ•ᴥ•ʔ @jh3yy]

reminder: this magnetic nav link effect?
jus' a few lines of css + anchor positioning 🤙

li:has(a:is(:hover, :focus-visible)) { anchor-name: --a; }
ul::before {
position-anchor: --a;
left: anchor(left);
top: anchor(top);
width: anchor-size(width);
}

[Marko Denic @denicmarko]

CSS tip:
Stop duplicating your CSS for Dark Mode.

The new light-dark() function lets you define both values in a single line.

It eliminates the need for redundant media queries and keeps your variables in one place.

[GitHub @github]

New update for pull requests. 🚀

You can now follow the discussion directly in the "Files changed" tab. No more context switching.

Plus, we streamlined change requests: If you’ve already commented, skip the summary and just submit.

Get the details. ⬇️
https://t.co/R9BfC2VSmd

[freeCodeCamp.org @freeCodeCamp]

As a developer, you'll need to know how to test your code to make sure it's working as it should.

And in this tutorial, @ATechAjay teaches you how to test your JavaScript apps in a few different ways.

He covers Unit, Integration, and End-to-End testing as well as some AI-Augmented QA techniques.

https://t.co/rSXUvQmdov

[DrFonts© @DrFonts]

Combo inspiration

[JC @TheCodeRaccoons]

Part 5 of JavaScript 101: Control flow (if / else if / else) with clean examples + boundary tips.
Read: https://t.co/9Mk8QciBLt
Catch up: Functions → https://t.co/93FoiqO5TS | Data Types → https://t.co/fXuSdaQbAi
#JavaScript #JS101

[GitHub Projects Community @GithubProjects]

Most teams build backends by stitching together five or six different systems.
Motia shows how simple it can be when one primitive powers everything.

APIs, events, background jobs, workflows, AI agents, and real time streams all built with Steps.
Works in JavaScript, TypeScript, and Python.

[JC @TheCodeRaccoons]

Got tired of rewriting loading/error state in every React screen… so I built a hook for it 😅

use-async-view handles loading, error & success views + reload for you (React & React Native).

Post + examples 👇
https://t.co/SGJXzJ63M1

[GitHub @github]

Cooking up some code? 🧑‍🍳 💻

Don't just guess the ingredients—check out the GitHub Copilot Chat Cookbook. 📖 Get recipes, tips, and prompt strategies to help you get the absolute most out of your AI pair programmer.

Start mixing up better workflows here.👇
https://t.co/WxxhZePjMf

[jhey ʕ•ᴥ•ʔ @jh3yy]

context-aware css card glow/shine effect 👨‍🍳

the trick: duplicate and scale the icon. translate it on pointermove. apply feGaussianBlur 🤙

check it 👇

[Visual Studio Code @code]

The VS Code Private Marketplace is now generally available!

Enterprises can finally self-host and control extension distribution for their dev teams. Secure, compliant, and seamless - right inside @code.

Start here: https://t.co/i010zdcPHF