teleren/devto huggingface dataset:
🚀 5 open-source copy and paste Tailwind CSS 💨component libraries YOU HAVE to try in 2023 🔥
Tags: webdev, javascript, programming, productivity
Published: 2023-09-04 12:04:13

I love Tailwind CSS. For me it's impossible to develop UIs using something different. It just doesn't work.

<img width="100%" style="width:100%" src="https://media.giphy.com/media/cstHEo3umAADEfFAvZ/giphy.gif" >

The best part of Tailwind CSS is that it allows to collocate JS, HTML and CSS in one file. And this unique feature makes sharing Tailwind components a breeze. 

I have collected a list of 5 libraries with beautifully crafted Tailwind CSS components which you can copy-paste right into your code, for free ✨

Check them out ⬇️

## 1. DaisyUI

- 53 components for actions, data display, data input, layout, navigation and even mockups 😮
- Easily customizable components and style system
- Custom themes and theme generator 


![DaisyUI Components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u8pwaj475egdrcx8ksfl.png)

Find components here:
https://daisyui.com/

<hr />

## 2. Flowbite

- 330 free and premium components for tables, footers, CTAs, pricing, FAQ and more 
- Standalone libs for React, Vue and other frameworks which help to implement interactivity 🎭
- 460+ SVG and JSX icons

![Flowbite Components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/97xpan4iq4a6o1kquhvo.png)

Find components here:
https://flowbite.com/

<hr />

## 3. HyperUI

- Components for Application UI, Marketing websites and eCommerce
- Out-of-the-box responsiveness, dark mode and support for Alpine.js 🏔️

![HyperUI Components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cz2yboz9rhx6sigetk0t.png)

Find components here:
https://www.hyperui.dev/

<hr />

## 4. shadcn/ui

My favorite one 🤗

- 40+ accessible and pixel-perfect components for React, Next.js and Remix
- Easily customizable themes and styles
- Handy CLI 🤌, out-of-the-box dark mode and more

![shadcn/ui components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4da22a8f7n2k4n5fheze.png)

Find components here:
https://ui.shadcn.com/

<hr />

## 5. Tailwind Elements

- 500+ Material UI style components build with Tailwind CSS 😮
- Compatible with any framework + standalone React lib
- Fully open-source, support for themes and dark mode

![Tailwind Elements Components](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3b4qbcfghw3q21hwhrim.png)

Find components here:
https://tailwind-elements.com/

<hr />

That's a wrap!

