Happy New Year! 🎉
I sincerely congratulate you with the coming New Year!
🎄 May the new year bring you new dreams, new hopes and new opportunities. May your achievements in the past year be stronger, and may the new year be remembered with new victories. I wish you good health, family happiness, peace and blessings. Happy New Year! ✨
I sincerely congratulate you with the coming New Year!
🎄 May the new year bring you new dreams, new hopes and new opportunities. May your achievements in the past year be stronger, and may the new year be remembered with new victories. I wish you good health, family happiness, peace and blessings. Happy New Year! ✨
Why is a computer mouse called a mouse?
The "mouse" 🐭 got its name from its resemblance to the actual animal the mouse and had a cord trailing behind it much like a mouse's tail. It was to small to be a rat. However a "rat" is an old term which refers to damaged or obsolete hardware or malicious software... We often referred to viruses and malware as rats 🐀 🐀 🐁
The "mouse" 🐭 got its name from its resemblance to the actual animal the mouse and had a cord trailing behind it much like a mouse's tail. It was to small to be a rat. However a "rat" is an old term which refers to damaged or obsolete hardware or malicious software... We often referred to viruses and malware as rats 🐀 🐀 🐁
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta content="width=device-width, initial-scale=1.0" name="viewport" />
<title>Mini Blog</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body class="bg-gray-100">
<div class="container mx-auto">
<header class="bg-blue-600 p-4">
<h1 class="text-white text-2xl">Mini Blog</h1>
</header>
<main class="p-4">
<div class="grid grid-cols-1 gap-4" id="blogPosts">
</div>
</main>
</div>
<script>
const blogPosts = [
{
image: "https://storage.googleapis.com/a1aa/image/U9MFSPdORsrsJ5qZ8Ah5e4a5fdf14d89enNNGW2rhQqSBIIQB.jpg",
title: "Exploring the Mountains",
description: "Join us as we explore the beautiful mountain ranges and discover the hidden gems within.",
likes: 0,
comments: [],
},
{
image: "https://storage.googleapis.com/a1aa/image/QjfoDwsfmZuiEUqTFrHZ1sKbzYWEDn8a9uNN9xqUyfggAEEoA.jpg",
title: "City Life Adventures",
description: "Experience the vibrant life of the city with our guide to the best spots and activities.", likes: 0,
comments: [],
},
{
image: "https://storage.googleapis.com/a1aa/image/3c1e1e1e1e1e1e1e1e1e1e1e1e1e1e1e1e1e1e1e1e1e1e1e.jpg",
title: "Culinary Delights",
description: "Discover the flavors of the world with our culinary adventures and recipes.",
likes: 0,
comments: [],
},
];
function renderPosts() {
const blogContainer = document.getElementById('blogPosts');
blogContainer.innerHTML = '';
blogPosts.forEach((post, index) => {
const postDiv = document.createElement('div');
postDiv.className = 'bg-white p-4 rounded-lg shadow-md';
postDiv.innerHTML = `
<img src="${post.image}" alt="${post.title}" class="w-full h-48 object-cover rounded-t-lg" />
<h2 class="text-xl font-bold mt-4">${post.title}</h2>
<p class="text-gray-700 mt-2">${post.description}</p>
<div class="flex justify-between items-center mt-4">
<button class="text-blue-600 hover:text-blue-800" onclick="likePost(${index})">
<i class="fas fa-thumbs-up"></i> Like <span id="likeCount-${index}">(${post.likes})</span>
</button>
<button class="text-blue-600 hover:text-blue-800" onclick="commentPost(${index})">
<i class="fas fa-comment"></i> Comment
</button>
<button class="text-blue-600 hover:text-blue-800" onclick="sharePost(${index})">
<i class="fas fa-share"></i> Share
</button>
</div>
`;
blogContainer.appendChild(postDiv);
});
}
function likePost(index) {
blogPosts[index].likes++;
renderPosts();
}
function commentPost(index) {
const comment = prompt("Enter your comment:");
if (comment) {
blogPosts[index].comments.push(comment);
alert("Comment added!");
}
}
function sharePost(index) {
alert(`Sharing post: ${blogPosts[index].title}`);
}
renderPosts();
</script>
</body>
</html>
SQUID game mini games web sitesi .html
5.3 KB
SQUID game mini games web sitesi .html
<html>
<head>
<title>
YouTube Premium Alternative
</title>
<script src="https://cdn.tailwindcss.com">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.3.11/vue.global.js">
</script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet"/>
<style>
body {
font-family: 'Roboto', sans-serif;
}
</style>
</head>
<body class="bg-gray-100">
<div class="max-w-4xl mx-auto p-4" id="app">
<div class="bg-white shadow-md rounded-lg overflow-hidden">
<div class="relative">
<img alt="A placeholder image of a video thumbnail with a play button in the center" class="w-full" height="450" src="https://storage.googleapis.com/a1aa/image/VDHNqPkNHeUnJKBWXmy8pqdtU4oMPe9vWe7RumN8NgR5h4EoA.jpg" width="800"/>
<button @click="subscribe" class="absolute top-2 right-2 bg-red-600 text-white px-4 py-2 rounded-full">
{{ subscribed ? 'Subscribed' : 'Subscribe' }}
</button>
</div>
<div class="p-4">
<h2 class="text-2xl font-bold mb-2">
Video Title
</h2>
<p class="text-gray-600 mb-4">
Channel Name
</p>
<div class="flex items-center mb-4">
<button @click="like" class="flex items-center text-gray-600 mr-4">
<i :class="['fas', liked ? 'fa-thumbs-up' : 'fa-thumbs-o-up', 'mr-2']">
</i>
Like
</button>
<button @click="dislike" class="flex items-center text-gray-600 mr-4">
<i :class="['fas', disliked ? 'fa-thumbs-down' : 'fa-thumbs-o-down', 'mr-2']">
</i>
Dislike
</button>
<button @click="toggleBackgroundPlay" class="flex items-center text-gray-600">
<i :class="['fas', backgroundPlay ? 'fa-pause' : 'fa-play', 'mr-2']">
</i>
{{ backgroundPlay ? 'Stop Background Play' : 'Background Play' }}
</button>
</div>
<p class="text-gray-800">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
</div>
</div>
<script>
const { createApp, ref } = Vue;
createApp({
setup() {
const subscribed = ref(false);
const liked = ref(false);
const disliked = ref(false);
const backgroundPlay = ref(false);
const subscribe = () => {
subscribed.value = !subscribed.value;
};
const like = () => {
liked.value = !liked.value;
if (liked.value) {
disliked.value = false;
}
};
const dislike = () => {
disliked.value = !disliked.value;
if (disliked.value) {
liked.value = false;
}
};
const toggleBackgroundPlay = () => {
backgroundPlay.value = !backgroundPlay.value;
};
return {
subscribed,
liked,
disliked,
backgroundPlay,
subscribe,
like,
dislike,
toggleBackgroundPlay
};
}
}).mount('#app');
</script>
</body>
</html>
CodePen Blog
Chris’ Corner: User Control
Like Miriam Suzanne says:
You’re allowed to have preferences. Set your preferences.
I like the idea of controlling my own experience when browsing and using the web. Bump up that default font size, you’re worth it.
Here’s another version of control. If you publish a truncated RSS feed on your site, but the site itself has more content, I reserve the right to go fetch that content and read it through a custom RSS feed. I feel like that’s essentially the same thing as if I had an elaborate user stylesheet that I applied just to that website that made it look how I wanted it to look. It would be weird to be anti user-stylesheet.
I probably don’t take enough control over my own experience on sites, really. Sometimes it’s just a time constraint where I don’t have the spoons to do a bunch of customization. But the spoon math changes when it has to do with doing my job better.
I was thinking about this when someone poked me that an article I published had a wrong link in it. As I was writing it in WordPress, somehow I linked the link to some internal admin screen URL instead of where I was trying to link to. Worse, I bet I’ve made that same mistake 10 times this year. I don’t know what the heck the problem is (some kinda fat finger issue, probably) but the same problem is happening too much.
What can help? User stylesheets can help! I love it when CSS helps me do my job in weird subtle ways better. I’ve applied this CSS now:
That first class is just something to scope down the editor area in WordPress, then I select any links that have “wp-admin” in them, which I almost certainly do not want to be linking to, and show a visual warning. It’s a little silly, but it will literally work to stop this mistake I keep making.
I find it surprising that only Safari has entirely native support for a linking up your own user CSS, but there are ways to do it via extension or other features in all browsers.
Welp now that we’re talking about CSS I can’t help but share some of my favorite links in that area now.
Dave put his finger on an idea I’m wildly jealous of: CSS wants to be a system. Yes! It so does! CSS wants to be a system! Alone, it’s just selectors, key/value pairs, and a smattering of other features. It doesn’t tell you how to do it, it is lumber and hardware saying build me into a tower! And also: do it your way! And the people do. Some people’s personality is: I have made this system, follow me, disciples, and embrace me. Other people’s personality is: I have also made a system, it is mine, my own, my prec… please step back behind the rope.
Annnnnnd more.
* CSS Surprise Manga Lines from Alvaro are fun and weird and clever.
* Whirl: “CSS loading animations with minimal effort!” Jhey’s got 108 of them open sourced so far (like, 5 years ago, but I’m just seeing it.)
* Next-level frosted glass with
* Custom Top and Bottom CSS Container Masks from Andrew is a nice technique. I like the idea of a “safe” way to build non-rectangular containers where the content you put inside is actually placed safely.
Chris’ Corner: User Control
Like Miriam Suzanne says:
You’re allowed to have preferences. Set your preferences.
I like the idea of controlling my own experience when browsing and using the web. Bump up that default font size, you’re worth it.
Here’s another version of control. If you publish a truncated RSS feed on your site, but the site itself has more content, I reserve the right to go fetch that content and read it through a custom RSS feed. I feel like that’s essentially the same thing as if I had an elaborate user stylesheet that I applied just to that website that made it look how I wanted it to look. It would be weird to be anti user-stylesheet.
I probably don’t take enough control over my own experience on sites, really. Sometimes it’s just a time constraint where I don’t have the spoons to do a bunch of customization. But the spoon math changes when it has to do with doing my job better.
I was thinking about this when someone poked me that an article I published had a wrong link in it. As I was writing it in WordPress, somehow I linked the link to some internal admin screen URL instead of where I was trying to link to. Worse, I bet I’ve made that same mistake 10 times this year. I don’t know what the heck the problem is (some kinda fat finger issue, probably) but the same problem is happening too much.
What can help? User stylesheets can help! I love it when CSS helps me do my job in weird subtle ways better. I’ve applied this CSS now:
.editor-visual-editor a[href*="/wp-admin/"]::after {
content: " DERP!";
color: red;
} That first class is just something to scope down the editor area in WordPress, then I select any links that have “wp-admin” in them, which I almost certainly do not want to be linking to, and show a visual warning. It’s a little silly, but it will literally work to stop this mistake I keep making.
I find it surprising that only Safari has entirely native support for a linking up your own user CSS, but there are ways to do it via extension or other features in all browsers.
Welp now that we’re talking about CSS I can’t help but share some of my favorite links in that area now.
Dave put his finger on an idea I’m wildly jealous of: CSS wants to be a system. Yes! It so does! CSS wants to be a system! Alone, it’s just selectors, key/value pairs, and a smattering of other features. It doesn’t tell you how to do it, it is lumber and hardware saying build me into a tower! And also: do it your way! And the people do. Some people’s personality is: I have made this system, follow me, disciples, and embrace me. Other people’s personality is: I have also made a system, it is mine, my own, my prec… please step back behind the rope.
Annnnnnd more.
* CSS Surprise Manga Lines from Alvaro are fun and weird and clever.
* Whirl: “CSS loading animations with minimal effort!” Jhey’s got 108 of them open sourced so far (like, 5 years ago, but I’m just seeing it.)
* Next-level frosted glass with
backdrop-filter. Josh covers ideas (with credit all the way back to Jamie Gray) related to the “blur the stuff behind it” look. Yes, backdrop-filter does the heavy lifting, but there are SO MANY DETAILS to juice it up.* Custom Top and Bottom CSS Container Masks from Andrew is a nice technique. I like the idea of a “safe” way to build non-rectangular containers where the content you put inside is actually placed safely.