teleren/devto huggingface dataset:
A new way to write media queries is coming to CSS: range ...
Published: 2024-07-10 06:11:45

Certainly! Let's dive into the world of **CSS Media Queries** and explore how they enhance responsive web design.

## Understanding CSS Media Queries

CSS Media Queries allow us to adapt the presentation of content based on different viewport sizes. The viewport represents the visible area of a web page, which varies depending on the device used to access the site¹. These queries are essential for creating responsive designs that look great on various screens.

## Traditional Syntax

In the past, we used the following syntax to apply styles based on viewport width:

```css
/* When the viewport width is at least 600px */
@media (min-width: 600px) {
  .element {
    /* Style away! */
  }
}
```

## The New Syntax

The Media Queries Level 4 specification introduces a more concise and intuitive syntax using comparison operators. These operators allow us to directly compare values instead of combining conditions with the `and` operator¹:

- `<`: Evaluates if a value is less than another value.
- `>`: Evaluates if a value is greater than another value.
- `=`: Evaluates if a value is equal to another value.
- `<=`: Evaluates if a value is less than or equal to another value.
- `>=`: Evaluates if a value is greater than or equal to another value.

Now, let's rewrite the previous example using the new syntax:

```css
/* When the viewport width is 600px or greater */
@media (width >= 600px) {
  .element {
    /* Style away! */
  }
}
```

## Targeting Ranges

Often, we create breakpoints in our designs—conditions where the layout "breaks" and specific styles are applied. These breakpoints typically depend on the viewport being between two widths. With the new syntax, we can easily target a range of viewport widths:

```css
/* When the viewport width is between 600px and 1200px */
@media (width >= 600px) and (width <= 1200px) {
  .element {
    /* Style away! */
  }
}
```

By embracing these new comparison operators, we can write cleaner, more expressive media queries for responsive web design. Happy coding! 🚀🎨
My subdomain proxy server in nodejs
Tags: javascript, node, proxy, subdomain
Published: 2024-07-09 12:20:37

Here is the nodejs proxy server that can be use to listen subdomain routes.

for example I run a server is **localhost:5000** but I want to use subdomain in this like **subdomain1.localhost:5000** or something diferent.

```javascript
const express = require('express');
const app = express();
const httpProxy = require('http-proxy');

const proxy = httpProxy.createProxy();

const BASE = "https://github.com";

app.use((req, res, next) => {
     
     const hostname = req.hostname;
     const domains = hostname.split('.');
     const subdomain = domains[0];
     const resolveTo = BASE + '/' + subdomain;
     return proxy.web(req, res, { target: resolveTo, changeOrigin: true });
});

app.listen(5000, () => console.log('Listening on port: 5000'));

app.get('/', (req, res) => {
     return res.send('Welcome to the homepage');
});
```
Introduction to BitPower decentralized smart contracts
Published: 2024-07-09 12:24:44

What is BitPower?
BitPower is a decentralized lending platform that uses blockchain technology to provide secure and efficient lending services through smart contracts.
Main features
Automatic execution
Smart contracts automatically execute transactions without human intervention.
Open source code
The code is open and can be viewed and audited by anyone.
Decentralization
No intermediary is required, and users interact directly with the platform.
Security
Smart contracts cannot be tampered with, ensuring transaction security.
Multi-signature technology is used to ensure the legitimacy of each transaction.
Asset collateral
Borrowers use encrypted assets as collateral to ensure loan security.
If the value of the collateralized assets decreases, the smart contract automatically liquidates to protect the interests of both parties.
Transparency
All transaction records are open and can be viewed by anyone.
Advantages
Efficient and convenient: smart contracts are automatically executed and easy to operate.
Safe and reliable: open source code and tamper-proof contracts ensure security.
Transparent and trustworthy: all transaction records are open to increase transparency.
Low cost: no intermediary fees, reducing transaction costs.
Conclusion
BitPower provides secure, transparent and efficient lending services through decentralized smart contract technology. Join BitPower and experience the convenience and security of smart contracts!@BitPower
python code editors and links
Tags: python, codeeditor, jopy
Published: 2024-07-09 12:25:03

**09-07-2024**

