teleren/devto huggingface dataset:
Solution: Outlook/Hotmail is blocking mails sent via Sendgrid
Tags: sendgrid, email
Published: 2022-07-22 12:08:36

Hello dear reader,
This article is written for you to save your valuable time.

When you want to send an email to an Outlook or Hotmail address, there are some prerequisites that you need to meet. Namely, domain authentication. This is essential to claim that we are the owner of the domain that we filled as a sender on the emails we sent.
Sendgrid has really good documentation about [how can you perform Domain Authentication](https://docs.sendgrid.com/ui/account-and-settings/how-to-set-up-domain-authentication) (also known as Domain Whitelabeling)

Can you send your emails to hotmail accounts now? Well, of course not!
On Sendgrid there are four plans you can choose from; Free, Essentials, Pro, and Premier.
When sending email through an account that is under the Free or Essentials pricing package, your account will be utilising a shared IP pool.

Being grouped with others in a pool of shared IP's can offer several benefits, especially if you are only sending a moderate amount of email.

But unfortunately, it is really likely that the IP address you're using from the pool is going to be blacklisted by Hotmail. So if we don't want our emails getting blocked by Hotmail, we need to upgrade our plan to at least to the "Pro" plan. Or choose another service.

Good luck, have fun :)
Docker for Beginners
Tags: docker, beginners, career, tutorial
Published: 2022-07-22 12:05:04

Docker is a must know tool for DevOps beginners and here is my simple attempt to show you some basic concepts of Docker. The cloud-native space is expanding day by day and new tools keep emerging but tools like Docker get a high preference when it comes to preferred DevOps tools to learn as a beginner. Even I learned Docker as my first tool when starting my career. I hope this video will help you learn and understand more on how Docker works along with some basic concepts. If you like video, please don't forget to like, share and subscribe my channel.

