DEV Community: Patryk Rzucidło

Push notifications on safari mobile

Patryk Rzucidło — Fri, 17 Feb 2023 00:22:21 +0000

We have push notifications on safari (iPhone and iPad) with 16.4 beta 1. Will PWAs be back?

SvelteKit + Electron: Create your desktop web app

Patryk Rzucidło — Mon, 13 Feb 2023 14:34:21 +0000

I make a new Adapter for SvelteKit apps that prerenders your entire site as a collection of static files for use with Electron.

🏗 https://github.com/ptkdev/sveltekit-electron-adapter
🙏 Support me with ⭐️ on github

💡 Features

[✔️] Easy to use
[✔️] MIT License
[✔️] Make desktop apps with svelte kit and electron

👔 Screenshot

🚀 Setup

Create new SvelteKit Project
Install this adapter npm install @ptkdev/sveltekit-electron-adapter --save-dev
Edit svelte.config.js and replace default adapter with electron-adapter:

import adapter from "@ptkdev/sveltekit-electron-adapter";

/** @type {import('@sveltejs/kit').Config} */
const config = {
    kit: {
        adapter: adapter({
            strict: false,
        }),
    },
};

Run npm run build (⚠️ IMPORTANT: Only pages with export const prerender = true; are supported)
Create new Electron Forge Project
Copy build content from sveltekit project and paste in src folder of electron forge project
Run Electron project with npm run start or generate binary with npm run make

I make a boilerplate that "automate" this process, but is working in progress: check this repo.

🧰 Options

The adapter({ options }) parameters list:

Parameter	Description	Values	Default value	Available since
pages	See official docs
assets	See official docs
fallback	See official docs
precompress	See official docs
strict	See official docs
policy	Set meta-tag `content-security-policy`	String	Empty	v0.2.0
viewport	Set meta-tag `viewport`	String	`width=device-width, initial-scale=1.0, viewport-fit=cover`	v0.2.0

Examples:

See examples folder on github

❤️ Thanks! Leave a feedback!

Dark Blood v3.0.0 - Theme for VSCode

Patryk Rzucidło — Fri, 23 Apr 2021 08:55:29 +0000

🎨 vscode-theme-dark-blood

I released the new version of my dark theme for VSCode, 1 theme with 5 shades of different colors with the name of the blood type (A, B, AB, 0)! Optimized for typescript and javascript. I wrote some regexes to color JSDoc comments correctly too which are now much more readable.

👔 Screenshot

Blood - Default

Blood - Type A

Blood - Type B

Blood - Type AB

Blood - Type 0

🚀 Installation

Install extension from vscode marketplace.
Open VSCode, go to extensions list and find "Dark Blood Theme"
Click to Set Color Theme and confirm theme.

🧩 Extra: if you want exactly what the screenshots look like (icons, hexcode colors preview, etc), install these extensions:

Set font: Fira Code Medium or JetBrains Mono Medium (13.5px size and 500 weight + ligatures).
ext install pkief.material-icon-theme
ext install naumovs.color-highlight
ext install wiggin77.codedox
ext install gruntfuggly.todo-tree
ext install esbenp.prettier-vscode
ext install dbaeumer.vscode-eslint

Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.

❤️ Thanks! Leave a feedback!

Make awesome WebComponents with Svelte

Patryk Rzucidło — Wed, 07 Apr 2021 17:25:35 +0000

🏗 svelte-webcomponent-boilerplate

Create your HTML5 Web Component with Svelte. Made your web components with this friendly boilerplate.

https://github.com/ptkdev-boilerplate/svelte-webcomponent-boilerplate/

📎 Menu

💡 Features
🕹 Demo
👔 Screenshot
🚀 How to use
- 🌎 Web
- 📦 Webpack/Browserify
- 📖 Wordpress
- 🔵 React
- 🔴 Angular
- 🟠 Svelte
- 🟢 Vue
- 🧰 Options / Attributes
- 🎨 CSS Customization
🔨 Developer Mode
- ⚡ Run Project
- 💾 Setup Project

💡 Features