Applications
[python IDE](https://www.python.org/downloads/)
[pycharm] (https://www.jetbrains.com/pycharm/)

online editors
[tonyedit] (https://tonyedit.netlify.app/texteditor-py.html)
 [google colab](https://colab.research.google.com/notebook)
[one comp](https://onecompiler.com/python/42jtdw4v3)



[edit](https://trinket.io/embed/python3/a5bd54189b)
[useful](https://masterpy.com/lesson-01-working-in-python-01.php)
Pyenv and Pipenv on Fedora
Tags: python
Published: 2024-07-14 08:32:47

---
title: Pyenv and Pipenv on Fedora
published: true
description: Some projects or organiztions use Pyenv and Pipenv, so you may need to install them.
tags: python
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2024-07-14 08:09 +0000
---

I wonder if I can use pyenv and pipenv on Fedora Workstation 40 although I don't use these utilities in my personal projects. And the answer is yes.

The steps are as follow:

## Install dependencies

```shell
sudo dnf builddep python3
```

## Install pyenv

```shell
curl https://pyenv.run | bash
```

I know that you don't like running Bash script immediately from cURL.

## Modify .bashrc


Pyenv normally told you to append these lines to .bashrc, and the restart your terminal.

```
export PYENV_ROOT="$HOME/.pyenv"
[[ -d $PYENV_ROOT/bin ]] && export PATH="$PYENV_ROOT/bin:$PATH"
eval "$(pyenv init -)"

# Restart your shell for the changes to take effect.

# Load pyenv-virtualenv automatically by adding
# the following to ~/.bashrc:

eval "$(pyenv virtualenv-init -)"
```

## Install Python via Pyenv

```
pyenv install 3.10 # You can choose other versions
```

I know that we can install Python using configure and make like many other packages, but you can use pyenv as well.

## Set default python

```
pyenv global 3.10 # or other version
```

And then restart your terminal.

## And finally, install pipenv

```
pip install pipenv
```
What is Selenium? Why do we use Selenium for Automation?
Published: 2024-07-09 12:28:06

Selenium is an Automation Tool and portable software testing tool for web applications. A test domain-specific language is also provided, to write test cases one can use programming languages, including C#, Java, Perl, PHP, Python, Ruby, Scala, and Groovy.

It can mimic user actions such as clicking, typing and navigation.
What is Selenium? Why do we use Selenium for Automation?
Published: 2024-07-09 12:28:11

Selenium is an Automation Tool and portable software testing tool for web applications. A test domain-specific language is also provided, to write test cases one can use programming languages, including C#, Java, Perl, PHP, Python, Ruby, Scala, and Groovy.

It can mimic user actions such as clicking, typing and navigation.
How to setup postgres on ubuntu 20.04
Tags: postgres, ubuntu, client
Published: 2024-07-09 12:29:08

Ref Link: [Installation Docs](https://www.postgresql.org/download/linux/ubuntu/)

```
sudo apt install curl ca-certificates

sudo install -d /usr/share/postgresql-common/pgdg
sudo curl -o /usr/share/postgresql-common/pgdg/apt.postgresql.org.asc --fail https://www.postgresql.org/media/keys/ACCC4CF8.asc

sudo sh -c 'echo "deb [signed-by=/usr/share/postgresql-common/pgdg/apt.postgresql.org.asc] https://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list'

sudo apt update

sudo apt install postgresql-13 postgresql-client-13
```

**Incase of i386 machine, we may need to update source list like below content:**

###Open the source list with gedit and add the content:
`sudo gedit /etc/apt/sources.list.d/pgdg.list`

```
deb [arch=amd64 signed-by=/usr/share/postgresql-common/pgdg/apt.postgresql.org.asc] https://apt.postgresql.org/pub/repos/apt focal-pgdg main
```

**Login with postgres user and password:**

```
sudo -i -u postgres
postgres@shaikh:~$ psql
postgres=# create database local_test;
CREATE DATABASE
postgres=# grant all privileges on database local_test to postgres;
GRANT
postgres=# ALTER USER postgres WITH PASSWORD 'postgres';
ALTER ROLE
postgres=# 
```

**Now login with postgres user:**

```
psql -U postgres -h localhost

and password is postgres
```
24/7[Connect]!! How do I connect to Singapore Airlines? #Singapore_Hotline(Number)
Published: 2024-07-09 12:32:24

To connect with Singapore Airlines, you can call their customer service hotline at １-８３３-４６０-１８３８. Their representatives are available to assist you with flight bookings, reservation changes, and any other inquiries you may have. Alternatively, you can visit their website, singaporeair.com, to manage your booking, check flight status, and explore their services and offerings.
Biokemp: Customizable Smoking Filters Ecommerce Wix Studio Challenge
Tags: devchallenge, wixstudiochallenge, webdev, javascript
Published: 2024-07-09 12:33:18

*This is a submission for the [Wix Studio Challenge ](https://dev.to/challenges/wix).*


**What I Built**
I created "Biokemp" an online store dedicated to custom smoking filters. Users can personalize their filters to match their preferences and needs, ensuring a unique smoking experience.

**Demo**
https://digikentro.wixstudio.io/biokemp-new

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/et86tq2x61d8tpgqxbsq.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbwys9bl99wiuwphokyk.png)


**Development Journey**
- Customization Tool: Developed a user-friendly interface using Wix Studio’s JavaScript capabilities, allowing users to personalize their smoking filters with ease.

- Ecommerce Integration: Integrated Wix's ecommerce functionalities to facilitate secure transactions for customized smoking filters.

- Responsive Design: Ensured the website is fully responsive across devices, providing a seamless experience on all screen sizes.

**APIs and Libraries utilized?**
- Wix Velo
- Wix Stores API
SIA[Hotline]!! How do I connect to Singapore Airlines? #Direct_Line @Live(Person)
Published: 2024-07-09 12:41:22

To connect with Singapore, you have several options: But the most efficient way is to call their customer service number ☎1-833-816-0098 Or +★彡 1-833-816-0098 彡★. Phone: Call Singapore customer support line at (0TA) 1-833-816-0098(Live Person). 
To get in touch with a live person at Singapore, there are several methods available for your convenience. You can reach out to their customer service hotline at "+𝟭-833-816-0098 (Live Person)," initiate a live chat on their website, or utilize email support.
Sign Up
Tags: html, css, javascript, frontend
Published: 2024-07-09 12:55:16

I create a sign up page using html, css and js.🚀
To be sure that user write a valid input i use the regex in js.

Repo link: https://github.com/minalfatih/Sign-Up
Live link: https://minalfatih.github.io/Sign-Up/


![Desktop design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/blnmnr09ipht2n6g83qx.png)


![mobile design](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v4j8b8tppud3qzai5j9m.jpg)
Tuesday's AI Spotlight
Tags: ai, tech
Published: 2024-07-09 13:29:58

**A Quick Guide On How To Build AI Tools**


We're all busy innovating with AI! However, are we doing it effectively and efficiently to maximize ROI? Get ready to ace building AI tools like a pro with these tried-and-tested tips by experts. Dive right in!
(https://www.techdogs.com/td-articles/trending-stories/a-quick-guide-on-how-to-build-ai-tools)
Day 28 of 30 of JavaScript
Tags: webdev, javascript, beginners, tutorial
Published: 2024-07-09 13:14:58

Hey reader👋 Hope you are doing well😊
In the last post we have talked about Document and Element interfaces of DOM. In this post we are going to discuss about some other interfaces of DOM.
So let's get started🔥

## Event Interface

The Event interface represents an event which takes place on an EventTarget. An event can be triggered by the user action e.g. clicking the mouse button or tapping keyboard, or generated by APIs to represent the progress of an asynchronous task.
Many DOM elements can be set up to accept (or "listen" for) these events, and execute code in response to process (or "handle") them. Event-handlers are usually connected (or "attached") to various HTML elements (such as `<button>, <div>, <span>` etc.) using `EventTarget.addEventListener()`.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wey5zuegy3qinsnd6pxk.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kh3fukyvukwo8w6rqwbu.png)
The `addEventListener()` method attaches an event handler to the specified element.
There are various events that can be performed on an element such as -:

- click -> fired when button or any other clickable element is clicked.

- blur -> fired when an element has lost focus.

- focus -> fired when an element has gained focus.

- mouseover -> fired when mouse pointer points to that element.

- mouseout

- transistionend -> fired when a CSS transistion has finished playing.

- submit -> fired when a form is submitted.
There are more events that can be performed. But these are important ones.

**Event Methods**

- `event.preventDefault()` -> It is used to prevent the default behaviour of an event. For example when a button is clicked the page is reloaded this can be prevented using this method.

There are more interfaces but these were important ones.

We can change style of HTML element using JS DOM -: 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1m3rhtbv3poac8ehai83.png)

So this is it for this blog I hope you have understood it well. Please feel free to add if I have missed something.
Don't forget to follow me.
Thankyou🩵
dsadsadsadasdasdsadsadsa
Published: 2024-07-09 13:33:28


dsadsadsadasdasdsadsadsadasdasdsadsadsadasdasdsadsadsadasdasdsadsadsadasdasdsadsadsadasdasdsadsadsadasdasdsadsadsadasdasdsadsadsadasdasdsadsadsadasdasdsadsadsadasdasdsadsadsadasdasdsadsadsadasdasdsadsadsadasdasdsadsadsadasdasdsadsadsadasdasdsadsadsadasdas
Unlocking the Power of AI Integration with Sista AI
Tags: ai, react, javascript, typescript
Published: 2024-07-09 13:45:52

<h2>Introduction</h2><p>In today's tech-savvy world, the integration of AI technology has become a game-changer, revolutionizing user experiences in diverse industries. Sista AI, a leading AI integration platform, offers cutting-edge solutions to enhance user engagement and accessibility.</p><p>The demand for intelligent virtual assistants is soaring, with businesses seeking innovative ways to elevate online interactions. Sista AI's AI Voice Assistant & UI Controller provides a seamless integration for React apps, empowering users with hands-free functionality and personalized support.</p><h2>Leveraging Advanced Technologies</h2><p>Sista AI integrates state-of-the-art technologies like conversational AI agents and voice user interfaces to deliver precise responses and support multiple languages. This ensures a dynamic and engaging user experience, setting new industry benchmarks for AI-enabled applications.</p><h2>Driving Industry Transformation</h2><p>With Sista AI, developers can unlock the full potential of AI integration, streamlining user onboarding, and boosting productivity with intuitive voice commands. The platform's full-stack code execution and real-time data integration capabilities offer limitless possibilities for app customization and enhancement.</p><h2>The Future of Human-Computer Interaction</h2><p>Sista AI is revolutionizing user interaction, making technology more accessible and user-friendly across diverse frameworks. By leveraging the power of AI, businesses can enhance user engagement, streamline operations, and create personalized experiences that cater to a global audience.</p><h2>Empower Your Apps with Sista AI</h2><p>Transform your apps into intelligent solutions with Sista AI's advanced AI-driven platform. Visit <a href='https://smart.sista.ai/?utm_source=sista_blog&amp;utm_medium=blog_post&amp;utm_campaign=unlocking_power_of_AI_integration'>Sista AI</a> to start your free trial today and experience the future of AI integration!</p><br/><br/><a href="https://smart.sista.ai?utm_source=sista_blog_devto&utm_medium=blog_post&utm_campaign=big_logo" target="_blank"><img src="https://vuic-assets.s3.us-west-1.amazonaws.com/sista-make-auto-gen-blog-assets/sista_ai.png" alt="Sista AI Logo"></a><br/><br/><p>For more information, visit <a href="https://smart.sista.ai?utm_source=sista_blog_devto&utm_medium=blog_post&utm_campaign=For_More_Info_Banner" target="_blank">sista.ai</a>.</p>
round college
Published: 2024-07-09 13:55:48

[https://drive.google.com/drive/folders/1wVjIpYwgun7ZJzOQtlpTGjgiZ9NBxddo?usp=drive_link](https://drive.google.com/drive/folders/1wVjIpYwgun7ZJzOQtlpTGjgiZ9NBxddo?usp=drive_link)
Wezterm QuickSelect
Tags: tips, wezterm
Published: 2024-07-09 14:18:41

---
title: Wezterm QuickSelect
published: true
date: 2024-07-09 13:50:44 UTC
tags: tips,wezterm
canonical_url: https://burnskp.com/2024/07/09/wezterm-quickselect/
---

After using tmux for more than a decade, I’ve recently moved away from it and switched to using the multiplex features in wezterm. One of my favorite plugins for tmux is [tmux-thumbs](https://github.com/fcsonline/tmux-thumbs). This allowed me to write patterns using regex and press a shortcut to highlight those patterns. It would give me a set of quick keys I could type that would then either copy the text to my clipboard or paste it to the command line. This comes in very handy when using kubectl and dealing with pod names.

![](https://burnskp.com/wp-content/uploads/2024/07/cleanshot-2024-07-09-at-08.46.42402x.png?w=1024)

![](https://burnskp.com/wp-content/uploads/2024/07/cleanshot-2024-07-09-at-08.46.48402x.png?w=1024)

Wezterm has a similar feature called QuickSelect. The following config will create a LEADER-f shortcut for selecting the string and pasting it into the command prompt and LEADER-F to copy it to the clipboard.

```

local config = wezterm.config_builder()
config.keys = {
	{
		key = "f",
		mods = "LEADER",
		action = act.QuickSelectArgs({
			label = "paste",
			action = wezterm.action_callback(function(window, pane)
				local selection = window:get_selection_text_for_pane(pane)
				pane:paste(selection)
			end),
		}),
	},
  { key = "F", mods = "LEADER", action = act.QuickSelect },
}
config.quick_select_patterns = {
  "[a-z]+(?:-[a-z0-9]+)+-[a-z0-9]+",
}
return config

```
How to see images that are not recognized by the detector model?
Published: 2024-07-09 14:08:25

We can create and train an Object Detection model based on Training Custom Object Detector —> [https://tensorflow-object-detection-api-tutorial.readthedocs.io/en/latest/index.html](url)

There is also a file for evaluating the trained mode ==> Training Custom Object Detector —> [https://tensorflow-object-detection-api-tutorial.readthedocs.io/en/latest/training.html#evaluating-the-model-optional](url)

But how can I view images in the test dataset that were not recognized by the detection/pictures on which objects were not detected?
Redis at Woovi
Tags: redis, woovi
Published: 2024-07-10 11:13:52

This article explains our decision-making at Woovi to use Redis.

Redis is a versatile database that can solve many problems when scaling a Fintech.

## Cache

The first problem that Redis solves is to be able to cache data.
You can use cache to reduce the workload from external APIs or the main database.

We use it to cache slow/expensive external APIs, OAuth2 tokens, and account balances.

## Distributed Lock

We use Redis to create distributed locks to make concurrency safe in some scenarios like updating the balance of an account.

[A simple distributed lock implementation using Redis](https://dev.to/woovi/a-simple-distributed-lock-implementation-using-redis-445c)

## Message Queue

We use Redis to create a message queue and async batch processing using BullMQ

## Pub/Sub

We use Redis to create a publisher/subscriber to make our application real-time using WebSockets and GraphQL Subscriptions.

## Rate Limiting

We also implement rate limiting using Redis to avoid DDoS attacks, Credential stuffing, Brute force attacks, and Data scraping.


## In Conclusion

Redis is a versatile database that can be used in many scenarios to solve many problems as you scale.
If you are not using Redis, it could be a good addition to your tech stack

---
[Woovi](https://www.woovi.com) is an innovative startup revolutionizing the payment landscape. With Woovi, shoppers can enjoy the freedom to pay however they prefer. Our cutting-edge platform provides instant payment solutions, empowering merchants to accept orders and enhance their customer experience seamlessly.

If you're interested in joining our team, we're hiring! Check out our job openings at [Woovi Careers](https://woovi.com/jobs/).

---
Photo by <a href="https://unsplash.com/es/@amayli?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Amélie Mourichon</a> on <a href="https://unsplash.com/s/photos/design-system?orientation=landscape&utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
podiatrist
Published: 2024-07-09 14:40:57

[https://drive.google.com/drive/folders/13kp9jZrjnqjhglHsR2YHQ8vTJE5ZAi5D?usp=sharing](https://drive.google.com/drive/folders/13kp9jZrjnqjhglHsR2YHQ8vTJE5ZAi5D?usp=sharing)
Modern Good Practices for Python Development | by Stuart Ellis
Tags: python, beginners, programming
Published: 2024-07-09 14:43:28

Best practices make our lives easy in the long run. Stuart Ellis covered some of them in [this article](https://www.stuartellis.name/articles/python-modern-practices/). He mentioned that these are some agreed modern best practices but that is debatable like Avoid Using Poetry other than those mostly great practices which we all should be aware of and follow.
Code editor I created okral code editor - oce
Tags: vscode, code, oce, javascript
Published: 2024-07-09 14:47:42

Hey what do you think about the code editor I created

https://m.youtube.com/watch?v=lzEDh7Y17rY

Why did I create this?
I wanted an opensource, faster alternative to vscode, with better control over the whole editor, better ui without the sidebar, more out of a box features, with a view to make everything as simplified and performant as possible.
Here you can see it and download it - https://okraleditor.glitch.me Github - https://github.com/Okerew/okraleditor Any ideas how could I improve it and general opinions?