DEV Community: YURII DE.

Qwik 1 vs 2 - quick comparison

YURII DE. — Thu, 10 Jul 2025 08:08:37 +0000

Metrics Comparison

Empty App (Qwik City + Qwik) (Blank project with routing included)

Metric	Qwik 1.41.1 Empty App	Qwik 2.0.0-beta.5-dev Empty App
App size	5.37 KB	4.54 KB
Page transfer (HTML)	34.3 kB	49.6 kB
Total resources transferred	80.1 kB	102 kB
Number of requests	7	13
Time to `finish`	27 ms	33 ms
Time to `DOMContentLoaded`	16 ms	19 ms

Qwik 1.41.1

Qwik 2.0.0-beta.5-dev

Compared to the 1.41.1 baseline, the 2.0.0-beta.5-dev empty app:

Smaller core bundle: 4.54 KB vs 5.37 KB (–15%).
Larger page payload: 49.6 kB HTML vs 34.3 kB (+45%).
More total resources: 102 kB vs 80.1 kB (+27%) served over 13 requests instead of 7.
Slightly slower load: finish event at 33 ms vs 27 ms, and DOMContentLoaded at 19 ms vs 16 ms.

In short, Qwik 2’s core runtime is leaner, but its default routing setup currently incurs a heavier transfer and more round-trips, resulting in marginally higher load times.

What the Qwik team promised for v2.0:

Move all non-human readable data (virtual nodes, state) to the end of the HTML stream for faster initial rendering.
Clean HTML output: no extra comments or technical IDs cluttering the markup.
More efficient virtual node encoding, reducing overhead.
An even lazier resumption algorithm, so only essential virtual nodes are materialized, minimizing runtime and memory cost.
Further reduction of unnecessary HTML via server-side tree-shaking.
No breaking changes, fully backward compatible.
Lower total JavaScript size, faster startup, and less client-side execution.

Conclusion

Qwik 2.0 beta delivers on a cleaner core bundle and a more streamlined HTML output, fulfilling much of what the team promised in terms of resumability and technical cleanliness. However, in practical testing, the empty app now ships a noticeably larger HTML payload and more HTTP requests compared to v1, likely as a side effect of the new state and vnode serialization. Despite these increases, user-perceived speed and instant-on performance remain excellent, validating the main goals of resumability and architectural improvements. Further optimization of payload size and request count can be expected as v2 matures.

Og image

YURII DE. — Mon, 30 Jun 2025 12:09:04 +0000

🔥CLI tool to create beautiful OG images from any URL 🤯

YURII DE. — Mon, 30 Jun 2025 09:58:08 +0000

Looking for a simple way to generate an OG image for your website? Meet og-image-creator – a fast CLI tool that lets you create beautiful, shareable images in seconds using just a single command.

Generate OG images from any URL
Customize your image with your own template
No setup required – just run and get your image

OG Image was created

https://github.com/dejurin/og-image-creator

Tailwind Generator: A Free Swiss-Army Knife for Tailwind CSS Developers

YURII DE. — Wed, 25 Jun 2025 19:45:34 +0000

Tailwind Generator is a 100 % free collection of visual generators and developer tools that help you design, preview and export Tailwind-ready components in seconds. All processing happens client-side, so nothing you create ever leaves your browser.

