<!DOCTYPE html>
<html>
<head>
<title>SMS</title>
<style>
body{font-family:sans-serif;background:#111;color:#eee;padding:20px}
input,button{padding:10px;margin:8px 0;width:100%;max-width:400px}
button{background:#e33;color:white;border:none}
#log{max-height:200px;overflow:auto;background:#222;padding:10px}
</style>
</head>
<body>
<input id="key" placeholder="API key (textbelt = free/limited)" value="textbelt"><br>
<input id="phone" placeholder="Phone + country code e.g. +12025550123"><br>
<input id="msg" placeholder="Message text"><br>
<input id="count" type="number" value="5" min="1" max="50"><br>
<button onclick="go()">Send</button>
<button onclick="stop=1">Stop</button>
<div id="log"></div>
<script>
let stop = 0;
async function go() {
stop = 0;
const key = document.getElementById('key').value.trim() || 'textbelt';
const phone = document.getElementById('phone').value.trim();
const msg = document.getElementById('msg').value.trim();
const n = +document.getElementById('count').value || 5;
if (!phone || !msg) return log("Missing phone or message");
const logEl = document.getElementById('log');
logEl.innerHTML = '';
for(let i = 1; i <= n; i++) {
if (stop) {
log("Stopped");
return;
}
try {
const r = await fetch('https://textbelt.com/text', {
method: 'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: `phone=${encodeURIComponent(phone)}&message=${encodeURIComponent(msg)}&key=${key}`
});
const d = await r.json();
log(`${i}/${n} ${d.success ? 'OK' : 'FAIL'} ${d.message||''} quota: ${d.quotaRemaining??'?'}`,
d.success ? '#0f8' : '#f44');
} catch(e) {
log(`${i}/${n} Network error: ${e}`, '#f44');
}
await new Promise(r => setTimeout(r, 1800)); // minimal polite delay
}
log("Finished");
}
function log(txt, color='#8f8') {
const div = document.createElement('div');
div.textContent = `[${new Date().toLocaleTimeString()}] ${txt}`;
if (color) div.style.color = color;
document.getElementById('log').appendChild(div);
div.scrollIntoView();
}
</script>
</body>
</html>
Try it now: use key=textbelt to send 1 free text per day.❤1
Html codes
Photo
CodePen Blog
Chris’ Corner: Even Grids
It’s always interesting observing multiple people attack the same problem. Sometimes they aren’t even aware of each other. Like how Isaac Newton invented calculus in the mid 1660’s in England, then Gottfried Leibniz did the same a decade or so later, independently (or so it is said).
I just read Ibrahim Bendebka’s recent take on Flexbox Masonry Layout. This approach is thick with mathematics, which I cannot pretend to fully understand. I understand the requirements, though, as it’s having a bunch of elements with known aspect ratios laid out into rows that cleanly fill the horizontal space. You don’t get that behavior by default, so it requires using
https://blog.codepen.io/wp-content/uploads/2026/03/Screenshot-2026-03-18-at-10.05.40-AM-1024x524.png
Late last year, Ian Kilpatrick came across the same exact idea in Exploiting flex-grow for an Image Gallery, and I really have no idea whether Ibrahim and Ian know of each other. But in both cases, the aspect ratio is calculated and used. This is necessary to keep the elements of equal height and exploit how
* (2019) Tim Van Damme worked out an Adaptive Photo Layout with Flexbox which is much simpler and very close to the same, just doesn’t match aspect ratios perfectly.
* (2022) Nils Binder wrote Building a combined CSS-aspect-ratio-grid which lands in exactly the same place, starting with pre-calculated aspect ratios.
* (2015!) Kartik Prabhu has probably the earliest take with Equal Height Images with Flexbox, literally latching onto
In a related vein, I enjoyed Rostislav Melkumyan’s take on “The logo soup problem”. This problem also has many solutions over many years. The idea is similar in that logos can have extremely different aspect ratios. And just plopping them into a grid without much thought it almost sure to make them look awkward.
The solution presented here requires more work that just aspect ratio alone. There is also a scaling factor that needs to be tweaked to balance the logos, as a start. But each logo can have a different “visual weight” which is really the thing that can throw a grid of logos off, visually. Fortunately even that can be calculated with “pixel density” and used as additional scaling information. https://blog.codepen.io/wp-content/uploads/2026/03/logo-soup-1024x173.avif These grids typically have something of a “masonry” feel to them in that the grid lines aren’t straight both vertically and horizontally. Although, as weird as it is, “masonry” usually refers to straight vertical lines and staggered horizontal ones (like a brick wall turned sideways). This has been the subject of much standards work over many years, but the answer to this style of layout is called “grid lanes“. Me, I’m using BaseWatch to get notified when it’s more ready to use.
Lemme leave you with three more layout related links to close out:
* CSS Grid: A helpful mental model and the power of grid lines by Saron Yitbarek
* Understanding the fundamentals of CSS Layout by Kilian Valkhof
* (Course) The Layout Maestro by Ahmad Shadeed
Chris’ Corner: Even Grids
It’s always interesting observing multiple people attack the same problem. Sometimes they aren’t even aware of each other. Like how Isaac Newton invented calculus in the mid 1660’s in England, then Gottfried Leibniz did the same a decade or so later, independently (or so it is said).
I just read Ibrahim Bendebka’s recent take on Flexbox Masonry Layout. This approach is thick with mathematics, which I cannot pretend to fully understand. I understand the requirements, though, as it’s having a bunch of elements with known aspect ratios laid out into rows that cleanly fill the horizontal space. You don’t get that behavior by default, so it requires using
aspect-ratio that you calculate and then also apply to flex-grow, so it requires understanding the flexbox model pretty deeply. https://blog.codepen.io/wp-content/uploads/2026/03/Screenshot-2026-03-18-at-10.05.40-AM-1024x524.png
Late last year, Ian Kilpatrick came across the same exact idea in Exploiting flex-grow for an Image Gallery, and I really have no idea whether Ibrahim and Ian know of each other. But in both cases, the aspect ratio is calculated and used. This is necessary to keep the elements of equal height and exploit how
flex-grow works to get even edges. https://blog.codepen.io/wp-content/uploads/2026/03/hero-1024x810.jpg Ian was aware of Antin Harasymiv’s take in Building the Google Photos Web UI from 2018, but it didn’t detail the specific web-based layout solution to get there. https://blog.codepen.io/wp-content/uploads/2026/03/1_GfYo2WZaEjsfGjKKCmkXdw-1024x343.webp I’d stop there, because that’s already pretty interesting seeing three people very mentally invested in this exact same problem. But of course there are more. * (2019) Tim Van Damme worked out an Adaptive Photo Layout with Flexbox which is much simpler and very close to the same, just doesn’t match aspect ratios perfectly.
* (2022) Nils Binder wrote Building a combined CSS-aspect-ratio-grid which lands in exactly the same place, starting with pre-calculated aspect ratios.
* (2015!) Kartik Prabhu has probably the earliest take with Equal Height Images with Flexbox, literally latching onto
flex-grow and its “weird” behavior.In a related vein, I enjoyed Rostislav Melkumyan’s take on “The logo soup problem”. This problem also has many solutions over many years. The idea is similar in that logos can have extremely different aspect ratios. And just plopping them into a grid without much thought it almost sure to make them look awkward.
The solution presented here requires more work that just aspect ratio alone. There is also a scaling factor that needs to be tweaked to balance the logos, as a start. But each logo can have a different “visual weight” which is really the thing that can throw a grid of logos off, visually. Fortunately even that can be calculated with “pixel density” and used as additional scaling information. https://blog.codepen.io/wp-content/uploads/2026/03/logo-soup-1024x173.avif These grids typically have something of a “masonry” feel to them in that the grid lines aren’t straight both vertically and horizontally. Although, as weird as it is, “masonry” usually refers to straight vertical lines and staggered horizontal ones (like a brick wall turned sideways). This has been the subject of much standards work over many years, but the answer to this style of layout is called “grid lanes“. Me, I’m using BaseWatch to get notified when it’s more ready to use.
Lemme leave you with three more layout related links to close out:
* CSS Grid: A helpful mental model and the power of grid lines by Saron Yitbarek
* Understanding the fundamentals of CSS Layout by Kilian Valkhof
* (Course) The Layout Maestro by Ahmad Shadeed
Flexbox “Even Grid” Cards (no CSS Grid)
Goal: cards in rows where every row stretches evenly, with consistent gaps.
✅ How it works
- Container: display:flex + flex-wrap:wrap
- Cards: flex: 1 1 240px → grow evenly, wrap when too narrow
- Optional cap: max-width to prevent huge cards
Tip: remove max-width if you want cards to fully fill each row.
#css #flexbox #webdev #frontend
📢 Made with Inside
Goal: cards in rows where every row stretches evenly, with consistent gaps.
✅ How it works
- Container: display:flex + flex-wrap:wrap
- Cards: flex: 1 1 240px → grow evenly, wrap when too narrow
- Optional cap: max-width to prevent huge cards
.cards{
display:flex;
flex-wrap:wrap;
gap:16px;
}
.card{
flex:1 1 240px; /* min ~240px, then distribute space */
max-width:340px; /* optional: keeps rows looking even */
padding:16px;
border:1px solid #2a2a2a;
border-radius:12px;
background:#121212;
}
Tip: remove max-width if you want cards to fully fill each row.
#css #flexbox #webdev #frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
PHP Contact Form: Server-side validation (minimal)
Never trust client-side JS-validate on the server.
Anti-spam note: add a honeypot field (hidden input) + basic rate limit by IP.
#php #webdev #security #forms
Never trust client-side JS-validate on the server.
<?php
// contact.php
header('Content-Type: application/json');
$in = filter_input_array(INPUT_POST, [
'name' => FILTER_SANITIZE_FULL_SPECIAL_CHARS,
'email' => FILTER_SANITIZE_EMAIL,
'message' => FILTER_SANITIZE_FULL_SPECIAL_CHARS,
'hp' => FILTER_UNSAFE_RAW, // honeypot
]);
if (!empty($in['hp'])) exit(json_encode(['ok'=>false])); // bot
$name = trim($in['name'] ?? '');
$email = trim($in['email'] ?? '');
$msg = trim($in['message'] ?? '');
if ($name==='' || $msg==='' || !filter_var($email, FILTER_VALIDATE_EMAIL)) {
http_response_code(422);
exit(json_encode(['ok'=>false,'error'=>'Invalid input']));
}
// TODO: mail() or SMTP here
exit(json_encode(['ok'=>true]));
Anti-spam note: add a honeypot field (hidden input) + basic rate limit by IP.
#php #webdev #security #forms
CSS Skeleton Loading (pure CSS)
Drop-in shimmer placeholder for cards, lists, avatars.
Snippet
Use
Knobs
#css #frontend #webdev #ui
@html_codee
Drop-in shimmer placeholder for cards, lists, avatars.
Snippet
.skeleton{--bg:#1f1f1f;--shine:#2b2b2b;--r:12px;--d:1.2s;background:linear-gradient(90deg,var(--bg) 25%,var(--shine) 37%,var(--bg) 63%);background-size:400% 100%;border-radius:var(--r);animation:shimmer var(--d) ease-in-out infinite}@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}Use
<div class="skeleton" style="height:140px"></div>
Knobs
--bg, --shine, --r, --d#css #frontend #webdev #ui
@html_codee
What is the purpose of the <label> tag?
Anonymous Quiz
29%
A) To enlarge text
43%
B) To provide a label for an input field
14%
C) To create a table
14%
D) To change color
Which of the following HTML codes are you interested in?
Anonymous Poll
46%
Website
23%
Game
15%
Animation
46%
Tool
23%
Others
/**
* Function to get the user's IP address using WebRTC.
* This technique explores ICE candidates to find local and public IPs.
*/
async function getUserIP() {
try {
// Create a new RTCPeerConnection with a Google STUN server
const pc = new RTCPeerConnection({
iceServers: [{ urls: "stun:://google.com" }]
});
// Create a dummy data channel to trigger ICE candidate gathering
pc.createDataChannel("");
// Set local description to start the gathering process
const offer = await pc.createOffer();
await pc.setLocalDescription(offer);
// Listen for ICE candidates
pc.onicecandidate = (event) => {
if (!event || !event.candidate) return;
const candidate = event.candidate.candidate;
// Regex to extract IPv4 and IPv6 addresses
const ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3}|[a-f0-9]{1,4}(:[a-f0-9]{1,4}){7})/;
const match = ipRegex.exec(candidate);
if (match) {
const ipAddress = match[1];
console.log("Found IP Address:", ipAddress);
}
};
} catch (error) {
console.error("Error retrieving IP via WebRTC:", error);
}
}
// Execute the function
getUserIP();
🧩 Mini Tool: JSON Formatter + Minifier (Offline)
Paste messy JSON → get pretty + minified instantly 👇
✅ Use it to debug APIs, config files, and payloads.
#json #javascript #devtools #webdev #html
@html_codee
Paste messy JSON → get pretty + minified instantly 👇
<textarea id=j placeholder='Paste JSON...'></textarea>
<button onclick=f(2)>Format</button>
<button onclick=f(0)>Minify</button>
<pre id=o></pre>
<script>function f(s){try{o.textContent=JSON.stringify(JSON.parse(j.value),0,s)}catch(e){o.textContent='❌ Invalid JSON: '+e.message}}</script>
✅ Use it to debug APIs, config files, and payloads.
#json #javascript #devtools #webdev #html
@html_codee
❤1
CodePen Blog
Chris’ Corner: Design
Perfectionist?
So how can you tell when your perfectionist traits, which in many ways have aided your creative prowess, have gone too far? If you’re prone to obsession, especially when it comes to work, there’s always a way to justify why it’s worth the agony. But, as Siqi, renald and Pablo attest, getting bogged down in detail might be limiting you overall. When perfectionism makes you a better creative, and when it doesn’t
I’d like to see a little more perfectionism, I think.
At the risk of making every last damn thing about AI, I will here. I’ve seen, I think, more than my fair share of AI-generated UI. I’m more sick of it than I was of Bootstrap or Tailwind UI in their respective eras. I feel like there is an awful lot of one-shotting UIs (or minimal asks of AI to improve designs) out there, and while the tech doing it is impressive, I like seeing UI/UX that goes that extra mile (or extra 100 miles) to be, ya know, actually good.
Even these trends from last year, I’m not even close to sick of. I’ll hang out in your neobrutalism, bring it on. Honestly, I don’t even think AI does simplicity all that well. I think it would rather show off. Not that you can’t reign it in and make it do what you want, but AI probably isn’t that useful in true simplicity. The perfect typeface, the perfect line-length, the perfect line-height, the perfect font-size, the perfect hierarchy. That’s going to require your taste, even for just a page of only type. Charlie Deets reflects on the true purpose of all that:
Maybe simple design is valuable for intangible reasons. There is an art to simplicity. There is a beauty to simplicity. A user can see more of the product’s intentionality.
I like that. Simplicity isn’t just inherently good; it’s to showcase intentionality.
That reminds me of how Matt Ström-Awn thinks that UIs have become less dense. A subjective thing, to some degree, but I feel it’s related to showcasing intentionality. We don’t show 100 buttons on a page anymore, not because they aren’t useful, but because we’re smart enough to know that most users only need 3, and we can organize the others so they are still perfectly findable and usable for those who need the other 97.
Density, like simplicity, isn’t inherently good or bad, though.
In the end, though, making a UI dense in time and space is just a means to an end. No UI is valuable because of the way it looks. Interfaces are valuable in the outcomes they enable — whether directly associated with some dollar value, in the case of business software, or tied to some intangible value like entertainment or education.
I’ve certainly been in meetings where we’re trying to figure out ways not to have settings, for example. Most users never change them. The defaults matter several orders of magnitude more than what settings might enable.
And yet!
A great intro paragraph from Marcin Wichary:
As a designer, I’m meant to dislike settings. As a user, I love them. Every year I celebrate Settings Day: a day when I take a look at the options and toggles in all the apps I use. I do this out of curiosity – what was added since the last time I looked? – but also because I love this way of getting to know software: peeking under the hood, walking the back alleys, learning what has been tricky or important enough to be equipped with a checkbox.
I tend to think all this stuff can be true. Take care in your designs. Maybe too much care. Make them simple, but only when the simplicity serves as an underline to the most important functions. Make your designs breathe, but not at the cost of usability. Get those defaults right, but give your power users something to poke at.
Chris’ Corner: Design
Perfectionist?
So how can you tell when your perfectionist traits, which in many ways have aided your creative prowess, have gone too far? If you’re prone to obsession, especially when it comes to work, there’s always a way to justify why it’s worth the agony. But, as Siqi, renald and Pablo attest, getting bogged down in detail might be limiting you overall. When perfectionism makes you a better creative, and when it doesn’t
I’d like to see a little more perfectionism, I think.
At the risk of making every last damn thing about AI, I will here. I’ve seen, I think, more than my fair share of AI-generated UI. I’m more sick of it than I was of Bootstrap or Tailwind UI in their respective eras. I feel like there is an awful lot of one-shotting UIs (or minimal asks of AI to improve designs) out there, and while the tech doing it is impressive, I like seeing UI/UX that goes that extra mile (or extra 100 miles) to be, ya know, actually good.
Even these trends from last year, I’m not even close to sick of. I’ll hang out in your neobrutalism, bring it on. Honestly, I don’t even think AI does simplicity all that well. I think it would rather show off. Not that you can’t reign it in and make it do what you want, but AI probably isn’t that useful in true simplicity. The perfect typeface, the perfect line-length, the perfect line-height, the perfect font-size, the perfect hierarchy. That’s going to require your taste, even for just a page of only type. Charlie Deets reflects on the true purpose of all that:
Maybe simple design is valuable for intangible reasons. There is an art to simplicity. There is a beauty to simplicity. A user can see more of the product’s intentionality.
I like that. Simplicity isn’t just inherently good; it’s to showcase intentionality.
That reminds me of how Matt Ström-Awn thinks that UIs have become less dense. A subjective thing, to some degree, but I feel it’s related to showcasing intentionality. We don’t show 100 buttons on a page anymore, not because they aren’t useful, but because we’re smart enough to know that most users only need 3, and we can organize the others so they are still perfectly findable and usable for those who need the other 97.
Density, like simplicity, isn’t inherently good or bad, though.
In the end, though, making a UI dense in time and space is just a means to an end. No UI is valuable because of the way it looks. Interfaces are valuable in the outcomes they enable — whether directly associated with some dollar value, in the case of business software, or tied to some intangible value like entertainment or education.
I’ve certainly been in meetings where we’re trying to figure out ways not to have settings, for example. Most users never change them. The defaults matter several orders of magnitude more than what settings might enable.
And yet!
A great intro paragraph from Marcin Wichary:
As a designer, I’m meant to dislike settings. As a user, I love them. Every year I celebrate Settings Day: a day when I take a look at the options and toggles in all the apps I use. I do this out of curiosity – what was added since the last time I looked? – but also because I love this way of getting to know software: peeking under the hood, walking the back alleys, learning what has been tricky or important enough to be equipped with a checkbox.
I tend to think all this stuff can be true. Take care in your designs. Maybe too much care. Make them simple, but only when the simplicity serves as an underline to the most important functions. Make your designs breathe, but not at the cost of usability. Get those defaults right, but give your power users something to poke at.
CodePen
Chris’ Corner: Design
Perfectionist? So how can you tell when your perfectionist traits, which in many ways have aided your creative prowess, have gone too far? If you’re prone to obsession, especially when it comes to …
CodePen Blog
421: View Control of the 2.0 Editor
Stephen & Chris look at the UI of the 2.0 Editor and show all the control you have over what you’re looking at. Way more control than the Classic editor! We share some of the thinking behind it. Don’t miss the Omnibar!
Time Jumps
* 00:00:07 What speed does your brain run at?
* 00:02:23 What can you control in the view in the new editor?
* 00:06:11 The editor is on the left by default
* 00:07:23 The CodePen omnibar CMD-K
* 00:16:23 The deployment panel
* 00:18:09 Privacy and collaboration
* 00:19:42 Details view
* 00:24:17 Minimal UI view
* 00:27:45 What’s in the footer?
* 00:31:14 Context menus available on right click
Links
* Circle Round
* Story Pirates Podcast
* Who Moved My Cheese?
* The freeCodeCamp Podcast
421: View Control of the 2.0 Editor
Stephen & Chris look at the UI of the 2.0 Editor and show all the control you have over what you’re looking at. Way more control than the Classic editor! We share some of the thinking behind it. Don’t miss the Omnibar!
Time Jumps
* 00:00:07 What speed does your brain run at?
* 00:02:23 What can you control in the view in the new editor?
* 00:06:11 The editor is on the left by default
* 00:07:23 The CodePen omnibar CMD-K
* 00:16:23 The deployment panel
* 00:18:09 Privacy and collaboration
* 00:19:42 Details view
* 00:24:17 Minimal UI view
* 00:27:45 What’s in the footer?
* 00:31:14 Context menus available on right click
Links
* Circle Round
* Story Pirates Podcast
* Who Moved My Cheese?
* The freeCodeCamp Podcast
CodePen
421: View Control of the 2.0 Editor
Stephen & Chris look at the UI of the 2.0 Editor and show all the control you have over what you’re looking at. Way more control than the Classic editor! We share some of the thinking beh…