DEV Community: Serhii Pimenov

Latte: Powerful Framework for Testing JavaScript Applications

Serhii Pimenov — Tue, 24 Jun 2025 13:47:06 +0000

What is Latte?

Latte (an abbreviation for "laconic testing") is a modern framework for testing applications written in JavaScript and TypeScript. Designed as an alternative to popular solutions such as Jest, Mocha, and Jasmine, Latte offers a simple yet powerful approach to testing [1].

The framework provides developers with the ability to easily write and run tests for various types of applications, including web applications, React components, and other JavaScript modules.

Key Features of Latte

1. Built-in DOM Support

Unlike many other frameworks, Latte has built-in DOM support without the need for additional libraries or configurations. This significantly simplifies testing components that interact with the DOM and allows tests to be conducted in an environment that closely resembles a real browser [2].

You can use two DOM environments: happy-dom, and jsdom. The first is a lightweight implementation of the DOM API, while the second is a full-fledged DOM environment that supports all modern browser features.

2. Headless Testing Support

Latte supports headless testing mode, allowing tests to run without a visual interface. This is particularly useful for CI/CD pipelines and automated testing.

import { B } from "@olton/latte";

beforeAll(async () => {
    await B.create();
});

afterAll(async () => {
    await B.bye();
});

describe("Google", () => {
    it("Search", async () => {
        await B.visit("https://example.com");
        const title = await B.document.title();
        expect(title).toBe("Example Domain");
    });
});

3. Simple and Intuitive Syntax

The framework offers an easy-to-understand API that makes writing tests simple even for beginners:

describe("My addition function", () => {
    it("should correctly add two numbers", () => {
        const result = add(2, 3);
        expect(result).toEqual(5);
    });

    it("should handle negative numbers", () => {
        const result = add(-1, -3);
        expect(result).toEqual(-4);
    });
});

4. Asynchronous Testing Support

Latte has built-in support for asynchronous tests, making it easy to test functions with promises, async/await, and callbacks.

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('peanut butter');
        }, 1000);
    });
}
describe(`Async tests`, () => {
    it(`fetchData returns peanut butter`, async () => {
        const data = await fetchData();
        expect(data).toBeResolvedWith('peanut butter');
    })
})

5. Advanced Matcher System

The framework offers a rich set of matchers for verifying various conditions, including equality, inclusion, data types, error throwing, and more.

6. Testing React Components

Latte is excellent for testing React components thanks to its built-in DOM support and the ability to mock functions.

const Button = ({ text, onClick }) => {
    return <button onClick={onClick}>{text}</button>;
};

afterEach(() => {
    document.body.innerHTML = '';
});

describe('React Button (JSX)', () => {
    it('should render a button with text', async () => {
        const { container } = await R.render(<Button text="Click me" />);
        const button = container.querySelector('button');
        expect(button).toBeHtmlElement().hasText('Click me');
    });
});

Integration with the Development Ecosystem

Latte easily integrates with modern development tools:

NPM/Yarn: available as an npm package @olton/latte [3]
IDE integration: plugins available for popular IDEs, such as the Latte Test Runner plugin for JetBrains IDEs [4]
CI/CD support: easily integrates with popular CI/CD systems

Getting Started with Latte

To start using Latte in your project, first install it via npm:

npm install @olton/latte --save-dev

After installation, create your first test file:

// math.test.js
import { add } from './math';

describe('Math functions', () => {
    it('add function should correctly add numbers', () => {
        expect(add(1, 2)).toEqual(3);
    });
});

Run the tests with the command:

npx latte

Advanced Features

Mocking

Latte provides convenient tools for mocking functions and modules:

const mockFetch = mock(() => Promise.resolve({
    json: () => Promise.resolve({ data: 'test' })
}));

global.fetch = mockFetch;

it('should call fetch', async () => {
    await getData();
    expect(mockFetch).toHaveBeenCalled();
});

Conclusion

Latte is a modern, fast, and user-friendly framework for testing JavaScript and TypeScript applications. Its main advantages include built-in DOM support, simple syntax, and minimal configuration, making it an excellent choice for both small projects and large enterprise applications.

Thanks to active development and a growing community, Latte is becoming increasingly popular among developers looking for efficient and convenient testing tools [5].

Try Latte in your next project and experience its benefits yourself!

Useful Links

Metro UI Library: A Comprehensive Guide for Beginner Programmers

Serhii Pimenov — Thu, 12 Jun 2025 07:34:36 +0000

Introduction

Metro UI is a sleek, intuitive, and powerful front-end framework designed to make web development faster and easier. It's the first front-end component library built in the Metro Style design language (originally popularized by Microsoft), offering a clean, modern aesthetic for your web applications. This library is perfect for building responsive, mobile-first projects on the web.