(https://tailwind-generator.com/)

Why Use Tailwind Generator?

Graphical editor – drag-and-drop controls instead of fiddling with class strings.
Instant code export – copy pure HTML + TailwindCSS code straight into your project.
Responsive by design – the editor itself works great on desktop and mobile.
Privacy-first – all data is processed in-browser; no uploads or tracking.
Completely free – every generator and tool is available without payment or login.

Generators & Tools Available Today

Tool	Category	What It Does
Grid Layout Generator	Component	Visually craft responsive CSS-grid layouts.
Card Generator	Component	Build flexible card UI blocks.
Table Generator	Component	Design styled tables and export code.
Alert Generator	Component	Create info/success/warning/error alerts.
Pricing Table Generator	Component	Assemble SaaS-style pricing sections.
Login Form Generator	Component	Generate customizable login forms.
Signup Form Generator	Component	Design registration forms quickly.
Button Generator	Component	Fine-tune button size, font and colors.
Text Input Generator	Component	Style single-field inputs with ease.
Footer Generator	Component	Craft responsive site footers.
Color Palette Generator	Dev Tool	Build and tweak Tailwind color palettes.
OG Image Generator	Dev Tool	Design share-ready Open Graph images (PNG).
Tailwind Code Visualizer	Dev Tool	Paste or write code and preview instantly.
Simple Logo Generator	Dev Tool	Create minimalist logos for products.

(List derived from the “Generators” and “Tools” sections of the site.)

Road-map Highlights

The team teases several “Coming Soon” generators, including full landing-page, flexbox layout, hero section, invoice and email template builders, plus an avatar and screenshot editor.

Getting Started in Three Steps

Browse to the desired generator at tailwind-generator.com/generators.
Design your component with the live editor until it matches your UI guidelines.
Export the generated HTML and Tailwind classes, then paste them into your codebase.

No checkout, sign-up or API keys required—just open the page and build.

Final Thoughts

Whether you need a quick grid, a polished pricing table or a shareable OG image, Tailwind Generator saves time and enforces consistent, utility-first styling. Because the service is free and privacy-respectful, it’s a handy bookmark for any frontend developer working with Tailwind CSS.

Percentage Calculator ✨

YURII DE. — Sat, 21 Jun 2025 21:29:33 +0000

Percentage is one-hundredth of a whole, literally “per centum” — “for every hundred.” Ancient civilizations, from Babylon to India, already computed fractions of quantities, yet the modern concept of a percentage is commonly traced to Ancient Rome, where whole values were formally divided into one hundred parts and the term percent took root. The familiar “%” symbol did not appear until the Middle Ages; scholars believe it evolved either from an abbreviation of cento or by typographic accident.

Percentages in Everyday Life

Today it is almost impossible to imagine any sphere of life without percentages. They quietly underpin countless daily decisions and comparisons:

Store discounts — a sale tag showing “-20 %” instantly tells the shopper how much cheaper the item is. For example: https://percentage100.com/#off
Taxes and savings — personal income tax rates and bank interest on deposits are both expressed as percentages.
Sports statistics — a basketball player’s field-goal accuracy reflects the ratio of successful shots to total attempts, shown as a percentage.
Elections — candidates’ support is summed up as the percentage of total votes cast.

The scale from 0 to 100 has become a universal language for describing relative magnitudes across finance, science, and culture.

The Importance of Percentages in the Digital Age

In our data-driven era, fluency with percentages is more essential than ever. Vast data sets and statistical dashboards rely on them to communicate complex trends succinctly. Market analysts report that “sales grew 15 % year-on-year,” news outlets chart infection rates, and social platforms show engagement changes in percentage terms. Such figures make patterns intuitive — but only if the reader understands what they mean. Unfortunately, global surveys reveal that many adults struggle to compute even a simple percentage of a number. Strengthening numerical literacy therefore empowers people to navigate information critically and make informed choices in finance, healthcare, and everyday decision-making.

Mastering percentages is not just a classroom exercise; it is a practical skill that enhances clarity, sharpens judgment, and illuminates the stories hidden inside modern data streams.

Nager.Date - Free API WorldWide Public Holiday

YURII DE. — Mon, 09 Jun 2025 20:43:28 +0000

Nager.Date is an open-source holiday Web API designed to simplify the retrieval of public holiday information for over 100 countries. Hosted at https://date.nager.at and maintained on GitHub (https://github.com/nager/Nager.Date), the API offers developers a straightforward REST interface to fetch holiday data, long-weekend calculations, and real-time holiday checks for IoT and other applications (date.nager.at).

Key Benefits and Features

Wide Coverage: Access holiday data for more than 100 nations, including regional subdivisions where applicable (date.nager.at).
Always Up-to-Date: The API is continuously updated to reflect legislative changes and newly declared holidays (date.nager.at).
No Rate Limits & CORS Support: Unlimited requests and cross-origin resource sharing enable easy integration in web and mobile applications without complex workarounds (date.nager.at).
Simple Implementation: Endpoints follow a consistent pattern, requiring only HTTP GET calls with URL parameters for year and country code.

Core Endpoints

Get Public Holidays

Endpoint: GET /api/v3/PublicHolidays/{Year}/{CountryCode}
Example: https://date.nager.at/api/v3/PublicHolidays/2025/AT retrieves all Austrian public holidays in 2025.
Response Model: Returns an array of objects with fields such as date, localName, name, countryCode, fixed, global, counties, launchYear, and types (e.g., Public, Bank, School) (date.nager.at).

Long Weekend Calculation

Endpoint: GET /api/v3/LongWeekend/{Year}/{CountryCode}
Usage: Identifies holiday sequences paired with adjacent weekends to find extended breaks.

Today’s Holiday Check

Endpoint: GET /api/v3/IsTodayPublicHoliday/{CountryCode}
Usage: Returns a boolean indicating if the current date is a public holiday in the specified country—ideal for IoT devices or automated workflows.

Country and Coverage Metadata

Available Countries: GET /api/v3/AvailableCountries lists supported ISO 3166-1 alpha-2 codes.
Country Coverage Page: An HTML overview of all covered countries by region. Currently, Europe and Antarctica are fully supported, while other continents have varying levels of availability (date.nager.at).

Geographical Coverage
Holidays have been catalogued for regions across Europe (e.g., Austria, Germany, Ukraine), the Americas, Asia, Africa, Oceania, and Antarctica. Each region lists “Available” and “Missing” countries to help developers anticipate gaps in data for specific locales (date.nager.at).

Unlock the World of Emojis - Database

YURII DE. — Wed, 07 May 2025 19:13:31 +0000

Emoj.info is an 💡 intelligent associative emoji 💽 database that matches words and emotions to the perfect 💅 emoji.

In a digital age where words often fail to convey precise emotions, emojis have become an essential part of online communication. Emoj.info is your ultimate guide to mastering the expressive power of emojis, enabling you to find and use the perfect emoji for any situation effortlessly.

With its intuitive, user-friendly interface, Emoj.info allows you to quickly search, discover, and understand thousands of emojis. Whether you're composing a social media post, a casual text message, or even professional content, Emoj.info makes finding the right emoji straightforward and fun.

How does the Emoj see Paris?

Emoj.info is an invaluable resource for digital marketers, content creators, social media managers, customer support specialists, and anyone looking to enhance their digital communication. By providing quick access to relevant emojis, Emoj.info helps professionals enrich their content, improve audience engagement, and foster clearer, more compelling interactions.

Example

You write a promotional text, for example on the topic of discount:

Example of promotional text:

"Sale Alert! Huge discounts available now. Shop today and save big!"

"🔥 Sale Alert! 🚀 Huge discounts available now! 🛍️ Shop today and save big! 💰"

Benefits of using emojis in promotional text:

Instantly grab attention and stand out visually.
Clearly convey emotions and excitement.
Improve engagement and memorability of your message.

Perfect your digital conversations today with Emoj.info, and let your messages resonate clearer, brighter, and with more personality. Emoj.info – where every emoji finds its voice!

Dates in QuestDB Cheat Sheet

YURII DE. — Fri, 04 Apr 2025 09:53:39 +0000

Return start of the week, 2025-03-31T00:00:00.000000Z

SELECT date_trunc('week', now());

Return minus 7 days, 2025-03-28T09:55:31.120396Z

SELECT dateadd('d', -7, now());

TailwindCSS 4.0.0 is out.

YURII DE. — Wed, 22 Jan 2025 09:13:55 +0000

Good news, the TailwindCSS is out of beta.

v4.0 release Jan 22, 2025 by EST (Eastern Standard Time) UTC/GMT -5 hours.

Performance and Benchmark Results

One of the major achievements in Tailwind CSS v4.0 is the new high-performance engine. Through a complete architectural rewrite, the development team reports significantly faster build times and incremental rebuilds.

Build Type	v3.4 (Median)	v4.0 Beta (Median)	Improvement Factor
Full build	378ms	100ms	3.78×
Incremental rebuild (new CSS)	44ms	5ms	8.8×
Incremental rebuild (no new CSS)	35ms	192µs	182×

The table demonstrates how incremental rebuilds without new CSS content can reach microsecond-scale response times, making development workflows more efficient.

Key changes

Thanks to the new approach, which focuses on pure CSS, you won't need to delve into the intricacies of JS customizations anymore.

Tailwind CSS v4.0 delivers a robust, forward-thinking architecture that emphasizes speed, simplicity, and deeper alignment with native CSS standards. Through CSS-first configuration, native cascade layers, expanded 3D transform utilities, and optimized gradient workflows, Tailwind CSS continues to push the boundaries of utility-first design.

CSS-First Configuration

A hallmark improvement in Tailwind CSS v4.0 is the CSS-first configuration. Instead of using a dedicated tailwind.config.js, developers can declare their design tokens directly within the CSS using an @theme rule:

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";
  --breakpoint-3xl: 1920px;
  --color-avocado-400: oklch(0.92 0.19 114.08);
  /* ... */
}

