Forem: Tomas Stveracek

Testing HTTP/1.1, HTTP/2, and HTTP/3 Performance with a React App

Tomas Stveracek — Sat, 13 Dec 2025 15:08:43 +0000

Ever wondered how much faster HTTP/3 really is compared to HTTP/1.1? I built a simple web app to find out.

Quick HTTP History

HTTP/1.1 (1997) - One request per connection. Want 50 images? Open multiple TCP connections and wait. Head-of-line blocking is a real problem. HTTP/2 (2015) - Multiplexing! Multiple requests over single TCP connection. Binary protocol, header compression (HPACK). Big improvement. HTTP/3 (2022) - Uses QUIC over UDP instead of TCP. No more TCP head-of-line blocking. 0-RTT connection resumption. Built-in encryption.

The App

I created HTTP Protocol Performance Testing to measure real differences between protocols.

What It Measures

TTFB (Time to First Byte)
DOM Load Time
Full Page Load
Total Transfer Size

Test Scenarios

Baseline - 5 images (minimal difference expected)
Large Files - 35 images (HTTP/2 should be faster)
Multiplexing - 50 small images (HTTP/2 and HTTP/3 shine here)

How to Test Each Protocol

HTTP/3: Visit the live demo (Cloudflare serves HTTP/3 by default)
HTTP/2: Disable QUIC in Chrome (chrome://flags → "QUIC" → Disable)
HTTP/1.1: Run locally with npm run dev

Results

From my testing:

HTTP/2 shows ~10-50% improvement over HTTP/1.1 (varies by scenario)
Multiplexing test shows the biggest difference
HTTP/3 is ~5-15% faster than HTTP/2 on stable networks
HTTP/3 benefits are more visible on mobile/unstable connections

Tech Stack

React 19, Vite, Tailwind CSS v4, Chart.js, Cloudflare Workers

Building a Solar Energy Predictor with React and TensorFlow.js

Tomas Stveracek — Fri, 07 Nov 2025 14:43:32 +0000

I built a web app that predicts how much energy solar panels can produce based on real weather data and AI predictions. Here's how I did it!

What Does It Do?

The Solar Gain Predictor calculates solar panel energy production based on:

Panel area and efficiency
Roof orientation (south, east, west, etc.)
Real weather data from your location
AI predictions trained on 6 months of historical data

Tech Stack

React + Vite - Fast development
Tailwind CSS - Beautiful design
Chart.js - Interactive charts
TensorFlow.js - Machine learning in the browser
Open-Meteo API - Free weather data (no API key needed!)
OpenWeatherMap API - City search

The Weather Data Challenge

I needed real weather data but didn't want to pay for APIs. I found Open-Meteo API which is completely free and provides:

180 days of historical data
7-day forecasts
Sunshine duration, cloud coverage, temperature
No API key required!

For city search, I use OpenWeatherMap's Geocoding API which also returns localized city names (Praha → Prague).

AI Predictions with TensorFlow.js

The coolest feature is AI predictions. Here's how it works:

Training Data

// Get 180 days of historical weather
const historicalData = await getHistoricalWeather(lat, lon, 180);

// Each day contains: month, dayOfYear, temperature, cloudiness, sunHours

Model Architecture
const model = tf.sequential({
  layers: [
    tf.layers.dense({ units: 64, activation: 'relu', inputShape: [4] }),
    tf.layers.dropout({ rate: 0.2 }),
    tf.layers.dense({ units: 32, activation: 'relu' }),
    tf.layers.dropout({ rate: 0.2 }),
    tf.layers.dense({ units: 16, activation: 'relu' }),
    tf.layers.dense({ units: 1, activation: 'linear' })
  ]
});

The model learns patterns between weather conditions and sun hours. It then predicts the next 5 days and compares with actual forecasts!

Internationalization (i18n)

I wanted both Czech and English speakers to use the app, so I added full i18n support:

const LanguageContext = createContext();

export function LanguageProvider({ children }) {
  const [language, setLanguage] = useState(
    localStorage.getItem('language') || 'cs'
  );

  const t = (key) => translations[language][key] || key;

  return (
    <LanguageContext.Provider value={{ language, setLanguage, t }}>
      {children}
    </LanguageContext.Provider>
  );
}

Even city names are translated! When you search "Praha" in English mode, it shows "Prague, CZ".

Rate Limiting for API Protection

Since I use free APIs, I needed to prevent abuse. I added a simple rate limiter:

// Max 10 requests per minute
const rateLimitMap = new Map();
const RATE_LIMIT_MAX_REQUESTS = 10;
const RATE_LIMIT_WINDOW_MS = 60000;

function checkRateLimit(key = 'global') {
  const now = Date.now();
  const userRequests = rateLimitMap.get(key) || [];

  const recentRequests = userRequests.filter(
    timestamp => now - timestamp < RATE_LIMIT_WINDOW_MS
  );

  if (recentRequests.length >= RATE_LIMIT_MAX_REQUESTS) {
    return false; // Rate limited
  }

  recentRequests.push(now);
  rateLimitMap.set(key, recentRequests);
  return true;
}

Energy Calculation

The calculation is simple:
energy (Wh) = area (m²) × efficiency × sun_hours × orientation_factor × 1000

Orientation factors:

South: 1.0 (100% - optimal)
Southeast/Southwest: 0.9 (90%)
East/West: 0.75 (75%)
North: 0.5 (50%)

Key Features

Geolocation - One-click location detection
City autocomplete - Smart search with 300ms debouncing
Responsive design - Works on mobile and desktop
Error handling - Fallback to simulated data
Beautiful UI - Glassmorphism effects with Tailwind CSS

What I Learned

This project taught me:

Working with real APIs and handling rate limits
Machine learning in the browser with TensorFlow.js
Building a bilingual app (harder than expected!)
Performance optimization (debouncing, rate limiting)

Source Code

Check out the project on GitHub: https://github.com/TomasDevs/solar-gain-predictor

What's Next?

Future ideas:

More weather APIs for better accuracy
Export predictions to PDF
Historical comparison (this year vs last year)
Support for multiple panel configurations

What features would you add? Let me know in the comments!

🌱 Modern CSS Tips & Tricks to Boost Your Workflow

Tomas Stveracek — Fri, 22 Nov 2024 20:14:25 +0000

Are you ready to improve your CSS skills with some of the latest tips and tricks? CSS is always changing, and these new features will help you write cleaner, more efficient code while making your websites look great. Here are some useful CSS tips, complete with examples on CodePen that you can try right away!

1. 👇 Footer Stuck at the Bottom

Sometimes, content on your page is not enough to push the footer to the bottom of the viewport. You can use this simple CSS solution to make sure the footer stays at the bottom.
Check out the code on CodePen.

2. 🧐 Media Queries with Pointer Precision

Make the user experience better by changing your UI based on the type of pointing device. With the pointer media query, you can adjust styles depending on whether the user has a precise pointer (like a mouse) or a coarse one (like a touchscreen).
Example on CodePen.

3. 💡 The Power of inset

CSS inset is a shorthand for top, right, bottom, and left. This property is useful for positioning elements easily, making your layout more readable and reducing extra CSS.
See how inset works in this CodePen.

4. 💥 Using :empty for Placeholder Text

The :empty pseudo-class lets you style an element if it has no children. It’s useful for adding placeholder content, like when an image isn’t loaded.
Try it out on CodePen.

5. 🚀 Styling Elements with :where()

The :where() pseudo-class is great for applying styles to multiple elements without adding specificity. It’s perfect for resets or for general styling without affecting more specific styles.
See it in action on CodePen.

6. 🛠️ Consistent Numeric Width with font-variant-numeric

Do you need numbers to line up perfectly, like in tables or financial data? Use font-variant-numeric: tabular-nums; to make sure each number takes up the same space, making your data easier to read.
View the example CodePen.

7. 💡 Multiline Ellipsis for Overflowing Text

Preventing text overflow and making sure it looks good is important for UI design. You can use -webkit-line-clamp to limit text to a fixed number of lines and add ellipsis (...). It’s a simple way to handle multiline text overflow.
See how it’s done on CodePen.

8. 🔄 Independent Transform Properties

Instead of writing all transformations (rotate, scale, translate) together, you can now apply each one separately using new properties like scale, rotate, etc. This makes your code easier to read and change.
Check the example on CodePen.

9. 👁️ The :has() Selector as a Parent Selector

The :has() selector is like the parent selector we’ve always wanted. You can now style an element based on whether it contains a specific child. This makes dynamic and interactive styling much easier.
Explore the example on CodePen.

10. 🌱 Using System Colors in CSS

CSS system colors let you match your site’s appearance with the user’s operating system or browser theme. This is great for creating visually consistent and accessible websites.
Check out the example CodePen.

11. 🌄 Container Queries for Advanced Responsiveness

With Container Queries, you can style elements based on the size of their container instead of the viewport. This means truly component-driven styling, allowing more flexible and context-aware responsive designs.
See Container Queries in action on CodePen.

12. 💧 Set Your Form Styles with accent-color

The accent-color property lets you style native form elements like checkboxes and radio buttons easily to match your design. This helps make sure all form elements look consistent.
Check the example CodePen.

13. 📏 Responsive Font Size with clamp()

The clamp() function is perfect for creating responsive font sizes that adapt to different screen sizes. It lets you set a minimum value, a preferred value, and a maximum value all at once. This ensures the text remains readable on all devices.
Check out the example on CodePen.

🛠️ Feel free to experiment with the examples on CodePen and see how they can make your CSS more dynamic and elegant. If you have any other modern CSS tips or know about new CSS features, share them in the comments! 📈

Understanding CORS: Why Your API Requests Are Failing 🚧

Tomas Stveracek — Wed, 20 Nov 2024 15:20:00 +0000

Have you ever made an API request, but it got blocked with a confusing error message about 'CORS'? 😱 Don't worry—you're not alone. Cross-Origin Resource Sharing (CORS) is a common problem for developers, but with some understanding, you'll know why it's happening and how to fix it. Let's dive in!

What Is CORS? 🤔

CORS stands for Cross-Origin Resource Sharing. In simple words, it's a security feature used by web browsers to stop harmful behavior. Browsers use CORS to decide if content from one origin (like https://my-awesome-app.com) can interact with resources from a different origin (like https://api.something-cool.com).

An origin is defined by the combination of protocol (HTTP or HTTPS), domain (like example.com), and port (e.g., :3000). If any part of this is different between the source of your request and the target API, you're making a cross-origin request.

Why Does CORS Cause Problems? 🚫

Browsers block these cross-origin requests by default to protect users. Imagine a harmful script on a website trying to interact with another website where you're logged in—it could steal your data without you knowing! CORS prevents this by only allowing safe, approved cross-origin requests.

When you send an API request across origins, the server needs to tell the browser, "Hey, it’s okay for you to accept this response." If the server doesn’t do this, the browser will block the request and show a CORS error. This is why you might see a message like:

Access to XMLHttpRequest at 'https://api.something-cool.com' from origin 'https://my-awesome-app.com' has been blocked by CORS policy.

How to Set Up CORS Correctly 🛠️

Now that you understand what CORS is, let's talk about how to fix it. The key lies in the server's response headers. Here are some common CORS headers:

1) Access-Control-Allow-Origin: This header tells the browser which domains are allowed to access the server. For example:
Access-Control-Allow-Origin: *
This allows requests from any origin, which is fine for public APIs but not safe for sensitive data.