What Makes Metro UI Special?

No Dependencies: Metro UI works without requiring other libraries like jQuery
Comprehensive Component Library: Over 150 ready-to-use UI components
Responsive Design: Built with mobile-first principles for all screen sizes
Modern Styling: Clean, flat design based on the Metro design language
Customizable: Extensive theming options with CSS variables
Lightweight: Optimized file sizes for better performance

Getting Started

Installation

You can add Metro UI to your project in several ways:

NPM (recommended):

   npm install @olton/metroui

2*CDN*:

   <link rel="stylesheet" href="https://cdn.metroui.org.ua/current/metro.css">
   <script src="https://cdn.metroui.org.ua/current/metro.js"></script>

Basic Setup

Here's a minimal HTML template to get started:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Metro UI Project</title>

    <!-- Metro UI CSS -->
    <link rel="stylesheet" href="path/to/metro.css">
</head>
<body>
    <!-- Your content here -->

    <!-- Metro UI JavaScript -->
    <script src="path/to/metro.js"></script>
</body>
</html>

Core Concepts

Component Structure

Metro UI is organized into components, each serving a specific purpose in your interface. Components can be:

CSS-only components: Styled purely with CSS classes (like buttons, typography)
JavaScript components: Require JavaScript for functionality (like datepickers, dialogs)
Combined components: Use both CSS and JavaScript (like accordions, tabs)

Using Components

CSS-only Components

For CSS-only components, you simply add the appropriate classes to your HTML elements:

<!-- A primary button -->
<button class="button primary">Click Me</button>

<!-- A card component -->
<div class="card">
    <div class="card-header">Card Title</div>
    <div class="card-content">Card content goes here</div>
</div>

JavaScript Components

JavaScript components can be initialized in two ways:

Declarative (using data attributes):

   <div data-role="datepicker"></div>

Programmatic (using JavaScript):

   const datepicker = Metro.makePlugin("#myDatepicker", "datepicker", {
       format: "YYYY-MM-DD"
   });

Component Configuration

Most components accept configuration options that can be specified in several ways:

Via data attributes:

   <div data-role="datepicker" 
        data-format="YYYY-MM-DD"
        data-min-year="2000">
   </div>

Via JavaScript:

   Metro.makePlugin("#myDatepicker", "datepicker", {
       format: "YYYY-MM-DD",
       minYear: 2000
   });

Globally (for all instances of a component):

   Metro.datePickerSetup({
       format: "YYYY-MM-DD"
   });

Key Components Overview

Metro UI offers a wide range of components. Here are some of the most commonly used ones:

Layout Components

Grid: A responsive 12-column grid system
Container: Centered content container with responsive widths
Splitter: Resizable split panels
Panel: Simple content containers with optional headers and footers
Box: Basic container for content
Cube: 3D cube container with rotating sides
Flip Card: Two-sided card that can be flipped
Hero: Large banner-like container for featured content
Hover Box: Container that changes appearance on hover
Resizable: Elements that can be resized by the user
Resizer: Component for resizing elements
Window: Draggable and resizable window-like container

Navigation Components

App Bar: Top navigation bar for applications
Nav View: Side navigation panel
Tabs: Tabbed interface for content organization
Tabs Material: Material design styled tabs
Menus: Various menu styles (dropdown, context, etc.)
Breadcrumbs: Navigation path indicator
Button Group: Group of related buttons
Command Button: Button with icon and text
Context Menu: Right-click menu
D-Menu: Dropdown menu
Drop Menu: Customizable dropdown menu
Dropdown: Dropdown selection component
Dropdown Button: Button with dropdown menu
H-Menu: Horizontal menu
Hamburger: Mobile menu toggle button
Page Control: Multi-page navigation control
Pagination: Page navigation controls
Ribbon: Office-style ribbon interface
Ribbon Menu: Menu in ribbon style
Sidebar: Side panel for navigation or content
Sidenav Counter: Side navigation with counters
Sidenav M3: Metro 3 style side navigation
Sidenav Simple: Simple side navigation
Split Button: Button with primary and dropdown actions
T-Menu: Tabbed menu
Task Bar: Windows-like taskbar
V-Menu: Vertical menu
Wizard: Step-by-step navigation interface
Wizard Classic: Classic style wizard interface

Form Components