Automatic Source Detection

Tailwind CSS v4.0 reduces the need to manually configure the content array. By default, it scans source files based on common heuristics, automatically excluding paths in .gitignore or media files. If needed, specific sources may be added via:

@import "tailwindcss";
@source "../node_modules/@my-company/ui-lib";

Built-In CSS Transpilation and Import

In v4.0, Lightning CSS integration seamlessly handles vendor prefixes, feature transpilation, and minification. Previously, a developer might rely on postcss-import or autoprefixer; these are now unnecessary:

@import "tailwindcss";

References

https://tailwindcss.com/docs/v4-beta
https://www.npmjs.com/package/tailwindcss
https://github.com/tailwindlabs/tailwindcss/tree/v4.0.0
https://github.com/tailwindlabs/tailwindcss/releases/tag/v4.0.0

Available Short Domains Finder: 2-4 letter

YURII DE. — Mon, 30 Dec 2024 13:52:15 +0000

🚀 Available Short Domains Finder is a simple tool to help you quickly find available short domain names. It focuses on two-, three-, and four-character domains, making it perfect for startups, branding, and creative projects! 🏗️

Short domain names aren’t just about having a snappy URL — they can sharpen your brand identity, make your site easier to remember, and give you a competitive edge in a crowded digital landscape. The question is: how do you track down such rare, concise domain gems?