2) Access-Control-Allow-Methods: Specifies which HTTP methods are allowed, like GET, POST, or DELETE:
Access-Control-Allow-Methods: GET, POST

3) Access-Control-Allow-Headers: Allows the client to specify which headers can be sent with the request:
Access-Control-Allow-Headers: Content-Type, Authorization

4) Access-Control-Allow-Credentials: If you need to send cookies or authentication tokens, set this to true:
Access-Control-Allow-Credentials: true

Practical Example 🚀

Let's say you have a frontend app running at https://my-frontend.com and a backend API at https://api.my-backend.com. To allow your app to make requests to your API, you need to configure the CORS settings on your backend.
If you're using Express.js in Node.js, you can set up CORS like this:

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
  origin: 'https://my-frontend.com', // Allow only your frontend
  methods: ['GET', 'POST'], // Allow only specific methods
  credentials: true, // Allow cookies
}));

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from the server!' });
});

app.listen(3000, () => console.log('Server running on port 3000'));

In this example, we're allowing requests from https://my-frontend.com, using GET and POST methods, and allowing credentials like cookies.

Tips for Safe CORS Configuration 🛡️

1) Avoid Using * for Sensitive APIs: Setting Access-Control-Allow-Origin: * is okay for public APIs, but for anything sensitive, always restrict origins.

