teleren/devto huggingface dataset:
Create Jira Ticket on Prefect Task Failure
Tags: python, dataengineering
Published: 2022-08-16 13:22:20

Prefect offers a great UI to monitor and manage your Prefect runs. And there is nothing better than opening your laptop in the morning and seeing all green when you look at it. However, that's unfortunately not always the case and, even though this depends on your organization's workflows, usually you will have to create a bug ticket in Jira before attempting to resolve any issues in your runs. Let's automate this by integrating the `jira_notifier` in our tasks.

## Prerequisites
First, we'll need to create a Jira API token. You can do this by following [this URL](https://id.atlassian.com/manage-profile/security/api-tokens), logging in, and then click the `Create API token` button. Write down the token and store it somewhere safe, we'll need it in a second.

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

Next we'll have to pass the token we just created, the Jira user and the Jira server URL on to Prefect. One easy way to do this is to add the following to your Prefect configuration file (`~/.prefect/config.toml`):

```toml
[context.secrets]
JIRASECRETS.JIRATOKEN = "thetokenyoucreated"
JIRASECRETS.JIRAUSER = "xxx@example.com"
JIRASECRETS.JIRASERVER = "https://xxx.atlassian.net"
```

## Configure the Prefect Task
Now we can add the `jira_notifier` to our Prefect task:

```python
from prefect import Task
from prefect.utilities.notifications.jira_notification import jira_notifier
from prefect.engine.state import Failed

@task(
    name="jira_example_task",
    state_handlers=[
        jira_notifier(
            only_states=[Failed],
            options={"project": "DE", "issuetype": {"name": "Bug"}},
        )
    ],
)
def add(x, y):
    return x + y
```

This example task will create a Jira Bug ticket in the DE project when the run fails. 
One thing to keep in mind is that the issue type you're selecting must be available in the project you're creating the issue in. You can also change the state to, for example, `Retrying` to create a Jira Task ticket instead. An overview of the various states is available [here](https://docs.prefect.io/concepts/states/).

The created ticket will look like this:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aqn7k65n0e441ce7jxhb.png)
Break the problem
Tags: beginners, programming, productivity, tutorial
Published: 2022-08-16 13:18:16

When I was starting with programming, every time I wanted to build something I got scared. I started overthinking the problem and the complexity, saying how much work is to be done. 

And I didn’t just say it because I was lazy or something, but it really felt overwhelming at the time. Even if it was a small thing to be built. And I believe that also happened to everyone when starting out. 

That's why today I want to share with you how to break the “problem” and walk you through my process of work. 

NOTE: Through this article, when I say “problem”, it can also be a feature, an app, a website, or anything that you build/code.

First things first, coding is the last thing you should do, yes, and also probably the easiest. It will make sense in a moment, as you go through the process:

1. Understand the problem and do the research
This seems obvious, but depending on the complexity of the problem, take your time to analyse it, and don’t be afraid to ask questions. If it is a feature, take some time and look for solutions online (DO NOT COPY PASTE 😂), purpose is to take inspiration and ideas. If possible review multiple solutions and follow the best approach you can find. 
By doing this step you will start to feel less “scared” because you will see that it can be done and the blur starts to come off.

2. Solve it in your mind
Then you should think of the solution from your app viewpoint, think of how your app is structured, and how you can start applying the solution based on this. What will be the components, and how will the data flow? Usually, it is best if you use a piece of paper or something to write on.
You should not write the code on paper, only the idea, for example:
You have to create a button that deletes items from an array. In this step, you think about where this button component will be placed, how it will get the data from the main component, etc **You don’t have to write the actual code that deletes the data from the array**

3. Code it
And this part is straightforward and usually the easiest, but it requires work. By now you understand the problem, you have the solution on mind/paper, and now you implement it. (Here you write the function to delete the item from the array 😅)
7 JavaScript Project Ideas to Build Your Skills 💪📈
Tags: javascript, beginners, webdev
Published: 2022-08-16 13:14:21

Everybody knows that the best way to build your JavaScript skills is to **build projects**.

In this post, we'll explore 7 project ideas that you can start, today 😎

## [1. Virtual Keyboard](https://youtu.be/N3cq0BHDMOY)
This project involves building a pop-up keyboard in the browser. Topics covered:
* event handling
* building HTML elements
* conditional logic