Input: Text input fields with various styles and validations
Input Common: Common input field styles
Input Material: Material design styled inputs
Input Mask: Input with formatting mask
Select: Dropdown selection fields
Checkbox: Selection control for multiple choices
Radio: Selection control for single choice
Radio Buttons: Group of radio buttons
Custom Checkbox: Styled checkbox controls
Datepicker: Date selection control
Timepicker: Time selection control
Calendarpicker: Calendar date selection
Wheelpicker: Wheel-style picker control
Color Picker: Color selection control
Color Selector: Alternative color selection interface
Double Select Box: Two-column selection interface
Double Slider: Range slider with two handles
File Input: File upload control
Form: Container for form elements
Keypad: Numeric or custom keypad input
Rating: Star rating input
Slider: Range selection control
Switch: Toggle switch control
Tag Input: Input for creating tags
Textarea: Multi-line text input
Tokenizer: Token-based input field
Validator: Form validation component

Feedback Components

Dialog: Modal dialog boxes
Toast: Brief notifications
Notify: More prominent notifications
Progress: Progress indicators
Activity: Loading animation
Adblock: Adblock detection notification
Cookie Disclaimer: Cookie usage notification
Hint: Tooltip-style help text
Info Box: Information display box
Info Button: Button with information popup
Info Panel: Panel for displaying information
Overlay: Screen overlay for modals
Popover: Popup information container
Remark: Highlighted remarks or notes
Ripple: Material design ripple effect
Spinner: Loading spinner animation

Data Display

Table: Enhanced data tables with sorting and filtering
List: Simple list display
List View: List displays with various formatting options
Cards: Content containers with flexible layouts
Timeline: Chronological content display
Accordion: Collapsible content panels
Badges: Small count or status indicators
Calendar: Month view calendar display
Carousel: Slideshow for cycling through elements
Chart Card: Card with embedded charts
Chips: Compact elements representing attributes
Collapse: Expandable/collapsible content
Countdown: Timer counting down to a date
Counter: Animated number counter
Donut: Donut chart visualization
Gauge: Gauge chart visualization
Gravatar: Globally recognized avatar
Image Box: Container for images with effects
Image Compare: Before/after image comparison
Image Grid: Grid layout for images
Image Magnifier: Image zoom functionality
Lightbox: Image gallery with lightbox effect
Marquee: Scrolling text display
Remote Table: Table with remote data source
Skill Box: Skill level visualization
Social Box: Social media links display
Sorter: Sortable list or grid
Streamer: Stream of content items
Tag: Label or category indicator
Tile: Metro-style tile display
Treeview: Hierarchical data display
Working Tree: Tree structure with checkboxes

Media Components

Audio Button: Button with audio playback
Audio Player: Audio playback control
Image Button: Button with image
Media Player: Generic media playback control
Video Player: Video playback control
Vegas: Fullscreen background slideshow

Utility Components

Action Button: Floating action button
Analog Clock: Clock with analog display
Bulls: Bullet point indicators
Charms: Windows 8 style charms bar
Clock: Digital clock display
Cloak: Element visibility control
Cookie: Cookie management
Directive: Custom directive implementation
Drag Items: Drag and drop functionality
Draggable: Make elements draggable
Eval: JavaScript evaluation component
Export: Data export functionality
Gradient Box: Box with gradient background
Hotkey: Keyboard shortcut handling
HTML Container: Container for HTML content
Icon Box: Container with icon
Image Placeholder: Placeholder for images
Master: Master-detail interface
MD5: MD5 hash generation
Package Manager: Package management interface
Remote Dataset: Remote data handling
Shortcut: Keyboard shortcut display
Storage: Local storage management
Swipe: Touch swipe detection
Template: Template rendering
Theme Switcher: Theme selection control
Typer: Typewriter text effect
Viewport Check: Viewport detection

Theming and Customization

Metro UI supports both light and dark themes out of the box and offers extensive customization options through CSS variables.

Switching Between Light and Dark Themes

<!-- Light theme (default) -->
<body>
    <!-- Content -->
</body>

<!-- Dark theme -->
<body class="dark-side">
    <!-- Content -->
</body>

Customizing Components

You can customize components by overriding CSS variables:

:root {
    /* Customize primary color */
    --primary: #3498db;

    /* Customize button appearance */
    --button-background: #f0f0f0;
    --button-color: #333333;
    --button-border-radius: 8px;
}

Advanced Usage

Working with Component APIs

Once a component is initialized, you can access its API methods:

// Initialize a component
const datepicker = Metro.makePlugin("#myDatepicker", "datepicker");

// Use its API methods
datepicker.val("2023-06-15");  // Set date
const selectedDate = datepicker.val();  // Get date

Event Handling

Most components emit events that you can listen for:

Metro.makePlugin("#myDatepicker", "datepicker", {
    onSet: function(date) {
        console.log("Date selected:", date);
    },
    onOpen: function() {
        console.log("Datepicker opened");
    }
});

Best Practices