A Handy Tool for 2–4 Letter Domains

Available Short Domains Finder is a repository on GitHub that takes care of the heavy lifting when searching for short domains. It focuses on names with just 2–4 characters, perfect for:

Tech startups
Creative branding projects
Anyone who values memorability and simplicity

Inside the repository, you’ll find a curated list of already-tested short domains as well as a Python script that checks the availability of additional domain names if you want to expand your search.

Why Bother With Short Domains?

Memorability

A super-short domain is much easier for users to recall and type.
Branding Power

Stand out from competitors by providing a sleek, minimalist URL that reflects your identity.
Saves Time

Instead of manually testing endless character combinations, you get an up-to-date list of domains that are verified to be available.

About the .IS Domain

If you’re considering a domain in the .IS zone, here’s what you need to know:

Registration and annual renewal cost €36.90
This rate has been in effect since October 17, 2024
To convert this to your local currency, use the Currency Converter

Want to Support Future Updates?

I am not getting a penny from this offer, so I am hoping for your support. This project was created for personal purposes, but I thought I'd share it with your friends.

Building and maintaining a project like Available Short Domains Finder takes a lot of time and effort. If you’ve found a new domain or saved time because of this tool, you can show your appreciation by buying the creator a coffee on Buy Me a Coffee. Your support directly helps keep the project alive and growing.