{% youtube N3cq0BHDMOY %}

## [2. Reaction Game](https://youtu.be/1kDcKH7lK8A)
Test your reaction skills with this reaction game. When the background colour of the `<div>` changes, you must click as quickly as you can! Topics covered:
* usage of `setTimeout()`
* array management
* DOM interaction

{% youtube 1kDcKH7lK8A %}

## [3. Single Page App](https://youtu.be/6BozpmSjk-Y)
There's something satisfying about building a single page application. Maybe it's the absence of a browser's navigation bar, or maybe it's the support for desktop shortcuts.

Either way, it's a great project to build a wide variety of JavaScript skills. Topics covered:
* classes
* regular expressions
* building HTML elements

{% youtube 6BozpmSjk-Y %}

## [4. Meme Generator](https://youtu.be/io5FcMAdLyQ)
Apologies for the thumbnail on this video, but if you're keen to learn the HTML5 canvas, this project is one to consider. Topics covered:
* drawing on HTML5 canvas
* base 64 data URLs
* event handling

{% youtube io5FcMAdLyQ %}

## [5. Kanban Board](https://youtu.be/ijQ6dCughW8)
This is one of my all time favourite JavaScript projects. The best part about it is that you can use it for your own personal task management. Topics covered:
* drag and drop API
* local storage
* building HTML elements

{% youtube ijQ6dCughW8 %}

## [6. REST API with Express.js](https://youtu.be/TcvOgwQPsSo)
Once you build an API yourself, you gain a deeper understanding of how they work. This gives you confidence when using a third-party API in your own projects. Topics covered:
* node
* JSON
* error handling

{% youtube TcvOgwQPsSo %}

## [7. Notes App](https://youtu.be/01YKQmia2Jw)
Similar to the **Kanban Board** project, this one is great because you can use it yourself. It also covers a wide range of areas to learn. Topics covered:
* building HTML elements
* local storage
* managing state

{% youtube 01YKQmia2Jw %}

And that's it! I hope you can try at least one of these projects over the next few days. If I were to recommend one, it would certainly be the [Kanban Board] (https://youtu.be/ijQ6dCughW8) 😉

# JavaScript DOM Crash Course
You can find a complete course on the JavaScript DOM which goes over some of the topics covered in this post at the link below 👇
https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1
![Course Thumbnail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/769cuap96tu5s653bzld.jpg)

Happy coding! 😎
tsParticles 2.2.2 Released
Tags: javascript, typescript, webdev, showdev
Published: 2022-08-16 13:11:44

## tsParticles v2.2.2 Changelog

### Bug Fixes
- Fixed double mouse events on mobile using pointer events, closes #4622

---

## Social links