Mobile-First Approach: Design for mobile screens first, then enhance for larger screens
Consistent Styling: Use the same component variants and colors throughout your application
Accessibility: Use semantic HTML elements and ARIA attributes where appropriate
Performance: Load only the components you need to keep your application fast

Common Patterns

Creating a Basic Form

<form class="form">
    <div class="form-group">
        <label>Name</label>
        <input type="text" data-role="input">
    </div>

    <div class="form-group">
        <label>Birth Date</label>
        <input type="text" data-role="datepicker">
    </div>

    <div class="form-group">
        <label>Country</label>
        <select data-role="select">
            <option value="us">United States</option>
            <option value="ca">Canada</option>
            <option value="uk">United Kingdom</option>
        </select>
    </div>

    <div class="form-group">
        <button class="button primary">Submit</button>
        <button class="button" type="reset">Reset</button>
    </div>
</form>

Creating a Dashboard Layout

<div class="container">
    <div class="app-bar">
        <div class="app-bar-item">Dashboard</div>
        <div class="app-bar-menu">
            <a href="#" class="app-bar-item">Home</a>
            <a href="#" class="app-bar-item">Reports</a>
            <a href="#" class="app-bar-item">Settings</a>
        </div>
    </div>

    <div class="grid">
        <div class="row">
            <div class="cell-md-4">
                <div class="card">
                    <div class="card-header">Statistics</div>
                    <div class="card-content">
                        <!-- Statistics content -->
                    </div>
                </div>
            </div>

            <div class="cell-md-8">
                <div class="card">
                    <div class="card-header">Recent Activity</div>
                    <div class="card-content">
                        <!-- Activity content -->
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Related Libraries and Components

Metro UI integrates with several companion libraries to provide enhanced functionality across different aspects of web development. These libraries are seamlessly incorporated into the framework and are available globally when you include Metro UI in your project.

Companion Libraries

datetime

The datetime library provides comprehensive date and time manipulation capabilities. It's based on the @olton/datetime package and offers functions for parsing, formatting, and manipulating dates with localization support.

// Examples of datetime usage
const now = datetime(); // Current date and time
const formatted = now.format("YYYY-MM-DD HH:mm"); // Format date
const nextWeek = now.addDay(7); // Date arithmetic

dom

The dom library provides jQuery-like DOM manipulation capabilities without jQuery dependencies. It's based on the @olton/dom package and is available globally as both $ and Dom.

// Examples of dom usage
const element = $("#myElement"); // Select element by ID
element.addClass("active"); // Add class
element.on("click", function() { /* handle click */ }); // Add event listener

farbe

The farbe library provides color manipulation and conversion utilities. It's based on the @olton/farbe package and offers functions for working with colors in different formats (RGB, HSL, HEX, etc.).

// Examples of farbe usage
const color = farbe("#3498db"); // Create color from hex
const darkerColor = color.darken(20); // Darken color by 20%
const rgbValue = color.rgb; // Get RGB values

guardian

The guardian library provides data validation utilities. It's based on the @olton/guardian package and offers functions for validating various types of data.

// Examples of guardian usage
G.isEmail("user@example.com"); // Check if string is valid email
G.isUrl("https://metroui.org.ua"); // Check if string is valid URL
G.isNumber("123"); // Check if string is a number

hooks

The hooks library provides React-like hooks functionality for state management and side effects in non-React applications. It's based on the @olton/hooks package.

// Examples of hooks usage
const [count, setCount] = Hooks.useState(0); // Create state
Hooks.useEffect(() => { /* side effect */ }, [count]); // Run effect when count changes

html

The html library provides utilities for creating and manipulating HTML elements programmatically. It's based on the @olton/html package and offers functions for rendering HTML, loading CSS and JavaScript resources.

// Examples of html usage
const div = HTML.div({ class: "container" }, "Content"); // Create div element
HTML.render(div, document.body); // Render element to DOM

model

The model library provides functionality for creating and managing data models with reactivity. It's based on the @olton/model package.

// Examples of model usage
const userModel = new Model({ name: "John", age: 30 }); // Create model
userModel.on("change", (prop, val) => { /* handle change */ }); // Listen for changes
userModel.name = "Jane"; // Update property (triggers change event)

router

The router library provides client-side routing functionality for single-page applications. It's based on the @olton/router package.

// Examples of router usage
const router = new Router(); // Create router
router.add("/home", () => { /* render home page */ }); // Add route
router.start(); // Start routing

string

The string library provides enhanced string manipulation functionality. It's based on the @olton/string package and offers functions for working with strings.

// Examples of string usage
const s = str("Hello, World!"); // Create string object
s.capitalize(); // "Hello, world!"
s.truncate(5); // "Hello..."

Core Components

common-css