[✔️] Easy to use
[✔️] MIT License
[✔️] Text animation by Nooray Yemon on Codepen
[✔️] Friendly boilerplate + Github templates
[✔️] Powered by svelte framework
[✔️] Without jQuery depencence
[✔️] Configurable with attributes
[✔️] Customization with CSS Style
[✔️] HTML5 Custom Elements - Native webcomponents
[✔️] Work with: Browserify / Webpack / ReactJS / Svelte / Angular / Vue / Wordpress
[✔️] Typescript + TSPaths preconfigured
[✔️] Userfriendly folders tree
[✔️] Prettiers and ESLint preconfigured
[✔️] all-contributors-cli and all-shields-cli preconfigured
[✔️] JEST Test preconfigured
[✔️] Full async code
[✔️] Github and Vscode dotfiles preconfigured
[✔️] Translations i18n: 🇬🇧 🇮🇹 🇵🇱 (Help me ❤️)

👔 Screenshot

See Demo here.

🚀 Installation (Web)

Add html code to your page:

<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>

Require javascript in yourpage (before </body>):

<script src="https://cdn.jsdelivr.net/npm/@ptkdev/svelte-webcomponent-boilerplate@latest/dist/webcomponent.js"></script>

You can replace @latest with specific version, example @2.0.1.

Below is available a description of options values.

📦 Installation (NPM Module - Browserify/Webpack)

Install npm module: npm install @ptkdev/svelte-webcomponent-boilerplate --save
Add html code to your page:

<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>

Require javascript in your app:

require("@ptkdev/svelte-webcomponent-boilerplate");

import "@ptkdev/svelte-webcomponent-boilerplate";

Below is available a description of options values.

📖 Installation (Wordpress)

Download wordpress plugin from mirror and install it.
Add code to your html widget, example: Appearance --> Widget --> insert HTML Widget and paste html code:

<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>

You can insert this html code in posts, widget, html box or theme.

🔵 Installation (React)

Install npm module with npm install @ptkdev/svelte-webcomponent-boilerplate@latest --save:
Import module in your src/App.js on header:

import "@ptkdev/svelte-webcomponent-boilerplate";

Add html code to your App.js template:

<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>

🔴 Installation (Angular)

Install npm module with npm install @ptkdev/svelte-webcomponent-boilerplate@latest --save:
Import module in your app/app.modules.ts on header:

import "@ptkdev/svelte-webcomponent-boilerplate";

Add html code to your html component:

<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>

🟠 Installation (Svelte)

Install npm module with npm install @ptkdev/svelte-webcomponent-boilerplate@latest --save:
Import module in your src/App.svelte on header:

import "@ptkdev/svelte-webcomponent-boilerplate";

Add html code to your html component:

<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>

🟢 Installation (Vue)

Install npm module with npm install @ptkdev/svelte-webcomponent-boilerplate@latest --save:
Import module in your src/App.vue and add webcomponent to ignoreElements of vue config:

import Vue from "vue";
import "@ptkdev/svelte-webcomponent-boilerplate";

Vue.config.ignoredElements = ["svelte-webcomponent-boilerplate"];

Add html code to your html component:

<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>

🧰 Options / Attributes

Parameter	Description	Values	Default value	Available since
header	Setup top text	String	`make`	v1.0.20210319
flip	Setup middle flip text (separte with commas)	String with commas	`svelte,webcomponents,opensource`	v1.0.20210319
footer	Setup bottom text	String	`awesome!`	v1.0.20210319

HTML Code with attributes:

<svelte-webcomponent-boilerplate header="make" flip="svelte,webcomponents,opensource" footer="awesome!"></svelte-webcomponent-boilerplate>

🎨 CSS Customization

You can overwrite default css with selector ::part, example:

<style>
    svelte-webcomponent-boilerplate::part(flip) {
        border: 2px solid red;
    }
</style>

Part attribute is, generally, suffix of a class. Use chrome inspector for get the correct value of part="" attributes. See MDN selector ::part docs.

🔨 Developer Mode

🏁 Run Project

Clone this repository or download nightly, beta or stable.
Run npm run init
Run npm run dev
Run http://localhost:5000

💾 Setup Project