{% embed https://youtu.be/7BO6WDnXgik %}
New Things Added - Laravel 9.21 Released
Tags: laravel, php, webdev, programming
Published: 2022-07-22 12:02:00

Let's get started quickly I found new things in Laravel 9.21 Released I wanted to share with you.

- Add whenCounted to JsonResourc
https://github.com/laravel/framework/pull/43101

`` loadCount() - whenCounted() ``
```php
class PostController
{
    public function show(Post $post)
    {
        return new PostResource($post->loadCount('comments'));
    }
}

class PostResource extends PostResource
{
    public function toArray($request)
    {
        return [
            'id' => $this->id,
            'comments_count' => $this->whenCounted('comments'),
        ];
    }
}
```

- Adds enum casting to Request
https://github.com/laravel/framework/pull/43239

```php
$request->enum('status', StatusEnum::class);
```

- Introducing a fresh new look for Artisan
https://github.com/laravel/framework/pull/43065
https://github.com/nunomaduro/termwind

- Artisan model:show command
https://github.com/laravel/framework/pull/43156
https://github.com/doctrine/dbal

```php
php artisan model:show User
```

- Artisan about Command
https://github.com/laravel/framework/pull/43147

```php
php artisan about
```
https://laravel-news.com/customize-laravel-about-command


I hope you enjoyed with me and to learn more about this release visit the sources and search more. I adore you who search for everything new.
Source :- https://www.youtube.com/watch?v=Ilv7jYj2_GU
Source :- https://www.youtube.com/watch?v=JR42YZ9ZbNQ
Source :- https://www.youtube.com/watch?v=25Zg5MvXFUo
Source :- https://www.youtube.com/watch?v=PBBTgJwMUsk
Source :- https://laravel-news.com/laravel-9-21-0
How To Manage a List of Entities with Laravel and Vue3
Tags: laravel, tutorial, vue
Published: 2022-07-22 11:32:22

---
title: How To Manage a List of Entities with Laravel and Vue3
published: true
description: Laranerds Tutorial - Common Application Features
tags: laravel, tutorial, vuejs
series: Laranerds Common App Features
cover_image: http://laranerds.dev/wp-content/uploads/2022/07/LaranerdsCommonAppFeatureThumbnail.png
---

> **You'll make more money and earn more respect when you deliver quality code faster.** [Laranerds.dev](https://laranerds.dev) helps you do just that. [Sign up](https://laranerds.dev) to be notified when new resources are published.

In almost every web application you work on, you will be asked to implement a feature that displays a list of entities, e.g. Products or Tasks, and allows Users to either add new entities, or update and delete existing entities.

Rather than write this code from scratch every time, you can copy and paste from your own battled-tested swipe file or test application.

The faster you delivery bug-free code, the better you will look to your employer or client, and the more time you'll have to work on interesting problems.

## The Feature Request

The acceptance criteria may look something like this:

* User can view a list of Tasks
* User can create a new Task
* New Tasks are added to the bottom of the list right away
* User can Update an existing Task from the list
* Updated Tasks are updated in the list right away
* User can Delete a Task from the list
* Users are asked to confirm the Delete action
* Deleted Tasks are removed from the list right away

We will be creating a list of Knights. I like Knights.

If you want to follow along with this example you can either clone this [Laranerds Example Application](https://github.com/patrickodacre/laravel-snippets/tree/ManageEntities-1), or you can implement these changes in your own practice Laravel application.

Ensure you checkout this tag - [Manage Entities v1](https://github.com/patrickodacre/laravel-snippets/tree/ManageEntities-1)

After cloning the repo run `git checkout ManageEntities-1` in your terminal.

## Files Overview

All the code required for this feature is found in the following files:

1. app/Http/Controllers/KnightController.php
2. resources/js/Pages/Knights.vue
3. routes/web.php

Any other files involved in the feature - models, migration, etc. - would be common to any application.

## Explanation

For a detailed explanation, check out the video here:: 

{% youtube B25Cb5dFX64 %}

But sure to sign up at [Laranerds](https://laranerds.dev) if you want to be notified when new tutorials and code snippets are published.
Animated Cursor
Tags: javascript, css, animation
Published: 2022-07-22 11:25:00

A simple way to create animated cursor with CSS and JavaScript. You can update style for the cursor.

###CSS
```css
* {
  cursor: none;
}
#mouse-pointer {
  position: fixed;
  left: -50px;
  top: -50px;
  width: 50px;
  height: 50px;
  border-radius: 50px;
  border: 2px solid #bbbbbb;
  z-index: 99;
  pointer-events: none;
}

#center-point {
  display: block;
  width: 6px;
  height: 6px;
  background-color: rgb(101, 101, 101);
  border-radius: 6px;
  position: fixed;
  top: calc(50% - 3px);
  left: calc(50% - 3px);
  transition: transform 100ms linear;
  z-index: 99;
}
```
###JavaScript
```js
const pointer = document.createElement("DIV");
pointer.id = "mouse-pointer";
const centerPointer = document.createElement("DIV");
centerPointer.id = "center-point";
document.body.appendChild(pointer);
document.body.appendChild(centerPointer);

document.onmousemove = function (event) {
  requestAnimationFrame(() => {
    centerPointer.style.left = event.clientX - 2 + "px";
    centerPointer.style.top = event.clientY - 2 + "px";
  });
  setTimeout(() => {
    requestAnimationFrame(() => {
      pointer.style.left = event.clientX - 25 + "px";
      pointer.style.top = event.clientY - 25 + "px";
    });
  }, 100);
};

document.onmousedown = function (event) {
  requestAnimationFrame(() => {
    centerPointer.style.transform = "scale(1.3)";
  });
};

document.onmouseup = function (event) {
  requestAnimationFrame(() => {
    centerPointer.style.transform = "scale(1)";
  });
};
```
That's it.

You can check working demo here [Codepen](https://codepen.io/raghavbhardwaj/pen/eYMRdPQ).
How to Integrate Cucumber with CI/CD Jenkins to Execute Cypress Test Suites.
Tags: javascript, cypress, tutorial, testing
Published: 2022-07-22 11:11:15

How to Integrate Cucumber with CI/CD Jenkins to Execute Cypress Test Suites.

**Cypress + Jenkins +Cucumber !!
**
https://qaautomationlabs.com/integration-of-cucumber-with-ci-cd-jenkins-for-to-execute-cypress-test-cases/
THE IRONY OF BEING A FULL STACK DEVELOPER
Tags: web, development, webdev, mobiledev
Published: 2022-07-22 11:11:14


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/294t54e2fh9afomwrqm2.jpg)

**Table of content**

1. Everyone wants to be called a fullstack developer
2. The irony, the struggle and the risk
3. Why not just be called a developer?

**Everyone wants to be called a full stack developer.**

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


In this blog, i will be talking about how being a full stack developer evolves and behaves. I always wonder momentarily and ask myself what all these developer titles really mean and its effects on how well people work. 

I also had a hard time figuring out how one person could do a lot and still be called something of worth and even be paid measurably. Over the years, there hasn’t been a single moment where I have never questioned if one man could do it all.

There was a time I wondered if one person could have all the knowledge about software. People get the impression once they can code a bit of front-end and back-end, it makes them specialists in all fields of code.

Having spoken to a few professionals, it is a fallacy, a joke and requires some level of decorum to help survive in the nerdy world of 0s and 1s.

**The irony, the struggle and the risk.**

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

The whole farce about being a fullstack developer is like slippery slop, blind spot and needle in a hay stack to all the things that matter. Full stack development is said to be the combination of front-end, back-end and maybe devOps, cloud computing and data. That is where most people miss out on the point. DevOps is a new discovery in recent times. 

A devop has basic knowledge of both IT development and software. Knowing how well everything operates and how to make products and software work to the satisfaction of the people involved both on the side of creation and usage.

These technologies come with loads of frameworks and tools. These include that of front-end, back-end and DevOps. Siting some examples of these tools and frameworks, js front end frameworks, .net blazor, HTML, CSS, PHP, Java, Laravel, C++, C#, Microsoft Azure DevOps etc.

All this in the mind of one man? Not a chance. I mean it is slightly possible but there could be a lot of short falls and challenges. Challenges which might include, limited time, new developments, opportunity to specialize and several others. 

**Why not just a “developer'' instead?**

If there was a choice of which there is, I believe being called a developer with no extra appellation keeps things very open and teachable. There is always a thin line between being a Pro and a Beginner.

In a case where titles don’t dictate how well you perform, there is much more effort in performance which has been statistically proven on work ethics. In the end, the goal is to build awesome products as a developer. 

Titles don’t prove whether or not you’re good, the work does.
Chart JS di Nuxt JS
Published: 2022-07-22 09:45:00

Lihat cara saya menggunakan **Chart JS** di **Nuxt JS** menggunakan **vue-chartjs 3.5.1**. Omong-omong, saya menggunakan **Nuxt 2** dengan **Vue 2** di dalamnya, dan saya menggunakan **Tailwind CSS** dalam proyek saya. Pastikan dokumentasi **Chart JS** yang kamu buka adalah versi *2.9.4* karena tutorial ini memberi tahu kamu tentang versi *2.9.4*.
***
## 1. Tambahkan 2 *dependency* ini ke package.json

```json
{
  ...
  "dependencies": {
    "chart.js": "2.9.4",
    "vue-chartjs": "^3.5.1"
  }
  ...
}
```

Jalankan **yarn install** atau **npm install**
***
## 2. chart.js plugin file

![chart.js file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5srenzfq5n77iljbdxy6.png)

Buat file baru di folder **plugins** di proyek Nuxt punyamu, jika folder **plugins** belum ada, buat saja. File baru ini dapat diberi nama apa saja, tetapi kita akan menamainya **chart.js**.

Isi dari file **chart.js**:

```javascript
import Vue from 'vue'
import { Bar } from 'vue-chartjs'

Vue.component('BarChart', {
  extends: Bar,
  props: {
    data: {
      type: Object,
      required: true,
    },
    options: {
      type: Object,
      required: false,
      default: () => ({
        responsive: true,
        maintainAspectRatio: false,
        legend: {
          display: false,
        },
      }),
    },
  },
  watch: {
    data() {
      this.renderChart(this.data, this.options)
    },
  },
  mounted() {
    this.renderChart(this.data, this.options)
  },
})
```
***
## 3. nuxt.config.js

```javascript
export default {
  ...
  plugins: ['@/plugins/chart.js'],
  ...
}
```

Tambahkan plugin **chart.js** ke file **nuxt.config.js** di property **plugins**.
***
## 4. Buat component

```vue
<template>
  <div class="p-2 border border-gray-500 mt-4">
    <label class="block mb-2 font-bold"> Coba Chart </label>

    <client-only>
      <BarChart :data="chartData" />
    </client-only>
  </div>
</template>

<script>
export default {
  props: {
    penilaian: {
      type: Object,
      required: true,
    },
  },
  computed: {
    chartData() {
      return {
        labels: [1, 2, 3, 4, 5],
        datasets: [
          {
            label: '',
            data: [2, 1, 16, 3, 2],
            backgroundColor: 'rgba(20, 255, 0, 0.3)',
            borderColor: 'rgba(100, 255, 0, 1)',
            borderWidth: 2,
          },
        ],
      }
    },
  },
}
</script>
```

Coba contoh **component** ini.
***
## 5. Hasilnya

![Chart JS in Nuxt JS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zra491bohaly7uykg2w3.png)

Kurang lebih tampilannya seperti ini. Chart ini disebut **BarChart**, ada juga jenis chart lain di **Chart JS**. Untuk mengetahui lebih lanjut dan mempelajari tentang konfigurasi, kamu dapat lihat dokumentasinya di:

*https://www.chartjs.org/docs/2.9.4/*
Career Growth? Trust The Best Coding Bootcamp in Bay Area
Tags: codingbootcamp, coding, codingbootcampjobs, onlinecoding
Published: 2022-07-22 11:02:01

Through innovation and technology, we have come so far that we can learn anything at our fingertips. If you are sincerely seeking career growth and you want instant growth in monetary terms as well, then you must checkout the **[cheapest coding boot camps](https://www.synergisticit.com/coding-bootcamps-in-bay-area-ca/)** in Java, Python, Data Science, Machine Learning, AWS, and MERN Stack. 

By the end of your skill enhancement training, we reward candidates with a well-recognized certification to help them stand out and get a whooping salary range from $85000 to $150000. You can check out our existed students who already have landed their dream job in no time.
Hosting .txt online for free with StaticSave
Tags: txt, hosting, staticsave
Published: 2022-07-22 10:53:46


If you're looking for a free and easy way to host your TXT content online, look no further than [StaticSave](https://staticsave.com/). 

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

With StaticSave, you can paste your TXT file content and share them with others by simply copying and pasting a URL. 

Plus, there's no need to worry view restrictions - StaticSave is free to start! Here's how to get started:

- Go to staticsave.com and create an account.

- Once you're logged in, create a folder.

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

- Inside the folder, create a file with the 'txt' as your file type.

- Choose the visibility of the file. And click on add page.

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

- Paste your content on the field provided and click on "Submit to Save" button.

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

- You will get the link to the file on the top. Copy it by clciking it.

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

- Thats it!

Also Read: [How to host TXT files online for free?](https://staticsave.com/blog/hosting-txt-files-online-for-free)
CSS only Spinner Loader
Tags: css, animation, design, beginners
Published: 2022-07-22 10:47:00

A simple CSS only loader. Just using span and css animation, work perfectly on all modern browsers.

###HTML
```html
<div class="mainLoaderContainer">
  <span class="loaderSpan span1"></span>
  <span class="loaderSpan span2"></span>
  <span class="loaderSpan span3"></span>
  <span class="loaderSpan span4"></span>
  <span class="loaderSpan span5"></span>
  <span class="loaderSpan span6"></span>
  <span class="loaderSpan span7"></span>
  <span class="loaderSpan span8"></span>
  <span class="loaderSpan span9"></span>
</div>
```
###CSS
```css
body {
  margin: 0;
}
.mainLoaderContainer {
  background-color:#000;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;  
}
.loaderSpan {
  position:absolute;
  border-radius:50%;
  animation: rotate 1.4s ease-in-out infinite;
}
.span1 {
  width:50px;
  height:50px;
  border:4px solid #d500f9;
  border-bottom:4px solid transparent;
  border-left:4px solid transparent;
  animation-delay: 50ms;
}
.span2 {
  width:60px;
  height:60px;
  border:4px solid #e91e63;
  border-bottom:4px solid transparent;
  border-left:4px solid transparent;
  animation-delay: 100ms;
}
.span3 {
  width:70px;
  height:70px;
  border:4px solid #26a69a;
  border-bottom:4px solid transparent;
  border-left:4px solid transparent;
  animation-delay: 150ms;
}
.span4 {
  width:80px;
  height:80px;
  border:4px solid #cddc39;
  border-bottom:4px solid transparent;
  border-left:4px solid transparent;
  animation-delay: 200ms;
}
.span5 {
  width:90px;
  height:90px;
  border:4px solid #7cb342;
  border-bottom:4px solid transparent;
  border-left:4px solid transparent;
  animation-delay: 250ms;
}
.span6 {
  width:100px;
  height:100px;
  border:4px solid #ffa726;
  border-bottom:4px solid transparent;
  border-left:4px solid transparent;
  animation-delay: 300ms;
}
.span7 {
  width:110px;
  height:110px;
  border:4px solid #ff8a65;
  border-bottom:4px solid transparent;
  border-left:4px solid transparent;
  animation-delay: 350ms;
}
.span8 {
  width:120px;
  height:120px;
  border:4px solid #ef5350;
  border-bottom:4px solid transparent;
  border-left:4px solid transparent;
  animation-delay: 400ms;
}
.span9 {
  width:130px;
  height:130px;
  border:4px solid #4a148c;
  border-bottom:4px solid transparent;
  border-left:4px solid transparent;
  animation-delay: 450ms;
}
@keyframes rotate {
  0% {
    transform: rotate(-45deg);
  }
  90%, 100% {
     transform: rotate(315deg);
  }
}
```
That's it.

You can check working demo here [Codepen](https://codepen.io/raghavbhardwaj/pen/YbvGKM).
Say no to Tailwind, embrace plain CSS
Tags: html, css, tailwindcss, codequality
Published: 2022-07-22 10:13:00

Tools like Tailwind may help you develop your hobby project faster, but the thing is...

## There shouldn't be any presentation logic in markup
You should use HTML to describe the content, hierarchy and structure, not how it looks. You should use semantic HTML tags like `<section>`, `<aside>`, `<figure>` instead of `<div>`. Then you style the content using the classes corresponding to the type of content, like `"testimonials"` instead of `"bg-slate-100 rounded-xl p-8 dark:bg-slate-800"`.

That's why they removed a bunch of presentation tags from HTML, like `<font>`, `<center>` etc. Your website should be readable even without a single line of CSS/JS, only with the help of the right structured HTML. I encourage everyone to do some research on things like **progressive enhancement** and **graceful degradation**.

## Benefits
There are tons of benefits in using HTML and CSS as they are intended to be used.
  * More accessible website,
  * better SEO,
  * performance improvements thanks to smaller HTML/CSS size and caching,
  * and you potentially avoid legal issues in future.

## But... It's hard
> Just because something is easier doesn't mean it's the right way to do it.

I get it, it's mentally draining to analyze the type of the content, name it correctly. But our job, as developers, is to do exactly that. Translate business requirements and domain knowledge to code, without ambiguity and without context loss.
It may be hard for some to learn CSS. The alternative? We learn a new framework, tool, library, utility every week. Learning and mastering CSS can't be much harder than that.

## Conclusion
Tailwind may be great for hobby or POC projects. But for enterprise projects that tend to scale vanilla HTML/CSS is the way to go.

HTML and CSS are not perfect, but I'd rather we improve existing solutions, than come up with newer, shiny bad tools that try to solve the very problem they introduce.
I have the weekend free | Suggest weird ideas and I'll try to code them!!!
Tags: help, watercooler, programming
Published: 2022-07-22 10:04:24

I have the weekend free and fancy coding some weird stuff. If you have any weird idea in mind please share it in the comments and I will select a few and code them over the weekend. I will release one or more posts next week with the implementations.

Ideas can range from a website, app, script, bot, etc... anything you can think of. Of course they must be simple so I can do them over the weekend.

Cheers, can't wait for the weird ideas you come up with!! :)
5 Easy Steps to Resolve Biggest Challenges of Software Engineering
Tags: beginners, webdev, productivity
Published: 2022-07-22 10:02:47


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kp6wvpj9lhajjfbiaqbu.jpg)The software development industry is a multi-billion dollar and fast-changing industry.

Revenue in the Software market is projected to reach US$ 626.50 bn in 2022. - Statista

Software development changes rapidly as technology — such as low-code/no-code platforms, machine learning operations, DevSecOps, digital experiences, PWAs, IT automation, cloud integration, and serverless computing. To stay in the present, you not only need to consider the current state of technology, but you also need to look ahead.
5 Stages of Product Development Life Cycle (PDLC) for Successful Software Launch

1. Product Ideation 
2. Product Design
3. Product Development and Coding
4. Product QA and Testing
5. Product Deployment + Maintenance
Ansible 6.1.0 has been released
Tags: ansible, automation
Published: 2022-07-22 09:49:59

Ansible users beware! The new version of Ansible is here (https://pypi.org/project/ansible/6.1.0/), bringing major updates. In addition to a curated set of Ansible Collections that provide a vast number of modules and plugins, **the Ansible 6.1.0 package also includes ansible-core 2.13.1**, which is a significant update from Ansible 5 versions that included ansible-core 2.12. Make sure to check your playbooks for any potential compatibility issues.  

New in Ansible 6:
* a new command line utility “ansible-community” to check the installed version of the Ansible Community package, 

* Python wheels available for Ansible 6 and ansible-core 2.13. versions, resulting in significantly improved installation performance, 

* Ansible 6 no longer installs some unnecessary files from Ansible Collections (tests, hidden files and directories) to further improve installation performance and reduce the disk size, 

* and more. 

You can install the package with pip install ansible==6.1.0.

Get more info here: https://groups.google.com/g/ansible-devel/c/KxogBHF70Fo