The common-css component provides a comprehensive set of CSS utilities for common styling needs. It includes utilities for animations, borders, typography, flexbox layouts, positioning, spacing, and more.

<!-- Examples of common-css usage -->
<div class="border bd-default p-2 m-2"><!-- Element with border, padding, and margin --></div>
<div class="d-flex flex-justify-between"><!-- Flexbox container with space-between --></div>
<div class="text-center text-bold"><!-- Centered, bold text --></div>

common-js

The common-js component provides a comprehensive set of JavaScript utility functions for Metro UI applications. These utilities help with common tasks such as type checking, DOM manipulation, object handling, and more.

// Examples of common-js usage
Metro.utils.isFunc(myValue); // Check if value is a function
Metro.utils.coords(element); // Get element coordinates
Metro.utils.secondsToTime(3600); // Convert seconds to time object

Troubleshooting

Common Issues

Components not initializing: Make sure Metro UI JavaScript is loaded and check for console errors
Styling issues: Check for CSS conflicts with other libraries
Responsive layout problems: Verify you're using the grid system correctly

Debugging Tips

Use browser developer tools to inspect elements and check for errors
Enable Metro UI debug mode: Metro.debug = true;
Check the official documentation for component-specific issues

Resources

Conclusion

Metro UI provides a comprehensive toolkit for building modern web interfaces with minimal effort. Its component-based architecture, responsive design capabilities, and clean aesthetic make it an excellent choice for beginners looking to create professional-looking web applications.

By mastering the basics outlined in this guide, you'll be well on your way to creating beautiful, functional web interfaces using Metro UI. As you grow more comfortable with the library, explore the more advanced components and customization options to create truly unique user experiences.

Creating html page in pure JavaScript

Serhii Pimenov — Thu, 18 Feb 2021 21:53:15 +0000

When you need to create an html page, but do not want to mess with html tags, RenderJS will help you. Think html in JavaScript! This is a simple library for creating HTML pages in pure JavaScript.
https://github.com/olton/RenderJS

Datetime.js - Syntax sugar and not only...

Serhii Pimenov — Sat, 05 Dec 2020 17:45:14 +0000

Hi All! I would like to present to you my own view on the organization of syntactic sugar for working with date and time in javascript - Datetime.js.

Datetime.js is a minimalist JavaScript library that parses, validates, manipulates, and displays dates and times for modern browsers with comfortable modern API.

🕒 Quick and accurate
💪 Immutable/mutable modes
🔥 Chainable
🌐 I18n support
📦 4kb mini library
👫 All browsers supported

API

It's easy to use Datetime APIs to parse, validate, manipulate, and display dates and times.

Parse

datetime();
datetime("2020");
datetime("2020-12-31");
datetime("2020-12-31 23:59");
datetime(2020, 12, 31, 23, 59);
datetime([2020, 12, 31, 23, 59]);
Datetime.parse(...);
Datetime.fromString("16 November 1961 15:24", "dd mm %y h:i", "en")
Datetime.fromString("16 Ноября 1961 15:24", "dd mm %y h:i", "ru")

Immutable/mutable

By default, datetime object is mutable. But, You can create immutable variable with method immutable:

var immutableDate = datetime('2020-12-21').immutable();
console.log(immutableDate); // 2020-12-21
console.log(immutableDate.add(1, 'month')); // 2021-01-21 this is a new object
console.log(immutableDate); // 2020-12-21

Display

datetime().format('{YYYY} MM-DDTHH:mm:ss sss Z A');
datetime().strftime('{%Y} %n-%dT%H:%M:%S %Q %z %p');

Get & set

You can set and get: millisecond, second, minute, hour, day, month, year, time (timestamp), ...

datetime().set('month', 3).month();
datetime().month(3).month();

Manipulate

You can set: millisecond, second, minute, hour, day, month, year.

datetime().add(3, 'day').add(1, 'hour');
datetime().addDay(3).addHour(1);

Align (Start From)

You can align date to: millisecond, second, minute, hour, day, month, year, quarter, week, isoWeek.

datetime().align("year"); // Will alignment to 1st Jan of year
datetime().align("month"); // Will alignment to 1st day of month

Compare

datetime("2020").older("2021"); // return true
datetime("2020").younger("1972"); // return true
datetime("2020").between("2019", "2021"); // return true
datetime("2020-21-12").diff("1972-21-12"); // return {day: 17532, hour: 420768, millisecond: 1514764800000, minute: 25246080, month: 576, second: 1514764800, year: 48}
datetime("2020-21-12").distance("1972-21-12", "year"); // return 48

Information

You can get different additional information about your date: count days in month, count days in year, number of quarter, year is leap, ...