2) Limit Methods and Headers: Be specific about which methods and headers are allowed. The fewer you allow, the less risk there is.

3) Use Credentials Carefully: Only enable Access-Control-Allow-Credentials if your app really needs it. Allowing credentials can increase the risk of CSRF attacks if not handled well.

Debugging CORS Issues 🔍

If you're having trouble with CORS, here are some steps to debug:

Check the Browser Console: The error message will often tell you which header is missing or wrong.
Use Browser Extensions: Chrome and Firefox have extensions like CORS Everywhere to temporarily bypass CORS for development. Just be careful—never use these in production!
Test with curl or Postman: These tools let you see if the server is responding correctly without browser restrictions.

Wrapping It Up 🎁

CORS is all about keeping users safe by controlling which resources can be shared across origins. Though it can be frustrating, understanding how to set up CORS correctly can save you a lot of trouble and make sure your API requests work smoothly.

Next time you see that CORS error, take a deep breath, and remember: it's just the browser protecting your users. With a bit of server-side setup, you'll have it fixed in no time! 😊

Boost Your Website's Accessibility: Master ARIA Attributes in HTML 🌐

Tomas Stveracek — Wed, 13 Nov 2024 15:20:00 +0000

Accessibility is Not Just a Trend Web accessibility is an important aspect that every frontend developer should care about. It ensures that websites and apps are accessible to all users, including those with disabilities. This is where ARIA (Accessible Rich Internet Applications) attributes come in. Let's learn how to use them correctly to create an accessible and user-friendly web.

What is ARIA and Why Use It?

ARIA attributes are special tags that add information for screen readers and other assistive technologies. They help developers make interactive elements more accessible, especially when these elements are not well understood by default. ARIA attributes can provide roles, states, and other properties to components that might not be accessible otherwise.

Before we start, it’s important to note that ARIA attributes should not be used on elements that already have their natural role. For example, if you use an HTML tag like <button>, it already has the role of a button. Adding role="button" would be unnecessary and even confusing.

Basic ARIA Attributes

1. aria-label

aria-label adds a description to an element that otherwise has no understandable text for screen readers. This attribute is ideal for icons or buttons that need a specific description.
Example:

<button aria-label="Settings">⚙️</button>

Bad Example:

<button aria-label="Settings Button">Settings</button> <!-- Duplicate text, not needed -->

2. aria-labelledby and aria-describedby

aria-labelledby works like aria-label, but instead of direct text, it refers to another element that describes the component. It is useful if there is already an existing text that can be used. aria-describedby is used to provide additional information about an element, often giving more context or explanation.
Example:

<h2 id="heading">Contact Us</h2>
<button aria-labelledby="heading" aria-describedby="form-info">Open Form</button>
<p id="form-info">This form allows you to get in touch with our team.</p>

3. aria-hidden

aria-hidden is used to mark elements that should be ignored by screen readers. This attribute can be used to hide elements that are not important for users.
Example:

<span aria-hidden="true">🔔</span> Notification

4. aria-expanded

This attribute indicates whether an element (like a dropdown menu or accordion) is open or closed. It improves the user experience by providing information about the component's state.
Example:

<button aria-expanded="false" aria-controls="menu">Open Menu</button>
<div id="menu" hidden>Menu Content</div>

5. role

role defines what type of interactive element it is. Remember, role should not be used on semantic elements like <button>, <nav>, <header>, and others because they already have their natural roles.

role="complementary": Used to define content that complements the main content but is still meaningful on its own, like a sidebar.
Example:

<aside role="complementary">Related Articles</aside>

role="presentation": Used for elements that should be ignored by assistive technologies because they are purely decorative.
Example:

<table role="presentation">
  <!-- purely decorative table -->
</table>

aria-live: This attribute is used to notify screen readers about content that changes dynamically. It can have values like polite, assertive, or off.
Example:

<div aria-live="polite">New message received.</div>

Good Example:

<div role="dialog">This is a dialog box</div>

Bad Example:

<button role="button">Click Here</button> <!-- Unnecessary, button already has a role -->

Conclusion: Use ARIA Only When Necessary

ARIA attributes are helpful tools to improve web accessibility. But remember, less is often more. ARIA should be used only when HTML cannot solve the problem naturally. Using ARIA correctly can greatly improve the experience for users who rely on assistive technologies.

If you have any questions about ARIA attributes or how to use them on specific elements, feel free to ask! 😊

Why I Built the "Soo Good" Vegan Burger Website 🌱

Tomas Stveracek — Wed, 06 Nov 2024 15:50:00 +0000

I wanted to create a fun and interactive website for a vegan burger brand. The idea came from a design I found on Behance called "Vegan Food Restaurant Website UI Design." I took inspiration from it and added some of my own custom features to make it unique. 🍔

Features of the Website:

Image Carousel 🖼️: Users can see different vegan burger options in a smooth slider, thanks to Swiper.js.
Modal Popups 🔔: Clicking "Visit now" or "Order now" opens a modal window with more details.
Interactive Buttons and Counters 🔢: JavaScript powers dynamic text updates and a counter that shows the number of burgers ordered.
Responsive Design 📱💻: The site looks great on both mobile and desktop devices.

Technologies Used 💻:

I used a simple tech stack for this project:

HTML and CSS 📝: For the structure and style.
Bootstrap 🛠️: To make development faster and easier.
JavaScript ✨: For interactive features and dynamic elements.
SVG Icons 🖌️: For social media and branding.
Swiper.js 🔄: To create the smooth carousel effect.

Setup 🛠️

To run this project locally:

Clone this repository:

git clone https://github.com/TomasDevs/soo-good-website
cd soo-good-website

Open index.html in your browser to view the website.

Check It Out:

If you want to see the code, visit my GitHub. You can also check out the live version here: Soo Good Website on Netlify. ✨

⚡ React Pure Loading: Lightweight CSS Loaders for React

Tomas Stveracek — Wed, 30 Oct 2024 16:00:00 +0000

React Pure Loading is a new npm package that offers a collection of lightweight and performance-focused loading animations built purely with CSS. Designed to be simple and customizable, this package is perfect for React developers who need smooth, minimal loaders without the extra JavaScript overhead.

Why React Pure Loading?

In modern web development, loading animations are essential for improving user experience. With React Pure Loading, you get several types of loaders (such as dots, bounce, wave, ring, square, and more) that can easily integrate into your React projects. Since these loaders use pure CSS, they have a minimal impact on performance, which helps keep your applications fast.

Installation 📦

You can install React Pure Loading directly from npm:

npm install react-pure-loading

Usage 🛠️

To use the loaders, import the ones you need into your React component and include the CSS styles:

import { Dots, Bounce, Wave } from "react-pure-loading";
import "react-pure-loading/dist/style.css";

function App() {
  return (
    <div>
      <Dots size="medium" color="#474bff" />
      <Bounce size="large" color="#00ff00" />
      <Wave size="small" color="#ff6347" />
    </div>
  );
}

Customization 🎨

Each loader supports these props:

size: Options are small, medium, or large.
color: Any color in HEX or RGB format.

Example:

<Wave size="large" color="#000" />

Try It Out 🚀

Whether you’re building a new app or enhancing an existing project, give React Pure Loading a try. It’s a fast, lightweight, and easy-to-use library for creating visually appealing loaders with minimal impact on performance.

Check out the full documentation and examples on GitHub or visit the package on npm.

🚀 Creating a Developer's Portfolio Inspired by VS Code

Tomas Stveracek — Wed, 23 Oct 2024 15:10:00 +0000

Hey there, fellow developers! 👋 Today, I want to share with you my journey in building a personal portfolio that feels like home for any coder—because it’s designed like Visual Studio Code! If you love the look and feel of VS Code, you’ll enjoy exploring this project. 💻

🛠️ What’s Inside:

A modern portfolio with a familiar look
Built with React and a simple Express server 🧑‍💻
Handling API requests to display dynamic content 🔄
Deployed with Netlify and serverless functions ☁️

1. 💡 Why a VS Code-Inspired Portfolio?

I wanted to create a portfolio that would not only show my skills and projects but would also be unique and fun to explore. Since I spend so much time coding in Visual Studio Code, I thought—why not make my portfolio look like it? This project combines the technical skills of a developer with a design that every coder can relate to.

Key Features:

🖥️ VS Code Feel: A sidebar, tabs, and a title bar that make it feel like a real coding environment.
🌗 Dark/Light Theme: Switch between themes based on your preference.
📝 Live Data: Fetches my latest articles from dev.to and displays projects using custom APIs.
🔐 Serverless Functions: Securely handles API requests without exposing my API keys.
📱 Responsive Design: While it works on mobile, it’s best experienced on a desktop.

2. ⚙️ How I Built It

To get started, you’ll need Node.js and a Dev.to API key if you want to display your own articles.

Step-by-Step:

📥 Clone the Project:

git clone https://github.com/tomasdevs/portfolio-vscode.git
cd portfolio-vscode

📦 Install the Packages: Install everything you need for both the main app and the API:

npm install
cd api
npm install

🔑 Set Up Environment Variables: Add your Dev.to API key in the .env file:

VITE_DEV_TO_API_KEY=your_api_key_here

🚀 Start the App: Run the server for API requests and start the Vite development server:

cd api
node server.js
npm run dev

🌐 View it on Your Browser:

Go to http://localhost:5173 to see the portfolio in action!

3. 🔄 Handling API Requests and Data

One of the tricky parts was securely fetching data from my Dev.to profile without exposing the API key. I used Express and a serverless function on Netlify to create a simple backend for handling requests:

const response = await fetch("https://dev.to/api/articles/me/published", {
  headers: {
    "api-key": process.env.VITE_DEV_TO_API_KEY,
  },
});

This way, I can safely display my latest articles on the live site without worrying about security.

4. 📚 What I Learned Along the Way

🔒 Learning to Think About Security: Making sure my API keys are secure was a big part of this project. I learned how to use environment variables, Express, and serverless functions to protect sensitive data.

🎨 Designing for Developers: It was a fun challenge to make a portfolio that is both functional and appealing to other developers. It’s not every day you see a portfolio that looks like an IDE!

💡 Deploying with Netlify: Netlify made it easy to deploy my project with built-in serverless functions. It was my first time using this feature, and I was impressed by how smoothly it worked.

5. 🌍 Check It Out!

I’m excited to share this project with you all, and I hope it inspires other developers to think outside the box when creating their own portfolios. If you love coding and want a portfolio that feels like coding, give it a try! 🚀

Live Portfolio Demo

🌐 CSS Units: When and How to Use Them

Tomas Stveracek — Wed, 16 Oct 2024 15:20:00 +0000

In CSS, there are many units to choose from when defining sizes and spacing, such as px, rem, em, vw, and others. Each unit has its strengths, so knowing when to use them is important. This guide will help you understand the most common CSS units and when to use them.

🔒 Absolute Units

📏 px (pixels)

Definition: Fixed units that represent one pixel on the screen.

When to use: Use px when you need precise control, like for border-radius or box-shadow. It's good when you need small, exact values that won’t change based on screen size.

Example:

