teleren/devto huggingface dataset:
Building a Tailwind CSS alert component
Tags: opensource, tutorial
Published: 2021-09-24 07:40:50

Tailwind CSS is an awesome utility-first framework that you can use to quickly prototype and build user interfaces.

One of the disadvantages compared to other frameworks like Bootstrap or Bulma is that you don't get a default set of UI components to get started.

Today I want to start a series of articles on how to build commonly used web components, such as alerts, button, dropdowns, and many more.

I will start with the alert component.

![Tailwind CSS alert component](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mz8hgmdghxhatypvjrvb.png)

## Tailwind CSS alert component

First things first, we need to build the basic HTML markup to which we will later add the styles:

```
<div>
  <p>
    <span class="font-medium">Important Note!</span> Change a few things up and try submitting again.
  </p>
</div>
```

A div and a paragraph element inside it will suffice. Let's now add some styles for the main block element. I'll choose a nice blue background color:

```
<div class="flex bg-blue-100 rounded-lg p-4 mb-4">
  <p>
    <span class="font-medium">Important Note!</span> Change a few things up and try submitting again.
  </p>
</div>
```

Already looking better! Let's also add some styles to the paragraph element:

```
<div class="flex bg-blue-100 rounded-lg p-4 mb-4">
  <p class="ml-3 text-sm text-blue-700">
    <span class="font-medium">Important Note!</span> Change a few things up and try submitting again.
  </p>
</div>
```

Awesome! I think an icon would look really great as well.

```
<div class="flex bg-blue-100 rounded-lg p-4 mb-4">
  <svg class="w-5 h-5 text-blue-700" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path></svg>
  <p class="ml-3 text-sm text-blue-700">
    <span class="font-medium">Important Note!</span> Change a few things up and try submitting again.
  </p>
</div>
```

Final result:

![Tailwind CSS alert component result](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2rdqqs7l94ch9gdirbhw.png)

That's it! You can use this same alert for success and danger messages as well by changing the color from blue to green or red and also by changing the text and icon.

## Tailwind CSS Components Library - Flowbite

