teleren/devto huggingface dataset:
Loader - Text loading
Tags: css, html, webdev, tutorial
Published: 2023-05-11 17:41:36

**Tutorial on how to create a loader inside of a text - CSS only.**

![Loader - Text loading](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ellcy04g10ah0bw9ito5.png)

## **HTML**
For HTML we need two "loading" texts inside of a container with class "loader".
One will represent the text and the other will animate.

```html
<div class="loader">
    <span>LOADING</span>
    <span>LOADING</span>
</div>
```


## **CSS**
For CSS, first we'll style the container. We'll just set position to relative so that we can position properly the elements inside.

```css
.loader {
    position: relative;
}
```

Now we'll style "loading" texts inside of a container.
We'll set position to absolute and transform translate X and Y to -50%, to position elements in the center.
We'll increase the font and set it's size to 50 pixels and weight to 600.

```css
.loader span {
    position: absolute;
    transform: translate(-50%, -50%);
    font-size: 50px;
    font-weight: 600;
}
```

Now we'll style only the first text element (the one that represents the text).
We'll set it's color to transparent, and display only the borders of the text by setting text-stroke property.

```css
.loader span:nth-child(1) {
    color: transparent;
    -webkit-text-stroke: 1px rgb(27, 27, 27);
}
```

Now we'll style the second text element (the one that animates).
We'll only set it's color to yellow.

```css
.loader span:nth-child(2) {
    color: rgb(181, 255, 22);
}
```

Now we'll create the animation for the second text.
Using clip-path, we'll create two different shapes. The one we'll set at the beginning and at the end od the animation, and the other at 50%.

```css
@keyframes waves {
    0%, 100% {
        clip-path: polygon(0% 45%, 15% 44%, 32% 50%, 54% 60%, 70% 61%, 84% 59%, 100% 52%, 100% 100%, 0% 100%);
    }
    50% {
        clip-path: polygon(0% 60%, 16% 65%, 34% 66%, 51% 62%, 67% 50%, 84% 45%, 100% 46%, 100% 100%, 0% 100%);
    }
}
```

Now we'll add our animation to the second text element and set it's duration to 2 seconds with infinite iteration count.

```css
.loader span:nth-child(2) {
    color: rgb(181, 255, 22);
    animation: waves 3s infinite;  /* Added animation */
}
```

And that's it.

