teleren/devto huggingface dataset:
Growing link underline, in Tailwind CSS
Tags: webdev, css, tailwindcss
Published: 2021-06-16 14:29:30

---
title: Growing link underline, in Tailwind CSS
description:  "Ben Myers' style ported to Tailwind"
published: true
date: 2021-06-15 15:00:00 UTC
tags: webdev, css, tailwindcss
canonical_url: https://katiekodes.com/link-underline-grow-tailwind-css/
---

Today I learned that [Learn 11ty From Scratch](https://piccalil.li/course/learn-eleventy-from-scratch/) opened up for free. Searching for the news, I found Ben Myers’ article “[I Finally Understand Eleventy’s Data Cascade](https://benmyers.dev/blog/eleventy-data-cascade/),” which reminded me how much I like some of his styling, including links whose underlines are chunky and grow to be full backgrounds when you hover or focus on them.

I’ve been doing a lot of Tailwind lately on landing-page-type sites so I can rip off other peoples’ components, but I hadn’t found a link style I was satisfied with, so I ported Ben’s work to Tailwind. [See it on Tailwind Play](https://play.tailwindcss.com/LiOgwGeSeF) or keep reading to just see the source code here.

<!--more-->

You need to use a gradient from a color to itself so that your background is a “background image,” not a “background color.”

```html
<p>I am some text, and <a class="bg-gradient-to-r from-yellow-200 to-yellow-200 bg-growing-underline" href="https://example.com">I am a link</a>, and that's that.</p>
```

The rest of the party tricks, you can wrap up by making yourself a new Tailwind class in your `tailwind.css` file _(or whatever you call it)_:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .bg-size-2em {
    background-size: 100% 0.2em;
  }
  .bg-hundred {
    background-size: 100% 100%;
  }
  .bg-near-bottom {
    background-position: 0 88%;
  }
  .bg-growing-underline {
    @apply bg-no-repeat bg-near-bottom bg-size-2em transition-all duration-200 hover:bg-hundred focus:bg-hundred;
  }
}
```

Alternatively, if you feel cleaner not exposing intermediate concepts like `bg-size-2em`, `bg-hundred`, and `bg-near-bottom` to yourself for reuse elsewhere in your HTML _([see on Tailwind Play](https://play.tailwindcss.com/fa1DOtzW1L))_:

```css
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer utilities {
  .bg-growing-underline {
    background-size: 100% 0.2em;
    background-position: 0 88%;
    @apply bg-no-repeat transition-all duration-200;
  }
  .bg-growing-underline:hover {
    background-size: 100% 100%;
  }
  .bg-growing-underline:focus {
    background-size: 100% 100%;
  }
}
```

Note that you can’t use `bg-cover` for the hover/focus, even though it looks the same as `background-size: 100% 100%`, because the smooth background size transition only works with an explicit size.

* * *

Update: Ben says he grabbed the code from [Morgan Wesemann](https://morganwesemann.com/blog/why-i-ported-my-site-to-eleventy/).
Nos temos um homelab
Published: 2021-06-15 14:54:38

####Parafraseando um pouco a missão Apolo da NASA,"Houston, we have a problem"; Nos temos um homelab.

Sempre tive a vontade de escrever alguns artigos para a internet, talvez como uma forma de retribuir um pouco o que aprendi pesquisando um pouco pelo google a fora, acredito que tenha chegado a hora. 

Depois de algumas tentativas, montei um pequeno homelab, é singelo em suas configurações, uma única maquina, I3 16G DDR4 e alguns HDs, mas acredito que vá dar oportunidade de brincar com muitas tecnologias que tenho vontade. Pertento falar um pouco de tudo, de questões de infra a programação. Não elaborei como será conduzido mas espero poder compartilhar o que aprendi e ate mesmo para servir de cola em algum momento. Num próximo artigo espero falar sobre o Proxmox que vou utilizar para virtualização, instalação dicas e algumas dificuldades que tive para configura-lo.
How to convert HTML to PDF using JavaScript | html2pdf
Tags: html, css, javascript, beginners
Published: 2021-06-15 14:47:18

Hello guys, today I am going to show you how to convert HTML to PDF using JavaScript, in this video, you will learn how do you convert your HTML file to a PDF using html2pdf js.

In this video, I will create a heading and paragraph element and also a button for export PDF file.

{% youtube cp3Lnnk5UvM %}
Why video tutorials should NOT replace reading documentation
Tags: career, programming, productivity, beginners
Published: 2021-06-15 14:02:23

As more and more people start their programming journey, I'm finding that the number of video tutorials are increasing. That shouldn't be a surprise to anyone. Of course people will be making video tutorials showing off the basics of a cool new language, package, or feature. Heck, I might even start making video tutorials. But I'm also finding that more and more learners are solely depending on video tutorials when they start learning something new. 

Now, I don't think that video tutorials are bad. I've learned a lot of really good things from them myself. But I'm always amazed at the lack of awareness, by new programmers, that written documentation even exists for whatever they are trying to use.

I use Flutter a lot in my free time, so I'll use it as an example here. Flutter has awesome documentation. Here's an example from the [Color class](https://api.flutter.dev/flutter/dart-ui/Color-class.html)
![Screen Shot of Color class documentation](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j06tguv6c4244n8v03dy.png)

Being able to read and understand this form of documentation is invaluable as you progress on your development journey. In it you'll find useful constructors, parameter descriptions and even common examples!

There will be many times that all you have to learn from is a set of documentation, and being able to quickly reference it and understand the basics will help you iterate quickly, stand out in the company that you're at, and can even help you be more productive.

Now all of that being said, I want to reiterate that I think video tutorials are good! But I don't think that they replace being able to read and understand documentation. A healthy balance of both is what's needed to really thrive and grow as a developer these days.

If you're just learning your first language, or your fifth, I'd recommend taking a look through the documentation to see what you can find! You might be surprised by the little gems that are hidden away in there!


What do you think? Am I being too harsh? Let me know in the comments if you read through documentation before starting a new project, or if you jump right into video tutorials!

Thanks for reading,
Carl
The Most Affordable Academic Writing services In The UK

Tags: essay, assignment
Published: 2021-06-15 14:09:34

Aceassignment is the most trusted <a href="https://aceassignment.co.uk/assignment-service/">Assignment Writing Service</a> by students. It has gained notoriety for being dependable and focusing on its customers as a matter of first importance. Its client service finds an extraordinary way to deal with each individual, contemplating their experience, so an individual from Canada, Australia, the United States, and the United Kingdom can anticipate altered treatment, which makes it is the best dissertation writing service in the UK. It offers various types of assistance going from keeping in touch with altering and online work, and its costs are moderate regardless of its endeavoring to utilize just experienced essayists. There is a solid assurance of secrecy and cutoff times appear to be regarded consistently, so this organization is a decent decision for understudies.
Calling an async function without await
Tags: javascript, webdev, beginners, codenewbie
Published: 2021-06-15 14:00:13

```js
const asyncFunction = async () => "HELLO";

const main = async () => {
  const value = asyncFunction();

  console.log(value === "HELLO" ? "true" : "false");
};

main();
```

Output: false
`asyncFunction()` returns a promise not the resolved value.

---

**Thanks for reading 💙**  
Follow **@codedrops.tech** for more.  
[Instagram](https://www.instagram.com/codedrops.tech/) ● [Twitter](https://twitter.com/codedrops_tech) ● [Facebook](https://www.facebook.com/codedrops.tech/)

Micro-Learning ● Web Development ● Javascript ● MERN stack  
**[codedrops.tech](https://www.codedrops.tech/)**

---
**Projects**  
[File Ops](https://marketplace.visualstudio.com/items?itemName=mehullakhanpal.file-ops) - A VS Code extension to easily tag/alias files & quick switch between files
Floating Button On Image Using Tailwind
Tags: tailwindcss, css, webdev, beginners
Published: 2021-06-15 13:24:14

> You can follow and code along at https://play.tailwindcss.com/

## Base Image Element

Let'say we have this image on the page:

```html
<img src="https://dummyimage.com/500x250" alt="dummy-image">
```

To add any element overlapping on the image, we need to wrap the image inside `div` element that has `relative` position:

```html
<div class="relative">
  <img src="https://dummyimage.com/500x250" alt="dummy-image">
</div>
```

We also need to make the image fully close the wrapper using full width:

```html
<div class="relative">
  <img class="w-full" src="https://dummyimage.com/500x250" alt="dummy-image">
</div>
```

## Button on the Top-Left Image

With the above code, we could already add anything like button on the image with `absolute` position:

```html
<div class="relative">
  <img class="w-full" src="https://dummyimage.com/500x250" alt="dummy-image">
  <button class="absolute">Button</button>
</div>
```

But to make it overlapping with the image, we need to move the absolute button to the top using `top-0`:

```html
<div class="relative">
  <img class="w-full" src="https://dummyimage.com/500x250" alt="dummy-image">
  <button class="absolute top-0">Button</button>
</div>
```

And there you go, now the button will stick to the top-left corner. Let's styling the button to make it looks fancy:

```html
<div class="relative">
  <img class="w-full" src="https://dummyimage.com/500x250" alt="dummy-image">
  <button class="absolute top-0 bg-blue-500 text-white p-2 rounded hover:bg-blue-800">Button</button>
</div>
```

And to make the button a little bit off from the edge, we simply add margin:

```html
<div class="relative">
  <img class="w-full" src="https://dummyimage.com/500x250" alt="dummy-image">
  <button class="absolute top-0 bg-blue-500 text-white p-2 rounded hover:bg-blue-800 m-2">Button</button>
</div>
```

## How to Bottom-Left the Button?

We could easily change the `top-0` class to `bottom-0` on the button element.

## How to Top-Right the Button?

We use `top-0` and `right-0` to the button element.

## How to Bottom-Right the Button?

We use `bottom-0` and `right-0` to the button element.

_______________________
A better way to connect to NgRx store
Tags: angular, ngrx
Published: 2021-06-15 13:02:19

---
title: 'A better way to connect to NgRx store'
published: true
description: 'The state from NgRx store is an observable stream. It is a little bit tricky to access it. This post provides a better way to handle it. '
tags: Angular, NgRx
---


As shown in the NgRx documentation example, in order to access the NgRx state, we have to create an observable and assign a selector to it. Due to the nature of observable, *async pipe* is required to apply to the observable in the HTML template. This is quite cumbersome in general. 

```javascript
export class MyCounterComponent {

  public count$: Observable<number>;
 
  constructor(private store: Store<{ count: number }>) {
    this.count$ = store.select('count');
  }
}
```

```html
<div>Current Count: {{ count$ | async }}</div>
```

In a bid to turning the observable into regular variable. We can assign the state to a variable in the subscription.

```javascript 
export class MyCounterComponent {

  public count: number;
  public count$: Observable<number>;

  private countSubscription: Subscription;

  constructor(private store: Store<{ count: number }>) {
    this.count$ = store.select('count');
    this.countSubscription = this.count$.subscribe(count => {
      this.count = count;
    })
  }

  public ngOnDestroy() {
    this.countSubscription.unsubscribe();
  }
}
```

However, the above code doesn't look very nice. Once the component has a few more selectors, it could easily become a mess. 
 
Can we come up with an approach so that we can connect the NgRx state with ease? Yes, we can! 

We create a `AbstractConnectableComponent` to automate the observable subscription steps.  This improved approach does not need to create the observable properties. The connectable component iterates through the connected properties and assigns the selected NGRX state to them. It is easy to unsubscribe the observables too. Once the observable `destroy$` emits in `ngOnDestroy()` lifecycle hook, the subscriptions will be destroyed. Plus, since these connected public properties are just regular variables, we don't need the *async pipe* in the HTML template any more. All in all, this is a clever approach to connect NgRx store just with a little bit abstraction.

```javascript 
export class MyCounterComponent extends AbstractConnectableComponent  {

  public count: number;

  constructor(private store: Store<{ count: number }>) {
    this.connect<MyCounterComponent>({
      count: this.store.select('count'),
    })
  }

}
```

 ```javascript
 @Component({ template: '' })
export class AbstractConnectableComponent implements OnDestroy {

  protected destroy$: Subject<void> = new Subject();

  public ngOnDestroy(): void {
    this.destroy$.next();
  }

  protected connect<T extends AbstractConnectableComponent>(data: ConnectableData<T>): void { 
    Object.entries(data).forEach(([key, value$]) => {
      value$.pipe(
        takeUntil(this.destroy$),
      ).subscribe(val => {
        this[key] = val;
        this.cdr.detectChanges();
      });
    });
  }
}
 ```
🛠  Building ASP.NET CRUD Web APIs
Tags: api, dotnet, tutorial
Published: 2021-06-15 13:01:31

#### 📗 Learn how to build a CRUD Web API with ASP.NET through this practical tutorial.

This tutorial will guide you step by step in creating a Web API with ASP.NET. You will end up building a simple Web API project to manage a glossary of terms using the typical four CRUD (*Create*, *Retrieve*, *Update*, *Delete*) operations.

## Prerequisites

Before starting to build your Web API, you need to ensure you have installed the right tools on your machine. In particular, since you are going to use ASP.NET, you need to check if you have installed the latest .NET SDK by typing the following command in a terminal window:

```shell
dotnet --version
```

The sample project that accompanies this tutorial has been built with .NET 5.0. If the previous command provides you with a result lower than `5.0.100`, you should [download the latest .NET SDK](https://dotnet.microsoft.com/download/dotnet/current) and install it on your machine.

In this tutorial, you are going to use the [.NET CLI](https://docs.microsoft.com/en-us/dotnet/core/tools/) coming with the .NET SDK. If you are going to use Visual Studio, make sure to use the latest version of [Visual Studio](https://visualstudio.microsoft.com/downloads/).

> **Note**: If you update Visual Studio to the latest version, you will get the latest .NET SDK bundled.

## Creating an ASP.NET Web API Project

Once the SDK is installed, you are ready to build your Web API with ASP.NET. The Web API you are going to build will provide a few endpoints that allow you to manage a glossary of terms. So, you will be able to perform the typical [CRUD (*Create*, *Retrieve*, *Update*, *Delete*)](https://en.wikipedia.org/wiki/Create,_read,_update_and_delete) operations on a list of term definitions.

In order to create this project, type the following commands in a terminal window:

```shell
dotnet new webapi -o Glossary
```

This command creates a folder named `Glossary` and generates inside it the content for the ASP.NET project from the `webapi` template.

If you are using Visual Studio, you can create your project by selecting the *API* template as shown in the following picture:

![.NET Core App API template within Visual Studio](https://images.ctfassets.net/23aumh6u8s0i/7E9BdF65zxIUMY8Y5rjBkw/6b75636fb10ebc6e45e180954f959eb9/visual-studio-api-template.png)

Then follow the steps shown by the wizard to generate the project.

> **Note**: In the rest of the article, the .NET CLI will be used to manage the project, but you can run the same steps by using Visual Studio as well.

## Running the Sample Project


[Read more...](https://auth0.com/blog/building-aspnet-web-api/?utm_source=content_synd&utm_medium=sc&utm_campaign=aspnet)
Help us nail the getting started experience
Tags: community, cassandra, kubernetes, k8ssandra
Published: 2021-06-15 13:00:31

Hello Developers,

On our Open Source project website we have a "Getting Started" section that we would love to get some feedback on. 
The reason why I am reaching out through this medium is to get some fresh eyes and unbiased opinion on the process so we can improve and nail the entire experience for all developers interested in the project.

So here is our full ask of the community: 

When we relaunched the k8ssandra.io site in early May, the flow of the Get Started 1 experience changed. We’ve also recently added instructions for running K8ssandra on additional K8s distributions including Azure and Digital Ocean.

So this is a good time to ask: how was your experience getting started with K8ssandra?

Tell us your pain points and suggestions for making a more seamless experience for future newbies. 

Feedback can be provided here or on our forum thread located here:
 https://forum.k8ssandra.io/t/how-was-your-get-started-experience/181
Real Time Video Stream Server based on AIOHTTP, OpenCV and ECMA6 JS
Tags: python, javascript, webdev
Published: 2021-06-15 12:54:20

Hello, this is my new side project — Real Time Video Stream Server.

![Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbumnwhlfk5csaomswbs.gif)

The source code is available in the link below: https://github.com/ArtyomKozyrev8/stream_video_server

The application is composed of two services: 1. http server 2. video processing process 3. Optionally Nginx

HTTP Server:

It listens for incoming websocket connections from video processing processes, gets video frames from the connections and distribute them to Asyncio Queues which are associated with incoming websocket connections from clients (web browsers), then tasks which are associated with the clients get data from the queues and send data to client browser.

In addition HTTP Server Process notifies Video Processing Process when it wants to receive data, since there is no need to send video frame when no clients (web browser) watch the video stream.

Video Processing Process:

It handles web camera or RTSP stream, gets frames from the stream, add timestamps, resize frame and send it HTTP Server Process.

Limitations of the Solution:

It can have only one HTTP server Process simultaneously, you can have more HTTP server Processes, but you can get some unexpected results. I am going to overcome the issue using message queue like NATS and write about it in next article.
Awesome Ruby Frameworks For Web Development
Tags: webdev, productivity, beginners, ruby
Published: 2021-06-15 12:51:15

Ruby is a programming language that has been accepted with open arms since 1995, and thanks to its open-source nature, it is still growing every day. Ruby is fast, object-oriented, and secure, which brings a dynamic nature into the project with an MVC support structure that makes development more comfortable than ever. With start-ups openly accepting Ruby, the language has shown remarkable progress in almost every field, especially web development. Ruby’s popularity motivated people to take the development to the next level and bring out some best ruby frameworks for the developers.

Some frameworks are built to ease out middleware and request/response of the application. Some are made for REST APIs and others for web applications. Collecting the best ruby frameworks from across the globe, in this post, we’ll talk about these frameworks and how each framework lets the developer take advantage of Ruby.

Without further ado, let’s delve into details of the best [ruby frameworks](https://exceed-team.com/tech/awesome-ruby-frameworks-for-web-development?s=de&a=a) for web development that will surely benefit your business.
Rlogical Techsoft -Top Entertainment App Development Company of 2021
Tags: android, ios, mobile
Published: 2021-06-15 12:50:37

It gives us immense pride to declare that our name was included in a press release about The Top entertainment application developers of 2021 in the industry by TopDevelopers.co.

At Rlogical, we believe in providing logical solutions for complex business problems. This trait of ours has helped us in gaining the reputation of being one of the <a href="https://www.rlogical.com/mobile-app-development/">best Entertainment App Development Companies</a> in Entertainment & Music Industry today.

 <b>Client Success Story</b>

The client wanted us to <a href="https://www.rlogical.com/mobile-app-development/android-app-development/">build an Andriod mobile app</a> that would allow store owners to display their products online to their customers. After detailed consultations with the client, we identified the following requirements:

    Mobile Application for Android devices, Web Portal.

    Media (video/text/image) can be uploaded and will be played on the devices.

    When the media will be playing, the device will be in kiosk mode.

    The campaign can be created to play the media on the devices.

    Campaign(media) will automatically download on the devices and will play as well.

    An admin will be able to manage all the activities done by the rooted device.

    All the changes done in the Mobile app will sync to the server.

    Activity can be predefined and will be played at the set time intervals.

    Through wireframes, we gave visual representation to the client’s requirements.

The app allowed the vendors to create a campaign schedule and ensure that the scheduled campaign gets downloaded automatically on all the connected devices and gets played on the device as well. The device would be playing content in the Kiosk mode to prevent any unauthorized person from accessing the content.

 
Please <b><a href="https://www.rlogical.com/portfolios/">visit our work</a></b> section on our website to know in detail about our other such successful projects.

Learn more here: https://www.rlogical.com/blog/rlogical-techsoft-declared-as-a-top-entertainment-app-development-company-of-2021/