Which one is interesting to you?
Anonymous Poll
50%
Html & programming guides
50%
Code files
0%
Fun facts about programming
0%
Q&A forum
0%
Other
Which of the following is the container for <th>, and <td> ?
Anonymous Quiz
0%
<data>
75%
<table>
0%
<group>
25%
All of the above
Html codes
Photo
CodePen Blog
Chris’ Corner: Design Do’s and Don’ts
I admit I’m a sucker for “do this; don’t do that” (can’t you read the sign) blog posts when it comes to design. Screw nuance, gimme answers. Anthony Hobday has a pretty good one in Visual design rules you can safely follow every time. https://blog.codepen.io/wp-content/uploads/2025/05/15.png Makes sense to me; ship it.
Erik Kennedy does a pretty good job with posts in this vein, and I just read one about designing sidebars in his email newsletter. But he didn’t blog it so I can’t link to it. Instead I’ll link to his 15 Tips for Better Signup / Login UX which is the same kinda “do this” advice. https://blog.codepen.io/wp-content/uploads/2025/05/mobile-email-keyboard-1024x824.png I perish each time I have to hunt manually for the @
Jon Yablonski’s Laws of UX site is a pretty good example of this too, except the “do this” advice is more like “think about this principle”. They are pretty straightforward though, like: https://blog.codepen.io/wp-content/uploads/2025/05/Screenshot-2025-05-13-at-11.13.52 AM-771x1024.png Welp now that we’ve linked up a bunch of design related stuff I’d better keep going. My pockets are always hot with links. I’m like and old man except instead of Wether’s Originals I have great URLs.
If I had to design some shirts and hoodies and coats and stuff, I’d definitely want some clean templates to use, so I think these 45 fully editable apparel templates from atipo is pretty sweet. (€30.00 with a bunch of fonts too) https://blog.codepen.io/wp-content/uploads/2025/05/sudade15-1024x903.jpg Not Boring software rules. They have some really nice apps that feel very designed. I use their Habits app every day. They’ve got a nice blog post on the role of sound in software design. It’s common to think that software that makes any sound is a mistake as it’s just obnoxious or superfluous. I like this one:
4. Shape a feeling. Sound can play a key role in queueing us in on how we should feel in a moment—happy, reflective, alert. In the todo app Clear, successively checking things off a list plays a rising set of notes that builds a sense of accomplishment.
Is “good” and “bad” web design subjective (like just our opinions) or objective (provable with data)? I mean, that’s subjective, lol. Remy Sharp was thinking about it recently and has developed his own set of criteria. A simple one:
Is the main content the main content item? Put another way, is the content hidden (or fighting) clutter on the page?
Seems simple, but… not always. I was reviewing a site recently and the homepage had just a zillion things it was trying to say. It was a store, so there were locations, an invite to search, an invite to call, and invite to chat, discounts available, a current promotion, financing available, categories for browsing, upcoming events, etc, etc. The thing is, it’s easy to point at it and say Mess! — all that stuff is there because it’s important to somebody in the organization. Deciding on what even “the content” is can be tricky. I always think the homepage probably isn’t the best place to start a big debate like this. Clean up the more focused pages first. https://blog.codepen.io/wp-content/uploads/2025/05/flowing-shader-1024x721.png Let’s end with something beautiful, like these flowing WebGL gradients by Alex Harri. I loved the mathematical intro on doing all this pixel by pixel work manually, then how to shift the responsibility of that work:
But consider the amount of work that needs to be done. A 1,000✕300 canvas, for example, contains 300,000 pixels. That’s 300,000 invocations of our pixel function every frame — a ton of work for a CPU to perform 60 times a second! This is where WebGL comes in.
Shaders are a real journey, but I bet if you read every word of this post closely you’d be well on your way.
Chris’ Corner: Design Do’s and Don’ts
I admit I’m a sucker for “do this; don’t do that” (can’t you read the sign) blog posts when it comes to design. Screw nuance, gimme answers. Anthony Hobday has a pretty good one in Visual design rules you can safely follow every time. https://blog.codepen.io/wp-content/uploads/2025/05/15.png Makes sense to me; ship it.
Erik Kennedy does a pretty good job with posts in this vein, and I just read one about designing sidebars in his email newsletter. But he didn’t blog it so I can’t link to it. Instead I’ll link to his 15 Tips for Better Signup / Login UX which is the same kinda “do this” advice. https://blog.codepen.io/wp-content/uploads/2025/05/mobile-email-keyboard-1024x824.png I perish each time I have to hunt manually for the @
Jon Yablonski’s Laws of UX site is a pretty good example of this too, except the “do this” advice is more like “think about this principle”. They are pretty straightforward though, like: https://blog.codepen.io/wp-content/uploads/2025/05/Screenshot-2025-05-13-at-11.13.52 AM-771x1024.png Welp now that we’ve linked up a bunch of design related stuff I’d better keep going. My pockets are always hot with links. I’m like and old man except instead of Wether’s Originals I have great URLs.
If I had to design some shirts and hoodies and coats and stuff, I’d definitely want some clean templates to use, so I think these 45 fully editable apparel templates from atipo is pretty sweet. (€30.00 with a bunch of fonts too) https://blog.codepen.io/wp-content/uploads/2025/05/sudade15-1024x903.jpg Not Boring software rules. They have some really nice apps that feel very designed. I use their Habits app every day. They’ve got a nice blog post on the role of sound in software design. It’s common to think that software that makes any sound is a mistake as it’s just obnoxious or superfluous. I like this one:
4. Shape a feeling. Sound can play a key role in queueing us in on how we should feel in a moment—happy, reflective, alert. In the todo app Clear, successively checking things off a list plays a rising set of notes that builds a sense of accomplishment.
Is “good” and “bad” web design subjective (like just our opinions) or objective (provable with data)? I mean, that’s subjective, lol. Remy Sharp was thinking about it recently and has developed his own set of criteria. A simple one:
Is the main content the main content item? Put another way, is the content hidden (or fighting) clutter on the page?
Seems simple, but… not always. I was reviewing a site recently and the homepage had just a zillion things it was trying to say. It was a store, so there were locations, an invite to search, an invite to call, and invite to chat, discounts available, a current promotion, financing available, categories for browsing, upcoming events, etc, etc. The thing is, it’s easy to point at it and say Mess! — all that stuff is there because it’s important to somebody in the organization. Deciding on what even “the content” is can be tricky. I always think the homepage probably isn’t the best place to start a big debate like this. Clean up the more focused pages first. https://blog.codepen.io/wp-content/uploads/2025/05/flowing-shader-1024x721.png Let’s end with something beautiful, like these flowing WebGL gradients by Alex Harri. I loved the mathematical intro on doing all this pixel by pixel work manually, then how to shift the responsibility of that work:
But consider the amount of work that needs to be done. A 1,000✕300 canvas, for example, contains 300,000 pixels. That’s 300,000 invocations of our pixel function every frame — a ton of work for a CPU to perform 60 times a second! This is where WebGL comes in.
Shaders are a real journey, but I bet if you read every word of this post closely you’d be well on your way.
<?php
/**
* Quotes Generator API
*
* Usage:
* Request: GET /quotes-api.php
* Response:
* {
* "quote": "The only way to do great work is to love what you do.",
* "author": "Steve Jobs"
* }
*/
// Array of quotes
$quotes = [
["quote" => "The only way to do great work is to love what you do.", "author" => "Steve Jobs"],
["quote" => "Life is what happens when you're busy making other plans.", "author" => "John Lennon"],
["quote" => "Be yourself; everyone else is already taken.", "author" => "Oscar Wilde"],
["quote" => "If you want to live a happy life, tie it to a goal, not to people or things.", "author" => "Albert Einstein"],
["quote" => "Success is not final, failure is not fatal: It is the courage to continue that counts.", "author" => "Winston Churchill"],
["quote" => "Do not watch the clock. Do what it does. Keep going.", "author" => "Sam Levenson"],
["quote" => "In the middle of every difficulty lies opportunity.", "author" => "Albert Einstein"],
["quote" => "What we think, we become.", "author" => "Buddha"],
["quote" => "The mind is everything. What you think you become.", "author" => "Buddha"],
["quote" => "Happiness is not something ready made. It comes from your own actions.", "author" => "Dalai Lama"]
];
// Choose a random quote
$random_index = array_rand($quotes);
$random_quote = $quotes[$random_index];
// Set response headers
header('Content-Type: application/json; charset=utf-8');
header('Cache-Control: no-cache, no-store, must-revalidate');
header('Pragma: no-cache');
header('Expires: 0');
// Output the quote as JSON
echo json_encode($random_quote, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);
exit;
?>
God gave humans intellect; not to surrender it to artificial minds is the key to freedom. Let AI be the servant, not the master; l the mind is free, the future shines bright. The weapon is in your hand — wield it, but do not become its slave
Right?
CodePen Blog
Chris’ Corner: Doing a Good Job
This is a great story from Dan North about “The Worst Programmer I know”, Tim MacKinnon. It’s a story about measuring developer performance with metrics:
We were working for a well-known software consultancy at a Big Bank that decided to introduce individual performance metrics, “for appraisal and personal development purposes”. This was cascaded through the organisation, and landed in our team in terms of story points delivered. This was after some considered discussion from the department manager, who knew you shouldn’t measure things like lines of code or bugs found, because people can easily game these.
Scared? Maybe you can guess. Tim was very bad at metrics.
Tim’s score was consistently zero. Zero! Not just low, or trending downwards, but literally zero. Week after week, iteration after iteration. Zero points for Tim.
Why? Maybe you can guess again. Tim wasn’t playing that game, he was a true senior developer in the sense that he nurtured his team.
… he would spend his day pairing with different teammates. With less experienced developers he would patiently let them drive whilst nudging them towards a solution. He would not crowd them or railroad them, but let them take the time to learn whilst carefully crafting moments of insight and learning
Tim wasn’t delivering software; Tim was delivering a team that was delivering software.
Every organization is different though. Mercifully in the situation above, Dan protected Tim. But we can all imagine a situation where Tim was fired because of this silly measurement system. (That always reminds me of Cathy O’Neils Weapons of Math Destruction). Getting to know how the organization works, so you can work within it, is another approach that Cindy Sridharan advocates for. See: How to become a more effective engineer.
You can either complain and pontificate on Twitter on how the tech industry *should* ideally work, or you can learn how your org *really* works and what’s rewarded, and optimize for that.
Different organizations will have different paths to these answers. I’ll pluck off a few bullet points:
* exactly what technical skill you need to invest effort into getting better at, which will actually be rewarded
* how to build lasting relationships with other people on your team or organization that ultimately dictate the success of a project
* how to effectively pitch projects or improvements to leadership and actually see these through to completion
* how to weigh the pros and cons of technical choices in the larger context of the organizational realities and needs
* how to discern what’s achievable, and in precisely what time frame
Figure out who matters, what they care about, and how to effectively get things done. And don’t wait!
To build credibility, you need to demonstrate some impact early on, instead of waiting months to get the lie of the land before you start getting anything done. Chasing small wins and low-hanging fruit can be an easy path to productivity. Don’t underestimate their importance.
Another one I like in this realm of being a truly effective developer is Artem Zakirullin’s Cognitive load is what matters. A good developer can write code that themselves and others can read without being so complex that, well, you run out of mental capacity.
When reading code, you put things like values of variables, control flow logic and call sequences into your head. The average person can hold roughly four such chunks in working memory. Once the cognitive load reaches this threshold, it becomes much harder to understand things.
That tracks for me. I start tracing how code works, and I’m all good and have it in my head, then it feels like right at the fifth logical jump, my brain just dumps it all out and I’m lost. https://blog.codepen.io/wp-content/uploads/2025/05/cognitiveloadv6paper-1024x756.png I suspect it’s a talent of really great[...]
@html_codee
Chris’ Corner: Doing a Good Job
This is a great story from Dan North about “The Worst Programmer I know”, Tim MacKinnon. It’s a story about measuring developer performance with metrics:
We were working for a well-known software consultancy at a Big Bank that decided to introduce individual performance metrics, “for appraisal and personal development purposes”. This was cascaded through the organisation, and landed in our team in terms of story points delivered. This was after some considered discussion from the department manager, who knew you shouldn’t measure things like lines of code or bugs found, because people can easily game these.
Scared? Maybe you can guess. Tim was very bad at metrics.
Tim’s score was consistently zero. Zero! Not just low, or trending downwards, but literally zero. Week after week, iteration after iteration. Zero points for Tim.
Why? Maybe you can guess again. Tim wasn’t playing that game, he was a true senior developer in the sense that he nurtured his team.
… he would spend his day pairing with different teammates. With less experienced developers he would patiently let them drive whilst nudging them towards a solution. He would not crowd them or railroad them, but let them take the time to learn whilst carefully crafting moments of insight and learning
Tim wasn’t delivering software; Tim was delivering a team that was delivering software.
Every organization is different though. Mercifully in the situation above, Dan protected Tim. But we can all imagine a situation where Tim was fired because of this silly measurement system. (That always reminds me of Cathy O’Neils Weapons of Math Destruction). Getting to know how the organization works, so you can work within it, is another approach that Cindy Sridharan advocates for. See: How to become a more effective engineer.
You can either complain and pontificate on Twitter on how the tech industry *should* ideally work, or you can learn how your org *really* works and what’s rewarded, and optimize for that.
Different organizations will have different paths to these answers. I’ll pluck off a few bullet points:
* exactly what technical skill you need to invest effort into getting better at, which will actually be rewarded
* how to build lasting relationships with other people on your team or organization that ultimately dictate the success of a project
* how to effectively pitch projects or improvements to leadership and actually see these through to completion
* how to weigh the pros and cons of technical choices in the larger context of the organizational realities and needs
* how to discern what’s achievable, and in precisely what time frame
Figure out who matters, what they care about, and how to effectively get things done. And don’t wait!
To build credibility, you need to demonstrate some impact early on, instead of waiting months to get the lie of the land before you start getting anything done. Chasing small wins and low-hanging fruit can be an easy path to productivity. Don’t underestimate their importance.
Another one I like in this realm of being a truly effective developer is Artem Zakirullin’s Cognitive load is what matters. A good developer can write code that themselves and others can read without being so complex that, well, you run out of mental capacity.
When reading code, you put things like values of variables, control flow logic and call sequences into your head. The average person can hold roughly four such chunks in working memory. Once the cognitive load reaches this threshold, it becomes much harder to understand things.
That tracks for me. I start tracing how code works, and I’m all good and have it in my head, then it feels like right at the fifth logical jump, my brain just dumps it all out and I’m lost. https://blog.codepen.io/wp-content/uploads/2025/05/cognitiveloadv6paper-1024x756.png I suspect it’s a talent of really great[...]
@html_codee
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