**Video tutorial:**
You can find the whole code with video tutorial [here](https://designyff.com/code/loading_text_loader).

Thank you for reading ❤️
How to Deploy the site using Https On IIS Server
Tags: webdev, programming, websitedeployment, websiteserver
Published: 2023-05-11 17:36:45

To use HTTPS (Hypertext Transfer Protocol Secure) in IIS (Internet Information Services) server for website deployment, you'll need to follow these steps:

Obtain an SSL/TLS Certificate: First, you need to obtain an SSL certificate from a trusted certificate authority (CA). You can purchase a certificate from a commercial CA or use a free certificate from Let's Encrypt.

Install the SSL Certificate: Once you have the SSL certificate, you need to install it on your IIS server. Here's how you can do it:
a. Open the IIS Manager on your server.
b. Select your website from the "Connections" pane.
c. In the "Actions" pane, click on "Bindings."
d. Click on "Add" to create a new binding.
e. In the "Add Site Binding" window, configure the following:

Type: Select "HTTP" from the drop-down menu.
IP address: Choose the appropriate IP address for your website.
Port: By default, the port will be set to 443 for HTTPS.
SSL certificate: Select the SSL certificate you installed.
Configure HTTPS Redirect (optional): If you want to redirect all HTTP traffic to HTTPS, you can set up an HTTP-to-HTTPS redirect. This ensures that all requests to your website are automatically redirected to the secure HTTPS version. Here's how you can configure the redirect:
a. In the IIS Manager, select your website.
b. In the "Actions" pane, click on "HTTP Redirect."
c. Enable the option "Redirect requests to this destination."
d. Enter the HTTPS URL of your website in the "Redirect to" field.
e. Select the checkbox for "Only redirect requests to content in this directory (not subdirectories)."
f. Click on "Apply" to save the changes.

Test and Verify: Once you have configured HTTPS in IIS, you should test and verify that it is working correctly. Open a web browser and enter your website's URL with "https://" at the beginning. If everything is set up correctly, you should see the padlock icon indicating a secure connection.

By following these steps, you can enable HTTPS on your IIS server for website deployment, ensuring secure communication between clients and your web server.
Writing future-proof UnoCSS
Tags: unocss, css, webdev
Published: 2023-05-11 17:07:49

I've been using [UnoCSS](https://unocss.dev) since its early days, and I'm quite amazed by its limitless flexibility. However, flexibility comes at a price and can lead you to misuse. 

Note that this post focuses on UnoCSS using the default presets: Uno, Attributify and Tagify.
## Ways to use UnoCSS
Before we start, let's review the ways we can use UnoCSS with the main presets:
- **Classes** `<div class="dark:bg-gray-900">`
- **Attributes** `<div dark="bg-gray-900">`
- **Tags** `<dark-bg-gray-900>` 

## Attributes
The [attributify preset](https://unocss.dev/presets/attributify) allows you to use HTML attributes instead of CSS classes as long as they are within the Unicode ranges supported by the specification.

However, that doesn't mean it strictly adheres to the HTML standard. For example, the following code:

```html
<div dark="bg-gray-950">
```
It _technically_ works in modern browsers, but if you run a validator you'll notice that "dark" is not a valid attribute in `div` tags.

Why is this the case? Custom attributes can conflict with future HTML attributes, causing unexpected behavior or rendering issues.
### Using data-* attributes
So what do we do? `data-*` attributes allow us to extend HTML tags with any non-standard attribute we can think of. Of course, this also applies to the utilities generated by UnoCSS.

```html
<div data-dark="bg-gray-950">
```

By default, the attributify preset doesn't support them, but you can enforce it by using this configuration:

```js
presetAttributify({
  prefix: 'data-', // or 'data-un-'
  prefixedOnly: true,
})
```

Problem solved!

## Tags
[Tags](https://unocss.dev/presets/tagify) have a similar problem. Custom HTML elements [_should_](https://www.ietf.org/rfc/rfc2119.html#section-3) follow [these rules](https://html.spec.whatwg.org/multipage/custom-elements.html#prod-potentialcustomelementname):
- The name of a custom element must contain a hyphen ("-").
- The name must start with a letter (a-z or A-Z).
- The name can contain lowercase letters (a-z), uppercase letters (A-Z), digits (0-9), hyphens ("-"), and must not contain any whitespace or special characters.

### Hyphens
Most utilities like `<text-red-300>` work fine, but prefixed tags like `dark:` or `print:` may be problematic, as colons are not supported. In fact, tagify won't work at all!

Let's say we have this example:
```html
<dark:text-red-300>
```
We should replace the colon with a hyphen:

```html
<dark-text-red-300>
```

### Prefixes
Many utilities, such as `<flex>` or `<hidden>`, do not contain dashes because they consist of single words. Splitting them, for example into <fl-ex>, wouldn't make sense.

Instead, we can use a [namespace prefix](https://www.webcomponents.org/community/articles/web-components-best-practices): 
```js
presetTagify({
  prefix: 'un-'
})
```
This means that you can write utilities like `<un-flex>` or `<un-dark-flex>` and be at ease since no new elements containing hyphens will be added to the HTML specification.
Ainda na senda dos principios do SOLID....
Published: 2023-05-11 17:04:51

O Princípio de Inversão de Dependência é um dos princípios fundamentais da programação orientada a objetos. Ele descreve uma técnica para reduzir o acoplamento entre os componentes de um sistema, o que torna o código mais flexível, reutilizável e fácil de manter.

A ideia central do Princípio de Inversão de Dependência é que os módulos de alto nível não devem depender diretamente dos módulos de baixo nível, mas sim de abstrações. Isso significa que a lógica de negócios de um sistema não deve depender de detalhes de implementação de outros componentes do sistema.

Para ilustrar o princípio, imagine um sistema de gerenciamento de pedidos de uma loja online. O módulo de alto nível seria responsável pela lógica de negócios do sistema, como processar pedidos, gerar faturas e enviar e-mails de confirmação para os clientes. O módulo de baixo nível seria responsável pela persistência dos dados, como gravar os pedidos em um banco de dados.

Se o módulo de alto nível dependesse diretamente do módulo de baixo nível, teríamos um acoplamento forte entre eles. Isso significa que qualquer mudança no módulo de baixo nível poderia afetar a lógica de negócios do sistema. Além disso, tornaria mais difícil testar e reutilizar o código.

Em vez disso, o Princípio de Inversão de Dependência sugere que o módulo de alto nível deva depender de uma abstração, como uma interface, em vez do módulo de baixo nível diretamente. A interface descreve o comportamento esperado do módulo de baixo nível, mas não seus detalhes de implementação. Dessa forma, o módulo de alto nível pode usar a interface sem se preocupar com a forma como o módulo de baixo nível está implementado.

No exemplo do sistema de gerenciamento de pedidos, em vez de depender diretamente do módulo de persistência de dados, o módulo de alto nível poderia depender de uma interface chamada "PedidoRepository". O módulo de persistência de dados implementaria essa interface, mas o módulo de alto nível só precisaria saber que a interface existe e quais métodos ela define.

Usar o Princípio de Inversão de Dependência pode tornar o código mais fácil de testar, pois permite que os módulos de baixo nível sejam substituídos por objetos simulados ou "mocks" durante os testes. Além disso, torna o código mais flexível, pois permite que diferentes implementações do mesmo comportamento sejam usadas em diferentes contextos.

Em resumo, o Princípio de Inversão de Dependência é uma técnica poderosa para reduzir o acoplamento entre os componentes de um sistema. Ao usar abstrações em vez de depender diretamente de outros módulos, o código se torna mais flexível, reutilizável e fácil de manter.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/69m4ucxvnhwzzcp135mv.png)
Sloan's Inbox: Newbie Seeking Guidance on Real-life Project
Tags: discuss, career
Published: 2023-05-11 16:58:43

Hey there, fellow developers! Sloan here. 🦥 I'm back with another edition of Sloan's Inbox, your go-to online column and discussion. I must say, your queries and enthusiasm never fail to make my day! So, thanks to a particularly compelling question from a newbie developer, I'm here once again, and counting on all of you to share your valuable insights and advice. 

### Today's question is:

> I'm a newbie software developer trainee, and I'm eager to take on a real-life project. However, I'm feeling a bit lost and unsure of how to proceed. I want to challenge myself by building a project without relying on YouTube tutorials, but I'm struggling to figure out where to start. Are there any specific concepts or skills I should focus on before diving into the project? Any guidance or help would be greatly appreciated!

So, what do you say, DEV members? Can you help a newbie out? Let's show our kindness and knowledge in full force!

---

_Want to submit a question for discussion or ask for advice? [Visit Sloan's Inbox](https://docs.google.com/forms/d/e/1FAIpQLSc6wgzJ1hh2OR4WsWlJN9WHUJ8jV4dFkRDF2TUP32urHSAsQg/viewform)! You can choose to remain anonymous._
How To Create Website Using HTML & CSS & JS | Full Responsive Website
Tags: webdev, javascript, beginners, programming
Published: 2023-05-11 16:56:58

Learn how to create a completely responsive website using HTML, CSS, and javascript. This is a step-by-step beginner web development project tutorial on how to build a modernwebsite using html5, css3, and javascript. 

🔔 Subscribe for more! 

https://bit.ly/3UbNw7F

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

💙 Get template by PayPal 

https://ko-fi.com/s/985908ce63

🔗 Source code 

➤ https://ko-fi.com/s/985908ce63

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

🔥 Follow me! Facebook 

https://bit.ly/3IMfk04

Instagram 

https://bit.ly/3GHoQyT

Twitter 

https://bit.ly/3IOBEqc

Linkedin 

https://bit.ly/3INnwNY

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

☕️ Support me 

buymeacoffee.com/webmonster

💙 Support me by PayPal 

https://ko-fi.com/webmonster01

 👍 Thanks for watching, I appreciate it Made with ❤ by Web Monster 

Tags: #responsivewebsite #website #htmlcssjs #webmonster #html #css #javascript #webdesign #website #react #bootstrap 



➤ Link of The Video :

➤https://youtu.be/Uxbh12inqKg

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4ej8f2x767syanzz3on1.png)
Chromium Spelunking: Creating a Request
Tags: cpp, chromium
Published: 2023-05-11 16:52:41

In the [last post](https://dev.to/djmitche/chromium-spelunking-churl-5dof), I built an executable which created a `URLRequestContext` and then exited. Not very exciting, but it was a bit of work! In this post, I'll be using that instance to create an actual URLRequest.

## `URLRequestContext::CreateRequest`

A skim of [`url_request_context.h`](https://source.chromium.org/chromium/chromium/src/+/main:net/url_request/url_request_context.h) shows a helpful-looking function, `CreateRequest`.

This takes a few straightforward arguments plus a `NetworkTrafficAnnotationTag`, and the comments focus on that type. Unfortunately, `network_traffic_annotation.h` doesn't contain a lot of comments that might help me understand what this is and what it does. Running [codehistory](https://github.com/djmitche/codehistory) on the file doesn't show much, either. From what I can guess, this is some kind of annotation that can be found in the source code and reviewed or audited. Anyway, in [one of the commits that modified this file](https://chromium.googlesource.com/chromium/src/+/4cda417b6) I find `net::MutableNetworkTrafficAnnotationTag(TRAFFIC_ANNOTATION_FOR_TESTS)`. That didn't work immediately, but I see that the `MutableNetworkTrafficAnnotationTag` has an explicit cast operator to `NetworkTrafficAnnotationTag`, which does.

The types work out, and the compile succeeds, but it seems I've still not squared away the task runners:

```
[0509/212941.923727:FATAL:url_request.cc(597)] Check failed: base::SingleThreadTaskRunner::HasCurrentDefault(). 
```

I thought I had handled this in the last post, so this was a bit disappointing. One of things about Chromium that I'm adjusting to is that a lot of the information is stored in people, and not as data. So, I asked a few people via chat, and their responses improved my understanding of things a little. One suggestion was to look at other one-off executables like [`net_watcher`](https://chromium.googlesource.com/chromium/src/+/main/net/tools/net_watcher/net_watcher.cc#149), or to use `base::test::TaskEnvironment`. But I wanted to learn what was going on, rather than just getting things done. With a little more digging, I determined that `SingleThreadTaskRunner` is a subclass of `SequentialTaskRunner` that is capable of running tasks on the same thread, if they have some reason to be tied together like that. This is contrary to some other suggestions that `SingleThreadTaskRunner` is only for testing!

Anyway, switching

```patch
-  auto thread_runner = base::ThreadPool::CreateSequentialTaskRunner(
+  auto thread_runner = base::ThreadPool::CreateSingleThreadTaskRunner(
       {base::TaskPriority::USER_VISIBLE});
```

fixed this issue.

## Next Up

This was a pretty short post, mostly because I was only able to devote a few minutes at a time to this work. Next up, I will call the `Start` method on the `URLRequest`, which will require a `URLRequest::Delegate`. Once the header is read, I'll call `Read` to read the response body. The end is in sight!
Review of Louisville Metro Expenditure Data Pipeline
Published: 2023-05-11 16:39:39

I reviewed a data pipeline project that compares Louisville Metro expenditure data across fiscal years. The project utilized Terraform, a Prefect Docker container, and Google Cloud Storage/Big Query. I was impressed with the partitioning of data by fiscal year, fulfilling project requirements despite the dataset being less than 1GB. Clear instructions and a well-designed dashboard made it easy to navigate. Suggested future improvement is to include a script for downloading data directly from the original source to avoid excessive report generation. Kudos to everyone involved in DataTalksClub Data Engineering Zoomcamp 2023 and Louisville Open Data portal for public access to the data.

[GitHub](https://github.com/Xanthus1/zoomcamp-louisville-data/tree/main)

## dezoomcamp
Hot Reload: 50% OFF - Get lifetime access with this exclusive sale!
Tags: unity3d, productivity, hotreload
Published: 2023-05-11 16:36:04


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

Hey everyone!

Earlier this year we launched Hot Reload for Unity, an easy to install solution that allows you to compile code instantly without having to exit/enter playmode (check out our [Unity Forum Post](https://forum.unity.com/threads/hot-reload-edit-code-without-compiling.1389969/)).

Since then developers like KeepSake Games (Minecraft co-founder) and Moon Studios (Ori and Blind Forest) are already using Hot Reload to speed up their development. And Hot Reload is now also a Unity Verified Solution on the Asset Store!

And we’ve become a Unity Verified Solution, and have gathered feedback from our users. Based on this feedback we've decided to offer a limited-time flash sale of Lifetime Indie Licenses for Hot Reload during the month of may!

While the Hot Reload Indie License is normally $149/year, you can grab your Lifetime Indie License right now for $34.99!

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

If you want to try it out or learn more, check it out on the Unity Asset Store, or go to our website hotreload.net for an extra discount. 

https://www.youtube.com/embed/1_Q7pxNm-FY
The Advantages of Going Fully On-Chain: A Closer Look
Published: 2023-05-11 16:14:43

Blockchain technology has introduced a new era of innovation and decentralization. In the past few years, there has been a tremendous increase in the development of blockchain applications. The potential of the blockchain has opened up new opportunities for fully on-chain applications, where every component of the application is on the blockchain.


In this article, we will discuss the benefits of fully on-chain applications over partly on-chain applications.

Firstly, fully on-chain applications offer greater security. The blockchain provides a secure and immutable ledger of transactions, which is incorruptible and tamper-proof. Fully on-chain applications have the advantage of being entirely self-contained, with no reliance on centralized servers or databases. This means that the data stored on the blockchain is secure, as it cannot be altered or manipulated.

Secondly, fully on-chain applications offer greater transparency. Transparency is a significant advantage of blockchain technology. Every transaction that occurs on the blockchain is recorded and visible to all participants in the network. In a fully on-chain application, this transparency is extended to the entire application, making it more trustworthy and reliable.

Thirdly, fully on-chain applications offer greater decentralization. Decentralization is a fundamental principle of blockchain technology. It ensures that no single entity or organization has control over the network. Fully on-chain applications, therefore, offer the advantage of being fully decentralized, with no centralized point of control or failure.

Fourthly, fully on-chain applications offer greater interoperability. Interoperability refers to the ability of different blockchain networks to communicate with each other seamlessly. Fully on-chain applications have the advantage of being compatible with multiple blockchains, making them more accessible to a broader range of users.

Finally, fully on-chain applications offer greater innovation. As blockchain technology continues to evolve, fully on-chain applications offer the advantage of being at the forefront of innovation. The on-chain nature of these applications makes it possible to integrate new technologies and features as they emerge.


In conclusion, fully on-chain applications offer significant advantages over partly on-chain applications, including greater security, transparency, decentralization, interoperability, and innovation. As blockchain technology continues to advance, fully on-chain applications are likely to become more prevalent, offering a new era of decentralized, trustworthy, and innovative applications.
Video: Accelerating Transformers with Optimum Neuron, AWS Trainium and AWS Inferentia2
Tags: transformers, nlp, hardware, opensource
Published: 2023-10-09 12:44:36

---
title: Video: Accelerating Transformers with Optimum Neuron, AWS Trainium and AWS Inferentia2
published: true
date: 2023-05-11 16:21:19 UTC
tags: transformers,nlp,hardware,opensource
canonical_url: https://julsimon.medium.com/video-accelerating-transformers-with-optimum-neuron-aws-trainium-and-aws-inferentia2-111fa48b3e90
---

In this video, I show how you to accelerate training and inference for [Hugging Face](https://www.linkedin.com/feed/?trk=homepage-basic_sign-in-submit#) models on AWS Trainium and AWS Inferentia2. Thanks to our Optimum Neuron library, a single line of code is all it takes to enjoy amazing cost-performance. Give it a try!

{% youtube FmjTWags__Q %}
Art Draw Online
Tags: svg, javascript, design, html
Published: 2023-05-11 16:04:37

Create drawings, illustrations for free!. Without downloading any program. **Art Draw** Online is a web application that works directly from the internet browser. With this online tool we can make any type of digital art, this app allows us to download our work as SVG files or as PNG images.


![Art Draw Image Gallery](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0p8k8dxgaie1ahigbih.gif)

[Open Art Draw Online Editor](https://artdraw.org/)

**Art Draw** works like a SketchPad or drawing pad, we can use a variety of tools to design.

- wave generator
- mandala generator
- array builder
- SVG Filters
- FontsGoogle Fonts
- Predesigned images
- boolean intersections
- Masks

Art Draw is a free and open source tool, available on Github.


![Art Draw Github app](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5734fi5uufv3lgrnpueg.png)
[Art Draw Github](https://github.com/sysmaya/artdraw)

Draw, sketch, collaboration Art Draw app on any design. Use our drawing tools to connect ideas quickly and interactively.