This [Tailwind alert component](https://flowbite.com/docs/components/alerts/) is part of a larger Tailwind CSS components library that I helped develop. It is open source under the MIT license and it is also published on [Github](https://github.com/themesberg/flowbite) and NPM.

Learn more about [Flowbite, a Tailwind CSS components library](https://flowbite.com/docs/getting-started/introduction/) by following the quickstart guide.
What VPS provider do you use?
Tags: watercooler, backend, server, vps
Published: 2021-09-24 07:24:34

---
title: What VPS provider do you use?
published: true
description: 
tags: watercooler, backend, server, vps
cover_image: https://nuvahost.com/blog/images/vps-virtual-private-server/vps-virtual-private-server-0.png
---
[VPS (Virtual Private Server)](https://en.wikipedia.org/wiki/Virtual_private_server) can be the right option between slow/inflexible shared solutions and a dedicated server if you can afford it or don't want to deal with complexity.

Some of the popular choices include: [InMotion](https://www.inmotionhosting.com/), [DreamHost](https://www.dreamhost.com/), [Bluehost](https://www.bluehost.com/), [A2 Hosting](https://www.a2hosting.com/), [HostGator](https://www.hostgator.com/), [Hostinger](https://www.hostinger.com/web-hosting), [GoDaddy](https://uk.godaddy.com/), etc.

What VPS provider do you use/have tried?
How much do you pay monthly? Are you satisfied with the performance, ease of use and support?
10 FREE Udemy courses for you to learn Web Design
Tags: webdev, html, css, javascript
Published: 2021-09-24 07:20:47

_If you found value in this thread you will most likely enjoy my tweets too so make sure you follow me on [Twitter](https://twitter.com/VladPasca5)  for more information about web development and how to improve as a developer. This article was first published on my [Blog](https://vladpasca.hashnode.dev/)_

1. Web Design Bootcamp: Design like a PRO

https://www.udemy.com/course/web-design-bootcamp-design-like-a-pro/

2. The Complete Responsive Web Design Course

https://www.udemy.com/course/the-complete-responsive-web-design-course/

3. Front End Web Design using WYSIWYG Web Builder like a pro

https://www.udemy.com/course/wysiwyg-web-builder-essential-training/

4. Web Developer Course HTML CSS JavaScript Learn Web Design

https://www.udemy.com/course/web-developer-course-on-creating-a-business-website/

5. Web Design for Web Developers: Build Beautiful Websites!

https://www.udemy.com/course/web-design-secrets/

6. Beginners Adobe Dreamweaver Tutorial

https://www.udemy.com/course/learn-dreamweaver-with-infinite-skills/

7. Introduction to Web and eCommerce User eXperience Design

https://www.udemy.com/course/introduction-to-web-and-ecommerce-user-experience-design/

8. Semantic UI - A Complete Beginners Guide

https://www.udemy.com/course/semantic-ui-for-beginners/

9. Fundamentals of User Interface Design

https://www.udemy.com/course/fundamentals-of-user-interface-design/

10. Create Your First Website Super Easily

https://www.udemy.com/course/create-your-first-website-using-wordpress/


_I hope found this useful and if you did please let me know. If you have any questions feel free to DM me on  [Twitter](https://twitter.com/VladPasca5)._
Find Personal & Business Email Addresses With Linkedin
Tags: emailfinder, businessemailfinder, emailfindingtools
Published: 2021-09-24 07:17:18

<h3>KendoEmailApp:</h3>
<a href="https://kendoemailapp.com/">Find Personal & Business email addresses</a> with one click. Kendo Email Finder will assist you in finding any email address directly from a LinkedIn profile or search results. Reach out now to over 700,000,000 professionals!

<h3>CHROME EXTENSION</h3>
Find and capture many new LinkedIn prospects with 100% verified corporate and personal email addresses within minutes. Additionally, our powerful Chrome extension supports LinkedIn, Sales Navigator, and Recruiter.

<h3>BULK EMAIL FINDER</h3>
The Email Finder is often performed to seek out the email address of an inventory of individuals. Upload an inventory of prospects to your account dashboard, find the email, and watch it enriched in bulk.
All of our services also are available directly through our API. for instance, find the email address of any professional with an easy API call.
Top 5 Creative Portfolio Website
Published: 2021-09-24 07:09:21

## Website 01
![Web 01](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sy7zxkza8o74vz2xs1l9.png)

| Live Demo | Source Code |
|---|---|
|[Demo](https://bhavya.dev/)|[Source Code](https://github.com/BhavyaCodes/portfolio)|

## Website 02
![Web 02](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z1kuukorn9h17v7eaupl.png)

| Live Demo | Source Code |
|---|---|
|[Demo](https://ahsankhan.me/)|[Source Code](https://github.com/ahsankhan26/ahsankhan26.github.io)

## Website 03
![Web 03](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yydq9ht3cu9iaq4v46ja.png)

| Live Demo | Source Code |
|---|---|
|[Demo](https://cristianofilho.com.br/)|[Source Code](https://github.com/CristianoFIlho/cristianofilho.github.io)

## Website 04
![Web 04](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcxuu617pgy99w8xc0sl.png)

| Live Demo | Source Code |
|---|---|
|[Demo](https://yashitanamdeo.github.io/)|[Source Code](https://github.com/yashitanamdeo/yashitanamdeo.github.io)

## Website 05
![Web 05](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uzitjh4r90e0heeb6ue6.png)

| Live Demo | Source Code |
|---|---|
|[Demo](https://victor-aremu.firebaseapp.com/)|[Source Code](https://victor-aremu.firebaseapp.com)

[Ecourge Innovations](https://ecourge.com)
HTML input types dev should know
Tags: html, css, javascript
Published: 2021-09-24 06:58:31


```
<input type="range" />
<input type="color" />
<input type="tel" />
<input type="time" />
<input type="month" />
<input type="datetime-local" />
<input type="week" />
<input type="reset" />
<input type="date" />
<input type="url" />
<input type="search" />
```
Awesome Flutter Animation
Tags: flutter, android, ios, mobile
Published: 2021-09-24 06:51:35

To make an app’s UI alive, we use animations which is a complex procedure.

**Ways of Animation Implementation**

There are two different ways of implementing animations you can use when creating animations in Flutter.
Implicit animations
Explicit animations

**Implicit Animations**

This type of animation can be created via using a widget that is provided by Flutter core. You can modify a widget property by setting a target value; whenever that target value changes, the widget animates the property from the old value to the new one.

For example, we use ***AnimatedAlign*** widget to make a widget change its position based on alignment property or ***AnimatedContainer*** to animate a Container’s change of property such as decoration, height, width.

**Explicit Animations**

Explicit animations are a set of controls for telling Flutter how to rapidly rebuild the widget tree while changing widget properties to create animation effects.

 The animation property is controlled via an ***AnimationController***. It is often coupled with the ***AnimatedBuilder*** widget to animate any of its children widgets.

>Built-in widget
>AnimatedAlign
AnimatedContainer
AnimatedCrossFade
AnimatedDefaultTextStyle
AnimatedListState
AnimatedOpacity
AnimatedPhysicalModel
AnimatedPositioned
AnimatedModalBarrier
AnimatedSize
DecoratedBoxTransition
FadeTransition
PositionedTransition
RotationTransition
ScaleTransition
SizeTransition
SlideTransition
AnimatedBuilder
AnimatedWidget
Have you tried Kubernetes?
Tags: watercooler, opensource, kubernetes
Published: 2021-09-24 06:50:01

---
title: Have you tried Kubernetes?
published: true
description: 
tags: watercooler, opensource, kubernetes
cover_image: https://www.linuxadictos.com/wp-content/uploads/kubernetes-logo.jpg
---
[Kubernetes](https://kubernetes.io/), also known as K8s, is an open-source system for automating deployment, scaling, and management of containerized applications.

For me K8s has always been in the same category as [Rust](https://www.rust-lang.org/) - I hear great things about it all the time, tho I still have not found time to try it.

Have you tried Kubernetes? What are your thoughts on it?
Could you share some projects where you used it?
How to review code better?
Tags: codereview, codequality, codenewbie
Published: 2021-09-24 06:30:32

When I started working as a developer 5 something years ago, I was under the impression that code reviews were an unnecessary overhead from a developers time. I thought that the 'star' developers would only write code and everyone else would do the boring stuff such as reviewing! Boy, was I wrong! I realized fairly early the importance of code reviews. Hopefully this post will help you with your code reviews. Here goes -

##Establish a review language with the team
![Language](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/12gbbafm43rccuxv5x2e.jpg)
I have seen that different teams have different strategies that work for them. There are teams that like to have very **strict reviewing protocols** while others like to keep the review **conversational**. One of the first things we can do as developers is establish that review language with the team. For my team, a conversational approach to the review works. We add comments on a piece that we have concerns about. The owner of the PR will then add clarifications or make the suggested changes. I have seen some teams have a formal review process. The reviewer adds comments and the comments are then converted into tasks that the owner of the PR works on/addresses. Find what works for you guys and stick to it!

##Give suggestions not solutions
![Think](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u85tihyfn7c9h1xx2ty1.jpg)
Code reviews are a nice way to foster **technical thinking**. Often times I have seen senior developers give the solutions to the problems that the find in the review. Although this might be beneficial in the short term as it is faster, it is **problematic in the long term**. By giving the solution you are revoking the owner's opportunity to stretch their technical muscle. 
Ex - Say 'Hey! I think we are iterating over more records than we should. Is there a more efficient way to do it?' instead of 'Hey! I think we can make this more efficient by using the filter function provided in the utility package.'

##Do collaborative reviews
![Team](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ze6gu2lwh30024p43b0z.jpg)
We sometimes underestimate the value a collaboration session can have! For most complicated changes, one of the most efficient way to review is to set up a joint session with the whole team (owners and reviewers). In this session the owner of the PR can go over the change and explain the thought process that led to the change. That **added context** reduces review times by a huge margin. Our team usually has regular sessions in the week where we discuss new PRs. This is a fun way to add collaboration to the seemingly solo process of code review.
React or Vue, Which one should I learn?
Tags: discuss, javascript, frontend, backend
Published: 2021-09-24 06:39:53

Hello guys, 
I'm pursuing the full-stack web development. I learn HTML, CSS, JavaScript and most popular CSS Framework like Bootstrap and tailwind CSS along with SCSS. 

Most of the time, I spend on my time on Backend development. I mostly work on Django backend and sometime Node js(not frequently).
Now I'm planning to learn a frontend framework, which one should I learn between React and Vue. Both have their own advantages and disadvantage.

Tell me if you learn only one, which one it should be? Share your experience. Help me to choose one of them.
HTML tags | tfoot
Tags: html, tags, tfoot
Published: 2021-09-24 06:30:07

It is used to **define the set of rows that make up the footer of a table**.

**It has no attributes** other than global ones, so to define presentation aspects, CSS properties such as `background-color`, `text-align` or `vertical-align` will be used.

**Must appear after** the `<caption>`, `<colgroup>`, `<thead>`, `<tbody>` or `<tr>` elements.

Browsers can use `<thead>`, `<tbody>` and `<tfoot>` to allow scrolling of the body of the table independently of the header and footer. Similarly, when doing CSS for printing and if the table is spread across multiple pages, these elements can allow both the header and footer to appear repeated at the beginning and end of each printed page.

`<thead>`, `<tbody>`, and `<tfoot>` together also serve to provide useful semantic information used when rendering for screen or printer, as well as to improve accessibility.

Has an **implicit ARIA role** `rowgroup`.

- Type: *table-footer-group*
- Self-closing: *No*
- Semantic value: *No*

[Definition and example](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/tfoot) | [Support](https://caniuse.com/mdn-html_elements_tfoot)
Autocorrecting Typos in Git Commands
Tags: git
Published: 2021-09-24 05:57:01

Git offers [extensive configuration](https://www.freecodecamp.org/news/gitignore-what-is-it-and-how-to-add-to-repo/).

There are several "gold nugget" options buried within the available configuration, and `help.autocorrect` is no exception.

By enabling it, whenever a typo in a Git command is detected, Git will *automatically* run the correct command after a custom period of time:

```sh
git config --global help.autocorrect 10
```

That `10` at the end of this example command is equivalent to one second. Each integer is 0.1 seconds, so `5` is 0.5 seconds, `20` is 2 seconds, and so on.

`1` is the minimum, but as far as I am aware, there is no maximum (within reasonable limits of course). You could prolong the delay a bit, giving you a chance to cancel the command if needed.

Anyway, once it has been enabled, let's suppose you typed the following command, which is **intentionally misspelled**:

```sh
git comit -am "example commit"
```

You'd then get the following output:

```sh
WARNING: You called a Git command named 'comit', which does not exist.
Continuing under the assumption that you meant 'commit'
in 1.0 seconds automatically...
```

Pretty neat, right?

## Disabling autocorrect

To disable autocorrect, you can run the following command:

```sh
 git config --global help.autocorrect 0 
```

## Conclusion

I have many more Git tricks in my collection that I look forward to sharing on this site, and I hope you found this one useful!

Thanks for reading.
Create a Netflix clone from Scratch: JavaScript PHP + MySQL Day 60
Tags: php, javascript, webdev, tutorial
Published: 2021-09-24 05:19:04

Netflix provides streaming movies and TV shows to over 75 million subscribers across
the globe. Customers can watch as many shows/ movies as they want as long as they are
connected to the internet for a monthly subscription fee of about ten dollars. Netflix produces
original content and also pays for the rights to stream feature films and shows.


In this video,we will be Creating the watch page
{% youtube hf4DtGKEHoM %}



If you like my work, please consider
[![Buy me a coffee](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jm11knj7d8zwcvo150q2.png)](https://www.buymeacoffee.com/cglikpo)
so that I can bring more projects, more articles for you

If you want to learn more about Web Development, feel free to [follow me on Youtube!](https://www.youtube.com/c/ChristopherGlikpo)
Hide & Show (Toggle) elements inside ngFor in Angular 10 | Most asked Interview Question
Tags: javascript, angular, toggle, interview
Published: 2021-09-24 05:45:11

* 3 Ways to hide and Show elements
* How to Hide and Show content or elements inside ngFor directive

<b>Check description of the video for source code </b>

{% youtube 9nxGiPxOClw %}
Unit testing Stdout in Go
Tags: go, devops, sre
Published: 2021-09-24 05:40:16

Figuring out how to unit test functions that print to the terminal can be something of a daunting task. Thankfully, it's actually pretty simple due to the magic of [interfaces](https://gobyexample.com/interfaces) in Go! 

---

This post is going to be short and sweet on how to test output by capturing it in a `bytes.Buffer`. Below, I have a function that accepts a string, prints out a statement, and then returns. 

```go
func SayHello(w io.Writer, name string) {
	fmt.Fprintf(w, "Hi, my name is %s\n", name)
}
```

The critical component of this function is the `io.Writer` interface variable being passed in. Because it is an interface, this function will accept any data type that implements the method `Write(b []byte) (n int, err error)`. 

This interface is implemented in the `io` package and the entire code can be seen [here](https://pkg.go.dev/io#Writer). Most importantly, here is the code below for the interface:

```go
type Writer interface {
	Write(p []byte) (n int, err error)
}
```

So how do we print out this function to the terminal? We pass in `os.Stdout`, which has its own Write method! This can be seen [here](https://pkg.go.dev/os#File.Write).

To print this out to our terminal, just add the following in the `main()` function. 

```go
func main() {
	SayHello(os.Stdout, "Shannon")
}
```

---

Now, we can move onto unit testing this specific function, which just outputs a name and greeting. In order to test it, we need to capture its output and then turn it into a string from a slice of bytes. To do this, we'll utilize the `bytes.Buffer` struct, which has a Write method to satisfy the Writer interface.

Here is the full test code in order to compare these: 

```go
func TestSayHello(t *testing.T) {
	tt := []struct {
		description string
		name        string
		expect      string
	}{
		{"Empty", "", "Hi, my name is \n"},
		{"Name1", "Shannon", "Hi, my name is Shannon\n"},
		{"Name2", "Shug", "Hi, my name is Shug\n"},
	}

	for _, tc := range tt {
		t.Run(tc.description, func(t *testing.T) {
			var output bytes.Buffer
			SayHello(&output, tc.name)
			if tc.expect != output.String() {
				t.Errorf("got %s but expected %s", output.String(), tc.expect)
			}
		})
	}
}
```

You'll notice that we are declaring a Buffer here: `var output bytes.Buffer` and then passing that buffer into the SayHello function. However, we are actually passing in the address of the buffer. This is due to the Buffer method for Write being a pointer receiver, which can be seen [here](https://pkg.go.dev/bytes#Buffer.Write).

And that's it! Run `go test -v` to see that all tests pass, and you have successfully captured the output of a command in order to unit test the output without actually returning the string value.
10 magical Chrome extensions for developers
Tags: chrome, extension
Published: 2021-09-24 05:18:55

These browser extensions will blow your mind
Some are extremely useful and some are fun to have

## 1. Bypass Paywalls Chrome


Bypass Paywalls is a web browser extension to help bypass paywalls for selected sites

It can bypass paywall for quora, medium, glassdoor, bloomberg and many many more websites

You need developer mode ON to use this extension

Link 👇 
[https://github.com/iamadamdev/bypass-paywalls-chrome](https://github.com/iamadamdev/bypass-paywalls-chrome)

## 2. Headless Recorder


A Chrome extension that records your browser interactions

And generates a Playwright/Puppeteer script

Automate your entire browser interaction and tweek the script to do more

Link 👇 
[https://www.checklyhq.com/docs/headless-recorder/](https://www.checklyhq.com/docs/headless-recorder/)



## 3. Dark Reader


It generate a dark mode that aims to reduce the eyestrain of the user

It is feature-rich and can be configured in many ways throughout the UI

Link 👇 
[https://darkreader.org](https://darkreader.org)


## 4. cVim


 Vim for Google Chrome

Control your browser with your keyboard only

Configure keybinding for every task

link 👇
[https://github.com/1995eaton/chromium-vim](https://github.com/1995eaton/chromium-vim)


## 5. Octotree


 GitHub on steroids

 Awesome code review & exploring

Quick pull request navigation

Tree-based file filtering

Multi-tab support

22 syntax themes

Link 👇 
[https://www.octotree.io](https://www.octotree.io)



## 6. Enhanced GitHub


Displays repo size

Displays each file size for every active branch

Show download link for each file

Copy file's contents directly to Clipboard

Link 👇 
[https://github.com/softvar/enhanced-github](https://github.com/softvar/enhanced-github)


## 7. Google Unlocked


It unlocks hidden google search results

scans hidden search results that were censored by Google due to complaints

Only manual installation available

Link 👇 
[https://github.com/Ibit-to/google-unlocked](https://github.com/Ibit-to/google-unlocked)



## 8. Refined Hacker News


adds useful features and tweaks a few stuff on Hacker News to make the experience better

without changing the look and feel

Link 👇 
[https://github.com/plibither8/refined-hacker-news](https://github.com/plibither8/refined-hacker-news)


## 9. Treeverse


Treeverse is a tool for visualizing and navigating Twitter conversation threads

Open Twitter and click on the tweet that you would like to visualize the conversation 

Link 👇 
[https://github.com/paulgb/Treeverse](https://github.com/paulgb/Treeverse)



## 10. KeyFinder


Searches the DOM for any embedded script link, as script tag may contain keys for specific API(such as Google maps API) 

You can add keywords to search for it at any website you visit

Link 👇 
[https://github.com/momenbasel/KeyFinder](https://github.com/momenbasel/KeyFinder)


## Liked this article

Subscribe to my newsletter https://bitfumes.com/newsletters

Follow me for more content