programmers that they can hold a bit more in their head, but it’s not smart to assume that of your fellow developers. And remember that even the very smart appreciate things that are very simple and clear, perhaps especially.
You know what strikes me as a smart developer move? When they work together even across organizations. It’s impressive to me to see Standard Schema an effort by all the people who work on any library that deals with JavaScript/TypeScript schemas to make them easier to use and implement.
The goal is to make it easier for ecosystem tools to accept user-defined type validators, without needing to write custom logic or adapters for each supported library. And since Standard Schema is a specification, they can do so with no additional runtime dependencies. Integrate once, validate anywhere.
There are heaps of libraries and tools that already support it, so I’d call that a big success. I see Zod released Mini recently, which uses functions instead of methods, making it tree-shakable, but otherwise works exactly the same. Likely a nod to Validbot which was always the “Zod but smaller” choice.
Another thing I think is smart: seeing what developers are already doing and making that thing better. Like, I’m sure there are very fancy exotic ways to debug JavaScript in powerful ways. But we all know most of us just console.log() stuff. So I like how Microsoft is like, let’s just make that better with console.context(). This allows for better filtering and styling of messages and such, which would surely be welcome. Might as well steal formatting strings from Node as well.
@html_codee
You know what strikes me as a smart developer move? When they work together even across organizations. It’s impressive to me to see Standard Schema an effort by all the people who work on any library that deals with JavaScript/TypeScript schemas to make them easier to use and implement.
The goal is to make it easier for ecosystem tools to accept user-defined type validators, without needing to write custom logic or adapters for each supported library. And since Standard Schema is a specification, they can do so with no additional runtime dependencies. Integrate once, validate anywhere.
There are heaps of libraries and tools that already support it, so I’d call that a big success. I see Zod released Mini recently, which uses functions instead of methods, making it tree-shakable, but otherwise works exactly the same. Likely a nod to Validbot which was always the “Zod but smaller” choice.
Another thing I think is smart: seeing what developers are already doing and making that thing better. Like, I’m sure there are very fancy exotic ways to debug JavaScript in powerful ways. But we all know most of us just console.log() stuff. So I like how Microsoft is like, let’s just make that better with console.context(). This allows for better filtering and styling of messages and such, which would surely be welcome. Might as well steal formatting strings from Node as well.
@html_codee
Real payment form.html
11.6 KB
Real payment form with api
✨Open and test the code !
✨Open and test the code !
🚀 7 Essential HTML Tips Every Web Developer Must Know! 💡
1️⃣ Use semantic tags like <header>, <footer>, <article>, and <section> to make your HTML cleaner and SEO-friendly.
2️⃣ Always include the alt attribute in <img> tags for better accessibility and SEO.
3️⃣ Use <meta charset="UTF-8"> to avoid character encoding issues.
4️⃣ Keep your HTML structured with proper indentation — it helps with readability and maintenance.
5️⃣ Use comments <!-- like this --> to explain tricky parts of your code.
6️⃣ Avoid inline styles — keep CSS in separate files for better performance.
7️⃣ Use <label> with form inputs to improve usability and accessibility.
💥 Bonus: Use the <picture> element for responsive images that load the right size depending on screen resolution!
1️⃣ Use semantic tags like <header>, <footer>, <article>, and <section> to make your HTML cleaner and SEO-friendly.
2️⃣ Always include the alt attribute in <img> tags for better accessibility and SEO.
3️⃣ Use <meta charset="UTF-8"> to avoid character encoding issues.
4️⃣ Keep your HTML structured with proper indentation — it helps with readability and maintenance.
5️⃣ Use comments <!-- like this --> to explain tricky parts of your code.
6️⃣ Avoid inline styles — keep CSS in separate files for better performance.
7️⃣ Use <label> with form inputs to improve usability and accessibility.
💥 Bonus: Use the <picture> element for responsive images that load the right size depending on screen resolution!
Save this post to improve your code quality and share it with fellow developers!
Want more tips like this? Join 👉 https://t.me/Html_codee
Which element defines a drop-down list ?
Anonymous Quiz
67%
<input type=dropdown>
17%
<dropdown>
0%
<input type=select>
17%
<select>
🧠 HTML Tip of the Day: Create a Responsive Image Gallery with Just HTML & CSS!
💡 You don’t always need JavaScript to build awesome layouts!
✅ Works on all devices
✅ No JavaScript needed
✅ Fast and mobile-friendly
🔁 Copy, paste, and try it now!
💬 Let me know if you want the same gallery with hover effects or lightbox!
#HTML #CSS #WebDev #Html_codee
💡 You don’t always need JavaScript to build awesome layouts!
<div class="gallery"> <img src="https://picsum.photos/id/1015/400/300" alt="Gallery Image"> <img src="https://picsum.photos/id/1016/400/300" alt="Gallery Image"> <img src="https://picsum.photos/id/1019/400/300" alt="Gallery Image"> </div> <style> .gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; padding: 10px; } .gallery img { width: 100%; height: auto; border-radius: 10px; } </style> ✅ Works on all devices
✅ No JavaScript needed
✅ Fast and mobile-friendly
🔁 Copy, paste, and try it now!
💬 Let me know if you want the same gallery with hover effects or lightbox!
#HTML #CSS #WebDev #Html_codee
💻🧠 Top 10 Neural Networks for Coding Assistance
1.Chatgpt.com
2.deepseek.com
3.claude.ai
4.replit.com
5.deepcode.ai
6.github.com/copilot
7.tabnine.com
8.codeium.com
9.sourcegraph.com/cody
10.cursor.so
🔥 Bonus: blackbox.ai
🧑💻 #CodingAI
⚙️ #DevTools
🌐 #WebsitesAI
1.Chatgpt.com
2.deepseek.com
3.claude.ai
4.replit.com
5.deepcode.ai
6.github.com/copilot
7.tabnine.com
8.codeium.com
9.sourcegraph.com/cody
10.cursor.so
🔥 Bonus: blackbox.ai
🧑💻 #CodingAI
⚙️ #DevTools
🌐 #WebsitesAI
CodePen Blog
Chris’ Corner: Type Stuff!
Let’s do typography stuff!
* Video: “A live demo by me of early font editors on a real Macintosh Plus” by Mark Simonson
* Font: “Is this font easy for you to read? Good—that’s the idea.” Hyperlegible is the name of the font, designed for people with low vision.
* Technique: “Fluid typography means thinking in terms of type scales and flexible spacing across your defined design space.” Richard Rutter goes retrofitting a new type sizing technique into an old layout. Miriam is also thinking about all this. Richard also has a good one on avoiding faux bold, which has afflicted me many times. My hot take is that browsers shouldn’t do faux nuthin.
* Font: “To help young readers of all skill levels, we’re introducing Kermit, a child-friendly typeface created by the type design studio Underware.” It’s fairly pricey but I can imagine it being perfect for some projects. Like Comic Sans but cooler. P.S. you should really try Comic Code on CodePen, it’s awesome.
* Fonts: “UNCUT.wtf is a free typeface catalogue, focusing on somewhat contemporary type.” A lot of them are super similar which makes me wonder if many of them come from students taking a design class or something.
* Journey: “One day, I saw what felt like Gorton on a ferry traversing the waters Bay Area. A few weeks later, I spotted it on a sign in a national park. Then on an intercom. On a street lighting access cover. In an elevator. At my dentist’s office. In an alley.” Marcin Wichary on Manhattan’s hardest working typeface.
* Performance: “… file sizes of web fonts? I personally don’t have a gut feeling how much is too much and how much is to be expected.” Stoyan Stefanov reckons 20k is fair.
* Behind the Scenes: “This meant that on web we could simply start our font stacks with
* Technique: “…we added
Chris’ Corner: Type Stuff!
Let’s do typography stuff!
* Video: “A live demo by me of early font editors on a real Macintosh Plus” by Mark Simonson
* Font: “Is this font easy for you to read? Good—that’s the idea.” Hyperlegible is the name of the font, designed for people with low vision.
* Technique: “Fluid typography means thinking in terms of type scales and flexible spacing across your defined design space.” Richard Rutter goes retrofitting a new type sizing technique into an old layout. Miriam is also thinking about all this. Richard also has a good one on avoiding faux bold, which has afflicted me many times. My hot take is that browsers shouldn’t do faux nuthin.
* Font: “To help young readers of all skill levels, we’re introducing Kermit, a child-friendly typeface created by the type design studio Underware.” It’s fairly pricey but I can imagine it being perfect for some projects. Like Comic Sans but cooler. P.S. you should really try Comic Code on CodePen, it’s awesome.
* Fonts: “UNCUT.wtf is a free typeface catalogue, focusing on somewhat contemporary type.” A lot of them are super similar which makes me wonder if many of them come from students taking a design class or something.
* Journey: “One day, I saw what felt like Gorton on a ferry traversing the waters Bay Area. A few weeks later, I spotted it on a sign in a national park. Then on an intercom. On a street lighting access cover. In an elevator. At my dentist’s office. In an alley.” Marcin Wichary on Manhattan’s hardest working typeface.
* Performance: “… file sizes of web fonts? I personally don’t have a gut feeling how much is too much and how much is to be expected.” Stoyan Stefanov reckons 20k is fair.
* Behind the Scenes: “This meant that on web we could simply start our font stacks with
Verdana, pick a couple of reasonable fallbacks, and get IKEA branding effectively for free.” IKEA didn’t end up using Verdana, but I wish they did, I kinda love it at small sizes. This is a great look at a major typographic choice at a major brand from Robin Whittleton.* Technique: “…we added
text-wrap: balance on WordPress.org, and quickly got community feedback that it led to awkward, unexpected breaks in Japanese and Korean.” Kelly Choyce-Dwan whips out stuff like word-break: auto-phrase; for the win.<div class="glass-box">
<h3>Hello UI!</h3>
</div>
<style>
.glass-box {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 20px;
border-radius: 10px;
color: white;
}
body {
background: url('https://picsum.photos/800/600') no-repeat center/cover;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
</style>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apple Logo SVG</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f5f5f7;
}
.apple-logo {
width: 150px;
height: 150px;
}
.apple-logo:hover {
filter: drop-shadow(0 0 8px rgba(0, 0, 0, 0.3));
}
</style>
</head>
<body>
<svg class="apple-logo" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<!-- Apple logo shape -->
<path d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"
fill="#000"/>
</svg>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Neon Watch</title>
<style>
body {
margin: 0;
height: 100vh;
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Courier New', Courier, monospace;
}
.watch {
color: #0ff;
font-size: 5em;
text-shadow:
0 0 5px #0ff,
0 0 10px #0ff,
0 0 20px #0ff,
0 0 40px #f0f,
0 0 80px #f0f;
transition: text-shadow 0.5s ease-in-out;
}
.watch:hover {
text-shadow:
0 0 10px #0ff,
0 0 20px #0ff,
0 0 40px #0ff,
0 0 80px #f0f,
0 0 160px #f0f;
}
</style>
</head>
<body>
<div class="watch" id="neonWatch">00:00:00</div>
<script>
function updateClock() {
const now = new Date();
let hours = now.getHours().toString().padStart(2, '0');
let minutes = now.getMinutes().toString().padStart(2, '0');
let seconds = now.getSeconds().toString().padStart(2, '0');
document.getElementById('neonWatch').textContent = `${hours}:${minutes}:${seconds}`;
}
setInterval(updateClock, 1000);
updateClock(); // Initial call to display time immediately
</script>
</body>
</html>