.button {
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

🔄 Relative Units

📐 rem (root em)

Definition: Relative to the font-size of the root element (html).

When to use: Use rem for font sizes, padding, and margins in layout. It ensures your layout scales consistently across different devices, based on the root font-size (typically 16px).

Example:

h1 {
  font-size: 2rem; /* Equals 32px if the root font-size is 16px */
}

📏 em

Definition: Relative to the font-size of the parent element.

When to use: Use em when you want an element’s size to depend on its parent. It's commonly used for padding and margins in components where the text size might vary.

Example:

.button {
  padding: 0.5em 1em; /* Padding is relative to the button's font size */
}

📱 vw (viewport width)

Definition: 1% of the viewport’s width.

When to use: Use vw for responsive layouts that scale with the width of the browser window.

Example:

.full-width {
  width: 100vw; /* Full width of the viewport */
}

📐 vh (viewport height)

Definition: 1% of the viewport’s height.

When to use: Use vh to set elements that should be sized relative to the height of the screen.

Example:

.hero-section {
  height: 100vh; /* Full viewport height */
}

💯 % (percentage)

Definition: Percentage of the parent element’s size.

When to use: Use % for layouts that need to adapt based on the size of the parent container.

Example:

.content {
  width: 80%; /* Takes up 80% of the parent element's width */
}

🔍 Less Common Units

🔠 ch (character units)

Definition: Based on the width of the "0" character in the font.

When to use: Use ch for inputs or text areas where you want to control the number of characters visible.

Example:

input {
  width: 20ch; /* Allows 20 characters to fit */
}

🔧 clamp()

Definition: A function that allows you to set a size between a minimum, preferred value, and maximum.

When to use: Use clamp() to create flexible sizes that adapt as the screen size changes.

Example:

h1 {
  font-size: clamp(1.5rem, 2vw, 3rem); /* Responsive font size */
}

📦 Example: Styling a Card with rem and em

When building a card component, it's good practice to use rem for layout and em for text or padding that should adjust based on the font size.

/* Card layout with rem for consistent spacing */
.card {
  padding: 2rem; /* Consistent padding across the site */
  margin: 1rem; /* Space between cards */
  border-radius: 0.5rem; /* Rounded corners */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Slight shadow */
}

/* Card title with rem for consistent font size */
.card-title {
  font-size: 1.5rem; /* Font size relative to root font-size */
  margin-bottom: 0.5em; /* Margin based on the title size */
}

/* Card content with rem for consistent text size */
.card-content {
  font-size: 1rem; /* Consistent font size across the site */
  line-height: 1.6;
}

/* Button inside the card using em for padding */
.card-link {
  padding: 0.5em 1em; /* Padding based on the button's font size */
  font-size: 1em; /* Font size relative to the button's text */
  background-color: #007bff;
  color: white;
  border-radius: 0.3rem;
  text-decoration: none;
  display: inline-block;
}

.card-link:hover {
  background-color: #0056b3;
}

HTML Example:

<div class="card">
  <h2 class="card-title">Card Title</h2>
  <p class="card-content">This is some content inside the card. The size is based on rem for consistency across the site.</p>
  <a href="#" class="card-link">Learn More</a>
</div>

💡 Practical Tips:

Use rem for layout-related spacing, font sizes, and padding across your site. It helps keep everything consistent.
Use em for text-specific components like buttons or internal padding, so they scale with the text size.
Use px for small, exact values like border-radius or box-shadow, where precision is important.

🎯 Conclusion

Each CSS unit has its best use case. For a flexible and scalable design, use rem for most of your layout and text sizing, em for element-specific styles that need to adjust based on their context, and px for precise details like borders. By mixing these units correctly, you can ensure that your design is responsive and user-friendly.

Understanding HTTP, HTTPS, and Status Codes: A Simple Guide

Tomas Stveracek — Wed, 09 Oct 2024 15:30:00 +0000

When you're building websites or web applications, you often hear about HTTP and HTTPS. But what do they really mean? And what about those status codes like 404 or 500? In this article, we'll break down these concepts and explain them in a clear and easy-to-understand way.

What Is HTTP? 🌐

HTTP stands for Hypertext Transfer Protocol. It’s the foundation of any data exchange on the web. When you visit a website, your browser sends an HTTP request to the web server, and the server responds with the requested data (usually in the form of a web page).
Here’s a simple breakdown of how it works:

You enter a URL into your browser (like http://example.com). 📲
The browser sends an HTTP request to the server where the website is hosted.
The server processes the request and sends back the data, which is then displayed in your browser.

HTTP is not secure by default, which means the data sent between the browser and server is not encrypted. This can be a risk when sensitive information (like passwords or credit card details) is involved.

What Is HTTPS? 🔒

HTTPS is the secure version of HTTP. The S stands for Secure. When you see https:// in the address bar, it means the website is using SSL/TLS encryption to protect the data that’s being transferred.
Here’s how HTTPS is different from HTTP:

1. Encryption: HTTPS encrypts the data between the browser and the server, so no one can see or steal it. 🔐

2. Authentication: HTTPS ensures that you're communicating with the intended website (not a fake or malicious one). ✅

3. Data Integrity: HTTPS guarantees that the data hasn’t been modified during transfer. 🛡️

If you're building a website, it's important to use HTTPS, especially if your site handles sensitive data. Many browsers will now show a warning if a website doesn't use HTTPS, which can scare users away.

What Are HTTP Status Codes? 📝

When your browser makes a request to the server, the server responds with more than just the requested data. It also sends an HTTP status code to tell your browser how things went.

Common Status Codes

Here are some of the most common HTTP status codes you’ll encounter:

- 200 OK: Everything is working as expected. The server successfully returned the requested data.

- 201 Created: The request was successful, and as a result, a new resource was created (e.g., after a POST request that adds data to the server).

- 202 Accepted: The request has been accepted for processing, but the processing is not yet complete. It’s often used for asynchronous tasks.

- 203 Non-Authoritative Information: The server successfully processed the request, but the returned information comes from a third party, not the original source.

- 204 No Content: The server successfully processed the request, but there’s no content to return (e.g., after a DELETE request).

- 301 Moved Permanently: The requested resource has been permanently moved to a new URL. The browser should automatically redirect to the new location.

- 302 Found: Similar to 301, but the move is temporary. The browser should redirect, but the resource may move back to the original URL.

- 400 Bad Request: The server couldn't understand the request due to invalid syntax, often caused by a client-side error.

- 401 Unauthorized: The request requires user authentication. This often happens when a user tries to access a resource without being logged in.

- 403 Forbidden: The server understands the request but refuses to authorize it. The user does not have the right permissions to access the resource.

- 404 Not Found: The server couldn’t find the resource or page that was requested.

- 500 Internal Server Error: The server encountered an unexpected condition that prevented it from fulfilling the request.

- 502 Bad Gateway: The server, while acting as a gateway or proxy, received an invalid response from the upstream server.

- 504 Gateway Timeout: The server, acting as a gateway or proxy, didn’t receive a timely response from the upstream server.

Example of an HTTP Request and Response

Here’s a simple example to show what an HTTP request and response might look like:

HTTP Request (from the browser to the server):

GET /index.html HTTP/1.1
Host: www.example.com

HTTP Response (from the server back to the browser):

HTTP/1.1 200 OK
Content-Type: text/html

<!DOCTYPE html>
<html>
<head>
    <title>Example Page</title>
</head>
<body>
    <h1>Welcome to the Example Page!</h1>
</body>
</html>

In this case, the server responded with a 200 OK status code, meaning the page loaded successfully.

Example of a 404 Error

If the requested page isn't found, here’s what the response might look like:

HTTP/1.1 404 Not Found
Content-Type: text/html

<!DOCTYPE html>
<html>
<head>
    <title>Page Not Found</title>
</head>
<body>
    <h1>404 Error: Page Not Found</h1>
</body>
</html>

The 404 Not Found status code tells the browser that the server couldn’t find the page.

Why Do These Status Codes Matter? 🧐

Understanding HTTP status codes is important for developers because they help you diagnose problems with your website or app. For example:

If users are reporting broken links, you can check for 404 errors.
If the website is experiencing downtime, you might see 500 errors in the logs.

By understanding these codes, you can quickly identify and fix issues.

Conclusion 💡

HTTP and HTTPS are the backbone of how websites communicate with browsers, and HTTP status codes help developers understand what's going on behind the scenes. Whether you're fixing broken links or ensuring your site is secure, knowing how HTTP works is essential for any web developer.

🚀 Master Core Web Vitals: 3 Metrics for a Better User Experience

Tomas Stveracek — Wed, 02 Oct 2024 15:40:00 +0000

Core Web Vitals are important metrics from Google that measure the performance of websites from the user's point of view. If you are building websites or web apps, you should pay attention to these three key metrics:

1. Largest Contentful Paint (LCP) – This measures how long it takes for the largest element on the page, such as an image or text block, to load. A good LCP should be under 2.5 seconds. If it takes too long, users may lose patience and leave. To learn more about optimizing images for faster loading, check out my article on image formats.

2. Interaction to Next Paint (INP) – This metric measures how quickly a page responds to user interactions, like clicking a button or typing in a form. INP is better than the old metric, First Input Delay (FID), because it looks at all interactions, not just the first one. INP became a Core Web Vital in 2024, replacing FID to give developers a more complete view of how responsive their site is. A good INP should be under 200 milliseconds. Slow responses can frustrate users.

3. Cumulative Layout Shift (CLS) – This tracks how stable the layout of the page is while loading. If things move around on the page unexpectedly, it can be annoying for users. CLS should be under 0.1.

📈 Why Is This Important?

Google uses these metrics as part of its ranking system. This means that if your website meets the Core Web Vitals standards, it can rank higher in search results. Also, faster and more stable websites offer a better user experience, which makes visitors more likely to return.

⚙️ How Can You Improve Core Web Vitals?

1. Optimize Images – Make sure images are compressed and properly optimized for faster loading times. Read more in my article on image formats for websites.

2. Reduce JavaScript Load Time – Heavy or slow JavaScript can delay responses to user actions. For general performance tips, see my article on frontend performance optimization.

3. Use Caching – Storing parts of your website in the browser’s cache can make it load faster when users visit again.

4. Use Modern Technologies – For example, use lazy loading for images and videos, so they load only when needed.

🛠️ Best Tools to Measure Core Web Vitals

Here are some popular tools you can use to measure and monitor Core Web Vitals:

1. Google PageSpeed Insights – This tool provides detailed Core Web Vitals scores for any URL. It also gives suggestions on how to improve performance.

2. Lighthouse – Integrated into Chrome DevTools, Lighthouse provides in-depth reports on a site’s performance, including Core Web Vitals. It’s great for testing during development.

3. Web Vitals Extension – A Chrome extension that gives real-time feedback on Core Web Vitals while you browse.

4. Google Search Console – This tool lets you monitor Core Web Vitals for your entire site and see how individual pages perform over time.

5. Chrome DevTools Performance Panel – This lets you dive deep into the details of how your site is performing, including visualizing LCP, INP, and CLS events.

💡 Conclusion

Core Web Vitals are not just technical details for developers – they affect real user experiences. It’s important to make sure your website not only looks good but also runs fast and stays stable. Optimizing for Core Web Vitals can improve both your website's performance and its ranking in search engines. With the right tools, you can easily track and improve these key metrics to deliver a better user experience.

Make Your CSS Better with SCSS Mixins and Functions

Tomas Stveracek — Wed, 25 Sep 2024 15:50:00 +0000

SCSS is an extension of CSS that makes your code easier to manage. With SCSS, you can use mixins and functions to help you avoid writing the same code again and again. In this article, I’ll show you some useful SCSS mixins and functions that can save you time and make your code cleaner.

Why Use Mixins and Functions? When writing CSS, you often repeat the same styles. SCSS mixins and functions help by:

Avoiding Repetition: Write common styles once and use them everywhere.
Adding Flexibility: Change styles easily with parameters.
Writing Dynamic Styles: Use calculations to create more flexible designs.

1. Responsive Breakpoints Mixin

When making websites responsive, you need to write a lot of media queries. This mixin makes it easy to handle breakpoints.

@mixin respond-to($breakpoint) {
  @if $breakpoint == mobile {
    @media (max-width: 600px) { @content; }
  } @else if $breakpoint == tablet {
    @media (max-width: 900px) { @content; }
  } @else if $breakpoint == desktop {
    @media (min-width: 1200px) { @content; }
  }
}

// Usage
.container {
  padding: 20px;

  @include respond-to(mobile) {
    padding: 10px;
  }

  @include respond-to(desktop) {
    padding: 40px;
  }
}

This mixin lets you handle breakpoints by just using simple names like "mobile" or "desktop."

2. Button Styles Mixin

Creating buttons can be repetitive. This mixin lets you create buttons with different colors while keeping other styles the same.

@mixin button($bg-color, $text-color: #fff) {
  background-color: $bg-color;
  color: $text-color;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;

  &:hover {
    background-color: darken($bg-color, 10%);
  }
}

// Usage
.button-primary {
  @include button(#007BFF);
}

.button-secondary {
  @include button(#6C757D);
}

Now you can create buttons quickly with just one line of code, adjusting the colors as needed.

3. Typography Mixin

Typography is important for any website. This mixin lets you set up responsive typography with just a few lines of code.

@mixin typography($font-size, $line-height: 1.5, $weight: normal) {
  font-size: $font-size;
  line-height: $line-height;
  font-weight: $weight;

  @include respond-to(mobile) {
    font-size: $font-size * 0.9;
  }

  @include respond-to(desktop) {
    font-size: $font-size * 1.1;
  }
}

// Usage
h1 {
  @include typography(32px, 1.2, bold);
}

p {
  @include typography(16px);
}

This mixin helps you make sure your font sizes look good on both small and large screens.

4. Function for Rem Units

This function converts px values to rem, making your code easier to scale for different devices.

@function px-to-rem($px, $base-font-size: 16px) {
  @return $px / $base-font-size * 1rem;
}

// Usage
.container {
  padding: px-to-rem(32);
}

Instead of manually converting pixels to rem units, you can use this function to do it automatically.

5. Color Adjustment Function

Need to change a color quickly? This function darkens or lightens a color based on your input.

@function adjust-color-brightness($color, $amount) {
  @if $amount > 0 {
    @return lighten($color, $amount);
  } @else {
    @return darken($color, abs($amount));
  }
}

// Usage
.header {
  background-color: adjust-color-brightness(#007BFF, -10%); // Darker blue
}

With this function, you can easily create lighter or darker shades of a color, perfect for hover effects or themes.

6. Grid Layout Mixin

Creating grid layouts is easy with this mixin. It lets you set the number of columns and the space between them.

@mixin grid-layout($columns: 3, $gap: 20px) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  grid-gap: $gap;
}

// Usage
.grid {
  @include grid-layout(4, 30px);
}

This mixin simplifies the process of creating grid layouts by allowing you to customize the number of columns and gaps.

Conclusion:

Mixins and functions in SCSS help you write cleaner and more efficient CSS. With just a few lines of code, you can make your styles more flexible and easier to maintain. Whether you’re creating responsive designs, buttons, or dynamic layouts, SCSS mixins and functions can make your life as a developer easier. Give them a try in your next project!

Forem: Tomas Stveracek

Testing HTTP/1.1, HTTP/2, and HTTP/3 Performance with a React App

Quick HTTP History

The App

What It Measures

Test Scenarios

How to Test Each Protocol

Results

Tech Stack

Links

Building a Solar Energy Predictor with React and TensorFlow.js

What Does It Do?

Tech Stack

The Weather Data Challenge

AI Predictions with TensorFlow.js

Training Data

Internationalization (i18n)

Rate Limiting for API Protection

Energy Calculation

Key Features

What I Learned

Source Code

What's Next?

🌱 Modern CSS Tips & Tricks to Boost Your Workflow

1. 👇 Footer Stuck at the Bottom

2. 🧐 Media Queries with Pointer Precision

3. 💡 The Power of inset

4. 💥 Using :empty for Placeholder Text

5. 🚀 Styling Elements with :where()

6. 🛠️ Consistent Numeric Width with font-variant-numeric

7. 💡 Multiline Ellipsis for Overflowing Text

8. 🔄 Independent Transform Properties

9. 👁️ The :has() Selector as a Parent Selector

10. 🌱 Using System Colors in CSS

11. 🌄 Container Queries for Advanced Responsiveness

12. 💧 Set Your Form Styles with accent-color

13. 📏 Responsive Font Size with clamp()

Understanding CORS: Why Your API Requests Are Failing 🚧

What Is CORS? 🤔

Why Does CORS Cause Problems? 🚫

How to Set Up CORS Correctly 🛠️

Practical Example 🚀

Tips for Safe CORS Configuration 🛡️

Debugging CORS Issues 🔍

Wrapping It Up 🎁

Boost Your Website's Accessibility: Master ARIA Attributes in HTML 🌐

What is ARIA and Why Use It?

Basic ARIA Attributes

1. aria-label

2. aria-labelledby and aria-describedby

3. aria-hidden

4. aria-expanded

5. role

Conclusion: Use ARIA Only When Necessary

Why I Built the "Soo Good" Vegan Burger Website 🌱

Features of the Website:

Technologies Used 💻:

Setup 🛠️

Clone this repository:

Check It Out:

⚡ React Pure Loading: Lightweight CSS Loaders for React

Why React Pure Loading?

Installation 📦

Usage 🛠️

Customization 🎨

Try It Out 🚀

🚀 Creating a Developer's Portfolio Inspired by VS Code

🛠️ What’s Inside:

1. 💡 Why a VS Code-Inspired Portfolio?

Key Features:

2. ⚙️ How I Built It

Step-by-Step:

📥 Clone the Project:

📦 Install the Packages: Install everything you need for both the main app and the API:

🔑 Set Up Environment Variables: Add your Dev.to API key in the .env file:

🚀 Start the App: Run the server for API requests and start the Vite development server:

🌐 View it on Your Browser:

3. 🔄 Handling API Requests and Data

4. 📚 What I Learned Along the Way

5. 🌍 Check It Out!