If you want replace all strings (example: package name, author, urls, etc...) in markdown file, source files and others files of this project you need edit setup.json with correct values and run npm run setup.

💫 License

Code and Contributions have MIT License
Images and logos have CC BY-NC 4.0 License
Documentations and Translations have CC BY 4.0 License

Copyleft (c) 2021 Patryk Rzucidło (@PTKDev) <support@ptkdev.io>

Create a Telegram Bot with node

Patryk Rzucidło — Tue, 06 Apr 2021 08:30:56 +0000

🤖 node-telegram-bot-boilerplate

Create your telegram bot with this friendly boilerplate. Use this repository as template for your bot

https://github.com/ptkdev-boilerplate/node-telegram-bot-boilerplate

📎 Menu

💡 Features

[✔️] Easy to use
[✔️] MIT License
[✔️] Make telegram bot with node
[✔️] Friendly boilerplate + Github templates
[✔️] Typescript + TSPaths preconfigured
[✔️] Userfriendly folders tree
[✔️] Prettiers and ESLint preconfigured
[✔️] all-contributors-cli and all-shields-cli preconfigured
[✔️] JEST Test preconfigured
[✔️] Full async code
[✔️] Github and Vscode dotfiles preconfigured
[✔️] Translations: 🇬🇧 🇮🇹 🇵🇱 (Help me ❤️)

🚀 Usage

Clone this repository or download nightly, beta or stable.
Write to @botfather on telegram and create new bot (save token and set bot username)
Run with correct values: npm run init:token --username name_bot --token 1234:asdfghjkl
Run npm run init
Run npm run start-pm2

🔨 Developer Mode

🏁 Run Project

Clone this repository or download nightly, beta or stable.
Write to @botfather on telegram and create new bot (save token and set bot username)
Run with correct values: npm run init:token --username name_bot --token 1234:asdfghjkl
Run npm run init
Run npm run dev

💾 Setup Project

💫 License

Code and Contributions have MIT License
Images and logos have CC BY-NC 4.0 License
Documentations and Translations have CC BY 4.0 License

Copyleft (c) 2021 Patryk Rzucidło (@PTKDev) <support@ptkdev.io>

Make everything with Svelte

Patryk Rzucidło — Mon, 05 Apr 2021 11:33:31 +0000

💡 Intro

I would like to introduce you to my collection of templates (or also called boilerplate). What are? They are starting templates from which to develop apps, sites, bots, etc...

https://github.com/ptkdev-boilerplate/

My Svelte Github Templates

🏗 svelte-webcomponent = to create native html5 webcomponents using svelte

👔 svelte-spa = to create single page apps with svelte

🧬 svelte-electron = to create desktop apps using svelte-spa

📱 svelte-cordova = to create mobile (android and ios) apps using svelte-spa

🧵 svelte-kit-ssr = to create apps or websites with svelte optimized for seo using the server side rendering technique

🧰 node-modules = to create npm libraries

🪓 node-cli = to create terminal commands

🤖 node-telegram-bot = to create telegram bot in node

🤖 node-discord-bot = to create discord bot in node

🚀 About

What do this boilerplate series have in common? All. They all use the same folder structure, preconfigured typescript and jest, the same prettier, tspaths, eslint, the same contributors and badges generators in short, they are totally userfriendly and mirror image. Learning to use one is very easy to switch to another.

💾 Setup Project

💫 License

Code and Contributions have MIT License

I present my Github Profile

Patryk Rzucidło — Sat, 29 Aug 2020 19:33:40 +0000

Hi,
I'm happy to present my new homepage of github profile, a short presentation of all my active projects: https://github.com/ptkdev

I have focused on a simple layout that can facilitate access to my social profiles and my pojects/works. Opinions?

all-shields-cli

Patryk Rzucidło — Sat, 16 May 2020 12:03:35 +0000

🦌 Badges generator from dotfiles for any markdown

Tool to help automate your badges of shields.io, badgen.net, fury.io and snyk.io from .all-shieldsrc dotfile for your markdown files. You can use Liquid variables like {{name}} or {{version}} which refer to your package.json.

Inspired by all-contributors-cli

Resources: [NPM] [GITHUB]

