Explore snippets
Discover reusable code snippets, examples, fixes, and ideas shared by developers, students, and teams.
Debounce Function
A reusable debounce helper for search inputs and resize handlers.
function debounce(callback, delay = 300) {
let timerId;
return function (...args) {
clearTimeout(timerId);
timerId = setTimeout(() => {
callback.apply(this, args);
}, delay);
};
}
const handleSearch = debounce((event) => {
Copy Text to Clipboard
A vanilla JavaScript helper to copy text to the clipboard with a fallback message.
async function copyText(text) {
try {
await navigator.clipboard.writeText(text);
console.log('Copied to clipboard');
return true;
} catch (error) {
console.error('Clipboard copy failed:', error);
return false;
}
}
Fade In Utility Class
A reusable CSS fade-in animation utility class.
.fade-in {
animation: fade-in 300ms ease both;
}
@keyframes fade-in {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}Responsive CSS Grid Gallery
A responsive gallery layout using CSS grid and auto-fit.
.gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
}
.gallery img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 0.75rem;
}Card Hover Lift
A small hover effect that lifts a card with transition and shadow.
.hover-card {
border-radius: 1rem;
background: #fff;
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
transition: transform 180ms ease, box-shadow 180ms ease;
}
.hover-card:hover {
transform: translateY(-4px);CSS Loading Spinner
A small pure CSS loading spinner using border animation.
.spinner {
width: 40px;
height: 40px;
border: 4px solid #e5e7eb;
border-top-color: #4f46e5;
border-radius: 50%;
animation: spin 0.75s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}Button Pulse Animation
A simple CSS pulse effect for call-to-action buttons.
.button-pulse {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.25rem;
border-radius: 999px;
background: #4f46e5;
color: #fff;
text-decoration: none;
animation: pulse 1.8s infinite;
}
@keyframes pulse {Simple Pricing Card
A clean HTML pricing card structure that can be styled with any CSS framework.
<article class="pricing-card">
<header>
<h2>Plus</h2>
<p>For students and junior developers.</p>
</header>
<p class="price">$5 <span>/ month</span></p>
<ul>
<li>500 snippets</li>
<li>Private snippets</li>
<li>Workspace export</li>Basic SEO Head Tags
A small HTML head template with title, description, viewport, canonical URL, and Open Graph tags.
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Page title - Site name</title>
<meta name="description" content="A short page description for search engines.">Responsive Image Figure
An HTML figure pattern for responsive images with a caption.
<figure class="image-card">
<img
src="/assets/img/example.jpg"
alt="A student writing code on a laptop"
loading="lazy"
width="1200"
height="800"
>
<figcaption>
Coding practice session with reusable snippets.
</figcaption>Accessible Login Form
A simple accessible login form with labels, autocomplete attributes, and required fields.
<form action="/signin" method="post" class="login-form">
<div>
<label for="email">Email address</label>
<input
type="email"
id="email"
name="email"
autocomplete="email"
required
>
</div>
<div>Basic Haskell Math and Utility Functions
Defines several mathematical and utility functions in Haskell including calculations for circle area, sphere volume, temperature conversion,...
module Gyak04 where
import Data.Char(toLower, toUpper, isLower, isUpper)
circleArea :: Double -> Double
circleArea r = (r^2)*pi
sphereVolume :: Double -> Double
sphereVolume r = 4*(r^3)*pi/3
cToF :: Double -> Double
Tömb feldolgozása switch szerkezettel
Tömb elemek feldolgozása map és switch segítségével, különböző értékekhez rendelt műveletekkel.
emptyArray().map(function(x) { return x + 2; });
filledArray().map(function(x) { return x * 2; });
for (var item of filledArray()) {
switch (item) {
case 1:
case 2:
print(item === 1 ? "one" : "two");
break;
case 3:
case 4:
Simple HTML + JavaScript Counter
A basic counter with increment and decrement buttons using HTML and JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Counter</title>
</head>
<body>
<h1>Counter: <span id="counter">0</span></h1>