teleren/devto huggingface dataset:
deadlines
Tags: marvel, deadlines, programming, devjournal
Published: 2022-07-28 17:04:31

With all the "whistleblowers" appearing regarding the impossible task at marvel for designers deadlines, I thought it would be a good idea to bring this subject to our "domain".

With newcoming devs, I understand it's mostly about showing what you're capable of doing, or, participating in projects where you can improve your skills, but at some point you start to realize the company often projects deadlines that are undoable. This is where Scrum masters should come in...but don't.

This is one of the reasons why I believe scrum masters should be a step up (or sideways) for developers who already have some sort of experience. Otherwise, how could they know what is a good deadline? - I'm obviously not the right person to ask these questions because **obviously**, I'm no scrum master.. I'm just a normal dev. Anyways, please be careful (especially the freelancers out there) when accepting deadlines. telling them you're not able to finish a project under two weeks and definitely not doing it, are two different things. :)

ps: I recommend you take a look at Uncle Bobs clean code "Coding better world together" videos. - He picks up this topic at some point and makes it **VERY **clear what should be your pov regarding deadlines.

Take care.
How to update an array of objects in firebase Firestore?
Published: 2022-07-28 17:04:00

If your document contains an array field, you can use arrayUnion(),arrayUnion() adds elements to an array but only elements not already present.

```
  /* 1.- Imports */
  import { getFirestore, doc,updateDoc,arrayUnion } from "firebase/firestore";
  import { app } from '../../Config';

  /*2.-Initialize the connection to the database.*/
  const db = getFirestore(app);
  /*3.-Update to be done.*/
    const updateArrayCompany={
    Company:arrayUnion({Id:1001, Name:"New NAme", Active:true}
      )
    }


    const UpdateCollection=(id,value) =>{
      /*4.-indicate the collection to update.*/
      const CollectionUpdate = doc(db, "Company", id);
      /*5 Execute the update to the collection. */
      updateDoc(CollectionUpdate,updateArrayCompany).then(()=>{
      alert("Ok")
      })
      .catch((error)=>{
          alert(error.message)
        })
    }
```
Please help me this about the docker file run cmd
Published: 2022-07-28 17:02:32

RUN sed -i 's/mirrorlist/#mirrorlist/g' /etc/yum.repos.d/CentOS-Linux-* && sed -i 's|#baseurl=http://mirror.centos.org|baseurl=http://vault.centos.org|g' /etc/yum.repos.d/CentOS-Linux-*
Serverless - simplify your challenge in the cloud
Tags: serverless, database, cloud, architecture
Published: 2022-07-28 16:29:00