💡 Features

[✔️] Easy to use
[✔️] MIT License
[✔️] Support: shields.io
[✔️] Support: fury.io
[✔️] Support: snyk.io
[✔️] Support: badgen.net
[✔️] Full customizations!
[✔️] Liquid Variables
[✔️] Tool to help automate your badges on markdown.
[✔️] Badges generator from dotfiles for any markdown

👔 Screenshot

🚀 Installation

In your node project run: npm install @ptkdev/all-shields-cli --save-dev
In your package.json add script:

    ...
    "scripts": {
        "all-shields-cli": "all-shields-generate"
    }
    ...

Create .all-shieldsrc and paste sample:

{
    "files": [
        "README.md"
    ],
    "shields": [
        {
            "id": "my-badges",
            "badges": [
                {
                    "url": "https://www.npmjs.com/package/@ptkdev/all-shields-cli",
                    "color": "lightgray",
                    "label": "package name",
                    "title": "package name",
                    "message": "all-shields-cli",
                    "style": "flat",
                    "logo": "",
                    "platform": "shields"
                }
            ]
        }
    ]
}

Add in your README.md the html comment (my-badges is id from the previous step):

<!-- all-shields/my-badges:START -->
<!-- all-shields/my-badges:END -->

Run npm run all-shields-cli

See folder examples, run with node example.js. Below is available a description of options values.

🔑 Liquid variables

In your .all-shieldsrc dotfile you can use liquid variables like {{name}} or {{version}} which refer to your package.json. Key of package.json is name of liquid variable {{key_from_package.json}}

🐶 Work with Husky

In your node project run: npm install husky --save-dev (docs)
You can use pre-commit hooks with husky:

    ...
    "husky": {
        "hooks": {
            "pre-commit": "npm run all-shields-cli"
        }
    }
    ...

🧰 Options: Badges Array

Parameter	Description	Values	Default value	Available on platforms	Available since
platform	Define platform	`discord` / `shields` / `fury` / `snyk` / `badgen`	`shields`		v1.0.0
custom	Set custom string of image url (appended after domain url of badge service)	`string`	empty	`discord`, `shields`, `fury`, `snyk`, `badgen`	v1.1.0
url	If you click on badge open this url	`URI`	empty	`discord`, `shields`, `fury`, `snyk`, `badgen`	v1.0.0
color	Badge hexcode color (right side). NOTE: Overwrited if `custom` is set.	`string` / `hexcode`	`lightgray`	`shields`, `badgen`	v1.0.0
label	Badge text (left side). NOTE: Overwrited if `custom` is set.	`string`	empty	`shields`, `badgen`	v1.0.0
title	Mouse hover alt text	`string`	empty	`discord`, `shields`, `fury`, `snyk`, `badgen`	v1.0.0
message	Badge text (right side). NOTE: Overwrited if `custom` is set.	`string`	empty	`discord`, `shields`, `fury`, `snyk`, `badgen`	v1.0.0
style	Look of badge. NOTE: Overwrited if `custom` is set.	`plastic` / `flat` / `flat-square` / `for-the-badge` / `social`	`flat`	`shields`	v1.0.0
logo	Show logo (left side). NOTE: Overwrited if `custom` is set.	shields: `bitcoin` , `dependabot` , `discord` , `gitlab` , `npm` , `paypal` , `serverfault` , `stackexchange` , `superuser` , `telegram` , `travis` and more on docs. badgen: `airbnb`, `apple`, `appveyor`, `atom`, `awesome`, `azure`, `azurepipelines`, `bitcoin`, `buymeacoffee`, `chrome`, `circleci`, `cocoapods`, `codacy`, `codebeat`, `codeclimate`, `codecov`, `codeship`, `commonwl`, `deepscan`, `dependabot`, `discord`, `dockbit`, `docker`, `eclipse`, `firefox`, `flow`, `git`, `github`, `gitlab`, `gitter`, `googleplay`, `graphql`, `haskell`, `jsdelivr` and more on docs	empty	`shields`, `badgen`	v1.0.0
server_id	if platform is discord, set your discord server_id	`DISCORD_SERVER_ID`	empty	`discord`	v1.0.0