- [Discord](https://discord.gg/hACwv45Hme)
- [Slack](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI)
- [Telegram](https://t.me/tsparticles)
- [Reddit](https://www.reddit.com/r/tsParticles/)

---

{% github matteobruni/tsparticles %}
We're Hiring - Frontend & Fullstack 🚀
Tags: career, job
Published: 2022-08-16 13:07:12

**Who we are**
sumoo is a young Prop-Tech Start Up from Baden-Württemberg, Germany, that revolutionizes the construction industry with innovative software solutions and fundamentally changes previous construction processes. Our SaaS products represent a high level of intuitive and smart designs and link ERP systems with the Building Information Modeling method (BIM method), taking into account Big Data and AI. Our team works daily on our mission to bring efficiency back to static and slow construction processes through technology-driven solutions.


We are continuing to grow. Visit our website (www.sumoo.io) and join us on our journey!


**Our Mission** 🚀


With an overarching platform called "zapper", we want to solve the interface problems in the construction industry. To do this, we use standard Building Information Modeling processes integrated into digital business processes. Zapper sees itself as a kind of "adapter" that links to different sources and databases such as ERP systems and connects them bidirectionally. The result is an enormous increase in knowledge of the databases, which can be accessed in real time. With zapper, we are able to automate processes intelligently - with AI, blockchain and technologies of the future.


**This is you:**


- You are an ambitious coder and have excellent knowledge of JavaScript and frameworks like
React, Material UI, LESS/SASS etc.

- Ideally you have several years of practical experience in software engineering; your expertise lies in the frontend

- You have experience working in fast-paced, agile teams, working hand-in-hand with the UX/UI team and product team

- You are well-versed in content management systems, workflow automation and web performance optimization

**This awaits you:**

- You develop front-end web and ECMS SaaS-Tools

- You are responsible for the technical coordination of web projects: Improving and automating existing workflows, systems, interfaces and web performance

- Share your knowledge of best practices, clean code and frontend architectures with your team colleagues through pair programming, code reviews and in company-wide events (frontend jour fixes, communities)

- Shape the entire engineering lifecycle and drive the team forward by keeping an overview and occasionally sharing responsibility for task assignment

Sounds great? Let's get in touch! 

Matthias Fuchs
Co-Founder
✉ matthias.fuchs@sumoo.io
▶ https://www.linkedin.com/in/fuchs-matthias/
Unboxing the box model
Tags: beginners, tutorial, css, webdev
Published: 2022-08-16 08:13:19

Whenever we start building a website, we can immediately see that all elements are displayed as a box. Why is this? 🤔 **The browser represents them as rectangles according to the CSS box model.**

Every box element (like a div) has different **properties that can be customised like its width, height, padding** (space between content and borders, similar to the space between a photo and its frame), **borders** (lines around the content) and **margins** (space out of the box or div in this case).

![The box model](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zp4qk9gfde7j20017bct.png)

By default, the browser renders a box model called **content-box**, meaning, an element's width and height will be altered by the padding and border values we add. Therefore, we can calculate the total width or height of an element by summing up all properties values:

**total width = width + padding + border**

However, the content box is a bit tricky as it can get us into trouble with dimensional issues. That is why there is another box-sizing property called **border-box**, which tells the browser to not modify an element's width whenever we add some extra padding and border.

In this case, the total width already includes padding and border values, which makes the content adjust automatically.

Let's have a look at an example of both models together to see the size differences.

{% codepen https://codepen.io/pcrispitipina/pen/XWeebGz %}


Both divs or boxes have the same properties except from box-sizing. On the one hand, the first div has the content-box property, where the total width is:

width (400px) + padding (20px x 2) + border (5px x 2) = **450px**

On the other hand, the second div has the border-box property, where the total width is 350px, meaning, the borders and padding don't add any extra value.

width (400px) - padding (20px x 2) - border (5px x 2) = **350px**

In order to avoid dimensional issues, whenever you style a website, it is recommended to start like this:

![CSS start](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8xlf256nyps36rz137w7.png)



That's all folks! 🐱

![Cat in a box](https://community.codenewbie.org/remoteimages/uploads/articles/kxxoepuehc4pcjdso7ix.gif)
Digital Agency Website Using HTML CSS JavaScript
Tags: css, javascript, beginners, tutorial
Published: 2022-08-16 13:06:41

{% youtube 5J01tEPlF3A %}

How to Build Digital Agency Website Using HTML CSS JavaScript

This video will show you how to build a digital agency website using html css javascript

[Live Website](https://codewithsadee.github.io/hoolix)
[Github Repo](https://github.com/codewithsadee/hoolix)

---

HI 👋
I'm Sadee (webdev)
In this channel I make videos about Complete Responsive website.
You can checkout my channel 👇

📺 My Channel : [codewithsadee](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g)
🔔 Subscribe : [subscribe now](https://www.youtube.com/channel/UC1PZHWV6VvICTL1LgFUZq6g?sub_confirmation=1)

---

🔗 Essential links
-----------------------------
[Download the starter file to practice](https://drive.google.com/file/d/10qTkIe5fW41fD2tNb8WT04PdaawC4-tm/view?usp=sharing)

---

⏱️ Timestamps
-----------------------------
0:00 - Demo
5:37 - File structure
6:04 - Project initial
12:41 - Header
29:37 - Hero section
44:15 - About section
51:17 - Service section
1:00:11 - Feature section
1:07:18 - FAQ section
1:17:50 - Footer
1:32:53 - Media queries

---

[![Become a patreon](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fnjl14kdm5qf08hu5lop.png)](https://www.patreon.com/bePatron?u=62535867)
Code Smell | Magic Numbers
Tags: refactorit, codequality
Published: 2022-08-16 12:30:00

Hello, today we are back with the code smells refactoring series and in this case we are going to talk about code smell called **Magic Numbers**, this code smell can be detect when we use a number that lacks the proper semantics.

---

## Cause

Numbers lacking semantics make calculations harder to read.

---

## Example
As we can see in the following example we have **2 magic numbers** that are quite easy to detect since it is really complex to know what type of calculation we are performing simply by observing these values: **4.50** and **0.21**

```ts
function calculateTotal(subtotal) {
  const total = subtotal + 4.50;
  return total + (total * 0.21);
}
```

---

## Solution

By extracting both numbers to constants and giving them semantics we can see that the code is much more readable.

```ts
const SHIPPING_FEE = 4.50;
const SALES_TAX = 0.21;

function calculateTotal(subtotal) {
  const total = subtotal + SHIPPING_FEE;
  return total + (total * SALES_TAX);
}
```

---

## Benefits

- Improvement the readability and maintainability of the code.
- You will make the next person who needs to go through that part of the code very happy 😋 jiji

---

Thanks for reading me 😊
Best games 🎮 likeminecraft
Tags: gaming, minecraft, lokicraft
Published: 2022-08-16 12:25:55


everyone wants to play minecraft but it is paid don't worry here I found best alternative for Minecraft you can play for free
**1) lokicraft**
Lokicraft gives a lot of freedom of building houses it has more then 100+blocks,manymobs and better graphics compared to minecarft it is absolutely free.it offers two modes 

1. Creative

2.Survival

If you are creative and want to build beautiful houses,new structure this is game best.
Don't worry if want to live alone in an world and want to hunt,survive and get food you can do it by changing the game mode to creative.

** DEVICE Requirements**

1. At least 1gb ram
2.100mb free storage
3.android 4+
How to create circles in CSS
Tags: css, html, devops
Published: 2022-08-16 12:14:00

Let's look at a few tricks in CSS able to create basic shapes like circles.
```html
<div class="circle"></div>
```

## Border-Radius
For this case need to use the border-radius property and set the value to 50%. Then combine the height and width properties with a matching value.
```css
.circle {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: lightgreen;
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8wphtna4iy825wyscnw.png)

## Circle()
In this, the circle is created using the shape-outside property. You must also apply a clip-path with the appropriate property to make the circle appear.
```css
.circle {
  width: 100px;
  height: 100px;
  clip-path: circle();
  shape-outside: circle();
  background: yellow; 
}
```
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xug5rpk5y88kwbg8z98d.png)
iOS — Infinite Marquee Animation with SwiftUI
Tags: ios, swift, animation, programming
Published: 2022-08-16 12:11:32

Wanna Learn How to implement Infinite Marquee [Animation](https://medium.com/canopas/ios-animations-in-swiftui-with-examples-part-2-980a2df69145) with [SwiftUI](https://blog.canopas.com/swiftui-complex-navigation-made-easier-with-uipilot-5b33279f3476)? 

This article explains how to implement infinite [scrolling](https://medium.com/canopas/android-infinite-auto-scroll-with-jetpack-compose-ef8d573f8878) animations that look seamless. 

We will create a simple app with 4 colored blocks that keep moving. Later, we will also explore how we can create a common component InfiniteScrollerthat can be used to apply infinite scrolling animation to any view.

 This post is divided into 3 parts, feel free to jump around! Create basic views Apply infinite scroll animation Create InfiniteScroller component If you are in hurry and just need to apply the animation in your project, feel free to just copy InfiniteScroller in your app and you are ready to go. 

For detailed implementation, check out our [blog on medium](https://blog.canopas.com/ios-infinite-marquee-nimation-with-swiftui-e15419083ca2).
Docker Hello world
Tags: docker, beginners, devops
Published: 2022-08-16 12:01:03

### Docker

Docker is an open-source **containerisation** platform. It enables developers to package applications into containers standardized executable components combining application 
source code with the operating system (OS) libraries and dependencies required to run that code in any environment

**containerisation:**  It’s Linux kernel virtualization where you run applications in isolated user spaces called containers that use the same shared operating system.


![Linux container](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uuv1vr63co93cmtarle0.png)

### Docker ecosystem

1. Docker client
2. Docker server
3. Docker Machine
4. Docker image
5. Docker hub
6. Docker compose
7. Docker swarm


![Docker CLI](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yn8k4vyo20xaudxafsy3.png)

Note: To install docker on your machine follow these instructions.

- [Windows Docker](https://docs.docker.com/desktop/install/windows-install/)
- [Ubuntu Docker](https://docs.docker.com/desktop/install/ubuntu/)

### Hello world

Now let's do hello world so when you type the following command in that **hello-world** refers to image (docker image)

```bash
docker run hello-world
```

Docker CLI takes that command and passes it to the docker server. 

If that image is not on your computer (Image cache), it reaches out to the docker hub. docker pulls that image and creates a container out of it.


![Docker hello world](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/70sojlxs7jy25bi1yjq0.png)

Pay attention to what steps docker took to print the hello world.


![Docker hello world cli](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m5zwkaxs4m7a06nezk9r.png)

Docker has revolutionized how we build, test and deploy the software, In the next article I will explain how to build your own Docker images and deploy them.
How to Avoid Network Policies Interfering with Workload Identity on the Google Kubernetes Engine
Tags: kubernetes, googlecloud, security
Published: 2022-08-16 12:00:00

Today we stumbled upon an interesting case which I want to share as it might help you in your debugging journey.

Let's assume you have the following infrastructure setup:

- Kubernetes Cluster on the Google Kubernetes Engine
- [Workload Identity](https://cloud.google.com/kubernetes-engine/docs/concepts/workload-identity) enabled.
- `egress` [Network Policies](https://kubernetes.io/docs/concepts/services-networking/network-policies/) in use.

## Problem

You might think everything is fine, but your service which is communicating with Google APIs (like Google Cloud Storage Client Libraries, etc.) complains with something like:

```sh
Could not load the default credentials.
Browse to https://cloud.google.com/docs/authentication/getting-started for more information.
```

The first reaction is: How can this be the case when I configured Workload Identity as recommended? When looking behind the curtain it is likely that the culprit here is not Workload Identity at all.

## Cause

In our case, the root cause was a restrictive network policy which blocked the `egress` traffic to the [GKE metadata server](https://cloud.google.com/kubernetes-engine/docs/concepts/workload-identity#metadata_server).

## Solution

The solution depends slightly on the Kubernetes version you're operating.

**1.21.0-gke.1000 and later**

```yaml
apiVersion: networking.k8s.io/v1
kind: NetworkPolicy
metadata:
  name: your-network-policy
  namespace: default
spec:
  egress:
  - ports:
    - port: 988
      protocol: TCP
    to:
    - ipBlock:
        cidr: 169.254.169.252/32
  policyTypes:
  - Egress
```

**Prior versions**

```yaml
apiVersion: networking.k8s.io/v1
kind: NetworkPolicy
metadata:
  name: your-network-policy
  namespace: default
spec:
  egress:
  - ports:
    - port: 988
      protocol: TCP
    to:
    - ipBlock:
        cidr: 127.0.0.1/32
  policyTypes:
  - Egress
```
I need help
Tags: javascript, beginners
Published: 2022-08-16 11:59:18

Hey everyone, I am stuck on this task, even my team lead does not know how to do this.

So I need to hide a section when the field within that section are all hidden, this what I have so far:

var salary = {value: $('.tdannualsalary').show() };
    var salarym = { value: $('.tdsalary12monthspreceding').show() };
    var salaryincome = { value: $('.tdannualincome').show() };

    if (salary.value === $('.tdannualsalary').show() && salarym.value === $('.tdsalary12monthspreceding').show() && salaryincome.value === $('.tdannualincome').show()) {
        $('.tdsalaryearned').show();
    }
    else {
        $('.tdsalaryearned').hide();
    }
but this hides the section permanently and that's not what I want
JavaScript: Comentários
Tags: javascript
Published: 2022-08-16 11:47:00

Fala Programadores!!!!

Programar, geralmente, é uma atividade colaborativa.
Além disso, nosso próprio código pode se tornar rapidamente difícil de entender quando voltamos a ele – às vezes apenas uma hora depois!
Por esses motivos, muitas vezes é útil deixar notas em nosso código para outros desenvolvedores ou para nós mesmos.

No vídeo de hoje iremos aprender sobre comentários.
{% youtube FWdwjL77FUs %}

Curso Javascript - Gratuito.
Website: https://felipesilva.tech/