Feel free to explore the GitHub repository, test out a few domain options, and enjoy that gratifying moment when you lock in your own short, memorable name. Good luck finding your perfect tiny URL!

Understanding Why the Clipboard API Fails on dev.local Mapped in /etc/hosts (HTTP) and Succeeds on localhost

YURII DE. — Sat, 28 Dec 2024 09:25:27 +0000

Understanding Why the Clipboard API Fails on dev.local Mapped in /etc/hosts (HTTP) and Succeeds on localhost

When developing web applications locally, developers sometimes add a custom domain (e.g., dev.local) to their /etc/hosts file, mapping it to 127.0.0.1 for convenience. However, you may encounter the following error in Chrome (tested with Version 131.0.6778.205 (Official Build)):

Uncaught Error: Clipboard API not supported in this browser.

At first glance, it might look like the browser lacks Clipboard API support entirely. In reality, Chrome is blocking Clipboard API access because the page is being served over an unsecured origin (HTTP on a custom domain). Modern browsers impose strict security requirements on various powerful APIs—such as the Clipboard API—to protect users. This means certain features only become available if:

The site is served over HTTPS (using a valid TLS certificate), or
The site is running on localhost, which is treated by most browsers as a secure context by default.

Why localhost Works but dev.local Does Not

Localhost: Browsers recognize localhost and treat it as a secure origin, even without HTTPS. As a result, the Clipboard API is enabled.
dev.local: When mapped via /etc/hosts for HTTP traffic, dev.local does not qualify as a secure origin. Hence, Chrome disables the Clipboard API, leading to the “Clipboard API not supported” error.

How to Fix This Issue

Use HTTPS for dev.local

Set up an HTTPS certificate for your custom domain. Self-signed certificates can work for development, though you may need to manually trust them in your browser.
Once your domain is recognized as secure, the Clipboard API should function normally.

Continue Using localhost

If HTTPS setup is not feasible right away, use localhost to maintain uninterrupted access to secure APIs like the Clipboard API.

Free Currency HTML-Widgets

YURII DE. — Mon, 26 Aug 2024 08:10:49 +0000

No compromises, no trial periods—just powerful, easy-to-use financial widgets that are absolutely free! Our sleek and effective HTML widgets not only enhance your website’s functionality but also drive more traffic effortlessly. Embedding them is a breeze—just one simple tag, and you’re ready to go! 🌐✨

💱 Currency Converter Widget

The Currency Converter Widget is a free, user-friendly web tool that boasts a beautiful UI and real-time currency conversion. It allows users to effortlessly convert between nearly 195 currencies, including precious metals, offering a seamless experience for your customers. 🌍✨

💲 Exchange Rates Widget

The Exchange Rates Widget is a free, easy-to-use web tool with a beautiful UI that displays real-time exchange rates, complete with indicators showing rate changes over the past 24 hours. Perfect for keeping your users informed and engaged! 🌐✨

💱 Currency Converter Widget PRO

The Currency Converter Widget PRO is the enhanced, free version of our popular Currency Converter Widget. With its beautiful UI and easy-to-use interface, this tool offers real-time calculation across multiple currencies while retaining all the features of the classic widget. Perfect for users who need more power and flexibility! 🌍✨

💲 Exchange Rates Widget PRO

The Exchange Rates Widget PRO is the advanced, free version of our Exchange Rates Widget. It features a beautiful UI and easy-to-use interface, allowing users to input amounts, add taxes or percentages to calculations, and enjoy all the functionalities of the classic widget. Perfect for those who need more comprehensive and customizable exchange rate tools! 🌐✨