💫 License

Code and Contributions have MIT License
Images and logos have CC BY-NC 4.0 License (Freepik Premium License)
Documentations and Translations have CC BY 4.0 License

❤️ Thanks! Leave a feedback!

I hate black bars! My Chrome and Edge extension for remove them on 21:9 monitors!

Patryk Rzucidło — Sat, 09 May 2020 20:51:30 +0000

🖥 Chrome & Edge Extension: Aspect Ratio 21:9

I spent time in quarantine watching movies on netflix. I have a 21:9 monitor (ultrawide) and all the films have black side bands, I hate black bars! I used chrome extensions to solve the problem but they don't work on all the services I use, they are not stable, they are complicated to use and I gave up: I created my extension that solves the problem! You can cut, crop, zoom and use it on 21:9 or 32:9 monitors and work on all the web sites you want!

Resources: [GITHUB]

Fit the screen properly in fullscreen mode on monitor with 21:9 aspect ratio. Work on Netflix, Youtube, PrimeVideo, VVVVID, etc...

🚀 Installation

Try on Chrome	Try on Edge

💡 Features

[✔️] Easy to use
[✔️] MIT License
[✔️] Browser supported: Google Chrome and Microsoft Edge
[✔️] Fix aspect ratio on 21:9 monitor (stretch / crop)
[✔️] Customize Aspect ratio value (32:9 and 19:10 monitors)
[✔️] ON / OFF buttons
[✔️] Keyboard shortcuts
[✔️] Netflix
[✔️] Youtube
[✔️] Prime Video
[✔️] Dailymotion
[✔️] Vimeo
[✔️] VVVVID
[✔️] Crunchyroll
[✔️] Twitch
[✔️] ...add custom domain and try fix size of player on all websites!
[✔️] Translations: 🇬🇧 🇮🇹 🇵🇱 🇪🇸 (Help me ❤️)

👔 Screenshot

⌨️ Shortcuts

You can set shortcuts on chrome://extensions/shortcuts. No Default shortcuts available.

💫 License

Code and Contributions have MIT License
Images and logos have CC BY-NC 4.0 License (Freepik Premium License)
Documentations and Translations have CC BY 4.0 License

❤️ Thanks! Leave a feedback!

The best alternative to the console.log statement

Patryk Rzucidło — Wed, 06 May 2020 13:38:23 +0000

🦒 Beautiful Logger for Node.js

The best alternative to the console.log statement

I love using console.log but it is difficult to record all the log information. I have implemented a small colored variant with tags, colors, messages of various errors and write to file logs in .json / txt format.

Resources: [NPM] [GITHUB]

💡 Features

[✔️] Easy to use
[✔️] MIT License
[✔️] The best alternative to the console.log statement
[✔️] Write stdout logs to file (supported format: text/log and json)
[✔️] The JSON logs format is compatible with pinojs
[✔️] Translations: 🇬🇧 🇮🇹 🇵🇱 (Help me ❤️)

👔 Screenshot

🚀 Installation

In your node project run: npm install @ptkdev/logger --save
Usage:

const Logger = require("@ptkdev/logger");
const logger = new Logger();
logger.info("message");

You can set options to new Logger(options); example:

const Logger = require("@ptkdev/logger");

const options = {
    "language": "en",
    "colors": true,
    "debug": true,
    "info": true,
    "warning": true,
    "error": true,
    "sponsor": true,
    "write": true,
    "type": "log",
    "path": {
        "debug_log": "./debug.log",
        "error_log": "./errors.log",
    }
};

const logger = new Logger(options);
logger.info("message");

Options

Parameter	Description	Values	Default value
language	Set language of log type	en/it/pl	en
colors	Enable colors in terminal	true/enabled/false/disabled	true
debug	Enable all logs with method debug	true/enabled/false/disabled	true
info	Enable all logs with method info	true/enabled/false/disabled	true
warning	Enable all logs with method warning	true/enabled/false/disabled	true
error	Enable all logs with method errors	true/enabled/false/disabled	true
sponsor	Enable all logs with method sponsor	true/enabled/false/disabled	true
write	Write the logs into a file, you need set path values	true/enabled/false/disabled	false
type	Format of logs in files	log/json	log
path	If write is true, the library writes the logs to a path	Object	`{"debug_log": "./debug.log", "error_log": "./errors.log"}`