datetime("2020-12-21").dayOfYear(); // return 356
datetime("2020-02-01").daysInMonth(); // return 29
datetime("2020-02-01").quarter(); // return 1
datetime("2020").isLeapYear(); // return true

i18n

Datetime has great support for internationalization. By default, Datetime includes only english locale.
You can include many others:

In HTML

<script src="datetime.js"></script>
<script src="i18n/ru.js"></script>

For NodeJS or use with Webpack or modern JS

import "@olton/datetime";
import "@olton/i18n/ru";

With locales:

Datetime.fromString("16 Ноября 1961 15:24", "dd mm %y h:i", "ru");
datetime().useLocale('ru').format("DD MMM YYYY"); // 03 Дек 2020

Plugins

You can create plugin and register it with functions Datetime.use() and Datetime.useStatic():

Create plugin

(function(global) {
    'use strict';

    Datetime.use({
        prototypeTest: function(val){
            return 0 === val || val ? val : "test";
        }
    });

    Datetime.useStatic({
        staticTest: function(val){
            return 0 === val || val ? val : "static test";
        }
    });
}());

Include a plugin into page after datetime.js:

<script sec="datetime.js"></script>
<script sec="plugin.js"></script>

And now use plugin:

<!-- Prototype methods -->
console.log(datetime().prototypeTest());
console.log(datetime().prototypeTest(123));

<!-- static methods  -->
console.log(Datetime.staticTest());
console.log(Datetime.staticTest(456));

Datetime is licensed under an MIT license.

Metro 4 changes group on Facebook

Serhii Pimenov — Sun, 29 Nov 2020 13:54:25 +0000

Metro 4 is a free open-source impressive components library built on HTML, CSS, and javascript for expressive web development.

If you interesting info, examples, discussions, please, join the new Metro UI/UX group on Facebook - https://www.facebook.com/groups/metrouicss. The old page is archived and information on it will no longer be published.

Generating Material UI Color Palette in Metro 4

Serhii Pimenov — Fri, 13 Nov 2020 19:39:10 +0000

Preamble - Metro 4 is a free open-source impressive components library written on HTML, CSS, and JAVASCRIPT.

In version 4.4.3. I added a new component color-selector and improved the module for working with color, including a function to generate a color palette in the Material UI style.

To demonstration these features, I have written a small and simple application on codepen.io. You can see it on https://codepen.io/olton/pen/abZXBmO

With this example, I wanted to show once again how easy it is to write on Metro 4 with its declarative approach.

Thank you for your attention.

Convert units with LESS mixin

Serhii Pimenov — Wed, 29 Jul 2020 14:31:38 +0000

This post will be useful for those who use LESS preprocessor for writing CSS styles.

Less (which stands for Leaner Style Sheets) is a backward-compatible language extension for CSS.

Sometimes we are faced with the task of converting units from one value to another. An example from real life - a designer gave us a layout in which all elements are sized in pixels, and according to the terms of the technical task, we need rem units in the styles.

Of course, you can sit and manually calculate the value for each property, but you can do it easier - write a mixin that will do this work for us - we will give it pixels, and it will generate our properties with rem units.

We want to:

Rule 1

.box {
    .px2rem(height, 16px);
}

will convert to:

.box {
    height: 1rem;
}

Rule 2

.box {
    .px2rem(padding, 16px 32px 24px 0);
}

will convert to:

.box {
    padding: 1rem 2rem 1.5rem 0;
}

Let's write our mixin. At the input, it receives property and a set of values (it can be one value or several). If one of the values is 0, no units should be added.

.px2rem(@attr: width; @size: 16) {
    .get-values(length(@size));
    .get-values(@s, @i: 1) when (@i =< length(@size)) {
        @value: extract(@size, @i);

        & when not(@value = 0) {
                @{attr}+_: unit( @value / 16, rem );
        }

        & when (@value = 0) {
                @{attr}+_: 0;
        }

        .get-values(@s, @i + 1);
    }
}

Let's do the same for the reverse transformation from rem to pixels:

.rem2px(@attr: width; @size: 16) {
    .get-values(length(@size));
    .get-values(@s, @i: 1) when (@i =< length(@size)) {
        @value: extract(@size, @i);

        & when not(@value = 0) {
                @{attr}+_: unit( 16 * @value, px );
        }

        & when (@value = 0) {
                @{attr}+_: 0;
        }

        .get-values(@s, @i + 1);
    }
}

Similarly, we can write converters for other units, for example, pt to pixels, pt to rem, and reverse.

.pt2px(@attr: width; @size: 16) {
    .get-values(length(@size));
    .get-values(@s, @i: 1) when (@i =< length(@size)) {
        @value: extract(@size, @i);

        & when not(@value = 0) {
                @{attr}+_: unit( round(@value * 1.333333) , px );
        }

        & when (@value = 0) {
                @{attr}+_: 0;
        }

        .get-values(@s, @i + 1);
    }
}