The serverless conversation is always focused on compute. This means that the [serverless database](https://theserverlessedge.com/finally-a-data-sharing-service-with-vendia/) is usually left until the last moment. 

It's worth spending some time upfront to consider what you need from your serverless data store. And to look at what the main [cloud providers](https://theserverlessedge.com/aws-reinvent-2021-read-about-the-best-bits/) and vendors can offer.


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

_Photo by Campaign Creators on Unsplash_

## The 7 tenets of serverless data

In the following article JAXEnter - [The 7 Tenets of Serverless Data](https://devm.io/serverless/serverless-data-tenets-174723) you can find a short list describing how the serverless data paradigm is different.  And what you need to consider.

The 7 tenets listed are:

1. - No operational overhead – No heavy lifting
2. - Elastic – all-consuming
3. - Reliability – Always available
4. - Performance – predictable and consistent
5. - Universally consistent – always correct
6. - [Security](https://theserverlessedge.com/our-guide-to-the-aws-security-pillar/) – web-native access
7. - Cost-optimized – usage-based pricing

Ultimately, the tenets help you select a data solution that will integrate well with your [serverless architecture](https://theserverlessedge.com/the-cloud-books-you-need/). Have a read of the main article. Similar to compute, serverless data is an entirely different paradigm. Selecting a serverless database is different, so there's a [different headspace](https://theserverlessedge.com/our-guide-to-the-aws-sustainability-pillar/) you need to get into for a few things. One thing is for sure; it's a powerful and exciting approach and one that will continue to rise in popularity.

## Are all databases serverless?

We have previously covered some fundamental aspects of [becoming a serverless-first engineer](https://theserverlessedge.com/how-to-become-a-serverless-first-engineer/), but this article goes beyond that. It's not advisable to create your own data solution. You have to use a service from your cloud provider or a vendor. The tenets are a guide to which databases are serverless. Like anything popular, many services declare themselves to be serverless because they have a pay-per-use model. Paying your bill is one thing, but your data needs to scale, be reliable and perform - with no operational burden. Imagine your application has a huge spike, and your database falls over? This shouldn't happen with a genuine serverless database. The tenets will help you decide. For the record, I think Fauna is an excellent choice and well worth a look, but go and decide for yourself. Read the tenets, figure out your requirements and try a few out.
E-commerce mobile app Figma UI Design
Tags: reactnative, android, javascript, ux
Published: 2022-07-28 16:20:08

**Hi everyone,
A simple UI design for react native mobile app.
😊😊😊😊😊



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

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

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

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

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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjn5sv9q4p0vjjlmq7cp.png)
Tip: 2 ways to format a string in Python
Tags: python, beginners, programming
Published: 2022-07-28 16:18:15

### f-string

[Formatted string literals](https://docs.python.org/3/reference/lexical_analysis.html?highlight=lexical%20analysis#formatted-string-literals), commonly known as f-strings, are strings prefixed with `'f`' or `'F'`. These strings can contain replacement fields, enclosed in curly braces (`{}`).

```py
name = 'John'
age = 32

print(f'{name} is {age} years old') # 'John is 32 years old'
```

### str.format()

The [`str.format()`](https://docs.python.org/3/library/stdtypes.html?highlight=str%20format#str.format) method works very much alike f-strings, the main difference being that replacement fields are supplied as arguments instead of as part of the string.

```py
name = 'John'
age = 32

print('{0} is {1} years old'.format(name, age)) # 'John is 32 years old'
```

---

_Do you like short, high-quality code snippets and articles? So do we! Visit [30 seconds of code](https://www.30secondsofcode.org/) for more articles like this one or follow us on [Twitter](https://twitter.com/30secondsofcode) for daily JavaScript, React and Python snippets!_ 👨‍💻
Linked list through recursion
Published: 2022-07-28 16:13:00


```
#include <iostream>
using namespace std;
struct Node
{
  int data;
  struct Node *next;
};

void printList(struct Node *p)
{

  if (p == NULL)
  {
    return;
  }
  cout << p->data << " ";
  printList(p->next);
}

void recursivePrintList(struct Node *p)
{

  if (p == NULL)
  {
    return;
  }
  recursivePrintList(p->next);
  cout << p->data << " ";
}
Node *insertNode(Node *head, int data)
{
  Node *temp = new Node();
  temp->data = data;
  temp->next = head;
  head = temp;
  return head;
}
int main()
{
  Node *head = NULL;
  head = insertNode(head, 1);
  head = insertNode(head, 2);
  head = insertNode(head, 3);
  head = insertNode(head, 4);
  head = insertNode(head, 5);
  printList(head);
  cout << endl;
  recursivePrintList(head);
  cout << endl;
}
```
Forward and Inverse kinematics in 2 minutes or less
Tags: gamedev, beginners
Published: 2022-07-28 16:06:48

Sometimes its hard to know what words mean. What's inverse kinematics? Well when you want your characters feet to bend to match the angle of a hill, that's Inverse Kinematics (IK)

Let's try this out in real life, go sit on your kitchen floor, now try and reach something on the counter top, but do it so that your arm is locked in an L shape 
💪<-- like that

Your hand went over your head right? You feel stupid trusting a stranger on the internet? Okay well your forearm stayed locked to your upper arm as it moved, the arm angle didn't change, considering the potential range of movement in your arm that's smart stuff, that subconscious angle calculation is called Forward Kinematics (FK), to actually reach the object from the country top, we need to try again, but this time unlock your arm and let it reach out as it would.

Your brain 🧠 did the Inverse this time, it calculated the angle of your forearm based on the length of both parts of your arm, the angle your arm needed to be to let your hand grab that thing, that's called IK!
8-Bit Learn to Code Platform!
Tags: news, beginners, tutorial, python
Published: 2022-07-28 16:05:00

👋 Hello Devs! 

I’m Sonny, Founder and Chief Vibes Officer of [Codédex](https://www.codedex.io), a brand new learn to code platform for high schoolers and college students. 

We are beyond excited to announce that we just launched! 🥳🚀🎉

https://www.codedex.io ✨

{% twitter 1552680081838989316 %}

After working at the intersection of education and technology for the past seven years, I found that project-based learning and gamification are the most effective ways to keep young students engaged in their coding journey.

Mix that in with a touch of 8-bit aesthetics, and we aim to create nothing short of a magical experience. 👾

This v1.0 launch includes:

- 📱 Mobile view
- 🔓 Challenge unlock
- 🏃‍♂️ User progress
- ⏳ User streak
- 📛 Badges
- 🛠 Project tutorials
- 🏗 React & Next.js

Please check out [Codédex](https://www.codedex.io) and let me know what you think! 🙏

P.S. Here’s the team saying hi:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jclfblid28ucmpw0mn4.gif)
The default Luos engine's examples does not compile
Tags: opensource, microservices, mcu, luos
Published: 2022-07-28 16:00:14

Luos engine provides examples for different MCUs, and a HAL for MCU families. You may change HAL definitions in *node_config.h* to fit with your design and your MCU. After the setup of your environment, building luos engine's example may create an error with CRC or IrqHandler definitions.

⏩ https://www.luos.io/faq/application-does-not-compile

Discover possible explanations for this problem and a resolution on our troubleshooting page.
DEV Developer Survey (non-offical)
Tags: programming, webdev, discuss, career
Published: 2022-07-28 15:48:00

Hey!

This is a short Google Form Survey with 8 questions about the users on DEV. 

Results will be presented here on the forum. Follow me here on DEV to get a notification when the results are published. 

I will also announce when the results are in on [Twitter](https://twitter.com/PerssonDennis_). Or if you are more traditional, just save this post to you reading list and check back later, I will mention it here.

[To the query](https://forms.gle/ygsLfyUkN9psajnj6).

Feel free to share this post or react with a ❤️ so the survey can reach out to more people.
Preview how CSS border-radius values affect an element
Published: 2022-07-28 15:45:27

```
const container = document.querySelector('#container').style;
const left = document.querySelector('#left');
const tops = document.querySelector('#top');
const right = document.querySelector('#right');
const buttom = document.querySelector('#buttom');
window.addEventListener('click',(e)=>{
  container.borderLeft = `2px solid red`; 
  container.borderTopLeftRadius = Number(left.value)+'px'; 
})
window.addEventListener('click',(e)=>{
  container.borderRight = `2px solid #e91e63`; 
  container.borderTopRightRadius = Number(tops.value)+'px'; 
})
window.addEventListener('click',(e)=>{
  container.borderTop = `2px solid #673ab7`; 
  container.borderBottomLeftRadius = Number(right.value)+'px'; 
})
window.addEventListener('click',(e)=>{
  container.borderBottom = `2px solid #009688`;
   
  container.borderBottomRightRadius = Number(buttom.value)+'px'; 
})
```
   **![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yv525ddbhoa0n1bkpqcx.png)
    **
Tekken Tag Tournament 2
Published: 2022-07-28 15:29:38

[Tekken tag tournament 2](https://apkseagle.com/tekken-tag-tournament-2-mod-apk) is a story of the Tekken fighting games series, it is the legendary two-on-two fighting game, which is now available for PC. The most valuable thing about this version is that it only consumes 65 megabytes of memory. it is a 3d fighting game with nearly all the franchise characters. Tekken tag tournament is a very fun fighting game which we can enjoy alone as well as with our friends or teammate. It is one of the most attainable versions.
Car Parking Multiplayer Mod Apk
Published: 2022-07-28 15:26:02

[Car Parking Multiplayer (MOD, Unlimited Money)](https://legalapks.com/car-parking-multiplayer-mod-apk) an innovative take on the popular parking genre. The gameplay is based on two different mechanics, so you have to complete various tasks, as in the classic representatives of the genre. At the same time, the game has a completely open world with freedom of movement, and in addition you can appreciate a full-fledged multiplayer with hundreds of real players. Licensed vehicles can be upgraded and customized so you can create in Car Parking Multiplayer mod apk unique designs.
Pick a Random Card using Python
Tags: beginners, programming, tutorial, python
Published: 2022-07-28 15:22:00

There are so many card games today where you choose a card at random from a deck of cards to create an event. This is the feature of every card game today because you have to choose a card at random and once you choose a card it becomes an event. So in this article, I am going to walk you through a tutorial on how to pick a random card using Python.

**Pick a Random Card using Python**
To pick a random card using Python you first have to store all the cards in a data structure. So before storing a card in a data structure let’s understand what types of cards are there in a deck of cards. Below is a table that shows the type of cards present in a deck of cards:

| Spade | Club | Diamond | Heart |
| --------- |:---------:| -------:| -------:|
| 1 King | 1 King| 1 King| 1 King |
| 1 Queen | 1 Queen | 1 Queen | 1 Queen |
| 1 Jack | 1 Jack| 1 Jack| 1 Jack |
| 1 Ace | 1 Ace | 1 Ace | 1 Ace  |
| 2-10 Cards | 2-10 Cards| 2-10 Cards| 2-10 Cards |
| Total = 13| Total = 13| Total = 13| Total = 13 |


So according to the above table, a deck of cards have four sets of cards including hearts, clubs, spades and diamonds. These sets of cards are known as suites, each suite has thirteen cards which starts from 2 to 10 and then are continued with Jack, Queen, king and Ace in each suite.

So to pick a random card from a deck of cards, I will create two Python lists:

1. one for storing the suits
2. another for storing the ranks of cards.

So below is how we can write a Python program to pick a random card:

```
import random
cards = ["Diamonds", "Spades", "Hearts", "Clubs"]
ranks = [2, 3, 4, 5, 6, 7, 8, 9, 10, "Jack", "Queen", "King", "Ace"]

def pick_a_card():
    card = random.choices(cards)
    rank = random.choices(ranks)
    return(f"The {rank} of {card}")

print(pick_a_card())
```

```
**Output:**
The ['Jack'] of ['Diamonds']
```
**Summary**

So this is how we can write a Python program to draw a random card from a deck of cards. You can also implement the same strategy for creating a complete card game. I hope you liked this article on how to draw a random card using Python. Feel free to ask your valuable questions in the comments section below.
Vanilla Web Components Inline Click Handler
Published: 2022-07-28 15:18:00

When we're setting up inline click handlers inside vanilla web components, `this` below refers to `h1` element. 

```javascript
export default class wc_parent extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({mode: 'open'})
  }

  render() {
    const template = document.createElement('template')
    template.innerHTML = `
      <h1 onclick="this.handle_click(event)">hello</h1>
      <style>
        :host {
          display: block;
        }
      </style>
    `

    this.shadowRoot.appendChild(
      template.content.cloneNode(true)
    )
  }

  handle_click(e) {
    console.log(e)
  }

  connectedCallback() {
    this.render()
  }
}
```

If we want to handle inline click, we'll need to make it work like this, inside `connectedCallback()`:

```javascript
connectedCallback() {
  this.shadowRoot.addEventListener('click', this.handle_click)
}
```

Life will be a bit easier if we can make `this` inside `onclick="this.handle_click(event)"` points to the component instead of `window` object, like React. I was thinking adding a property on window and points to this component `window[this.localName] = this`, and then replace `this` to `window[this.localName]` inside `render()` method.
```javascript
export default class wc_parent extends HTMLElement {
  constructor() {
    super()
    this.attachShadow({mode: 'open'})
    window[this.localName] = this 
  }

  render() {
    const template = document.createElement('template')
    template.innerHTML = `
      <h1 onclick="this.handle_click(event)">hello</h1>
      <style>
        :host {
          display: block;
        }
      </style>
    `
    // replace this to window['wc-parent']
    template.innerHTML = template.innerHTML.replace(
      /this/g, 
      `window['${this.localName}']`
    )
 
    this.shadowRoot.appendChild(
      template.content.cloneNode(true)
    )
  }

  handle_click(e) {
    console.log(e)
  }

  connectedCallback() {
    this.render()
  }
}
```

Now this is how it displays in front end if we inspect the HTML elements. This part `onclick="window['wc-parent'].handle_click(event)"` makes sense to me as it clearly indicate that we can find this method inside `wc-parent` component.

```html
<wc-parent>
  #shadow-root (open)
    <h1 onclick="window['wc-parent'].handle_click(event)">hello</h1>
</wc-parent>

```
What do you want to see on the settings page of Social Media Blocks?🚀
Tags: discuss, google, extension, help
Published: 2022-07-28 15:16:00

The complete source code of this project can be found here on [Github](https://github.com/JavascriptDon/Social-Media-Blocks-Extension).

I'm planning on finishing this extension with a settings page that has a few options for the user. 

And in this post, I would love to discuss suggestions with fellow developers that want to make a contribution to this project! 

You don't have to know for sure, but I'd love to hear any thoughts. 

Comment down below 👇
How to add Prettier code formatter to your project?
Tags: tutorial, javascript, css, cli
Published: 2022-07-28 14:59:00

You can use Prettier to make your code more readable and consistent with your style guide. There are several ways to start **Prettier** automatically, these are the most popular when using Git:

## 1. pretty-quick

Use library *pretty-quick* to format your changed or staged files.
```
npx husky-init
npm install --save-dev pretty-quick
npx husky set .husky/pre-commit "npx pretty-quick --staged"
```
## 2. Shell script

Save this script as `.git/hooks/pre-commit` and give it execute permission:
```
#!/bin/sh
FILES=$(git diff --cached --name-only --diff-filter=ACMR | sed 's| |\\ |g')
[ -z "$FILES" ] && exit 0

# Prettify all selected files
echo "$FILES" | xargs ./node_modules/.bin/prettier --ignore-unknown --write

# Add back the modified/prettified files to staging
echo "$FILES" | xargs git add

exit 0
```
If git is reporting that your prettified files are still modified after committing, you may need to add a [post-commit script to update git’s index](https://github.com/prettier/prettier/issues/2978#issuecomment-334408427).

Add something like the following to `.git/hooks/post-commit`:
```
#!/bin/sh
git update-index -g
```
## Configure rules
Create a `*.prettierrc` file at the root of your project to configure your prettier rules.

Here's an example file containing some popular rules:

```
{
  "semi": true",
  "trailingComma": "all",
  "singleQuote": true,
  "printWidth": 70,
  "arrowParens": "always",
  "tabWidth": 2
}
```
For everything you don't want to format, create a *.prettierignore* file:
```
node_modules/
package.json
```

## Manual Run & Fix
To manual run via CLI, add a command to *package.json* and run `npm run format`.
```
{
 "scripts": {
  "format": "prettier --write ."
 }
}
```
Bootstrap 5 Custom Alert
Tags: bootstrap, webdev, uiweekly, css
Published: 2022-07-28 14:57:48


Bootstrap 5 Custom Alert

In this custom alert, we used unique background colours. Also, we modify the bootstrap class CSS properties in this custom bootstrap 5 alerts.

You can use this alert in the admin dashboard or any message you want to show in the notification view. For the mobile view, we change only font size and reset it like a desktop view.

Make it yours now by using it, downloading it, and please share it. we will design more elements for you.

[Source Code](https://w3hubs.com/bootstrap-5-custom-alert/)
Mouse over leaflet problem
Tags: leaflet, react, javascript
Published: 2022-07-28 14:50:00

hello guys!
i'm facing a problem of mouseover event  in leaflet  
 
here is my code :


```
function highlightFeature(e) {
        var layer = e.target;
        const { name, CWILAYA } = e.target.feature.properties;
        setSelected({
            name: name,
            CWILAYA: CWILAYA

        });
        layer.setStyle({
            weight: 6,// change the weight  of  a state 
            fillOpacity: 1
        });
        if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
            layer.bringToFront();
        }
    }
function onEachFeature(feature, layer) {
            layer.on({
                mouseover: highlightFeature,// call the function when mouseover  
            });
```

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

when i hover ,the weight of the city  changes for 2s and it doesn't stay highlighted even though the mouse is over the city 

can you please help me !
thank you