If you like content like this, checkout my weekly [newsletter](https://stargazerweekly.beehiiv.com/subscribe) where I share learnings building open-source products and trying to make money with them 🤑

[![Stargazer Weekly Newsletter](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k7mf8mv6t05gc47lyi5g.png)](https://stargazerweekly.beehiiv.com/)

💌 [Subscribe](https://stargazerweekly.beehiiv.com/subscribe)

Cheers 🥂
Igor
New Discoveries in No-Code AI App Building with ChatGPT
Tags: ai, llms, chatgpt, claude
Published: 2023-09-04 12:02:29

As an AI newbie, I used to find coding apps from scratch an absolute nightmare! The learning curve was steep as a ski slope, debugging took endless hours, and developing even a simple AI app nearly drove me insane! But since discovering Dify, it has totally revolutionized my life by enabling app development without any coding skills!

[Dify](https://dify.ai/) lets me easily connect to top-notch AI models like ChatGPT, Claude, llama2 to make super cool apps! Its magic-like rapid app generation tailored specifically to my needs is amazing. I can write prompts, upload my own datasets, and embed specialized knowledge into the AI apps. The outputs can process and respond precisely to my inputs - it's just fantastic!

Now I can freely create all kinds of AI apps like chatbots and web apps with ease! I highly recommend all new AI learners try Dify - you'll totally get hooked! It has changed my life and I believe it will change yours too!
Trying to display an Amazon Location Service map in QGIS
Tags: qgis, amazonlocationservice, foss4g, aws
Published: 2023-09-04 12:01:37

![img](https://memo.dayjournal.dev/images/try-100_00.png)

### I have tried to display an Amazon Location Service map in QGIS :tada:  

The following is a detailed explanation.

- Advance Preparation
- Vector Tile Layer Registration
- Vector Tile Layer Display

## Advance Preparation

- Amazon Location Service API key creation section of this article.

[Use 3D map library with API key function of Amazon Location Service](https://dev.to/aws-heroes/use-3d-map-library-with-api-key-function-of-amazon-location-service-c6a)

Prepare the following information to display the map.

- Region name (e.g., ap-northeast-1)
- Map name (e.g. SampleMap)
- API key (e.g., v1.public.xxxxx)

<br>

## Vector Tile Layer Registration
First, register the Amazon Location Service map in the vector tile layer of QGIS.

<br>

Start QGIS → Layer → Add Layer → Click Add Vector Tile Layer.
![img](https://memo.dayjournal.dev/images/try-100_01.png)

Click New → New Generic Connection.
![img](https://memo.dayjournal.dev/images/try-100_02.png)

Set the Layer Name, Tile URL, and Style URL, and click OK. In the URL, set "region" to the region name, "mapName" to the map name, and "apiKey" to the API key.
![img](https://memo.dayjournal.dev/images/try-100_03.png)

Tile URL
```text
https://maps.geo.[region].amazonaws.com/maps/v0/maps/[mapName]/tiles/{z}/{x}/{y}?key=[apiKey]
```

Style URL
```text
https://maps.geo.[region].amazonaws.com/maps/v0/maps/[mapName]/style-descriptor?key=[apiKey]
```

<br>

This completes the vector tile layer registration!

<br>

## Vector Tile Layer Display
Finally, display the Amazon Location Service map in QGIS.

<br>

Select the vector tile layer you have configured and click Add.
![img](https://memo.dayjournal.dev/images/try-100_04.png)  

Now you can display the Amazon Location Service map style in QGIS!
![img](https://memo.dayjournal.dev/images/try-100_05.png)  

<br>

QGIS can import vector tiles and their map styles, and since Amazon Location Service maps also use vector tiles, they can be imported in QGIS. However, QGIS does not support all map styles, so some style representations may not be accurately reproduced.

<br>

Related Articles
{% link https://dev.to/aws-heroes/use-3d-map-library-with-api-key-function-of-amazon-location-service-c6a %}
{% link https://dev.to/aws-heroes/amazon-location-service-and-aws-amplify-to-use-various-map-library-4mmk %}
{% link https://dev.to/aws-heroes/spatial-search-with-amazon-opensearch-service-and-visualized-it-in-qgis-2m70 %}
{% link https://dev.to/aws-builders/spatial-search-of-amazon-s3-data-with-amazon-athena-and-visualized-it-in-qgis-2b9a %}

<br>

References
[QGIS](http://www.qgis.org/ja/site/)
[Amazon Location Service](https://aws.amazon.com/location/)
Classification of Market Regimes Using Standard Deviation
Published: 2023-09-04 11:59:09


Understanding what's currently happening in the market is crucial to make informed decisions. The concept of market regimes helps us gain insight into this. In broad terms, the market can be bullish, bearish, or range-bound. Professionals identify over ten different regimes.

In this article, we'll explore how you can determine market regimes using standard deviation of prices. It allows us to assess how values in a dataset are distributed around the mean.

In our dataset, we have 260,000 rows of data representing tick-by-tick price changes of ETH/USD over approximately 3 days collected via websockets.

> df = pd.read_csv(filename, names=['receive_timestamp', 'price'])
> df['receive_timestamp'] = pd.to_datetime(df['receive_timestamp'])
> df.set_index('receive_timestamp', inplace=True)
   

First, we need to convert price changes into a logarithmic form, meaning we'll analyze percentage changes instead of regular prices. This helps smooth out volatility and enables easy comparisons across different periods.

> df['price'] = df['price'].apply(np.log)

Now, let's calculate the standard deviation of logarithmic prices.

> df['std_dev'] = df['price'].rolling(window=100).std()
> df['std_dev_ma'] = df['std_dev'].rolling(3000).mean()
   
Next, we'll define several levels and calculate the boundaries for these levels. Level 0 will correspond to the lowest volatility, with each subsequent group representing higher volatility.

> std_dev_ma_threshold_1 = df['std_dev_ma'].quantile(0.2)
> std_dev_ma_threshold_2 = df['std_dev_ma'].quantile(0.4)
> std_dev_ma_threshold_3 = df['std_dev_ma'].quantile(0.6)
   
Now, we can create a price chart and mark our levels.

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

Gray and green zones represent low volatility, while red and black indicate the most volatile segments.

Let's take a closer look at the high-volatility segment.

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

The faster the price changes, the higher the volatility and standard deviation.

Now, let's examine a chart with a higher resolution.

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

These findings can be interpreted in various ways. You can enable or disable your trading strategies based on the market's volatility level. I plan to use this data to determine the distance from the mean price at which I'll place my orders as a market maker.

Repository - [Link](https://github.com/Jungle-Sven/std_dev_levels)
Twitter - [Link](https://twitter.com/jungle_sven)
CDN Service is available on Serverspace
Tags: cdn, cloudcomputing, news, cloud
Published: 2023-09-04 11:55:44

Serverspace on board! We unveiled the **Content Delivery Network (CDN)**. This service is diminishing the response latency of websites, enhancing page loading speed, & bolstering SEO rankings.

So, a **CDN** is a mapped network of servers and routers that primarily aims to streamline & enhance content delivery to the users. The infrastructure of Serverspace's CDN encompasses five locations worldwide: USA (New Jersey), Canada (Toronto), Netherlands (Amsterdam), Turkey (Istanbul), and Kazakhstan (Almaty). Shortly, we are set to broaden the geographic expanse of this service.

If you want to know more, read the news on [Serverspace's website](https://serverspace.us/about/news/serverspace-launced-cdn/).

Original: https://serverspace.us/about/news/serverspace-launced-cdn/
TIL, CSS shadow and FrontEnd interview questions
Tags: html, interview, css, javascript
Published: 2023-09-04 11:54:20

**Hello guys,**

This week I have a lot of assignments and an interview, so I spent most of my time preparing for them. So please wish me luck tomorrow to do my best in the interview.

_**First of all,**_ I read a fantastic article about CSS shadow 

They're Shadow Hover Effect, A Shadow Of A Shadow and The Textual Shadow 

**Shadow hover effect**

`<div class="circle"></div>`

```
.circle{
     width: 250px;
     height: 250px;
     background: green;
     border-radius: 50%;
     box-shadow: inset 250px 250px 0 red;
}
```

```
.circle:hover{
    box-shadow: none;
}
```
Checkout the result 

![Shadow hover effect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p853nfa1op1vgrcnsfcx.gif)

and this 
{% codepen https://codepen.io/EsraaNasr/pen/dywpMzV %}

**A Shadow Of A Shadow** 

{% codepen https://codepen.io/smashingmag/pen/VwqLWqM %}

**The Textual Shadow**

`text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;`

```
h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
```

```
<h1>Text-shadow with red and blue neon glow</h1>
```

Here's the result

![Text Shadow](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jhzyyxafrrihivlzdxun.png)

_**Secondly,**_ some interview questions that I initially didn't know how to answer

1. What is load balancing?
distribution of all the incoming network traffic all across the back-end server.

2. What is Content Security Policy? 
is a header in HTML lets the operators to gain the whole control over the resources which are loading on the site.

3. What is Cross-Site Scripting (XSS)?
is an attack which takes place when any attacker uses a web application to send any malicious code, in the form of browser side script, to another user. 

4. What is Coercion in JavaScript? 
The conversion between 2 different build-in Types of JavaScript.  It comes in two forms, Explicit and implicit. 

**Note** About my portfolio I'm not working on it this week I hope to have time next week. 

I am confused about the domain esraa.studio or ecupcake.dev?

What's your opinion?

_**Last,**_ I read a useful articles 
1. [CSS container queries](https://ishadeed.com/article/css-container-style-queries/)
2. [JavaScript promise](https://www.freecodecamp.org/news/javascript-promises-async-await-and-promise-methods/)

So let's share our knowledge and tell me what you learned today.

Here are my social links if you would like to follow.
Github: https://github.com/EsraaNasr92/
Twitter / X: https://twitter.com/Esraa_nasr92
Instgram: https://www.instagram.com/_esraaanasr/
[Help needed] NestJS Microservices traceId 🙏
Tags: nestjs, microservices
Published: 2023-09-04 11:34:03

Hello everyone

Hope someone could help me here

I have a monorepo in which I have two apps: 
1. Filestorage (./apps/filestorage)
2. Prisma (./apps/prisma-ecosystem)

Prisma is a gateway app in which we have FilestorageController. We have here an uploadFile route, which creates and publish new event:

`@Post('upload')
async uploadFile(
    @UploadedFile() file: Express.Multer.File,
    @Body() body: SaveFileBodyDto,
    @Req() req: ISignedRequest,
  ): Promise<boolean> {
    const event = new FileUploadEvent({
      namespace: body.namespace,
      buffer: file.buffer,
      mime: file.mimetype,
      uuidUser: req.user.uuidUser,
    });

    this.logger.log({ msg: 'controller', context: 'upload' });

    this.fileStorageClient.publishEvent(event);

    return true;
  }`


In Filestorage I have an event handler

`  @MessagePattern(FILE_UPLOAD_SUBJECT)
  async saveFile(@Payload() event: FileUploadEvent, @Ctx() ctx: RmqContext) {
    const message = ctx.getMessage() as Message;
    const channel = ctx.getChannelRef() as Channel;
    this.logger.log({ msg: 'consumer', context: 'upload' });
    await this.fileUploadService.writeFile({
      namespace: event.payload.namespace,
      buffer: event.payload.buffer,
      uuidUser: event.payload.uuidUser,
      mime: event.payload.mime,
    });
    channel.ack(message);
  }`

Also I have a Logger, which is part of Common lib (./libs/common/src/logger)

For now my goal is to save logs. I want shared logger to have access to same traceId within these apps. I need this to trace logs in future or/and see the request life-cycle by logs.

I tried to implement this using AsyncLocalStorage (async_hooks) and Cls (cls-hooked, nestjs-cls) but had no success.

I would much appreciate if you guys can share your experience of implementing this sort of task correctly
BECOME A CERTIFIED DATA SCIENCE PROFESSIONAL
Published: 2023-09-04 11:23:18

Certified Data Scientist- Is that the dream career that you have envisioned for yourself? If yes, then you have landed in the right place. The job posting for data scientist on Indeed had shown a humungous rise of 256% and as per the US Bureau of Labor Statistics has revealed a surge of 36% through 2031. This is surely going to add about 50,000 jobs for skilled data science professionals.

You must be thinking how could you be the one? USDSI® is here to your rescue. [CDSP™- Certified Data Science Professional](https://www.usdsi.org/data-science-certifications/certified-data-science-professional) certificate is for you if you wish to begin a career in data science with the most futuristic skills on offer. Real-world workshop-based eLearning, personalized study materials vetted by over 150 specialized data industry geniuses- you are in safe hands. Self-paced learning sessions allow you enough room to experience anytime-anywhere learning; as they are available in over 600 countries worldwide. On completion, you shall be awarded a shareable digital badge, that stands for a lifetime; validating your data science skills and capabilities at handling tricky data science projects.

Earning this outstanding credential elevates your employability instantly, allowing you to compete for a higher salary with about a 50% hike. Isn’t that a huge kick when deciding on a career plan with top global data science certification providers? Begin with an informed decision today!
Windows email backup with tool
Tags: windows, email, backup
Published: 2023-09-04 11:11:35

## Windows email backup with a tool that is simply stupendous

Today the consumer stands at the top of the marketing chain empowered with the knowledge on how to go about things. They want products that follow proper safety norms and quality standards. So, when we go window shopping for a Windows email backup tool, we want nothing but the best tool, which adheres to strict standards of quality and data safety. On such tool that stands true to very essence of quality services is Mail Backup X. This tool has had a smooth journey and is on an upward curve of consumer demand. It is a stupendous example of responsive software engineering that meets the demands of consumers within an environment of safety and technological luxury. To fathom the huge line up of benefits on offer, you must scan your eyes across the lengths and breadths of this write up. 

- It’s a comprehensive Windows email backup solution that adjusts itself seamlessly with Windows and Mac to deliver value-added output
- This tool has come up with novel options like smart backup and resume, which ensures that once the backup progress bar reaches a certain stage, it is not forced to go back by interruptions like power cuts. Now, you will extract the maximum from your limited time without any second of it going to waste
- Selective backup empowers you to devise compact mail backups inclusive of just high priority mails. This option expands the scope of savings in storage space
- Portable backups nullify the restrictions of time and space, allowing you to tap into urgent data anywhere you want anytime you want
- Incremental backup ensures that backup progress is not halted in any which way but is sustained through and throughout by posting the latest snapshots of recently arrived mails onto a backup repository
- There is liberal usage of end to end encryption, so that you can **[backup Windows mail without having second thoughts](https://www.mailbackupx.com/windows-email-backup-tool/)** due to full assurance of data safety
- Retention of mail elements like Unicode data and metadata ensures that important mail elements do not go missing without a trace, thereby retaining the original nature and content of mails in backups
- You need not adhere to a predefined backup schedule set by the tool, as you can devise a backup schedule that fits you the best
- This tool does not take much time in processing data and delivering results, making it one of the fastest and most responsive data management tools to backup Windows email
- This tool does not stop growing at any juncture, as it’s provided with in-time updates to give a better and newer thrust to its technology
## How to backup Windows email while enjoying the wide range of benefits elucidated above?

You need not do something special to realize this dream. Just download the free demo of this tool and perceive, conceive and actualize email management the way you want https://www.mailbackupx.com/windows-email-backup-tool/.
New Android Studio Logcat
Tags: android, logcat, androidstudio, google
Published: 2023-09-04 10:58:01

---
title: New Android Studio Logcat
published: true
description: New android studio logcat cheatsheet
tags: android, logcat, androidstudio, google
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u2k6e908o44kppoa3kmf.png
# Use a ratio of 100:42 for best results.
# published_at: 2023-09-04 07:30 +0000
---

The Android Studio Dolphin 🐬 update brought an exciting revamp to the logcat feature, but with great power comes the challenge of mastering log filtering. Many developers have found themselves swimming in a sea of logs. Fear not! Dive into this blog for a handy cheat sheet that'll have you effortlessly surfacing the logs you need with a grin 😃.


### Filter Fields

- **package:mine** - Displays the logs of package names of currently open project.

- **package:com.example** - Displays the logs of package name specified i.e. `com.example` in given example.

<hr>

- **is:crash** - Displays the logs related to crashes.
- **is:stacktrace** - Displays the logs of full stack trace.
- **is:firebase** - Displays the logs related to firebase.

<hr>
- **tag:AppName** - Displays the logs matching log tag AppName.
- **message:AppName** - Displays the logs matching log tag AppName. If the sentence has spaces, separate the words with the slash `\` sign.
- **level:DEBUG** - Displays the logs matching log level DEBUG. Other valid values are: VERBOSE, WARNING, INFO, ERROR and FATAL. 

<hr>
- **age:1m** - Displays the logs with a timestamp of the last 1 minute. There are following supported time units:

    - s - seconds
    - m - minutes
    - h - hours
    - d - days


### Match Operators
- **Regex** - Append ~ after any field. E.g. `tag~:Activity` displays logs which contain log tag "Activity".
- **Exact match** - Append = after any field. E.g. `tag=:Activity` displays logs which exactly has log tag "Activity".
- **Negation** - It works like NOT operator. Prepend `-` to the field name. E.g. `-tag:Activity` displays logs which don't have the log tag "Activity".
- **Logical Operators** - AND(&) and OR(|) signs are supported in logs. E.g. `package:mine & (tag:AppName | message:This\is\sample)`.
- **Space** - Space is an implicit AND logical operator. E.g. `package:mine tag:AppName message:Sample` will evaluated as `package:mine & tag:AppName & message:Sample`

<hr>
That is all about it. Before we sign off, remember that the world of Android development is full of hidden gems and ingenious tricks. Given options work till latest Android Studio G. If you've got some secret logcat filtering sorcery up your sleeve, don't be shy – share it in the comments! Happy coding, and may your lines of code always compile with a sprinkle of developer magic ✨😇.
Should be we afraid of competition when go open source?
Tags: opensource, programming, tutorial, discuss
Published: 2023-09-04 10:29:50

When you are an open source technology provider, you open every corner of the technology you provide, like [I did](https://github.com/aregtech/areg-sdk). Surely this helps the competitors to check the solution you provide, what issues you face and probably offer better solution.

Here comes the question: should be we afraid of competition when go open source? 

Would be interesting to know not only your "yes" and "no", but your answer on "why think so?"