.px2pt(@attr: width; @size: 16) {
    .get-values(length(@size));
    .get-values(@s, @i: 1) when (@i =< length(@size)) {
        @value: extract(@size, @i);

        & when not(@value = 0) {
                @{attr}+_: unit( round(.75 * @value), pt );
        }

        & when (@value = 0) {
                @{attr}+_: 0;
        }

        .get-values(@s, @i + 1);
    }
}

.pt2rem(@attr: width; @size: 16){
    .get-values(length(@size));
    .get-values(@s, @i: 1) when (@i =< length(@size)) {
        @value: extract(@size, @i);

        & when not(@value = 0) {
                @{attr}+_: unit( round(@value * 1.333333 / 16), rem );
        }

        & when (@value = 0) {
                @{attr}+_: 0;
        }

        .get-values(@s, @i + 1);
    }
}

.rem2pt(@attr: width; @size: 16){
    .get-values(length(@size));
    .get-values(@s, @i: 1) when (@i =< length(@size)) {
        @value: extract(@size, @i);

        & when not(@value = 0) {
                @{attr}+_: unit( round(.75 * 16 * @value), pt );
        }

        & when (@value = 0) {
                @{attr}+_: 0;
        }

        .get-values(@s, @i + 1);
    }
}

Metro 4 is not only tiles!

Serhii Pimenov — Thu, 18 Jun 2020 12:08:34 +0000

When you talk about Metro 4 (Metro UI CSS), people immediately associate that this is something related to tiles and that's it. In fact, this is not so. The Metro 4 library (Metro UI CSS) allows you to create full-fledged sites, even without javascript knowledge.

One example is a site that I developed by order - cryptoscamalert.com. The site contains information about identified fraudsters in the world of cryptocurrency.

Many features are available right out of the box and are configured declaratively, through data- * attributes for HTML elements. Example: form validator.

Almost ALL Metro 4 components can be declaratively configured via data- * attributes!

Metro 4 was originally designed so that people of different specializations could use it for rapid prototyping of work sites, for example, SEO specialists.

The use of Metro 4 is quite diverse, another example is the leading Ukrainian hosting provider Mirohost.net uses Metro 4 to implement its administrative panel.

Of course, you can implement using Metro 4 and the tiled interface. Special elements - tiles are part of Metro 4. Real example - Start screen.

CryproScamAlert.com

Mirohost.net

Hunting for ad-blockers

Serhii Pimenov — Sun, 17 May 2020 18:13:45 +0000

Sometimes, when developing a site, a developer is faced with the problem of having an activated ad blocker on a user browser. It’s good if the developer has a ready-made solution that allows you to respond to the presence of a blocker. And if there is no such solution, then you have to either look for it or invent it. Starting with version 4.3.7, Metro 4 provides this solution out of the box.

How it works

The work of the blocker hunter takes place in 2 stages:
1) Metro 4 creates a bait for the blocker and publishes it in the DOM.
2) In the second stage, Metro 4 catches the blocker on this bait, like a fisherman a fish. If the blocker pecked and deleted/blocked the bait, Metro 4 generates the corresponding event and causes a callback, if it specified in the settings.

Setup Adblock hunter

To set up Adblock hunter, you must define a special object, named metroAdblockSetup. This set up rewrite a default config.

Defaults

var AdblockDefaultConfig = {
    adblockDeferred: 0, // How many ms will delay component initialization
    checkInterval: 1000, // How often to check the bait
    fireOnce: true, // bool | int Check once or a specified number of times
    checkStop: 10, // Stop fishing after the specified number of times
    onBite: Metro.noop // Callback
};

On site setup

You must define set up object before Metro 4 loading.

<script>
    var metroAdblockSetup = {
        checkInterval: 5000,
        fireOnce: 3,
        onBite: function(){
            console.warn("Adblock present");
        }
    }
</script>
<script src="https://cdn.metroui.org.ua/v4/js/metro.js"></script>

Define event hadler

If the fishing is successful, Metro 4 generates a special event with the name adblockalert. You can define an event handler for this event to perform appropriate actions.

$(window).on("adblockalert", function(){
    Metro.toast.create("AdBlock present", null, null, "alert", {
        showTop: true,
        distance: 150
    });
});

Link to the demo