Methods

Method	Description	Parameters
debug(message, tag)	`message`: Display debug log message `tag`: prefix of message	`message`: string (mandatory) `tag`: string (optional)
info(message, tag)	`message`: Display info log message `tag`: prefix of message	`message`: string (mandatory) `tag`: string (optional)
warning(message, tag)	`message`: Display warning log message `tag`: prefix of message	`message`: string (mandatory) `tag`: string (optional)
error(message, tag)	`message`: Display errors log message `tag`: prefix of message	`message`: string (mandatory) `tag`: string (optional)
sponsor(message, tag)	`message`: Display sponsor log message `tag`: prefix of message	`message`: string (mandatory) `tag`: string (optional)
stackoverflow(message, tag, error_string)	`message`: Display stackoverflow log message `tag`: prefix of message `error_string`: query for stackoverflow, if empty we use message param	`message`: string (mandatory) `tag`: string (optional) `error_string`: string (optional)
docs(message, url, tag)	`message`: Display docs log message `url`: link of documentation `tag`: prefix of message	`message`: string (mandatory) `url`: string (optional) `tag`: string (optional)

💫 License

Code and Contributions have MIT License
Images and logos have CC BY-NC 4.0 License (Freepik Premium License)
Documentations and Translations have CC BY 4.0 License

❤️ Thanks! Leave a feedback!

Last 9 instagram photos on your wordpress blog in 3 minutes

Patryk Rzucidło — Wed, 06 May 2020 09:25:45 +0000

Hi!
The other day I told you how I created my first webcomponents. Today I wanted to tell you that I have implemented a wordpress plugin that loads the webcomponent into your blog and allows you to insert the instagram widget wherever you want: html box, post or in the theme.

👔 Screenshot

Wordpress default theme + instagram widget:

🚀 Installation (Wordpress)

Download wordpress-plugin and install it.
Add code to your html widget, example: Appearance --> Widget --> insert HTML Widget and paste html code (and replace @ptkdev with your instagram username):

<instagram-widget username="@ptkdev" grid="3x3"></instagram-widget>

You can insert this html code in posts, widget, html box or theme. Where you want see instagram photos box.

Resources: [DEMO] [NPM] [GITHUB]

🧰 Options / Attributes

Parameter	Description	Values	Default value	Available since
username	Set your instagram username	Your instagram username with or without @	`@ptkdev`	v1.0.0
items-limit	Set the max number of pictures	number: from `0` to `12`	`9`	v1.1.0
grid	Set grid aspect ratio	`1x1`, `2x2`, `3x3`, etc... or `responsive`	`responsive`	v1.1.0
image-width	Set width of images (NOTE: grid different than `responsive` overwrite this value)	length units: `100%`, `100px`, `100pt`	`100%`	v1.1.0
image-height	Set height of images	length units: `100%`, `100px`, `100`	`100%`	v1.1.0
border-spacing	Set spacing around images	length units: `5%`, `5px`, `5pt`	`2px`	v2.1.0
border-corners	Set border radius of corners: `0`: square / `15`: rounded / `100`: circle	number: from `0` to `100`	`5`	v2.1.0
force-square	Force square aspect ratio if you post photos with different size on your instagram	`yes` / `no`	`yes`	v2.4.0
cache	Enable/disable cache	`enabled` / `disabled`	`enabled`	v2.1.0

💫 License

Code and Contributions have MIT License
Images and logos have CC BY-NC 4.0 License (Freepik Premium License)
Documentations and Translations have CC BY 4.0 License

❤️ Thanks! Leave a feedback!

Badge Generator of "Available on Store"

Patryk Rzucidło — Sun, 03 May 2020 11:38:10 +0000

Hi!
I love consistency. I decided to create a badge generator for the buttons "available on the store". The official buttons are all different fonts, spacing, sizes and it is something that in 2020 I can no longer accept. I like homogeneous things.