The full example code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="https://cdn.metroui.org.ua/v4/css/metro-all.css?ver=@@b-version" rel="stylesheet">

    <title>AdBlock Alert - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body class="m4-cloak">
    <div class="container">
        <h1 class="text-center">AdBlock hunter demo</h1>
        <div class="text-center">
            If ad blocker is enabled, you should see a toast notification about this. This notification will appear three times.
        </div>
    </div>

    <script>
        var metroAdblockSetup = {
            checkInterval: 5000,
            fireOnce: 3,
            onBite: function(){
                console.warn("Adblock present");
            }
        }
    </script>
    <script src="https://cdn.metroui.org.ua/v4/js/metro.js?ver=@@b-version"></script>
    <script>
        $(function(){
            $(window).on("adblockalert", function(){
                Metro.toast.create("AdBlock present", null, null, "alert", {
                    showTop: true,
                    distance: 150
                });
            })
        })
    </script>
</body>
</html>

Using the reduce method to sequentially execute a promise queue

Serhii Pimenov — Sat, 18 Apr 2020 17:23:39 +0000

Hello friends!

In this post, I decided to share with you one of the uses of the Array.prototype.reduce a method, namely, using the method to consistently fulfill promises.

In one of the works (AnimationJS, m4q), I needed to perform sequentially some (total number is unknown) number of animations. Each animation is a Promise.

Animation definition

function animate(args){
    return new Promise(function(){
        ...
    })
}

Chain definition. Each argument for chain is a plain object, who describe animation.

chain([{...}, {...}, ...])

async/await

The first thing that came to mind was to solve the problem using async/await:

async function chain(arr) {
    for(let i = 0; i < arr.length; i ++) {
        const a = arr[i];
        a.loop = false;
        await animate(a);
    }
}

This works fine, but was not suitable for my m4q library written for Metro 4 on ECMAScript 5.1 due to lack of async/await support.

for Promise, I use polyfill

Finding a solution made it possible to use the reduce method.

function chain(arr, loop = false){
    const reducer = function(acc, item){
        return acc.then(function(){
            return animate(item)
        });
    }

    arr.reduce(reducer, Promise.resolve());
}

How to reduce works? The reduce() method reduces the array to a single value. The reduce() method executes a provided function for each value of the array (from left-to-right). The return value of the function is stored in an accumulator (result/total). For initial value, I use empty resolve. In next, on all iteration reducer execute Peromise and call a next animation in resolver. Since the resolver is executed after the end of the promise, we get sequential animations when each next animation is executed only when the previous one is completed.

Now I can execute chain of animations:

var ball = document.querySelector(".ball");
chain([
    {
        el: ball,
        draw: {
            top: [h - ball.clientHeight]
        },
        dur: 2000,
        ease: "easeOutBounce"
        },
    {
        el: ball,
        draw: {
            left: [w - ball.clientWidth]
        },
        dur: 2000,
        ease: "easeOutBounce"
    },
    {
        el: ball,
        draw: {
            top: 0
        },
        dur: 2000,
        ease: "easeOutBounce"
    },
    {
        el: ball,
        draw: {
            left: 0
        },
        dur: 2000,
        ease: "easeOutBounce"
    }
]);

Result

Pandora - Admin template written on Metro 4

Serhii Pimenov — Thu, 06 Feb 2020 13:51:23 +0000

Pandora - is a Responsive and Clean Admin Dashboard template. This template created with Metro 4 with uses native classes, elements, and components. The template contains different types of reusable and professional responsive components with different variations.

This template was created using the classes and components of Metro 4 to demonstrate the capabilities of Metro 4. You can easily do all this on Metro 4.

Pandora comes with a mega collection of features which can make admin dashboard of any projects like Small to Medium and Large sizes of projects including Personal projects, eCommerce, CRM, ERP, SaaS, PaaS, CMS, Back office and Accounting Software backend etc. The Multipurpose feature of the dashboard template will allow integrating for different types of business projects.

Pandora offers a creative and easy way to develop admin backend for your next exciting projects.

Pandora demo - https://metroui.org.ua/themes/pandora/
Pandora repo - https://github.com/olton/Pandora
Metro 4 - https://metroui.org.ua/
Author - https://pimenov.com.ua

ColorJS - JavaScript class to work with colors and color schemes.

Serhii Pimenov — Tue, 21 Jan 2020 22:37:16 +0000

New small library from Metro 4 author - ColorJS.

Hi, my friends! I want to introduce you to my library for working with color - ColorJS.

ColorJS - is a small library to manipulate with colors and color schemes. ColorJS provides simple API that may be used to create colors (HEX, RGB, RGBA, HSV, HSL, HSLA, CMYK) and perform various color-related operations (conversions and such). With ColorJS you can simply create any color schemes (complementary, triple, …). ColorJS is a javascript class designed to work with color. The class implements static and dynamic methods for conveniently working with color, converting it to various formats and generating special color schemes. ColorJS is also part of Metro 4.